Add files via upload

augusto-mate · web-flow · commit 859687e77d8c · 2025-08-17T00:54:27.000+02:00
Week 3 Assignment - CSS Basics &amp; The Box Model
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>CSS Basics & The Box Model — Assignment</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <header class="site-header container">
+    <h1>CSS Basics & The Box Model</h1>
+    <p class="lead">This page demonstrates fundamental CSS properties and how the Box Model works in practice.</p>
+  </header>
+
+  <main class="container">
+    <section class="card">
+      <h2>Basic CSS Properties</h2>
+      <p><span class="example color-example">This text shows the use of <code>color</code>.</span></p>
+      <p><span class="example background-example">This box shows the use of <code>background</code>.</span></p>
+      <p><span class="example font-example">This line shows <code>font-size</code> and <code>font-style</code>.</span></p>
+      <p><span class="example border-example">This demonstrates <code>border</code> and <code>border-radius</code>.</span></p>
+      <p><span class="example spacing-example">This box uses <code>margin</code> and <code>padding</code>.</span></p>
+    </section>
+
+    <section class="card">
+      <h2>Understanding the Box Model</h2>
+      <p>Every element in CSS is a rectangular box consisting of:</p>
+      <ul>
+        <li><strong>Content</strong>: the text or image inside.</li>
+        <li><strong>Padding</strong>: space between the content and the border.</li>
+        <li><strong>Border</strong>: the edge of the element.</li>
+        <li><strong>Margin</strong>: the space outside the border, separating elements.</li>
+      </ul>
+
+      <div class="box-demo">
+        <div class="content">Content</div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <p>&copy; 2025 Augusto Mate. All rights reserved.</p>
+  </footer>
+</body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,52 @@
+/* ==============================
+   CSS Basics & Box Model (EN)
+   Stylesheet for assignment
+   ============================== */
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: Arial, sans-serif; background: #f4f4f4; color: #111; line-height: 1.5; }
+.container { max-width: 800px; margin: 0 auto; padding: 1rem; }
+
+h1, h2 { margin-bottom: 1rem; }
+p, li { margin-bottom: 0.5rem; }
+ul { margin-left: 1.5rem; }
+
+.card {
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+
+/* Examples of CSS properties */
+.example { display: inline-block; padding: 0.5rem; margin: 0.5rem 0; }
+.color-example { color: darkred; }
+.background-example { background: lightblue; }
+.font-example { font-size: 1.25rem; font-style: italic; }
+.border-example { border: 2px solid green; border-radius: 6px; }
+.spacing-example { background: #eee; margin: 1rem; padding: 1rem; display: block; }
+
+/* Box Model demo */
+.box-demo {
+  background: lightcoral;
+  padding: 20px;         /* padding visible */
+  border: 5px solid navy;/* border visible */
+  margin: 15px;          /* margin around */
+  color: #fff;
+  border-radius: 6px;
+}
+.box-demo .content {
+  background: white;
+  color: black;
+  padding: 10px;
+  text-align: center;
+}
+
+.site-footer {
+  text-align: center;
+  font-size: 0.875rem;
+  padding: 1rem;
+  color: #555;
+}
