A Pen by Ladhari Oussama on CodePen.
Created
January 23, 2017 13:54
-
-
Save oladhari/dea93be33e87f5db0cc4855a92957452 to your computer and use it in GitHub Desktop.
ZLKYyW
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment