Portfolio Webpage

index.html

<header>
  <link href="https://fonts.googleapis.com/css?family=Enriqueta" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</header>

<div class = "pageOne text-center" id="p1">
  <ul class = "nav nav-pills">
    <li> 
      <a href="#p1">Andrii Bozhenko</a>
    </li>
    <li class = "pull-right"> 
      <a href="#p4">Contact</a>
    </li>
    <li class = "pull-right"> 
      <a href="#p2">About Me</a>
    </li>
    <li class = "pull-right"> 
      <a href="#p3">Portfolio</a>
    </li>
  </ul>
  
  <div class = "block text-center">
  <h1>Andrii Bozhenko</h1>
  </div>
  <div class = "btnlist text-center">
    <a class = "btn btn-default" href = "#"><i class="fa fa-github fa-lg" aria-hidden="true"> GitHub</i>
</a>
    <a class = "btn btn-default" href = "#"><i class="fa fa-linkedin" aria-hidden="true"> Linkedin</i></a>
    <a class = "btn btn-default" href = "#"><i class="fa fa-instagram fa-lg" aria-hidden="true"> Instagram</i></a>
    <a class = "btn btn-default" href = "#"><i class="fa fa-youtube fa-lg" aria-hidden="true"> YouTube</i></a>
    <a class = "btn btn-default" href = "#"><i class="fa fa-facebook fa-lg" aria-hidden="true"> Facebook</i></a>
  </div>
  </div>

<div class = "pageTwo" id="p2">
  
    <div class = "container">
  <div class = "col-md-6 text-center">
    <h1> About Me </h1>
    <p>I'm studying programming online. Took <a href="https://cs50.harvard.edu/">CS50</a> and a 
<a href="https://www.freecodecamp.org">freeCodeCamp </a>course.</p>
    </div>
    <div class = "col-md-6">
    </div>
    </div>
  </div>




