Hello Pepper Plane

Hello Pepper Plane.markdown

Hello Pepper Plane

Theme HTML5 by Julien Lepoivre enjoy it ;)

A Pen by Julien Lepoivre on CodePen.

License.

index.html

<header>
  <div class="wrap">
    <a href="#hello"><div class="entypo-paper-plane logo"></div></a>
  <ul>
    <a href="#work"><li>work</li></a>
    <a href="#skills"><li>skills</li></a>
    <a href="#about"><li>about</li></a>
    <a href="#lab"><li>lab</li></a>
  </ul>
  </div>
</header>
<div id="large_image">
  <div class="wrap white">
  <section id="hello">
    <h1>Hello</h1>
    <p>Fictum,  deserunt mollit anim laborum astutumque! Quisque ut dolor gravida, placerat libero vel, euismod. Qui ipsorum lingua Celtae, nostra Galli appellantur. Etiam habebis sem dicantur magna mollis euismod. Cras mattis iudicium purus sit amet fermentum.</p>
   </section>
  
</div>
  
  
</div>

<div class="wrap">
  <section id="work">
    <h1>This is my work</h1>
    <h2>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</h2>
    <p>Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur    purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    <div class="images">
      <img src="http://placehold.it/250x250" alt="img01"/>
      <img src="http://placehold.it/250x250" alt="img02"/>
      <img src="http://placehold.it/250x250" alt="img03"/>
      <img src="http://placehold.it/250x250" alt="img04"/>
      <img src="http://placehold.it/250x250" alt="img05"/>
      <img src="http://placehold.it/250x250" alt="img06"/>
    </div>
   </section>
  
</div>


<div class="wrap">
  <section id="skills">
    
    <h1>My Skills</h1>
    <h2>Me non paenitet nullum festiviorem excogitasse ad hoc. excogitasse ad hoc !</h2>
 
    <div id="pattern" class="pattern">
  <div class="col-group">
    <div>
      <li class="entypo-lamp"></li>
      <h3>Salutantibus vitae elit libero, a pharetra augue.</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. Nam bibendum nisl in risus imperdiet vestibulum.</p>
    </div>
    <div>
      <li class="entypo-flag"></li>
      <h3>Fictum,  deserunt mollit anim laborum astutumque!</h3>
      <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p>
    </div>
    <div>
      
      <li class="entypo-trophy"></li>
      <h3>Idque Caesaris facere voluntate liceret</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. Nam bibendum nisl in risus imperdiet vestibulum.</p>
    </div>
  </div>
</div>
<!--End Pattern HTML-->


    
   </section>
  
</div>

<div class="wrap">
  <section id="about">
    <h1>About Me</h1>
    <h2>Quo usque tandem abutere, Catilina, patientia nostra?</h2>
    <p>Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur    purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
    <img class="me" src="http://gravatar.com/avatar/25b1fc64ba12614875c1e467d7e4c86e?s=512" alt="" />
    
    <!-- Group of Elements -->
    <ul>
      <li class="entypo-twitter-circled"></li>
      <li class="entypo-facebook-circled"></li>
      <li class="entypo-linkedin-circled"></li>
      <li class="entypo-dribbble-circled"></li>
      <li class="entypo-linkedin-circled"></li>
    </ul>
   </section>
  
</div>

<section id="footer">
  <div id="logo_footer">
    <a href="#hello"><div class="entypo-paper-plane logo"></div></a>
  </div>
  <p>Hello Pepper Plane<br>a theme by Julien Lepoivre<br>2013</p>
</section>

script.js

