Professional Documents
Culture Documents
Hét Esküvői Projekt
Hét Esküvői Projekt
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:
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.
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.
+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!
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. :)
Specifikáció
Az oldal:
Header
Locations
Program
Gifts:
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.
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
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
Great Vibes
Libre Baskerville
Muli
Színek:
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!
Feladat(ok)
Példamegoldás
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
Feladat(ok)
/* =============================
GENERAL STYLES
=============================*/
* {
box-sizing: border-box;
}
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
Feladat(ok)
Példamegoldás
/* =============================
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
Feladat(ok)
Példamegoldás
/* =============================
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
Feladat(ok)
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
Feladat(ok)
Példamegoldás
/* =============================
GIFTS STYLES
=============================*/
.gifts img {
height: 7.5rem;
}
CSS
Copy
Megjegyzések
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)
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
Feladat(ok)
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
Feladat(ok)
Példamegoldás
A fejléchez (header):
.cover {
background:
url('https://orange.codeberryschool.com/content/images/p
roject-assets/wedding-landing-cover.jpg') no-repeat
center/cover;
}
...
.hero-text {
padding: 1.25rem;
border-radius: 4px;
width: 50%;
}
.hero-text h1 {
font-size: 7rem;
}
...
.tagline {
text-transform: uppercase;
}
}
CSS
Copy
A helyszínek szekcióhoz:
.blurb {
display: inline-block;
width: 30%;
padding: 1.5rem;
margin: .5rem;
}
.blurb::after {
display: none;
}
CSS
Copy
A "Program" részhez:
.program-wrapper {
width: 30vw;
margin: 0 auto;
}
}
CSS
Copy
A gyakori kérdésekhez:
.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:
footer {
min-height: 7vh;
}
CSS
Copy
Megjegyzések
HTML
Copy
Tessék, kész is az első faviconod. :)