1.1.

Gyors figyelmeztetés
Üdv az Esküvői Weboldal leckében! Ha a Weblapkészítő Ösvényről érkeztél:
helló, nyugodtan hagyd ki ezt az oldalt, és folytasd a következőn. Ha viszont
máshonnan, akkor egy gyors figyelmeztetés: ez egy haladó projekt. Ha nem
vagy ismerős a HTML és CSS világában, akkor érdemes előbb a következő
témákat elsajátítanod:

 a HTML és CSS alapjai,

 kezdő fejlesztői eszközök,
 kezdő és haladó pozicionálás,
 reszponzív webdesign,
 gyakori HTML és CSS komponensek.

Ha ezek nem hangzanak ismerősen, akkor a javaslatom az, hogy előbb végezd el
a kapcsolódó részeket az iskolánkban, és utána gyere vissza ehhez a projekthez.

Oké, ennyit szerettem volna, hajrá a feladatokkal!

1.2. Játékszabályok
Lássunk is neki ennek az esküvői weboldal témának. A játékszabályok a
következők:

 Ez nem egy lépésekre lebontott útmutató lesz, ahol végig fogjuk a kezed.
Az oldalt egyedül fogod megépíteni minimális támogatással. Semmi
pánik, mostanra minden készséggel rendelkezel, ami a sikerhez kell.
 Mi megadjuk neked a specifikációt, nyers szöveget, képeket és egyéb
elemeket, a kész designt és egy működő példa prototípust. Onnantól
fogva a te feladatod lesz a lehető legpontosabban lemásolni az oldalt.
 Nyugodtan használd az összes eddig látott fejlesztői eszközt, különösen a
"Vizsgálat" menüpontot a Chrome-ban. Próbáld meg az elemekből
visszafejteni az oldal architektúráját (de ne másold ki egyben a
forráskódot).
 A következő leckében minden lépéshez találni fogsz példamegoldásokat.
Használd ezeket arra, hogy leellenőrizd saját magad, vagy arra, hogy
átlendülj egy különösen trükkös részen, de kérlek, ne másold le azokat
egy az egyben. Próbáld megépíteni a saját megoldásod, hidd el, sokkal
többet tanulhatsz úgy.

Egy ekkora projektnél fontos, hogy ne próbálj egyszerre csinálni mindent.

Bontsd le a terméket az elemeire, és készítsd el ezeket szép sorban, egyszerre
mindig csak egy valamire koncentrálva. Először rajzold meg a drótvázat
(wireframe), aztán készítsd el a HTML-vázat, aztán add hozzá a mobilstílusokat,
végül az asztaliakat. Hasonlóan ne egyszerre ess neki az összes részegységnek.
Ne próbáld meg párhuzamosan építeni a fejlécet (header) és a láblécet (footer).
Hajtsd végre előbb az egyiket, majd a másikat. Ha így közelíted meg a projekted,
akkor egyszerre mindig csak egy viszonylag egyszerű feladatot kell majd
megoldanod.

+1 tipp: Két úton csinálhatod végig ezt a projektet. Választhatod azt, hogy
megnézed a kész designt és megpróbálod teljesen egyedül megépíteni az
oldalt. Az utolsó feladatban megnézheted a példa forráskódot, hogy leellenőrizd
magad. A másik lehetőség, hogy követed a lépésenkénti kihívásokat, amelyeket
mi találtunk ki. Nincs jó vagy rossz megoldás, válaszd azt, amelyik jobban fekszik
neked. Sőt, akár keverheted is a kettőt!

Megjegyzés: Ne feledd, ha nagyon elakadnál, bármikor kérhetsz segítséget

Slacken.

Egy utolsó gondolat mielőtt kezdenénk: ez egy nagy projekt, szánj rá megfelelő
mennyiségű időt. Teljesen oké egy ideig megállni ennél a feladatnál, és
elszöszölni vele. Ne sürgesd magad. És ne feledd, hogy ez be fog kerülni a
portfoliódba, úgyhogy adj bele mindent. :)

1.3. Specifikáció és nyersanyagok

Itt megtalálsz mindent, amire szükséged lesz Zoe és Alex (a jegyeseink)
csodaszép új weboldalához.

