BWT assignment 1

by Justin Harker

HTML

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

  <head>
    <meta charset="UTF-8" /meta>
    <title> bloggingoverborders/home </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="travel, asia, recommendations, blogging">
    <meta name="author" content="Justin Harker">
    <meta http-equiv="refresh" content="200">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="javascript.js">


    </script>
  </head>


  <body>
    <div id="wrapper">
      <div class="header">
        <a href="http://www.bloggingoverborders.com/"></a>
        <h1> Blogging Over Borders </h1>
        <p>By Derek Lichtensteiger</p>
      </div>

      <div class="top-nav">
        <ul>
          <li> <a href="contact.html" target="_blank"> Contact</a> </li>
          <li> <a href="home.html" target="_blank">Home</a> </li>
          <li> <a href="image_gallery.html" target="_blank">Image Gallery<a/ </li>
	
	  <div class="dropdown">
		<button class="dropbtn">Recent Articles</button>
		<div class="dropdown-content">
		<a href="#">Sapa, Vietnam</a>
            <a href="#">Hanoi, Vietnam</a>
      </div>
      </ul>
      <div id="login-navigation">
        <label>Administrator</label><a href="login.html" target="_blank"> <button type="submit">Login</button></a>
      </div>
    </div>




    <aside>
      <img class="aside-image" src="./bloggingoverborders/Content/Themes/Img/2017/profile.jpg" alt="picture of Derek" />
      <button id="aside-expand-button" onclick="myFunction()">About Me</button>
      <script>
        function myFunction() {
          var x = document.getElementById("right-aside-content");
          if (x.style.display === "none") {
            x.style.display = "block";
          } else {
            x.style.display = "none";
          }
        }

      </script>
      <div id="right-aside-content">
        <p>I was born in...

CSS

/*reset style sheet - from Foundation Website Creation with HTML5, CSS3, and Javascript textbook*/

html, body, div, span, object, iframe, 
h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, abbr, address, cite, code, 
del, dfn, em, img, ins, ins, kbd, q, samp, small, strong, 
sub, var, b, i, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, 
thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, 
menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
  line-height: 1;
}

/* tell the browser to display the below elements as blocks, rather than inline elements */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/*clear out the styling on lists i.e. remove bullets and numbers */

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after,
  {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

/*standardise the display of tables and table borders*/

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

/*end of reset style sheet*/

/*Include padding and border in the element's total width and height: */

* {
  box-sizing: border-box;
}

/*set up a Global wrapper with a width of 80%*/

#wrapper {
  width: 80%;
 ...