Movie App Concept
A Pen by Vincenzo Piromalli on CodePen.
Created
October 17, 2021 16:08
-
-
Save anish-stha/71718dd8a3c81d85fb82f36ff69449cc to your computer and use it in GitHub Desktop.
TMDB Movie App UI
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <i title="Go to top" onclick="topFunction()" id="myBtn" class="fa fa-arrow-up" aria-hidden="true"></i> | |
| <div class="container"> | |
| <div class="sidebar"> | |
| <div class="sidebar-container"> | |
| <a class="logo-link" href="#" onclick="sortMovies('popularity')"> | |
| <img src="https://i.imgur.com/AYldSBG.png" class="logo-image"> | |
| </a> | |
| <h2 class="title-genre">Discover</h2> | |
| <a class="category-link current" href="#" onclick="sortMovies('popularity')"> | |
| <div class="genre">Popular</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('rating')"> | |
| <div class="genre">Top Rated</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('grossing')"> | |
| <div class="genre">Grossing</div> | |
| </a> | |
| <h2 class="title-genre">Genres</h2> | |
| <a class="category-link" href="#" onclick="sortMovies('action')"> | |
| <div class="genre">Action</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('adventure')"> | |
| <div class="genre">Adventure</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('animation')"> | |
| <div class="genre">Animation</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('comedy')"> | |
| <div class="genre">Comedy</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('crime')"> | |
| <div class="genre">Crime</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('documentary')"> | |
| <div class="genre">Documentary</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('drama')"> | |
| <div class="genre">Drama</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('family')"> | |
| <div class="genre">Family</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('fantasy')"> | |
| <div class="genre">Fantasy</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('history')"> | |
| <div class="genre">History</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('horror')"> | |
| <div class="genre">Horror</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('music')"> | |
| <div class="genre">Music</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('mystery')"> | |
| <div class="genre">Mystery</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('romance')"> | |
| <div class="genre">Romance</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('science fiction')"> | |
| <div class="genre">Science Fiction</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('tv movie')"> | |
| <div class="genre">TV Movie</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('thriller')"> | |
| <div class="genre">Thriller</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('war')"> | |
| <div class="genre">War</div> | |
| </a> | |
| <a class="category-link" href="#" onclick="sortMovies('western')"> | |
| <div class="genre">Western</div> | |
| </a> | |
| <a target="_blank" rel="noopener noreferrer" href="#" onclick="window.open('https://ko-fi.com/vincenzopiromalli')" class="coffee"><img src="https://i.imgur.com/WP4kgsA.png" alt="Buy me a coffee"> | |
| <span style="margin-left: 5px;">Buy me a coffee</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="search"> | |
| <form class="search-form"><button type="submit" class="search-button"><i class="fa fa-search"></i></button><input id="search" onKeyPress="return checkSubmit(event)" type="search" placeholder=" Search for a movie..." class="search-input" value=""></form> | |
| </div> | |
| <div class="content"> | |
| <div class="inner-container"> | |
| <div class="titles"> | |
| <h1>Popular</h1> | |
| <h2>movies</h2> | |
| </div> | |
| <div class="item-container"> | |
| </div> | |
| <div class="load-more"><i class="fa fa-plus-circle more" aria-hidden="true"></i></div> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var next = 1; | |
| var nextTV = 1; | |
| var posterPaths = "https://image.tmdb.org/t/p/w370_and_h556_bestv2"; | |
| var backgroundPaths = "http://image.tmdb.org/t/p/w1280"; | |
| var url = "https://api.themoviedb.org/3/discover/movie?"; | |
| var key = "&api_key=6b4357c41d9c606e4d7ebe2f4a8850ea"; | |
| var urlTV = "https://api.themoviedb.org/3/discover/tv?"; | |
| var moreTVinfo = | |
| "https://api.themoviedb.org/3/tv/ +tvshow id+ ?&api_key=6b4357c41d9c606e4d7ebe2f4a8850ea"; | |
| var movieCast = "https://api.themoviedb.org/3/movie/"; | |
| var actorInfo = "https://api.themoviedb.org/3/discover/movie?&with_cast="; | |
| var imdbLink = "http://www.imdb.com/title/"; | |
| var date = new Date(); | |
| function sortMovies(choice) { | |
| next = 0; | |
| $(".movies").remove(); | |
| $(".more").show(); | |
| $(".item-container").removeClass("single"); | |
| $(".overview").hide(); | |
| $(".search").show(); | |
| if (choice === "rating") { | |
| choices = "vote_count.gte=50&sort_by=vote_average.desc"; | |
| showMovie("vote_count.gte=50&sort_by=vote_average.desc"); | |
| $("h1").text("Top Rated"); | |
| $(".titles").removeClass("hide"); | |
| } else if (choice === "grossing") { | |
| choices = "sort_by=revenue.desc"; | |
| showMovie("sort_by=revenue.desc"); | |
| $("h1").text("grossing"); | |
| $(".titles").removeClass("hide"); | |
| } | |
| // Genres sort by list start | |
| else if (choice === "action") { | |
| choices = "&with_genres=28"; | |
| showMovie("&with_genres=28"); | |
| $("h1").text("action"); | |
| } else if (choice === "adventure") { | |
| choices = "&with_genres=12"; | |
| showMovie("&with_genres=12"); | |
| $("h1").text("adventure"); | |
| } else if (choice === "animation") { | |
| choices = "&with_genres=16"; | |
| showMovie("&with_genres=16"); | |
| $("h1").text("animation"); | |
| } else if (choice === "comedy") { | |
| choices = "&with_genres=35"; | |
| showMovie("&with_genres=35"); | |
| $("h1").text("comedy"); | |
| } else if (choice === "crime") { | |
| choices = "&with_genres=80"; | |
| showMovie("&with_genres=80"); | |
| $("h1").text("crime"); | |
| } else if (choice === "documentary") { | |
| choices = "&with_genres=99"; | |
| showMovie("&with_genres=99"); | |
| $("h1").text("documentary"); | |
| } else if (choice === "drama") { | |
| choices = "&with_genres=18"; | |
| showMovie("&with_genres=18"); | |
| $("h1").text("drama"); | |
| } else if (choice === "family") { | |
| choices = "&with_genres=10751"; | |
| showMovie("&with_genres=10751"); | |
| $("h1").text("family"); | |
| } else if (choice === "fantasy") { | |
| choices = "&with_genres=14"; | |
| showMovie("&with_genres=14"); | |
| $("h1").text("fantasy"); | |
| } else if (choice === "foreign") { | |
| choices = "&with_genres=10769"; | |
| showMovie("&with_genres=10769"); | |
| $("h1").text("foreign"); | |
| } else if (choice === "history") { | |
| choices = "&with_genres=36"; | |
| showMovie("&with_genres=36"); | |
| $("h1").text("history"); | |
| } else if (choice === "horror") { | |
| choices = "&with_genres=27"; | |
| showMovie("&with_genres=27"); | |
| $("h1").text("horror"); | |
| } else if (choice === "music") { | |
| choices = "&with_genres=10402"; | |
| showMovie("&with_genres=10402"); | |
| $("h1").text("music"); | |
| } else if (choice === "mystery") { | |
| choices = "&with_genres=9648"; | |
| showMovie("&with_genres=9648"); | |
| $("h1").text("mystery"); | |
| } else if (choice === "romance") { | |
| choices = "&with_genres=10749"; | |
| showMovie("&with_genres=10749"); | |
| $("h1").text("romance"); | |
| } else if (choice === "science fiction") { | |
| choices = "&with_genres=878"; | |
| showMovie("&with_genres=878"); | |
| $("h1").text("science fiction"); | |
| } else if (choice === "tv movie") { | |
| choices = "&with_genres=10770"; | |
| showMovie("&with_genres=10770"); | |
| $("h1").text("tv movie"); | |
| } else if (choice === "thriller") { | |
| choices = "&with_genres=53"; | |
| showMovie("&with_genres=53"); | |
| $("h1").text("thriller"); | |
| } else if (choice === "war") { | |
| choices = "&with_genres=10752"; | |
| showMovie("&with_genres=10752"); | |
| $("h1").text("war"); | |
| } else if (choice === "western") { | |
| choices = "&with_genres=37"; | |
| showMovie("&with_genres=37"); | |
| $("h1").text("western"); | |
| } | |
| //genre ends | |
| else { | |
| choices = "sort_by=popularity.desc"; | |
| showMovie("sort_by=popularity.desc"); | |
| $("h1").text("popular"); | |
| $(".titles").removeClass("hide"); | |
| } | |
| } | |
| function sortTv(choice) { | |
| nextTV = 0; | |
| $(".tv").remove(); | |
| $(".item-container").removeClass("single"); | |
| if (choice === "rating") { | |
| choices = "vote_count.gte=50&sort_by=vote_average.desc"; | |
| showTv("vote_count.gte=50&sort_by=vote_average.desc"); | |
| } else if (choice === "grossing") { | |
| choices = "sort_by=revenue.desc"; | |
| showTv("sort_by=revenue.desc"); | |
| } | |
| // Genres sort by list start | |
| else if (choice === "action") { | |
| choices = "&with_genres=28"; | |
| showTv("&with_genres=28"); | |
| } else if (choice === "adventure") { | |
| choices = "&with_genres=12"; | |
| showTv("&with_genres=12"); | |
| } else if (choice === "animation") { | |
| choices = "&with_genres=16"; | |
| showTv("&with_genres=16"); | |
| } else if (choice === "comedy") { | |
| choices = "&with_genres=35"; | |
| showTv("&with_genres=35"); | |
| } else if (choice === "crime") { | |
| choices = "&with_genres=80"; | |
| showTv("&with_genres=80"); | |
| } else if (choice === "documentary") { | |
| choices = "&with_genres=99"; | |
| showTv("&with_genres=99"); | |
| } else if (choice === "drama") { | |
| choices = "&with_genres=18"; | |
| showTv("&with_genres=18"); | |
| } else if (choice === "family") { | |
| choices = "&with_genres=10751"; | |
| showTv("&with_genres=10751"); | |
| } else if (choice === "fantasy") { | |
| choices = "&with_genres=14"; | |
| showTv("&with_genres=14"); | |
| } else if (choice === "foreign") { | |
| choices = "&with_genres=10769"; | |
| showTv("&with_genres=10769"); | |
| } else if (choice === "history") { | |
| choices = "&with_genres=36"; | |
| showTv("&with_genres=36"); | |
| } else if (choice === "horror") { | |
| choices = "&with_genres=27"; | |
| showTv("&with_genres=27"); | |
| } else if (choice === "music") { | |
| choices = "&with_genres=10402"; | |
| showTv("&with_genres=10402"); | |
| } else if (choice === "mystery") { | |
| choices = "&with_genres=9648"; | |
| showTv("&with_genres=9648"); | |
| } else if (choice === "romance") { | |
| choices = "&with_genres=10749"; | |
| showTv("&with_genres=10749"); | |
| } else if (choice === "science fiction") { | |
| choices = "&with_genres=878"; | |
| showTv("&with_genres=878"); | |
| } else if (choice === "tv movie") { | |
| choices = "&with_genres=10770"; | |
| showTv("&with_genres=10770"); | |
| } else if (choice === "thriller") { | |
| choices = "&with_genres=53"; | |
| showTv("&with_genres=53"); | |
| } else if (choice === "war") { | |
| choices = "&with_genres=10752"; | |
| showTv("&with_genres=10752"); | |
| } else if (choice === "western") { | |
| choices = "&with_genres=37"; | |
| showTv("&with_genres=37"); | |
| } | |
| //genre ends | |
| else { | |
| choices = "sort_by=popularity.desc"; | |
| showTv("sort_by=popularity.desc"); | |
| } | |
| } | |
| /// when enter is hit it starts the search | |
| function checkSubmit(e) { | |
| if (e && e.keyCode == 13) { | |
| var searching = document.getElementById("search").value; | |
| search(searching); | |
| document.getElementById("search").value = ""; | |
| return false; | |
| } | |
| } | |
| function search(search) { | |
| $(".movies").remove(); | |
| $(".tv").remove(); | |
| //http://api.themoviedb.org/3/search/multi?api_key=6b4357c41d9c606e4d7ebe2f4a8850ea&query= | |
| var searchurl = | |
| "https://api.themoviedb.org/3/search/multi?api_key=6b4357c41d9c606e4d7ebe2f4a8850ea&query="; | |
| $.getJSON(searchurl + search, function (data) { | |
| for (var i = 0; i < data.results.length; i++) { | |
| var id = data.results[i].id; | |
| var title = data.results[i].title; | |
| var rating = data.results[i].vote_average; | |
| var poster = posterPaths + data.results[i].poster_path; | |
| var overview = data.results[i].overview; | |
| if (poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2null") { | |
| //if their is no poster dont show the movie | |
| } else if ( | |
| poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2undefined" | |
| ) { | |
| //dont show if the overview is null | |
| } else if (overview == "null") { | |
| //dont show if the overview is null | |
| } else { | |
| $(".item-container").append( | |
| "<a class='item link movies m" + | |
| i + | |
| "' id='" + | |
| id + | |
| "' onclick='movieInfo(" + | |
| id + | |
| ")' href='#'><img src='" + | |
| poster + | |
| "' class='image'><div class='item-inner'><h2 class='item-title'>" + | |
| title + | |
| "</h2><span class='rating'><i class='fa fa-star' aria-hidden='true'></i> " + | |
| rating + | |
| "</span></div></a>" | |
| ); | |
| } | |
| } | |
| }); | |
| } | |
| function showMovie(choice) { | |
| next++; | |
| $.getJSON(url + choice + key + "&page=" + next, function (data) { | |
| for (var i = 0; i < data.results.length; i++) { | |
| var id = data.results[i].id; | |
| var title = data.results[i].title; | |
| var overview = data.results[i].overview; | |
| var rating = data.results[i].vote_average; | |
| var poster = posterPaths + data.results[i].poster_path; | |
| if (poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2null") { | |
| //if their is no poster dont show the movie | |
| } else if ( | |
| poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2undefined" | |
| ) { | |
| //dont show if the overview is null | |
| } else if (overview == "null") { | |
| //dont show if the overview is null | |
| } else { | |
| $(".item-container").append( | |
| "<a class='item link movies m" + | |
| i + | |
| "' id='" + | |
| id + | |
| "' onclick='movieInfo(" + | |
| id + | |
| ")' href='#'><img src='" + | |
| poster + | |
| "' class='image'><div class='item-inner'><h2 class='item-title'>" + | |
| title + | |
| "</h2><span class='rating'><i class='fa fa-star' aria-hidden='true'></i> " + | |
| rating + | |
| "</span></div></a>" | |
| ); | |
| } | |
| } | |
| }); | |
| } | |
| function movieInfo(id) { | |
| $.getJSON(movieCast + id + "/casts?" + key, function (json) { | |
| cast1 = json.cast[0].name; | |
| cast1id = json.cast[0].id; | |
| cast2 = json.cast[1].name; | |
| cast2id = json.cast[1].id; | |
| cast3 = json.cast[2].name; | |
| cast3id = json.cast[2].id; | |
| cast4 = json.cast[3].name; | |
| cast4id = json.cast[3].id; | |
| $(".movies").hide(); | |
| $(".search").hide(); | |
| $(".more").hide(); | |
| $(".item-container").addClass("single"); | |
| $(".titles").addClass("hide"); | |
| var infoURL = | |
| "https://api.themoviedb.org/3/movie/" + | |
| id + | |
| "?&api_key=6b4357c41d9c606e4d7ebe2f4a8850ea"; | |
| $.getJSON(infoURL, function (data) { | |
| var budget = "$" + data.budget; | |
| if (budget === "$0") { | |
| budget = "Budget not yet released"; | |
| } | |
| var revenue = "$" + data.revenue; | |
| if (revenue === "$0") { | |
| revenue = "Revenue not yet released"; | |
| } | |
| var release = data.release_date; | |
| var imdb = imdbLink + data.imdb_id; | |
| var runtime = data.runtime; | |
| var tagline = data.tagline; | |
| var year = data.release_date.slice(0, 4); | |
| var title = data.title; | |
| var rating = data.vote_average; | |
| var overview = data.overview; | |
| var poster = posterPaths + data.poster_path; | |
| if (poster === "http://image.tmdb.org/t/p/w1280null") { | |
| poster = "https://via.placeholder.com/1280x1080?text=No+Poster&000.jpg"; | |
| } | |
| var backdrop = backgroundPaths + data.backdrop_path; | |
| if (data.genres.length > 3) { | |
| genre = | |
| data.genres[0].name + | |
| ", " + | |
| data.genres[1].name + | |
| ", " + | |
| data.genres[2].name + | |
| ", " + | |
| data.genres[3].name; | |
| } else if (data.genres.length > 2) { | |
| genre = | |
| data.genres[0].name + | |
| ", " + | |
| data.genres[1].name + | |
| ", " + | |
| data.genres[2].name; | |
| } else if (data.genres.length > 1) { | |
| genre = data.genres[0].name + ", " + data.genres[1].name; | |
| } else { | |
| genre = data.genres[0].name; | |
| } | |
| $(".item-container").prepend( | |
| "<div class='overview'><div class='movie-container'><div class='movie-inner'><div class='movie-content'><div class='movie-poster'><img class='movie-img' src=" + | |
| poster + | |
| "></div><div class='movie-data'><div class='movie-info'><div class='movie-head'><h1 class='movie-title'>" + | |
| title + | |
| "</h1><h1 class='movie-tagline'>" + | |
| tagline + | |
| "</h1></div><div class='movie-subdata'><div class='movie-left'><p class='movie-stars'><i class='fa fa-star' aria-hidden='true'></i> " + | |
| rating + | |
| "</p></div><div class='movie-right'>" + | |
| year + | |
| " / " + | |
| runtime + | |
| " min</div></div><h3 class='movie-fields'>The Genres</h3><div class='movie-tags'><span class='movie-taxonomy'>" + | |
| genre + | |
| "</span></div><h3 class='movie-fields'>The Synopsis</h3><p class='movie-description'>" + | |
| overview + | |
| "</p></div><h3 class='movie-fields'>The Actors</h3><div class='movie-tags'><a class='movie-taxonomy' onclick='showActor(" + | |
| cast1id + | |
| ")'>" + | |
| cast1 + | |
| "</a><a class='movie-taxonomy' onclick='showActor(" + | |
| cast2id + | |
| ")'> " + | |
| cast2 + | |
| "</a><a class='movie-taxonomy' onclick='showActor(" + | |
| cast3id + | |
| ")'>" + | |
| cast3 + | |
| "</a><a class='movie-taxonomy' onclick='showActor(" + | |
| cast4id + | |
| ")'>" + | |
| cast4 + | |
| "</a></div><div id='hideMInfo' class='exit' style='font-size:30px;'><i style='cursor:pointer;' onclick='exit(" + | |
| id + | |
| ")' class='fa fa-chevron-circle-left' aria-hidden='true'></i></div></div></div></div></div></div>" | |
| ); | |
| }); | |
| }); | |
| } | |
| function showActor(id) { | |
| $(".overview").hide(); | |
| $(".more").show(); | |
| $(".search").show(); | |
| $(".item-container").removeClass("single"); | |
| var next = 0; | |
| next++; | |
| $.getJSON(actorInfo + id + key + "&page=" + next, function (data) { | |
| for (var i = 0; i < data.results.length; i++) { | |
| var id = data.results[i].id; | |
| var title = data.results[i].title; | |
| var overview = data.results[i].overview; | |
| var rating = data.results[i].vote_average; | |
| var poster = posterPaths + data.results[i].poster_path; | |
| if (poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2null") { | |
| poster = "https://via.placeholder.com/370x556?text=No+Poster&000.jpg"; | |
| } | |
| $(".item-container").append( | |
| "<a class='item link movies m" + | |
| i + | |
| "' id='" + | |
| id + | |
| "' onclick='movieInfo(" + | |
| id + | |
| ")' href='#'><img src='" + | |
| poster + | |
| "' class='image'><div class='item-inner'><h2 class='item-title'>" + | |
| title + | |
| "</h2><span class='rating'><i class='fa fa-star' aria-hidden='true'></i> " + | |
| rating + | |
| "</span></div></a>" | |
| ); | |
| } | |
| }); | |
| } | |
| function showTv(choice) { | |
| nextTV++; | |
| console.log(url + choice + key + "&page=" + next); | |
| $.getJSON(urlTV + choice + key + "&page=" + nextTV, function (data) { | |
| for (var i = 0; i < data.results.length; i++) { | |
| var id = data.results[i].id; | |
| var title = data.results[i].name; | |
| var rating = data.results[i].vote_average; | |
| var overview = data.results[i].overview; | |
| var poster = posterPaths + data.results[i].poster_path; | |
| if (poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2null") { | |
| poster = "https://via.placeholder.com/370x556?text=No+Poster&000.jpg"; | |
| } | |
| if (poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2null") { | |
| //if their is no poster dont show the movie | |
| } else if (overview == "null") { | |
| //dont show if the overview is null | |
| } else { | |
| $(".item-container").append( | |
| "<a class='item link tv t" + | |
| i + | |
| "' id='" + | |
| id + | |
| "' onclick='tvInfo(" + | |
| id + | |
| ")' href='#'><img src='" + | |
| poster + | |
| "' class='image'><div class='item-inner'><h2 class='item-title'>" + | |
| title + | |
| "</h2><span class='rating'><i class='fa fa-star' aria-hidden='true'></i> " + | |
| rating + | |
| "</span></div></a>" | |
| ); | |
| } | |
| } | |
| }); | |
| } | |
| function tvInfo(id) { | |
| $(".movie").remove(); | |
| $(".tv").hide(); | |
| $(".moreTV").hide(); | |
| $(".item-container").addClass("single"); | |
| $(".titles").addClass("hide"); | |
| var infoURL = | |
| "https://api.themoviedb.org/3/tv/" + | |
| id + | |
| "?&api_key=6b4357c41d9c606e4d7ebe2f4a8850ea"; | |
| $.getJSON(infoURL, function (data) { | |
| var genre; | |
| if (data.genres.length > 3) { | |
| genre = | |
| data.genres[0].name + | |
| ", " + | |
| data.genres[1].name + | |
| ", " + | |
| data.genres[2].name + | |
| ", " + | |
| data.genres[3].name; | |
| } else if (data.genres.length > 2) { | |
| genre = | |
| data.genres[0].name + | |
| ", " + | |
| data.genres[1].name + | |
| ", " + | |
| data.genres[2].name; | |
| } else if (data.genres.length > 1) { | |
| genre = data.genres[0].name + ", " + data.genres[1].name; | |
| } else { | |
| genre = data.genres[0].name; | |
| } | |
| var seasons = data.seasons.length; | |
| var title = data.name; | |
| var rating = data.vote_average; | |
| var overview = data.overview; | |
| var poster = posterPaths + data.poster_path; | |
| if (poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2null") { | |
| poster = "https://via.placeholder.com/370x556?text=No+Poster&000.jpg"; | |
| } | |
| var backdrop = backgroundPaths + data.backdrop_path; | |
| $(".item-container").prepend( | |
| "<div class='overview'><div class='movie-container'><div class='movie-inner'><div class='movie-content'><div class='movie-poster'><img class='movie-img' src=" + | |
| poster + | |
| "></div><div class='movie-data'><div class='movie-info'><div class='movie-head'><h1 class='movie-title'>" + | |
| title + | |
| "</h1></div><div class='movie-subdata'><div class='movie-left'><p class='movie-stars'><i class='fa fa-star' aria-hidden='true'></i> " + | |
| rating + | |
| "</p></div></div><h3 class='movie-fields'>The Genres</h3><div class='movie-tags'><span class='movie-taxonomy'>" + | |
| genre + | |
| "</span></div><h3 class='movie-fields'>The Synopsis</h3><p class='movie-description'>" + | |
| overview + | |
| "</p></div><h3 class='movie-fields'>Season information</h3><div class='movie-tags'><select class='season'></select></div><div id='hideMInfo' class='exit' style='font-size:30px;'><i style='cursor:pointer;' onclick='exitTv(" + | |
| id + | |
| ")' class='fa fa-chevron-circle-left' aria-hidden='true'></i></div></div></div></div></div></div>" | |
| ); | |
| for (var i = 0; i < data.seasons.length; i++) { | |
| $(".season").prepend( | |
| "<option onclick='seriesInfo(" + | |
| data.seasons[i].id + | |
| "," + | |
| data.seasons[i].season_number + | |
| ")' value='" + | |
| data.seasons[i].season_number + | |
| "'>Season " + | |
| data.seasons[i].season_number + | |
| " </option>" | |
| ); | |
| } | |
| //var selected = $( ".season option:selected" ).value(); | |
| //seriesInfo(data.seasons[i].id,selected); | |
| }); | |
| } | |
| function seriesInfo(id, num) { | |
| var seriesURL = | |
| "https://api.themoviedb.org/3/tv/" + | |
| id + | |
| "/season/" + | |
| num + | |
| "?&api_key=6b4357c41d9c606e4d7ebe2f4a8850ea"; | |
| $.getJSON(seriesURL, function (data) { | |
| for (var i = 0; i < data.episodes.length; i++) { | |
| var seasonname = data.name; | |
| var seasonoverview = data.overview; | |
| var episode = data.episodes[i].name; | |
| var overview = data.episodes[i].overview; | |
| var airdate = data.episodes[i].air_date; | |
| $(".seasons").append( | |
| "<div><p>" + | |
| episode + | |
| "</p><p>" + | |
| overview + | |
| "</p><p>" + | |
| airdate + | |
| "</p></div>" | |
| ); | |
| } | |
| }); | |
| } | |
| $("#tv").click(function () { | |
| nextTV = 0; | |
| sortTv(); | |
| $(".movies").remove(); | |
| $(".overview").remove(); | |
| $(".moreTV").show(); | |
| $(".more").hide(); | |
| $(".droptv").show(); | |
| $(".dropmovies").hide(); | |
| }); | |
| $("#movie").click(function () { | |
| sortMovies(); | |
| $(".tv").remove(); | |
| $(".overview").remove(); | |
| $(".more").show(); | |
| $(".search").show(); | |
| $(".moreTV").hide(); | |
| $(".dropmovies").show(); | |
| $(".droptv").hide(); | |
| next = 1; | |
| }); | |
| $(".more").click(function () { | |
| showMovie(choices); | |
| }); | |
| $(".moreTV").click(function () { | |
| showTv(choices); | |
| }); | |
| function exit(id) { | |
| $(".overview").remove(); | |
| $(".item-container").removeClass("single"); | |
| $(".titles").removeClass("hide"); | |
| $(".movies").show(); | |
| $(".search").show(); | |
| $(".more").show(); | |
| window.location.hash = id; | |
| } | |
| function exitTv(id) { | |
| $(".item-container").removeClass("single"); | |
| $(".titles").removeClass("hide"); | |
| $(".overview").hide(); | |
| $(".tv").show(); | |
| $(".moreTV").show(); | |
| window.location.hash = id; | |
| } | |
| sortMovies(); | |
| $(".container").addClass("main"); | |
| $(".search").show(); | |
| $(".category-link").click(function (e) { | |
| e.preventDefault(); | |
| $(".category-link").removeClass("current "); | |
| $(this).addClass("current "); | |
| }); | |
| var mybutton = document.getElementById("myBtn"); | |
| window.onscroll = function () { | |
| scrollFunction(); | |
| }; | |
| function scrollFunction() { | |
| if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { | |
| mybutton.style.display = "block"; | |
| } else { | |
| mybutton.style.display = "none"; | |
| } | |
| } | |
| function topFunction() { | |
| document.body.scrollTop = 0; | |
| document.documentElement.scrollTop = 0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: inherit; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| html { | |
| font-size: 62.5%; | |
| box-sizing: border-box; | |
| --color-primary: #37474f; | |
| --color-primary-dark: #263238; | |
| --color-primary-light: #546e7a; | |
| --color-primary-lighter: #b0bec5; | |
| --text-color: #fafafa; | |
| --link-color: #444444; | |
| --border-color: rgba(176, 190, 197, 0.5); | |
| --shadow-color: rgba(0, 0, 0, 0.2); | |
| --shadow-color-dark: rgba(0, 0, 0, 0.25); | |
| } | |
| body { | |
| font-family: "Montserrat", sans-serif; | |
| font-weight: 400; | |
| line-height: 1.6; | |
| } | |
| form, | |
| input, | |
| button, | |
| a { | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
| } | |
| button { | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| font-weight: 200; | |
| line-height: 1; | |
| color: var(--color-primary-dark); | |
| -webkit-letter-spacing: -0.5px; | |
| -moz-letter-spacing: -0.5px; | |
| -ms-letter-spacing: -0.5px; | |
| letter-spacing: -0.5px; | |
| text-transform: uppercase; | |
| margin-bottom: 0.5rem; | |
| } | |
| h2 { | |
| text-transform: uppercase; | |
| line-height: 1; | |
| color: var(--color-primary); | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| } | |
| .logo-link { | |
| width: 100%; | |
| height: 18rem; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -webkit-text-decoration: none; | |
| text-decoration: none; | |
| margin-bottom: 2rem; | |
| } | |
| .logo-image { | |
| max-width: 75%; | |
| } | |
| .genre { | |
| width: 100%; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| padding: 1rem 2rem; | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| line-height: 1; | |
| opacity: 0.6; | |
| color: var(--color-primary-light); | |
| border-color: var(--color-primary-light); | |
| border: 1px solid transparent; | |
| border-radius: 2rem; | |
| -webkit-text-decoration: none; | |
| text-decoration: none; | |
| cursor: pointer; | |
| -webkit-transition: all 100ms cubic-bezier(0.075, 0.82, 0.165, 1); | |
| transition: all 100ms cubic-bezier(0.075, 0.82, 0.165, 1); | |
| } | |
| .genre:hover { | |
| border: 1px solid; | |
| } | |
| .active { | |
| width: 100%; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| padding: 1rem 2rem; | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| line-height: 1; | |
| opacity: 1; | |
| color: var(--color-primary-dark); | |
| border-color: var(--color-primary-dark); | |
| border: 1px solid; | |
| border-radius: 2rem; | |
| -webkit-text-decoration: none; | |
| text-decoration: none; | |
| cursor: pointer; | |
| -webkit-transition: all 100ms cubic-bezier(0.075, 0.82, 0.165, 1); | |
| transition: all 100ms cubic-bezier(0.075, 0.82, 0.165, 1); | |
| } | |
| .sidebar-container { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| width: 25rem; | |
| padding: 2rem; | |
| margin-top: 4rem; | |
| color: var(--color-primary-dark); | |
| border-right: 1px solid var(--border-color); | |
| } | |
| .title-genre { | |
| font-weight: 700; | |
| font-size: 1.1rem; | |
| text-transform: uppercase; | |
| -webkit-letter-spacing: -0.5px; | |
| -moz-letter-spacing: -0.5px; | |
| -ms-letter-spacing: -0.5px; | |
| letter-spacing: -0.5px; | |
| margin: 0 0 1rem 1rem; | |
| } | |
| .title-genre:not(:first-child) { | |
| margin-top: 4rem; | |
| } | |
| .category-link { | |
| -webkit-text-decoration: none; | |
| text-decoration: none; | |
| display: block; | |
| outline: none; | |
| margin-bottom: 0.5rem; | |
| } | |
| .category-link.current { | |
| color: var(--color-primary-dark); | |
| border-color: var(--color-primary-dark); | |
| border: 1px solid; | |
| border-radius: 2rem; | |
| -webkit-text-decoration: none; | |
| } | |
| .search-form { | |
| position: relative; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| box-shadow: 0 4px 8px var(--shadow-color); | |
| background-color: var(--color-primary-dark); | |
| border: 1px solid var(--color-primary); | |
| width: 2rem; | |
| cursor: pointer; | |
| padding: 2rem; | |
| height: 2rem; | |
| outline: none; | |
| border-radius: 10rem; | |
| -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); | |
| transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); | |
| } | |
| .search-form:hover { | |
| position: relative; | |
| display: flex; | |
| -webkit-box-align: center; | |
| align-items: center; | |
| -webkit-box-pack: center; | |
| justify-content: center; | |
| box-shadow: 0 4px 8px var(--shadow-color); | |
| background-color: var(--color-primary-dark); | |
| border: 1px solid var(--color-primary); | |
| width: 30rem; | |
| cursor: auto; | |
| padding: 2rem; | |
| height: 2rem; | |
| outline: none; | |
| border-radius: 10rem; | |
| transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s; | |
| } | |
| .search-input { | |
| font-size: 14px; | |
| line-height: 1; | |
| font-weight: 300; | |
| background-color: transparent; | |
| width: 100%; | |
| margin-left: 0rem; | |
| color: var(--text-color); | |
| border: none; | |
| -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); | |
| transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); | |
| } | |
| .search-input:focus, | |
| .search-input:active { | |
| outline: none; | |
| } | |
| .search-input::-webkit-input-placeholder { | |
| color: var(--text-color); | |
| } | |
| .search-input::-moz-placeholder { | |
| color: var(--text-color); | |
| } | |
| .search-input:-ms-input-placeholder { | |
| color: var(--text-color); | |
| } | |
| .search-button { | |
| line-height: 1; | |
| pointer-events: none; | |
| cursor: none; | |
| background-color: transparent; | |
| border: none; | |
| outline: none; | |
| color: var(--text-color); | |
| } | |
| .titles { | |
| margin-bottom: 2rem; | |
| } | |
| .link { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -webkit-text-decoration: none; | |
| text-decoration: none; | |
| background-color: transparent; | |
| border-radius: 0.8rem; | |
| -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); | |
| transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); | |
| position: relative; | |
| -webkit-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); | |
| transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); | |
| } | |
| .link:hover { | |
| -webkit-transform: scale(1.03); | |
| -ms-transform: scale(1.03); | |
| transform: scale(1.03); | |
| } | |
| .link:hover::after { | |
| -webkit-transform: scaleY(1); | |
| -ms-transform: scaleY(1); | |
| transform: scaleY(1); | |
| opacity: 1; | |
| } | |
| .link::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 0.8rem; | |
| -webkit-transform: scaleY(0); | |
| -ms-transform: scaleY(0); | |
| transform: scaleY(0); | |
| -webkit-transform-origin: top; | |
| -ms-transform-origin: top; | |
| transform-origin: top; | |
| opacity: 0; | |
| background-color: var(--color-primary); | |
| z-index: -99; | |
| box-shadow: 0rem 2rem 5rem var(--shadow-color-dark); | |
| -webkit-transition: all 100ms cubic-bezier(0.215, 0.61, 0.355, 1); | |
| transition: all 100ms cubic-bezier(0.215, 0.61, 0.355, 1); | |
| } | |
| .image { | |
| width: 100%; | |
| height: 38rem; | |
| object-fit: cover; | |
| border-radius: 0.8rem; | |
| box-shadow: 0rem 2rem 5rem var(--shadow-color); | |
| -webkit-transition: all 100ms cubic-bezier(0.645, 0.045, 0.355, 1); | |
| transition: all 100ms cubic-bezier(0.645, 0.045, 0.355, 1); | |
| } | |
| .item:hover .image { | |
| border-radius: 0.8rem 0.8rem 0rem 0rem; | |
| box-shadow: none; | |
| } | |
| .item-title { | |
| text-align: center; | |
| font-size: 1.3rem; | |
| font-weight: 400; | |
| color: var(--color-primary-light); | |
| margin-bottom: 1rem; | |
| line-height: 1.4; | |
| -webkit-transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); | |
| transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); | |
| } | |
| .item:hover .item-title { | |
| color: var(--text-color); | |
| } | |
| .item-inner { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -webkit-box-pack: justify; | |
| -webkit-justify-content: space-between; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| padding: 1.5rem 3rem; | |
| } | |
| .item:hover { | |
| color: var(--color-primary-lighter); | |
| } | |
| .rating { | |
| text-align: center; | |
| font-size: 1.3rem; | |
| font-weight: 400; | |
| color: var(--color-primary-light); | |
| margin-bottom: 1rem; | |
| line-height: 1.4; | |
| -webkit-transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); | |
| transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); | |
| } | |
| .item:hover .rating { | |
| color: var(--text-color); | |
| } | |
| .load-more { | |
| text-align: center; | |
| font-size: 30px; | |
| cursor: pointer; | |
| } | |
| .item-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(10rem, 25rem)); | |
| -webkit-box-pack: space-evenly; | |
| -webkit-justify-content: space-evenly; | |
| -ms-flex-pack: space-evenly; | |
| justify-content: space-evenly; | |
| -webkit-align-content: space-between; | |
| -ms-flex-line-pack: space-between; | |
| align-content: space-between; | |
| -webkit-align-items: start; | |
| -webkit-box-align: start; | |
| -ms-flex-align: start; | |
| align-items: start; | |
| padding: 4rem 0; | |
| grid-gap: 4rem 2rem; | |
| } | |
| .inner-container { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| width: 100%; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| } | |
| .main { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| position: relative; | |
| -webkit-align-items: flex-start; | |
| -webkit-box-align: flex-start; | |
| -ms-flex-align: flex-start; | |
| align-items: flex-start; | |
| height: 100%; | |
| width: 100%; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .single { | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| align-items: flex-start; | |
| height: 100%; | |
| width: 100%; | |
| user-select: none; | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| .content { | |
| width: 100%; | |
| height: 100%; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| -webkit-box-align: center; | |
| align-items: center; | |
| -webkit-box-pack: center; | |
| justify-content: center; | |
| padding: 6rem 4rem; | |
| } | |
| .search { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| padding: 2rem; | |
| } | |
| .hide { | |
| display: none; | |
| } | |
| .movie-container { | |
| width: 100%; | |
| height: 100%; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| -webkit-box-align: center; | |
| align-items: center; | |
| -webkit-box-pack: center; | |
| padding: 6rem 4rem; | |
| } | |
| .movie-inner { | |
| display: flex; | |
| width: 100%; | |
| flex-direction: column; | |
| } | |
| .movie-content { | |
| display: flex; | |
| -webkit-box-align: center; | |
| align-items: center; | |
| -webkit-box-pack: center; | |
| justify-content: center; | |
| width: 100%; | |
| max-width: 120rem; | |
| margin: 0px auto 7rem; | |
| transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s; | |
| } | |
| .movie-poster { | |
| flex: 1 1 40%; | |
| -webkit-box-align: center; | |
| align-items: center; | |
| -webkit-box-pack: center; | |
| justify-content: center; | |
| display: flex; | |
| } | |
| .movie-img { | |
| max-height: 100%; | |
| height: auto; | |
| object-fit: cover; | |
| border-radius: 0.8rem; | |
| box-shadow: 0rem 2rem 5rem var(--shadow-color-dark); | |
| } | |
| .movie-title { | |
| font-size: 4rem; | |
| font-weight: 200; | |
| line-height: 1.2; | |
| color: var(--color-primary-dark); | |
| letter-spacing: -0.5px; | |
| text-transform: uppercase; | |
| margin-bottom: 0.5rem; | |
| } | |
| .movie-subdata { | |
| display: flex; | |
| -webkit-box-align: center; | |
| align-items: center; | |
| margin-bottom: 5rem; | |
| } | |
| .movie-data { | |
| width: 100%; | |
| max-width: 60%; | |
| padding: 4rem; | |
| flex: 1 1 60%; | |
| } | |
| .movie-head { | |
| margin-bottom: 2rem; | |
| } | |
| .movie-tagline { | |
| text-transform: uppercase; | |
| line-height: 1.5; | |
| color: var(--color-primary); | |
| font-size: 1.7rem; | |
| font-weight: 700; | |
| } | |
| .movie-stars { | |
| font-size: 1.3rem; | |
| line-height: 1; | |
| font-weight: 700; | |
| color: var(--color-primary); | |
| } | |
| .movie-left { | |
| display: flex; | |
| -webkit-box-align: center; | |
| align-items: center; | |
| margin-right: auto; | |
| } | |
| .movie-right { | |
| font-weight: 700; | |
| line-height: 1; | |
| text-transform: uppercase; | |
| color: var(--color-primary-lighter); | |
| font-size: 1.3rem; | |
| } | |
| .movie-fields { | |
| color: var(--color-primary-dark); | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| margin-bottom: 1rem; | |
| font-size: 1.4rem; | |
| } | |
| .movie-tags { | |
| display: flex; | |
| -webkit-box-align: center; | |
| align-items: center; | |
| margin-bottom: 3rem; | |
| flex-wrap: wrap; | |
| } | |
| .movie-taxonomy { | |
| text-decoration: none; | |
| display: flex; | |
| -webkit-box-align: center; | |
| align-items: center; | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| line-height: 1; | |
| color: var(--color-primary-light); | |
| text-transform: uppercase; | |
| padding: 0.5rem 0rem; | |
| transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s; | |
| } | |
| .movie-taxonomy:not(:last-child) { | |
| margin-right: 2rem; | |
| } | |
| .movie-taxonomy:active { | |
| transform: translateY(2px); | |
| } | |
| .movie-taxonomy:hover { | |
| transform: translateY(-3px); | |
| } | |
| .movie-description { | |
| font-size: 1.4rem; | |
| line-height: 1.8; | |
| color: var(--link-color); | |
| font-weight: 500; | |
| margin-bottom: 3rem; | |
| } | |
| .coffee { | |
| display: -webkit-box !important; | |
| display: -webkit-flex !important; | |
| display: -ms-flexbox !important; | |
| display: flex !important; | |
| outline: none; | |
| -webkit-box-pack: center !important; | |
| -webkit-justify-content: center !important; | |
| -ms-flex-pack: center !important; | |
| justify-content: center !important; | |
| -webkit-align-items: center !important; | |
| -webkit-box-align: center !important; | |
| -ms-flex-align: center !important; | |
| align-items: center !important; | |
| padding: 0.5rem 2rem; | |
| color: #000000; | |
| background-color: #ffffff; | |
| border-radius: 3px; | |
| font-family: "Montserrat", sans-serif; | |
| border: 1px solid transparent; | |
| -webkit-text-decoration: none; | |
| text-decoration: none; | |
| font-family: "Montserrat"; | |
| font-size: 1.2rem; | |
| -webkit-letter-spacing: 0.6px; | |
| -moz-letter-spacing: 0.6px; | |
| -ms-letter-spacing: 0.6px; | |
| letter-spacing: 0.6px; | |
| box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5); | |
| margin: 2rem auto; | |
| -webkit-transition: 0.3s all linear; | |
| transition: 0.3s all linear; | |
| } | |
| .coffee:hover, | |
| .coffee:active, | |
| .coffee:focus { | |
| -webkit-text-decoration: none; | |
| text-decoration: none; | |
| box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5); | |
| opacity: 0.85; | |
| color: #000000; | |
| } | |
| .copyright { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-align-self: center; | |
| -ms-flex-item-align: center; | |
| align-self: center; | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| color: var(--color-primary-dark); | |
| } | |
| .copyright-link { | |
| -webkit-text-decoration: none; | |
| text-decoration: none; | |
| font-weight: 500; | |
| margin-left: 4px; | |
| color: inherit; | |
| } | |
| .copyright-img { | |
| max-width: 100%; | |
| height: 3rem; | |
| } | |
| #myBtn { | |
| display: none; | |
| position: fixed; | |
| bottom: 20px; | |
| right: 15px; | |
| z-index: 99; | |
| font-size: 18px; | |
| border: none; | |
| outline: none; | |
| background-color: rgb(86 86 86 / 36%); | |
| color: white; | |
| cursor: pointer; | |
| padding: 15px; | |
| border-radius: 1rem; | |
| } | |
| #myBtn:hover { | |
| background-color: #000; | |
| } | |
| @media only screen and (max-width: 80em) { | |
| .sidebar { | |
| display: none; | |
| } | |
| } | |
| @media only screen and (max-width: 80em) { | |
| .main { | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| align-items: flex-start; | |
| height: 100%; | |
| width: 100%; | |
| user-select: none; | |
| } | |
| } | |
| @media only screen and (max-width: 80em) { | |
| .search-button { | |
| color: var(--text-color); | |
| font-size: 10px; | |
| } | |
| } | |
| @media only screen and (max-width: 37.5em) { | |
| .search-button { | |
| color: var(--text-color); | |
| font-size: 8px; | |
| } | |
| } | |
| @media only screen and (max-width: 56.25em) { | |
| h1 { | |
| font-size: 2.2rem; | |
| } | |
| } | |
| @media only screen and (max-width: 37.5em) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| } | |
| @media only screen and (max-width: 56.25em) { | |
| h2 { | |
| font-size: 1.1rem; | |
| } | |
| } | |
| @media only screen and (max-width: 31.25em) { | |
| .image { | |
| height: 28rem; | |
| } | |
| } | |
| @media only screen and (max-width: 31.25em) { | |
| .item-inner { | |
| padding: 1.5rem 1.5rem; | |
| } | |
| } | |
| @media only screen and (max-width: 80em) { | |
| .page-button { | |
| padding: 1.2rem 2rem; | |
| } | |
| } | |
| @media only screen and (max-width: 37.5em) { | |
| .page-button { | |
| padding: 1.3rem 1.6rem; | |
| } | |
| } | |
| @media only screen and (max-width: 31.25em) { | |
| .page-button { | |
| padding: 1rem 1.3rem; | |
| } | |
| } | |
| @media only screen and (max-width: 37.5em) { | |
| .item-container { | |
| grid-template-columns: repeat(auto-fit, minmax(10rem, 23rem)); | |
| -webkit-box-pack: space-around; | |
| -webkit-justify-content: space-around; | |
| -ms-flex-pack: space-around; | |
| justify-content: space-around; | |
| grid-gap: 4rem 1.5rem; | |
| } | |
| } | |
| @media only screen and (max-width: 31.25em) { | |
| .item-container { | |
| grid-template-columns: repeat(auto-fit, minmax(10rem, 18rem)); | |
| grid-gap: 4rem 1rem; | |
| } | |
| } | |
| @media only screen and (max-width: 80em) { | |
| .search-form { | |
| background-color: var(--color-primary); | |
| border: 1px solid transparent; | |
| padding: 1.5rem; | |
| } | |
| } | |
| @media only screen and (max-width: 25em) { | |
| .search-form { | |
| max-width: 25rem; | |
| } | |
| } | |
| @media only screen and (max-width: 80em) { | |
| .search-input { | |
| font-size: 13px; | |
| } | |
| } | |
| @media only screen and (max-width: 56.25em) { | |
| .search-input { | |
| font-size: 12px; | |
| } | |
| } | |
| @media only screen and (max-width: 56.25em) { | |
| .overview { | |
| flex-direction: column; | |
| margin-bottom: 5rem; | |
| } | |
| } | |
| @media only screen and (max-width: 37.5em) { | |
| .search-input { | |
| font-size: 11px; | |
| } | |
| } | |
| @media only screen and (max-width: 90em) { | |
| .content { | |
| padding: 6rem 3rem; | |
| } | |
| } | |
| @media only screen and (max-width: 80em) { | |
| .content { | |
| padding: 4rem 2rem; | |
| } | |
| } | |
| @media only screen and (max-width: 56.25em) { | |
| .movie-content { | |
| flex-direction: column; | |
| max-width: 110rem !important; | |
| margin-bottom: 5rem; | |
| } | |
| } | |
| @media only screen and (max-width: 80em) { | |
| .movie-content { | |
| max-width: 110rem; | |
| margin-bottom: 5rem; | |
| } | |
| } | |
| @media only screen and (max-width: 56.25em) { | |
| .movie-poster { | |
| max-width: 60%; | |
| flex: 1 1 60%; | |
| } | |
| } | |
| @media only screen and (max-width: 56.25em) { | |
| .movie-data { | |
| max-width: 100% !important; | |
| flex: 1 1 100%; | |
| } | |
| } | |
| @media only screen and (max-width: 80em) { | |
| .movie-data { | |
| padding: 2rem; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700" rel="stylesheet" /> | |
| <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment