<html>
<head>
	<meta charset="UTF-8">
	<title>Sustainable Transport in NL - Home</title>
	<link rel="stylesheet" type="text/css" href="styles/global.css">
	<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
</head>
<body>

<div class="coverUp">
<header><h1>Sustainable Transport in The Netherlands</h1></header>
</div>

<nav>
	<ul>
		<li><a class="current" href="index.html">Home</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="bikes/index.html">Bikes</a></li>
		<li><a href="trains/index.html">Trains</a></li>
		<li><a href="trams/index.html">Trams</a></li>
	</ul>
</nav>

<main>
	<iframe width="373" height="210" src="https://www.youtube.com/embed/n-AbPav5E5M?rel=0" frameborder="0" allowfullscreen></iframe>

		<p><strong>Transportation plays a critical part in our daily lives.</strong>  Thus, we must think critically and holistically about our transportation investments so that we benefit in multiple aspects of our lives.</p>
	
	<p>The Netherlands, a small country in Western Europe, has developed a robust and diverse transportation system primarily through utilizing three modes of transportation:</p>
	
		<ul>
			<li class="large">•Bicycles</li>
			<li class="large">•Trains</li>
			<li class="large">•Trams</li>
		</ul>

	<p><strong>Imagine a rush hour that produces economic and social capital, and healthier, happier citizens.</strong>  That, and more, is possible:  take a look for yourself in the video above.</p>

	<p>Can you build something similar in your home city or town?  Come explore these dynamic modes of transportation with us.</p>

	
	

</main>

</body>
</html>
/*FONTS*/
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

/*-----BODY-----*/
body {
	font-family: 'Montserrat', sans-serif;
	width: 960px;
	margin: 0px;
	background-color: #e6eedd;/*EDF3E7*/
	color: #000;
	font-size: 100%;
	/*outline: solid blue 2px;*/
}

/*-----HEADER-----*/

header {
	position: fixed;
	margin: 15px 10px 0px;
	width: 850px;
	font-size: 250%;
	text-align: right;
	padding: 20px 35px 20px;
	background: #c4d7b2;
	border-radius: 20px;
	/*outline: solid red 2px;*/
}

h1 {
	font-size: 100%;
	font-weight: normal;
	margin: 0px;
}

div.coverUp {
	width: 860px;
	height: 120px;
	background-color: #e6eedd;
	position: fixed;
	/*outline: solid white 2px;*/
}

/*-----NAV-----*/

nav {
	text-transform: uppercase;
	float: left;
	margin-top: 150px;
	width: 135px;
	text-align: left;
	margin-left: 15px;
	font-size: 125%;
	position: fixed;
	background: #c4d7b2;
	border-radius: 20px;
	padding: 5px;
	/*outline: solid red 2px;*/
	
}

nav ul {
	list-style-type: none;
	padding-left: 10px;
}

nav li {
	margin: 5px 0px;
}

ul.sub {
	list-style-type: disc;
}

li.sub {
	font-size: 60%;
}

/*---ANCHOR TAGS---*/

a:link {
	color: #58763d;
	text-decoration: none;
}

a:visited {
	color: #9DBD7F;
	text-decoration: none;
}

a:active {
	color: #000;
	
}

nav a:link {
	color: #000;
}

nav a:visited {
	color: #000;
}

a.current {
	font-weight: 700;
}

/*-----MAIN-----*/
main {
	margin-left: 200px;
	margin-right: 100px;
	padding-top: 120px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 90%;
	/*outline: solid red 2px;*/
	
}

iframe {
	border: none;
	float: right;
	margin: 20px;
}

img.float {
	float: right;
	margin: 20px;
}

figure.lightrail {
	margin: 7px;
	display: inline-block;
	width: 300px;
	/*outline: solid blue 1px;*/
}

figure.inline {
	/*outline: solid blue 1px;*/
	float: right;
}

figure figcaption {
	font-size: 80%;
	display: block;
	text-align: center;
	width: 300px;
	/*outline: solid red 2px;*/
}

li.large {
	display: inline;
	margin-right: 110px;
	font-weight: 700;
	font-size: 110%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.