🚀 Hurry! Offer Ends In
00 Days
00 Hours
00 Mins
00 Secs
Enroll Now
X
Questions
Write a code to create following using html:
Write a code to generate following using html:
O Level Practical Viva Questions and Answers
Write a HTML program to implement Formatting tags.
Create a Web Page in which the text " WEB DESIGNING AND PUBLISHING " should scroll in different directions for four times .
Write a Java Script program to print Factorial of a given number.
Create a web page to display the following output:
Create a web page to display 3 images which are aligned left, right and center respectively.
Write a program using java script to accept a Name from user and display it.
Write down the names of any four states of India using all types of list i.e. ordered list, unordered list and definition list. The page should have background colour. The text colour of each type of the list should be different.
Write a program to create html table having border and alternate columns background colors using CSS. Final Output should be like this.
Write html code to generate following output. • Coffee • Tea • Black Tea • Green Tea • Milk
Create a Restaurant Menu Card using HTML and CSS.
Write HTML Code to demonstrate the use of Anchor Tag for the Following:- 1. Creating a web link that opens in a new window. 2. Creating a web link that opens in the same window. 3. C Reference within the same html document. 4. Reference to some image. 5. Making an image a hyperlink to display second image
What do you mean by <Select> tag? Design a web page with 4 Select tag with 4 option each?
Design Simple Registration form with First Name, Last Name, Password, EMail Id, Phone No, Address, Gender, DOB in the personal details section and Degree, Engineering Branch, Signature, Photo and Resume upload in Educational Details section.
Design a Simple table with First name, Last Name, marks, Roll No. & Course using W3.CSS.
a) Write HTML program with title Student Information: b) Write Name of college in large font. c) Write address in small font. d) Write course name with different background color of each course. e) Insert image in background
Write JS to find prime numbers, even numbers, and odd numbers between 1 to 100.
PRACTICAL-PR1 PRACTICAL-PR2 PRACTICAL-PR3 PRACTICAL-PR4

Create a Restaurant Menu Card using HTML and CSS.

Last Updated : 27 Apr 2026 Jan 24

Solution: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style >
        div{max-width: 550px; margin: 20px auto;}
        h1{text-align: center;}
        h2{color: gray; border-bottom: 1px solid gray;}
        ul{list-style-type: none; }
        li{padding: 5px 0;}
        .rate{float: right; color: red;}

    </style>
</head>
<body>
    <div>
    <h1>Restaurent Menu Card</h1>
    <h2>Tea</h2>
    <ul>
        <li>Normal Tea <span class="rate">Rs 30</span></li>
        <li>Masala Tea <span class="rate">Rs 50</span></li>
        <li>Special Tea <span class="rate">Rs 70</span></li>
    </ul>

        <h2>Pizza</h2>
    <ul>
        <li>Mix veg Pizza <span class="rate">Rs 199</span></li>
        <li>Kulhad Pizza <span class="rate">Rs 99</span></li>
        <li>Onion Pizza <span class="rate">Rs 149</span></li>
        <li>Cheese Pizza <span class="rate">Rs 159</span></li>
    </ul>

        <h2>Burger</h2>
    <ul>
        <li>Veg Burger <span class="rate">Rs 69</span></li>
        <li>Paneer Burger <span class="rate">Rs 89</span></li>
        <li>Fruit  Burger <span class="rate">Rs 75</span></li>
        <li>Cheese Burger <span class="rate">Rs 69</span></li>
    </ul>
</div>
</body>
</html>

OUTPUT:

Code Explanation:

  • Container (div):

    • max-width: 550px;: Limits the container's width to 550 pixels.
    • margin: 20px auto;: Centers the container horizontally and adds 20 pixels of margin on top and bottom.

  • Heading 1 (h1):

    • text-align: center;: Centers the main heading text.

  • Heading 2 (h2):

    • color: gray;: Sets the text color to gray.
    • border-bottom: 1px solid gray;: Adds a gray underline below the heading.

  • Unordered List (ul):

    • list-style-type: none;: Removes bullet points from the list.

  • List Items (li):

    • padding: 5px 0;: Adds 5 pixels of vertical padding to each list item.

  • Price (.rate class):

    • float: right;: Aligns the price text to the right within the list item.
    • color: red;: Colors the price text red.

 

Report an error

Meanwhile you can watch this video

Watch Video
Latest Updates