mfrcodingproject · Sol-Zeta · Dec 25, 2025
diff --git a/README.md b/README.md
@@ -3,8 +3,17 @@
 In this repository you will find a selection of challenges to do with HTML & CSS.
 
 ## [Zoo CSS challenge](./zoo-css-challenge/)
+
 Exercise about CSS selectors and basic CSS properties.
+
+## [CSS Position and Flexbox challenge](./css-position-flex-challenge)
+
+Exercise basic CSS properties, selectors, position and Flexbox.
+
 ## [Two truths one lie](./Two-Truths-One-Lie)
+
 Exercise about Mobile first design with Flexbox and Media Queries.
+
 ## [Form controls](./Form-Controls)
-Exercise about styling forms with CSS.
+
+Exercise about styling forms with CSS.
diff --git a/css-position-flex-challenge/README.md b/css-position-flex-challenge/README.md
@@ -0,0 +1,94 @@
+# CSS Layout Exercise: Flexbox & Position
+
+You have been given:
+
+- An **HTML file without CSS**
+- A **screenshot of the final design** located in `/assets/expected-result.png`
+
+Your task is to recreate the layout and visual style shown in the screenshot **using only CSS**. You are not supposed to edit the HTML file.
+
+![Expected result](assets/expected-result.png)
+
+---
+
+## 🎯 Objective
+
+The goal of this exercise is to practice:
+
+- **CSS selectors and combinators**
+- **Flexbox layout**
+- **CSS `position` property**
+- **Any other CSS properties you know**
+- Clean and readable CSS (Tip: Try to sort the selectors in the CSS file by ordering them, whenever possible and makes sense, from most generic to most specific)
+
+---
+
+## 📐 Layout Requirements
+
+Using the screenshot as reference, your CSS should include:
+
+### 1. Navigation Bar
+
+- Positioned at the top of the page
+- Horizontal layout
+- Logo on the left, menu items on the right
+- Should remain visible when scrolling (hint: use the `position` property)
+
+### 2. Hero Section
+
+- Centered content (title, text, button)
+- Vertical and horizontal alignment using **Flexbox**
+- A background with a **gradient color**
+
+### 3. Items Section
+
+- A group of cards/items
+- Layout created with **Flexbox**
+- Items should **wrap** on smaller screens
+- There should be some space between items
+- When you **hover over** one of the elements, it should appear a few pixels larger and its background color should change
+- Pay attention to the **"Special Item"** message on one of the cards
+
+### 4. Footer
+
+- Located at the bottom of the page
+- Centered content
+- Footer links aligned horizontally
+
+### 5. "Back to top" Button
+
+- Located at the bottom right of the page
+- Should remain visible and in the same position when scrolling
+
+---
+
+## 📌 CSS Position Requirements
+
+Your solution must include examples of:
+
+- `position: relative`
+- `position: absolute`
+- `position: fixed`
+- `position: sticky`
+- `display: flex`
+
+Each value should be used **intentionally** and make sense in the layout.
+
+---
+
+## 📱 Responsive Behavior
+
+- The layout should adapt as much as possible to smaller screens (hints: use `relative widths` and `flex containers` when it is necessary)
+- Items section should wrap correctly
+
+---
+
+## 🧠 Tips
+
+- Do not focus on matching colors exactly — focus on **layout and behavior**
+- Use comments in your CSS to explain your decisions
+- Think about **why** each `position` or Flexbox property is used
+
+---
+
+Good luck — and have fun experimenting with CSS! 🚀
diff --git a/css-position-flex-challenge/assets/expected-result.png b/css-position-flex-challenge/assets/expected-result.png
diff --git a/css-position-flex-challenge/index.html b/css-position-flex-challenge/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flexbox and Position Example</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <!-- Navbar -->
+    <nav class="navbar">
+      <div class="logo">MySite</div>
+      <ul class="nav-items">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Services</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+    </nav>
+
+    <!-- Hero / Banner -->
+    <section class="hero">
+      <h1>Welcome to My Page</h1>
+      <p>Learn Flexbox and Position with this example.</p>
+    </section>
+
+    <!-- Flexbox items container -->
+    <section class="items-container">
+      <div class="item"><p>Item 1</p></div>
+      <div class="item"><p>Item 2</p></div>
+      <div class="item">
+        <p>Item 3</p>
+        <div id="special-badge">Special Item</div>
+      </div>
+      <div class="item"><p>Item 4</p></div>
+      <div class="item"><p>Item 5</p></div>
+      <div class="item"><p>Item 6</p></div>
+    </section>
+    <button id="backToTop">⬆ Back to Top</button>
+
+    <!-- Footer -->
+    <footer class="footer">
+      <p>© 2025 MySite. All rights reserved.</p>
+      <div class="footer-links">
+        <a href="#">Privacy</a>
+        <a href="#">Terms</a>
+        <a href="#">Help</a>
+      </div>
+    </footer>
+
+    <script>
+      // Back to Top button functionality
+      const btn = document.getElementById("backToTop");
+      btn.addEventListener("click", () => {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+      });
+    </script>
+  </body>
+</html>