THE WEBSITES THAT I CODED


USING HTML, CSS AND JS

For More, Visit Codepen

<!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;}