Movie Card HTML CSS
Movie Card UI Design Using HTML and CSS - How To Create a Movie Card User Interface - Tutorial
Super
0
650
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.
Our website is for sale! The domain and website has been running for more than 3 years, but it's time to part with it. There is no price, so I consider any offer. Contact us if you are interested in buying in the feedback form, we will discuss options, price and details for transferring the site. (script, database and everything else for the site to work).
