Movie Card HTML CSS

Movie Card UI Design Using HTML and CSS - How To Create a Movie Card User Interface - Tutorial

Unfortunately, the author did not leave any files, so we recreated them for you.

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 href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet"> 
</head>
<body>

<div class="card">
 <div class="poster"><img src="https://movieposters2.com/images/1397414-b.jpg"></div>
 <div class="details">
 <h2>Avatar (2014) <br><span>Directed by Bill Condon</span></h2>
 <div class="rating">
  <i class="fa fa-star" aria-hidden=true"></i>
  <i class="fa fa-star" aria-hidden=true"></i>
  <i class="fa fa-star" aria-hidden=true"></i>
  <i class="fa fa-star" aria-hidden=true"></i>
  <i class="fa fa-star-o" aria-hidden=true"></i>
  <span>4/5</span>
 </div>
 <div class="tags">
  <span class="fantasy">Fantasy</span>
  <span class="romance">Romance</span>
 </div>
 <div class="info">
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  </p>
 </div>
 
 <div class="star">
   <h4>Cast</h4>
   <ul>
    <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSuZ32yQvILgxFdd3_deyLN2oXp-gonH4Jsd22AKLACIQQe3juSdOno&s=0"></li>
	<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSrM0ne_G3hf2OhfAEEZnp9lXjrr_Wn2LAg0CuQWbvVtI76wDy_dw&s=0"></li>
	<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFZCI2XUfNijLIAtRzlJA6V6u58CS0YxKOs0GRsYpQ2btbhmx6Ud0Y&s=0"></li>
	<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAB0HrDFPCLu0TUXz9rrNaRQzcabtkQLrJjQKNMd7Iu1Jkg-xwRY1C&s=0"></li>
   </ul>
  </div>
 </div>
</div>  
</body>
</html>

CSS code

@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
body {
margin:0;
padding:0;
font-family: 'PT Sans', sans-serif;
}
.card{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:300px;
height:450px;
background:#000;
overflow:hidden;
box-shadow:0 5px 10px rgba(0,0,0,0.5);
}
.card .poster{
position:relative;
overflow:hidden;
}
.card .poster:before{
content: '';
position: absolute;
bottom:-182px;
left:0;
width:100%;
height:100%;
background:linear-gradient(0deg, #000 50%, transparent);
transition: 0.5s;
z-index:1;
}
.card:hover .poster:before{
bottom: 0;
}
.card .poster img {
width:100%;
transition: 0.5s;
}
.card:hover .poster img{
filter:blur(5px);
transform:translateY(-50px);
}
.details{
position:absolute;
padding:20px;
width:100%;
height:74%;
bottom:-182px;
left:0;
box-sizing:border-box;
transition:0.5s;
z-index:2;
}
.card:hover .details{
bottom:0;
}
.details h2{
color:#fff;
margin:0;
padding:0;
font-size:20px;
}
.details h2 span{
font-size:14px;
color:#ff9800;
}
.rating{
position:relative;
padding:5px 0;
}
.rating .fa{
color:#f7f406;
margin-right:2px;
font-size:16px;
}
.rating span{
color:#fff;
padding:0 5px;
}
.tags{
position:relative;
margin-top:5px;
}
.tags span{
padding: 2px 5px;
margin-right: 2px;
color:#fff;
display:inline-block;
border-radius:4px;
}
.tags span.fantasy{
background:#7206f7;
}
.tags span.romance{
background:#f70661;
}
.info{
color:#fff;
}
.info p{
margin:15px 0 10px;
}
.star{
position:relative;
}
.star h4{
margin:0;
padding:0;
font-size:20px;
color:#f7f406;
}
.star ul{
margin:10px 0 0;
padding: 0;
display:flex;
}
.star ul li{
list-style:none;
width:35px;
height:35px;
background:#fff;
border-radius: 50%;
overflow:hidden;
margin-right:6px;

}
.star ul li img{
width:100%;
}

Below there is a button for downloading files.



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.