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 class="backgroundimage"></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>
    <div id="blockquote_overlay"></div>
      <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;
}
body, html {
    height: 100%;
    margin: 0;
}

.backgroundimage {
    /* The image used */
    background-image: url("https://github.com/jhazured/helllo-world/blob/adcb673307b74ad962a6bd4c3c892a827e1a5451/sunset2.png");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

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

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

#blockquote_overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 00;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

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

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

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