Harjoitus 3 Ohimaan marjatila

1. Suunnittele marjatilalle sopiva verkkosivun ulkoasu AdobeXD:n avulla. Suunnittele jokaiselle kolmelle sivulle versio tietokonenäytölle ja kännykkänäytölle.
2. Luo sitä varten Gitissä olevan Harjoitukset-kansion sisään oma kansio nimeltään Harjoitus 3. Siellä pääsivun nimen kuuluu olla index.html. Muille sivuille sopii nimeksi esimerkiksi tilaus.html ja yhteystiedot.html. Lisää myös kaikille sivuille yhteinen CSS-tiedosto ja linkitä se jokaiselle sivulle. Jos sivullasi on paljon kuvia, voit tehdä niille oman kansion tähän kansioon.
3. Tee ensin etusivu ja muotoile ne oman suunnitelmasi mukaisesti.
4. Tee sitten toiset kaksi sivua (voit kopioida header-osion, navigaation ja footer-osion koodin). Laita navigaation linkit viemään sivuston toisille sivuille. Jos ne ovat samassa kansiossa, pelkkä tiedoston nimi riittää.
5. Tee sivuista responsiiviset eli että ne toimivat niin tietokoneen kuin mobiililaitteenkin näytöllä.

Lisätehtävä:

Tee Yhteystiedot-sivulle GoogleMapsilla tai vastaavalla karttasovelluksella upotus, joka näyttää marjatilan sijainnin kartalla. Tähän ei ole ohjetta eli etsi itse, miten tämän voi tehdä.

---

Ohimaan marjatila

Marjatila on vasta aloittanut toimintansa ja tarvitsisi verkkosivut.

Sivustolla on etusivu, jolle vierailija tulee ensimmäiseksi ja jolla esitellään tuotteet (mansikka, vadelma, mustaviinimarja ja punainen viinimarja)

Sivustolla on tilaussivu, jolla on tilauslomake

Sivustolla on yhteystietosivu, jolla näkyy puhelinnumero, sähköpostiosoite ja fyysinen osoite sekä ajo-ohjeet.

Jokaisella sivulla on sama header-osio, jossa on sama navigaatio, jonka kautta pääsee kaikille sivuille.

Etusivu

Teksti: ”Tervetuloa Ohimaan marjatilalle! Meiltä saa tuoreet mansikat, vadelmat ja herukat joko itse poimittuna, valmiiksi poimittuina tai jopa kotiin kuljetettuna Vihannin alueella. Sijaitsemme lähellä Vihannin kirkonkylää Ohimaanperällä.”

Kuvat mansikoista, vadelmista, mustista viinimarjoista ja punaisista viinimarjoista. Hae kuvat esimerkiksi Pixabaysta.

Tilaus-sivu

Teksti: “Voit tehdä sähköpostitilauksen alla olevan lomakkeen avulla tai soittaa numeroon 045677777.”

Lomakkeella pitää olla tilaajan nimi, tilaajan puhelinnumero, kenttä, johon voi kirjoittaa tilauksensa, haluaako noutaa tilauksen, päivämäärän, jolloin haluaa tilauksen, sekä lisätietoja-kentän. Lisäksi napit lomakkeen tyhjentämiselle sekä tilauksen lähettämiselle.

Yhteystiedot

Teksti: “Ohimaan marjatila sijaitsee Raahessa, Vihannin kirkonkylän kupeessa osoitteessa Ohimaantie 265, 86400 Vihanti. Sähköpostiosoite on ohimaanmarjatila@gmail.com ja puhelinnumero on 045677777.

Ajo-ohje: Vihannin kirkonkylältä aja tietä 86 kohti Oulua, kunnes oikealla on kyltti “Ohimaa”. Jatka tietä noin 2,5 kilometriä, kunnes tulet perille. Marjatila sijaitsee oikealla.”