sarwech · Wolfjawan · Oct 8, 2017
diff --git a/Transport-in-London/README.md b/Transport-in-London/README.md
@@ -0,0 +1,2 @@
+# Transport-in-London
+Transport in London
diff --git a/Transport-in-London/images/Theatre-tickets.jpg b/Transport-in-London/images/Theatre-tickets.jpg
diff --git a/Transport-in-London/images/Thumbs.db b/Transport-in-London/images/Thumbs.db
diff --git a/Transport-in-London/images/accessible-public-transport.jpg b/Transport-in-London/images/accessible-public-transport.jpg
diff --git a/Transport-in-London/images/buses.jpg b/Transport-in-London/images/buses.jpg
diff --git a/Transport-in-London/images/docklands-light-railway.jpg b/Transport-in-London/images/docklands-light-railway.jpg
diff --git a/Transport-in-London/images/emirates-air.jpg b/Transport-in-London/images/emirates-air.jpg
diff --git a/Transport-in-London/images/l-cycle-hire-scheme.jpg b/Transport-in-London/images/l-cycle-hire-scheme.jpg
diff --git a/Transport-in-London/images/local-trains.jpg b/Transport-in-London/images/local-trains.jpg
diff --git a/Transport-in-London/images/london-pass.jpg b/Transport-in-London/images/london-pass.jpg
diff --git a/Transport-in-London/images/london-trams.jpg b/Transport-in-London/images/london-trams.jpg
diff --git a/Transport-in-London/images/oyster-cards.jpg b/Transport-in-London/images/oyster-cards.jpg
diff --git a/Transport-in-London/images/river-bus-services.jpg b/Transport-in-London/images/river-bus-services.jpg
diff --git a/Transport-in-London/images/taxi.jpg b/Transport-in-London/images/taxi.jpg
diff --git a/Transport-in-London/images/underground.jpg b/Transport-in-London/images/underground.jpg
diff --git a/Transport-in-London/index.html b/Transport-in-London/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>London transport</title>
+	<meta charset="utf-8">
+	<link href="//fonts.googleapis.com" rel="dns-prefetch">
+	<link href="//maxcdn.bootstrapcdn.com" rel="dns-prefetch">
+	<link href="//code.jquery.com" rel="dns-prefetch">
+	<link href="//cdnjs.cloudflare.com" rel="dns-prefetch">
+	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
+	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
+	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+	<link href="styles/style.css" rel="stylesheet">
+</head>
+<body>
+	<div class="container">
+		<header>
+			<div class="row">
+				<nav>
+					<a class="s-menu" href="#">
+					<div class="menu-lines"></div>
+					<div class="menu-lines"></div>
+					<div class="menu-lines"></div></a>
+					<ul class="navigation">
+						<li class="list">
+							<a class="h-menu" href="#"><i class="fa fa-home"></i></a>
+						</li>
+						<li class="list">
+							<a class="h-menu" href="#">About us</a>
+						</li>
+						<li class="list">
+							<a class="h-menu" href="#">Contact us</a>
+						</li>
+						<li class="list">
+							<a class="h-menu" href="#">FAQ</a>
+						</li>
+					</ul>
+				</nav>
+			</div>
+		</header>
+		<div class="f-section">
+			<h1>Transport in London</h1>
+			<p>London has one of the largest urban transport networks in the world, with integrated bus, river and road systems spanning the city's 32 boroughs. Click the traveller information below to find out more about all the ways in which you can travel around London.</p>
+			<div>
+				<img alt="" class="images" src="images/buses.jpg">
+				<h4>London buses</h4>
+				<p>London's iconic double-decker buses are a quick, convenient and cheap way to travel around the city, with plenty of sightseeing opportunities along the way. Read more at</p>
+			</div>
+		</div>
+		<section>
+			<div class="flex-item">
+				<img alt="" class="images" src="images/underground.jpg">
+				<h4>London Underground</h4>
+				<p>The London Underground rail network, or "the Tube" is a great way to travel to and from central London and will be an integral part of most people's stay in the UK capital.</p>
+			</div>
+			<div class="flex-item">
+				<img alt="" class="images" src="images/docklands-light-railway.jpg">
+				<h4>Docklands Light Railway</h4>
+				<p>London's innovative, driverless Docklands Light Railway (DLR) serves parts of East and South East London.</p>
+			</div>
+			<div class="flex-item">
+				<img alt="" class="images" src="images/river-bus-services.jpg">
+				<h4>River bus services</h4>
+				<p>Travelling by river is a great way to get around London. You'll beat the traffic and enjoy fantastic views of London along the way.</p>
+			</div>
+			<div class="flex-item">
+				<img alt="" class="images" src="images/local-trains.jpg">
+				<h4>Local trains</h4>
+				<p>Use London's Overground train network to travel across the city and beyond the Tube.</p>
+			</div>
+			<div class="flex-item">
+				<img alt="" class="images" src="images/london-trams.jpg">
+				<h4>London trams</h4>
+				<p>Trams run in parts of South London between Wimbledon, Croydon, Beckenham and New Addington. The services are frequent and accessible.</p>
+			</div>
+			<div class="flex-item">
+				<img alt="" class="images" src="images/accessible-public-transport.jpg">
+				<h4>Accessible public transport</h4>
+				<p>Find your way around the capital with our helpful guide to accessible and wheelchair-friendly travel.</p>
+			</div>
+			<div class="flex-item">
+				<img alt="" class="images" src="images/l-cycle-hire-scheme.jpg">
+				<h4>London cycle hire scheme</h4>
+				<p>London's public bicycle scheme is a great way to travel around the city - and the first half an hour is free! Grab yourself a bike and get riding today.</p>
+			</div>
+			<div class="flex-item">
+				<img alt="" class="images" src="images/taxi.jpg">
+				<h4>Taxi</h4>
+				<p>From iconic London black cabs to local minicabs, we've got all the traveller information you need to help you travel around London by taxi.</p>
+			</div>
+			<div class="flex-item">
+				<img alt="" class="images" src="images/emirates-air.jpg">
+				<h4>Emirates Air Line Cable Car</h4>
+				<p>Take a ride on London's cable car, for views over Greenwich and East London, including The O2, Cutty Sark and Queen Elizabeth Olympic Park.</p>
+			</div>
+		</section>
+		<aside>
+			<h2>Tickets, hotels and offers</h2>
+			<div class="aside-flex">
+				<div class="aside-item">
+					<img alt="" class="images" src="images/Theatre-tickets.jpg">
+					<h4>Theatre tickets</h4>
+				</div>
+				<div class="aside-item">
+					<img alt="" class="images" src="images/oyster-cards.jpg">
+					<h4>Oyster cards</h4>
+				</div>
+				<div class="aside-item">
+					<img alt="" class="images" src="images/london-pass.jpg">
+					<h4>London Pass</h4>
+				</div>
+			</div>
+		</aside>
+		<footer>
+			<div class="share-btn">
+				<a class="fa fa-facebook" href="#" target="_blank"></a> <a class="fa fa-google" href="#"></a> <a class="fa fa-instagram" href="#" target="_blank"></a> <a class="fa fa-skype" href="#"></a> <a class="fa fa-yahoo" href="#" target="_blank"></a>
+			</div>
+		</footer>
+	</div>
+</body>
+</html>
diff --git a/Transport-in-London/styles/style.css b/Transport-in-London/styles/style.css
@@ -0,0 +1,146 @@
+body {
+	background-color: #C0C0C0;
+}
+.h-menu {
+	color: #000000;
+	text-decoration: none;
+	font-size: 20px;
+	padding-right: 20px;
+}
+.h-menu:hover {
+	color: #0fff;
+	background-color: #000;
+	padding: 8px 10px;
+	border-radius: 10px;
+}
+.list {
+	display: inline-block;
+}
+.s-menu {
+	display: hidden;
+	width: 50px;
+	height: 50px;
+	padding-top: 10px;
+	padding-left: 10px;
+}
+a:hover.s-menu {
+	background-color: #444;
+	border-radius: 4px;
+}
+.f-section {
+	width: 100%;
+}
+section {
+	width: 70%;
+	float: left;
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: flex-start;
+}
+.flex-item {
+	width: 30%;
+	margin: 5px;
+	white-space: normal;
+}
+.images {
+	width: 100%;
+	border-radius: 10%;
+}
+aside {
+	width: 30%;
+	float: left;
+}
+footer {
+	width: 100%;
+	float: left;
+	padding-bottom: 20px;
+}
+.fa {
+	padding: 10px;
+	width: 30px;
+	text-align: center;
+	text-decoration: none;
+	border-radius: 30%;
+	padding-right: 40px;
+}
+.fa-facebook {
+	background: #3B5999;
+	color: white;
+}
+.fa-google {
+	background: #dd4b39;
+	color: white;
+}
+.fa-youtube {
+	background: #bb0000;
+	color: white;
+}
+.fa-instagram {
+	background: #ff00ff;
+	color: white;
+}
+.fa-skype {
+	background: #00aff0;
+	color: white;
+}
+.fa-yahoo {
+	background: #430297;
+	color: white;
+}
+@media screen and (max-width: 800px) {
+	body {
+		width: 95%;
+	}
+	.s-menu {
+		display: inline-block;
+		float: left;
+		padding-right: 60px;
+	}
+	nav .navigation, nav:active .navigation {
+		display: none;
+		position: absolute;
+		padding: 20px;
+		background: #fff;
+		border: 5px solid #444;
+		right: 20px;
+		top: 60px;
+		width: 100%;
+		border-radius: 4px 0 4px 4px;
+	}
+	nav .list {
+		text-align: center;
+		width: 100%;
+		padding: 10px;
+		margin: 0;
+	}
+	nav:hover .navigation {
+		display: block;
+	}
+	.menu-lines {
+		border-radius: 5px;
+		width: 30px;
+		height: 5px;
+		background-color: #fff;
+		margin: 5px;
+		padding-right: 20px;
+	}
+	section {
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		flex-wrap: wrap;
+	}
+	.flex-item {
+		width: 100%;
+		margin: 5px;
+		white-space: normal;
+	}
+	.images {
+		width: 100%;
+	}
+	aside {
+		width: 100%;
+		float: left;
+		padding: 6px;
+	}
+}