Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>YouDreamNew to Visual Studio Code? Get it now.
YouDream

YouDream

dream101

| (0) | Free
Open the complete contents of a selected text file in a clean Dream tab.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

YouDream

WBT Content

<!-- 1. Create two tables using rowspan and colspan. -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tables</title>
</head>
<body>

    <h2>Tables Using Rowspan and Colspan</h2>

    <h3>Table 1</h3>
    <hr>

    <!-- First table -->
    <table border="1" width="50%">
        <tr align="center">
            <!-- Cell A occupies 2 rows and 2 columns -->
            <td colspan="2" rowspan="2" bgcolor="red">A</td>
            <td>B</td>
            <td>C</td>
        </tr>

        <tr align="center">
            <td>D</td>
            <td>E</td>
        </tr>

        <tr align="center">
            <td>F</td>
            <td>G</td>
            <!-- Cell H occupies 2 rows and 2 columns -->
            <td colspan="2" rowspan="2" bgcolor="green">H</td>
        </tr>

        <tr align="center">
            <td>I</td>
            <td>J</td>
        </tr>
    </table>

    <h3>Table 2</h3>
    <hr>

    <!-- Second table -->
    <table border="1" width="50%">
        <tr align="center">
            <!-- Cell A occupies 3 rows -->
            <td rowspan="3" bgcolor="yellow">A</td>
            <td>B</td>
            <td>C</td>
        </tr>

        <tr align="center">
            <!-- Cell D occupies 2 columns -->
            <td colspan="2" bgcolor="blue">D</td>
        </tr>

        <tr align="center">
            <td>E</td>
            <!-- Cell F occupies 2 rows -->
            <td rowspan="2" bgcolor="green">F</td>
        </tr>

        <tr align="center">
            <td>G</td>
            <td>H</td>
        </tr>
    </table>

</body>
</html>


<!-- 2. Create a bookmark link that moves to the top header. -->

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Sets the character encoding -->
    <meta charset="UTF-8">

    <!-- Makes the webpage responsive on different screen sizes -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Title shown in the browser tab -->
    <title>Jalebi Syllabus</title>
</head>

