yurisbv.github.io

index.html

<header>
  <h1 id="titulo">Yuri Website</h1>
  <h2>Desenvolvedor front-end</h2>
  <br>
  <h3><i class="fa fa-whatsapp fa-lg"></i>
    (21) 9669 20612</h3>
  <h3 id="email"><i class="fa fa-envelope-o fa-lg"></i><a href="mailto:contato@yuri.website">contato@yuri.website</a></h3>
  <br>
  <h3 id="social"><a href="https://github.com/yurisbv/" target="_blank"> <i class="fa fa-github fa-3x"></i></a>
     <a href="https://br.linkedin.com/in/yuri-soares-brandão-95211010a
" target="_blank"> <i class="fa fa-linkedin fa-3x"></i></a>
      <a href="https://twitter.com/yurisbv/" target="_blank"> <i class="fa fa-twitter fa-3x"></i></a>
      <a href="https://pt-br.facebook.com/people/Yuri-Soares-Brandão" target="_blank"> <i class="fa fa-facebook fa-3x"></i></a>
     
   </h3>
</header>

style.css

@font-face {
    font-family: 'AR Techni'';
    src: url(fontes/artechni.ttf);
}

@font-face {
    font-family: 'Setback TT (BRK)';
    src: url(fontes/setbackt.ttf);
}

h1, h2, h3 {
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  font-stretch:normal;
  color: white;
  text-align: center;
  width: 100%;
  text-shadow: 5px 3px 3px black; 

}

#titulo {
  
  font-family: 'Setback TT (BRK)';
  font-size: 6em;
}

h2 {
  font-family:'AR Techni';
  font-size: 2em;
  margin-top: -2em;
}
h3 {
  font-family:'AR Techni';
  font-size: 1em;
}


h1:hover,h2:hover,h3:hover{
  color: black;
  	text-shadow: 4px 3px 3px white; 
}

html {
  background: #02AAB0; /* http://uigradients.com/ fallback for old browsers */
  background: -webkit-linear-gradient(to left, #02AAB0 , #00CDAC); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #02AAB0 , #00CDAC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

header {
  margin: auto;
  display: block;
  position: absolute;
  left: 50%;
	top: 50%;
  margin-left: -250px;
  margin-top: -280px;
  align-content: center;
}

ul {
  display: inline;
 }

.fa-3x {
  color: white;
  text-shadow: 3px 3px 3px black;
  margin-left: .5em;
}

.fa-lg {
  padding-right: 0.5em;
}

i:hover {
  color: black;
}

#social {
  background: rgba(0,0,0,0.09);
  padding: 1em 1em 1em 1em;
  position: relative;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />

yurisbv.github.io

Yuri Website
------------


A [Pen](http://codepen.io/yurisbv/pen/eZVZoM) by [Yuri Soares Brandão](http://codepen.io/yurisbv) on [CodePen](http://codepen.io/).

[License](http://codepen.io/yurisbv/pen/eZVZoM/license).