How to Design a Responsive Beautiful Menu Card Using HTML and CSS.

Hello developers, In this article, we will take a look at how to create a menu card design using HTML and CSS. We will examine a code snippet that creates a menu card design. It shows the various coffee and other drinks that a cafe offers. The document type is defined in the head section along with the viewport meta tag. The title, CSS file, and viewport meta tag are defined in the head section. The head section defines the title of the website, the CSS file that styles the website, and the viewport meta tag which adjusts the view of the website on different devices. The body section of the web page follows afterwards. A div element with a class of 'menu-card-container' is created in the body section. The menu card information includes the shop name, logo, coffee and other beverage types, and a message of gratitude.On the menu card, the level-one heading shop identifies the coffee shop. The logo is displayed on the left side of the menu card. The various coffee and other beverages are listed below the shop name and logo. Each item's price is listed next to its name. The text in the unordered lists is styled using CSS, and the font size and colour are defined. The website link appears below the level-three heading message of gratitude. It opens in a new tab when clicked.The menu card's styling is defined in the CSS code. The linear gradient defines the background colour of the body. The menu card container div is styled using a linear gradient for the background colour, and the border-radius is set to 40 pixels. The headings in the menu card are styled using a linear gradient for the background colour and the -webkit-background-clip property with the text value. This property allows the background to be clipped to the shape of the text. The linear gradient is used to define the headings. The width and height properties are used to style the images, and the border-radius is set to 50%.The well-structured and easy-to-read code presented here makes an excellent teaching example for beginner web developers. This code can be used to create menu cards for different kinds of shops, such as restaurants and bars, with some modifications.

Creating a Responsive Beautiful Menu Card Using HTML and CSS [Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>MENU CARD DESIGN</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet"> </head> <body> <div class="menu-card-container"> <h1><b> COFFEE CARD</b> <br> <small><i>~ always fresh..always hot ~</i></small></h1> <img src="https://cdn.pixabay.com/photo/2015/10/23/15/51/coffee-1003185__480.jpg"> <h2><i><b>COFFEE</b></i></h2> <ul style="list-style-type:disc;"> <li>Espresso ----------------- $5</li> <li>Americano -------------- $3</li> <li>Cappuccino ------------- $6</li> <li>Mocha ------------------- $6</li> <li>Cafe Latte --------------- $6</li> <li>Caramel Macchiato ---- $7</li> <li>Piccolo ------------------ $7</li> </ul> <h2><i><b>OTHERS</b></i></h2> <ul style="list-style-type:disc;"> <li>Black tea --------------- $4</li> <li>Lemon tea ------------- $4</li> <li>Strawberry tea -------- $5</li> <li>Lychee tea ------------- $5</li> <li>Mineral water --------- $3</li> </ul> <hr><br> <img src="https://cdn.pixabay.com/photo/2015/10/23/15/51/coffee-1003185__480.jpg" width="100px" height="100px"> <a href="https://www.healthline.com/nutrition/top-evidence-based-health-benefits-of-coffee">Visit Our Website</a> <h3><b>Thank you for you visit <br><small>You just made our business grow..and for that we are GRATEFULL!</small></b></h3> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by<a href="https://www.learningrobo.com/"> Learning Robo</a></div> </div> </body> </html>

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


body{
    background: #4e54c8;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #8f94fb, #4e54c8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}    
.menu-card-container{
    margin: 20px 15%;
    width:60%;
    background: #000000; 
    background: -webkit-linear-gradient(to right, #434343, #000000);
    background: linear-gradient(to right, #434343, #000000); 
    padding:5%;
    border-radius: 40px;
}


h1{
    background-image: linear-gradient(to right, #ee00ff 0%, #fbff00 100%);
    color: transparent;
    -webkit-background-clip: text;
    text-align: center;
    font-size:60px;
}
img{
    width:100px;
    height:100px;
    border-radius:50%;
}
h2{
    background-image: linear-gradient(to right, #ee00ff 0%, #fbff00 100%);
    color: transparent;
    -webkit-background-clip: text;
    text-align:center;
    font-size:40px;
    font-family:'Times New Roman', Times, serif;
}
ul{
    font-size: 30px;
    color:#8f94fb
}
a:link{
    color:#fff;
    font-size:20px;
    text-decoration: none;
}
a:hover{
    color:#4e54c8;
}
a:active{
    color:rgb(0, 0, 0);
}
h3{
    font-size:30px; 
    text-align:center;
    color:#fff;
    font-family: 'Caveat', cursive;
}
.credit a {
    text-decoration: none;
    color: #fff;
    font-weight: 800;
  }
  
  .credit {
      color: #fff;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
  }

  @media only screen and (max-width: 860px) {
    h1
      {
         font-size: 38px;
     }
     .menu-card-container{
        margin: 20px 5%;
        width:80%;
     }
   }
   @media only screen and (max-width: 600px) {
    h1
      {
         font-size: 28px;
     }
     .menu-card-container{
        margin: 20px 1%;
        width:88%;
     }
     ul{
        font-size: 20px;
        color:#8f94fb
    }
    h2{
        font-size:18px ;
    }
    h3{
        font-size: 18px;
   }}

We hope you would like this Responsive Beautiful Menu Card Using HTML and CSS.

Thank you for reading our blog. If you face any problem in creating this Responsive Beautiful Menu Card Using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

code developed by our student SUBHASRI K

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..

Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.

How to Design a Responsive Beautiful Menu Card Using HTML and CSS.

Explore

Post a Comment

Learning robo

UI & UX Front-end Developement

Skills

Learning robo

tools grid

simple URL Shortener Using HTML CSS & JAVASCRIPT

Responsive Review Section using HTML & CSS