97 Teszt feladatok URL
97-17 Nemzeti parkok URL
Feladat leírás: Készítsen reszponzív weboldalt a minta és a leírás alapján a magyar nemzeti parkokról.
Nyissa meg a
nemzetiparkok.html fájlt és egészítse ki a megadottak szerint:
[1 p] 1. A weboldal nyelve
magyar a kódolása pedig
UTF-8 legyen!
[2 p] 2. A weboldal fejrészében helyezzen el hivatkozásokat a
nemzetiparkok.css stíluslapra, valamint a
nemzetiparkok.js JavaScript állományra a meglévő hivatkozások után!
[1 p] 3. A böngésző címsorában megjelenő felirat
"Nemzeti parkok Magyarországon" legyen!
[1 p] 4. A weboldal menüjében javítsa a második menüpontnál megjelenítendő menüszöveget
"Röviden"-ről
"Nemzeti parkjainkról röviden"-re!
[2 p] 5. Biztosítsa, hogy a nav elemben szereplő menüpontokra való kattintáskor a weboldal megfelelő részére navigáljon (ugorjon) az oldal! Az egyes menüpontok céljainak azonosítója:
| Menüpont | Célazonosító |
|---|
| Nemzeti parkjaink | parkjaink |
| Nemzeti parkjainkról röviden | roviden |
| Növény- és állatvilág | noveny-allatvilag |
| Az első nemzeti parkok | elso-parkok |
[2 p] 6. A
park-adatok azonosítójú HTML elem (keret/konténer) bootstrap blokk második oszlopában helyezze el az
images mappában található
igazgatosagok-nevek.png képet. Ha a kép nem tölthető be, akkor a
"Nemzeti Park területek" szöveg jelenjen meg. A képet lássa el a
terkep stílus azonosítóval!
[2 p] 7. A
"Nemzeti parkjaink" szekcióban lévő táblázatba szúrja be az alábbi hiányzó sort úgy, hogy illeszkedjen a többi sorhoz:
| Balaton-felvidéki Nemzeti Park | 1997 | 570190 | Csopak |
[2 p] 8. A
"Nemzeti parkjainkról röviden" szekcióban található képek mindegyikét formázza
park-logo stílus osztállyal és állítsa be, hogy a képekre kattintva az adott oldalak új lapon jelenjenek meg!
[2 p] 9. Ugyanebben a szekcióban a
"Balaton-felvidéki Nemzeti Park" részt javítsa ki úgy, hogy a formázása illeszkedjen a többi nemzeti park leírásához!
[1 p] 10. A
"Növény- és állatvilág” szekcióban lévő bootstrap blokk oszlopainak 6:6-os arányát módosítsa 8:4-re, a minta szerint!
[2 p] 11. Ugyanitt, a
"Növény- és állatvilág" szekcióban lévő képek mindegyikénél állítsa be, hogy a kiemelt kép ne kattintásra jelenjen meg, hanem azonnal, amint az állat vagy növény képe fölé kerül az egérkurzor!
[2 p] 12. Az
"Az első nemzeti parkok a kontinenseken" rész alatt található megjegyzésben lévő szöveget alakítsa át számozatlan felsorolássá a mintának megfelelően!
Nyissa meg a
nemzetiparkok.css állományt, majd egészítse ki illetve módosítsa a következők szerint:
[1 p] 1. A dokumentum alapértelmezett betűmérete
14px legyen! A további betűméreteket ehhez fogjuk (relatíve) igazítani!
[2 p] 2. Az oldalon 1000px szélességig a navigáció menüpontjai egymás alatt, egy oszlopban jelenjenek meg, 1000px felett pedig egymás mellett, egy sorban!
[3 p] 3. A
body háttérképe az
images/logo mappában található
termeszetvedelem-hatter.png legyen. A háttérkép ne ismétlődjön, vízszintesen középre, függőlegesen fentre helyezze el! Görgetéskor a háttérkép ne mozduljon el!
[1 p] 4. A
body szélességét állítsa a kijelző teljes szélességére!
[2 p] 5. A
tablazat azonosítójú táblázatnak legyen 1px széles, folytonos vonalú, sötétszürke (darkgray) külső szegélye a minta szerint!
[1 p] 6. A bekezdések szövege legyen sorkizárt!
[1 p] 7. A
kepek stílusosztállyal formázott képek sarkai legyenek
1rem értékkel lekerekítve!
[2 p] 8. A
toTop azonosítóval ellátott konténer legyen a jobb alsó sarokhoz rögzítve, azaz ha változik az ablak mérete vagy a gördítősáv, akkor is fixen a jobb alsó sarokban legyen!
[2 p] 9. Az egyes, kettes és hármas címsor szövegek színe legyen sötétzöld (darkgreen)!
[2 p] 10. A
kiemelt-kep azonosítójú konténer szélessége legyen 100%, magassága pedig 300px!
[2 p] 11. A
kiemelt-nev azonosítójú szöveg mérete legyen az alapértelmezett betűméret kétszerese és vastagított!
[1 p] 12. Az
iucn azonosítójú logó legyen balra igazítva a mintának megfelelően!
A szövegek és képek forrásai:
http://magyarnemzetiparkok.hu/
https://csodasmagyarorszag.hu/cikkek/nemzeti-parkok
https://tudasbazis.sulinet.hu/
https://vadonleső.hu/
https://hu.wikipedia.org/wiki/Nemzeti_park
https://www.yosemite.com/
Végeredmény minta (részlet):

