Orchideák
Feladat
Készíts egy weboldalt az orchideákról az alábbi leírás és minta alapján!
- A rendelkezésre álló állományok segítségével készítsd el a weboldal mappaszerkezetét,valamint a szükséges fájlokat!
- A weboldalak megjelenítéséhez használd fel a bootstrap.min.css és az általad kódolt orchidea.css állományokat! Amennyiben a bootstrap felülírja a saját beállításaidat, használd az !important tulajdonságot saját beállításaidhoz!
- A weboldalak háttérszíne egységesen fekete (#000), a szöveg színe fehér (#FFF) és a linkek színe azok minden állapotában vörös (#F00)!
- Mindhárom weblapon egységesen ugyanaz a fejléc jelenjen meg! Jobb oldalon az orchid.gif kép 50%-os méretre kicsinyítve, az oldalak címei pedig a mintának megfelelően igazítva, egyes szintű címsorral jelenjenek meg! A kép és a cím alatt egy 4 képpont vastag fehér színű vonal jelenjen meg az oldal teljes szélességében!
- A mintának megfelelően a vonal alatt készítsd el a menüszerkezetet a csatolt Bootstrap 4-es állomány segítségével (<a>, Button Outline)! Az index.html oldalra illeszd be középre 1 képpontos fehér szegéllyel és megfelelő nagyítással a fokep.jpg képet!
- A kép alá helyezd el két sorban a „Photo ©Greg Allikas”szöveget és a „www.orchidworks.com” hivatkozást, a betűméret legyen kisebb, mint a linkek alapértelmezett karaktermérete!
- A tropusi.html oldalon a címben a „Trópusi fajok” megnevezés szerepeljen!
- AA tropusi.html oldalra a Bootstrap 4 segítségével helyezd el a tropusi.txt szöveget, a mintának megfelelően egy 90% széles táblázatban (Hoverable Dark Table)!
- A szöveg alá, helyezd el középre a tropusi1.jpg, tropusi2.jpg, tropusi3.jpg képeket! A képeket 1 képpont vastagságú fehér kerettel szegélyezd!
- A hibrid.html oldal címében a „Hibrid fajok” megnevezés szerepeljen!
- A hibrid.html oldalra a Bootstrap 4 segítségével helyezd el a hibrid.txt szöveget, a mintának megfelelően egy 90% széles kétoszlopos táblázatban (Hoverable Dark Table)! Az egyes fajok elnevezéseit a mintának megfelelően emeld ki!
- Kódolásod helyességét ellenőrizd a w3.org validator and tools oldalának segítségével!
Minta
