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.
