willshepp28/index.html

## index.html
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
  <title></title>
  <meta content="" name="description">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link charset="utf-8" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" media=
  "screen" rel="stylesheet" title="no title">
  <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Josefin+Sans|Noto+Serif" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
</head>
<body>
  <nav>
    <ul class="nav-row">
      <li class="nav-item">
        <a href="">About me</a>
      </li>
      <li class="nav-item">
        <a href=""><i aria-hidden="true" class="fa fa-facebook" id="facebook"></i></a>
      </li>
      <li class="nav-item">
        <a href="">Contact me</a>
      </li>
    </ul>
  </nav>
  <header class="page-header">
    <section class="header-content">
      <h1 class="main-heading">i Beer</h1>
      <h3 class="sub-heading">Write Thirsty My Friend</h3>
    </section>
  </header>
  <main>


    <div class="blog-row">
      <div class="item">
        <div class="icon-wrapper">
          <i aria-hidden="true" class="fa fa-flask"></i>
        </div>
        <div class="meta">
          <div class="date">
            <span>Date:</span> <span>5/17/2017</span>
          </div>
          <div class="category">
            <span>Category:</span> <span>science</span>
          </div>
        </div>
        <h4 class="entry-title">Freaky 'dragon' dinosaur</h4>
        <div class="blog-img" id="dino"></div>
        <p class="primary-txt">While excavating for oil in Alberta in March 2011, miner Shawn Funk spotted something
        unusual. What he found that day turned out to be one of the most stunning and important fossils unearthed in
        decades.</p>
      </div>
      <div class="item">
        <div class="icon-wrapper">
          <i aria-hidden="true" class="fa fa-newspaper-o"></i>
        </div>
        <div class="meta">
          <div class="date">
            <span>Date:</span> 4/21/2017
          </div>
          <div class="category">
            <span>Category:</span> <span>Beer</span>
          </div>
        </div>
        <h4 class="entry-title">Dos X X</h4>
        <div class="blog-img" id="xx"></div>
        <p class="primary-txt">Dos Equis is a lager that was originally brewed by the German-born Mexican brewer
        Wilhelm Hasse in 1897. The brand was named “Siglo XX” (“20th century”) to commemorate the arrival of the new
        century, and the bottles were marked with the Roman numerals “XX”, or “Dos Equis” (two Xs).</p>
        <p class="primary-txt">The main brand Dos Equis XX Special Lager is a 4.45% abv pale lager sold in green
        bottles. Dos Equis XX Ambar is a 4.7% Vienna-style amber lager sold in brown bottles, and was first exported to
        the United States in 1973.</p>
      </div>
      <div class="item">
        <div class="icon-wrapper">
          <i aria-hidden="true" class="fa fa-newspaper-o"></i>
        </div>
        <div class="meta">
          <div class="date">
            <span>Date:</span> 4/26/2017
          </div>
          <div class="category">
            <span>Category:</span> <span>Beer</span>
          </div>
        </div>
        <h4 class="entry-title">Inviting Parody</h4>
        <p class="primary-txt">Freeing a trapped bear, leading a midnight hike through the jungle, playing a rousing
        game of jai alai—it’s all in a day’s work for the Most Interesting Man in the World. The 15 second spots are
        brilliantly written with quotable quips that invite parody – “The police often question him just because they
        find him interesting;” “He once had an awkward moment, just to see how it feels;” “His blood smells like
        cologne;” “His beard alone has experienced more than a lesser man’s entire body.”</p>
        <p class="primary-txt">Sunburned and silver-haired, Goldsmith’s character dangles a bottle of Dos Equis from
        thumb and forefinger, presumably unwinding after his latest escapade. “I don’t always drink beer,” he rumbles.
        “But when I do, I prefer Dos Equis.”</p>
      </div>
      <div class="item">
        <div class="icon-wrapper">
          <i aria-hidden="true" class="fa fa-plane"></i>
        </div>
        <div class="meta">
          <div class="date">
            <span>Date:</span> <span>3/1/2017</span>
          </div>
          <div class="category">
            <span>Category:</span> <span>Travel</span>
          </div>
        </div>
        <h4 class="entry-title">A floating city of millionaires</h4>
        <div class="blog-img" id="yhact-img"></div>
        <p class="primary-txt">Stepping onto The World feels like boarding a 21st-century Titanic, such is its scale
        and grandeur. Sitting majestically in Hong Kong's Victoria Harbor, this gleaming 644 feet-long white vessel is
        the largest, and probably most exclusive, "residential yacht" on earth.</p>
      </div>
    </div>


    <aside>
      <div class="auth-pic"></div>
      <h3 class="aside-heading">Jonathan Goldsmith</h3>
      <p class="primary-txt" id="bio">Jonathan Goldsmith (born September 26, 1938) is an American actor. He began his
      career on the New York stage, then started a career in film and television. He appeared in several TV shows from
      the 1960s to the 1990s. He is best known for appearing in television commercials for Dos Equis beer, from 2006 to
      2016, as the character The Most Interesting Man in the World.</p>
      <p class="primary-txt">Jonathan has made over 350 television appearances in his career. Among them was the role
      of Marvin Palmer in the 1964 Perry Mason episode, "The Case of the Blonde Bonanza." To advance his acting career,
      Goldsmith moved to California from New York in 1966. Like many aspiring actors, he found it difficult to gain
      enough acting work to survive and wound up working various jobs, including driving a garbage truck and working in
      construction, to help make ends meet.</p>
    </aside>
  </main>
  <footer>
    <span>iBlog 2017</span>
  </footer>
</body>
</html>

## main.css


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: white;
}

html {
  background-color: black;

}

body {
  background-color: white;
  width: 80%;
  margin: 0 auto;
}

nav ,
.main-heading,
.aside-heading,
.entry-title {
  font-family: 'Josefin Sans', sans-serif;
}

nav {
  background-color: #323232;
  height: 60px;
  padding: 16px;
}

ul {
  display: flex;
  justify-content: space-around;
}

.page-header {
   background: url(../img/header-img.jpg) no-repeat;
   background-size: contain;
   height: 500px;
   color: #323232;
    padding: 130px;
        background-attachment: fixed;
}

.header-content {
    text-align: center;
}

h1.main-heading {
    font-size: 180px;

}

h3.sub-heading {
      font-size: 75px;
      font-family: 'Dancing Script', cursive;
      color: white;
      text-shadow: 2px 2px #323232;
      z-index: 2;
      position: relative;
      top: -69px;
      left: 11px;
}


/* ***** main ***** */
main {
    background: #FEF9EC;
    display: flex;
    padding: 38px;
    z-index: 5;
    margin: 0 auto;
    position: relative;
    top: -74px;
    width: 86%;
    box-shadow: 1px 1px 1px 1px #727272;
}

.blog-row {
    display: flex;
    flex-direction: column;
    width: 60%;
        margin-right: 40px;

}

.icon-wrapper {
  font-size: 25px;
      position: relative;
      padding: 5px;
      text-align: center;
      background: #EFEADF;
      border-radius: 50%;
      display: inline-block;
      height: 45px;
      width: 45px;
      left: 208px;
      color: white;

      top: 41px;


  }

.blog-img {
  width: 200px;
  height: 200px;
  float: right;
}

#dino {
  background: url(../img/dino.jpg) no-repeat;
  background-size: cover;
}

#xx {
  background: url(../img/xx.png) no-repeat;
  background-size: contain;
}

#yhact-img {
  background: url(../img/yhact.jpg) no-repeat;
  background-size: cover;
}

.blog-row:first-child {
    margin-top: 36px;
}

.item {
    background: white;
    box-shadow: 1px 1px 1px 1px #727272;
    margin-bottom: 36px;
    height: 399px;
    padding: 11px;
}

.meta {
  display: flex;
  justify-content: space-around;
  border-bottom: 2px solid #ccc;
  margin-bottom: 55px;
  text-transform: uppercase;
}

h4.entry-title {
    font-size: 23px;
}


/* ***** aside ***** */
aside {
    background-color: #EFEADF;
     box-shadow: 1px 1px 1px 1px #727272;
     height: 806px;
     margin-top: 18px;
     display: flex;
flex-direction: column;
align-items: center;
padding: 25px;
    width: 40%;
}


.auth-pic {
  background: url(../img/author.jpeg) no-repeat;
  background-size: cover;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}

h3.aside-heading {
    margin-top: 50px;
    margin-bottom: 50px;
    border-bottom: 1px solid #323232;
    font-size: 23px;
    padding: 34px;
}


