Riccardo's TV-Show Details

In this example below you will see how to do a Riccardo's TV-Show Details with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ilyasbilgihan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ilyasbilgihan ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Riccardo's TV-Show Details</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Nunito:400,600,700'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="header">
  <div class="hamburger"></div>
  <div class="logo">
    <a href="#logo"><img src="https://image.ibb.co/fASdwx/netflix.png" alt=""></a>
  </div>
  <div class="profile">
    <div class="profile-avatar">
      <img src="https://image.ibb.co/gUu8wx/old_man.jpg" alt="">
    </div>
    <div class="profile-name">
      <a href="#profile-ric">Riccardo Cavallo</a>
    </div>
  </div>
</div>

<div id="main">
  <div class="slider">
    <div class="controls">
      <div class="left"></div> <!-- que - 1 -->
      <div class="right"></div> <!-- que + 1 -->
    </div>
     <div data-que="6" class="hidden">
      <img src="https://image.ibb.co/djGa9H/BrBa.jpg" alt="">
    </div>
    <div data-que="5" class="hidden">
      <img src="https://image.ibb.co/djGa9H/BrBa.jpg" alt="">
    </div>
    <div data-que="4">
      <img src="https://image.ibb.co/djGa9H/BrBa.jpg" alt="">
    </div>
    <div data-que="3">
      <img src="https://image.ibb.co/fJRh8c/merlin.jpg" alt="">
    </div>
    <div data-que="2">
      <img src="https://image.ibb.co/gU2ZMx/lacasadepapel.jpg" alt="">
    </div>
    <div data-que="1">
      <img src="https://image.ibb.co/njvvuH/12monkeys.jpg" alt="">
    </div>
    <div data-que="0">
      <img src="https://image.ibb.co/gOiWZH/lost.jpg" alt="">
    </div>
    <div data-que="-1">
      <img src="https://image.ibb.co/gOiWZH/lost.jpg" alt="">
    </div>
    <div data-que="-2">
      <img src="https://image.ibb.co/gOiWZH/lost.jpg" alt="">
    </div>
    <div data-que="-3">
      <img src="https://image.ibb.co/njvvuH/12monkeys.jpg" alt="">
    </div>
    
    <div class="show-info">
      <h1>Show Name</h1>
      <p>Lorem ipsum dolor sit amet repidae onctetur adipisicing elit. Non corporis maxime perferendis impedit omnis repiandae libero esse nesrtciunt dotloroum dolorrum tetenetur error.</p>
      <div class="rating">9.5</div>
    </div>
  </div>
  
  <div class="search">
    <input type="text" placeholder="Search..." />
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ilyasbilgihan/riccardoandaposs-tv-show-details-MGaayp */
.hamburger:before, .hamburger:after {
  content: "";
  position: absolute;
  width: 45px;
  height: 5px;
  border-radius: 4px;
  background-color: #e50914;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  font-family: 'Nunito', sans-serif;
}

h1, p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

input:focus {
  outline: none;
}

#header {
  width: 1218px;
  height: 35px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 55px 0;
}

.hamburger {
  margin-top: 15px;
  width: 36px;
  height: 5px;
  border-radius: 4px;
  background-color: #e50914;
  grid-column: 1/2;
}
.hamburger:before {
  margin-top: -15px;
}
.hamburger:after {
  margin-top: 15px;
}

.logo {
  grid-column: 2/3;
  justify-self: center;
}
.logo a img {
  width: 160px;
}

.profile {
  position: relative;
  grid-column: 3/4;
  justify-self: right;
  margin-top: -10px;
}
.profile > div {
  display: inline-block;
  transition: 1s;
}
.profile .profile-avatar {
  position: absolute;
  right: 184px;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}
.profile .profile-avatar img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 10px solid #efefef;
}
.profile .profile-name {
  height: 55px;
  line-height: 55px;
}
.profile .profile-name a {
  font-weight: bold;
  font-size: 18px;
  color: #e50914;
}

#main {
  position: relative;
  width: 1170px;
  height: 100vh;
  margin: -145px auto 0 auto;
  padding-top: 145px;
  box-sizing: border-box;
}

