Homepage travel blog

by Justin Harker

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" /meta>
    <title> BloggingOverBorders </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  </head>

  <header>
    <a href="http://www.bloggingoverborders.com/">
      <h1> Blogging Over Borders </h1>
      <p> By Justin Harker. </p>
    </a>

    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="image_gallery.html">Image Gallery</a></li>
      </ul>

    </nav>
  </header>

  <body>
  
  <div id="upleft"></div>
<div id="upright"></div>
<div id="below"></div>​
    <aside>
      <p>
      </p>
      <a href="https://au.linkedin.com/in/justin-harker-1117a768"> <img   src="https://pbs.twimg.com/profile_images/1803157230/untitled_400x400.png" width="200" alt="picture of justin"/> </a>
      <h2>About me</h2>
      <p> Hello visitor and welcome to my blog! Just a few words to describe myself, I work at Curtin University as a front end database administrator, I am 35 years old and grew up in Geraldton then moved to Perth for work and study. My interests include
        website design and implementation, photography and watching basketball (my favourite team is the Cleveland Cavaliers). Some of my previous adventures include travelling to Kuala Lumpur in Malaysia, Chang Mai in Thailand, and an amazing one month
        trip throughout the USA.
      </p>
    </aside>
    <section>
      <blockquote>
        <p>“A journey is best measured in friends, rather than miles.”</p>
        <p><cite>Tim Cahill</cite>
        </p>
      </blockquote>

      <article class="feature" Id="feature-1">
      ...

CSS

/*<link rel="stylesheet" href="style.css" /> 
  <script src="javascript.js"> </script>*/
header {
  display: block;
  text-align: center;
  
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */

nav li a:hover {
  background-color: #111;
}


#upleft { width:100px; height: 500px; background:red; float:left; }
#upright { width:300px; height:200px; background:blue; float:left }
#below { height:300px; width:100%; background:green; clear:both }

section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}

#feature-1 {
  background-color: lightblue;
}

#feature-2 {
  background-color: lightgreen;
}

footer {
  clear: both;
  float: center;
  text-align: center;
}