<!-- id="top" is used by the Back to Top links -->
<body id="top">

    <!-- Website heading with Jalebi image -->
    <center>
        <img src="../Assets/jalebi.png" alt="jalebi" height="100px" width="100px">
        <font color="blue" size="25px">Jalebi</font>
    </center>

    <!-- Horizontal line -->
    <hr color="red" size="5">

    <!-- Navigation links for all chapters -->
    <nav>
        <center>
            <a href="#ch1">Chapter 1</a> |
            <a href="#ch2">Chapter 2</a> |
            <a href="#ch3">Chapter 3</a> |
            <a href="#ch4">Chapter 4</a> |
            <a href="#ch5">Chapter 5</a> |
            <a href="#ch6">Chapter 6</a> |
            <a href="#ch7">Chapter 7</a> |
            <a href="#ch8">Chapter 8</a> |
            <a href="#ch9">Chapter 9</a> |
            <a href="#ch10">Chapter 10</a>
        </center>
    </nav>

    <hr color="red" size="5">

    <!-- Chapter 1 section -->
    <section id="ch1">
        <h1>Chapter 1 - Introduction to Jalebi</h1>

        <p>
            Jalebi is a popular traditional Indian sweet known for its bright
            orange colour, spiral shape, crispy texture and sweet syrup.
            It is commonly enjoyed as a dessert and is especially popular
            during festivals, celebrations and special occasions.
            Jalebi is made by preparing a fermented or non-fermented batter,
            shaping it into circular spirals and deep-frying it in hot oil
            or ghee. The fried spirals are then soaked in sugar syrup.
            The combination of a crispy outside and juicy, sweet centre makes
            jalebi one of the most recognizable and beloved Indian sweets.
        </p>

        <hr color="red">

        <!-- Bookmark link to move back to the top -->
        <center>
            <a href="#top">⬆ Back to Top</a>
        </center>
    </section>

    <!-- Chapter 2 section -->
    <section id="ch2">
        <hr color="red" size="5">

        <h1>Chapter 2 - History of Jalebi</h1>

        <p>
            Jalebi has a long history and is believed to have developed from
            sweets made in the Middle East and Central Asia. Historical
            references connect jalebi with an older sweet known as zalabiya
            or similar names.
            Over time, the sweet travelled across different regions and
            became adapted to local ingredients, cooking methods and tastes.
            In India, jalebi became deeply associated with traditional
            sweet-making and festive food culture.
            Today, jalebi is prepared throughout India and has also become
            popular in several other South Asian countries. Different regions
            have developed their own variations of the sweet.
        </p>

        <hr color="red">

        <center>
            <a href="#top">⬆ Back to Top</a>
        </center>
    </section>

    <!-- Chapter 3 section -->
    <section id="ch3">
        <hr color="red" size="5">

        <h1>Chapter 3 - Ingredients of Jalebi</h1>

        <p>
            Traditional jalebi is made using ingredients such as refined
            wheat flour, water and sugar. Depending on the recipe, ingredients
            such as yogurt, gram flour or other raising and fermenting agents
            may also be used.
            The batter needs the right consistency so that it can be squeezed
            into thin circular shapes. A small amount of food colouring or
            saffron may be used to give jalebi its familiar golden-orange
            appearance.
            The sugar syrup is another important part of jalebi. It is usually
            prepared by boiling sugar and water together and may be flavoured
            with cardamom, saffron or rose water.
        </p>

        <hr color="red">

        <center>
            <a href="#top">⬆ Back to Top</a>
        </center>
    </section>

    <!-- Chapter 4 section -->
    <section id="ch4">
        <hr color="red" size="5">

        <h1>Chapter 4 - Preparation of Jalebi Batter</h1>

        <p>
            The first step in making jalebi is preparing the batter. Flour is
            mixed with water until a smooth mixture is formed. Traditional
            recipes may include yogurt and allow the batter to ferment for
            several hours.
            Fermentation can give jalebi a slightly tangy flavour and helps
            develop its characteristic texture. Modern recipes sometimes use
            instant methods that do not require a long fermentation period.
            The finished batter should be smooth and flowing enough to pass
            through a piping bag, squeeze bottle or traditional cloth used
            for shaping the jalebi.
        </p>

        <hr color="red">

        <center>
            <a href="#top">⬆ Back to Top</a>
        </center>
    </section>

    <!-- Chapter 5 section -->
    <section id="ch5">
        <hr color="red" size="5">

        <h1>Chapter 5 - Shaping Jalebi</h1>

        <p>
            Jalebi gets its distinctive appearance from the way the batter is
            poured into hot oil or ghee. The batter is squeezed in a continuous
            circular motion to create spirals and loops.
            Skilled sweet makers can create many jalebi spirals quickly while
            maintaining a consistent size and shape. The shape is important
            because it affects how evenly the jalebi cooks.
            The spirals are generally made relatively thin so that they become
            crisp on the outside while still absorbing the sugar syrup after
            frying.
        </p>

        <hr color="red">

        <center>
            <a href="#top">⬆ Back to Top</a>
        </center>
    </section>

    <!-- Chapter 6 section -->
    <section id="ch6">
        <hr color="red" size="5">

        <h1>Chapter 6 - Frying Jalebi</h1>

        <p>
            After the batter is prepared and shaped, the jalebi is deep-fried
            in hot oil or ghee. The cooking temperature must be controlled
            carefully so that the jalebi becomes crisp without burning.
            As the batter enters the hot oil, it quickly forms a firm outer
            layer. The jalebi is fried until it develops a golden or orange
            colour and a crisp texture.
            Once fried, the jalebi is removed from the oil and immediately
            placed into warm sugar syrup. This allows the syrup to enter the
            crispy spirals and gives jalebi its characteristic sweetness.
        </p>

        <hr color="red">

        <center>
            <a href="#top">⬆ Back to Top</a>
        </center>
    </section>

    <!-- Chapter 7 section -->
    <section id="ch7">
        <hr color="red" size="5">

        <h1>Chapter 7 - Sugar Syrup</h1>

        <p>
            Sugar syrup, also known as chashni, is an essential part of jalebi.
            Sugar and water are boiled together until the syrup reaches the
            desired consistency.
            The syrup may be flavoured with ingredients such as cardamom,
            saffron, rose water or lemon juice. The flavouring depends on the
            recipe and regional style.
            The fried jalebi is dipped into the warm syrup for a short period.
            It absorbs the syrup while retaining some of its crispness, creating
            the sweet and juicy texture associated with jalebi.
        </p>

        <hr color="red">

        <center>
            <a href="#top">⬆ Back to Top</a>
        </center>
    </section>

    <!-- Chapter 8 section -->
    <section id="ch8">
        <hr color="red" size="5">

        <h1>Chapter 8 - Regional Varieties of Jalebi</h1>

        <p>
            Jalebi is prepared in different forms across the Indian
            subcontinent. The ingredients, thickness, fermentation method and
            texture can vary from one region to another.
            Imarti, although different from ordinary jalebi, is another
            traditional Indian sweet made by deep-frying a batter into a
            decorative shape and soaking it in sugar syrup. It is usually
            made from urad dal rather than refined wheat flour.
            Some regions also prepare thicker and softer versions of jalebi.
            These variations demonstrate how traditional sweets can change
            according to local food traditions and preferences.
        </p>

        <hr color="red">

        <center>
            <a href="#top">⬆ Back to Top</a>
        </center>
    </section>

    <!-- Chapter 9 section -->
    <section id="ch9">
        <hr color="red" size="5">

        <h1>Chapter 9 - Jalebi in Indian Culture</h1>

        <p>
            Jalebi is closely associated with Indian celebrations and
            everyday food culture. It is commonly sold at sweet shops,
            markets, fairs and street-food stalls.
            During festivals and family celebrations, jalebi is often served
            as a dessert. In some parts of India, it is also enjoyed with
            breakfast foods or paired with other traditional dishes.
            Jalebi is sometimes served with milk, rabri or other dairy-based
            accompaniments. The combination of hot jalebi and cool rabri is
            particularly popular in many places.
        </p>

        <hr color="red">

        <center>
            <a href="#top">⬆ Back to Top</a>
        </center>
    </section>

    <!-- Chapter 10 section -->
    <section id="ch10">
        <hr color="red" size="5">

        <h1>Chapter 10 - Nutritional Information and Conclusion</h1>

        <p>
            Jalebi is primarily a sweet food and contains a significant
            amount of carbohydrates and sugar. Since it is deep-fried, it
            also contains fat. The exact nutritional value depends on the
            recipe, size and amount of syrup absorbed.
            Jalebi is best enjoyed as an occasional treat as part of a
            balanced diet. Its appeal comes from its distinctive combination
            of crispness, sweetness, aroma and attractive spiral shape.
            From its historical origins to its many regional varieties,
            jalebi has become an important part of South Asian food culture.
            Its simple ingredients and unique preparation have helped make
            it one of the most recognizable traditional sweets.
        </p>

        <hr color="red">

        <center>
            <a href="#top">⬆ Back to Top</a>
        </center>
    </section>

</body>
</html>

<!-- 3. Create image links for six images. -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Phones</title>
</head>

<body>

    <h2>Checkout any Phone you want to get Information About</h2>

    <a href="iphone18.html">
    <img src="../Assets/iphone18.jpg" alt="iphone18" width="15%">
    </a>

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <a href="s26.html">
        <img src="../Assets/s26ultra.jpg" alt="Samsung Galaxy S26 Ultra" width="15%">
    </a>

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <a href="oneplus15.html">
        <img src="../Assets/oneplus15.jpg" alt="Oneplus 15" width="15%">
    </a>

    <br>

    1. Iphone 18
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    2. Samsung Galaxy S26
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    3. Oneplus 15

    <br><br><br>

    <a href="xiaomi.html">
        <img src="../Assets/xiaomi.jpg" alt="Xiaomi 17 Ultra" width="15%">
    </a>

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <a href="oppo.html">
        <img src="../Assets/oppo.jpg" alt="Oppo Find X9 Ultra" width="15%">
    </a>

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <a href="vivo.html">
        <img src="../Assets/vivo.jpg" alt="Vivo X300 Ultra" width="15%">
    </a>

    <br>

    4. Xiaomi 17 Ultra
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    5. Oppo Find X9 Ultra
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    6. Vivo X300 Ultra

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iPhone 18</title>
</head>
<body>
    <h1>iPhone 18</h1>

    <img src="/Assets/iphone18.jpg" alt="iPhone 18" width="25%">

    <h2>About the Phone</h2>
    <p>
        The iPhone 18 is included here as a phone in the assignment list. 
        It includes a large display, high-end performance, photography, 
        and iOS features with the new variable aparture camera system.
    </p>

    <a href="./assignphone.html">Back to Mobile Phones</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OnePlus 15</title>
</head>
<body>
    <h1>OnePlus 15</h1>

    <img src="/Assets/oneplus15.jpg" alt="OnePlus 15" width="25%">

    <h2>About the Phone</h2>
    <p>
        The OnePlus 15 is a performance-focused flagship smartphone running
        OxygenOS 16 based on Android 16. It combines a high-refresh-rate
        display, a large battery, fast charging and a triple-camera setup.
    </p>
<br>
    <a href="./assignphone.html">Back to Mobile Phones</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OPPO Find X9 Ultra</title>
</head>
<body>
    <h1>OPPO Find X9 Ultra</h1>

    <img src="/Assets/oppo.jpg" alt="OPPO Find X9 Ultra" width="25%">

    <h2>About the Phone</h2>
    <p>
        The OPPO Find X9 Ultra is a premium smartphone built around photography,
        display quality and high-end performance. It uses a multi-camera system
        with dedicated telephoto hardware and Hasselblad-related camera features.
    </p>
<br>
    <a href="./assignphone.html">Back to Mobile Phones</a>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Samsung Galaxy S26 Ultra</title>
</head>
<body>
    <h1>Samsung Galaxy S26 Ultra</h1>

    <img src="/Assets/s26ultra.jpg" alt="Samsung Galaxy S26 Ultra" width="25%">

    <h2>About the Phone</h2>
    <p>
        The Galaxy S26 Ultra is Samsung's flagship Ultra smartphone for 2026.
        It focuses on a large display, high-end performance, photography,
        Galaxy AI features and S Pen support.
    </p>
<br>
    <a href="./assignphone.html">Back to Mobile Phones</a>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vivo X300 Ultra</title>