<div class = "pageThree" id="p3">
  <div class = "paddingTop">
    <h1 class = "text-center">Portfolio</h1>
  </div>
  <div class = "container">
  
    <div class = "col-md-3">
   <p data-height="265" data-theme-id="0" data-slug-hash="qrNPwv" data-default-tab="result" data-user="AndrBo" data-embed-version="2" data-pen-title="Tribute Page" class="codepen">See the Pen <a href="https://codepen.io/AndrBo/pen/qrNPwv/">Tribute Page</a> by Andrii Bozhenko (<a href="https://codepen.io/AndrBo">@AndrBo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>   
      <a href="https://codepen.io/AndrBo/pen/qrNPwv/" target = "blank"><h3>Tribute Page</h3></a>
    </div>
    <div class = "col-md-3">
<p data-height="321" data-theme-id="0" data-slug-hash="aEvevj" data-default-tab="result" data-user="AndrBo" data-embed-version="2" data-pen-title="Portfolio Webpage" class="codepen">See the Pen <a href="https://codepen.io/AndrBo/pen/aEvevj/">Portfolio Webpage</a> by Andrii Bozhenko (<a href="https://codepen.io/AndrBo">@AndrBo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
      <a href="https://codepen.io/AndrBo/pen/aEvevj/" target="blank"><h3>Portfolio Webpage</h3></a>
    </div>
    <div class = "col-md-3">
    </div>
    <div class = "col-md-3">
    </div>
    </div>
    </div>


<div class = "pageFour" id="p4">
  <div class = "container">
    <div class = "col-md-12">
        <div class = "btnlist text-center">
    <a class = "btn btn-default paddingBtn" href = "#"><i class="fa fa-github fa-lg" aria-hidden="true"> GitHub</i></a>
    <a class = "btn btn-default paddingBtn" href = "#"><i class="fa fa-linkedin" aria-hidden="true"> Linkedin</i></a>
    <a class = "btn btn-default paddingBtn" href = "#"><i class="fa fa-instagram fa-lg" aria-hidden="true"> Instagram</i></a>
    <a class = "btn btn-default paddingBtn" href = "#"><i class="fa fa-youtube fa-lg" aria-hidden="true"> YouTube</i></a>
    <a class = "btn btn-default paddingBtn" href = "#"><i class="fa fa-facebook fa-lg" aria-hidden="true"> Facebook</i></a>
  </div>
    </div>
    </div>
                  
  <div class = "footer">
    
    <h4>
      <a id = "mailInFooter" href = "mailto:my_mail@hotmail.com"><i class="fa fa-envelope-o" aria-hidden="true"></i> deux_jours_av@hotmail.com</a>
      
      <a href="#p2">About me</a>
      <a href="#p4">Contact me</a>
    </h4>
    <p>Copyright&copy Andrii Bozhenko. All rights reserved.</p>
  </div>
</div>

portfolio-webpage.markdown

Portfolio Webpage

A Pen by Andrii Bozhenko on CodePen.

License.

style.css

.nav-pills {
 font-family: Enriqueta;
 font-size: 1.7em;
 background-color: black;
 opacity: .5;
 margin-bottom: 10%;
 }

.nav-pills a {
  color: grey;
}

.nav-pills a:hover {
  color: black;
}

.block {
  background-color: transparent;
  opacity: .5;
  padding: 15px;
}

body {

  font-family: Enriqueta;
  color: black;  
}

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

.btn-default {
  background-color: #9DA4A4; 
  border-color: grey;
  color: black;
}

.btn:hover {
  background-color: transparent;
 }

.paddingTop {
  padding-top: 2%;
  padding-bottom: 2%;
}

.pageOne {
  background: url("https://images.unsplash.com/photo-1431963143256-9fd69be303fb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=369130c00b506122c965c4b1a5a09c70");
  background-size: cover;
  height: 700px;  
  }

.pageTwo {
  background: url("https://images.unsplash.com/photo-1504511761034-db2510ca87cc?auto=format&fit=crop&w=1952&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D");
  background-size: cover;
  height: 700px;
  padding-top: 5%;
  
}

.pageTwo p {
  font-size: 2em;
  
  }



.pageThree {
  background: url("https://images.unsplash.com/photo-1444863097070-0ae713d23558?auto=format&fit=crop&w=1934&q=80");
  background-size: cover;
  height: 700px;
  padding-top: 5%;
}

.pageFour {
  background: url("https://images.unsplash.com/photo-1443556858920-132511e53739?auto=format&fit=crop&w=1950&q=80");
  background-size: cover;
  padding-top: 10%;
  padding-bottom: 3%
}

 .btnlist{
  padding-bottom: 15px;
}

.fa.fa-github:hover {
  color: #6e5494;
}

.fa.fa-linkedin:hover {
  color: rgb(0, 123, 181);
}

.fa.fa-instagram:hover {
  color: rgb(233, 89, 80);
}

.fa.fa-youtube:hover {
  color: #FF0000;
  }

.fa.fa-facebook:hover {
  color: #3B5998;
}

.paddingBtn {
  background-color: #01CDF3;
  }

.pageFour .fa.fa-github {
  color: #6e5494;
}

.pageFour .fa.fa-linkedin {
  color: rgb(0, 123, 181);
}

.pageFour .fa.fa-instagram {
  color: rgb(233, 89, 80);
}

.pageFour .fa.fa-youtube {
  color: #FF0000;
}

.pageFour .fa.fa-facebook {
  color: #3B5998;
}




.footer {
  background-color: #DACFCF;
  opacity: .8;
  text-align: right;
  text-color: black;
  padding-top: 1px;
  padding-bottom: 1px;
  }

.footer p {
  font-size: 12px;
  text-color: blcak;
  text-align: center;
  }

.footer a {
  color: #3B3838;
  padding-right: 20px;
}

.footer a:hover {
  color: black;
  }

#mailInFooter {
  float: left;
  padding-left: 20px;
  color: #070600;
  opacity: .9
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />