my portfolio

index.html

<div class="container-fluid">
<ul>
  <li><a href="#section4"><button id="b4">Contact</button></a> </li>
  <li><a href="#section3"><button id="b3">Portfolio</button></a></li>
  <li><a href="#section2"><button id="b2">About</button></a></li>
  <li><a href="#section1"><button id="b1">Home</button></a></li>
  <li style="float:left"><a href="#">ARPIT YADAV</a></li>
  </ul>
</div>
 <div id="section1" class="container-fluid">
  <h1>Complete Portfolio Design</h1>
    <h3><b>user's other social media links are given below-</b></h3>
  <hr width="70%">
    <div class="row text-center">
      <div class="col-md-4"><button class="btn"><a href="https://www.facebook.com/arpit.yadav.779857" target="_blank"><i class="fa fa-facebook"> Facebook</i></a></button></div>
 <div class="col-md-4"><button class="btn"><a href="https://github.com/Ace-ezer" target="_blank"><i class="fa fa-github"> Github</i></a></button>        
</div>
 <div class="col-md-4">
   <button class="btn btn-default"><a href="https://www.freecodecamp.org/ace-ezer" target="_blank"><i class="glyphicon glyphicon-pencil"> Freecodecamp</i></a></button></div>
    </div>
  <p></p>
  </div>
  
  <div id="section2" class="container-fluid">
    <h2 style="color: grey"> About</h2>
    <center><hr width="50%"><hr width="50%"></center>
    <p> <div class="row">
    <div class="col-xs-8" id="r1">
 <b>EDUCATION</b><center>	B.Tech in Computer science and engineering, First Year
Motilal Nehru National Institute of Technology, Allahabad India<br>
<u>High School </u>– Rani Laxmi Bai Memorial School (CBSE)
-  CGPA of 10/ 10<br>
 <u>Intermediate</u> – Rani Laxmi Bai Memorial School (CBSE) -92%</center><br>
      <b>TECHNICAL SKILLS</b>
<center><u>Languages</u> – Python, C++, C ,Java(Basic), JS<br>
  <u>Tools</u> – MySQL, Linux</center>
<b>PROJECTS</b>
      <center>●<u>Tribute Page</u> – A simple Tribute page using Bootstrap3 and CSS.</center>
     <b>ACHIEVEMENTS</b><center> 
      ●	Active participation on online competitive coding websites – CodeChef, HackerRank etc.</center><br>
      <b>HOBBIES-</b><br> <center>Volleyball, Programming,Oration. </center></div>
    <div class="col-xs-4"><img src="http://res.cloudinary.com/ace-ezer/image/upload/v1514662974/IMG_20171001_220157_331_ubztqu.jpg" class="img-responsive" id="pic"></div>
    </div>
</p>
</div>
    </div>

<div id="section3">
  <h2 style="color:orange">Portfolio</h2><hr width="70%"><hr width="70%">
  <div class="row">
    <div class="col-md-4"> 
    <div class="thumbnail" id="t1">
      <a href="https://codepen.io/ace-ezer/full/BJRYbE/"><img src="http://res.cloudinary.com/ace-ezer/image/upload/v1514661942/Screenshot_13_rwlwgu.png" class="img-responsive">
        <div class="caption"><center>A Tribute Page</center></div></a>
      </div>
    </div>

 <div class="col-md-4">
    <div class="thumbnail" id="t2">
      <a href="https://codepen.io/ace-ezer/full/baBywG/">
 <img src="http://res.cloudinary.com/ace-ezer/image/upload/v1514662057/Screenshot_17_sfc9hk.png" class="img-responsive">
        <div class="caption"><center>Random Quotes App</center></div> </a>
   </div> 
    </div>
    
 <div class="col-md-4">
   <div class="thumnail" id="t3">
     <a href="https://codepen.io/ace-ezer/full/KZWPez/">
   <img src="http://res.cloudinary.com/ace-ezer/image/upload/v1514662049/Screenshot_15_njcf2s.png