Specifikáció

Az oldal:

 jelenítse meg az alapvető információkat az esküvővel kapcsolatban

(helyszínek, időpontok, stb.).
 adjon választ a vendégek gyakori kérdéseire.
 tegye lehetővé a kapcsolatfelvételt a menyasszonnyal és a vőlegénnyel.
 tartalmazzon egy szekciót az ajándékokról.
 rendelkezzen szép és letisztult designnal.
 tartalmazzon egy teljes képernyőt betöltő fejlécet a jegyespár fotójával.
 tartalmazzon egy láblécet a szerzői joggal kapcsolatos információval.
 legyen teljesen reszponzív.
Nyers szöveg:

Header

tagline: We're getting married!

headline: Zoe & Alex
date: August 1, 2018

Locations

ceremony: St. Nicholas Church, 2 Trinity Square, Budapest

photos: Liberty Bastion, 23 Wisdom Road, Budapest
party: Heaven Lounge, 14 Fairy Street, Budapest

Program

tagline: "It's going to be somehow, that's for sure."

times:
13:45 – Wedding ceremony
14:30 – Photos
16:00 – Cocktails
18:00 – Dinner
22:00 – Cake
... - 4:00 – Dance until dawn

Gifts:

tagline: The greatest gift for us is to have you there.

paragraph: Please, just bring yourself and have fun with us.

Questions and Answers

travel and accomodations:

 Will there be some kind of organized transfer?
No, we'll just meet at the church at 13:15.

Where can I park?

Parking is free on the weekends in the 1st district. The locations
are close to each other so you won't need your car.

How can I get home at night?

The 916 bus is in service all night at the castle and it hits
every major traffic hub in the city.

food and festivities:

I'd like to do some kind of surprise for you guys at the party. To
whom should I talk about this?
Discuss it with Abigail Smith. Just drop her an email at
abigail@awesomemail.com.

What should I wear? Do you have a dress code?

Wear what's comfortable to you. If it helps smart casual /
business casual for the ladies and smart casual / informal for the
gentlemen are perfect options.

I would like some kind of special food (gluten-free, lactose-free,

vegan etc.)
Drop us a line here and we'll find a way.

other small stuff:

I have a problem / question on the wedding day. With whom can I

speak?
Jared Wright on this number: +36 30 000 0000.

Can we bring kids?

Sure! We planned a whole toy / sweets corner for them.
 How do you feel about dogs? Can I bring mine?
We love dogs and you can absolutely bring yours. The Heaven Lounge
is a dog-friendly place.

Contact

paragraph: If you have any questions feel free to call / write us.
phone (Zoe): +36 30 000 0000
phone (Alex): +36 30 000 0000
email: zoeandalex@awesomemail.com

Footer

paragraph: Made with ♥ in Budapest ©2018 | Icons by Becris (CC 3.0

BY)
link to artist: http://www.flaticon.com/authors/becris
link to license: https://creativecommons.org/licenses/by/3.0/

Egyéb tartalmak / információk

Képek:

background pattern:
https://orange.codeberryschool.com/content/images/project-assets/wed
ding-landing-background.png
cover photo:
https://orange.codeberryschool.com/content/images/project-assets/wed
ding-landing-cover.jpg
ceremony location:
https://orange.codeberryschool.com/content/images/project-assets/wed
ding-landing-ceremony.png
photoshoot location:
https://orange.codeberryschool.com/content/images/project-assets/wed
ding-landing-photoshoot.png
party location:
https://orange.codeberryschool.com/content/images/project-assets/wed
ding-landing-party.png
gifts: https://orange.codeberryschool.com/content/images/project-
assets/wedding-landing-gifts.png
favicon: https://orange.codeberryschool.com/content/images/project-
assets/wedding-landing-favicon.png

Betűtípusok (a Google Fonts oldalról):

Great Vibes
Libre Baskerville
Muli

Színek:

default text color: #444349 (grey)

alternate text color: #d2ba87 (gold)
header tagline and date color: hsla(0,0%,100%,.9);
dark background: hsla(100,0%,0%,.6);
link color: #bd806e
link color on hover: #eda087
footer background color: #606060

1.4. Design és demó

