Cinema Paradiso Movies

In this example below you will see how to do a Cinema Paradiso Movies with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by melanielin, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright melanielin ©
  • HTML
  • CSS
  • JavaScript
    <header class="l-header">
	<div class="l-header__logo">
<img width="1101" alt="logo2" src="https://user-images.githubusercontent.com/20979257/36292556-87d50d58-12a0-11e8-9769-f26697c37274.png">

		</div>
	<ul class="l-header__nav">
		<input class="l-header__search" type="text" placeholder="   Seach movies, TV, actors, more...">
		<li>Movies</li>
		<li>TV Shows</li>
		<li>Log in</li>
		<li>Sign up</li>
	</ul>
</header> 
<!-- end navigation -->

<div class="container-fluid body">
  <div class="row">

<!--   left panel   -->
<div class="col-3 sidebar">
<!--  sidebar: movies category  -->
	<ul class="s-explore">
<!--     in theaters -->
   	 <li class="s-explore__title"><h3>In Theaters</h3></li>
		<li class="s-explore__list"><a href="#" >opening this week</a></li>
		<li class="s-explore__list"><a href="#"  >top box office</a></li>
		<li class="s-explore__list"><a href="#" >coming soon</a></li>
		<li class="s-explore__list"><a href="#" >certified fresh movies</a></li>
    
<!--     dvds -->
    <li class="s-explore__title"><h3>dvd & steaming movies</h3></li>
		<li class="s-explore__list"><a  href="#" >browser all</a></li>
		<li class="s-explore__list"><a href="#" >top DVD & streaming</a></li>
		<li class="s-explore__list"><a href="#" >coming soon</a></li>
		<li class="s-explore__list"><a href="#" >certified fresh movies</a></li>
    
<!--     tv -->
    <li class="s-explore__title"><h3>TV</h3></li>
		<li class="s-explore__list"><a href="#" >new TV tonight</a></li>
		<li class="s-explore__list"><a href="#" >most popular tv on RT</a></li>
		<li class="s-explore__list"><a href="#"  >certified fresh TV</a></li>
		
	</ul>
  
<!--  2nd box  -->
  	<ul class="s-explore">
<!--     in theaters -->
   	 <li class="s-explore__title"><h3>You may also like</h3></li>
		<li class="s-explore__list"><a  href="#">Blade Runner 2049</a><span class="s-explore__rating">4.9/5.0</span></li>
      <li class="s-explore__list"><a  href="#">Coco</a><span class="s-explore__rating">4.9/5.0</span></li>
      <li class="s-explore__list"><a  href="#">Call Me By Your Name</a><span class="s-explore__rating">4.9/5.0</span></li>
      <li class="s-explore__list"><a  href="#">Lady Bird</a><span class="s-explore__rating">4.9/5.0</span></li>
      <li class="s-explore__list"><a  href="#">Blade Runner 2049</a><span class="s-explore__rating">4.9/5.0</span></li>
      <li class="s-explore__list"><a  href="#">Coco</a><span class="s-explore__rating">4.9/5.0</span></li>
      <li class="s-explore__list"><a  href="#">Call Me By Your Name</a><span class="s-explore__rating">4.9/5.0</span></li>
      <li class="s-explore__list"><a  href="#">Lady Bird</a><span class="s-explore__rating">4.9/5.0</span></li>
      <li class="s-explore__list"><a  href="#">Blade Runner 2049</a><span class="s-explore__rating">4.9/5.0</span></li>
      <li class="s-explore__list"><a  href="#">Coco</a><span class="s-explore__rating">4.9/5.0</span></li>
          <li class="s-explore__list"><a href="#"><span style="color: white;">more <i class="fa fa-angle-right"></i></span></a></li>
  </ul>
  
<!--  3rd box  -->
  <ul class="s-explore s-users">
     <li class="s-explore__title"><h3 style="margin-bottom: 0.7em;">Who watched this movie</h3></li>
