Responsive Card Design using HTML & CSS

Hello developers, today in this blog you'll learn how to create a Responsive Card Design with a hover effect in HTML & CSS.

Cards are a very important part of any website. It is used to display some important information in short to viewers for posts, products, services, etc.

In this post, you can see three cards with images, heading, some dummy text, and author content. These cards are made responsive by using CSS media query property. We used the hover effect with this card.

When you see this page on the mobile device, these three cards automatically get adjusted one after the other which covers the height and width of the device.

The source code for making this Responsive Card Design is given below,if you want the source code of this program, you can copy it. You can use this Responsive Card Design with your creativity and can take this to the next level.

Responsive Card Design [Source Code]

To make this website, you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name index.html and remember, you've to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title> Blog post card || Learningrobo </title> <link rel="stylesheet" href="style.css"> </head> <body lang="en"> <div class="main"> <div class="card"> <div class="post"> <img class="post-image" src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"/> <div class="post-content"> <p class="post-header"> <a href="#">Title 1</a> </p> <p class="post-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, sunt asperiores quaerat doloremque commodi facere dolor. Velit pariatur, enim veniam! </p> <div class="author"> <div class="author-content"> <p class="author-name">learning robo</p> <p class="date">Jul 18, 2021</p> </div> </div> </div> </div> </div> <div class="card"> <div class="post"> <img class="post-image" src="https://images.unsplash.com/photo-1574103188526-4faaa363a358?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"/> <div class="post-content"> <p class="post-header"> <a href="#">Title 2</a> </p> <p class="post-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, sunt asperiores quaerat doloremque commodi facere dolor. Velit pariatur, enim veniam! </p> <div class="author"> <div class="author-content"> <p class="author-name">learning robo</p> <p class="date">Jul 18, 2021</p> </div> </div> </div> </div> </div> <div class="card"> <div class="post"> <img class="post-image" src="https://images.unsplash.com/photo-1558435186-d31d126391fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80"/> <div class="post-content"> <p class="post-header"> <a href="#">Title 3</a> </p> <p class="post-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, sunt asperiores quaerat doloremque commodi facere dolor. Velit pariatur, enim veniam! </p> <div class="author"> <div class="author-content"> <p class="author-name">learning robo</p> <p class="date">Jul 18, 2021</p> </div> </div> </div> </div> </div> </div> </body> </html>

CSS provides style to an HTML page. To make the page attractive and page responsive create a CSS file with the name style.css and remember that you've to create a file with a .css extension.

  body{
    background-color: orange;
  }
  body::-webkit-scrollbar {
    display: none;
  }
  .main{
    display:flex;
  }
  @media only screen and (max-width:900px){
    .main{
        flex-direction: column;
        margin:30px;
      }
  }
  .card{
    width: 90%;
    height: 500px;
   background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(242,245,248,1) 35%, rgba(236,236,237,1) 100%);
    box-shadow: 0 13px 15px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin: 30px 20px 20px 10px;
    transition: background-color .5s, box-shadow .5s, margin-left .5s;
  }
  .card:hover{
   
    background-color: #ffff;
    box-shadow: 0 30px 30px rgba(0, 0, 0, 0.3);
    transition: background-color .5s, box-shadow .5s, margin-left .5s;
  }
  .post-image{
    width: 92%;
    height: 220px;
    margin: 15px;
    border-radius: 10px 10px 10px;
    float: left;
  }
  .post-content{
    width: 90%;
    height: 250px;
    float: left;
    margin-left: 5px;
    overflow: hidden;
  }
  a{
    font-size: 28px;
    font-family: 'Roboto', sans-serif;
    color: #000;
    text-decoration: none;
  }
  .post-header{
    font-size: 28px;
    font-family: 'Roboto', sans-serif;
    margin-top: 15px;
    color: #000000;
    margin-left: 10px;
    text-align: center;
  }
  .post-text{
    font-size: 15px;
    padding-left: 20px;
    color: #000;
    font-family: 'Roboto', sans-serif;
    
  }
  .author{
    width: 95%;
    height: 60px;
    background-color: #12192c;
    margin-left: 20px;
    margin-top: 5px;
    color:#fff;
    border-radius:15px;
    
  }
  .author-content{
    width: 60%;
    height: 60px;
    margin-left: 10px;
    float: left;
    color:#fff
  }
 
  .author-name{
    font-size: 20px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    margin-top: 10px;
    padding-left: 10px;
  }
  .date{
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    margin-top: -15px;
    padding-left: 10px;
  }
  
We hope you would like this Responsive Card Design using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Responsive Card Design using HTML & CSS, then contact us or comment us. We'll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome