Hope

hope.markdown

Hope

A Pen by Tari ogounga on CodePen.

License.

index.html

<!--navigation bar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">NEAT</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#section1">About Me</a></li>
          <li><a href="#section2">Portfolio</a></li>
          <li><a href="#section3">contact Me</a></li>

        </ul>
      </div>
    </div>
  </div>
</nav>
<!--body text-->

<div id="section1" class="container-fluid">

  <h1>About me</h1>
  <p>Just a guy trying to build a beautiful world</p>
  <Img  id = "trst" src="https://image.ibb.co/kiVt7v/ayibatari.jpg" alt="picture">
</div>
<div id="section2" class="container-fluid">

  <h1>Portfolio</h1>
 <img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Darkness.png " alt="Hold" style="width:100%;height:428px;">
<p></p>
   <img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Darkness.png " alt="Hold" style="width:100%;height:428px;">
<p></p>
   <img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Darkness.png " alt="Hold" style="width:100%;height:428px;">
<p></p>

</div>
<div id="section3" class="container-fluid">

  <h1>Contact Me</h1>
  <p>phone number: +2349071602291</p>

  <p>Email:tariogounga@gmail.com</p>
</div>

<!-- social buttons -->
<div id="section4" class=container-fluid>
<nav class="navbar navbar-inverse navbar-fixed-bottom id="coconut" >
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="https://facebook.com/tari.ogounga" class="fa fa-facebook" target="_blank"></a>
          </li>
          <li>
            <a href="https://twitter.com/tariogounga" class="fa fa-twitter" target="_blank"></a>
          </li>
          <li>
            <a href="https://github.com/inv-Ayiba" class="fa fa-github" target="_blank"></a>
          </li>

        </ul>
      </div>
    </div>
  </div>
</nav>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.css

   body {
      position: relative; 
  }
  
  #section1 {padding-top:50px;max-height:3000px;min-height:500px;color: #fff; background-color: #1E88E5;z-index:1000 !important}
  #section2 {padding-top:50px;max-height:3000px;min-height:500px;color: #fff; background-color: #673ab7;}
  #section3 {padding-top:50px;max-height:3000px;min-height:500px;color: #fff; background-color: #ff9800;}
 #section4 {padding-top:-3px;padding-bottom:-3px;background-color:#222;}



.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

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

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-github {
  background: #fff;
  color: white;
}

/* line of seperation_________________________________________*/


#trst {
      border-radius:50%;
      margin:30px 0 10px;
      max-width:80%;
      height:100px
      width:125px;
}

styles

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