🧾 Overview This is a simple HTML and CSS project that builds a stylish web page for Davie JR's BBQ Bacon Burger. It includes:
A navigation bar with links like MENU, NUTRITION, ORDER, LOCATIONS
A big banner with the burger's name
A description of the burger
An "Order Now" button
A nutrition facts section
🎨 What You Learned – The CSS Box Model One of the key things used in this page is the CSS Box Model. Let's break it down in plain English:
🍔 Think of Every Element as a Box On a web page, everything is a box. Text? In a box. Image? In a box. Button? Yep — also a box.
Each box has 4 layers, like an onion or a burger:
🧈 1. Content This is the actual thing you see — like the text or image.
🍞 2. Padding Padding is space inside the box, around the content. Think of it as a buffer between your text and the edge of the box.
🧱 3. Border The border wraps around the padding. It’s the visible edge of the box (like a frame).
📏 4. Margin Margin is the space outside the box, separating it from other elements nearby.
✅ Example from Your Code css Copy Edit .button { border-radius: 4px; color: #05a8aa; display: block; font-weight: 700; width: 200px; padding: 20px; margin: 40px auto; border: 1px solid blue; } Let's break this .button class using the box model:
Content: The actual text inside the button (“ORDER NOW”).
Padding: 20px: This adds space inside the button so the text isn’t squished.
Border: 1px solid blue: A blue outline around the padding.
Margin: 40px auto: Adds space outside the button, pushing it away from other items, and centers it (thanks to auto).
🌍 How It Works The page uses Google Fonts (Roboto and Oswald) for stylish text.
Background images make it look more like a modern restaurant website.
CSS is used to control colors, spacing, text alignment, and layout.
The .nutrition section uses ul and li tags to list facts about the burger.
🧠 Final Tip The box model is essential to layout and design in web development. Every time you see spacing or structure on a web page — it's likely using the box model under the hood!
📁 Files index.html – the structure of the page
style.css – all the styles that control the look and feel
reset.css – clears browser default styles so our styles behave consistently