Kakku Express -verkkokaupan etusivu

- Etsi sopivia tuotekuvia Pixabaystä tai käytä alla olevia.
- Vedä kuva työpöydälle, niin saat sen täysikokoisena.
HTML
- Tee kansioon d17, index.html ja linkitä style.css
- Teee sivuphja ja lisää favicon

- Kirjoita myös title Kakku Express
- Tee bodyn sisälle header-tagi
- Headerin sisälle tulle ensimmäisenä a tagi jossa on Heroiconsista otettu svg logo ja b tagi jossa lukee sivuston nimi Kakku Express
- a tagin jälkeen tulee div joka käärii sisälleen hakukentän (input) ja suurennuslasin a-tagi jossa on Heroiconsista otettu svg logo
- a-tagin jälkeen details id="menu", jonka sisällä tyhjä summary-tagi
- summaryn jälkeen nav jossa on a tageja, joissa lukee linkkitekstit esim.
- Tuotteet, Vastuullisuus, Rekrytointi ja Yhteystiedot
- header-tagi päättyy tähän
- lisää headerin jälkeen div id="container" jonka tarkoitus on rajoittaa sisältöalueen leveys
- containerin sisälle tulee pääotsikko 'Kakut arkeen ja juhlaan'
- Otsikon jälkeen class="cake-galley" joka sisältää 3 tai useamman kakkukategorian
- A: Käytä useaa kuvaa ja Slideshow Hover Thumbnail
- B: Käytä yhtä kuvaa ja figure/figcaption paria tuotekategorioissa
CSS
- Valitse GoogleFontsista otsikolle sopiva fontti ja tuo se CSS:n 1. rivillä
- määrittele teemavärit :root muuttujiin body
- aseta taustaväri ja tekstin väri
- nollaa marginaalit header
- aseta yläbannerin taustaväri ja korkeus 50px
- aseta position: fixed; ja top: 0; jolloin banneri pysyy aina näkyvillä ylälaidassa
- aseta leveydeksi 100%
- aseta z-index arvo jos muut elementit tulvat bannerin päälle scrollatessa #logo
- määritä logotekstin väri
- poista alleviivaus
- lisää marginaalia vasemmalle
- lisää myös hover joka vaihtaa logon värin #search
- aseta kuvakkeen väri
- tee myös hover jossa vaihdat värin #search_field
- aseta hakukentän reunuksen väri ja tasutaväri
- pyöristä hieman kulmia
- aseta padding 0.5em
- muuta tekstin väri header svg
- pienennä kuvaketta header, header a, header div
- tee headeristä ja sen siällä olevista elementeistä flex-elementtejä
- keskitä flex elementit pystysuunnassa
- laita flex-elementit vastakkaisiin päätyihin
- lisää tyhjää tilaa 1em flex-elementtien väliin summary::before
- lisää hampurilaiskuvake (content)
- kasvata fontin kokoa summary
- tee kursorista sormi
- määritä leveys ja korkeus 50px
- tee summarystä flex-elementti
- keskitä flex-elementit pysty- ja vaakasuunnassa
- lisää myös hover, jossa vaihdat kuvakkeen värin #menu nav
- aseta position: fixed; ja right: 0; jolloin aukeava valikko pysyy oikeassa laidassa
- aseta top: 50px; jos aukeava valikko menee yläbannerin päälle
- aseta taustaväri ja tarvittaessa z-index arvo #menu nav a, #menu nav a:visited
- poista linkkien alleviivaus
- aseta linkkitekstin väri
- kasvata fonttikokoa
- lisää padding
- tee hover, joka muuttaa linkin taustaväriä
- vaihda hampurilainen raksiin kun valikko on auki
- muotoile pääotsikko siistiksi
- käytä valitsemaasi google fonttia main
- aseta ylämarginaalia vähintään yläbannerin korkeuden verran .cake-galley
- asemoi kategoriakuvat vierekkäin flexillä
- lisää tilaa flex-elementtien väliin
- salli elementtien uudelleenrivitys #container
- keskitä elementti vaakasuunnassa
- rajoita sisältöalueen maksimileveys esim. 1200px .cake-galley figure
- aseta maksimileveys ja -korkeus esim. 300 x 235 px
- nollaa marginaalit
- aseta position: relative; .cake-galley figcaption
- laita leveydeksi 100%
- aseta position: absolute; jotta kuvateksti menee kuvan päälle
- lisää bottom:0; jotta kuvateksti on alalaidassa
- lisää padding ylös ja alas
- aseta taustaväri ja tekstin väri
- keskitä teksti halutessasi
- jos teit animoidun kuvakkeen niin korjaa kuvasuhteet ja ylivuotavat elementit
- lisää media query 600px joka piilottaa logon tekstiosuuden, jolloin hakukentälle jää enemmän tilaa
- Tallenna GitHubiin
Muuta valinnaista
- Lisää JavaScript (alla), joka sulkee valikon, kun jotain linkkiä painetaan
- Tallenna ja lisää hakutoiminnon toteuttava JavaScript search.js
- tee css-class hidden, jonka tarkoitus on piilottaa muut kuin hakukriteeriä vastaavat tuotteet
- Tallenna GitHubiin