Készíts egy egyszerű, reszponzív weboldal elrendezést, amely a mellékelt mintának megfelelően épül fel. Az elrendezés kialakításához CSS Grid és Flexbox technológiákat használj.
Követelmények:
- HTML Struktúra:
- Fejléc:
- A bal oldalon egy logó (szöveg vagy kép).
- A jobb oldalon egy navigációs menü (legalább 3 link, például "Home", "About", "Contact").
- Főtartalom (Main Section):
- Egy rácsos elrendezés 4x4-es hálóban (16 elem). Ezek lehetnek például képek vagy színes dobozok.
- Háttér oszlopok:
- Mindkét oldalon egy szürke sáv a tartalom mellett. Ezek a háttér kitöltésére szolgálnak, de ne legyenek interaktív elemek.
- Alsó Tartalom (Footer Section):
- 3 különálló doboz ("Box 1", "Box 2", "Box 3").
- Lábléc (Footer):
- Tartalmazza az oldal szerzőjének nevét és az aktuális évet.
CSS Design:
- Fejléc és Navigáció:
- A fejlécen belül használj Flexboxot a logó és a navigáció vízszintes elrendezésére.
- Főtartalom:
- A fő tartalmat CSS Grid segítségével rendezd el, hogy a 3x4-es rácsos elrendezést megvalósítsd.
- Háttér oszlopok:
- A háttér oszlopokat állítsd fix szélességűre, és helyezd el a fő tartalom két oldalára.
- Alsó tartalom (3 doboz):
- Használj Flexboxot a 3 doboz vízszintes sorban történő elhelyezéséhez.
- Reszponzivitás:
- Mobil nézetben a 3x4-es rácsot alakítsd át egy oszlopos elrendezéssé (pl. minden elem egymás alá kerül).
- A 3 alsó doboz is egymás alá kerülhet mobil nézetben.
- Színek és Stílusok:
- A dobozokat színezd különböző árnyalatokra, hogy könnyen megkülönböztethetők legyenek.
- A navigáció szövege legyen középre igazítva.
Javascript feladat:
- Adj interaktivitást JavaScript segítségével:
- A 12 doboz valamelyikére kattintva jelenjen meg egy értesítés (alert), amely megmutatja a doboz számát (pl. "Ez a 3. doboz!").
Nincsenek megjegyzések:
Megjegyzés küldése