Skip to content

Commit c854df6

Browse files
alejandroereyesbalejandroereyesb
authored
Merge pull request #8 from Sol-Zeta/new-challenge
Add a new challenge to the repo
2 parents 4294114 + caee1f8 commit c854df6

4 files changed

Lines changed: 163 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,17 @@
33
In this repository you will find a selection of challenges to do with HTML & CSS.
44

55
## [Zoo CSS challenge](./zoo-css-challenge/)
6+
67
Exercise about CSS selectors and basic CSS properties.
8+
9+
## [CSS Position and Flexbox challenge](./css-position-flex-challenge)
10+
11+
Exercise basic CSS properties, selectors, position and Flexbox.
12+
713
## [Two truths one lie](./Two-Truths-One-Lie)
14+
815
Exercise about Mobile first design with Flexbox and Media Queries.
16+
917
## [Form controls](./Form-Controls)
10-
Exercise about styling forms with CSS.
18+
19+
Exercise about styling forms with CSS.

‎css-position-flex-challenge/README.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# CSS Layout Exercise: Flexbox & Position
2+
3+
You have been given:
4+
5+
- An **HTML file without CSS**
6+
- A **screenshot of the final design** located in `/assets/expected-result.png`
7+
8+
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.
9+
10+
![Expected result](assets/expected-result.png)
11+
12+
---
13+
14+
## 🎯 Objective
15+
16+
The goal of this exercise is to practice:
17+
18+
- **CSS selectors and combinators**
19+
- **Flexbox layout**
20+
- **CSS `position` property**
21+
- **Any other CSS properties you know**
22+
- 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)
23+
24+
---
25+
26+
## 📐 Layout Requirements
27+
28+
Using the screenshot as reference, your CSS should include:
29+
30+
### 1. Navigation Bar
31+
32+
- Positioned at the top of the page
33+
- Horizontal layout
34+
- Logo on the left, menu items on the right
35+
- Should remain visible when scrolling (hint: use the `position` property)
36+
37+
### 2. Hero Section
38+
39+
- Centered content (title, text, button)
40+
- Vertical and horizontal alignment using **Flexbox**
41+
- A background with a **gradient color**
42+
43+
### 3. Items Section
44+
45+
- A group of cards/items
46+
- Layout created with **Flexbox**
47+
- Items should **wrap** on smaller screens
48+
- There should be some space between items
49+
- When you **hover over** one of the elements, it should appear a few pixels larger and its background color should change
50+
- Pay attention to the **"Special Item"** message on one of the cards
51+
52+
### 4. Footer
53+
54+
- Located at the bottom of the page
55+
- Centered content
56+
- Footer links aligned horizontally
57+
58+
### 5. "Back to top" Button
59+
60+
- Located at the bottom right of the page
61+
- Should remain visible and in the same position when scrolling
62+
63+
---
64+
65+
## 📌 CSS Position Requirements
66+
67+
Your solution must include examples of:
68+
69+
- `position: relative`
70+
- `position: absolute`
71+
- `position: fixed`
72+
- `position: sticky`
73+
- `display: flex`
74+
75+
Each value should be used **intentionally** and make sense in the layout.
76+
77+
---
78+
79+
## 📱 Responsive Behavior
80+
81+
- The layout should adapt as much as possible to smaller screens (hints: use `relative widths` and `flex containers` when it is necessary)
82+
- Items section should wrap correctly
83+
84+
---
85+
86+
## 🧠 Tips
87+
88+
- Do not focus on matching colors exactly — focus on **layout and behavior**
89+
- Use comments in your CSS to explain your decisions
90+
- Think about **why** each `position` or Flexbox property is used
91+
92+
---
93+
94+
Good luck — and have fun experimenting with CSS! 🚀

‎css-position-flex-challenge/assets/expected-result.png‎

983 KB
Loading

‎css-position-flex-challenge/index.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Flexbox and Position Example</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<!-- Navbar -->
11+
<nav class="navbar">
12+
<div class="logo">MySite</div>
13+
<ul class="nav-items">
14+
<li><a href="#">Home</a></li>
15+
<li><a href="#">Services</a></li>
16+
<li><a href="#">About</a></li>
17+
<li><a href="#">Contact</a></li>
18+
</ul>
19+
</nav>
20+
21+
<!-- Hero / Banner -->
22+
<section class="hero">
23+
<h1>Welcome to My Page</h1>
24+
<p>Learn Flexbox and Position with this example.</p>
25+
</section>
26+
27+
<!-- Flexbox items container -->
28+
<section class="items-container">
29+
<div class="item"><p>Item 1</p></div>
30+
<div class="item"><p>Item 2</p></div>
31+
<div class="item">
32+
<p>Item 3</p>
33+
<div id="special-badge">Special Item</div>
34+
</div>
35+
<div class="item"><p>Item 4</p></div>
36+
<div class="item"><p>Item 5</p></div>
37+
<div class="item"><p>Item 6</p></div>
38+
</section>
39+
<button id="backToTop">⬆ Back to Top</button>
40+
41+
<!-- Footer -->
42+
<footer class="footer">
43+
<p>© 2025 MySite. All rights reserved.</p>
44+
<div class="footer-links">
45+
<a href="#">Privacy</a>
46+
<a href="#">Terms</a>
47+
<a href="#">Help</a>
48+
</div>
49+
</footer>
50+
51+
<script>
52+
// Back to Top button functionality
53+
const btn = document.getElementById("backToTop");
54+
btn.addEventListener("click", () => {
55+
window.scrollTo({ top: 0, behavior: "smooth" });
56+
});
57+
</script>
58+
</body>
59+
</html>

0 commit comments

Comments
 (0)