<!--  a list of 4 users -->
    <li>
      <ul class="s-users-avatars">
  <li class="s-users__item"><a  href="#"><img src="https://user-images.githubusercontent.com/20979257/36620069-64e71fbe-18bf-11e8-87e8-565e2fc4d6da.jpeg" alt="user"/><span>Hello</span></a></li>
     <li class="s-users__item"><a  href="#"><img src="https://user-images.githubusercontent.com/20979257/36620076-68d7d546-18bf-11e8-9fd9-e2c313cac2fc.jpeg" alt="user"/><span>Cinema</span></a></li>
    <li class="s-users__item"><a  href="#"><img src="https://user-images.githubusercontent.com/20979257/36620079-69e311f8-18bf-11e8-99c6-9ceb6c267f9e.jpeg" alt="user"/><span>Paradiso</span></a></li>
    <li class="s-users__item"><a  href="#"><img src="https://user-images.githubusercontent.com/20979257/36620080-6af8d1e0-18bf-11e8-9046-70bb36d7fe77.jpeg" alt="user"/><span>User</span></a></li>
      </ul></li><!-- ./1st row users -->
<!--     2nd row users -->
    <li>
      <ul class="s-users-avatars">
  <li class="s-users__item"><a  href="#"><img src="https://user-images.githubusercontent.com/20979257/36620069-64e71fbe-18bf-11e8-87e8-565e2fc4d6da.jpeg" alt="user"/><span>Hello</span></a></li>
     <li class="s-users__item"><a  href="#"><img src="https://user-images.githubusercontent.com/20979257/36620076-68d7d546-18bf-11e8-9fd9-e2c313cac2fc.jpeg" alt="user"/><span>Cinema</span></a></li>
    <li class="s-users__item"><a  href="#"><img src="https://user-images.githubusercontent.com/20979257/36620079-69e311f8-18bf-11e8-99c6-9ceb6c267f9e.jpeg" alt="user"/><span>Paradiso</span></a></li>
    <li class="s-users__item"><a  href="#"><img src="https://user-images.githubusercontent.com/20979257/36620080-6af8d1e0-18bf-11e8-9046-70bb36d7fe77.jpeg" alt="user"/><span>User</span></a></li>
      </ul></li> <!-- ./end 2nd row users -->
    
<!--     3rd users -->
    <li>
      <ul class="s-users-avatars">
  <li class="s-users__item"><a  href="#"><img src="https://user-images.githubusercontent.com/20979257/36620069-64e71fbe-18bf-11e8-87e8-565e2fc4d6da.jpeg" alt="user"/><span>Hello</span></a></li>
     <li class="s-users__item"><a  href="#"><img src="https://user-images.githubusercontent.com/20979257/36620076-68d7d546-18bf-11e8-9fd9-e2c313cac2fc.jpeg" alt="user"/><span>Cinema</span></a></li>
    <li class="s-users__item"><a  href="#"><img src="https://user-images.githubusercontent.com/20979257/36620079-69e311f8-18bf-11e8-99c6-9ceb6c267f9e.jpeg" alt="user"/><span>Paradiso</span></a></li>
    <li class="s-users__item"><a  href="#"><img src="https://user-images.githubusercontent.com/20979257/36620080-6af8d1e0-18bf-11e8-9046-70bb36d7fe77.jpeg" alt="user"/><span>User</span></a></li>
      </ul></li> <!-- ./end 3rd row users -->
    <li class="s-explore__list"><a href="#"><span style="color: white;">more <i class="fa fa-angle-right"></i></span></a></li>
  </ul>
  
</div> <!-- ./end left panel -->
    
<!--  right panel -->
      <div class="right-wrap col-8">

        <!-- 	1st section	 -->
		<div class="l-cards">
			<h2 class="l-cards__title">opening this week </h2>   
        <a class="l-cards__more"href="#"><i class="fa  fa-star"></i></a>
              <a class="l-cards__more"href="#"><i class="fa  fa-calendar"></i></a>
