Responsive CSS Card Design for Food App Using HTML/ CSS

Watch Video Tutorial

Learn how to make beautiful CSS card design for the food app or food web app, All code is provided below, this tutorial can be followed by any beginner or intermediate just a basic knowledge of HTML and CSS is Required

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./cards.css">
    <link href="https://fonts.googleapis.com/css2?family=Material+Icons"
      rel="stylesheet">
    <title>Cards</title>
</head>
<body>
    
   


    <div class="card">
        <div class="card-image-container">
            <img src="./pic.jpg" alt="" class="card-image">
        </div>

        <div class="card-info-container">
            <h1 class="card-info-heading">Chinese Pan-Fried Dumplings <span class="material-icons dish-type">
                adjust
                </span></h1>
            <br/>
            <p class="card-info-para">
                Delicious crispy pan-fried dumplings are a satisfying favorite. Often they are filled with pork, cabbage, shiitake mushrooms, and garlic chives, dumplings can take on any filling by replacing some ingredients for others, or skipping some altogether.
            </p>
            <br/>

            <div class="card-stats-container">
                <div class="card-stats">
                    <h1 class="stats-heading">
                        Calories
                    </h1>
                    <p class="stats-para">
                        289
                    </p>
                </div>
                <div class="card-stats">
                    <h1 class="stats-heading">
                        Fats
                    </h1>
                    <p class="stats-para">
                        21g
                    </p>
                </div>
                <div class="card-stats">
                    <h1 class="stats-heading">
                        Carbs
                    </h1>
                    <p class="stats-para">
                        2g
                    </p>
                </div>

                <div class="card-stats">
                    <h1 class="stats-heading">
                        Protien
                    </h1>
                    <p class="stats-para">
                        28g
                    </p>
                </div>

                
            </div>
            <br/>
            <button class="btn"><span class="material-icons">
                add_shopping_cart
                </span></button>
        </div>

    </div>

</body>
</html>

CSS Code

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


body{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.card{
    width: 350px;
    margin: 5%;
    /*background: linear-gradient(45deg, #FF9800, #FFEB3B);
    */border-radius: 2em;
    border-top-right-radius: 10em;
    box-shadow: 0px 0px 15px #c5c5c5;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -ms-border-radius: 2em;
    -o-border-radius: 2em;
}

.card-image{
    width: 100%;
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
}

.card-info-container{
    padding: 2em 1em 2em;
}

.card-info-heading{
    font-size: 1.5em;
    color: #181818;
}

.card-info-para{
    color: #666666;
    font-size: 0.9em;
    text-align: justify;
    font-weight: lighter;
}

.btn{
    background-color: #FFEB3B;
    outline: none;
    border: none;
    width: 100%;
    color: #6e6301;
    height: 60px;
    border-radius: 3em;
    -webkit-border-radius: 3em;
    -moz-border-radius: 3em;
    -ms-border-radius: 3em;
    -o-border-radius: 3em;
    padding: 1em 2em;
    font-size: .7em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    cursor: pointer;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.btn:hover{
    background-color: black;
    color: white;
}

.dish-type{
    color: green;
    position: relative;
    top: 5px;
}

.card-stats-container{
    display: flex;
    justify-content: space-between;
}

.stats-heading{
    font-size: 1em;
    color: #8e8e8e;
    margin-bottom: .7em;
}

.stats-para{
    font-size: 1.5em;
    font-weight: bold;
}
reecry

Recent Posts

Insta360 – Videos keep exporting backwards | Wrong side render in insta360

https://youtu.be/0RRUOIvmuWA I realized that I had my camera set up incorrectly, so when I upload…

8 months ago

Make Animated progress step bar using Figma

https://youtu.be/C3oFfV20K_c Make Animated progress step bar using Figma

10 months ago

How to Hide All Grids in Figma

https://youtu.be/o3pSH_oRzko How to Hide All Grids in Figma

10 months ago

How to Create Responsive Tool tip in figma

https://youtu.be/hdSUylKSsho How to Create Responsive Tool tip in Figma

10 months ago

Pixel Grid not visible in figma | How to Turn on figma Pixel Grid

https://youtu.be/AEiH7dSDhKo Having issue in figma pixel grid? learn how to show/ hide figma pixel grid…

10 months ago

Fix External Monitor Lag on Mac OS Ventura

https://youtu.be/iilYzHg9LwQ There are some issues going on in ventura OS its still in development phase…

1 year ago