diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6081fde --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +_site +.idea/* +.fleet/* +*.iml \ No newline at end of file diff --git a/css/style.css b/css/style.css index ad7e825..fa342a5 100644 --- a/css/style.css +++ b/css/style.css @@ -1 +1,422 @@ -@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);*,ul{margin:0}.header .logo,ul{padding:0}body{line-height:1.5;font-family:Roboto,sans-serif;color:#333}a,h1,h2,h3,h4,h5,p{margin:0;padding:0}p{font-size:17px;font-weight:400}body.hidden-scrolling{overflow-y:hidden}*{box-sizing:border-box}.container{max-width:1170px;margin:auto}ul{list-style:none}a{text-decoration:none}.header{background-color:#fff}.header.sticky{position:fixed;top:0;width:100%;z-index:1000}.header-main{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.header .close-nav-menu,.header .open-nav-menu{width:40px;cursor:pointer;display:none;align-items:center}.logo img{width:45px}.logo h3{font-size:22px;font-weight:700;color:#000}.header .nav-menu{padding:0 15px}.header .menu>.menu-item{display:inline-block;margin-left:30px;position:relative}.header .menu>.menu-item>a{display:block;font-size:16px;color:#1d1d1b;font-weight:700;transition:.3s}li.menu-item.get_apps{background:#fb872b;padding:10px 20px;border-radius:25px;transition:.2s}li.menu-item.get_apps:hover{background:#1d1d1b}li.menu-item.get_apps a{color:#fff!important}.header .menu>.menu-item:hover>a,.header .menu>.menu-item>.sub-menu>.menu-item>a:hover,.ratting i{color:#fb872b}.header .open-nav-menu{height:34px;margin-right:15px;justify-content:center;background-color:#dadada;padding:15px 10px}.header .open-nav-menu span{display:block;height:3px;width:24px;background-color:#000;position:relative}.header .open-nav-menu span:after,.header .open-nav-menu span:before{content:'';position:absolute;left:0;width:100%;height:100%;background-color:#000;box-sizing:border-box}.header .open-nav-menu span:before{top:-7px}.header .open-nav-menu span:after{top:7px}.header .close-nav-menu{height:40px;background-color:#fff;margin:0 0 15px 15px;justify-content:center}.header .close-nav-menu img{width:16px}.header .menu-overlay{position:fixed;z-index:999;background-color:rgba(0,0,0,.5);left:0;top:0;height:100%;width:100%;visibility:hidden;opacity:0;transition:.3s}@media(max-width:991px){.header .menu-overlay.active{visibility:visible;opacity:1}.header .nav-menu{position:fixed;right:-280px;visibility:hidden;width:280px;height:100%;top:0;overflow-y:auto;background-color:#fff;z-index:1000;padding:15px 0;transition:.5s}.menu{text-align:center}.header .nav-menu.open{visibility:visible;right:0}.header .menu>.menu-item{display:block;margin:15px 0}.header .close-nav-menu,.header .open-nav-menu{display:flex}.header .logo{padding:0 15px}}.apps_content{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:60px 0}.app_logo img{filter:drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));border-radius:50px}.iso_button img{width:40%}.remainder img{width:20%}.apps_content h1{font-weight:900;font-size:68px}.apps_content h5{font-weight:500;font-size:22px}.feature_content{padding:30px;margin-top:20px;height:280px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.common_title2 h4{font-weight:700;font-size:25px}.feature_content i{font-size:25px;color:#149ddd;width:70px;height:70px;background:#dff3fc;display:flex;justify-content:center;align-items:center;border-radius:24px;transition:.3s ease-in-out;box-shadow:0 25px 50px -10px rgba(100,44,0,.07)}.Headline h4{font-weight:900;font-size:40px}.reviews{background-color:rgba(245 245 245)}.review_content{padding:30px 40px 35px;border-radius:24px;background-color:#fff;margin-top:30px}.common_title3 h4{font-size:18px;font-weight:700}.profile img{width:50px;height:50px;margin-right:16px;border-radius:50%;box-shadow:0 15px 30px -10px rgba(100,44,0,.07);object-fit:cover}footer{background:#292f36;color:#bbbfc3}.footer_menu{text-align:right}.footer_menu a{color:#bbbfc3;padding-right:5px}@media (max-width:991px){.apps_content h1{font-size:45px}.Headline h4{font-size:33px}.iso_button img,.remainder img{width:50%}.feature_content{height:250px}footer{text-align:center!important}.footer_menu{text-align:center}.feature_content i{font-size:18px;width:50px;height:50px}li.menu-item.get_apps{background:#fff;padding:0;border-radius:25px;transition:.2s}li.menu-item.get_apps:hover{background:#fff}li.menu-item.get_apps a{color:#1d1d1b!important}li.menu-item.get_apps a:hover{color:#fb872b!important}} \ No newline at end of file +/* open sanse font */ +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); + +body { + line-height: 1.5; + font-family: "Roboto", sans-serif; + color: #333333; +} + +h1, h2, h3, h4, h5, h5, a, p { + margin: 0; + padding: 0; +} + +p { + font-size: 17px; + font-weight: 400; +} + +body.hidden-scrolling { + overflow-y: hidden; +} + +* { + margin: 0; + box-sizing: border-box; +} + +.container { + max-width: 1170px; + margin: auto; +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +a { + text-decoration: none; +} + +/*header*/ +.header { + background-color: #ffffff; +} + +.header.sticky { + position: fixed; + top: 0; + width: 100%; + z-index: 1000; +} + + +.header-main { + + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 0; +} + +.header .logo { + padding: 0px; +} + +.logo img { + width: 45px; + +} + +.logo h3 { + font-size: 22px; + font-weight: 700; + color: #000; +} + +.header .nav-menu { + padding: 0 15px; +} + +.header .menu > .menu-item { + display: inline-block; + margin-left: 30px; + position: relative; +} + +.header .menu > .menu-item > a { + display: block; + font-size: 16px; + color: #1d1d1b; + font-weight: 700; + transition: all 0.3s ease; +} + +li.menu-item.get_apps { + background: #FB872B; + padding: 10px 20px; + border-radius: 25px; + transition: 0.2s; +} + +li.menu-item.get_apps:hover { + background: #1d1d1b; +} + +li.menu-item.get_apps a { + color: #fff !important; +} + + +.header .menu > .menu-item > .sub-menu > .menu-item > a:hover, +.header .menu > .menu-item:hover > a { + color: #FB872B; +} + + +.header .open-nav-menu { + height: 34px; + width: 40px; + margin-right: 15px; + display: none; + align-items: center; + justify-content: center; + cursor: pointer; + background-color: #dadada; + padding: 15px 10px; +} + +.header .open-nav-menu span { + display: block; + height: 3px; + width: 24px; + background-color: #000000; + position: relative; +} + +.header .open-nav-menu span:before, +.header .open-nav-menu span:after { + content: ''; + position: absolute; + left: 0; + width: 100%; + height: 100%; + background-color: #000000; + box-sizing: border-box; +} + +.header .open-nav-menu span:before { + top: -7px; +} + +.header .open-nav-menu span:after { + top: 7px; +} + +.header .close-nav-menu { + height: 40px; + width: 40px; + background-color: #ffffff; + margin: 0 0 15px 15px; + cursor: pointer; + display: none; + align-items: center; + justify-content: center; +} + +.header .close-nav-menu img { + width: 16px; +} + +.header .menu-overlay { + position: fixed; + z-index: 999; + background-color: rgba(0, 0, 0, 0.5); + left: 0; + top: 0; + height: 100%; + width: 100%; + visibility: hidden; + opacity: 0; + transition: all 0.3s ease; +} + +/* responsive */ + +@media (max-width: 991px) { + .header .menu-overlay.active { + visibility: visible; + opacity: 1; + } + + .header .nav-menu { + position: fixed; + right: -280px; + visibility: hidden; + width: 280px; + height: 100%; + top: 0; + overflow-y: auto; + background-color: #ffffff; + z-index: 1000; + padding: 15px 0; + transition: all 0.5s ease; + } + + .menu { + text-align: center; + } + + .header .nav-menu.open { + visibility: visible; + right: 0px; + } + + .header .menu > .menu-item { + display: block; + margin: 15px 0px; + } + + .header .close-nav-menu, + .header .open-nav-menu { + display: flex; + } + + .header .logo { + padding: 0 15px; + } + + .logo img { + } + +} + +.intro_content { + padding-top: 24px; +} + +.apps_content { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 60px 0px; +} + +.imprint_content { + display: flex; + align-items: start; + justify-content: start; + flex-direction: column; + padding-top: 60px; + padding-bottom: 300px; +} + +.app_logo img { + filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5)); + border-radius: 50px; +} + +.iso_button img { + width: 40%; +} + +.remainder img { + width: 20%; +} + +.apps_content h1 { + font-weight: 900; + font-size: 68px; +} + +.apps_content h5 { + font-weight: 500; + font-size: 22px; +} + +.feature_content { + padding: 30px; + margin-top: 20px; + height: 280px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.feature_content { + text-align: center; +} + +.common_title2 h4 { + font-weight: 700; + font-size: 25px; +} + +.feature_content i { + font-size: 25px; + color: #149ddd; + width: 70px; + height: 70px; + background: #dff3fc; + display: flex; + justify-content: center; + align-items: center; + border-radius: 24px; + transition: all 0.3s ease-in-out; + box-shadow: 0 25px 50px -10px rgba(100, 44, 0, .07); + +} + +.Headline h4 { + font-weight: 900; + font-size: 40px; +} + +.reviews { + background-color: rgba(245 245 245); +} + +.review_content { + padding: 30px 40px 35px; + border-radius: 24px; + background-color: #fff; + margin-top: 30px; +} + +.ratting i { + color: #FB872B; +} + +.common_title3 h4 { + font-size: 18px; + font-weight: 700; +} + +.profile img { + width: 50px; + height: 50px; + margin-right: 16px; + border-radius: 50%; + box-shadow: 0 15px 30px -10px rgba(100, 44, 0, .07); + object-fit: cover; +} + + +footer { + background: #292f36; + color: #BBBFC3; + clear: both; + position: relative; + margin-top: 60px +} + +.footer_menu { + text-align: right; +} + +.footer_menu a { + color: #BBBFC3; + padding-right: 5px; +} + + +@media (max-width: 991px) { + .apps_content h1 { + font-size: 45px; + } + + .Headline h4 { + font-size: 33px; + } + + .iso_button img { + width: 50%; + } + + .remainder img { + width: 50%; + } + + .feature_content { + height: 250px; + } + + footer { + text-align: center !important; + } + + .footer_menu { + text-align: center; + } + + .feature_content i { + font-size: 18px; + width: 50px; + height: 50px; + + } + + li.menu-item.get_apps { + background: #ffffff; + padding: 0px; + border-radius: 25px; + transition: 0.2s; + } + + li.menu-item.get_apps:hover { + background: #ffffff; + } + + li.menu-item.get_apps a { + color: #1d1d1b !important; + } + + li.menu-item.get_apps a:hover { + color: #FB872B !important; + } +} diff --git a/img/android_availeble.png b/img/android_availeble.png deleted file mode 100644 index 41f2c3b..0000000 Binary files a/img/android_availeble.png and /dev/null differ diff --git a/img/android.png b/img/google_play.png similarity index 100% rename from img/android.png rename to img/google_play.png diff --git a/img/testimonial-1.jpeg b/img/testimonial-1.jpeg deleted file mode 100644 index ef0ca6d..0000000 Binary files a/img/testimonial-1.jpeg and /dev/null differ diff --git a/img/testimonial-2.jpeg b/img/testimonial-2.jpeg deleted file mode 100644 index acac67f..0000000 Binary files a/img/testimonial-2.jpeg and /dev/null differ diff --git a/img/testimonial-3.jpeg b/img/testimonial-3.jpeg deleted file mode 100644 index 1ca0a18..0000000 Binary files a/img/testimonial-3.jpeg and /dev/null differ diff --git a/imprint.html b/imprint.html new file mode 100644 index 0000000..621ba06 --- /dev/null +++ b/imprint.html @@ -0,0 +1,105 @@ + + + + Imprint Moviebase | Discover and track your movies & TV shows. + + + + + + + + + + + + + + + + +
+
+
+ + + +
+ +
+
+
+ + +
+
+
+ + + +
+
+
+
+
+
+

Imprint

+
+
+

Christian Krüger
Cotheniusstr. 4
10407 Berlin
Germany
support@moviebase.app

VAT ID: DE315768729

+

This product uses the TMDb API but is not endorsed or certified by TMDb.

+
+
+
+
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index cd7791c..b65c20f 100644 --- a/index.html +++ b/index.html @@ -1 +1,256 @@ -Moviebase | Discover and track your favorite movies & series.

Moviebase

Discover and track your
favorite movies & series.

Feature List

Organize

Add what you want to watch and mark you watched content in your own lists.

Content

Find movies & TV shows from the largest community network TMDB in your language.

Reminders

Get notifications for upcoming episodes and movies. Never miss an episode!

Why people love
Moviebase

This is by far the best movie informer ever! Everything is up to date and its plain and simple, nothing complicated.

Taru A.

The Netherlands

Nice app to be notified about your favorite series next episode and to know how much longer you need to wait until next season.

Afrooz R.

Noida, India

Exactly what I needed and super easy to use! The search system is awesome and I've yet to search and not find something.

Jade K.

New York, USA

Available for Android

\ No newline at end of file + + + + Moviebase | Discover and track your favorite movies & series. + + + + + + + + + + + + + + + + +
+
+
+ + + +
+ +
+
+
+ + +
+
+
+ + + +
+
+
+
+
+ +
+

Moviebase

+
Discover and track your movies & TV shows.
+ +
+
+ + + +
+
+
+
+
+
+ + + +
+
+
+
+

Features

+
+
+
+
+ +
+

Organize

+
+

Add what you want to watch and mark you watched content in your own lists.

+
+
+
+
+ +
+

Content

+
+

Find movies & TV shows from the largest community network TMDB in your language.

+
+
+
+
+ +
+

Reminders

+
+

Get notifications for upcoming episodes and movies. Never miss an episode!

+
+
+
+
+
+
+ + +
+
+
+
+

Why people love Moviebase

+
+
+
+
+

+ This is by far the best movie informer ever! Everything is up to date and its plain and + simple, nothing complicated.

+
+ + + + + +
+
+ + + +
+

Taru A.

+

The Netherlands

+
+
+
+
+
+
+

Nice app to be notified about your favorite series next episode and to know how much longer + you need to wait until next season.

+
+ + + + + +
+
+ + + +
+

Afrooz R.

+

Noida, India

+
+
+
+
+
+
+

+ Exactly what I needed and super easy to use! The search system is awesome and I've yet to + search and not find something.

+
+ + + + + +
+
+ + + +
+

Jade K.

+

New York, USA

+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+

Available for Android

+
+
+ + + +
+
+
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js index 5307e9f..a33f667 100644 --- a/js/script.js +++ b/js/script.js @@ -1 +1,74 @@ -(()=>{let e=document.querySelector(".open-nav-menu"),t=document.querySelector(".close-nav-menu"),i=document.querySelector(".nav-menu"),c=document.querySelector(".menu-overlay"),l=document.querySelector(".header");function n(){i.classList.toggle("open"),c.classList.toggle("active"),document.body.classList.toggle("hidden-scrolling")}function s(){i.querySelector(".menu-item-has-children.active .sub-menu").removeAttribute("style"),i.querySelector(".menu-item-has-children.active").classList.remove("active")}function r(){i.classList.contains("open")&&n(),i.querySelector(".menu-item-has-children.active")&&s()}e.addEventListener("click",n),t.addEventListener("click",n),c.addEventListener("click",n),i.addEventListener("click",e=>{if(e.target.hasAttribute("data-toggle")&&window.innerWidth<=991){e.preventDefault();let t=e.target.parentElement;if(t.classList.contains("active"))s();else{i.querySelector(".menu-item-has-children.active")&&s(),t.classList.add("active");let c=t.querySelector(".sub-menu");c.style.maxHeight=c.scrollHeight+"px"}}}),window.addEventListener("scroll",function(){let e=window.scrollY||document.documentElement.scrollTop;e>0?l.classList.add("sticky","scrolled"):l.classList.remove("sticky","scrolled")}),window.addEventListener("resize",function(){this.innerWidth>991&&r()})})(); \ No newline at end of file +(() => { + const openNavMenu = document.querySelector(".open-nav-menu"), + closeNavMenu = document.querySelector(".close-nav-menu"), + navMenu = document.querySelector(".nav-menu"), + menuOverlay = document.querySelector(".menu-overlay"), + header = document.querySelector(".header"), + mediaSize = 991, + // sticky srolling size + scrollThreshold = 0; + + openNavMenu.addEventListener("click", toggleNav); + closeNavMenu.addEventListener("click", toggleNav); + menuOverlay.addEventListener("click", toggleNav); + + function toggleNav() { + navMenu.classList.toggle("open"); + menuOverlay.classList.toggle("active"); + document.body.classList.toggle("hidden-scrolling"); + } + + navMenu.addEventListener("click", (event) => { + if ( + event.target.hasAttribute("data-toggle") && + window.innerWidth <= mediaSize + ) { + event.preventDefault(); + const menuItemHasChildren = event.target.parentElement; + if (menuItemHasChildren.classList.contains("active")) { + collapseSubMenu(); + } else { + if (navMenu.querySelector(".menu-item-has-children.active")) { + collapseSubMenu(); + } + menuItemHasChildren.classList.add("active"); + const subMenu = menuItemHasChildren.querySelector(".sub-menu"); + subMenu.style.maxHeight = subMenu.scrollHeight + "px"; + } + } + }); + + function collapseSubMenu() { + navMenu + .querySelector(".menu-item-has-children.active .sub-menu") + .removeAttribute("style"); + navMenu + .querySelector(".menu-item-has-children.active") + .classList.remove("active"); + } + + function resizeFix() { + if (navMenu.classList.contains("open")) { + toggleNav(); + } + if (navMenu.querySelector(".menu-item-has-children.active")) { + collapseSubMenu(); + } + } + + window.addEventListener("scroll", function () { + const scrollPosition = window.scrollY || document.documentElement.scrollTop; + + if (scrollPosition > scrollThreshold) { + header.classList.add("sticky", "scrolled"); + } else { + header.classList.remove("sticky", "scrolled"); + } + }); + + window.addEventListener("resize", function () { + if (this.innerWidth > mediaSize) { + resizeFix(); + } + }); +})();