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.
Find out about the update of this script first in our telegram channel: https://t.me/proweblabxyz