Itt találod a kész designokat a mobil- és asztali verziókhoz:

 Mobilverzió
 Asztali verzió

Itt pedig egy élő demót. Ezt felhasználhatod az egyes elemek visszafejtésére.
(Vizsgálat opció a Chrome fejlesztői eszközök között.)
Most már rendelkezel minden szükséges forrással, nekiállhatsz elkészíteni az
oldalt. Sok sikert!

2.1. Drótváz és HTML-váz

Minden projekt első lépése a drótváz és a HTML-váz, de ezt már biztos tudod.
Bár ezúttal kaptál egy előre elkészített modellt (mock-up), ez nem jelenti azt,
hogy egy kis rajzolás ne válna előnyödre. Próbáld meg előbb megtervezni
papíron a HTML-vázat, mielőtt nekiállnál megépíteni.

Feladat(ok)

1. Rajzold meg a mobil- és asztali verziók drótvázát (wireframe) a kész

modellek (mock-up) alapján.
2. Tervezd meg és készítsd el a HTML-vázat.

Megjegyzés: Kérlek, mielőtt elolvasnád a példamegoldást és a jegyzeteket,

próbáld meg önállóan megoldani a feladatot.

Példamegoldás

Egy lehetséges HTML-váz:

<!DOCTYPE html>
<html>
<head>
<title>Zoe & Alex</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-
scale=1">
</head>
<body>
<header class="cover">
<div class="hero-text-wrapper">
<div class="hero-text">
<div class="tagline">We're getting married!</div>
<h1>Zoe &amp; Alex</h1>
<span class="date">August 1, 2018</span>
</div>
</div>
</header>
<main>
<section class="locations">
<h2>Locations</h2>
<div class="blurb">
<h3>Ceremony</h3>
<img
src="https://orange.codeberryschool.com/content/images/project-
assets/wedding-landing-ceremony.png" alt="Ceremony">
<div>St. Nicholas Church</div>
<div>2 Trinity Square, Budapest</div>
</div>
<div class="blurb">
<h3>Photos</h3>
<img
src="https://orange.codeberryschool.com/content/images/project-
assets/wedding-landing-photoshoot.png" alt="Photoshoot">
<div>Liberty Bastion</div>
 <div>23 Wisdom Road, Budapest</div>
</div>
<div class="blurb">
<h3>Party</h3>
<img
src="https://orange.codeberryschool.com/content/images/project-
assets/wedding-landing-party.png" alt="Party">
<div>Heaven Lounge</div>
<div>14 Fairy Street, Budapest</div>
</div>
</section>
<section class="program">
<h2>Program</h2>
<div class="program-wrapper">
<p>"It's going to be somehow, that's for sure."</p>
<ul>
<li>13:45 – Wedding ceremony</li>
<li>14:30 – Photos</li>
<li>16:00 – Cocktails</li>
<li>18:00 – Dinner</li>
<li>22:00 – Cake</li>
<li>... - 4:00 – Dance until dawn</li>
</ul>
</div>
</section>
<section class="gifts">
<h2>Gifts</h2>
<p>The greatest gift for us is to have you there.</p>
<img
src="https://orange.codeberryschool.com/content/images/project-
assets/wedding-landing-gifts.png" alt="Gifts">
<p>Please, just bring yourself and have fun with us.</p>
</section>
<section class="faq">
<h2>Questions & Answers</h2>
 <div class="question-group">
<h3>Travel and accomodations</h3>
<p class="question">Will there be some kind of organized
transfer?</p>
<p class="answer">No, we'll just meet at the church at
13:15.</p>
<p class="question">Where can I park?</p>
<p class="answer">Parking is free on the weekends in the 1st
district. The locations are close to each other so you won't need
your car.</p>
<p class="question">How can I get home at night?</p>
<p class="answer">The 916 bus is in service all night at the
castle and it hits every major traffic hub in the city.</p>
</div>
<div class="question-group">
<h3>Food and festivities</h3>
<p class="question">I'd like to do some kind of surprise for
you guys at the party. To whom should I talk about this?</p>
<p class="answer">Discuss it with Abigail Smith. Just drop
her an email at <a
href="mailto:abigail@awesomemail.com">abigail@awesomemail.com</a>.</
p>
<p class="question">What should I wear? Do you have a dress
code?</p>
<p class="answer">Wear what's comfortable to you. If it
helps <a href="#" target="_blank">smart casual</a> / <a href="#"
target="_blank">business casual</a> for the ladies and <a href="#"
target="_blank">smart casual</a> / <a href="#"
target="_blank">informal</a> for the gentlemen are perfect
options.</p>
<p class="question">I would like some kind of special food
(gluten-free, lactose-free, vegan etc.)</p>
<p class="answer">Drop us a line <a
href="mailto:zoeandalex@awesomemail.com">here</a> and we'll find a
way.</p>
</div>
<div class="question-group">
<h3>Other small stuff</h3>
 <p class="question">I have a problem / question on the