/* ***** Footer ***** */
footer {

background-color: #323232;
color: white;
text-align: center;
padding: 15px;
}
	<!DOCTYPE html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
	<title></title>
	<meta content="" name="description">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<link charset="utf-8" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" media=
	"screen" rel="stylesheet" title="no title">
	<link href="https://fonts.googleapis.com/css?family=Dancing+Script\|Josefin+Sans\|Noto+Serif" rel="stylesheet">
	<link href="css/main.css" rel="stylesheet">
	</head>
	<body>
	<nav>
	<ul class="nav-row">
	<li class="nav-item">
	<a href="">About me</a>
	</li>
	<li class="nav-item">
	<a href=""><i aria-hidden="true" class="fa fa-facebook" id="facebook"></i></a>
	</li>
	<li class="nav-item">
	<a href="">Contact me</a>
	</li>
	</ul>
	</nav>
	<header class="page-header">
	<section class="header-content">
	<h1 class="main-heading">i Beer</h1>
	<h3 class="sub-heading">Write Thirsty My Friend</h3>
	</section>
	</header>
	<main>


	<div class="blog-row">
	<div class="item">
	<div class="icon-wrapper">
	<i aria-hidden="true" class="fa fa-flask"></i>
	</div>
	<div class="meta">
	<div class="date">
	<span>Date:</span> <span>5/17/2017</span>
	</div>
	<div class="category">
	<span>Category:</span> <span>science</span>
	</div>
	</div>
	<h4 class="entry-title">Freaky 'dragon' dinosaur</h4>
	<div class="blog-img" id="dino"></div>
	<p class="primary-txt">While excavating for oil in Alberta in March 2011, miner Shawn Funk spotted something
	unusual. What he found that day turned out to be one of the most stunning and important fossils unearthed in
	decades.</p>
	</div>
	<div class="item">
	<div class="icon-wrapper">
	<i aria-hidden="true" class="fa fa-newspaper-o"></i>
	</div>
	<div class="meta">
	<div class="date">
	<span>Date:</span> 4/21/2017
	</div>
	<div class="category">
	<span>Category:</span> <span>Beer</span>
	</div>
	</div>
	<h4 class="entry-title">Dos X X</h4>
	<div class="blog-img" id="xx"></div>
	<p class="primary-txt">Dos Equis is a lager that was originally brewed by the German-born Mexican brewer
	Wilhelm Hasse in 1897. The brand was named “Siglo XX” (“20th century”) to commemorate the arrival of the new
	century, and the bottles were marked with the Roman numerals “XX”, or “Dos Equis” (two Xs).</p>
	<p class="primary-txt">The main brand Dos Equis XX Special Lager is a 4.45% abv pale lager sold in green
	bottles. Dos Equis XX Ambar is a 4.7% Vienna-style amber lager sold in brown bottles, and was first exported to
	the United States in 1973.</p>
	</div>
	<div class="item">
	<div class="icon-wrapper">
	<i aria-hidden="true" class="fa fa-newspaper-o"></i>
	</div>
	<div class="meta">
	<div class="date">
	<span>Date:</span> 4/26/2017
	</div>
	<div class="category">
	<span>Category:</span> <span>Beer</span>
	</div>
	</div>
	<h4 class="entry-title">Inviting Parody</h4>
	<p class="primary-txt">Freeing a trapped bear, leading a midnight hike through the jungle, playing a rousing
	game of jai alai—it’s all in a day’s work for the Most Interesting Man in the World. The 15 second spots are
	brilliantly written with quotable quips that invite parody – “The police often question him just because they
	find him interesting;” “He once had an awkward moment, just to see how it feels;” “His blood smells like
	cologne;” “His beard alone has experienced more than a lesser man’s entire body.”</p>
	<p class="primary-txt">Sunburned and silver-haired, Goldsmith’s character dangles a bottle of Dos Equis from
	thumb and forefinger, presumably unwinding after his latest escapade. “I don’t always drink beer,” he rumbles.
	“But when I do, I prefer Dos Equis.”</p>
	</div>
	<div class="item">
	<div class="icon-wrapper">
	<i aria-hidden="true" class="fa fa-plane"></i>
	</div>
	<div class="meta">
	<div class="date">
	<span>Date:</span> <span>3/1/2017</span>
	</div>
	<div class="category">
	<span>Category:</span> <span>Travel</span>
	</div>
	</div>
	<h4 class="entry-title">A floating city of millionaires</h4>
	<div class="blog-img" id="yhact-img"></div>
	<p class="primary-txt">Stepping onto The World feels like boarding a 21st-century Titanic, such is its scale
	and grandeur. Sitting majestically in Hong Kong's Victoria Harbor, this gleaming 644 feet-long white vessel is
	the largest, and probably most exclusive, "residential yacht" on earth.</p>
	</div>
	</div>





	<aside>
	<div class="auth-pic"></div>
	<h3 class="aside-heading">Jonathan Goldsmith</h3>
	<p class="primary-txt" id="bio">Jonathan Goldsmith (born September 26, 1938) is an American actor. He began his
	career on the New York stage, then started a career in film and television. He appeared in several TV shows from
	the 1960s to the 1990s. He is best known for appearing in television commercials for Dos Equis beer, from 2006 to
	2016, as the character The Most Interesting Man in the World.</p>
	<p class="primary-txt">Jonathan has made over 350 television appearances in his career. Among them was the role
	of Marvin Palmer in the 1964 Perry Mason episode, "The Case of the Blonde Bonanza." To advance his acting career,
	Goldsmith moved to California from New York in 1966. Like many aspiring actors, he found it difficult to gain
	enough acting work to survive and wound up working various jobs, including driving a garbage truck and working in
	construction, to help make ends meet.</p>
	</aside>
	</main>
	<footer>
	<span>iBlog 2017</span>
	</footer>
	</body>
	</html>


	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	}

	li {
	list-style-type: none;
	}

	a {
	text-decoration: none;
	color: white;
	}

	html {
	background-color: black;

	}

	body {
	background-color: white;
	width: 80%;
	margin: 0 auto;
	}

	nav ,
	.main-heading,
	.aside-heading,
	.entry-title {
	font-family: 'Josefin Sans', sans-serif;
	}

	nav {
	background-color: #323232;
	height: 60px;
	padding: 16px;
	}

	ul {
	display: flex;
	justify-content: space-around;
	}

	.page-header {
	background: url(../img/header-img.jpg) no-repeat;
	background-size: contain;
	height: 500px;
	color: #323232;
	padding: 130px;
	background-attachment: fixed;
	}

	.header-content {
	text-align: center;
	}

	h1.main-heading {
	font-size: 180px;

	}

	h3.sub-heading {
	font-size: 75px;
	font-family: 'Dancing Script', cursive;
	color: white;
	text-shadow: 2px 2px #323232;
	z-index: 2;
	position: relative;
	top: -69px;
	left: 11px;
	}


	/* *** main *** */
	main {
	background: #FEF9EC;
	display: flex;
	padding: 38px;
	z-index: 5;
	margin: 0 auto;
	position: relative;
	top: -74px;
	width: 86%;
	box-shadow: 1px 1px 1px 1px #727272;
	}

	.blog-row {
	display: flex;
	flex-direction: column;
	width: 60%;
	margin-right: 40px;

	}

	.icon-wrapper {
	font-size: 25px;
	position: relative;
	padding: 5px;
	text-align: center;
	background: #EFEADF;
	border-radius: 50%;
	display: inline-block;
	height: 45px;
	width: 45px;
	left: 208px;
	color: white;

	top: 41px;


	}

	.blog-img {
	width: 200px;
	height: 200px;
	float: right;
	}

	#dino {
	background: url(../img/dino.jpg) no-repeat;
	background-size: cover;
	}

	#xx {
	background: url(../img/xx.png) no-repeat;
	background-size: contain;
	}

	#yhact-img {
	background: url(../img/yhact.jpg) no-repeat;
	background-size: cover;
	}

	.blog-row:first-child {
	margin-top: 36px;
	}

	.item {
	background: white;
	box-shadow: 1px 1px 1px 1px #727272;
	margin-bottom: 36px;
	height: 399px;
	padding: 11px;
	}

	.meta {
	display: flex;
	justify-content: space-around;
	border-bottom: 2px solid #ccc;
	margin-bottom: 55px;
	text-transform: uppercase;
	}

	h4.entry-title {
	font-size: 23px;
	}




	/* *** aside *** */
	aside {
	background-color: #EFEADF;
	box-shadow: 1px 1px 1px 1px #727272;
	height: 806px;
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 25px;
	width: 40%;
	}



	.auth-pic {
	background: url(../img/author.jpeg) no-repeat;
	background-size: cover;
	height: 200px;
	width: 200px;
	border-radius: 50%;
	}

	h3.aside-heading {
	margin-top: 50px;
	margin-bottom: 50px;
	border-bottom: 1px solid #323232;
	font-size: 23px;
	padding: 34px;
	}


	/* *** Footer *** */
	footer {

	background-color: #323232;
	color: white;
	text-align: center;
	padding: 15px;
	}