12 Frontend - Flexbox ismétlő feladat

 Feladat: Készíts egy weboldal elrendezést, amely a következő elemekből áll:

1. Navigációs sáv:
• A weboldal tetején helyezkedik el.
• Bal oldalon legyen a logó.
• Középen helyezkedjen el négy menüpont: "Home", "About", "Portfolio", "Contact".
• A jobb oldalon legyen egy keresőmező és egy keresés gomb.
• A navigációs sáv legyen rugalmas, tehát igazodjon a képernyő szélességéhez.
2. Fő hős kép (Hero section):
• Közvetlenül a navigációs sáv alatt helyezkedjen el.
• Tartalmazzon egy háttérképet, amely kitölti a teljes szélességet és a képernyő felső felét.
• A háttérkép közepén helyezkedjen el egy cím és egy alatta lévő bekezdés.
• Közvetlenül a cím alatt legyen egy CTA (Call to Action) gomb, amely a felhasználót egy másik szakaszra irányítja.
3. Szolgáltatások szekció:
• A hős kép alatt található.
• Tartalmazzon három oszlopot, amelyek mindegyike egy-egy szolgáltatást mutat be.
• Minden oszlop tartalmazzon egy ikont, egy rövid címet és egy rövid leírást.
• Az oszlopok legyenek egyenlő szélességűek és egymás mellett helyezkedjenek el.
4. Portfólió szekció:
• A szolgáltatások szekció alatt található.
• Tartalmazzon egy rácsos galériát, amelyben négy kép található, két sorban elrendezve.
• A képek legyenek egyenlő méretűek és egymás mellett, valamint alatt helyezkedjenek el.
• Kisebb képernyőn a képek rugalmasan igazodjanak, két oszlopban vagy egy oszlopban rendeződve.
5. Lábléc:
• Az oldal alján helyezkedik el.
• Tartalmazzon három oszlopot:
• Az első oszlopban legyen egy rövid szöveg az oldalról.
• A második oszlopban legyenek hasznos linkek.
• A harmadik oszlopban legyen egy egyszerű feliratkozási űrlap (név és e-mail mezővel, valamint egy gombbal).
• Az oszlopok legyenek egymás mellett, és egyenletesen oszoljanak el.

Követelmények:

• Az egész oldal elrendezését Flexbox segítségével kell megoldani.
• Az oldal legyen teljesen reszponzív, tehát kisebb képernyőn is jól jelenjen meg.
• A navigációs sáv és a lábléc mindig látható legyen, függetlenül az oldal tartalmától.
• A szolgáltatások és a portfólió szekció oszlopai legyenek rugalmasak, és kisebb képernyőkön egymás alá rendeződjenek.
• Ügyelj arra, hogy a tartalom jól olvasható legyen minden eszközön.

Megjegyzések a Megoldáshoz

1. Navigációs sáv: A display: flex segítségével a logó, a menüpontok és a keresőmező/gomb egy sorba rendezve, egymástól egyenlő távolságra helyezkednek el.
2. Hős kép szekció: A Flexbox használata biztosítja, hogy a tartalom középen helyezkedjen el mind függőlegesen, mind vízszintesen. A szekció teljes szélességű, és a háttérképet teljesen kitölti.
3. Szolgáltatások szekció: Három oszlop, amelyek egyenletesen oszlanak el a rendelkezésre álló helyen. Mobil nézetben ezek az oszlopok egymás alatt jelennek meg.
4. Portfólió szekció: Rugalmas rács, amely a rendelkezésre álló hely függvényében két vagy egy oszlopba rendezi a képeket.
5. Lábléc: Három szekcióból álló elrendezés, amely rugalmasan alkalmazkodik a különböző képernyőméretekhez. Mobil nézetben ezek a szekciók egymás alatt jelennek meg.