97-18 Nemzeti parkok a Dunántúlon URL
Feladat leírás: Készítsen reszponzív weboldalt a minta és a leírás alapján a magyar nemzeti parkokról.
Nyissa meg a
nemzetiparkok-dunantul.html fájlt és egészítse ki a megadottak szerint:
1. A weboldal nyelve
magyar a kódolása pedig
UTF-8 legyen!
2. A weboldal fejrészében helyezzen el hivatkozásokat a
nemzetiparkok-dunantul.css stíluslapra, valamint a
nemzetiparkok-dunantul.js JavaScript állományra a meglévő hivatkozások után!
3. A böngésző címsorában megjelenő felirat
"Nemzeti parkok a Dunántúlon" legyen!
4. Biztosítsa, hogy a nav elemben szereplő menüpontokra való kattintáskor a weboldal megfelelő részére navigáljon (ugorjon) az oldal! Az egyes menüpontok céljainak azonosítója:
| Menüpont | Célazonosító |
|---|
| Dunántúli nemzeti parkjaink | parkjaink |
| A parkokról röviden | roviden |
| Növény- és állatvilág | noveny-allatvilag |
| Az első nemzeti parkok | elso-parkok |
5. A
park-adatok azonosítójú HTML elem (keret/konténer) bootstrap blokk második oszlopában helyezze el az
images mappában található
igazgatosagok-nevek.png képet. Ha a kép nem tölthető be, akkor a
"Nemzeti Park területek" szöveg jelenjen meg. A képet lássa el a
terkep azonosítóval!
6. A
"parkjaink" szekcióban lévő táblázatba szúrja be az alábbi hiányzó sort úgy, hogy illeszkedjen a többi sorhoz:
| Balaton-felvidéki Nemzeti Park | 1997 | 570190 | Csopak |
7. A
"roviden" szekcióban található hivatkozások mindegyikét állítsa be, hogy a képekre kattintva az adott oldalak új lapon jelenjenek meg!
8. A
"noveny-allatvilag” szekcióban lévő bootstrap blokk oszlopainak 6:6-os arányát módosítsa 8:4-re, a minta szerint!
9. Ugyanitt, a
"noveny-allatvilag" szekcióban lévő képek mindegyikénél állítsa be, hogy a kiemelt kép ne kattintásra jelenjen meg, hanem azonnal, amint az állat vagy növény képe fölé kerül az egérkurzor!
10. Az
"Az első nemzeti parkok a kontinenseken" rész alatt található megjegyzésben lévő szöveget alakítsa át számozatlan felsorolássá a mintának megfelelően!
Nyissa meg a
nemzetiparkok-dunantul.css állományt, majd egészítse ki illetve módosítsa a következők szerint:
1. A dokumentum alapértelmezett betűmérete
14px legyen! A további betűméreteket ehhez fogjuk (relatíve) igazítani!
2. Az oldalon 1000px szélességig a navigáció menüpontjai egymás alatt, egy oszlopban jelenjenek meg, 1000px felett pedig egymás mellett, egy sorban!
3. A body háttérképe az
images/logo mappában található
termeszetvedelem-hatter.png legyen. A háttérkép ne ismétlődjön, vízszintesen középre, függőlegesen fentre helyezze el! Görgetéskor a háttérkép ne mozduljon el!
4. A
body szélességét állítsa a kijelző teljes szélességére!
5. A
tablazat azonosítójú táblázatnak legyen
1px széles, folytonos vonalú, sötétszürke (darkgray) külső szegélye a minta szerint!
6. A bekezdések szövege legyen sorkizárt!
7. A
kepek stílusosztállyal formázott képek sarkai legyenek
1rem értékkel lekerekítve!
8. A
toTop azonosítóval ellátott konténer legyen a jobb alsó sarokhoz rögzítve, azaz ha változik az ablak mérete vagy a gördítősáv, akkor is fixen a jobb alsó sarokban legyen!
9. Az egyes, kettes és hármas címsor szövegek színe legyen sötétzöld (darkgreen)!
10. A
kiemelt-kep azonosítójú konténer szélessége legyen
100%, magassága pedig
300px!
A szövegek és képek forrásai:
http://magyarnemzetiparkok.hu/
https://csodasmagyarorszag.hu/cikkek/nemzeti-parkok
https://tudasbazis.sulinet.hu/
https://vadonleső.hu/
https://hu.wikipedia.org/wiki/Nemzeti_park
https://www.yosemite.com/
Végeredmény minta (részlet):

