· Web viewCat.jpg – cplace.jpg – Gatton.jpg – Ipswich.jpg – lakes.jpg – logo.jpg – map.jpg In order Author Kate Morahan Created Date 09/12/2013 18:48:00 Last modified

Important – Copy the code below directly into notepad and save as “filename.html”. Do not edit the code. Once saved, the webpage will open automatically.

<!DOCTYPE HTML>

<html>

<head>

<title>UQ Transport Options</title>

<style>

#map {

height: 50%;

float: left;

position: relative;

}

h1 {

text-align: center;

}

#routes {

float: left;

position: relative;

margin: 15px;

padding-top: 3%;

}

#section2 {

color: Blue;

}

#section3 {

color: Red;

}

#section4 {

color: Green;

}

#section2, #section3, #section4 {

font-weight: bold;

display: none;

}

img {

border: 2px solid;

}

ul {

color: black;

}

#gatton, #ipswich {

clear:left

}

#gatmap {

float: left;

margin-top: 15px;

margin-right: 15px;

position: relative;

}

#gatroute {

padding-top: 5%;

font-weight: bold;

}

#ipsmap {

float: left;

position: relative;

margin-right: 15px;

}

#ipsroute {

padding-top: 4%;

font-weight: bold

}

#ref{

float: left;

clear: left;

}

html{

background: URL(logo.jpg);

}

</style>

<script>

function ShowItem() {

var option = document.getElementById("stops").value;

if (option == "lakes") {

document.getElementById("section2").style.display ="block";

document.getElementById("section3").style.display ="none";


console.log("lakes");

} else if (option == "CPlace") {




console.log("CPlace");

} else if (option == "citycat"){




console.log("citycat");

} else{




}

}

</script>

</head>

<body>

<h1>Transport Map</h1>

<div id="map">

<h2>St Lucia</h2>

<img src="map.jpg" alt="St Lucia Campus Map"/>

</div>

<div id="routes">

<form id="survey" action="#" method="post">

<div id="section1">

<label for="stops"><strong>Which Stop Are You Travelling From?</strong></label>

<p><select id="stops" onchange="ShowItem();">

<option value="select">Select...</option>

<option value="lakes">UQ Lakes</option>

<option value="CPlace">Chancellor's Place</option>

<option value="citycat">CityCat Terminal</option>

</select></p>

</div>

</form>

<div id="section2">

UQ Lakes:<br>

<img src="lakes.jpg" alt="UQ Lakes Bus Stop"/><br>

Routes:

<ul>

<li>29 (Stop E) - Every 5-10 mins from 6:56 AM - 7:26 PM</li>

<li>109 (Stop D) - Every 5-10 mins from 7:06 AM - 9:15 PM</li>

<li>139 (Stop B) - Every 10-15 mins from 10:03 AM - 6:21 PM</li>

<li>169 (Stop A) - Every 15-20 mins from 6:56 AM - 9:11 PM</li>


<li>209 (Stop C) - Every 10-15 mins from 10:03 AM - 9:18 PM</li>

</ul>

</div>

<div id="section3">

Chancellor's Place:<br>

<img src="cplace.jpg" alt="Chancellor's Place Bus Stop"/><br>

Routes:

<ul>

<li>428 (Stop A) - Every 15-30 mins from 7:56 AM - 10:10 PM</li>

<li>427 (Stop B) - Every 30-60 mins from 12:05 PM - 7:00 PM</li>

<li>432 (Stop B) - Every 15-45 mins from 8:30 AM - 8:44 PM</li>

<li>411 (Stop C) - Every 20-30 mins from 6:25 AM - 10:40 PM</li>

<li>414 (Stop C) - Every 60 mins from 9:00 AM - 6:00 PM</li>



<li>Intercampus Bus (Stop A) - Departs 6:30 AM, 7:45 AM, 2:30 PM, 5:00 PM</li>

</ul>

</div>

<div id="section4">

CityCat Terminal:<br>

<img src="cat.jpg" alt="CityCat Ferry Terminal"/><br>

Departures:

<ul>

<li>First ferry - 5:43 AM</li>

<li>Last ferry - 11:45 PM</li>

<li>Every 30 mins from 5:43 AM - 8:45 AM & 6:45 PM - 11:45 PM</li>

<li>Every 15 mins from 8:45 AM - 6:45 PM</li>

</ul>

</div><br>

</div>

<div id="gatton">

<div id="gatmap">

<h2>Gatton Campus</h2>

<img src="gatton.jpg" alt="Gatton Campus Bus Stop"/>

</div>

<div id="gatroute">

Route: 539 - Every 20-40 mins from 5:36 AM - 6:59 PM

</div>

</div>

<div id="ipswich">

<div id="ipsmap">

<h2>Ipswich Campus</h2>

<img src="ipswich.jpg" alt="Ipswich Campus Bus Stop"/>

</div>

<div id="ipsroute">

Route: 515 - Every 20-30 mins from 6:08 AM - 9:39 PM

</div>

</div>

<div id="ref">

All images sourced from the <a href="uq.edu.au">University of Queensland</a> website.

</div>

</body>

</html>

Save the images below as:

Cat.jpg – cplace.jpg – Gatton.jpg – Ipswich.jpg – lakes.jpg – logo.jpg – map.jpg

In order

Documents

· Web viewCat.jpg – cplace.jpg – Gatton.jpg – Ipswich.jpg – lakes.jpg – logo.jpg – map.jpg In order Author Kate Morahan Created Date 09/12/2013 18:48:00 Last modified