Saiba: "Como fazer um "meme" ou "PERFIL" Sobre Box Blog"

Saiba: "Como fazer um "meme" ou "PERFIL" Sobre Box Blog"

"Como fazer uma caixa Sobre Mim,

 perfil 

ou 

Simples blogs"


DEMO

 


 
procurar por  <head>
e, ao
encontrá-lo;

copie 
e 
cole 
após <head> 
o código:
<link href='http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>


. HTML                                                     

E,
em seu código HTML,
ou
no "lay-out" do seu blog,

 colar o código:



<div id="hulu">
 <div id="social">
<div id="left_social"><i class="icon-facebook"></i>
<i class="icon-twitter"></i></div>
<div id="right_social"><i class="icon-google-plus"></i>
<i class="icon-pinterest"></i>
</div> </div>
<div id="profile-pic">
<div class="cover">
</div>
<div id="prof"><img src="https://lh4.googleusercontent.com/-oAKJOQeF0Q8/UY5906EWXFI/AAAAAAAAEc8/LZFKhzkvbpA/w165-h166-no/It%2527s+me.jpg"/>
</div> </div>
<div id="details">
<h1><span>Panjz Mackenzie</span></h1>
 </div>
<div id="info">
 <ul>
<li><div class="link"><a href="#">About Me</a></div>
</li> <li><div class="link"><a href="#">My Skills</a></div>
</li> <li><div class="link"><a href="#">Work Experience</a></div>
</li> <li><div class="link"><a href="#">Say Hello!</a></div>
</li> </ul>
</div> </div>


onde:

https://lh4.googleusercontent.com/-oAKJOQeF0Q8/UY5906EWXFI/AAAAAAAAEc8/LZFKhzkvbpA/w165-h166-no/It%2527s+me.jpg = ENDEREÇO DE SEU AVATAR


Panjz Mackenzie= SEU NOME

 About Me=Quem sou eu

 My Skills= Minhas habilidades

  Work Experience = Experiência de Trabalho

 Say Hello! = Diga Olá!

. CCS                                                         


E,
em seu código CSS,
colar o código:
#hulu{
width:300px;
height:auto;
margin:0 auto;
background:#000;
position:relative;
border-radius:0px 0px 20px 20px;
background:#f8f8f8;
padding:0px 0px 20px 0px;
-moz-box-shadow:    inset 0 0 10px #E3E3E3;
-webkit-box-shadow: inset 0 0 10px #E3E3E3;
box-shadow:         inset 0 0 10px #E3E3E3;
}
#social{
padding:10px 20px;
overflow:auto;
background:#9a2418;
border-bottom:2px solid #9a2418;
position:relative;
}
#left_social{float:left;}
#right_social{float:right;}
#social i{
margin-right:0px;
padding:5px 0px;
width:30px;
display:block;
float:left;
text-align:center;
color:#fff;
font-size:1.2em;
transition:0.5s ease;
-webkit-transition:0.5s ease;
}
#social i:hover
{
background:#fff;
color:rgb(223, 97, 19);
transition:0.5s ease;
-webkit-transition:0.5s ease;
border-radius:50%;
}
img{
width:85px;
height:auto;
border-radius:50%;
margin:7px;
z-index:100;
position:relative;
}
#prof{
width: 100%;
height: 100%;
border-radius: 50% 50% 50% 50%;
border: 2px solid #6B2F0A;
background:#9a2418;
}
.cover{
position: absolute;
width: 104px;
height: 49px;
top: 0px;
left: 0px;
z-index: 1;background:#9a2418;
}
#profile-pic
{
margin: -51px auto 0px;
position: relative;
z-index: 100;
width: 100px;
height: 100px;
}
h1{
font-family:&amp;amp;quot;Roboto Slab&amp;amp;quot;;
margin:0px; padding:10px 0px;
text-align:center;
font-size:1.3em;
}
#info ul{margin:0px; padding:0px;list-style-type:none;-webkit-backface-visibility: hidden; backface-visibility: hidden;}
#info li{margin:0px;text-align:center;font-family:&amp;amp;quot;Roboto Slab&amp;amp;quot;;font-size:1.2em;}
#info li a{display:block;color:#000;text-decoration:none;padding:15px 0px;-webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;}
#info li div:hover a{background:#9a2418;color:#fff;-webkit-transform:translate(0px,10px);
  -moz-transform:translate(0px,-10px);
  -ms-transform:translate(0px,-10px);
  -o-transform:translate(0px,10px);
  transform:translate(0px,-10px);text-shadow: 2px 2px 3px #000;}



.Visualize
.Estando tudo correto!
.Salve!!!



fonte:
panjz-online
Reactions