ZLKYyW

index.html

<div class="container-fluid">
  <div class="pageOne">
  <ul class="nav nav-pills">
    <li>
      <a href="#">Oussama Ladhari</a>
    </li>
    <li class="pull-right">
      <a href="#p4">Contact me</a>
    </li>
    <li class="pull-right">
      <a href="#p3">Portfolio</a>
    </li>
    <li class="pull-right">
      <a href="#p2">About me</a>
    </li>
  </ul>
  
 <div class="box text-center">
  <h1>Oussama Ladhari</h1>
  <h2>The ink of the scholar is more holy than the blood of the martyr</h2>
  </div>
  <div class="btnlist text-center">
    <a class="btn btn-default" href="https://www.linkedin.com/in/oussama-ladhari-3b3b43136?trk=nav_responsive_tab_profile_pic"target="-blank"><i class="fa fa-linkedin"id="linkedin" aria-hidden="true"></i> Linkedin</a>
    <a class="btn btn-default" href="https://www.freecodecamp.com/oladhari"target="-blank"><i class="fa fa-free-code-camp" id="freecodecamp" aria-hidden="true"></i> FreeCodeCamp</a>
    <a class="btn btn-default" href="https://github.com/oladhari"target="-blank"><i class="fa fa-github"id="github" aria-hidden="true"></i> Github</a>
    <a class="btn btn-default" href="https://www.facebook.com/ladhari.oussama"target="-blank"><i class="fa fa-facebook" id="facebook" aria-hidden="true"></i> Facebook</a>
  </div>
  </div>
  <div class="pageTwo" id="p2">
    <div class="row">
      <div class="col-md-6 text-center">
        
        <h2>Oussama Ladhari</h2>
        <p>I'm a self taught web designer, developer, living in Japan.
I'm currently part of a small VR(Virtual Reality) development team in an upcoming start-up based actually in France, developing MVP.
My passion is to keep learning coding and be at the head of my own company in the future.
Competences:
Languages:
Javascript, HTML5, CSS3, jQuery, Bootstrap3, C,C++,Java.
</p>
      </div>
      <div class="col-md-6 text-center">
        <img class="me" src="https://avatars.githubusercontent.com/u/13581057?v=3"></img>
      </div>
      </div>
  </div>
<div class="pageThree text-center paddingtop" id="p3">
  <h2>Portfolio</h2>
  <hr class="separationline">

