Untitled

<!DOCTYPE html>

<html>
  <head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
  <ul class = "nav nav-pills">
<li>
  <a href="#">Daniel Collins</a>
</li>
<li class="pull-right">
  <a href="#">Contact Me</a>
</li>
<li class="pull-right">
  <a href="#">Portfolio</a>
</li>
<li class="pull-right">
  <a href="#">About Me</a>
</li>
</ul>

<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Projects</h2>
</div>
<div class = "btnList text-center">
  <a class = "btn btn-default" href="#">Reddit</a>
  <a class = "btn btn-default" href="#">GitHub</a>
  <a class = "btn btn-default" href="#">Linkedin</a>
  <a class = "btn btn-default" href="#">Facebook</a>
</div>
</div>
<div class= "pageTwo">
<div class= "col-md-6 pageTwoblock">
<div class="row">
  <div class ="text-center">
      <h1>Daniel Collins</h1>
      <p>
        I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
         different areas of web development from back end programming (PHP, C#, Java) to front end engineering
         (HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
      </p>
      </div>
    </div>
        </div>
        <div class="me">

        </div>
      </div>
<div class= "pageThree">

</div>
   </body>
</html>

body{
  background-color: white;
  font-family:Orbitron;
  color:white;
}

.block{
  background-color: #337ab7;
  opacity: .7;
  padding:10px;
  width:50%;
  margin-right: auto;
  margin-left: auto;
  border-radius:5px;
}

.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}

h1{
  padding:0;
margin-top: 0px;
font-size: 5.0em;
}

.btn-default{
font-size:1.7em;
color:#337ab7;
}


.pageOne{
  background: url("../images/mountains.jpg");
  background-repeat: none;
  background-size: cover;
  display: inline-block;
  height: 1000px;
  width: 100%;
}

/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
opacity: .7;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

/*
parallax effect end
*/

.pageTwo{
background: url("../images/darkmountains.jpg");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
padding-top: 5%;
}

.pageTwoblock{
  background-color: #008B8B;
  opacity: .7;
  border-radius:5px;
}

p{
  font-size: 2.5em;
}

.me{
height:850px;
  display:block;
  margin-right: auto;
  margin-left: auto;

}

.pageThree{
background: url("../images/mountainslowview.jpg");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
padding-top:5%;
}

[![Page 1 and Page 2 transition][1]][1]
[![Page 2 and Page 3 transition][2]][2]
[![Page 3 bottom][3]][3]