<!-- 			<a class="l-cards__more"href="#"><i class="fa fa-list"></i>
</a>
      <a class="l-cards__more"href="#">  <i class="fa fa-th-large"></i> -->
</a>
    
<!-- 1st row -->
			<ul class="l-cards__list">
				<li class="l-cards__item">
					<a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a>
				</li>
				
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
			
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
				
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
				
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
				
					
			</ul> <!-- ./first row -->
      
      <!-- 2nd row -->
			<ul class="l-cards__list">
				<li class="l-cards__item">
					<a href="#" class="l-cards__image fill"></a>
          <a href="#" class="l-cards__text"></a>
				</li>
				
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
			
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
				
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
				
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
				
					
			</ul> <!-- ./2nd row -->
      
      <!-- 3rd row -->
			<ul class="l-cards__list">
				<li class="l-cards__item">
					<a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a>
				</li>
				
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
			
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
				
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
				
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
				
					
			</ul> <!-- ./3rd row -->
      
         <!-- 4th row -->
			<ul class="l-cards__list">
				<li class="l-cards__item">
					<a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a>
				</li>
				
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
			
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
				
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
				
				<li class="l-cards__item"><a href="#" class="l-cards__image fill"></a>
					<a href="#" class="l-cards__text"></a></li>
				
					
			</ul> <!-- ./4th row -->
		</div>
<!-- 	end 1st section	 -->       
    </div> <!-- ./end right panel -->
     <div> <!-- ./row -->
</div> <!-- ./container-fluid -->

<!--   pagination   -->
<ul class="pagination">
  <li><a href="#"><i class="fa fa-angle-left"></i></a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li class="active"><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#"><i class="fa fa-angle-right"></i></a></li>
</ul>
    
<!-- footer -->
<footer>
   <div class="f-wrap">
      <section class="f-column">
        <a href="#">FAQs</a>
        <a href="#">Contact Us</a>           <a href="#">Feedback</a>
        <a href="#">Privacy Policy</a>
		 </section>
      
      <section class="f-column">
        <a href="#">Critic Submission</a>
        <a href="#">Licensing</a>
        <a href="#">Advertise</a>
        <a href="#">Careers</a>
		 </section>
		 
     <section class="f-column">
			 <a href="#">Follow us on</a>
			 <br>
        <ul class="social-icons">
        <li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
        <li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
        <li><a href="" class="social-icon"> <i class="fa fa-rss"></i></a></li>
        <li><a href="" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
        <li><a href="" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
        <li><a href="" class="social-icon"> <i class="fa fa-google-plus"></i></a></li>
    </ul>
      </section>   
  </div>
  <div class="legality">
        © Copyright 2018 Cinema Paradiso
      </div>
</footer>

/*Downloaded from https://www.codeseek.co/melanielin/cinema-paradiso-movies-YeLJqM */
    // Base

$primary-light-blue: #8DB9ED;
$primary-line-color: #ccc;
$color-red: rgb(229, 9, 20);
$color-gray: rgb(100, 100, 100);
$padding-hrz: 2.5rem;

