Responsive blogs card using HTML & CSS

Responsive blogs card using HTML & CSS | try it

Creating responsive blog cards with HTML and CSS is easier than you might think. By following this tutorial, you can improve the visual appeal of your blog while also providing a consistent user experience across all devices. So why wait? Try it and see your blog come to life with stunning responsive design!

HTML

<div class="background">
       <div class="centering">
           <div class="articles">
               <article>
                   <figure>
                       <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?w=900&t=st=1687123388~exp=1687123988~hmac=f3410d0a5c2f20aec66c7d763c789bf0aae9c5026366fe41ae7d18e05e7e406b" alt="Preview">
                   </figure>
                   <div class="article-preview">
                       <h2>My Blog 1</h2>
                       <p>
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                           Praesent in mauris eu tortor porttitor accumsan.
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                           Praesent in mauris eu tortor porttitor accumsan.
                           <a href="#" class="read-more" title="Read More">
                               Read more
                           </a>
                       </p>
                   </div>
               </article>
               <article>
                   <figure>
                       <img src="https://img.freepik.com/free-photo/beautiful-aerial-shot-fronalpstock-mountains-switzerland-beautiful-pink-blue-sky_181624-9315.jpg?w=900&t=st=1687123407~exp=1687124007~hmac=15a1b5a4d3a5af66dfba67bdcd577f769f813bf06fc8b5e50f32f6503099bbd8" alt="Preview">
                   </figure>
                   <div class="article-preview">
                       <h2>My Blog 2</h2>
                       <p>
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                           Praesent in mauris eu tortor porttitor accumsan.
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                           Praesent in mauris eu tortor porttitor accumsan.
                           <a href="#" class="read-more" title="Read More">
                               Read more
                           </a>
                       </p>
                   </div>
               </article>
               <article>
                   <figure>
                       <img src="https://img.freepik.com/free-photo/tropical-beach_74190-188.jpg?w=1800&t=st=1687169672~exp=1687170272~hmac=b66f9b9c1e344cbfe6fe2e5f65e94ebb8d418dad2e2af2b892ad9ac60e9eb79c" alt="Preview">
                   </figure>
                   <div class="article-preview">
                       <h2>My Blog 3</h2>
                       <p>
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.

<a href="#" class="read-more">
                               Read more
                           </a>
                       </p>
                   </div>
               </article>
               <article>
                   <figure>
                       <img src="https://img.freepik.com/free-photo/pathway-middle-green-leafed-trees-with-sun-shining-through-branches_181624-4539.jpg?w=900&t=st=1687123477~exp=1687124077~hmac=6e8b1735a2cb25be79f248b6a3307a37a15b080dee114565d01704b97d432a80" alt="Preview">
                   </figure>
                   <div class="article-preview">
                       <h2>My Blog 4</h2>
                       <p>
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.

<a href="#" class="read-more">
                               Read more
                           </a>
                       </p>
                   </div>
               </article>
               <article>
                   <figure>
                       <img src="https://img.freepik.com/free-photo/beautiful-paradise-island-with-beach-sea_74190-1023.jpg?w=1800&t=st=1687169691~exp=1687170291~hmac=7a65a4e5b2eb374e94e17fd7fb2ab0d1b7b7aaf83078cd62ed5d0a84b66d5beb" alt="Preview">
                   </figure>
                   <div class="article-preview">
                       <h2>My Blog 5</h2>
                       <p>
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.
                           <a href="#" class="read-more">
                               Read more
                           </a>
                       </p>
                   </div>
               </article>
               <article>
                   <figure>
                       <img src="https://img.freepik.com/free-photo/empty-wood-chair-table-outdoor-patio-with-beautiful-tropical-beach-sea_74190-9961.jpg?w=1800&t=st=1687169720~exp=1687170320~hmac=0a77994214a9019510f28af43dab452ada527e96585d6e7f563a09995598851e" alt="Preview">
                   </figure>
                   <div class="article-preview">
                       <h2>My Blog 6</h2>
                       <p>
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.

<a href="#" class="read-more">
                               Read more
                           </a>
                       </p>
                   </div>
               </article>
               <article>
                   <figure>
                       <img src="https://img.freepik.com/free-photo/view-mountains-landscape-huesca_1398-5217.jpg?w=2000&t=st=1687169991~exp=1687170591~hmac=aa445998f8b6570cab3abc9d68853ab80ba944475fcbc05c70c6061f967ab9f7" alt="Preview">
                   </figure>
                   <div class="article-preview">
                       <h2>My Blog 7</h2>
                       <p>
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.

<a href="#" class="read-more">
                               Read more
                           </a>
                       </p>
                   </div>
               </article>
               <article>
                   <figure>
                       <img src="https://img.freepik.com/free-photo/beautiful-shot-snowy-hill-surrounded-by-mountains-with-light-pink-sky_181624-4102.jpg?w=2000&t=st=1687169963~exp=1687170563~hmac=b811dc16315ec7776b847588539208c1d57e43df80f7319aeb9b55ed7322784b" alt="Preview">
                   </figure>
                   <div class="article-preview">
                       <h2>My Blog 8</h2>
                       <p>
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.

<a href="#" class="read-more">
                               Read more
                           </a>
                       </p>
                   </div>
               </article>
               <article>
                   <figure>
                       <img src="https://img.freepik.com/free-photo/beautiful_1203-2633.jpg?w=2000&t=st=1687169925~exp=1687170525~hmac=4e1fdddf8ca048eaa100d431639d165f115cd16cea95feff591fbecdc3b28d4c" alt="Preview">
                   </figure>
                   <div class="article-preview">
                       <h2>My Blog 9</h2>
                       <p>
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.
                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.

CSS

:root {
    --primary: #DD946F ;
    --secondary: #261E5A;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--secondary);
    font-family: Mulish;
    font-size: 16px;
}

.background {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    padding: 2rem;
}
 
.articles {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: center;
    max-width: 75rem;
    gap: 1.5rem;
}
 
.articles article {
    max-width: 20rem;
    cursor: pointer;
    position: relative;
    display: block;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    border-radius: 1rem;
}

.articles article a {
    display: inline-flex;
    color: var(--primary);
    text-decoration: none;
}

.articles article h2 {
    margin: 0 0 1rem 0;
    font-size: 1.6rem;
    color: var(--secondary);
    transition: color 0.3s ease-out;
}
  
  
.articles article img {
    max-width: 100%;
    transform-origin: center;
    transition: transform 0.4s ease-in-out;
}
  
.article-preview {
    padding: 1.5rem;
    background: white;
}

.articles figure {
    width: 100%;
    height: 13rem;
    overflow: hidden;
}

.articles figure img {
    height: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    object-fit: cover;
}

.articles article:hover img {
    transform: scale(1.5); 
}

Responsive blogs card using HTML & CSS | try it

HTML

CSS

JavaScript

Output