Skip to content

Instantly share code, notes, and snippets.

@anish-stha
Created October 17, 2021 16:08
Show Gist options
  • Save anish-stha/71718dd8a3c81d85fb82f36ff69449cc to your computer and use it in GitHub Desktop.
Save anish-stha/71718dd8a3c81d85fb82f36ff69449cc to your computer and use it in GitHub Desktop.
TMDB Movie App UI
<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="&nbsp;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>
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
* {
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;
}
}
<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