Movies free Card Design Html Css

Free code and video tutorial Movies Card Design Html Css

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Profile Card</title>
	<script src="https://kit.fontawesome.com/1c2c2462bf.js"></script>
	<link rel="stylesheet" href="style.css"> 
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet"> 
</head>
<body>

<div class="container">
 <div class="row px-xl-5 px lg-0">
  <div class="col-md-4">
    <div class="main">
	 <div class="movie-img">
	   <img src="https://i2.wp.com/itc.ua/wp-content/uploads/2017/06/Wonder_Woman_i03.jpg" class="backimg">
	   <img class="movie-cover" src="https://images-na.ssl-images-amazon.com/images/I/A1wxXiiMuYL._AC_SY741_.jpg">
	   <i class="fa fa-play"></i>
	 </div>
	 <h6>Wonder Women</h6>
	 <img src="https://californiachef.com/wp-content/uploads/2018/06/5-stars.png" class="rating">
	 <div class="head1 text-center">
	   <p>Length</p>
	   <p>Lang</p>
	   <p>Rating</p>
	   <p>Reviev</p>
	 </div>
	 <div class="head2 text-center">
	   <p>1:37</p>
	   <p>End</p>
	   <p>6.4</p>
	   <p>45+</p>
	 </div>
	</div>
  </div>
    <div class="col-md-4">
    <div class="main">
	 <div class="movie-img">
	   <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2b05cdf2-95e2-49ed-a085-8a24226e19b0/d9jx5lm-8a5bb190-e7c5-43c2-bdc0-80ae454df700.jpg/v1/fill/w_1024,h_1449,q_75,strp/world_war_hulk_by_hemison_d9jx5lm-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0xNDQ5IiwicGF0aCI6IlwvZlwvMmIwNWNkZjItOTVlMi00OWVkLWEwODUtOGEyNDIyNmUxOWIwXC9kOWp4NWxtLThhNWJiMTkwLWU3YzUtNDNjMi1iZGMwLTgwYWU0NTRkZjcwMC5qcGciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.s72VsSwQHW1wkliVUFrPLgw2IoWTyRXsZLN0NpuEqN8" class="backimg">
	   <img class="movie-cover" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2b05cdf2-95e2-49ed-a085-8a24226e19b0/d9jx5lm-8a5bb190-e7c5-43c2-bdc0-80ae454df700.jpg/v1/fill/w_1024,h_1449,q_75,strp/world_war_hulk_by_hemison_d9jx5lm-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0xNDQ5IiwicGF0aCI6IlwvZlwvMmIwNWNkZjItOTVlMi00OWVkLWEwODUtOGEyNDIyNmUxOWIwXC9kOWp4NWxtLThhNWJiMTkwLWU3YzUtNDNjMi1iZGMwLTgwYWU0NTRkZjcwMC5qcGciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.s72VsSwQHW1wkliVUFrPLgw2IoWTyRXsZLN0NpuEqN8">
	   <i class="fa fa-play"></i>
	 </div>
	 <h6>Wonder Women</h6>
	 <img src="https://californiachef.com/wp-content/uploads/2018/06/5-stars.png" class="rating">
	 <div class="head1 text-center">
	   <p>Length</p>
	   <p>Lang</p>
	   <p>Rating</p>
	   <p>Reviev</p>
	 </div>
	 <div class="head2 text-center">
	   <p>1:37</p>
	   <p>End</p>
	   <p>6.4</p>
	   <p>45+</p>
	 </div>
	</div>
  </div>
    <div class="col-md-4">
    <div class="main">
	 <div class="movie-img">
	   <img src="https://ae01.alicdn.com/kf/H100652e33735449f878c3ba450ad1756J/60x84cm-Marvel-Comic-Spider-Man-Super-hero-Spiderman-Movie-Posters-Cartoon-Canvas-Painting-By-numbers-poster.jpg" class="backimg">
	   <img class="movie-cover" src="https://i2.rozetka.ua/goods/18374825/216570805_images_18374825353.jpg">
	   <i class="fa fa-play"></i>
	 </div>
	 <h6>Spider Man</h6>
	 <img src="https://californiachef.com/wp-content/uploads/2018/06/5-stars.png" class="rating">
	 <div class="head1 text-center">
	   <p>Length</p>
	   <p>Lang</p>
	   <p>Rating</p>
	   <p>Reviev</p>
	 </div>
	 <div class="head2 text-center">
	   <p>1:37</p>
	   <p>End</p>
	   <p>6.4</p>
	   <p>45+</p>
	 </div>
	</div>
  </div>
 </div>
</div>

</body>
</html>

CSS code

@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body {
margin:0;
padding:0;
font-family: 'PT Sans', sans-serif;
background-color: #D1D9D4;
}
.main{
border-radius:30px;
overflow:hidden;
height:530px;
width:93%;
margin:30px auto;
background-color:#FFFFFF;
box-shadow: 0px 20px 100px rgba(0,0,0,0.1);
}
.movie-img{
padding:10px 10px;
position:relative;
}
.backimg{
height:310px;
width:100%;
border-radius: 30px 30px 10px 30px;
}
.movie-cover{
position:absolute;
height:120px;
bottom:-62px;
left:32px;
border-radius:5px;
box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
}
.fa-play{
position:absolute;
right:28px;
bottom:-7px;
width:40px;
height:40px;
text-align:center;
line-height:40px;
font-size:13px;
background-color:#dc2c29;
color:#fff;
border-radius:60px;
}
h6{
margin-left:130px;
text-transform:capitalize;
margin-top:15px;
font-size:1em;
font-family:sans-serif;
font-weight: 600;
}
.rating{
height:10px;
margin-left:130px;
margin-top:0px;
}
.head1{
column-count:4;
height:30px;
padding:0px 26px;
width:100%;
margin-top:25px;
}
.head1 p{
color:rgba(0,0,0,0.7);
font-family:sans-serif;
font-size:0.9em;
}
.head2{
column-count:4;
height:30px;
padding:0px 26px;
width:100%;
}
.head2 p{
color:rgba(0,0,0,0.7);
font-family:sans-serif;
font-size:0.9em;
font-weight:700;
}

You can download the archive with the file below.



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.