Demo 5 - Kalatori: sijainti
- Kalatori-sivuston seuraavana osana toteutetaan "sijainti"-osio
- Lisää kalatori-sivuston kansioon sijainti.html ja sijainti.css
- Linkitä sijainti.css ja common.css
<![CDATA[
html_css_basics
|
├── demos
| |
│ └── d5_kalatori
| |
│ ├── sijainti.html
│ ├── sijainti.css
│ ├── yhteys.html
│ ├── yhteys.css
│ ├── hinnasto.html
│ ├── hinnasto.css
│ ├── markkinat.html
│ ├── markkinat.css
│ ├── header.html
│ ├── header.css
│ ├── common.css
| |
│ └─── img
│ │ ├── kuva_1.jpg
│ │ └── kuva_2.jpg
|
]]>
Tehtävä
- Tee section-elmentti, joka id on "sijainti"
- Tee elementin sisälle div, jolla on class "wrapper"
- Lisää seuraavat elementit wrapper-divin sisälle:
- Lisää väliotsikko Sijainti
- Upota google kartta sivulle
- Mene Google Maps sivulle ja etsi Pirkkalankylä
- Googlen ohjeet kartan upottamiseen
- Valitse 3 viivan hampurilaisvalikosta "Jaa tai upota kartta"
- Valitse "Upota kartta" -välilehti
- Kopio HTML koodi ja liitä se väliotsikon alle
- Voit muokata karttalaatikkoa CSS:n iframe -selektorilla
- Lisää kartta elementille leveys 100%