97-19 Kimi Räikkönen URL
Feladat leírás: Készítsen reszponzív weboldalt a minta és a leírás alapján Kimi Räikönnen autóversenyzőről.
Nyissa meg a
kimmi_raikonnen.html fájlt és egészítse ki a megadottak szerint:
1. A weboldal nyelve
magyar legyen!
2. A weboldal kódolása
UTF-8 legyen!
3. A weboldal fejrészébe helyezzen el hivatkozást a
kimmi.css fájlra!
4. A böngésző címsorában megjelenő felirat
„Kimi Räikkönen” legyen!
5. A
footer-ben megadott hivatkozás kódját bővítse, hogy az új oldalon nyíljon meg!
6. A teljes weboldalt tartalmazó HTML elemnek (keret/konténer, mely tartalmazza a
head és
content HTML elemeket) adjon
profile-card azonosítót!
7. A
profile-image HTML elembe (keretbe/konténerbe) helyezze el Kimi Räikönnen
foto.jpg fotóját! Amennyiben a beillesztett fotó valamiért nem jeleníthető meg, vagy az egérkurzort rávisszük a fotóra, úgy a
„Kimmi Räikönnen” felirat jelenjen meg! A képet lássa el
„kimi” azonosítóval!
8. A
name-headline HTML elem (keret/konténer) szövegeiből alakítsa ki a minta szerint az 1-es, a 2-es és a 3-as címsorokat!
9. Biztosítsa, hogy a nav elemben szereplő menüpontokra való kattintás-kor a weboldal megfelelő részére navigáljon (ugorjon) az oldal! Az egyes menüpontok céljainak azonosítója:
| Menüpont | Célazonosító |
|---|
| Pályafutása | palyafutasa |
| Csapatvezetői tevékenysége | csapat |
| Becenevek | becenevek |
| Eredményei | eredmenyei |
| Fotók | fotok |
| Formula-1-es rekordjai | rekordok |
| Külső hivatkozások | hivatkozasok |
10. A táblázat részt alakítsa ki a minta szerint! A táblázat szövegét megtalálja a forráskódban kommentként a táblázat helyén!
11. A
row osztályjelölővel jelölt konténerbe helyezze el az images mappából a számozott képét:
1.jpg,
2.jpg, …,
5.jpg. A képeket sorolja a
„w-50” stílusosztályba!
12. A Formula–1-es rekordok felsorolásához alakítson ki a minta szerint számozott felsorolást!
Nyissa meg a
kimmi.css fájlt, egészítse ki a leírás és a minta szerint
1. A dokumentum alapértelmezett betűmérete
14px legyen! A további betűméreteket ehhez fogjuk (relatíve) igazítani! Amennyiben az oldal szélessége 768px-nél szélesebb lesz, úgy az alapértelmezett betűméret
20px legyen!
2. A
body szélességét állítsa a kijelző teljes szélességére!
3. A kettes címsorok szövege legyen dőlt stílusú!
4. Kimmi Raikönnen fotóján alkalmazzon
50%-os lekerekítést!
5. A
body háttérképe az
images mappában található
hatterkep.jpg legyen. A háttérkép ne ismétlődjön, mindkét irányból középre helyezze el! Görgetéskor a háttérkép ne mozduljon el!
6. A bekezdések sortávolságát a dokumentum alapértelmezett betűméretének
1.5-szerese legyen!
7. A
head szélessége a rendelkezésre álló hely
90%-a, magassága a rendelkezésre álló hely
20%-a legyen! A content szélessége a rendelkezésre álló hely
90%-a, magassága a rendelkezésre álló hely
80%-a legyen!
8. A
nav szövegének a betűmérete a dokumentum alapértelmezett betűméretének
1.2-szerese legyen! A hármas szintű címsor szövegének betűmérete a dokumentum alapértelmezett betűméretével egyezzen meg! Ne használjon abszolút mértékegységet!
9. A hivatkozások betűszíne:
(255,34,71) színkódú RGB szín legyen! Amennyiben a hivatkozásra rávisszük a kurzort, úgy a betűszín váltson fehérre, a háttér pedig feketére!
10. Állítsa a képek bal és jobb oldali margóját automatikusra!
11. Az oldalon 1200px szélességig a navigáció menüpontjai egymás alatt, egy oszlopban jelenjenek meg, 1200px felett pedig egymás mellett, egy sorban!
12. A
content kapjon
1 képpontos,
hsla(0,0%,30%,0.8) színű folytonos felső szegélyt!
Végeredmény minta (részlet):

