Regisztráljon és töltse ki alábbi tesztünket a felvételihez!

Webfejlesztő kurzus 1. tanfolyam HTML / CSS

1. Kérlek jeleníts meg egy 100x100 px nagyságú négyzetet!

A négyzetnek:
- 100px magasnak kell lennie
- 100px szélesnek kell lennie
- 10px vastagságú fekete keretnek kell határolnia
- piros hátterűnek kell lennie

2. Kérlek jeleníts meg egy 100x100 px nagyságú kört!

A körnek:
- 100px magasnak kell lennie,
- 100px szélesnek kell lennie,
- 10px vastagságú szagatott vonalnak kell határolnia,
- a hátterében minimum Selena Gomeznek kell lennie (background-image -ként)
- a háttérkép töltse ki a rendelkezésre álló helyet a legoptimálisabban background-size és background-position segítségével

3. Kérlek jeleníts meg két négyzetet egymás mellett!

Az első téglalapnak:
- 100px magasnak kell lennie
- 500px szélesnek kell lennie
- jobbról 40px margó legyen csak ezen az első négyzeten (:first-child)
- legyen fehér színű
- felül 100px piros kerettel
- alul 100px zöld kerettel

A második téglalapnak:
- 100px magasnak kell lennie
- 500px szélesnek kell lennie
- legyen fehér színű
- felül 100px piros kerettel
- alul 100px piros kerettel,
- horizontálisan a két téglalapnak egymás mellett kell elhelyezkedniük.

4. Kérlek jeleníts meg egy szöveget.

A szövegnek:
- 80px nagyságúnak kell lennie,
- fehér színűnek,
- a háttér sárga,
- a háttérnek ki kell tölteni a rendelkezésre álló helyet az oldalon (width: 100%),
- belső margók oldalról 32px , felülről és alulról pedig 12px,
- a szöveg középen helyezkedjen el horizontálisan,
- nagybetűs formában,
- a "Raleway" Google font betűtípust kell használnia.

5. Kérlek jeleníts meg egy négyzetet és írj bele szöveget.

A négyzetnek:
- a magassága 600px legyen
- a szélessége 600px legyen.
- a hattere piros

A szövegnek:
- 32px belső margója legyen,
- 77px nagyságúnak kell lennie,
- a szöveg helyzete a négyzethez képest vertikálisan és horizontálisan is középen legyen. (margin: auto a

elemre)

6. Kérlek jeleníts meg egy négyzetet és helyezz el benne egy másik négyzetet.

A négyzetet tartalmazó konténernek:
- a magassága 600px legyen,
- a szélessége 100% legyen,
- a háttér színe sárga.

A négyzetnek:
- a magassága 300px legyen,
- a szélessége 300px legyen,
- a négyzet helyzete a konténerhez képest vertikálisan és horizontálisan is a végén legyen.

7. Kérlek jeleníts meg egy kört és írj bele szöveget.

A körnek:
- a magassága 500px legyen,
- a szélessége 500px legyen,
- a kör ragyogjon purple színnel,
- a háttere legyen deeppink,
- ha a kör fölé viszem az egeret akkor a háttérszín változzon pink színűre.

A szövegnek:
- a szöveg helyzete a négyzethez képest vertikálisan a közepén és horizontálisan az elején legyen,
- a szöveg legyen 15 fokkal elforgatva (how to rotate element css)

8. Kérlek jeleníts meg egy négyzetet lekerekített sarkokkal.

A négyzetnek:
- a magassága 300px legyen,
- a szélessége 300px legyen,
- a háttere legyen piros,
- vertikálisan és horizontálisan is a képnek középre kell orientálódnia,
- 16px -es sarok lekerekítésre van szükségünk,
- a négyzeten belül helyezz el egy képet img tag segítségével
- a kép szélessége legyen 150px,
- ha a kép fölé viszem az egeret akkor 12%-ot nőjön a mérete.

9. Kérlek jeleníts meg 10 négyzetet eltérő színekkel.

A négyzetnek:
- a magassága 50px legyen,
- a szélessége 50px legyen,
- jobbról 20px margója legyen,
- balról 30px margója legyen,
- ZÖLD háttérrel kell rendelkeznie,
- minden második PIROS háttérrel kell, hogy rendelkezzen,
- nézz utána a neten ennek: css even és odd selector.

10. Kérlek jeleníts meg 4 négyzetet eltérő színekkel.

A négyzetnek:
- a magassága 50px legyen,
- a szélessége 50px legyen,
- két sorban helyezkedjenek el,
- legyen jobbról 30px margója,
- legyen alulról 30px margója,
- más margója ne legyen.