Scribd Logo
Upload

Welcome to Scribd!

  • Mini Exercises 1

    Uploaded by

    sahilpurewal1
    0 views2 pages

    Original Title

    MiniExercises1

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    0 views2 pages

    Mini Exercises 1

    Uploaded by

    sahilpurewal1

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 2

    Exercise 1

    Objective:
    Create a web page for a Community Center that includes a header, navigation, main content section,
    sidebar, and footer. Use appropriate HTML elements and CSS properties such as margin, padding, and text -
    shadow.

    Instructions:

    1. Create the HTML File:


    - Create an HTML file named `community_center.html`.
    - Add the basic HTML structure with `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>` tags.

    2. Add the Head Section:


    - Include a `<title>` tag with the text "Community Center".
    - Link an external CSS file named `styles.css`.

    3. Header Section:
    - Create a `<header>` with an `<h1>` tag for the Community Center name.
    - Add a navigation bar (`<nav>`) with links to Home, About, Events, and Contact pages.

    4. Main Content Section:


    - Create a `<main>` section with a welcome message inside a `<section>`.
    - Add two images with descriptive alt texts inside the `<section>`.

    5. Sidebar Section:
    - Add an `<aside>` section with additional information about the Community Center.

    6. Footer Section:
    - Create a `<footer>` with the student's name and the current year.

    7. CSS Styling:
    - Style the page using CSS with properties such as margin, padding, text-shadow, and more.

    Detailed Instructions for CSS Styling:

    a) Body:
    - Set the font family to Arial.
    - Set the background color to light gray (#f0f0f0).
    - Set the text color to dark gray (find the hex value on your own).

    b) Header:
    - Set the background color to green (#4CAF50).
    - Set the text color to white.
    - Add padding of 20px.
    - Center-align the text.
    - Add a text-shadow with 2px horizontal and vertical offset, 4px blur, and black color.
    c) Navigation:
    - Style the `ul` to have no list-style-type and center-align the text.
    - Add padding of 10px.
    - Style the `li` to display inline and have a margin of 0 10px.
    - Style the `a` to have white color, no text-decoration, and bold font-weight.

    d) Main Content:
    - Use flexbox to display `main` with space between sections.
    - Set `section` to flex 2, add padding of 20px, set background color to white, add a margin-right of
    20px, and a box-shadow with 2px offset and 10px blur.
    - Set `aside` to flex 1, add padding of 20px, and set background color to light gray (#e0e0e0).

    e) Footer:
    - Set the background color to green (#4CAF50).
    - Set the text color to white.
    - Center-align the text.
    - Add padding of 10px.

    Sample Output:

    The Community Center web page should have the following structure and styling:

    - Header: A green header with a white title "Welcome to the Community Center" and a text-
    shadow effect.
    - Navigation: A centered navigation bar with links to Home, About, Events, and Contact.
    - Main Content: A flex container with a section and an aside.
    - Section: Contains a welcome message, two images with descriptive alt texts, and is styled with
    padding, background color, and box-shadow.
    - Aside: Contains information about upcoming events, styled with padding and background color.
    - Footer: A green footer with white text displaying the student's name and the current year.

    You might also like