</head>
<body>
    <h1>vivo X300 Ultra</h1>

    <img src="/Assets/vivo.jpg" alt="vivo X300 Ultra" width="25%">

    <h2>About the Phone</h2>
    <p>
        The vivo X300 Ultra is a premium camera-focused smartphone. It combines
        a large high-resolution display, a Snapdragon flagship processor,
        ZEISS camera technology and a large battery.
    </p>
<br>
    <a href="./assignphone.html">Back to Mobile Phones</a>
</body>
</html>


<!-- 4. Design a website according to the given diagram. -->

<!DOCTYPE html>
<html>
<head>
    <title>Snack World</title>
    <link rel="stylesheet" href="assignment.css">
    <link rel="icon" href="../Assets/icon.png">
</head>
<body>

    <!-- Website header -->
    <header>
        <div class="logo">🍿</div>
        <h1>SNACK WORLD</h1>
    </header>

    <div class="top-section">
        <!-- Snacks list with marquee animation -->
        <div class="left-list">
            <h2>Snacks</h2>
            <!-- Moves snack items from bottom to top -->
            <marquee direction="up" height="400" scrollamount="4">
                <div class="snack">
                    <img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?w=300" alt="Samosa">
                    <p>Samosa</p>
                </div>

                <div class="snack">
                    <img src="https://images.unsplash.com/photo-1626082927389-6cd097cdc6ec?w=300" alt="Pakora">
                    <p>Pakora</p>
                </div>

                <div class="snack">
                    <img src="https://images.unsplash.com/photo-1630383249896-424e482df921?w=300" alt="French Fries">
                    <p>French Fries</p>
                </div>

                <div class="snack">
                    <img src="https://images.unsplash.com/photo-1601050690117-94f5f6fa8bd7?w=300" alt="Kachori">
                    <p>Kachori</p>
                </div>

                <div class="snack">
                    <img src="https://images.unsplash.com/photo-1528735602780-2552fd46c7af?w=300" alt="Sandwich">
                    <p>Sandwich</p>
                </div>

                <div class="snack">
                    <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=300" alt="Pizza">
                    <p>Pizza</p>
                </div>
            </marquee>
        </div>

        <!-- Snacks image gallery -->
        <div class="right-gallery">
            <h2>Our Snacks Gallery</h2>
            <div class="gallery">
                <img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?w=500" alt="Samosa">
                <img src="https://images.unsplash.com/photo-1626082927389-6cd097cdc6ec?w=500" alt="Pakora">
                <img src="https://images.unsplash.com/photo-1630383249896-424e482df921?w=500" alt="French Fries">
                <img src="https://images.unsplash.com/photo-1601050690117-94f5f6fa8bd7?w=500" alt="Kachori">
                <img src="https://images.unsplash.com/photo-1528735602780-2552fd46c7af?w=500" alt="Sandwich">
                <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=500" alt="Pizza">
            </div>
        </div>
    </div>

    <div class="bottom-section">

        <!-- Snack order form -->
        <div class="form-section">
            <h2>Snack Order Form</h2>

            <form>
                <label>Name:</label>
                <input type="text" placeholder="Enter your name">

                <label>Email:</label>
                <input type="email" placeholder="Enter your email">

                <label>Select Snack:</label>
                <select>
                    <option>-- Select Snack --</option>
                    <option>Samosa</option>
                    <option>Pakora</option>
                    <option>French Fries</option>
                    <option>Kachori</option>
                    <option>Sandwich</option>
                    <option>Pizza</option>
                </select>

                <label>Quantity:</label>
                <input type="number">

                <label>Message:</label>
                <textarea></textarea>

                <button>Order Now</button>
            </form>
        </div>

        <!-- Google Maps location -->
        <div class="location">
            <h2>Our Location</h2>

            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3769.5671743907246!2d72.83010759999999!3d19.1266348!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b716a5539e23%3A0x60a0ccff32d6f970!2zSm9leeKAmXMgUGl6emE!5e0!3m2!1sen!2sin!4v1790528267963!5m2!1sen!2sin"
                width="600"
                height="450"
                style="border:0;"
                allowfullscreen=""
                loading="lazy">
            </iframe>
        </div>
    </div>
</body>
</html>


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

body {
    font-family: Arial, sans-serif;
    background: #f4f4f4;
}

/* Header */
header {
    height: 90px;
    background: #222;
    color: white;
    display: flex;
    align-items: center;
    padding: 10px 30px;
    border-bottom: 5px solid orange;
}

.logo {
    width: 60px;
    height: 60px;
    background: orange;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-right: 20px;
}

