Harjoitus 2 - Verkkokaupan etusivu

Olet tekemässä kuvitteellisen verkkokaupan etusivun. Tee Harjoitukset-kansioon kansio Harjoitus 2, jonne laitat kaikki tiedostot.

Etusivulla pitää olla seuraavat osat:

1. Header-osio, jossa on logo sekä mahdollisesti slogan. Yleensä tässä on myös kaupan nimi, mutta se voi olla myös alempana.
2. Navigaatiopalkki kuvitteellisille muille sivuille sivustolla (esimerkiksi Kategoriat, Yhteystiedot, Tietoa meistä, Kirjaudu sisään jne). Voi olla suoraan headerin alla tai vasemmassa reunassa tai samalla rivillä logon kanssa. Ostoskori-ikoni ja hakuikoni voivat olla joko navigaatiopalkin osana tai erikseen oikeassa ylänurkassa.
3. Lyhyt esittelyteksti kaupasta (eli mitä myy ja millainen valikoima kaupalla on).
4. Neljä esimerkkituotetta, jossa on kuva tuotteesta, tuotteen nimi, hinta sekä ostamisnappi (voit näyttää enemmänkin tietoja, mutta nuo riittävät).
5. Neljä kuvitteellista arvostelua kaupan tuotteista.
6. Footer-osio, jossa on pienikokoisempi navigaatio sekä copyright.

Kehitä kaupalle nimi ja tarvittavat tekstit. Valmistele kuvat eli logo sekä tuotekuvat ja mahdolliset muut kuvakkeet (arvostelun tekijöillä voi olla omat avatarkuvat). Mieti sitten muu ulkoasu eli värimaailmat, fontit jne. Tee ensin html valmiiksi ja lähde tekemään css ylhäältä alaspäin, ensin isot asettelut ja lopuksi pienet yksityiskohdat.

Lisätehtävä

Luo myös yhdelle tuotteelle oma sivu. Käy ensin katsomassa muutamasta verkkokaupasta esimerkkejä tuotesivuista ja laadi sitten omasi. Huomioi, että yleensä sivun header-osio on sama kuin etusivulla eli siellä on sama navigaatio ja värimaailma.