<header>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</header>
<div class="container-fluid">
<ul class="nav nav-pills">
<li>
<a href="#">Jon L Pritchard</a>
</li>
<li>
<li class="pull-right">
<a href="#">About Me</a>
</li>
<li>
<li class="pull-right">
<a href="#">Portfolio</a>
</li>
<li>
<li class="pull-right">
<a href="#">Contact me</a>
</li>
</ul>
</div>
<div class="pageOne text-center">
<div class="b1">
<div class="block text-center">
<h1>Jon Pritchard</h1>
<h3>Contractor - Artist - Coder - Creator</h3>
</div>
</div>
<div class="btnlist text-center">
<a class="btn btn-default" href="#">Twitter</a>
<a class="btn btn-default" href="#">Github</a>
<a class="btn btn-default" href="#">Linked In</a>
<a class="btn btn-default" href="#">YouTube</a>
</div>
</div>
</div>
<div class="pageTwo">
</div>
.block{
background-color:black;
opacity:.7;
padding:10px;
width:40%;
margin-left:auto;
margin-right:auto;
border-radius:10px;
margin-top:0px;
margin-bottom: 15px;
}
.nav-pills{
font-color: grey;
font-size: 30px;
Background: #bababa;
opacity: ;
}
body{
background-color:grey;
font-family: Raleway;
color: grey;
}
.btn-default{
font-size: 1.7em;
}
.pageOne{
background:url("https://images.unsplash.com/photo-1508830524289-0adcbe822b40?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=377e356cce015c363d123504857f8137&auto=format&fit=crop&w=1011&q=80");
background-color: grey;
background-size:cover;
height: 800px;
margin-top: -4.8%;
padding-top: 200px;
}
.pageTwo{
background:url("https://images.unsplash.com/photo-1519995451813-39e29e054914?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5c0478ad15d7b018f8bb59f644f17184&auto=format&fit=crop&w=750&q=80");
}
h1{
font-size: 5.0em;
I figured it out on my own right after I posted this… Sorry