.top-section {
    width: 95%;
    margin: 20px auto;
    background: white;
    display: grid;
    grid-template-columns: 20% 80%;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.left-list {
    padding: 15px;
    border-right: 2px solid #ccc;
}

.left-list h2,.right-gallery h2,.form-section h2,.location h2 {
    text-align: center;
    margin-bottom: 15px;
}

.scroll {
    height: 350px;
    overflow-y: auto;
}

.snack {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.snack img {
    width: 60px;
    height: 55px;
    object-fit: cover;
}

.snack p {
    font-weight: bold;
    font-size: 14px;
}

.right-gallery {
    padding: 15px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.gallery img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 7px;
}

.bottom-section {
    width: 95%;
    margin: 20px auto;
    background: white;
    display: grid;
    grid-template-columns: 50% 50%;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.form-section,
.location {
    padding: 25px;
}

.form-section {
    border-right: 2px solid #ccc;
}

form {
    width: 90%;
    margin: auto;
}

label {
    display: block;
    margin: 10px 0 5px;
    font-weight: bold;
}

input,select,textarea {
    width: 100%;
    padding: 9px;
    border: 1px solid #aaa;
    border-radius: 5px;
}

button {
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    background: orange;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
}

button:hover {
    background: darkorange;
}


.location iframe {
    width: 100%;
    height: 400px;
    border: 0;
}


@media (max-width: 800px) {
    .top-section,
    .bottom-section {
        grid-template-columns: 1fr;
    }
    .left-list,
    .form-section {
        border: none;
        border-bottom: 2px solid #ccc;
    }
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

<!-- 5. Design a website header with a logo and title. -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <header>
        <center>
            <!-- Website logo/image -->
            <img src=".../Assets/vadapav.jpg"
                 alt="vadapav"
                 width="200px"
                 height="200px">
            <br>
            <!-- Website title with orange color and larger font size -->
            <font size="5px" color="orange">
                Vadapavvvvv.... Khaate Jaaaoooooo
            </font>
        </center>
    </header>
    <!-- Horizontal lines used as a decorative tricolor below the header -->
    <hr color="red" size="5px">
    <hr color="yellow" size="5px">
    <hr color="green" size="5px">

    <!-- Navigation section containing links to other websites/pages -->
    <nav>
        <!-- Opens Amazon in a new browser tab -->
        <a href="https://www.amazon.in" target="_blank">Amazon</a> |

        <!-- Opens Flipkart in a new browser tab -->
        <a href="https://www.flipkart.in" target="_blank">Flipkart</a> |

        <!-- Opens the images.html page in a new browser tab -->
        <a href="./images.html" target="_blank">Images</a> |

        <!-- Opens the list.html page in the current tab -->
        <a href="./list.html">list</a>
    </nav>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2> Display images by using relative path</h2>
    
    <h4>1. Nagpuri Poha</h4>
    <img src="../Assets/poha.jpg" alt="Nagpuri Pohaa" width="17%">
    <br>

    <h4>2. Rameshwaram Dosa</h4>
    <img src="../Assets/dosa.png" alt="Rameshwaram Dosa" width="20%">
    <br>

    <h4>3. Rameshwaram idli</h4>
    <img src="../Assets/idli.jpg" alt="Rameshwaram idli" width="20%">
    <br>

    <h4>4. Ashok Vadapav</h4>
    <img src="../Assets/vadapav.jpg" alt="vadapav" width="20%">
    <br>

    <h3>Video File</h3>
    <video controls height="300px" width="300px" autoplay loop src="../Assets/video.mp4">
        <!-- <source src="../Assets/video.mp4"> -->
    </video>

    <h3>Audio File</h3>
    <audio controls>
        <source src="../Assets/audio.mp3">
    </audio>   
    <br>   
    <a href="assignment5.html">Visit My Website</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Types of List</title>
</head>
<body bgcolor="cream">
    <h2>Ordered List</h2>
    <ol>
        <li>Apple</li>
        <li>Banana</li>
        <li>Grapes</li>
        <li>Mango</li>
    </ol>   

    <ol start="101">
        <li>Apple</li>
        <li>Banana</li>
        <li>Grapes</li>
        <li>Mango</li>
    </ol> 

    <ol type="a">
        <li>Apple</li>
        <li>Banana</li>
        <li>Grapes</li>
        <li>Mango</li>
    </ol> 

    <hr>

    <h2>Unordered List</h2>
    <ul type="circle">
        <li>Apple</li>
        <li>Banana</li>
        <li>Grapes</li>
        <li>Mango</li>
    </ul> 

    <ul type="square">
        <li>Apple</li>
        <li>Banana</li>
        <li>Grapes</li>
        <li>Mango</li>
    </ul> 

    <hr>

    <h2>Desciption List</h2>
    <dl>
        <dt>Apple</dt>
        <dt>Banana</dt>
        <dt>Grapes</dt>
        <dt>Mango</dt>
    </dl> 
</body>
</html>

<!-- 6. Use the Bootstrap grid system to make cards responsive on different screen sizes. -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">

    <title>Responsive Cards</title>
</head>
<body>
    <style>
    /* Makes all card images the same size */
    .card-img-top {
        height: 200px;
        object-fit: cover;
    }
    </style>

    <!-- Bootstrap container -->
    <div class="container mt-4">

        <h2 class="text-center mb-4">Responsive Cards</h2>

        <!-- Bootstrap row -->
        <div class="row g-4">

            <!-- 1 card on mobile, 2 on small, 3 on medium, and 4 on large screens -->
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="card h-100">
                    <img src="../Assets/dosa.png" class="card-img-top" alt="Dosa">
                    <div class="card-body">
                        <h5 class="card-title">Dosa</h5>
                        <p class="card-text">A delicious South Indian dish.</p>
                        <button class="btn btn-primary">Order Now</button>
                    </div>
                </div>
            </div>

            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="card h-100">
                    <img src="../Assets/jalebi.png" class="card-img-top" alt="Jalebi">
                    <div class="card-body">
                        <h5 class="card-title">Jalebi</h5>
                        <p class="card-text">A sweet and crispy Indian dessert.</p>
                        <button class="btn btn-primary">Order Now</button>
                    </div>
                </div>
            </div>


            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="card h-100">
                    <img src="../Assets/vadapav.jpg" class="card-img-top" alt="Vadapav">
                    <div class="card-body">
                        <h5 class="card-title">Vadapav</h5>
                        <p class="card-text">A popular Maharshtrian Potato Snack.</p>
                        <button class="btn btn-primary">Order Now</button>
                    </div>
                </div>
            </div>


            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="card h-100">
                    <img src="../Assets/poha.jpg" class="card-img-top" alt="Poha">
                    <div class="card-body">
                        <h5 class="card-title">Poha</h5>
                        <p class="card-text">A light and healthy breakfast.</p>
                        <button class="btn btn-primary">Order Now</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<!-- 7. Change multiple images by clicking different buttons -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select Dish</title>

    <style>
        /* Main box containing the image, name, and buttons */
        .box {
            width: 320px;
            min-height: 400px;
            margin: 40px auto;
            padding: 25px;
            border: 2px solid black;
            border-radius: 12px;
            text-align: center;
        }

        /* Border around the dish image */
        .image-box {
            border: 2px solid red;
            border-radius: 20px;
            padding: 10px;
        }

        /* Makes all dish images the same size */
        img {
            width: 140px;
            height: 120px;
            object-fit: cover;
        }

        /* Styles all buttons */
        button {
            padding: 8px 18px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="box">

        <!-- Displays the selected dish image -->
        <div class="image-box">
            <img id="foodImage" src="../Assets/dosa.png" alt="Dosa">
        </div>

        <!-- Displays the selected dish name -->
        <h2 id="foodName">Dosa</h2>

        <!-- Dish buttons will be created here -->
        <div id="buttonBox"></div>

        <p>Select the dish you want to see...</p>
    </div>

    <script>
        // Stores all dish names and their image paths
        let foods = [
            {
                name: "Dosa",
                image: "../Assets/dosa.png"
            },
            {
                name: "Idli",
                image: "../Assets/idli.jpg"
            },
            {
                name: "Jalebi",
                image: "../Assets/jalebi.png"
            },
            {
                name: "Poha",
                image: "../Assets/poha.jpg"
            }
        ];

        // Gets the area where buttons will be displayed
        let buttonBox = document.getElementById("buttonBox");

        // Creates one button for every dish
        foods.forEach(function(food) {
            let button = document.createElement("button");

            // Sets the button text
            button.innerHTML = food.name;

            // Changes the image and name when the button is clicked
            button.onclick = function() {
                document.getElementById("foodImage").src = food.image;
                document.getElementById("foodImage").alt = food.name;
                document.getElementById("foodName").innerHTML = food.name;
            };

            // Adds the button to the button box
            buttonBox.appendChild(button);
        });
    </script>
</body>
</html>

<!-- 8. Create an image toggle task. -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Image</title>

    <style>
        .box {
            width: 320px;
            min-height: 400px;
            margin: 40px auto;
            padding: 25px;
            border: 2px solid black;
            border-radius: 12px;
            text-align: center;
        }

        .image-box {
            border: 2px solid red;
            border-radius: 20px;
            padding: 10px;
        }

        img {
            width: 140px;
            height: 120px;
            object-fit: cover;
        }

        button {
            padding: 8px 18px;
            margin-top: 15px;
        }
    </style>
</head>
<body>

    <div class="box">
        <!-- Dish image -->
        <div class="image-box">
            <img id="foodImage" src="../Assets/idli.jpg" alt="Idli">
        </div>

        <!-- Dish name -->
        <h2 id="foodName">Idli</h2>

        <!-- Button to change the image -->
        <button onclick="toggleImage()">Another</button>

        <p>Click to change the dish</p>
    </div>

    <script>
        // Stores all dish names and image paths
        let foods = [
            {
                name: "Idli",
                image: "../Assets/idli.jpg"
            },
            {
                name: "Poha",
                image: "../Assets/poha.jpg"
            },
            {
                name: "Dosa",
                image: "../Assets/dosa.png"
            },
            {
                name: "Jalebi",
                image: "../Assets/jalebi.png"
            }
        ];

        // Stores the current dish position
        let count = 0;

        // Changes the image to the next dish
        function toggleImage() {
            count = (count + 1) % foods.length;

            document.getElementById("foodImage").src = foods[count].image;
            document.getElementById("foodImage").alt = foods[count].name;
            document.getElementById("foodName").innerHTML = foods[count].name;
        }
    </script>
</body>
</html>

<!-- 9. Create a view where the temporary address is the same as the permanent address. -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment 9</title>

    <style>
        /* Places both textboxes and the button in one row */
        .address-container {
            display: flex;
            align-items: center;
            gap: 20px;
            margin: 100px auto;
            width: fit-content;
        }

        /* Styles the address textboxes */
        textarea {
            width: 180px;
            height: 100px;
        }
    </style>
</head>
<body>

    <!-- Contains the temporary address, button, and permanent address -->
    <div class="address-container">
        <!-- Temporary address field -->
        <div>
            <label>Temporary Address:</label><br>
            <textarea id="d1"></textarea>
        </div>

        <!-- Copies the temporary address to the permanent address -->
        <button type="button" onclick="sameAddress()">Same as Temp</button>

        <!-- Permanent address field -->
        <div>
            <label>Permanent Address:</label><br>
            <textarea id="d2"></textarea>
        </div>
    </div>

    <script>
        // Copies the value of the temporary address textbox
        // into the permanent address textbox
        function sameAddress() {
            document.getElementById("d2").value = document.getElementById("d1").value;
        }
    </script>
</body>
</html>

<!-- 10. Perform replace() and replaceAll() tasks according to the given design. -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Replace and ReplaceAll</title>

    <style>
        .container {
            width: 70%;
            margin: 50px auto;
        }

        textarea {
            width: 100%;
            height: 50px;
        }

        .row {
            margin-top: 35px;
            text-align: center;
        }

        input {
            width: 200px;
            height: 22px;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- User writes text here -->
        <textarea id="d1"></textarea>

        <!-- Input for the word that should be replaced -->
        <div class="row">
            <label>Old text</label>
            <input type="text" id="oldText">
            <button onclick="replaceText()">Replace</button>
        </div>

        <!-- Input for the new replacement word -->
        <div class="row">
            <label>New text</label>
            <input type="text" id="newText">
            <button onclick="replaceAllText()">ReplaceAll</button>
        </div>
    </div>

    <script>
        // Replaces only the first occurrence of the old text
        function replaceText() {
            let message = document.getElementById("d1").value;
            let oldText = document.getElementById("oldText").value;
            let newText = document.getElementById("newText").value;

            document.getElementById("d1").value = message.replace(oldText, newText);
        }

        // Replaces all occurrences of the old text
        function replaceAllText() {
            let message = document.getElementById("d1").value;
            let oldText = document.getElementById("oldText").value;
            let newText = document.getElementById("newText").value;

            document.getElementById("d1").value = message.replaceAll(oldText, newText);
        }
    </script>
</body>
</html>

<!-- 11. Display the current month by getting its value from a Date class object and method. -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Current Month</title>
</head>
<body>
    <h2 id="d1"></h2>

    <script>
        // Creates a Date object
        let dateObject = new Date();

        // Gets the current month number
        let monthNumber = dateObject.getMonth();

        // Stores month names in an array
        let months = [
            "January", "February", "March", "April",
            "May", "June", "July", "August",
            "September", "October", "November", "December"
        ];

        // Displays the current month name
        document.getElementById("d1").innerHTML = "Current Month: " + months[monthNumber];
    </script>
</body>
</html>

<!-- 12. Create and design a digital clock. -->

<!DOCTYPE html>
<html>
<head>
    <title>Digital Clock</title>

    <style>
        .clock {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            border-radius: 50%;
            margin: 100px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 25px;
            color: black;
        }
    </style>
</head>
<body>

    <!-- Displays the current time -->
    <div class="clock" id="d1"></div>

    <script>
        function showTime() {
            let dateObject = new Date();

            let hours = dateObject.getHours();
            let minutes = dateObject.getMinutes();
            let seconds = dateObject.getSeconds();

            document.getElementById("d1").innerHTML = hours + ":" + minutes + ":" + seconds;
            setTimeout(showTime, 1000);
        }
        showTime();
    </script>
</body>
</html>

<!-- 13. Perform form validation for password, email, contact number, and gender. -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container mt-4">
        <form class="was-validated">
        <form method="get">
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="txt1">Email</label>
                    <input type="email" class="form-control" name="uemail" id="txt1" required>
                    <span class="valid-feedback">valid data inserted</span>
                    <span class="invalid-feedback">invalid data inserted</span>
                </div>

                <div class="form-group col-md-6">
                    <label for="txt2">Password</label>
                    <input type="password" class="form-control" name="upass" id="txt2"
                           minlength="6" maxlength="16" required>
                    <span class="valid-feedback">valid data inserted</span>
                    <span class="invalid-feedback">invalid data inserted</span>
                </div>
            </div>

            <div class="form-group">
                <label for="txt3">Address</label>
                <input type="text" class="form-control" name="uaddress" id="txt3"
                       placeholder="1234 Main St" required>
                <span class="valid-feedback">valid data inserted</span>
                <span class="invalid-feedback">invalid data inserted</span>
            </div>

            <div class="form-group">
                <label for="txt4">Address 2</label>
                <input type="text" class="form-control" name="uaddress2" id="txt4"
                       placeholder="Apartment, studio, or floor" required>
                <span class="valid-feedback">valid data inserted</span>
                <span class="invalid-feedback">invalid data inserted</span>
            </div>

            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="txt5">City</label>
                    <input type="text" class="form-control" name="ucity" id="txt5" required>
                    <span class="valid-feedback">valid data inserted</span>
                    <span class="invalid-feedback">invalid data inserted</span>
                </div>

                <div class="form-group col-md-4">
                    <label for="state">State</label>
                    <select name="ustate" id="state" class="form-control" required>
                        <option selected value="">Choose...</option>
                        <option>Maharashtra</option>
                        <option>Gujarat</option>
                        <option>Delhi</option>
                        <option>Karnataka</option>
                    </select>
                </div>

                <div class="form-group col-md-2">
                    <label for="txt6">Zip</label>
                    <input type="text" class="form-control" name="uzip" id="txt6"
                           maxlength="6" pattern="[0-9]{6}" required>
                </div>
            </div>

            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="check"
                           id="check1" required>
                    <label class="form-check-label" for="check1">Check me out</label>
                </div>
            </div>

            <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
        </form>
    </div>
</body>
</html>

<!-- 14. Design the view as shown in the images and write JavaScript to change each circle’s background to red, yellow, and green one by one after every three seconds. -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Traffic Light</title>

    <style>
        /* Centers the heading and traffic-light box */
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: white;
        }

        /* Traffic-light container */
        .box {
            width: 180px;
            border: 3px solid black;
            padding: 20px;
            background-color: grey;
        }

        /* Common style for all three circles */
        .circle {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            border-radius: 50%;
            margin: 20px auto;
            background-color: white;
        }
    </style>
</head>
<body>
    <!-- Heading outside the traffic-light box -->
    <h2 id="d1">Traffic Light</h2>

    <!-- Traffic-light container -->
    <div class="box">
        <div class="circle" id="red"></div>
        <div class="circle" id="yellow"></div>
        <div class="circle" id="green"></div>
    </div>

    <script>
        // Turns on the red light
        function redLight() {
            document.getElementById("red").style.backgroundColor = "red";

            // Turns on the yellow light after three seconds
            setTimeout(yellowLight, 3000);
        }

        // Turns on the yellow light
        function yellowLight() {
            document.getElementById("red").style.backgroundColor = "white";
            document.getElementById("yellow").style.backgroundColor = "yellow";

            // Turns on the green light after three seconds
            setTimeout(greenLight, 3000);
        }

        // Turns on the green light
        function greenLight() {
            document.getElementById("yellow").style.backgroundColor = "white";
            document.getElementById("green").style.backgroundColor = "green";
        }

        // Starts the traffic-light sequence (start the code)
        redLight();
    </script>
</body>
</html>

<!-- 15. Design the view as shown in the images and write JavaScript so that, when the Add List button is clicked, the name is added to the list. -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Item to List</title>

    <style>
        .container {
            width: 500px;
            margin: 100px auto;
        }

        input, button {
            padding: 12px;
            font-size: 18px;
            border: 2px solid black;
            border-radius: 8px;
        }

        button {
            margin-left: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Input field for entering an item name -->
        <input type="text" id="itemName" placeholder="Enter item name">

        <!-- Button to add the entered item to the list -->
        <button onclick="addItem()">Add In List</button>

        <!-- List where new items will be displayed -->
        <ul id="list">
            <li>Samosa</li>
            <li>Jalebi</li>
            <li>Vada Pav</li>
        </ul>
    </div>

    <script>
        // Adds the input value as a new list item
        function addItem() {
            let input = document.getElementById("itemName");
            let itemName = input.value;

            // Checks whether the input field is empty
            if (itemName != "") {
                let newItem = document.createElement("li");
                newItem.innerText = itemName;

                // Adds the new list item to the unordered list
                document.getElementById("list").appendChild(newItem);

                // Clears the input field after adding the item
                input.value = "";
            }
        }
    </script>
</body>
</html>
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Your Privacy Choices
  • Consumer Health Privacy
© 2026 Microsoft