Harjoitus 3 Ohimaan marjatila

Toteuta orientaatiokurssilla suunniteltu Ohimaan marjatilan sivusto. Ohjeet sivuston vaatimuksista löydät Teamsista Orientaatiokanavan tiedostoista tai tästä alta.

1. Luo sitä varten Gitissä olevan kansion sisään oma kansio. Siellä pääsivun nimen kuuluu olla index.html. Muille sivuille sopii nimeksi esimerkiksi tuotteet.html, tilaus.html ja yhteystiedot.html.
2. Luo ensin tuotesivu ja tilaussivu ja muotoile ne oman suunnitelmasi mukaisesti.
3. Luo lisäksi etusivu ja yhteystietosivu, joiden ulkoasu mukailee pääsivua (suurimman osan CSS:stä voi kopioida tai käyttää kokonaan samaa CSS-tiedostoa).
4. 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.

Sivustolla on tuotesivu, 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ä.”

Tuotteet-sivu

Teksti: ”Meiltä löydät seuraavia maistuvia marjoja.”

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.”