97-20 Hősök tere URL
Feladat leírás: Készítsen reszponzív weboldalt a minta és a leírás alapján a Hősök teréről.
Nyissa meg a
hosoktere.html fájlt és egészítse ki a megadottak szerint:
1. A weboldal nyelve
magyar a kódolása pedig
UTF-8 legyen!
2. A weboldal fejrészében helyezzen el hivatkozásokat a
hosoktere.css stíluslapra, valamint a
hosoktere.js JavaScript állományra a meglévő hivatkozások után!
3. A böngésző címsorában megjelenő felirat
"Hősök tere" legyen!
4. Biztosítsa, hogy a
nav elemben szereplő menüpontokra való kattintáskor a weboldal megfelelő részére navigáljon (ugorjon) az oldal! Az egyes menüpontok céljainak azonosítója:
| Menüpont | Célazonosító |
|---|
| Hősök tere története | tortenet |
| Látnivalók | latnivalok |
| Szobrok | szobrok |
| Érdekességek | erdekessegek |
5.
"tortenet" szekció
a) A szövegben található, félkövér "Gloriette" szót formázza úgy, hogy dőlt is legyen.
b) A bootstrap blokk első sorában a
figure elemen belül helyezze el az
images mappában található
gloriette-1890.jpg képet. Ha a kép nem tölthető be, akkor a
"Gloriette, 1890" szöveg jelenjen meg. A képet formázza a
kepek stílusosztállyal.
A
figure tag-et lássa el a
gloriette azonosítóval! A képhez tartozzon
"Gloriette, 1890" képaláírás is, ehhez használja a
figcaption elemet.
c) A két hivatkozást állítsa be, hogy a szövegre kattintva az adott oldalak új lapon jelenjenek meg! (Ybl Miklós, Zsigmondy Vilmos)
6. A
"szobrok" szekció
a) A bootstrap blokk oszlopainak
4:8-os arányát módosítsa
3:9-re, a minta szerint!
b) Mindegyik képnél állítsa be, hogy a kiemelt kép ne kattintásra jelenjen meg, hanem azonnal, amint a kis kép fölé kerül az egérkurzor!
7. Az
"erdekessegek" szekcióban található három
article első mondatait alakítsa át hármas címsorrá a mintának megfelelően:
"A Hősök tere Kínában",
"Gloriette",
"Gábriel oszlopa"Nyissa meg a
hosoktere.css állományt, majd egészítse ki illetve módosítsa a következők szerint:
1. A dokumentum alapértelmezett betűmérete
14px legyen! A további betűméreteket ehhez fogjuk (relatíve) igazítani!
2. Az oldalon
1000px szélességig a navigáció menüpontjai egymás alatt, egy oszlopban jelenjenek meg,
1001px és a felett pedig egymás mellett, egy sorban!
3.
body elem
a) A háttérképe az
images mappában található
hosok-tere-halvany.png legyen. A háttérképet vízszintesen középre, függőlegesen fentre helyezze el. A héttérkép ne ismétlődjön! Görgetéskor a háttérkép ne mozduljon el!
b) A szélességét állítsa a kijelző teljes szélességére!
c) A hátterének a színe
lightcyan legyen, a szöveg színe pedig
darkblue!
4. A
kepek stílusosztállyal formázott képek sarkai és a
figure elemek legyenek
1rem értékkel lekerekítve!
5. Az
elejere azonosítóval ellátott konténer legyen a jobb alsó sarokhoz rögzítve, azaz ha változik az ablak mérete vagy a gördítősáv, akkor is fixen a jobb alsó sarokban legyen!
6. A kettes címsor szövegek legyenek félkövérek és a háttérszínük legyen
rgba(255, 198, 123, 0.4)!
7. A bekezdések szövege legyen sorkizárt!
8. A
kiemelt-kep azonosítójú konténer szélessége legyen
100%, magassága pedig
300px!
A szövegek és képek forrásai:
https://hu.wikipedia.org/wiki/H%C5%91s%C3%B6k_tere
https://www.erdekesvilag.hu/a-hosok-tere-kinaban/
https://www.szeretlekmagyarorszag.hu/multunk/5-erdekesseg-a-hosok-tere-multjarol/
Végeredmény minta (részlet):