.slider {
  position: relative;
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
}
.slider > div {
  background: #fff;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.slider > div img {
  height: 100%;
}
.slider div[data-que="4"] {
  z-index: 96;
  height: 205px;
  grid-column: 1/2;
  margin-left: 45px;
  -webkit-filter: blur(9px);
          filter: blur(9px);
}
.slider div[data-que="4"] img {
  -webkit-transform: rotateY(45deg);
          transform: rotateY(45deg);
  opacity: .3;
}
.slider div[data-que="3"] {
  z-index: 96;
  height: 245px;
  grid-column: 2/3;
  margin-left: -105%;
  -webkit-filter: blur(7px);
          filter: blur(7px);
}
.slider div[data-que="3"] img {
  -webkit-transform: rotateY(45deg);
          transform: rotateY(45deg);
  margin-left: -21px;
  opacity: .5;
}
.slider div[data-que="2"] {
  z-index: 97;
  height: 285px;
  grid-column: 3/4;
  margin-left: -205%;
  -webkit-filter: blur(5px);
          filter: blur(5px);
}
.slider div[data-que="2"] img {
  -webkit-transform: rotateY(25deg);
          transform: rotateY(25deg);
  margin-left: -6px;
  opacity: .7;
}
.slider div[data-que="1"] {
  z-index: 98;
  height: 325px;
  grid-column: 4/5;
  margin-left: -300%;
  -webkit-filter: blur(3px);
          filter: blur(3px);
}
.slider div[data-que="1"] img {
  -webkit-transform: rotateY(10deg);
          transform: rotateY(10deg);
  opacity: .9;
}
.slider div[data-que="0"] {
  z-index: 99;
  height: 365px;
  grid-column: 5/6;
  margin-left: -400%;
  box-shadow: 0px 10px 25px 2px rgba(10, 26, 34, 0.8);
}
.slider div[data-que*="-"] {
  display: none;
  height: 365px;
  position: absolute;
  right: -260px;
  -webkit-transform: scale(1.6);
          transform: scale(1.6);
}
.slider .hidden {
  display: none;
  height: 365px;
  position: absolute;
  left: -25px;
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}
.slider .hidden img {
  -webkit-transform: rotateY(30deg);
          transform: rotateY(30deg);
}
.slider .show-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 295px;
  background-color: #e50914 !important;
  color: #fff;
  margin: 35px 0 0 714px;
  padding: 45px;
  box-sizing: border-box;
  box-shadow: inset 5px 20px 130px 20px rgba(10, 26, 34, 0.1), 0 0 70px 10px rgba(225, 9, 20, 0.35);
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7);
}
.slider .show-info .rating {
  text-align: right;
  font-size: 2em;
}
.slider .show-info .rating:after {
  color: #bc040e;
  font-weight: bold;
  text-shadow: none;
  content: " /10";
  font-size: .6em;
}
.slider .show-info p {
  line-height: 1.6;
  margin: 8px 0;
}
.slider .show-info p:first-letter {
  margin-left: 10px;
}
.slider .controls {
  position: absolute;
  width: 100%;
  left: 0;
}
.slider .controls .left {
  position: absolute;
  width: 35px;
  height: 35px;
  top: 50%;
  left: 0;
  border: solid #e50914;
  border-width: 0 0 2px 2px;
  -webkit-transform: rotate(45deg) translateY(-50%);
          transform: rotate(45deg) translateY(-50%);
}
.slider .controls .right {
  position: absolute;
  width: 35px;
  height: 35px;
  top: 50%;
  right: 24px;
  border: solid #e50914;
  border-width: 2px 2px 0 0;
  -webkit-transform: rotate(45deg) translateY(-50%);
          transform: rotate(45deg) translateY(-50%);
}
.slider .controls > div:hover {
  cursor: pointer;
}
.slider .controls > div[data-count="0"] {
  border-color: #d2d2d2;
  cursor: default;
}

.search {
  position: absolute;
  top: 665px;
  left: 50%;
  width: 420px;
  height: 45px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.search input {
  color: #b8b8b8;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  font-size: 16px;
  font-family: 'Nunito', sans-serif;
  border: 1px solid #b3b3b3;
  padding: 0 28px;
  box-sizing: border-box;
}
.search:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 10px;
  right: 28px;
  border: 2px solid #e50914;
  border-radius: 50%;
  box-sizing: border-box;
}
.search:before {
  content: "";
  position: absolute;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 25px;
  right: 27px;
  background-color: #e50914;
}

@-webkit-keyframes close-info {
  80% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    width: 365px;
    height: 260px;
    margin: 53px 0 0 402px;
  }
  100% {
    opacity: 0;
  }
}

@keyframes close-info {
  80% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    width: 365px;
    height: 260px;
    margin: 53px 0 0 402px;
  }
  100% {
    opacity: 0;
  }
}


/*Downloaded from https://www.codeseek.co/ilyasbilgihan/riccardoandaposs-tv-show-details-MGaayp */
var items = [];

function checkCount() {
  
  var leftCount = 0;
  var rightCount = 0;
  temp = $(".slider div[data-que]");
  for (var i=0; i<temp.toArray().length; i++){
    
    items.push(temp[i]);
    if(temp[i].dataset.que > 0) {
      leftCount++;
    }
    if(temp[i].dataset.que < 0) {
      rightCount++;
    }
    
    if(temp[i].dataset.que <= 4) {
      $(temp[i]).removeClass("hidden");
    }
    
    if(temp[i].dataset.que > 4) {
      $(temp[i]).addClass("hidden");
    }
    
  }
  $(".slider .right").attr("data-count",rightCount);
  $(".slider .left").attr("data-count",leftCount);
  
}



$(document).ready(function(){
    checkCount();
    
});




$(".slider .left").click(function(){
  
  if( $(this).attr("data-count") > 0 ){

    $.each( items, function(key, item) {
      item.dataset.que--;
    });
    items = [];
    checkCount(); 
  
  }
  
});

$(".slider .right").click(function(){
  
  if( $(this).attr("data-count") > 0 ){

    $.each( items, function(key, item) {
      item.dataset.que++;
    });
    items = [];
    checkCount(); 
  
  }
  
});

Comments