Skip to content

Latest commit

 

History

History
61 lines (38 loc) · 2.98 KB

README.md

File metadata and controls

61 lines (38 loc) · 2.98 KB
Raw

Pizza Store Website

alt text

This project is a simple pizza store website designed for beginners to learn the basics of HTML and CSS, including how to structure a webpage, use Flexbox for layout, and implement responsive design using media queries.

Overview

The Pizza Store website is a single-page website designed to demonstrate the foundational concepts of web development. It includes a responsive navbar, a banner, an "About Us" section, a speciality section, store information, and a footer. By working on this project, you will gain hands-on experience with:

Structuring content with HTML

  • Styling a webpage with CSS
  • Creating layouts with Flexbox
  • Adding responsive features with media queries

Features

  • Responsive Layout: Adapts to different screen sizes, from desktop to mobile.
  • Navbar: A navigation bar with links to different sections of the website.
  • Banner: A visually appealing hero image with a headline.
  • About Us Section: Information about the pizza store with a 70/30 layout using Flexbox.
  • Speciality Section: Details of pizza specialties, with images and text side-by-side.
  • Store Info: Operating hours, location, and specialties.
  • Footer: A simple footer containing copyright information.

Technologies

  • HTML5: Markup language used to structure the content.
  • CSS3: Stylesheet language used to style the webpage.
  • Flexbox: CSS tool used to create flexible and responsive layouts.
  • Media Queries: CSS technique used for responsive design.

Setup Instructions

  • Download or Clone the Repository:

    git clone https://github.com/raneemr05/MyPizzaStore.git

  • Open the Project in Your Browser: Navigate to the project folder and open the index.html file in your web browser to view the website.

  • Make Changes: You can make changes to the website by modifying the index.html or style.css files using a text editor like VS Code.

Key Concepts Covered

  • HTML Structure: The pizza store webpage is divided into sections (e.g., navbar, banner, about us, specialty, store info, footer).

    • Learn how to create headings, paragraphs, and buttons.

  • CSS Styling: The style.css file contains all the styles used for this project. Key CSS concepts used:

    • Flexbox: Used to create a flexible layout for the navbar, about section, specialty section, and store information.

    • Responsive Design: Implemented using media queries to ensure the website looks good on all screen sizes.

    • Hover Effects: Simple hover effects are applied to buttons and links to make the website interactive.

    • CSS Properties: Learn how to work with colors, background images, font sizes, padding, and margins.

  • Responsiveness: The site is designed to adapt to different screen sizes using media queries. This makes the website mobile-friendly, a crucial feature for modern web design.

Contributing

If you'd like to contribute, feel free to fork the repository, create a new branch, and submit a pull request with your changes. Feedback and improvements are always welcome!