97-21 Budapest URL
Feladat leírás: Készítsen reszponzív weboldalt a minta és a leírás alapján Budapest nevezetességeiről.
Nyissa meg a
budapest.html fájlt és egészítse ki a megadottak szerint:
1. A weboldal nyelve
magyar a kódolása pedig
UTF-8 legyen!
2. A weboldal fejrészében helyezzen el hivatkozásokat a
budapest.css stíluslapra, valamint a
budapest.js JavaScript állományra a meglévő hivatkozások után!
3. A böngésző címsorában megjelenő felirat
"Budapest" legyen!
4. Biztosítsa, hogy a
nav elemben szereplő menüpontokra való kattintáskor a weboldal megfelelő részére navigáljon (ugorjon) az oldal! Az egyes menüpontok céljainak azonosítója:
| Menüpont | Célazonosító |
|---|
| Budapest története | tortenet |
| Budapest címere | cimer |
| Kultúra | kultura |
| Galéria | galeria |
| Közlekedés | kozlekedes |
5. A
"tortenet" szekció bootstrap blokkjának második oszlopában helyezze el az
images mappában található
budavari-palota.jpg képet. Ha a kép nem tölthető be, akkor a
"Budavári palota" szöveg jelenjen meg. A képet formázza a
kepek stílusosztállyal.
A képet
figure csoportosító elemben helyezze el és a
figure tag-et lássa el a
palota azonosítóval! A képhez tartozzon
"Budavári palota" képaláírás is, ehhez használja a
figcaption elemet.
6. A
"nepesseg" konténerben lévő táblázatba szúrja be az alábbi hiányzó sort a megfelelő helyre úgy, hogy illeszkedjen a többi sorhoz:
7. A
"tortenet" szekcióban található két hivatkozást állítsa be, hogy a szövegre kattintva az adott oldalak új lapon jelenjenek meg! (Aquincum, Osztrák–Magyar Monarchia)
8. A
"galeria" szekcióban lévő bootstrap blokk oszlopainak 6:6-os arányát módosítsa 3:9-re, a minta szerint!
9. Ugyanitt, a
"galeria" szekcióban lévő képek mindegyikénél állítsa be, hogy a kiemelt kép ne kattintásra jelenjen meg, hanem azonnal, amint a kis kép fölé kerül az egérkurzor!
10. A
"kozlekedes" szekcióban található megjegyzésben lévő szöveget alakítsa át számozott felsorolássá a mintának megfelelően!
Nyissa meg a
budapest.css állományt, majd egészítse ki illetve módosítsa a következők szerint:
1. A dokumentum alapértelmezett betűmérete
14px legyen! A további betűméreteket ehhez fogjuk (relatíve) igazítani!
2. Az oldalon 1000px szélességig a navigáció menüpontjai egymás alatt, egy oszlopban jelenjenek meg, 1000px felett pedig egymás mellett, egy sorban!
3. A body háttérképe az
images mappában található
budapest-cimer-halvany.png legyen. A háttérkép ne ismétlődjön, vízszintesen középre, függőlegesen fentre helyezze el! Görgetéskor a háttérkép ne mozduljon el!
4. A
body szélességét állítsa a kijelző teljes szélességére!
5. A
nepesseg-tablazat azonosítójú táblázatnak legyen
1px széles, folytonos vonalú, sötétszürke (darkgray) külső szegélye a minta szerint!
6. A bekezdések szövege legyen sorkizárt!
7. A
kepek stílusosztállyal formázott képek sarkai és a
figure elemek legyenek
1rem értékkel lekerekítve!
8. Az
elejere azonosítóval ellátott konténer legyen a jobb alsó sarokhoz rögzítve, azaz ha változik az ablak mérete vagy a gördítősáv, akkor is fixen a jobb alsó sarokban legyen!
9. A kettes címsor szövegek legyenek félkövérek és a háttérszínük legyen rgba(255, 198, 123, 0.4)!
10. A
kiemelt-kep azonosítójú konténer szélessége legyen
100%, magassága pedig
300px!
A szövegek és képek forrásai:
https://hu.wikipedia.org/wiki/Budapest
Végeredmény minta (részlet):

