Tässä tehtävässä suunnittelet ja toteutat tapahtuman laskeutumissivun (landing page). Tavoitteena on harjoitella sivun suunnittelua, responsiivisuutta ja CSS
käyttöä visuaalisessa esityksessä.
Ohjeet
Tapahtuman valinta: Valitse fiktiivinen tai oikea tapahtuma, esimerkiksi:
Musiikkifestivaali
Teknologiakonferenssi
Ruokafestivaali
Urheilutapahtuma
Sivun rakenne: Laskeutumissivulla tulee olla seuraavat osat:
Tapahtuman nimi: Suuri ja näkyvä otsikko sivun yläosassa.
Tapahtuman päivämäärä ja sijainti: Helposti löydettävä paikka ja päivämäärä.
Kuva tai kuvagalleria: Käytä kuvaa/kampanjakuvia tapahtumaan liittyen. Voit hyödyntää esimerkiksi kuvapankkien kuvia tai fiktiivistä tapahtumamateriaalia.
Tietoa tapahtumasta: Lyhyt esittely tapahtumasta ja miksi siihen kannattaa osallistua.
Toimintakehotus (CTA): Selkeä painike, jossa lukee esimerkiksi “Osta liput” tai “Ilmoittaudu nyt.”
Laskuri: Tyylittele countdown-ajastin tapahtuman alkuun (voit käyttää staattisia tietoja).
Linkit sosiaaliseen mediaan: Kuvakkeet tapahtuman somekanaviin.
Vaatimukset
Käytä CSS Flexboxia tai Gridiä asettelussa.
Sivun tulee olla responsiivinen eli sen tulee näyttää hyvältä sekä tietokoneella että mobiililaitteilla.
Käytä CSS-animaatioita tai siirtymiä (esim. hover-efekti painikkeissa tai kuvien zoomaus).
Käytä värejä ja typografiaa luomaan yhtenäinen ja houkutteleva ulkoasu.