Responsive CSS Card Layout Using Flexbox , CSS & HTML

Responsive CSS Card Layout Using Flexbox , CSS & HTML

In this video, you are going to learn how to design a responsive CSS card layout with different sizes using flexbox. By studying this tutorial you can get basic ideas about how to make a responsive layout using flexbox for a website. There are cards in 3 different sizes.

In this video, you are going to learn how to design a responsive CSS card layout with different sizes using flexbox. By studying this tutorial you can get basic ideas about how to make a responsive layout using flexbox for a website. There are cards in 3 different sizes. So you can learn how to manage those cards using responsive styles. Let's see how to design this responsive CSS card layout.

Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA

Source code

index.html


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive CSS Card Layout using Flexbox</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <!--card layout start-->
    <div class="container">
      <div class="row">
        <div class="card-01"></div>
        <div class="card-01"></div>
        <div class="card-01"></div>
      </div>
      <div class="row">
        <div class="card-02"></div>
        <div class="card-02"></div>
      </div>
      <div class="row">
        <div class="card-03"></div>
      </div>
    </div>
    <!--card layout end-->

  </body>
</html>

style.css


body{
  margin: 0;
  padding: 0;
  height: 100vh;
}

.container{
  margin: 20px;
}

.row{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.card-01{
  background: #03D29F;
  position: relative;
  flex: 1;
  max-width: 300px;
  height: 150px;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.card-02{
  background: #50A7FF;
  position: relative;
  flex: 1;
  max-width: 460px;
  height: 200px;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.card-03{
  background: #FF7675;
  position: relative;
  flex: 1;
  max-width: 940px;
  height: 300px;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

@media (max-width:800px){
  .card-01{
    flex: 100%;
    max-width: 600px;
  }

  .card-02{
    flex: 100%;
    max-width: 600px;
  }

  .card-03{
    flex: 100%;
    max-width: 600px;
  }
}

html css flexbox

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

Sidebar Menu Using Only HTML and CSS | Side Navigation BarHello friends, Today in this video you'll learn how to create a Sidebar Menu using HTML and CSS onl...

Responsive Footer Design using HTML, CSS & Bootstrap

Today, I am going to show you how to create a footer design using HTML, CSS and bootstrap. This is a Complete Responsive Footer Design.

CSS Flexbox: What I learned from Flexbox Zombies

I started playing an educational game called Flexbox Zombies, which has been teaching me the fundamentals of flexbox in a fun way.

HTML Tutorial For Beginners

In this article, we’ll tutorial the best ways for learning HTML to assist you on your programming journey.

Create Flexbox Image Slider With HTML, CSS & Javascript | CSS Image Slider

This tutorial will learn how to create a flexbox image slider using HTML CSS and javascript. Also, you will learn how to use keyframes in CSS so if you are n...