<div class="row">
  <div class="col-md-6">
    <p data-height="265" data-theme-id="0" data-slug-hash="ZLKYyW" data-default-tab="result" data-user="oladhari" data-embed-version="2" data-pen-title="ZLKYyW" class="codepen">See the Pen <a href="http://codepen.io/oladhari/pen/ZLKYyW/">ZLKYyW</a> by Ladhari Oussama (<a href="http://codepen.io/oladhari">@oladhari</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
    <a href="http://codepen.io/oladhari/pen/ZLKYyW" target="blank"><h2>Portfolio Project</h2></a>
  </div>
  <div class="col-md-6">
    <p data-height="265" data-theme-id="0" data-slug-hash="MJjQqN" data-default-tab="result" data-user="oladhari" data-embed-version="2" data-pen-title="MJjQqN" class="codepen">See the Pen <a href="http://codepen.io/oladhari/pen/MJjQqN/">MJjQqN</a> by Ladhari Oussama (<a href="http://codepen.io/oladhari">@oladhari</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
    <a href="http://codepen.io/oladhari/pen/MJjQqN" target="blank"><h2>Tribute Page Project</h2></a>
  </div>
  <div class="col-md-6">
    <p data-height="265" data-theme-id="0" data-slug-hash="ZLKYyW" data-default-tab="result" data-user="oladhari" data-embed-version="2" data-pen-title="ZLKYyW" class="codepen">See the Pen <a href="http://codepen.io/oladhari/pen/ZLKYyW/">ZLKYyW</a> by Ladhari Oussama (<a href="http://codepen.io/oladhari">@oladhari</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
    <a href="http://codepen.io/oladhari/pen/ZLKYyW" target="blank"><h2>Portfolio Project</h2></a>
  </div>
  <div class="col-md-6">
    <p data-height="265" data-theme-id="0" data-slug-hash="MJjQqN" data-default-tab="result" data-user="oladhari" data-embed-version="2" data-pen-title="MJjQqN" class="codepen">See the Pen <a href="http://codepen.io/oladhari/pen/MJjQqN/">MJjQqN</a> by Ladhari Oussama (<a href="http://codepen.io/oladhari">@oladhari</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
    <a href="http://codepen.io/oladhari/pen/MJjQqN" target="blank"><h2>Tribute Page Project</h2></a>
  </div>
  </div>
</div>
<div class="pageFour" id="p4">
  <div class="row">
    <div class="col-md-8">
      <p>To contact me please use this form:</p>
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
	<div class="row">
		<label for="name">Your name:</label><br />
		<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
	</div>
	<div class="row">
		<label for="email">Your email:</label><br />
		<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
	</div>
	<div class="row">
		<label for="message">Your message:</label><br />
		<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
	</div>
	<input id="submit_button" type="submit" value="Send email" />
</form>
</div>
    <div class="col-md-4">
      <div class="btn">
    <a class="btn btn-default paddingBTN" href="https://www.linkedin.com/in/oussama-ladhari-3b3b43136?trk=nav_responsive_tab_profile_pic"target="-blank"><i class="fa fa-linkedin"id="linkedin" aria-hidden="true"></i> Linkedin</a><br/><br/>
    <a class="btn btn-default paddingBTN" href="https://www.freecodecamp.com/oladhari"target="-blank"><i class="fa fa-free-code-camp" id="freecodecamp" aria-hidden="true"></i> FreeCodeCamp</a><br/><br/>
    <a class="btn btn-default paddingBTN" href="https://github.com/oladhari"target="-blank"><i class="fa fa-github"id="github" aria-hidden="true"></i> Github</a><br/><br/>
    <a class="btn btn-default paddingBTN" href="https://www.facebook.com/ladhari.oussama"target="-blank"><i class="fa fa-facebook" id="facebook" aria-hidden="true"></i> Facebook</a>
  </div>
  </div>
    </div>
</div>
<div class ="footer">
  
 
  <a href="#p3">Portfolio  -  </a>
  <a href="#p2">About me  -  </a>
  <a href="#p4">Contact me    </a>
  
 
</div>
</div>
</div>

style.css

.nav-pills {
  font-family:Tahoma;
  font-size:1.5em;
  background-color:black;
  opacity:.7;
}
.nav-pills a{
color:white;
}

.pageOne {
   background-image: url("https://images.unsplash.com/photo-1473520844623-167ad716dcae?dpr=1&auto=compress,format&fit=crop&w=991&h=661&q=80&cs=tinysrgb&crop="); 
  background-size:cover;
  height:800px;
  }
h1 {
  margin-top:0px;
  padding:0;
	font-family: "Brush Script MT";
  font-size:7em;
  color:white;
  font-style: italic;
}
.btn-default{
  font-size:1.7em;
  font-family:lobster;
}
h2{
  	font-family: "Brush Script MT";
  font-size:3em;
  color:white;
  font-style: italic;
}
p{
  font-family: Tahoma;
  font-size:2em;
  color:white;
  font-style: italic;
  
}
.box{
  background-color:black;
  opacity:.6;
  padding:10px;
 width:50%;
  border-radius:15px;
  margin:170px auto auto auto;
  
}
.pageTwo {
   background-image: url("https://images.unsplash.com/photo-1472376758045-62f519fc676d?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop="); 
  background-size:cover;
  height:800px;
  padding-top:10%;
  }
.me{
  border-radius:15px;
  width:300px;
}
#facebook{
  color: #3b5998;
}
#freecodecamp{
  color:green;
}
#github{
  color:rgb(102,43,129);
}
#linkedin{
  color:#007bb6;
}
.pageThree {
   background-image: url("https://images.unsplash.com/photo-1441311956160-78a471e0638d?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop="); 
  background-size:cover;
  padding-bottom:10%;
  padding-top:10%;
  }
.paddingtop{
  padding-top:2%;
  padding-bottom:2%;
}
hr.separationline {
	border-top: 1px solid #8c8b8b;
	text-align: center;
}
hr.separationline:after {
	content: '§';
	display: inline-block;
	position: relative;
	top: -14px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}
.pageFour {
   background-color:#448dee; 
  background-size:cover;
  padding-bottom:4%;
  padding-top:4%;
  }
.col-md-8{
  padding-left:10%;
}
.footer{
  background-color:black;
  font-family:Tahoma;
  font-size:1.5em;
 
}

.footer a{
    vertical-align:middle;
  color:white;
}

styles

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

zlkyyw.markdown

ZLKYyW

A Pen by Ladhari Oussama on CodePen.

License.