https://github.com/brunortech/the-box-model-davies-burgers
A structured CSS Box Model project built with HTML and CSS, following a guide by Codecademy. This project demonstrates margin, padding, border, and width/height properties to create a well-styled restaurant webpage.
https://github.com/brunortech/the-box-model-davies-burgers
box-model codecademy css frontend-design html responsive-design static-website styling web-development
Last synced: about 1 month ago
JSON representation
A structured CSS Box Model project built with HTML and CSS, following a guide by Codecademy. This project demonstrates margin, padding, border, and width/height properties to create a well-styled restaurant webpage.
- Host: GitHub
- URL: https://github.com/brunortech/the-box-model-davies-burgers
- Owner: BrunoRTech
- Created: 2025-03-18T23:10:14.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-03-18T23:20:07.000Z (2 months ago)
- Last Synced: 2025-04-12T02:39:08.684Z (about 1 month ago)
- Topics: box-model, codecademy, css, frontend-design, html, responsive-design, static-website, styling, web-development
- Language: HTML
- Homepage:
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# The Box Model: Davie's Burgers
This project is a **CSS Box Model practice website**, created using the guide provided by [Codecademy](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-web-development-foundations/tracks/fscj-22-fundamentals-of-css/modules/wdcp-22-learn-css-the-box-model-c8543ca0-92d4-4824-bb89-35a1fb0189d4/projects/box-model-on). It demonstrates how to use **margin, padding, border, and width/height properties** to properly structure and style webpage elements.
## Features
- **Box Model Styling**: Adjusts margin, padding, border, and content spacing.
- **Custom Typography**: Implements Google Fonts for a modern and clean look.
- **Responsive Design**: Ensures elements resize properly across different screen sizes.
- **Navigation Bar**: Styled menu with links to different sections of the website.
## File Structure
- **`index.html`**: Contains the structure of the restaurant website.
- **`style.css`**: Defines the visual styling, including box model properties, layout, and typography.
## Usage
To view the project:
1. Download or clone the repository.
2. Open the `index.html` file in a web browser to explore the website.
## Customization
If you'd like to modify the project:
- Adjust spacing and layout using `margin`, `padding`, `border`, and `width` properties in `style.css`.
- Modify font styles and colors in `style.css` for a personalized design.
- Update `index.html` content to add more menu items or sections.
## Acknowledgment
This project was built using the guide provided by Codecademy. The original project can be found [here](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-web-development-foundations/tracks/fscj-22-fundamentals-of-css/modules/wdcp-22-learn-css-the-box-model-c8543ca0-92d4-4824-bb89-35a1fb0189d4/projects/box-model-on).