Posted on May 3, 2021, 8 p.m. by Bishal ( 3747)
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Movie Tickets - Code With Bishal</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
<div class="wrapper">
<div class="movie_card">
<div class="left">
<div class="datails">
<h1>Mission: Impossible – Fallout</h1>
<div class="head">
<p class="rated">PG - 13</p>
<p class="year">2021</p>
<p class="genre">Action | Adventure </p>
<p class="time">2h 30m</p>
</div>
</div>
</div>
</div>
</div>
<p class="description">Lorem ipsum
dolor sit amet consectetur
adipisicing elit. Magni, hic.
Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Minima, voluptatum!</p>
<a class="read_more"
href="https://codewithbishal.com"
target="_blank" title="Read More">Read More</a>
<div class="buttons">
<button title="Click to view trailer">
<i class="fas fa-play"></i> SEE TRAILER
</button>
<button title="Download the trailer">
<i class="fas fa-download"></i> DOWNLOAD
</button>
<button title="Rating">
<i class="fas fa-thumbs-up"></i> 97%
</button>
<button title="Bookmark">
<i class="fas fa-star"></i>
</button>
</div>
<div class="c_right">
<div class="img_c">
<img src="https://upload.wikimedia.org/wikipedia/en/f/ff/MI_%E2%80%93_Fallout.jpg" alt="Movie IMG">
</div>
<div class="play_btn">
<a href="https://codewithbishal.com" target="_blank" title="Play Trailer">
<i class="fas fa-play-circle"></i>
</a>
</div>
</div>
style.css
<head> </head>
of your HTML document:
<link href="style.css" rel="stylesheet">
style.css
file:body{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.movie_card {
color: #fff;
height: 390px;
margin: 50px auto;
display: flex;
max-width: 100%;
background: linear-gradient(#373B44, #4286f4);
box-shadow: 0 0 40px rgba(0,0,0,0.3);
}
.left {
width: 80%;
}
.datails {
width: 90%;
padding: 30px;
margin-top: -25px;
}
.c_right img {
height: 390px;
width:100%;
}
.head {
width: 100%;
display: flex;
justify-content: space-between;
}
.rated, .year, .genre, .time {
color: #fff;
padding: 10px;
font-weight: bold;
border-radius: 15px;
}
.rated {
box-shadow: 0 0 50px rgba(0, 0, 0, 0.568);
}
a {
color: black;
display: block;
text-decoration: none;
outline: none;
}
.buttons {
margin-left: -10px;
}
button, .rated, .play_btn{
background: linear-gradient(#b24591c9, #f15f7ac4);
}
button {
color: #fff;
border: none;
padding: 20px;
outline: none;
font-size: 12px;
margin-top: 30px;
margin-left: 5px;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.616);
cursor: pointer;
transition: 200ms ease-in-out;
}
button:hover {
transform: scale(1.1);
}
.play_btn {
height: 100%;
margin: -394px auto;
position: relative;
text-align: center;
background: linear-gradient(#fc5c7c65, #6a82fb5b);
box-shadow: 0 0 50px rgba(0,0,0,0.2);
}
.fa-play-circle {
color: black;
font-size: 160px;
margin-top: 110px;
animation: bounce 1s infinite;
}
.c_right:hover{
cursor: pointer;
transform: scale(1.1);
}
.credits{
font-size: 20px;
}
@keyframes bounce {
from{opacity: 1;}
to{opacity: 0;}
}
@media (max-width: 700px){
.movie_card{
display: block;
}
}
@media (max-width: 600px){
button{
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Movie Tickets - Code With Bishal</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="wrapper">
<div class="movie_card">
<div class="left">
<div class="datails">
<h1>Mission: Impossible – Fallout</h1>
<div class="head">
<p class="rated">PG - 13</p>
<p class="year">2021</p>
<p class="genre">Action | Adventure </p>
<p class="time">2h 30m</p>
</div>
<p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, hic. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima, voluptatum!</p>
<a class="read_more" href="https://codewithbishal.com" target="_blank" title="Read More">Read More</a>
<div class="buttons">
<button title="Click to view trailer">
<i class="fas fa-play"></i> SEE TRAILER
</button>
<button title="Download the trailer">
<i class="fas fa-download"></i> DOWNLOAD
</button>
<button title="Rating">
<i class="fas fa-thumbs-up"></i> 97%
</button>
<button title="Bookmark">
<i class="fas fa-star"></i>
</button>
</div>
</div>
</div>
<div class="c_right">
<div class="img_c">
<img src="https://upload.wikimedia.org/wikipedia/en/f/ff/MI_%E2%80%93_Fallout.jpg" alt="Movie IMG">
</div>
<div class="play_btn">
<a href="https://codewithbishal.com" target="_blank" title="Play Trailer">
<i class="fas fa-play-circle"></i>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
body{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.movie_card {
color: #fff;
height: 390px;
margin: 50px auto;
display: flex;
max-width: 100%;
background: linear-gradient(#373B44, #4286f4);
box-shadow: 0 0 40px rgba(0,0,0,0.3);
}
.left {
width: 80%;
}
.datails {
width: 90%;
padding: 30px;
margin-top: -25px;
}
.c_right img {
height: 390px;
width:100%;
}
.head {
width: 100%;
display: flex;
justify-content: space-between;
}
.rated, .year, .genre, .time {
color: #fff;
padding: 10px;
font-weight: bold;
border-radius: 15px;
}
.rated {
box-shadow: 0 0 50px rgba(0, 0, 0, 0.568);
}
a {
color: black;
display: block;
text-decoration: none;
outline: none;
}
.buttons {
margin-left: -10px;
}
button, .rated, .play_btn{
background: linear-gradient(#b24591c9, #f15f7ac4);
}
button {
color: #fff;
border: none;
padding: 20px;
outline: none;
font-size: 12px;
margin-top: 30px;
margin-left: 5px;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.616);
cursor: pointer;
transition: 200ms ease-in-out;
}
button:hover {
transform: scale(1.1);
}
.play_btn {
height: 100%;
margin: -394px auto;
position: relative;
text-align: center;
background: linear-gradient(#fc5c7c65, #6a82fb5b);
box-shadow: 0 0 50px rgba(0,0,0,0.2);
}
.fa-play-circle {
color: black;
font-size: 160px;
margin-top: 110px;
animation: bounce 1s infinite;
}
.c_right:hover{
cursor: pointer;
transform: scale(1.1);
}
.credits{
font-size: 20px;
}
@keyframes bounce {
from{opacity: 1;}
to{opacity: 0;}
}
@media (max-width: 700px){
.movie_card{
display: block;
}
}
@media (max-width: 600px){
button{
display: none;
}
}