Web-Sovelluksen Käyttöliittymä mobiiliin

Toteuta puhelinsovellusta muistuttava nettisivu

• Sivuston aiheen ja linkit voit valita itse
• Kaikki html koodi on yhdessä index.html tiedostossa ja tyylit style.css
• Vain yksi pääsisältöelementti on kerrallaan näkyvissä (photos, videos tai stories)
• Alavalikosta vaihdetaan näkyvissä olevaa elementtiä, mutta käyttäjä pysyy silti sivulla index.html
• Toteutus on siis single-page-application (SPA)
• Käynnistä Live Server ja tarkastele sivua responsiivisessa kehittäjätilassa
• Firefox: Hiiren oik. > Inspect > Resposive Design Mode (puhelinkuvake)
• Chrome: Hiiren oik. > Tarkista > Toggle device toolbar (puhelinkuvake)

HTML

• Lisää fav-icon headiin ja muut elementit bodyyn
• Lisää navigaatio (nav) jossa on lista (ul) jossa on listakohtia (li)
• Listakohtia on 3 ja niiden sisällä on linkki (a) jonka sisällä on svg-kuva ja linkkiteksti
• Käytä esim. Heroicons sivua:
  Etsi sopiva kuvake. Vie hiiri kuvakkeen päälle ja klikkaa Copy SVG
  Liitä leikepöydälle saamasi koodi li-tagin sisälle linkkitekstin kanssa

• Tee main-elementti ja lisää sen sisälle 3 section-elementtiä
• Laita sectioneille yksilöivät id:t joihin viittaat navigaation a-tageissa (href)
• Kunkin sectionin sisällä on h2 jossa lukee osion nimi (photos, videos, stories)
• Muu osion sisältö on kääritty ylimääräiseen diviin

Section #photos

• Lisää otsikko h2 Photos
• Lisää kuvia ja kuvatekstejä käyttäen figure-figcaption yhdistelmää

Section #videos

• Käytä edellisen tapaan figure-figcaption yhdistelmää,
  mutta vaihda img tagin tilalle YouTube iframe upotuskoodi.
• Poista iframen width ja height parametrit

Section #stories

• Lisää article tageja joissa on h3 otsikko artikkelille
• Tekstisisältö on yhdessä tai useammassa p-tagissa
• Lisää kirjoittajan tiedot i-tagilla

CSS

• Valitse mieleisesti Google Fontti ja importtaa siitä italic, regular ja bold -leikkaukset
• Määrittele valmiiksi linkkien ja tekstien värejä :root muuttujiksi
• Lisää myös navigaation korkeus (50px) ja otsikon korkeus (50px) -muuttujat
• laita * selektorille box-sizing: border-box;

• body
• Nollaa bodyn marginaalit
• Aseta valitsemasi Google Fontti
• aseta taustaväri ja tekstin väri

• h2
• h2 toimii sivun otsikkona
• aseta sille position: fixed;
• ja leveys 100%
• asemoi otsikko ylös ja vasemmalle top: 0; left: 0;
• aseta korkeudeksi otsikon korkeus -muuttuja
• keskitä teksti ja aseta otsikon väri

• nav
• aseta alanavigaation taustaväri ja tekstin väri
• aseta korkeudeksi navigaation korkeus -muuttuja
• aseta position: fixed; ja bottom: 0;
• nyt navigaatio pysyy sivun alalaidassa ja on helpompi käyttää kännykällä
• aseta leveydeksi 100%

• nav ul
• nollaa marginaalit ja paddingit
• Lisää display:flex; justify-content: space-around;
• keskitä flex elementit myös pystysuunnassa
• piennnä fonttia tarvittaessa
• aseta korkeudeksi 100%
• nyt navigaation linkit ovat tasaisin välimatkoin alapalkissa

• nav a, nav a:visited
• aseta linkkien väri
• poista alleviivaus
• aseta display: flex; flex-direction: column;
• jolloin linkin kuvake ja teksti menevät päällekkäin

• nav svg
• aseta kuvakkeen korkeus esim. 20px
• vaihda kuvakkeen väriä stroke: rgb(0, 255, 200); tai käytä määrittelemääsi muuttujaa
• Jos kuvake ei muodostu ääriviivoista, kuten Heroiconsin kuvakkeet niin kokeile fill: rgb(0, 255, 200);
• Tee hover-pseudo ja vaihda linkkitekstin ja kuvakkeen väriä hover-tilassa

• main h2 + div
• Aseta main elementin korkeus siten, että se täyttää koko ruudun miinus ylä ja alapalkkien korkeus
• height: calc(100vh - var( --nav_height) - var(--heading_height));
• lisää ylämarginaalia otsikon korkeuden verran
• keskitä teksti vasemmalle
• aseta overflow-y: auto; jotta main elementtiä voi scrollata jos sisältö ei mahdu ruutuun
• lisää padding: 1em;

• p
• pienennä paragraph pagin ylämarginaalia

• section
• aseta display: none;
• koska vain yhden sectionin on tarkoitus olla kerrallaan näkyvissä

• #photos
• Jos ensimmäisen sectionisi id on photos, niin laita se oletuksena näkyville display: block;
• section:target
• aseta display: block; koska klikattaessa sectionin tulee ilmestyä näkyville
• section:target ~ #photos
• aseta display: none; koska muiden kuin klikatun sectionin pitää samalla piiloutua

• figure
• poista figuren marginaalit, paitsi alamarginaali
• figure img
• aseta maksimileveys 100%
• figcaption
• boldaa teksti

• h3
• säädä väliotsikon marginaaleja pienemmäksi

• i
• tasaa teksti oikealle
• lisää display: block; jolloin i tagi täyttää koko parentin leveyden ja tasaus toimii
• vaihda tekstin väri harmaaksi

• iframe
• lisää leveys 100%
• lisää aspect-ratio: 16/9; jolloin korkeus määräytyy leveyden perusteella mittasuhteet säilyttäen

PS. Tallenna GitHubiin