Kakku Express -verkkokaupan etusivu

html_css_basics | ├── demos │ ├── ... │ └── d17 │ ├── index.html │ ├── style.css │ ├── (hover_thumb.css) │ └── img │ ├── kerros_kakku_1.jpg │ ├── kerros_kakku_2.jpg │ ├── kerros_kakku_3.jpg │ ├── perus_kakku_1.jpg │ ├── perus_kakku_2.jpg │ ├── perus_kakku_3.jpg │ ├── premium_kakku_1.jpg │ ├── premium_kakku_2.jpg │ └── premium_kakku_3.jpg |

• 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
#menu[open] > summary::before { content: '\00D7'; } h1
• 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
.animated_thumb{ overflow: hidden; } .cake-galley img, .animated_thumb{ width: 100%; height: calc(100% - 34px); object-fit: cover; transition: 0.1s all ease-in-out; }
• 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
<script> const closeMenu = () => { document.getElementById("menu").open = false; } const navItems = document.querySelectorAll('header a') navItems.forEach((i) => { i.setAttribute('onclick', 'closeMenu()') }) </script>
• Tallenna ja lisää hakutoiminnon toteuttava JavaScript search.js


• tee css-class hidden, jonka tarkoitus on piilottaa muut kuin hakukriteeriä vastaavat tuotteet
.hidden{ display: none; }
• Tallenna GitHubiin