Item: Riccardo&apos;s TV-Show Details
Rating: 3.4
Author: ilyasbilgihan

0 Downloads
31 Views
Tweet
Download Now View Demo

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

More from ilyasbilgihan

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

Technologies

Comments

More from ilyasbilgihan

my-profile

Riccardo's TV-Show Details

Simon's Split Screen Navigation

Hover Effect

You Might Also Like

mmp310-assignment-03-shrink-and-enlarge-buttons

A Pen by Canmert

spatial info

Perspective Shift

Tic Tac Toe

CLE No-results

Creative Anchor Buttons

css-flex-layout-pip-top-center