wedding day. With whom can I speak?</p>
<p class="answer">Jared Wright on this number: <a href="tel:
+36300000000">+36 30 000 0000</a>.</p>
<p class="question">Can we bring kids?</p>
<p class="answer">Sure! We planned a whole toy / sweets
corner for them.</p>
<p class="question">How do you feel about dogs? Can I bring
mine?</p>
<p class="answer">We love dogs and you can absolutely bring
yours. The Heaven Lounge is a dog-friendly place.</p>
</div>
</section>
<section class="contact">
<h2>Contact</h2>
<p>If you have any questions feel free to call / write us.</p>
<p>Phone: <a href="tel:+36300000000">+36 30 000 0000</a> (Zoe)
/ <a href="tel:+36300000000">+36 30 000 0000</a> (Alex)</p>
<p>Email: <a
href="mailto:zoeandalex@awesomemail.com">zoeandalex@awesomemail.com<
/a></p>
</section>
</main>
<footer>
<div class="footer-wrapper">
<p><small>Made with heart in Budapest ©2018 | Icons by <a
href="http://www.flaticon.com/authors/becris"
title="Becris">Becris</a> (<a
href="http://creativecommons.org/licenses/by/3.0/" title="Creative
Commons BY 3.0" target="_blank">CC 3.0 BY</a>)</small></p>
</div>
</footer>
</body>
</html>

Megjegyzések
  A dupla konténer divek (wrappers) a fejlécben akkor lesz hasznos, amikor
egyszerre próbálod középre rendezni a tartalmat és rakni mögé egy
sötétebb, átlátszó hátteret (overlay).
 A .blurb div-ekkel tudod majd létrehozni az asztali verzió három oszlopos
elrendezését. Ugyanez a funkciója a .question-group classoknak.
 A wrapper (konténer) a Program szekcióban a középre igazításhoz kell
majd az asztali verzióban.
 Figyeld meg, hogy végig szemantikus tageket használtunk és a classok
elnevezése nem a megjelenésre, hanem a szerepükre utal.
 Pár href attribútumban találkozhatsz a még ismeretlen tel: kiegészítéssel.
Ez hasonlóan működik, mint a mailto:. Ha a felhasználó rákattint /
megérinti, a böngésző megpróbálja tárcsázni az adott számot. Mobilokon
kifejezetten hasznos.

Feladat:
Nyiss egy új bint, és építsd meg az oldal HTML-vázát. Ha kész vagy, másold a
JSBin URL-ed a dobozba:

A megoldásod:

https://codepen.io/SziRom/pen/WNzGwxx

2.2. Add hozzá az általános stílusokat

Jelenleg van egy nyers HTML-dokumentumod. Hogy valódi weboldal legyen
belőle, először nullázd le a böngésző alapértelmezett stíluslapját, majd adj meg
pár általános formázást.

Feladat(ok)

1. Linkeld be az Eric Meyer féle CSS resetet a link szekciódba.

2. Válts border-box modellre.
3. Adj vertikális ritmust az oldaladnak egy egyirányú margin deklarációval.
4. Definiáld a gyakori box model tulajdonságokat (padding, margin) a
nagyobb konténereiden (a section elemeken).
5. Állítsd be az oldal hátterét.
6. Linkeld be a külső betűkészleteket és add meg az alapvető tipográfiai
stílusokat.
7. Formázd meg a linkeket.

Megjegyzés: Kérlek, mielőtt elolvasnád a példamegoldást és a jegyzeteket,

próbáld meg önállóan megoldani a feladatot.
Példamegoldás

Mi ezt a CSS-t adtuk az oldalhoz:

/* =============================

GENERAL STYLES

=============================*/

* {
box-sizing: border-box;
}

/* Single-direction margin declaration to establish vertical rhythm.

*/
h1,h2,h3,
ul,ol,
p,
img {
margin-bottom: 1.5rem;
}

body {
background:
url('https://orange.codeberryschool.com/content/images/project-
assets/wedding-landing-background.png') repeat center;
font-family: 'Libre Baskerville', serif;
font-size: 1.125rem;
line-height: 1.5;
color: #444349;
}

.locations,
.program,
.gifts,
.faq,
.contact {
width: 95%;
margin: 1.5rem auto;
padding: .5rem 1rem;
text-align: center;
}

h1,
h2 {
font-family: 'Great Vibes', cursive;
}

h2 {
font-size: 3rem;
}

h3 {
font-size: 1.5rem;
}

a {
text-decoration: none;
color: #bd806e;
}

a:hover {
color: #eda087;
transition: color .15s ease-in-out;
}

Megjegyzések
  Figyeld meg, hogy itt is rem egységeket használtunk a tipográfia
méreteihez. Így, ha a felhasználó megváltoztatja az alapértelmezett
betűméretet, az oldalunk szépen fog skálázódni.
 A section elemeket középre igazítottuk és mindegyik kapott egy 95%-os
szélességet. Ez megakadályozza, hogy a tartalom bárhol "hozzáérjen" a
képernyő széléhez.
 A háttérkép merített papír benyomását kelti, ami jól illik egy esküvői
weblap hangulatához. A szép, kurzív betűk ugyanezt a papír hatást
erősítik.

Feladat:
Alkalmazz egy CSS resetet és adj általános stílusokat az oldaladhoz. Ha kész
vagy, másold a JSBin URL-ed a dobozba:

A megoldásod:

https://codepen.io/SziRom/pen/poLNREa

2.3. Formázd meg a headert (fejléc)

Az oldal fő látványossága az egész képernyőt betöltő fejléc a
jegyespár fotójával. Ideje, hogy létrehozd ezt.

Feladat(ok)

1. Hozz létre egy teljes képernyős fejlécet (header) és add hozzá

a jegyesek fotóját.
2. Igazítsd a képernyő közepére a fejléc szövegét.
3. Készíts egy vízszintes vonalat a mottó (tagline) alá.
4. Tégy egy finom vonalat a dátum elé és mögé.
5. Adj egy finom sötét hátteret a szövegnek, hogy könnyen
olvasható legyen.

+1 tip: Ne feledd, hogy mobile-first alapon fejlesztesz! Egyelőre ne

aggódj a táblagép (tablet) és az asztali stílusokon. Koncentrálj a
mobilon való megjelenésre.
Megjegyzés: Kérlek, mielőtt elolvasnád a példamegoldást és a
jegyzeteket, próbáld meg önállóan megoldani a feladatot.

Példamegoldás

Mi így futottunk neki ennek a kihívásnak:

/* =============================

HEADER STYLES

=============================*/

.cover {
background:
url('https://orange.codeberryschool.com/content/images/p
roject-assets/wedding-landing-cover.jpg') no-repeat 70%
center/cover;
display: table;
text-align: center;
height: 100vh;
width: 100vw;
}

.hero-text-wrapper {
display: table-cell;
vertical-align: middle;
}

.hero-text {
margin: 0 auto;
 padding: .625rem;
color: hsla(0,0%,100%,.9);
background: hsla(100,0%,0%,.5);
}

.hero-text h1 {
font-size: 3.15rem;
color: #d2ba87;
margin-bottom: 0; /* To negate the effect of the
single-direction margin declaration. */
}

.tagline {
font-size: 1.25rem;
letter-spacing: .15rem;
}

.tagline::after {
display: block;
content: "";
background-color: #fff;
height: 1px;
width: 12.515625rem;
margin: .5rem auto;
}

.date {
font-size: 1.25rem;
letter-spacing: .15rem;
 vertical-align: middle;
}

.date::before,
.date::after {
display: inline-block;
content: "";
background-color: #fff;
height: 1px;
width: 1.5rem;
vertical-align: middle;
margin: 0 .5rem;
}

CSS
Copy

Megjegyzések

 A background tulajdonságban van egy új rész: 70% center/cover. Ezt

a rövidítést (shorthand) akkor használjuk, amikor egyszerre
szeretnénk megadni a háttér méretét és pozícióját. Az első
része (70% center) adja meg a kép pozícióját. Jelen esetben
ez kissé balra mozgatja a fotót az X tengelyen, hogy a
menyasszony feje ne lógjon ki a képernyőről. Ha szeretnéd
látni a hatását, töröld ki átmenetileg, és nézd meg az oldalt.
 A display: table; megoldás ismerős kell hogy legyen a gyakori
komponenseket bemutató projektünkből.
 Az aláhúzáshoz és dekoratív vonalakhoz pszeudoelemeket
(pseudo-elements) használtunk, hogy a HTML-ben tényleg
csak a tartalomhoz, struktúrához tartozó információ legyen.

2.4. Formázd meg a "Helyszínek" részt

Ideje hozzáadni pár aranyos grafikát és némi infót a helyszínekről.

Feladat(ok)

1. Készíts három piktogramos helyszínleírást.

2. Figyelj a képek méretére és a szöveg betűtípusára.
3. Minden egység után tégy egy elválasztó vonalat.

Megjegyzés: Kérlek, mielőtt elolvasnád a példamegoldást és a

jegyzeteket, próbáld meg önállóan megoldani a feladatot.

Példamegoldás

Mi így oldottuk meg ezt a részt:

/* =============================

LOCATIONS STYLES

=============================*/

.blurb img {
height: 7.5rem;
}

.blurb h3 {
font-weight: 700;
}

.blurb div {
font-family: 'Muli', sans-serif;
}
.blurb::after {
content: "";
display: block;
height: .1875rem;
width: 25vw;
margin: 1.5rem auto;
background-color: #444349;
}

CSS
Copy

Megjegyzések

 Megint csak pszeudoelemet használtunk az elválasztók

létrehozására. Mindig figyelj arra, hogy a struktúrát és a
megjelenést válaszd el egymástól.

2.5. Formázd meg a "Program" részt

Oké, következzen egy kicsit egyszerűbb rész, a "Program" szekció.

Feladat(ok)

1. Adj átlátszó hátteret a "Program" section-nek.

2. Állítsd be, hogy a képernyő teljes szélességét kitöltse.

Megjegyzés: Kérlek, mielőtt elolvasnád a példamegoldást és a

jegyzeteket, próbáld meg önállóan megoldani a feladatot.

Példamegoldás
Egy lehetséges megoldás:

/* =============================

PROGRAM STYLES

=============================*/

.program {
width: 100vw;
text-align: left;
background: hsla(100,0%,0%,.6);
color: #d2ba87;
font-family: 'Muli', sans-serif;
}

.program h2 {
font-family: 'Great Vibes', cursive;
margin-top: 1rem; /* To account for the unequal
margins compared to the previous section. */
text-align: center;
}

.program p {
font-style: italic;
}

.program ul {
letter-spacing: .025rem;
}
CSS
Copy

Megjegyzések

 A 100vw érték felülírja a 95%-os szélességet az általános

stílusokból. Így ér majd a section "faltól falig".
 Az átlátszó fekete háttér az alatta lévő háttérképpel együtt
egy kellemes, szürke papír effektust hoz létre, ami szépen
illeszkedik a készülő designunkba.

2.6. Formázd meg a "Nászajándék" részt

Rakd rendbe az ajándékcsomagokat és a nászajándékokról szóló
üzenetet.

Feladat(ok)

1. Méretezd át az ajándékcsomagokat akkorára, mint

amekkorák a helyszínpiktogramok.
2. Tüntesd el az extra bottom margin-t erről a szekcióról.

Megjegyzés: Kérlek, mielőtt elolvasnád a példamegoldást és a

jegyzeteket, próbáld meg önállóan megoldani a feladatot.

Példamegoldás

/* =============================

GIFTS STYLES

=============================*/

.gifts img {
 height: 7.5rem;
}

.gifts p:last-child { /* To even out the bottom and

top margins of this section. */
margin-bottom: 0;
}

CSS
Copy

Megjegyzések

 Miért kell csökkenteni az utolsó paragrafus margóját? Ha

még emlékszel, a vertikális ritmus meghatározásakor mind
a p, mind a section elemeknek adtunk 1.5rem-nyi alsó margót. Itt
ezek egymásra rakódtak, így valamelyiknek mennie kell,
hogy a ritmus konzisztens maradjon.

Feladat
Formázd meg a "Nászajándék" szekciót. Ha kész vagy, másold a
JSBin URL-ed a dobozba:

Beküldöm a megoldásom
2.7. Formázd meg a "Gyakori kérdések" részt
Végy egy nagy levegőt, most következik a legnagyobb
információsűrűségű rész. Ha készen állsz, ugorj neki a "Gyakori
kérdések és válaszok" résznek.

Feladat(ok)

1. Alkalmazd rá ugyanazt a sötét hátteret, mint a "Program"

szekciónál.
 2. Figyelj a betűtípusokra.
3. A kérdések legyenek félkövéren szedve.
4. Párosítsd össze a kérdéseket és válaszokat és a párosokat
viszont különítsd el.
5. Minden kérdéscsoport aljára tégy egy elválasztó vonalat.

Megjegyzés: Kérlek, mielőtt elolvasnád a példamegoldást és a

jegyzeteket, próbáld meg önállóan megoldani a feladatot.

Példamegoldás

Itt a mi verziónk:

/* =============================

FAQ STYLES

=============================*/

.faq {
background: hsla(100,0%,0%,.6);
color: #d2ba87;
width: 100vw;
text-align: center;
}

.faq h2 {
margin-top: 1rem; /* To even out top and bottom
margins. */
}
.faq p {
font-family: 'Muli', sans-serif;
text-align: left;
}

.question-group::after {
content: "";
display: block;
height: .1875rem;
width: 50vw;
margin: 1.5rem auto;
background-color: #d2ba87;
}

.question {
font-weight: 700;
margin-bottom: .5rem;
}

.answer {
margin-bottom: 1.5rem;
}

CSS
Copy

Megjegyzések

 Itt felül kell írnod a paragrafusok text-align tulajdonságát,

mivel az alapértelmezett érték a center.
 Ismét pszeudoelem hozza létre az elválasztókat.
  Itt jönnek jól a .question és .answer classaink. Az első összehúzza
az összetartozó kérdés-válasz párokat, míg a második
elválasztja őket a többi párostól.

Megjegyzés: A következő oldalon a footerrel (lábléc) fogjuk

folytatni. Ez nem tévedés, a "Kapcsolat" szekció csak az általános
stílusokat használja. :)

2.8. Formázd meg a footert (lábléc)

A mobilstílusok utolsó eleme következik: a footer (lábléc).

Feladat(ok)

1. Adj reszponzív magasságot és szélességet a footernek.

2. Igazítsd középre a tartalmát vízszintesen és függőlegesen is.
3. Állítsd át a háttérszínt erre: #606060.
4. Csökkentsd le a betűméretét és adj neki fehér színt.

Megjegyzés: Kérlek, mielőtt elolvasnád a példamegoldást és a

jegyzeteket, próbáld meg önállóan megoldani a feladatot.

Példamegoldás

/* =============================

FOOTER STYLES

=============================*/

footer {
height: 10vh;
 width: 100vw;
background-color: #606060;
color: #fff;
font-family: 'Muli', sans-serif;
display: table;
text-align: center;
font-size: .875rem;
}

.footer-wrapper {
display: table-cell;
vertical-align: middle;
padding: .5rem 1rem;
}

footer p {
margin-bottom: 0;
}

footer small {
line-height: 1.5;
}

CSS
Copy

Megjegyzések

Nincs megjegyzésünk, ez most már egy elég egyszerű kód

számodra. ;)

2.9. Utolsó simítások és media queryk

Majdnem kész az egész projektünk. Ami még hátra van: tablet és
asztali stílusok és természetesen egy favicon.

Feladat(ok)

A következők csak a nem mobilra szánt stílusokra érvényesek.

1. Alakítsd át a mottót csupa nagybetűsre (uppercase), növeld

meg a főcím méretét, a szöveg mögötti hátteret vedd
kisebbre, és vedd le a mobilspecifikus pozicionálást a
háttérképről.
2. A helyszínre vonatkozó egységeket rendezd át egy három
oszlopos layoutba és rejtsd el az elválasztókat.
3. Rendezd középre a "Program" rész tartalmát.
4. Alakítsd át a "Gyakori kérdések" részt három oszlopos
elrendezésűvé és innen is szedd ki az elválasztókat.
5. Csökkentsd le a footer méretét.
6. Bónusz: adj hozzá egy favicont.

Megjegyzés: Kérlek, mielőtt elolvasnád a példamegoldást és a

jegyzeteket, próbáld meg önállóan megoldani a feladatot.

Példamegoldás

Itt vannak a mi megoldásaink.

A fejléchez (header):

@media (min-width: 768px) {

.cover {
background:
url('https://orange.codeberryschool.com/content/images/p
roject-assets/wedding-landing-cover.jpg') no-repeat
center/cover;
 }

...

@media (min-width: 768px) {

.hero-text {
padding: 1.25rem;
border-radius: 4px;
width: 50%;
}

.hero-text h1 {
font-size: 7rem;
}

...

@media (min-width: 768px) {

.tagline {
text-transform: uppercase;
}

}
CSS
Copy
A helyszínek szekcióhoz:

@media (min-width: 768px) {

.blurb {
display: inline-block;
width: 30%;
padding: 1.5rem;
margin: .5rem;
}

.blurb::after {
display: none;
}

CSS
Copy
A "Program" részhez:

@media (min-width: 768px) {

.program-wrapper {
width: 30vw;
margin: 0 auto;
}

}
CSS
Copy
A gyakori kérdésekhez:

@media (min-width: 768px) {

.question-group {
display: inline-block;
width: 30%;
vertical-align: top;
padding: 1.5rem;
margin: .5rem;
}

.question-group::after {
display: none;
}

.question-group h3 {
text-align: left;
}

CSS
Copy
A footerhez:

@media (min-width: 768px) {

footer {
 min-height: 7vh;
}

CSS
Copy

Megjegyzések

 Mi az inline-block módszert használtuk a több oszlopos

elrendezéshez.
 Az elválasztókat egy egyszerű display: none; CSS szabállyal el
tudod rejteni.
 A vertical-align: top; szabály szépen egymáshoz igazítja a
"Gyakori kérdések" rész oszlopait.

Bónusz: egy favicon hozzáadása

Ismered azokat a pici ikonokat, amelyek megjelennek a

böngészőfülön, amikor megnyitsz egy oldalt? Ezeket egyáltalán
nem nehéz elkészíteni. Csak fogj egy kis méretű (pl. 16x16
px), .png kiterjesztésű, négyzet alakú képet, és utána add hozzá az
alábbi sorhoz, a HTML-ed head részében:

<link rel="shortcut icon" type="image/x-icon"

href="https://orange.codeberryschool.com/content/images/
project-assets/wedding-landing-favicon.png">

HTML
Copy
Tessék, kész is az első faviconod. :)

3.1. Itt a vége

Ezzel véget is ért az esküvői weboldal projektünk. Ha minden jól
ment, akkor mostanra van egy csodaszép, működő oldalad.
Gratulálunk, ezzel nagy lépést tettél a fejlesztővé válás útján!

Ha szeretnéd leellenőrizni a megoldásod és összehasonlítani a

miénkkel, ebben a GitHub-repóban megtalálod a teljes HTML- és
CSS-kódbázist.

Egy pár opcionális lépés, ha szeretnél még többet kihozni ebből a

feladatból:

 Módosítsd a tartalmat / designt, játsz az oldallal, tedd a

magadévá.
 Ha elégedett vagy a munkáddal, akkor töltsd fel egy GitHub-
repositoryba. Így a portfóliód részévé válhat.
 Ha csináltál valami különlegesen szépet, oszd meg velünk a
Slacken. Kíváncsiak vagyunk a legjobb munkádra.

No, ennyi volt ez a fejezet, reméljük, élvezted! Várunk a következő

projektben. :)