DavidAPears/Style.CSS

## index.html
<html>
<head>
  <title>David Pears</title>
  <link href="Style.CSS" rel="stylesheet" type="text/css">

</head>
<body>
  <header>

      <div class="row">
        <div class="logo">
        <img src="logozoom1 copy.jpg">
        </div>

          <ul class="main-nav">
            <li class="active"><a href=" "> Home </a> </li>
            <li><a href="https://www.codecademy.com/DavidAPears" target=”_new”> CodeAcademy </a> </li>
            <li><a href="https://github.com/DavidAPears" target=”_new”> GitHub</a> </li>
            <li><a href="https://www.linkedin.com/in/davepears/" target=”_new”> LinkedIn </a> </li>
            <li><a href="https://twitter.com/davidapears" target=”_new”> Twitter </a> </li>
            <li><a href="https://www.instagram.com/david.pears/" target=”_new”> Instagram </a> </li>

        </ul>

        </div>

        <div class="hero">
        <h1>Hello World!</h1>

          <div class="button">
            <a href="https://www.youtube.com/watch?v=jofNR_WkoCE" target=”_new”, class="btn btn-one"> Watch Video </a>
            <a href="about.html" class="btn btn-two"> About Me </a>
          </div>
        </div>


  </header>

</body>

</html>

## Style.CSS
*
{
  margin: 2;
  padding: 2;
}

header
{
  background-image: url(laptopongrey.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

ul {
  list-style-type: center;
}

.margin
{
  float: center;
  list-style: none;
  margin-top: 30px
}

.main-nav li
{
    display: inline-block;
    list-style-type: none;
}

.main-nav li a
{
    color: MediumAquamarine;
    text-decoration: none;
    padding: 5px 20px;
    font-family: "Roboto", sans-serif;
    font-size: 20px;
}

.main-nav li.active a
{
  border: 1px solid white;
}

.main-nav li a:hover
{
  border: 1px solid MediumAquamarine;
}

.logo img
{
  width: 300px;
  height: auto;
  float: right;
}

body
{
  font-family: monospace;
}

.row
{
  max-width: 1200px;
  margin: auto;
}

.hero
{
  position: center;
  width: 1200px;
  margin-left: 0px;
  margin-top: 0px;
  font-family: "Roboto", sans-serif;
  font-size: 40px;
}

h1
{
  color: white;
  text-transform: uppercase;
  font-size: 70;
  text-align: center;
  margin-top: 275px;
}

.button
{
  margin-top: 30px;
  margin-left: 440px;
}

.btn
{
    border: 1px solid white;
    padding: 10px 30px;
    color: white;
    margin-right: 5px;
    font-size: 13px;
    text-transform: uppercase;
}

.btn-one
{
  background-color: MediumAquamarine;
  font-family: "Roborto" sans-serif;
}

.btn-two
{
  font-family: "Roborto" sans-serif;
}

.btn-two
{
  background-color: MediumAquamarine;
  transition: all 0.5s ease-in;
}

.paragraph
{
  width: 500px;
  border: 2px solid MediumAquamarine;
  padding: 2px;
  margin: 2px;
  background-color: inherit;
  align-items: center;
}
	<html>
	<head>
	<title>David Pears</title>
	<link href="Style.CSS" rel="stylesheet" type="text/css">

	</head>
	<body>
	<header>

	<div class="row">
	<div class="logo">
	<img src="logozoom1 copy.jpg">
	</div>

	<ul class="main-nav">
	<li class="active"><a href=" "> Home </a> </li>
	<li><a href="https://www.codecademy.com/DavidAPears" target=”_new”> CodeAcademy </a> </li>
	<li><a href="https://github.com/DavidAPears" target=”_new”> GitHub</a> </li>
	<li><a href="https://www.linkedin.com/in/davepears/" target=”_new”> LinkedIn </a> </li>
	<li><a href="https://twitter.com/davidapears" target=”_new”> Twitter </a> </li>
	<li><a href="https://www.instagram.com/david.pears/" target=”_new”> Instagram </a> </li>

	</ul>

	</div>

	<div class="hero">
	<h1>Hello World!</h1>

	<div class="button">
	<a href="https://www.youtube.com/watch?v=jofNR_WkoCE" target=”_new”, class="btn btn-one"> Watch Video </a>
	<a href="about.html" class="btn btn-two"> About Me </a>
	</div>
	</div>



	</header>

	</body>

	</html>
	*
	{
	margin: 2;
	padding: 2;
	}

	header
	{
	background-image: url(laptopongrey.jpg);
	height: 100vh;
	background-size: cover;
	background-position: center;
	}

	ul {
	list-style-type: center;
	}

	.margin
	{
	float: center;
	list-style: none;
	margin-top: 30px
	}

	.main-nav li
	{
	display: inline-block;
	list-style-type: none;
	}

	.main-nav li a
	{
	color: MediumAquamarine;
	text-decoration: none;
	padding: 5px 20px;
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	}

	.main-nav li.active a
	{
	border: 1px solid white;
	}

	.main-nav li a:hover
	{
	border: 1px solid MediumAquamarine;
	}

	.logo img
	{
	width: 300px;
	height: auto;
	float: right;
	}

	body
	{
	font-family: monospace;
	}

	.row
	{
	max-width: 1200px;
	margin: auto;
	}

	.hero
	{
	position: center;
	width: 1200px;
	margin-left: 0px;
	margin-top: 0px;
	font-family: "Roboto", sans-serif;
	font-size: 40px;
	}

	h1
	{
	color: white;
	text-transform: uppercase;
	font-size: 70;
	text-align: center;
	margin-top: 275px;
	}

	.button
	{
	margin-top: 30px;
	margin-left: 440px;
	}

	.btn
	{
	border: 1px solid white;
	padding: 10px 30px;
	color: white;
	margin-right: 5px;
	font-size: 13px;
	text-transform: uppercase;
	}

	.btn-one
	{
	background-color: MediumAquamarine;
	font-family: "Roborto" sans-serif;
	}

	.btn-two
	{
	font-family: "Roborto" sans-serif;
	}

	.btn-two
	{
	background-color: MediumAquamarine;
	transition: all 0.5s ease-in;
	}

	.paragraph
	{
	width: 500px;
	border: 2px solid MediumAquamarine;
	padding: 2px;
	margin: 2px;
	background-color: inherit;
	align-items: center;
	}