HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content
="width=device-width, initial-scale=1.0">
<title> Moovi Card </title>
</head>
<body>
<div class="container">
<img src="img/obj.png"class="bg-img">
<div class="top-bg"></div>
<div class="info">
<h2 class="movi-name">Avengers - Endgame</h2>
<p class="oth-dtls">12 | 2h 1min | Action,Adventure,Drama | 2019</p>
<p class="dstription">After the devastating events of Infinity War(2018) the universe is it ruins. With the help of remaining allies.
the Avengers assemble once more in order to reverse Thanos'actions and restore balance to the universe</p>
<p>Empowering the future with seamless innovation, where technology meets artistry</p>
<div class="star">
<i class="fa-solid fa-star rating"></i>
<i class="fa-solid fa-star rating"></i>
<i class="fa-solid fa-star rating"></i>
<i class="fa-solid fa-star rating"></i>
<i class="fa-solid fa-star "></i>
</div>
</div>
</div>
</body>
</html>
CSS
/*Style the box items */
* {
padding: 0 ;
margin: 0 ;
box-sizing: border-box ;
font-family: sans-serif ;
}
body{
background: #FEF9F3 ;
}
.container {
height :480px ;
width :285px ;
position :absolute ;
background :#000000 ;
border-radius :10px ;
top :50% ;
left :50% ;
overflow :hidden ;
transition :all .2s ;
cursor :pointer ;
}
.container img {
border-radius :10px ;
height :100% ;
width :100% ;
transition :all .2s ;
cursor :pointer ;
}
.container .info {
position :absolute ;
background :linear-gradient(to top,#000 70%,transparent) ;
bottom :-200px ;
color :#fff ;
padding :20px ;
padding-right :10px ;
transition :all .2s ;
}
.container .top-bg {
width :100% ;
height :50px ;
position :absolute ;
top :0px ;
transition :all .2s ;
}
