Scribd Logo
Upload

Welcome to Scribd!

  • Lab # 02

    Uploaded by

    Muneeb Aslam
    13 views4 pages
    This lab report describes the creation of a simple recipe website using HTML and CSS. The HTML code defines two recipe sections with images, headings, descriptions and buttons. The CSS code styles the page layout, headings, images, text and buttons. When opened in a web browser, the output displays the two recipe sections side by side with styled formatting.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This lab report describes the creation of a simple recipe website using HTML and CSS. The HTML code defines two recipe sections with images, headings, descriptions and buttons. The CSS code styles the page layout, headings, images, text and buttons. When opened in a web browser, the output displays the two recipe sections side by side with styled formatting.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    13 views4 pages

    Lab # 02

    Uploaded by

    Muneeb Aslam
    This lab report describes the creation of a simple recipe website using HTML and CSS. The HTML code defines two recipe sections with images, headings, descriptions and buttons. The CSS code styles the page layout, headings, images, text and buttons. When opened in a web browser, the output displays the two recipe sections side by side with styled formatting.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    Lab Report # 01

    Web Engineering
    Fall Semester 2022

    Submitted by:

    Name: Muneeb Aslam


    Course: BESE-26C
    CMS ID:344417

    Submitted to:

    Ma’am Laraib

    Dated: 11/10/2022

    Department of Computer Software Engineering


    Military College of Signals
    National University of Sciences and Technology
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Lab # 02</title>
        <link rel="stylesheet" href="style2.css">
    </head>

    <body>
        <div class="food">
            <img src="food1.jpg" alt="">
            <div class="content">
            <h2>BBQ</h2>
            <p class="desc">Lorem ipsum dolor sit amet consectetur, adipisicing
    elit. Doloremque cum doloribus repellendus totam dolor
                blanditiis quos magnam cumque, sequi quaerat tempore! Iure
    voluptates libero maxime quasi natus tenetur,
                ipsam neque.
            </p>
            <button class="button" onclick="">See Recipe</button>
        </div>
        </div>
        <div class="food">
            <img src="food2.jpg" alt="">
            <div class="content">
            <h2>PanCakes</h2>
            <p class="desc">Lorem ipsum dolor sit amet consectetur, adipisicing
    elit. Doloremque cum doloribus repellendus totam dolor
                blanditiis quos magnam cumque, sequi quaerat tempore! Iure
    voluptates libero maxime quasi natus tenetur,
                ipsam neque.
            </p>
            <button class="button" onclick="">See Recipe</button>
            </div>
        </div>
    </body>

    </html>
    CSS Code:
    *{
        padding: 0;
        margin: 0;
    }
    .food{
        background-color: gray;
        display: flex;
        justify-content:center;
        text-align: left;
        width: 75%;
        margin: 100px auto 100px auto;
        box-shadow: 10px,10px,20px rgb(0 0 0 /50%);
    }
    .content{
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        justify-content: space-between;
    }

    h2{
        font-weight: bold;
        margin-top: 30px;
        font-size: 2rem;
    }
    img{
        width: 25%;
        height: 25%s;
    }
    desc{
        size: 1.5rem;
    }
    .button{
        width: 150px;
        height: 30px;
        font-weight: bold;
        background-color: orange;
        position: relative;
        left:760px;
        top: 10px;
    }
    .button:hover{
        transform: scale(1.5,1.5);
        color: gray;
    }
    Output:

    You might also like