<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" / >
<!-- Primary Meta Tags -->
< title > theme.park - A collection of themes/skins for your favorite apps!< / title >
< meta name = "title" content = "theme.park - A collection of themes/skins for your favorite apps!" >
< meta name = "theme-color" content = "#12afa0" >
< meta name = "description" content = "theme.park contains 48 themed applications, with css addons on certain themes. Installation methods include custom docker mods for linuxserver.io containers, custom scripts for select Hotio containers and multiple examples of subfiltering using webservers like Nginx and Apache" >
<!-- Google / Search Engine Tags -->
< meta itemprop = "name" content = "theme.park - A collection of themes/skins for your favorite apps!" >
< meta itemprop = "description" content = "theme.park contains 48 themed applications, with css addons on certain themes. Installation methods include custom docker mods for linuxserver.io containers, custom scripts for select Hotio containers and multiple examples of subfiltering using webservers like Nginx and Apache" >
< meta itemprop = "image" content = "https://theme-park.dev/resources/landing-page/assets/meta_image.jpg" >
<!-- Open Graph / Facebook -->
< meta property = "og:type" content = "website" >
< meta property = "og:site_name" content = "theme.park" >
< meta property = "og:url" content = "https://theme-park.dev/" >
< meta property = "og:title" content = "theme.park - A collection of themes/skins for your favorite apps!" >
< meta property = "og:description" content = "theme.park contains 48 themed applications, with css addons on certain themes. Installation methods include custom docker mods for linuxserver.io containers, custom scripts for select Hotio containers and multiple examples of subfiltering using webservers like Nginx and Apache" >
< meta property = "og:image" content = "https://theme-park.dev/resources/landing-page/assets/meta_image.jpg" >
<!-- Twitter -->
< meta property = "twitter:card" content = "summary_large_image" >
< meta property = "twitter:url" content = "https://theme-park.dev/" >
< meta property = "twitter:title" content = "theme.park - A collection of themes/skins for your favorite apps!" >
< meta property = "twitter:description" content = "theme.park contains 48 themed applications, with css addons on certain themes. Installation methods include custom docker mods for linuxserver.io containers, custom scripts for select Hotio containers and multiple examples of subfiltering using webservers like Nginx and Apache" >
< meta property = "twitter:image" content = "https://theme-park.dev/resources/landing-page/assets/meta_image.jpg" >
<!-- Favicon -->
< link rel = "icon" type = "image/x-icon" href = "resources/landing-page/assets/favicon.ico" / >
<!-- Font Awesome icons (free version) -->
< script src = "https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin = "anonymous" > < / script >
<!-- Google fonts -->
< link href = "https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel = "stylesheet" / >
< link href = "https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic"
rel="stylesheet" type="text/css" />
<!-- Third party plugin CSS -->
< link href = "https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"
rel="stylesheet" />
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" / >
<!-- Core theme CSS (includes Bootstrap) -->
< link href = "resources/landing-page/css/styles.css?v=1.1" rel = "stylesheet" / >
< link rel = "stylesheet" href = "resources/landing-page/css/jquery-bg-slideshow.css" >
< link rel = "stylesheet" href = "resources/landing-page/css/custom.css?v=2.4" >
< / head >
< body id = "page-top" >
<!-- Navigation -->
< nav class = "navbar navbar-expand-lg navbar-light fixed-top py-3" id = "mainNav" >
< div class = "container" >
< a class = "navbar-brand js-scroll-trigger" href = "#page-top" > < img class = "branding"
src="resources/landing-page/assets/img/themepark-logo.png" alt="">< / a >
< button class = "navbar-toggler navbar-toggler-right" type = "button" data-toggle = "collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">< span class = "navbar-toggler-icon" > < / span > < / button >
< div class = "collapse navbar-collapse" id = "navbarResponsive" >
< ul class = "navbar-nav ml-auto my-2 my-lg-0" >
< li class = "nav-item" > < a class = "nav-link js-scroll-trigger" href = "https://docs.theme-park.dev" > < i
class="fas fa-book">< / i > Docs< / a > < / li >
< li class = "nav-item" > < a class = "nav-link js-scroll-trigger"
href="https://github.com/gilbn/theme.park">< i class = "fab fa-github" > < / i > Github< / a > < / li >
< li class = "nav-item" > < a class = "nav-link js-scroll-trigger"
href="https://docs.theme-park.dev/discord">< i class = "fab fa-discord" > < / i > Discord< / a > < / li >
< li class = "nav-item" > < a class = "nav-link js-scroll-trigger"
href="https://github.com/sponsors/GilbN">< i class = "fas fa-heart" > < / i > Sponsor< / a > < / li >
< li style = "padding: 0 1rem;" >
< a class = "github-button" href = "https://github.com/gilbn/theme.park" data-show-count = "true"
aria-label="Star gilbn/theme.park on GitHub">Star< / a >
< / li >
< li style = "padding: 0 1rem;" >
< a class = "github-button" href = "https://github.com/gilbn/theme.park/fork"
data-icon="octicon-repo-forked" data-show-count="true"
aria-label="Fork gilbn/theme.park on GitHub">Fork< / a >
< / li >
< / ul >
< / div >
< / div >
< / nav >
<!-- Masthead -->
<!-- -->
< header class = "masthead bg" data-current = "0"
data-images="resources/landing-page/assets/img/slides/1.jpg,resources/landing-page/assets/img/slides/2.jpg,resources/landing-page/assets/img/slides/3.jpg,resources/landing-page/assets/img/slides/4.jpg,resources/landing-page/assets/img/slides/5.jpg,resources/landing-page/assets/img/slides/6.jpg,resources/landing-page/assets/img/slides/7.jpg,
resources/landing-page/assets/img/slides/8.jpg,resources/landing-page/assets/img/slides/9.jpg,resources/landing-page/assets/img/slides/10.jpg,resources/landing-page/assets/img/slides/11.jpg,resources/landing-page/assets/img/slides/12.jpg,resources/landing-page/assets/img/slides/13.jpg"
data-transitionDelay="1000" data-transitionSpeed="2000" data-transitionEffect="fade-in" data-randomize="false"
data-initialBackground="4" data-debug="false" data-slidecontrols.enabled="false"
data-gradient="linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%)">
< div class = "container h-100" >
< div class = "row h-100 align-items-center justify-content-center text-center" >
< div class = "col-lg-10 align-self-end" >
< h1 class = "text-uppercase text-white font-weight-bold" > Custom themes for your favorite apps!< / h1 >
< hr class = "divider my-4" / >
< / div >
< div class = "col-lg-8 align-self-baseline" >
< p id = "tag-line" class = "text-white-75 font-weight-light mb-5" > ...< / p >
< a class = "btn btn-primary btn-xl js-scroll-trigger" href = "#about" > Find Out More< / a >
< / div >
< / div >
< / div >
< / header >
<!-- About -->
< section class = "page-section bg-primary" id = "about" >
< div class = "container" >
< div class = "row justify-content-center" >
< div class = "col-lg-8 text-center" >
< h2 id = "theme-header-text" class = "text-white mt-0" > ...< / h2 >
< hr class = "divider light my-4" / >
< p class = "text-white-50 mb-1" id = app-count > ...< / p >
< p class = "text-white-50 mb-1" > Installation methods include custom < a
href="https://blog.linuxserver.io/2019/09/14/customizing-our-containers/">docker mods< / a >
for < a href = "https://linuxserver.io" > linuxserver.io< / a > containers, < / p >
< p class = "text-white-50 mb-5" > custom scripts for select < a href = "https://hotio.dev/" > Hotio< / a >
containers
and multiple examples of subfiltering using webservers like Nginx and Apache< / p >
< p class = "text-white-50 mb-5" id = "theme-count" > ... < / p >
< a class = "btn btn-primary btn-xl js-scroll-trigger" href = "#services" > Get Started!< / a >
< / div >
< / div >
< / div >
< div class = "col justify-content-center pt-5 all-apps container" >
< div id = "all-apps" class = "row justify-content-center" >
< / div >
< / div >
< / section >
<!-- Services -->
< section class = "page-section" id = "services" >
< div class = "container" style = "min-width: 90%;" >
< h2 class = "text-center mt-0" > How to get started< / h2 >
< hr class = "divider my-4" / >
< div class = "row" >
< div class = "col-lg col-md-6 text-center" >
< div class = "mt-5" >
< i class = "fas fa-4x fa-book text-primary mb-4" > < / i >
< h3 class = "h4 mb-2" > Theme Docs< / h3 >
< p class = "text-white-50 mb-0" > Head over to the < a
href="https://docs.theme-park.dev/">documentation< / a > page for more information on each
theme!< / p >
< / div >
< / div >
< div class = "col-lg col-md-6 text-center" >
< div class = "mt-5" >
< i class = "fab fa-4x fa-github text-primary mb-4" > < / i >
< h3 class = "h4 mb-2" > Find us on Github< / h3 >
< p class = "text-white-50 mb-0" > Having issues with a theme? Let us know on < a
href="https://github.com/gilbn/theme.park">Github!< / a > < / p >
< / div >
< / div >
< div class = "col-lg col-md-6 text-center" >
< div class = "mt-5" >
< i class = "fab fa-4x fa-discord text-primary mb-4" > < / i >
< h3 class = "h4 mb-2" > Discord Community< / h3 >
< p class = "text-white-50 mb-0" > Need live support? Head over to our < a
href="https://docs.theme-park.dev/discord">Discord< / a > server!< / p >
< / div >
< / div >
< div class = "col-lg col-md-6 text-center" >
< div class = "mt-5" >
< i class = "fas fa-4x fa-palette text-primary mb-4" > < / i >
< h3 class = "h4 mb-2" > < a href = "https://docs.theme-park.dev/community-themes/" > Community Themes!< / a > < / h3 >
< p class = "text-white-50 mb-0" > Got a good < a href = "https://docs.theme-park.dev/community-themes/" > color scheme< / a > you'd like to see added? PR it!< / p >
< / div >
< / div >
< div class = "col-lg col-md-6 text-center" >
< div class = "mt-5" >
< i class = "fas fa-4x fa-heart text-primary mb-4" > < / i >
< h3 class = "h4 mb-2" > Made with Love< / h3 >
< p class = "text-white-50 mb-0" > Is it really open source if it's not made with love?< / p >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- Portfolio -->
< section class = "page-section pt-0" >
< div class = "container pb-3" >
< div class = "row h-100 align-items-center justify-content-center text-center" >
< div class = "col-lg-10 align-self-end" >
< / div >
< div class = "col-lg-8 align-self-baseline" >
< button id = "switch-theme" class = "btn btn-primary btn-xl animate__animated animate__pulse animate__infinite" > Click Me!< / button >
< / div >
< / div >
< / div >
< / section >
< section class = "page-section pb-1" id = "themes" >
< div class = "container" >
< h2 class = "text-center mt-0" > Official theme options< / h2 >
< h6 class = "text-center mt-0" > Click here for the < a href = "https://docs.theme-park.dev/community-themes/" > community themes< / a > < / h6 >
< hr class = "divider my-4" / >
< / div >
< / section >
< div id = "portfolio" class = "theme-overview" >
< div class = "container-fluid p-0" >
< div class = "row no-gutters d-flex justify-content-center" id = "all-themes" >
< / div >
< / div >
< / div >
<!-- Footer -->
< footer class = " py-5" >
< div class = "container" >
< div class = "small text-center text-white-50" >
Copyright ©
<!-- This script automatically adds the current year to your website footer -->
<!-- (credit: https://updateyourfooter.com/) -->
< script >
document.write(new Date().getFullYear());
< / script >
- GilbN
< / div >
< / div >
< / footer >
<!-- Bootstrap core JS -->
< script src = "https://code.jquery.com/jquery-3.5.1.min.js" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" > < / script >
<!-- Third party plugin JS -->
< script src = "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" > < / script >
<!-- Core theme JS -->
< script src = "resources/landing-page/js/scripts.js?v=1.6" > < / script >
< script src = "resources/landing-page/js/jquery-bg-slideshow.js?v=1" > < / script >
< script type = "text/javascript" >
$(function () {
$(".bg").bgSlideShow();
});
< / script >
< script async defer src = "https://buttons.github.io/buttons.js" > < / script >
< / body >
< / html >
