Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 33 views

    Css Assignment (1) 22dce077

    Uploaded by

    Patel Kunj bh
    The document provides code for two web development assignments - creating a restaurant website homepage using HTML and CSS, and creating a live cricket score website homepage using HTML and CSS. The code includes HTML markup for page structure and navigation, and CSS code for styling elements like headers, sections, and footers. The assignments ask students to build basic responsive websites for displaying food menu and live match scores.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Css Assignment (1) 22dce077

    Uploaded by

    Patel Kunj bh
    33 views9 pages
    The document provides code for two web development assignments - creating a restaurant website homepage using HTML and CSS, and creating a live cricket score website homepage using HTML and CSS. The code includes HTML markup for page structure and navigation, and CSS code for styling elements like headers, sections, and footers. The assignments ask students to build basic responsive websites for displaying food menu and live match scores.

    Original Description:

    Xyz

    Original Title

    Css Assignment[1] 22dce077

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides code for two web development assignments - creating a restaurant website homepage using HTML and CSS, and creating a live cricket score website homepage using HTML and CSS. The code includes HTML markup for page structure and navigation, and CSS code for styling elements like headers, sections, and footers. The assignments ask students to build basic responsive websites for displaying food menu and live match scores.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    33 views9 pages

    Css Assignment (1) 22dce077

    Uploaded by

    Patel Kunj bh
    The document provides code for two web development assignments - creating a restaurant website homepage using HTML and CSS, and creating a live cricket score website homepage using HTML and CSS. The code includes HTML markup for page structure and navigation, and CSS code for styling elements like headers, sections, and footers. The assignments ask students to build basic responsive websites for displaying food menu and live match scores.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 9

    CHAROTAR UNIVERSITY OF SCIENCE & TECHNOLOGY

    DEVANG PATEL INSTITUTE OF ADVANCE TECHNOLOGY & RESEARCH

    Subject Name: Web Designing &UI/UX Subject Code: IT283


    Semester: 3 (University Elective)
    h ` Academic Year: 2022-23

    ASSIGNMENT
    1. Create a restaurant website Home page using HTML and
    CSS

    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="Assignment3Css.css">
    <title>Restaurant Name</title>
    </head>
    <body>
    <header>
    <h1>Restaurant Name</h1>
    <nav>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </nav>
    </header>

    22DCE077 1
    <section class="hero">
    <h2>Welcome to our restaurant</h2>
    <p>Delicious food awaits you!</p>
    </section>
    <section class="menu">
    <h2>Menu</h2>
    <div class="menu-item">
    <img
    src="https://img.traveltriangle.com/blog/wp-
    content/uploads/2022/01/Famous-Food-Of-South-India1.jpg"
    alt="Food Item 1" width="500",height=500>
    <h3>Food Item 1</h3>
    <p>South Indian</p>
    </div>
    <div class="menu-item">
    <img
    src="https://static8.depositphotos.com/1093689/842/i/950/de
    positphotos_8423510-stock-photo-traditional-indian-lunch-
    food-and.jpg" alt="Food Item 2"width="500",height=500>
    <h3>Food Item 2</h3>
    <p>Gujarati thali</p>
    </div>

    <div class="menu-item">
    <img
    src="https://content.jdmagicbox.com/comp/udupi/z1/0820px820.
    x820.181012080410.h5z1/catalogue/laziz-pizza-karkala-
    karkala-udupi-pizza-outlets-29wrrsz6tj.jpg?clr=#663300
    "alt="Food Item 2"width="500",height=500>
    <h3>Food Item 3</h3>
    <p>Pizza</p>
    </div>

    22DCE077 2
    </section>
    <section class="about">
    <h2>About Us</h2>
    <p>We are a passionate team of chefs...</p>
    </section>
    <section class="contact">
    <h2>Contact Us</h2>
    <p>Email: info@example.com</p>
    <p>Phone: +1 (123) 456-7890</p>
    </section>
    <footer>
    <p>&copy; 2023 Restaurant Name. All rights
    reserved.</p>
    </footer>
    </body>
    </html>

    CSS code:
    /* Reset some default styles */
    body, h1, h2, h3, p, ul {
    margin: 0;
    padding: 0;
    }
    header,.hero,.menu,.menu-item,.contact,.about{
    background-color:#a09d9d;
    background-repeat: no-repeat;
    }
    /* Style the header */
    header{
    background-color: #333;
    color: white;

    22DCE077 3
    text-align: center;
    padding: 20px;
    }

    nav ul {
    list-style-type: none;
    }

    nav ul li {
    display: inline;
    margin-right: 20px;
    }

    nav a {
    text-decoration: none;
    color: rgb(6, 234, 10);
    font-weight: bold;
    }

    /* Style the hero section */


    .hero {
    background-image: url('restaurant.jpg');
    background-size: cover;
    text-align: center;
    padding: 100px 0;
    font-weight: bolder;
    font-size: xx-large;
    color: rgb(84, 13, 228);
    }

    /* Style the menu section */


    .menu {
    text-align: center;
    padding: 50px 0;
    }

    22DCE077 4
    .menu-item {
    margin-bottom: 30px;
    }
    .menu-item img {
    max-width: 100%;
    }

    /* Style other sections as needed */

    /* Style the footer */


    footer {
    text-align: center;
    background-color: #333;
    color: white;
    padding: 10px 0;
    }

    Output:

    22DCE077 5
    2. Create a live cricket score website Home page using HTML
    and CSS

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>

    22DCE077 6
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
    initial-scale=1.0">
    <link rel="stylesheet" href="Assignment4css.css">
    <title>Cricket Score</title>
    </head>
    <body>
    <header>
    <h1>Live Cricket Score</h1>
    </header>
    <section class="score">
    <h2>Match: India vs. Australia</h2>
    <p>Current Score: <span id="current-score">250/3
    (40 overs)</span></p>
    <p>Last Wicket: Kohli (120 runs)</p>
    </section>
    <section class="status">
    <h2>Match Status</h2>
    <p>India is batting.</p>
    <p>Target: 300 runs</p>
    </section>
    <section clss = imgagex>
    <table>
    <tr>
    <td>
    <img src
    ="https://cdn1.vectorstock.com/i/1000x1000/56/45/cricket-
    scoreboard-background-vector-20455645.jpg"width="800"
    height="300">
    <img src
    ="https://st4.depositphotos.com/1001941/24679/v/1600/deposi

    22DCE077 7
    tphotos_246790336-stock-illustration-website-header-banner-
    design-cricket.jpg"width="710" height="300">
    </td>
    </tr>
    </table>
    </section>
    <footer>
    <p>&copy; 2023 Cricket Score App</p>
    </footer>
    </body>
    </html>

    CSS code:
    /* Reset some default styles */
    *{
    margin: 0;
    padding: 0;
    }

    /* Style the header */


    header {
    background-color: #333;
    color: rgb(14, 17, 237);
    text-align: center;
    padding: 20px;
    }

    /* Style the score section */


    .score {
    background-color: #c9f711;
    text-align: center;

    22DCE077 8
    padding: 50px 0;
    }
    #current-score {
    font-size: 24px;
    font-weight: bold;
    }

    /* Style the status section */


    .status {
    text-align: center;
    padding: 50px 0;
    background-color: #df7aba;
    /* Style the footer */
    footer {
    text-align: center;
    background-color:#df7aba;
    color: rgb(120, 13, 196);
    padding: 10px 0;
    }
    Output:

    22DCE077 9

    You might also like