$(document).ready(function(){


	$('header a').click(function(){
		var href = $(this).attr('href');
		var id = href.split('#').join('');			
		$('body, html').animate({
			'scrollTop' : $('#' + id).offset().top
		});
		return false;
	});
	
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Raleway:400,200);

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

/* responsive */
@media screen and (min-width: 40em) {
  .col-group {
    overflow: hidden;
  }
  .col-group > div {
    float: left;
    width: 30%;
  }

}




body{
  
  font-family: 'Raleway', sans-serif;
  font-weight:200;
  margin: 0;
  padding: 0;
}

h1{
    font-weight:200;
}

h2{
    font-weight:200;
  width:50%;
}

h3{
    font-weight:200;
}

p{
  font-weight:200;
  
}
/*#a66Ca3*/

::selection {
	background: #CFA193; /* Safari */
	}
::-moz-selection {
	background: #CFA193; /* Firefox */
}

header{
    background-color:#94c2cf;
    height:60px;
    position:fixed;
    width:100%;
  overflow:hidden;
  
}

header .logo{
  font-size:40px;
  color:white;
  padding:5px;
  padding-left:10px; 
  float:left;
  
}

@-webkit-keyframes Jump {
    from {-webkit-transform: translate(0, 0px);}
    50% {-webkit-transform: translate(0, 3px);}
    to {-webkit-transform: translate(0, 0px);}    
}
header .logo:hover {
  -webkit-animation-name: Jump;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}

header ul{
  display:inline;
/*  background-color:green;*/
  float:right;
  padding-top:5px;
}

header ul li{
  display:inline;
/*  background-color:blue;*/
  color:white;
  padding:5px; 
}

header ul a{
  text-decoration:none;
  
  padding:10px 2px 10px 2px;
  
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
  
}

header ul a:hover{
  background-color:#88b2be ;
  border-radius:5px;
  padding:10px 20px 10px 20px;
  
  -webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
  
}



section{
  top:0px;right:0px;bottom:0px;left:0px;
  height: 100%;
  width: 100%;
/*  background-color:lime;*/
  padding-top:60px;
  border-bottom:1px dotted #D5D5D5;
  padding-bottom:40px;
  
}

section .images{
  text-align:center;

  
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
  
}
.images img{
    width:auto;
  
  }


.images img:hover{  
}



.wrap{
  max-width:760px;
  margin:auto;
  padding-left:5px;
  padding-right:5px;
  
}


#large_image{
  background-image: url('http://wallpaper.pickywallpapers.com/1280x1024/minimal-flying-paper-plane.jpg');
  background-position:center center ;
  
  min-height:400px;
  width:100%;
  
}

#hello{

  padding-top:100px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  margin-left:40px;
  border-bottom:0px dotted #D5D5D5;
}

#hello h1{
    font-weight:400;
}

#hello p{
  width:50%;
    font-weight:400;
}


.white{
  color:white;
  
}


#skills{
  clear:both;
  min-height:500px;
  
}

#skills ul{
  /*background-color:green;*/
    text-align:left;
    margin-left:-40px;
}

#skills li{
  font-size:80px;
  padding:20px;
  list-style:none;
  /*background-color:red;*/
  color:#D3D3D3;
  text-align:center;
  
  -webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

  
}

#skills li:hover{
  color:#94c2cf;
  cursor:pointer;
  
  -webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

  
}




.col-group > div {
  padding: 0.5em 0.5em 0;
}

.me {
  display: block;
  margin: 2em auto;
  margin-bottom: 2em;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

#about ul{
  /*background-color:green;*/
    text-align:center;
    margin-left:-40px;
}

#about ul li{
  font-size:50px;
  list-style:none;
  /*background-color:red;*/
  display:inline;
  color:#cccccc;
  
  -webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

  
}

#about ul li:hover{
  color:#94c2cf;
  cursor:pointer;
  
  -webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

  
}


#footer{
  background-color:#cccccc ;
  color:white;
  text-align:center;
}

@-webkit-keyframes Jumpy {
    from {-webkit-transform: translate(0, 0px);}
    50% {-webkit-transform: translate(0, 10px);}
    to {-webkit-transform: translate(0, 0px);}    
}

 
#footer #logo_footer{
  width:38px;
  height:45px;
  margin-left:auto;
  margin-right:auto;
  border-bottom:1px solid white;
  
}


#footer a{
  font-size:20px;
  color:white;
  padding:5px;
  padding-left:3px; 
  width:30px;
  margin:auto;
  float:left;
  color:white;
  text-decoration:none;
   -webkit-animation-name: Jumpy;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}