" class="img-responsive">
       <div class="caption"><center>A Wikipedia Viewer</center></div></a>     
   </div>
    </div>
      </div>
  <div class="row">
    <div class="col-md-4"> 
    <div class="thumbnail" id="t1">
      <a href="https://codepen.io/ace-ezer/full/QadxLe/">
      <img src="http://res.cloudinary.com/ace-ezer/image/upload/v1514662052/Screenshot_16_jxon5c.png" class="img-responsive">
        <div class="caption"><center>A Local Weather Teller</center></div></a>
      </div>
    </div>

 <div class="col-md-4">
    <div class="thumbnail" id="t2">
      <a href="https://codepen.io/ace-ezer/full/QavjKE/">
 <img src="http://res.cloudinary.com/ace-ezer/image/upload/v1514662051/Screenshot_14_ac9aoi.png" class="img-responsive">
        <div class="caption"><center>Twitch Tv Streamings</center></div></a> 
   </div> 
    </div>
    
 <div class="col-md-4">
   <div class="thumnail" id="t3">
   <img src="#" class="img-responsive">
     <div class="caption"><center>coming soon</center></div>     
   </div>
    </div>
      </div>


</div>  

<div id="section4">
  <h2> Contact:</h2>
  <h3 style="color:white">
    You can email me at :- yadavrishu771998@gmail.com <span class="glyphicon glyphicon-envelope"></span><br>
    or, contact:-9936707798</h3>
  <center style="color:white">
   <b><u> Social Media:-</b></u></center>
  <div class="row text-center">
    <div class="col-md-4">
      <button class="btn btn-default"><a href="https://www.facebook.com/arpit.yadav.779857"><i class="fa fa-facebook"> Facebook</i></a></button></div>
<div class="col-md-4">
      <button class="btn btn-default"><a href="https://github.com/Ace-ezer"><i class="fa fa-github"> Github</i></a></button></div>
<div class="col-md-4">
      <button class="btn btn-default"><a href="https://www.freecodecamp.org/ace-ezer"><i class="glyphicon glyphicon-pencil"> Freecodecamp</i></a></button></div>
</div> 

 </div>
</body>

my-portfolio.markdown

my portfolio

A Pen by Arpit Yadav on CodePen.

License.

style.css

@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

ul {list-style-type: none;
  background-color: #2D2D2D;
  margin: 0;
  padding:0;
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: 0;
  border:2px;
}
li { float: right;}
 li a {display: block;
    color: white;
   font-size: 25px;
    padding :14px 16px;
   font-family: lobster;
    }
#b1,#b2,#b3,#b4 { background-color: grey;
border-radius: 4px;
border: 2px solid grey;
 }
li a:hover:not(.active){background-color: black;}
.active{background-color: black;}
#section1{ background: url("https://cdn.wallpapersafari.com/98/34/eFVdt3.jpg");
height: 600px;
}
#section2{ background-color: gainsboro;
  color: black;
 font-family: georgia;
}
#section3{ background: url("https://c2.staticflickr.com/6/5006/5371825855_ceb37a5692_b.jpg") ;
}
#section4{ background: url("https://wallpapercave.com/wp/6AFvfCo.jpg");
 color: white;
  font-family: times-new-roman;
}
body{ position: relative;}
 

h1 { margin-top: 200px;
     text-align: center;
  font-family: helvetica;
     color: brown;
     font-size: 50px;}
h3 { text-align: center;
      font-family:times-new-roman;
      }
p{ margin-bottom: 70px;}
#r1{ font-family: sans-serif;
      font-size: 20px;}
h2{ text-align: center;
    font-family: monospace;
    font-size: 50px;
     text-decoration: undelined;}
#pic { border-radius: 50%;
      border-padding: 20px;}
#t1,#t2,#t3 { margin-top: 30px;
      margin-bottom:30px;
      width:300px;
      }

styles

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