For this
project I wanted to take a look at the public transportation in
Wellington as it was one of the first things that struck me as odd when I
arrived in New Zealand.
For the web page I wanted to have a layout that would be reminiscent of the busses themselves and thus went with a color palette of yellow and grays . For the layout itself I decided to frame the page with two vertical yellow lines like those found in bus walkways.
For the web page I wanted to have a layout that would be reminiscent of the busses themselves and thus went with a color palette of yellow and grays . For the layout itself I decided to frame the page with two vertical yellow lines like those found in bus walkways.
These are the pictures used for project 2:
.jpg)
.jpg)
.jpg)
The code used:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="P2.css" />
<title>Wellingtons Bus Problem</title>
</head>
<body>
<div id="container">
<div id="title">
<h1>Wellingtons Bus Problem</h1>
</div>
<div id="line1"></div>
<div id="line2"></div>
<div id="bloc1">
<div id="photo1">
<img src="Pic01.JPG">
</div>
<div id="text1">
<p>I must first start this work by saying that I am not from New Zealand and come from France. When I arrived in wellington, I was very surprised to see what kind of bus services were offered or to be more precise the lack of it.
In wellington there are buses every 30 minutes. This is hardly fitting for a city that claims to be the Capital of a country, where I come from, a city of comparable size to Wellington, we will have busses pass every 5 minutes. This avoids long waiting between buses and, as demonstrated by the picture to the left, avoids questioning when one misses a bus without knowing which one it was, instead of potentially waiting 30 minutes, the passenger would have to wait a mere 5 minutes.
</p>
</div>
</div>
<div id="bloc2">
<div id="photo2">
<img id="pic2" src="Pic02.JPG">
</div>
<div id="text2">
<p>The insides of the wellinton buses is very cramped, the pathway between seats is barely wide enough to let a person pass, moreover most buses have little to no space for people to stand or for wheelchairs.
</p>
</div>
</div>
<div id="bloc1">
<div id="photo1">
<img src="Pic03.JPG">
</div>
<div id="text1">
<p>Cramped seats also mean that people have no where to comfortably place luggage elsewhere but the seat next to them, this means a person with a bag takes two seats instead of one resulting in a loss of passenger capacity.
</p>
</div>
</div>
<div id="bloc2">
<div id="photo2">
<img src="Pic04.JPG">
</div>
<div id="text2">
<p>Moreover, most seats are too close together and prevent people from siting straight in them, instead passengers must assume an awkward sideways position, or any other contortion, in order to fit in their seats this generally means that there is not enough room for and other person to sit next to them.
Fortunately, the city has recently been replacing the older buss models by newer ones that address these issues, but the delay between buses remains a problem.
</p>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="P2.css" />
<title>Wellingtons Bus Problem</title>
</head>
<body>
<div id="container">
<div id="title">
<h1>Wellingtons Bus Problem</h1>
</div>
<div id="line1"></div>
<div id="line2"></div>
<div id="bloc1">
<div id="photo1">
<img src="Pic01.JPG">
</div>
<div id="text1">
<p>I must first start this work by saying that I am not from New Zealand and come from France. When I arrived in wellington, I was very surprised to see what kind of bus services were offered or to be more precise the lack of it.
In wellington there are buses every 30 minutes. This is hardly fitting for a city that claims to be the Capital of a country, where I come from, a city of comparable size to Wellington, we will have busses pass every 5 minutes. This avoids long waiting between buses and, as demonstrated by the picture to the left, avoids questioning when one misses a bus without knowing which one it was, instead of potentially waiting 30 minutes, the passenger would have to wait a mere 5 minutes.
</p>
</div>
</div>
<div id="bloc2">
<div id="photo2">
<img id="pic2" src="Pic02.JPG">
</div>
<div id="text2">
<p>The insides of the wellinton buses is very cramped, the pathway between seats is barely wide enough to let a person pass, moreover most buses have little to no space for people to stand or for wheelchairs.
</p>
</div>
</div>
<div id="bloc1">
<div id="photo1">
<img src="Pic03.JPG">
</div>
<div id="text1">
<p>Cramped seats also mean that people have no where to comfortably place luggage elsewhere but the seat next to them, this means a person with a bag takes two seats instead of one resulting in a loss of passenger capacity.
</p>
</div>
</div>
<div id="bloc2">
<div id="photo2">
<img src="Pic04.JPG">
</div>
<div id="text2">
<p>Moreover, most seats are too close together and prevent people from siting straight in them, instead passengers must assume an awkward sideways position, or any other contortion, in order to fit in their seats this generally means that there is not enough room for and other person to sit next to them.
Fortunately, the city has recently been replacing the older buss models by newer ones that address these issues, but the delay between buses remains a problem.
</p>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-image:url('bus pattern.jpg');
background-color:#cccccc;
}
#container{
width:1280px;
height:2000px;
border:0px;
}
#line1 {
height:100%;
width:20px;
float:left;
margin-left:15px;
background:#ffe800;
border:0px;
}
#line2 {
height:100%;
width:20px;
float:right;
margin-right:15px;
background:#ffe800;
border:0px;
}
#bloc1 {
height:480px;
margin-top:20px;
margin-bottom:20px;
margin-left:10px;
margin-right:10px;
width:1190px;
border:0px;
}
#photo1 {
height:480px;
margin-left:10px;
width:800px;
float:left;
background:#000000;
border:0px;
}
#text1 {
height:480px;
width:290px;
float:right;
background:#33302e;
border:0px;
margin-right:10px;
}
#bloc2 {
height:480px;
margin-top:20px;
margin-bottom:20px;
margin-left:10px;
margin-right:10px;
width:1190px;
border:0px;
}
#photo2 {
height:480px;
margin-right:10px;
width:800px;
float:right;
background:#000000;
border:0px;
}
#text2 {
height:480px;
width:290px;
float:left;
background:#33302e;
border:0px;
margin-left:10px;
}
#title {
background-color:#cccccc;
}
div {
height:75px;
width:80%;
border:2px solid black;
margin: auto;
}
h1 {
text-align:center;
background-color:#cccccc;
}
p {
margin-left:5px;
margin-right:5px;
color:white;
}
img{
height:480px;
width:800px;
}
background-image:url('bus pattern.jpg');
background-color:#cccccc;
}
#container{
width:1280px;
height:2000px;
border:0px;
}
#line1 {
height:100%;
width:20px;
float:left;
margin-left:15px;
background:#ffe800;
border:0px;
}
#line2 {
height:100%;
width:20px;
float:right;
margin-right:15px;
background:#ffe800;
border:0px;
}
#bloc1 {
height:480px;
margin-top:20px;
margin-bottom:20px;
margin-left:10px;
margin-right:10px;
width:1190px;
border:0px;
}
#photo1 {
height:480px;
margin-left:10px;
width:800px;
float:left;
background:#000000;
border:0px;
}
#text1 {
height:480px;
width:290px;
float:right;
background:#33302e;
border:0px;
margin-right:10px;
}
#bloc2 {
height:480px;
margin-top:20px;
margin-bottom:20px;
margin-left:10px;
margin-right:10px;
width:1190px;
border:0px;
}
#photo2 {
height:480px;
margin-right:10px;
width:800px;
float:right;
background:#000000;
border:0px;
}
#text2 {
height:480px;
width:290px;
float:left;
background:#33302e;
border:0px;
margin-left:10px;
}
#title {
background-color:#cccccc;
}
div {
height:75px;
width:80%;
border:2px solid black;
margin: auto;
}
h1 {
text-align:center;
background-color:#cccccc;
}
p {
margin-left:5px;
margin-right:5px;
color:white;
}
img{
height:480px;
width:800px;
}
Aucun commentaire:
Enregistrer un commentaire