html{
	line-height: 1.3;
	letter-spacing: 0.04em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

*, *:before, *:after{
	box-sizing: inherit;
}
body {
	background-color: lighten(black, 3%);
}
body, h1, ul, p{
  margin: 0;
}

ul{
	padding: 0;
}

li{
	list-style-type: none;
}

img{
	width: 100%;
	height: auto;
	vertical-align: top;
}

a{
  text-decoration: none !important;	
}
.body {
  background-color: lighten(black, 10%);
  margin-top: 1.5em;
  // shadow
  -moz-box-shadow:    0px 1px 5px 6px lighten(black, 10%);
  -webkit-box-shadow: 0px 1px 5px 6px lighten(black, 10%);
  box-shadow:         0px 1px 5px 6px lighten(black, 10%);
}
// navigation

.l-header{
	font-size: 16px;
	padding: 0 $padding-hrz;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	> *{
		margin-top: 10px;
		margin-bottom: -15px;
	}
}

.l-header__logo{
	width: 250px;
	// height: 33px;
	// fill: $color-red;
}

.l-header__browse{
	color: $color-red;
	font-weight: bold;
	margin-right: auto;
	margin-left: 40px;
	padding-right: 40px;
}
.l-header__search{
	width: 20rem;
	height: 2rem;
	border-radius: 5px;
	border: none;
	margin-top: -8px;
	font-size: 0.8rem;
}
.l-header__nav{
	display: flex;
	color: white;
	> * + *{
		margin-left: 32px;
	}
}

// left sidebar
.s-explore {
  margin: 2em;
  width: 18em; 
  padding: 1em;
  border: 1px solid gray;
}
// each list item
.s-explore__list { 
  color: darken(white, 15%);
  // list name
  a { 
    color: darken(white, 20%) !important;  
    font-size: 14px; 
    text-transform: capitalize;
    padding: 0 0 3px 20px;
  }

  a:hover {
    text-decoration: underline !important;
  }
  span {
    float: right;
    font-size: 14px; 
    color: $color-red;
  }
}
.s-explore__title {
  color: white;
  h3 {
    text-transform: uppercase;  
    font-size: 14px; 
    font-weight: bold;
    margin: 0;
    padding: 5px 0 5px 0;
  }
}

.s-users {
  
}
// a row of users, ul
.s-users-avatars{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 0.7em;
  a {
    color: darken(white, 20%) 
  }
}
.s-users__item {
	display: flex;
	flex: 0 0 10%; // size of each list item
  text-align: center;
  img {
    width: 50px;
  }
  span {
    margin: 0 auto;
    font-size: 0.7em;
    display: block;
  }
}  




// right panel
.l-cards{
  margin-top: 2em;
	padding-left: $padding-hrz;
}
// title of each section
.l-cards__title{
	font-size: inherit;
	color: white;
	font-size: 1.5em;
	display: inline;
  text-transform: uppercase;
}
// the more button on the right
.l-cards__more{
	float: right;
	color: darken(white, 30%);
	font-size: 1em;
	margin-right: 3.5%;
}
// poster list
.l-cards__list{
	margin-top: 0.5rem;
	margin-bottom: 9rem;
	display: flex;
}

.l-cards__text{
	text-align: center;
	font-weight: bold;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
	span {
		color: $color-red;
    display: block;
	}
}
// individual poster
.l-cards__item{
	background-color: $color-gray;
	height: 8rem;
	flex: 0 0 10rem;    // side of poster
	margin: 0 0.5rem;
	text-align: center;
	// text under poster
	a {
		color: darken(white, 40%);
		font-size: 0.7rem;
		// text-decoration: none;
	}
	// fix the height
	img {
		height: 14rem;
	}
	
	& + &{
		margin-left: 0.25rem;
	}
}

// pagination
.pagination {
  display: block;
  margin: 0 auto;
  // background-color: green;
}
.pagination li {
  float: left;
  list-style: none;
}
.pagination li a {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: relative;
  margin: 20px 2px 50px;
  color: white;
}
// the circle
.pagination li a:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  border-radius: 100px;
  -webkit-transition: all .25s;
}
// hover
.pagination li a:hover {
  color: white;
}
// hover animation
.pagination li a:hover:before {
  -webkit-transform: scale(1);
  box-shadow: inset 0 0 0 1px white;
}
// active
.pagination li.active a:before {
  -webkit-transform: scale(1);
  box-shadow: inset 0 0 0 1px white;
}


// footer

footer{
  clear: both;
	background-color: lighten(black, 7%);
	width: 100%;
}

.f-wrap{
  width: 80%;
	padding-top: 2rem;
	margin: 0 auto;
}