97-22 Balaton URL
Feladat leírás: A forrásként kiadott weboldalon kell módosításokat végeznie a Balaton rövid bemutatására a feladatleírás és a minta szerint.
Nyissa meg a
balaton.html fájlt és egészítse ki a megadottak szerint:
1. A weboldal nyelve
magyar a kódolása pedig
UTF-8 legyen!
2. A weboldal fejrészében helyezzen el hivatkozásokat a
balaton.css stíluslapra, valamint a
balaton.js JavaScript állományra a meglévő hivatkozások után!
3. A böngésző címsorában megjelenő felirat
Balaton legyen!
4. Állítsa be, hogy amikor a böngésző beolvassa az oldalt, automatikusan futtassa le a
keprejt() JS függvényt!
5. A
header és
foldrajz szakaszok
container stílusosztállyal formázott konténerét módosítsa úgy, hogy
container helyett
container-fluid legyen a stílusosztályuk!
6. A
fejleckepek azonosítójú konténerbe illessze be a
kepek/fej3.jpg képet úgy, hogy az megjelenjen a slideshow-ban harmadik elemként. A beszúrt képnél állítsa be, hogy a
Tavirózsák felirat jelenjen meg ha a kép valami miatt nem tölthető be, vagy ha az egeret a kép fölé viszik.
7. Biztosítsa, hogy a nav elemben szereplő menüpontokra való kattintáskor a weboldal megfelelő részére navigáljon (ugorjon) az oldal! Az egyes menüpontok céljainak azonosítója:
| Menüpont | Célazonosító |
|---|
| Földrajz | foldrajz |
| Turizmus | turizmus |
| Növényvilág | novenyvilag |
| Állatvilág | allatvilag |
8. A
foldrajz azonosítójú bootstrap rács oszlopainak
6:6-os arányát módosítsa
8:4‑re, a minta szerint!
9. A
"A Balaton földrajza" 2-es címsort követő négy szövegrészt alakítsa általános bekezdésekké!
10. A
domborzat azonosítójú
figure elemen belül készítsen egy
figcaption feliratot az alábbi szöveggel:
"A Balaton medrének domborzata"11. A
foldrajz azonosítójú konténerben található táblázat utolsó sorába szúrja be az alábbi adatot:
12. A
turizmus azonosítójú konténerben található
Turisztikai célpontok táblázat mindegyik soránál állítsa be, hogy a kapcsolódó kép ne kattintásra jelenjen meg, hanem azonnal, amint az állat vagy növény képe fölé kerül az egérkurzor!
13. A
turizmusszovegkeret konténerben levő öt hivatkozás mindegyikét állítsa be, hogy a városok nevére kattintva az adott oldalak új lapon jelenjenek meg!
14. A
novenyvilag konténerben lévő bootstrap rács mindhárom blokkjához adjon hozzá pluszban
novenykep stílusosztályt is a meglevők után!
15. Az oldal legalján a
footer szakaszban helyezzen el egy vízszintes vonalat és a vonal alatt közvetlenül legyen az Ugrás az
elejére szöveg hivatkozás, amelyre kattintva a böngésző az oldal legelejére ugrik.
Nyissa meg a
balaton.css állományt, majd egészítse ki illetve módosítsa a következők szerint:
1. A dokumentum háttérszíne
rgba(150, 255, 255, 0.2) legyen!
2. Ha a menüpontok fölé viszik az egeret, akkor az adott menüpont betűszíne váltson át erre a színre:
rgb(50, 50, 255)3. A
h1 címsor legyen pozícionálva fentről
-75px, balról pedig
-30px értékkel! Figyelem, mindkét érték negatív!
4. A
h2 címsorok legyenek félkövérek!
5. A
h1, h2, h3 és
h4 címsorok mindegyikének a betűtávolsága
2px legyen!
6. A
panorama stílusazonosítójú elem töltse ki vízszintesen a rendelkezésre álló helyet!
7. A
novenykep stílusosztály szövege legyen középre igazítva!
8. A
novenykep stílusosztállyal formázott elemeken belüli képek legyenek lekerekítve
20px-el és a belső margójuk is legyen
20px!
9. Az
allatkep stílusosztály szelektorában található cursor bejegyzést hatástalanítsa a kódsor törlése nélkül!
10. Az
allatkep stílusosztállyal formázott képek szélessége legyen
250px!
11. Az általános bekezdések legyenek sorkizártak!
12. A
latin stílusosztály betűmérete legyen
1rem, és dőlt!
A szövegek és képek forrásai (2022.05.10):
https://hu.wikipedia.org/wiki/Balaton
https://hungarytoday.hu/
https://www.mme.hu/magyarorszag-madarai
Végeredmény minta (részlet):
