Zadanie końcowe – Moduł 3 – Stylizacja przykładowej sekcji strony

🎯 Zadanie końcowe – Stylizacja przykładowej sekcji strony

W tym zadaniu wykorzystasz wszystko, czego nauczyłeś się w module 3. Twoim celem będzie stworzenie prostego układu z trzema blokami, które wyglądają jak sekcja na stronie internetowej.

Projekt możesz wykonać w JSFiddle lub w dowolnym edytorze, z którego korzystasz (np. VS Code, Live Server itp.).

📝 Co masz zrobić?

Stwórz prostą stronę zawierającą:

• 📌 Nagłówek <h1> – np. „Nasze usługi”
• 📦 Trzy bloki z ofertą (np. „Strony internetowe”, „Sklepy online”, „Pozycjonowanie”), ustawione obok siebie
• 🎨 Każdy blok powinien mieć:
  • Kolorowe tło
  • Zaokrąglone rogi (border-radius)
  • Cień (box-shadow)
  • Odstępy wewnętrzne (padding) i zewnętrzne (margin)
  • Nazwę usługi jako <h2>
  • Krótki opis w <p>

Układ bloków możesz zrobić np. za pomocą float lub inline-block.

📌 Przykładowy efekt końcowy (w wersji opisowej):

NASZE USŁUGI

+---------------------+  +---------------------+  +---------------------+
| Strony internetowe  |  | Sklepy online       |  | Pozycjonowanie      |
| Tworzymy nowoczesne |  | Sklepy dostosowane  |  | Zadbaj o widoczność |
| i responsywne strony|  | do urządzeń mobilnych| | Twojej firmy w Google|
+---------------------+  +---------------------+  +---------------------+

Nie kopiuj powyższego dosłownie! Stwórz własny układ według swoich pomysłów – ważne, abyś użył wszystkich poznanych właściwości CSS.

💡 Wskazówki

• Użyj font-family, font-size, font-weight do formatowania tekstu
• Dopasuj kolory za pomocą HEX lub RGB
• Do obramowania użyj border lub cienia (box-shadow)
• Pamiętaj o marginesach i odstępach
• Użyj display: inline-block lub float do ustawienia bloków w jednej linii

✅ Gotowe?

Kiedy zakończysz pracę, sprawdź czy spełniasz wszystkie punkty i… świetna robota! 💪

Jeśli coś nie działa – wróć do wcześniejszych tematów i spróbuj ponownie.

➡ Teraz przejdź do quizu kończącego moduł 3, by sprawdzić, co zapamiętałeś.