In this tutorial we will see how to design Movies Blog Cards with HTML and CSS. Simple CSS is used for this purpose, HTML code and CSS code is given.
Table of Contents
HTML Code
HTML Code is given below.
<div class="movie-card">
<div class="movie-img">
<img src="black-panther.jpg">
</div>
<div class="card-body">
<h2 class="movie-title">Black Panther II (2022)</h2>
<p class="movie-intro">A sequel that will continue to explore the world of Wakanda and all the characters introduced in the 2018 film.</p>
</div>
</div>
<div class="movie-card">
<div class="movie-img">
<img src="batman.jpg">
</div>
<div class="card-body">
<h2 class="movie-title">The Batman (2022)</h2>
<p class="movie-intro">Batman uncovers corruption in Gotham City that connects to his own family while facing Riddler.</p>
</div>
</div>
<div class="movie-card">
<div class="movie-img">
<img src="the-flash.jpg">
</div>
<div class="card-body">
<h2 class="movie-title">The Flash (2022)</h2>
<p class="movie-intro">The plot is unknown. Feature film based on the comic book superhero, The Flash.</p>
</div>
</div>
CSS Code
CSS Code is given below.
body
{
margin: 0;
padding: 0;
background-color: #ddd;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: 'Barlow Condensed' ,sans-serif;
}
.movie-card
{
background-color: #fff;
width: 100%;
max-width: 300px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 4px 5px 0px #888;
margin: 0px 5px;
min-height: 350px;
cursor: pointer;
}
.movie-img
{
max-height: 168px;
overflow: hidden;
}
.movie-img img
{
width: 100%;
}
.card-body
{
padding: 20px;
}
.movie-title
{
font-size: 20px;
}
.movie-intro
{
font-size: 16px;
}
Demo
Video Tutorial
Watch our video tutorial on Movies Blog Card Design with HTML and CSS.