- Koronan takia Varian Avoimet Ovet jouduttiin pitämään etänä. Sinun tehtävänäsi on tehdä verkkosivut Avoimille Oville.
- Avoimien ovien päälähetys on upotettu YouTubessa oleva livestriimi. Tämän pitää näkyä isolla verkkosivujen yläosassa. Tässä tehtävässä voit käyttää striiminä mitä tahansa YouTubesta löytyvää livestriimiä.
- Livestriimin alta löytyy kuvalinkit kaikkien alojen tarkempiin esittelyihin.
- Katso specs/-kansiossa olevia kuvia (main_video.png ja text_and_links.png) esimerkkeinä miltä sivun pitäisi näyttää.
- Verkkosivujen pitää toimia responsiivisesti tietokoneen näytöllä, tabletilla sekä kännykällä
- Kaikki linkit aukeavat uuteen välilehteen/ikkunaan
- Verkkosivujen lopussa pitää olla linkki joka vie takaisin sivun alkuun
- Verkkosivujen sisällön pitää olla keskitetty ruudun keskelle
- Faviconina käytä media/favicon.ico tiedostoa ja verkkosivun otsikkotekstit löytyy media/texts.txt-tiedostosta
- Sisältötekstin pitää olla videostriimin ja alakohtaisten linkkien välissä. Löydät tekstin media/texts.txt-tiedostosta
- Alakohtaisia linkkejä (kuva sekä teksti) on tietokoneen näytöllä maksimissaan 4 rinnakkain. Pienemmillä näytöillä kuvalinkit ovat päällekkäin.
- Katso specs/desktop.png ja specs/mobile.png - kansiosta miltä alakohtaisten kuvalinkkien pitää näyttää tietokoneella ja mobiililaitteella (tabletti + kännykkä).
- Käytä media/pics-kansiossa olevia kuvia oikeiden alojen linkkeinä ja keskitä kuvat oikein.
Värit:
- Sivujen taustaväri: #282c34
- Tekstin väri: #ffffff
Responsiivisuus (14)
- Verkkosivujen sisältö keskitetty tietokoneen näytöllä (4)
- Verkkosivut responsiiviset kännykällä ja tabletilla (10)
Sisältö ja alakohtaiset linkit (14)
- Livestriimi toimii (2)
- Sisältö tekstit oikein paikallaan (3)
- Sekä teksti ja kuva toimivat linkkinä (1)
- Kaikki linkit paikallaan ja aukeavat omaan välilehteen (4)
- Kuvalinkit muotoiltu oikein (4)
Yleiset muotoilut (10)
- Värit oikein (2)
- Favicon ja sivun molemmat otsikot paikallaan (2)
- Yleinen look & feel (6)
Muut (10)
- Takaisin sivun alkuun linkki toimii (1)
- HTML && CSS tehty selkeästi ja hyvin (9)