THE WEBSITES THAT I CODED


USING HTML, CSS AND JS
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Rabo Web Design</title>
	<link rel="stylesheet" type="text/css" href="rabo.css">
</head>
<body>
	<header>
		<div class="container">
			<div id="branding">
				<h1><span class="highlight">Rabo</span> Web Design</h1>
			</div>

			<nav>
				<ul>
					<li class="current"><a href="index.html">Home</a></li>
					<li><a href="about.html">About</a></li>
					<li><a href="services.html">Services</a></li>
				</ul>
			</nav>
		</div>
	</header>
	<section id="showcase">
		<div class="container">
			<h1>Affordable Web Design</h1>
			<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem ipsum</p>
		</div>

	</section>
	<section id="newsletter">
		<div class="container">
			<h1>Subscribe To Our Newsletter</h1>
			<form>
				<input type="email" placeholder="Enter Email...">
				<button type="Submit" class="button_1">Subscribe</button>
			</form>
		</div>
	</section>

	<section id="boxes">
		<div class="container">
			<div class="box">
				<img src="./trials/icon.png">
				<h3>ICON Design</h3>
				<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
			</div>
			<div class="box">
				<img src="./trials/camera.png">
				<h3>IP Camera</h3>
				<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
			</div>
			<div class="box">
				<img src="./trials/indir.jpg">
				<h3>Graphic Design</h3>
				<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
			</div>
		</div>
	</section>

	<footer>Rabo Web Design, Copyright © 2017</footer>

</body>
</html>
body{
	font: 15px/ 1.5 Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f4f4f4;
}

/* Global */

.container{
	width: 80%;
	margin: auto;
	overflow: hidden;
}
ul{
	margin: 0;
	padding: 0;
}
.button_1{
	height: 38px;
	background: #e8491d;
	border: 0;
	padding: 0 20px 0 20px;
	color: #fff;
}

/* Header **/

header{
	background: #35424a;
	color: #fff;
	padding-top: 25px;
	min-height: 70px;
	border-bottom: #e8491d 5px solid;
}

header a{
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 16px;
}
header li{
	float: left;
	display: inline;
	padding: 0 20px 0 20px;
}
header #branding{
	float: left;
}
header #branding h1{
	margin: 3px;
}
header nav{
	float: right;
	margin-top: 10px;
}
header .highlight, header .current a{
	color: #e8491d;
	font-weight: bold;
}
header a:hover{
	color: #ccc;
	font-weight: bold;
}

/* Showcase */

#showcase{
	min-height: 300px;
	text-align: center;
	color: white;
	background: url(http://oahupc.com/images/palmbg.jpeg) 
	no-repeat 0 0;
  	background-size:100%;
}
#showcase h1{
	margin-top: 100px;
	font-size: 55px;
	margin-bottom: 55px;
}
#showcase p{
	font-size: 20px;
}

/* newsletter */

#newsletter{
	padding: 15px;
	color: white;
	background: #35424a;
}
#newsletter h1{
	float: left;
}
#newsletter form{
	float: right;
	margin-top: 15px;
}
#newsletter input[type="email"]{
	padding: 4px;
	height: 25px;
	width: 250px;
}

/* Boxes */

#boxes{
	margin-top: 20px;
}
#boxes .box{
	float: left;
	text-align: center;
	width: 30%;
	padding: 10px;
}
#boxes .box img{
	width: 80px;
}
footer{
	padding: 20px;
	margin-top: 20px;
	color: #fff;
	text-align: center;
	background-color: #e8491d;
}