HELLO

by olimann

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
<div class="row">
<div class="large-12">

<div class="iam-content">
        <span class="bulle">Hi!</span> 
        <h1><span class="moove">Graph<i class="fi-male"></i>ste</span> <span>Illustrateur</span> <span>Webdesigner</span></h1>
        <hr> 
        <p>Petite ou grande entreprise, associations, collectivités, agences de communication, je mets à votre service mon savoir-faire, ma passion créative, pour concevoir et réaliser vos supports de communication.</p>
</div>       


        
      
        
        
        </div>        
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500,600,800,700,900);

body {
  padding: 20px;
  background-color: #0dc3ff;
  font-family: "Roboto Slab",serif;
}

.row {
    max-width: 1180px;

}

h1 {
  font-family: 'Raleway', sans-serif;
  margin: 0;
  
  
}


/**/
.iam-content{
    position: relative;
    text-align: left;
    overflow: hidden;
    cursor: default;
}

.iam-content h1 {
    text-transform: none;
    letter-spacing: -0.03em;
    font-size: 4.3em;
    line-height: 1;
    font-weight: 900;
    margin: 0 0 15px;
    

}

.iam-content h1 i {
    display: inline-block;
    padding: 0 5px;  
  
}

.iam-content p{
    font-size: 1.35em;
    font-weight: 400; 
    
}

.iam-content hr {
    border-color: #000;
    border-image: none;
    border-style: solid;
    border-width: 12px 0 0;
    clear: both;
    height: 0;
    margin: 0 0 15px;
 
}
.iam-content h1 span:hover{
    color: #fff;
    
 
}

.iam-content h1 span:hover i{
    color: #000;
 
}

/**/

.bulle {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #000;
  color: #fff;
  font-size: 2em;
  line-height: 100px;
  position: relative;
  display: block;
  font-weight: 400;
  text-align: center;
  margin: 0 0 20px 220px;

}

.bulle::after {
  content: "";
  width: 32px;
  height: 30px;
  background: linear-gradient(65deg, transparent 60%, #000 61.5%), linear-gradient(-65deg, transparent 60%, #000 61.5%);
  background-repeat: no-repeat, no-repeat;
  background-size: 50% 150%;
  background-position: 0px 0, 15px 0;
  position: absolute;
  bottom: -10px;
  left: 10px;
  -webkit-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  transform: rotate(35deg);
}



.animated { 
    -webkit-animation-duration: 0.4s; 
    animation-duration: 0.4s; 
    -webkit-animation-fill-mode:...

JavaScript

$("span.moove").hover(function () {
    $("span.bulle").toggleClass("animated bounceIn");
});