HTML CSS movie card design

How to make a beautiful movie list design for your website. An example of a movie card.

HTML CSS movie card design
HTML CSS movie card design

A simple example of a beautiful card for a site with movies and cartoons. 

CSS code

.bx{
 position: relative;
 width: 200px;
 height: 310px;
 border: 1px solid #10101066;
 margin: 10px;
 border-radius: 20px;
}
.bx img{
 width: 100%;
 height: 100%;
 border-radius: 20px;
}
.bx .content{
 position: absolute;
 width: 100%;
 height: 25%;
 bottom: 0;
 border-radius: 0px 0px 20px 20px;
 z-index: 1;
}
.bx .content::before{
 position: absolute;
 content: '';
 width: 100%;
 height: 100%;
 background: rgb(255 255 255 / 5%);
 backdrop-filter: blur(5px);
 border-radius: 0px 0px 20px 20px;
 z-index: -1;
 }
.content h3 {
    color: #fff;
    padding: 5px 0px 0px 10px;
    font-size: 17px;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: 400;
}
.content p {
    color: #fff;
    padding: 0px 0px 5px 10px;
    font-size: 13px;
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.content h6 {
    color: #fff;
    padding: 0px 0px 0px 10px;
    font-size: 13px;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: 400;
}
.content h6 span{
  color: #000;
  background: #b9aa00;
  padding: 2px 5px;
  border-radius: 5px;
}
.content h6 .bi{
  color: #dbca0e;
  font-size: 15px;
  margin-left: 5px;
}

HTML code

<div class="bx">
  <img src="https://b1.filmpro.ru/c/377809.600xp.jpg" alt="">
  <div class="content">
    <h3>Avatar2</h3>
	<p>Action, Drama, Fantsy</p>
	<h6><span>IMDB</span> <i class="bi bi-star-fill"></i> 9.0</h6>
  </div>
</div>
<div class="bx">
  <img src="https://i0.wp.com/aftercredits.com/wp-content/uploads/2017/05/PiratesOfTheCaribbeanDeadMenTellNoTalesPoster.jpg?ssl=1" alt="">
  <div class="content">
    <h3>Pirates of the Caribbean</h3>
	<p>Action, Drama, Fantsy</p>
	<h6><span>IMDB</span> <i class="bi bi-star-fill"></i> 9.0</h6>
  </div>
</div>
<div class="bx">
  <img src="https://www.kino-teatr.ru/movie/posters/big/6/128836.jpg" alt="">
  <div class="content">
    <h3>Venom</h3>
	<p>Action, Drama, Fantsy</p>
	<h6><span>IMDB</span> <i class="bi bi-star-fill"></i> 9.0</h6>
  </div>
</div>

 



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.


Buy me a coffee