// each column
.f-column {
  overflow: hidden;
	float: left;
  width: 33%;
  line-height: 1.6em;
	font-size: 0.8rem;
	color: darken(white, 30%);
}
.f-column a {
	display: block;
	color: darken(white, 30%);
}

.legality{
  margin: auto;
  width: 30%;
  clear: both;
  padding: 2rem 0 2rem 0;
	font-size: 0.8rem;
	color: lighten(black, 50%);
}

// social media icons

.social-icons li {
  vertical-align: top;
	display: inline;
	height: 100px;
	a{
		display: inline;
	}
}
.social-icons a {
    color: #fff;
}
.fa-facebook {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-facebook:hover {
    background-color: #3d5b99;
}
.fa-twitter {
    padding:10px 12px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-twitter:hover {
    background-color: #00aced;
}
.fa-rss {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-rss:hover {
    background-color: #eb8231;
}
.fa-youtube {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-youtube:hover {
    background-color: #e64a41;
}
.fa-linkedin {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-linkedin:hover {
    background-color: #0073a4;
}
.fa-google-plus {
    padding:10px 9px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-google-plus:hover {
    background-color: #e25714;
}


/*Downloaded from https://www.codeseek.co/melanielin/cinema-paradiso-movies-YeLJqM */
    $( document ).ready(function() {
  var imageContainers = 	document.getElementsByClassName("l-cards__image");
	var titles = document.getElementsByClassName("l-cards__text");
	
	var i = 0, y = 0;
	while (i < titles.length) {
		// add film image
		var img = $('<img />').attr({
            'src': images[y],
            'alt': filmNames[y],
        }).appendTo(imageContainers[i]);
		
		// add film name and rating
		titles[i].innerHTML = filmNames[y];
		var span = $('<span> 4.9/5.0</span>').appendTo(titles[i]);
		
		i++; 
		y++;
		if (y == 4) y = 0;	
	}

});

var filmNames = ["Blade Runner 2049", "Coco", "Call Me By Your Name", "Lady Bird", "Get Out", "Dunkirk", "In the Fade", "Phantom Thread"];

var images = ["https://images-na.ssl-images-amazon.com/images/M/MV5BNzA1Njg4NzYxOV5BMl5BanBnXkFtZTgwODk5NjU3MzI@._V1_SX300.jpg"	,
							"https://images-na.ssl-images-amazon.com/images/M/MV5BYjQ5NjM0Y2YtNjZkNC00ZDhkLWJjMWItN2QyNzFkMDE3ZjAxXkEyXkFqcGdeQXVyODIxMzk5NjA@._V1_SX300.jpg",
							"https://images-na.ssl-images-amazon.com/images/M/MV5BNDk3NTEwNjc0MV5BMl5BanBnXkFtZTgwNzYxNTMwMzI@._V1_SX300.jpg",
							"https://images-na.ssl-images-amazon.com/images/M/MV5BODhkZGE0NDQtZDc0Zi00YmQ4LWJiNmUtYTY1OGM1ODRmNGVkXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg",
							"https://images-na.ssl-images-amazon.com/images/M/MV5BMTUxMjEzNzE1NF5BMl5BanBnXkFtZTgwNDYwNjUzMTI@.jpg",
							"https://images-na.ssl-images-amazon.com/images/M/MV5BNjA4MzEzOTc0N15BMl5BanBnXkFtZTgwOTcyNDY4MjI@.jpg",
							"https://images-na.ssl-images-amazon.com/images/M/MV5BMTYwNDI5Njg2M15BMl5BanBnXkFtZTgwMzIyNTYxNDM@.jpg",
							"https://images-na.ssl-images-amazon.com/images/M/MV5BOTE5MzkwMjM0NV5BMl5BanBnXkFtZTgwMTQ0Mjk0NDM@.jpg",
];

$('a').on('click', function(e){
  $(e).preventDefault();
});

$('.pagination li').on('click', function(){

  $(this).siblings().removeClass('active');
  $(this).addClass('active');
  
})

Comments