View difference between Paste ID: 91hWLJWr and tEmd7Qku
SHOW: | | - or go back to the newest paste.
1
>>>>>>> 1º Passo:
2
3
Colem esse código entre <style type="text/css"> e </style>
4
5-
#gscl{
5+
#poxa {
6
margin-top:50px;
7-
    margin-top:0px; /* quanto ela vai pra baixo */
7+
margin-left:0px;
8-
    margin-left:0px; /* quanto ela vai pra direita */
8+
text-align:center;
9-
    border-radius:100px; /* imagen circular igual a 100, imagem quadrada só é deixar em 0 */
9+
margin-bottom:15px;
10-
    height:auto; /* altura da foto */
10+
11-
    width:200px; /* largura da foto */
11+
12-
    -webkit-filter: grayscale(1); /* de 0 a 1 mais cinza ou menos */
12+
#poxa a {
13-
    -webkit-transition: opacity 0.8s linear;
13+
padding:5px;
14-
  -webkit-transition: all 0.5s ease;
14+
font-size:10px;
15-
     -moz-transition: all 0.5s ease;
15+
text-align:center;
16-
       -o-transition: all 0.5s ease;
16+
margin-left:3px;
17-
      -ms-transition: all 0.5s ease;
17+
width:300px;
18-
          transition: all 0.5s ease;
18+
margin-bottom:7px;
19
font-family:calibri;
20-
 
20+
text-transform:uppercase;
21-
#gscl:hover {
21+
color:#fff;
22-
     
22+
display:inline-block;
23-
    -webkit-filter: grayscale(0); /* de 0 a 1 mais cinza ou menos, pra ela voltar ao normal tem que ser 0 */
23+
-webkit-transition:all 0.3s ease-out;
24-
    -webkit-transition: opacity 0.8s linear;
24+
-moz-transition:all 0.3s ease-out;
25-
       -webkit-transition: all 0.5s ease;
25+
transition:all 0.3s ease-out;
26-
     -moz-transition: all 0.5s ease;
26+
border-bottom:1px solid #f5f5f5;
27-
       -o-transition: all 0.5s ease;
27+
text-decoration:none;
28-
      -ms-transition: all 0.5s ease;
28+
29-
          transition: all 0.5s ease;
29+
30
#poxa a:hover {
31
letter-spacing:5px;
32
color:#fff;
33
background:#000;
34
-webkit-transition:all 0.3s ease-out;
35
-moz-transition:all 0.3s ease-out;
36-
<img id="gscl" src="URL da IMAGEM que vc quer">
36+
transition:all 0.3s ease-out;}
37
38
/* as cores de fundo */
39
#poxa :nth-child(5n+1){background:#df6c7a;}
40
#poxa :nth-child(5n+2){background:#df9a6c;}
41
#poxa :nth-child(5n+3){background:#e5de71;}
42
#poxa :nth-child(5n+4){background:#8bea71;}
43
#poxa :nth-child(5n+5){background:#97c5e0;}
44
45
>>>>>>> 2º Passo:
46
47
Colem esse código depois de </style> e antes de </body>
48
49
<div id="poxa">
50
    
51
    <a href="http://amplamente.tumblr.com/">Amplamente</a>
52
    <a href="http://amplamente.tumblr.com/">Amplamente</a>   
53
    <a href="http://amplamente.tumblr.com/">Amplamente</a>   
54
    <a href="http://amplamente.tumblr.com/">Amplamente</a>   
55
    <a href="http://amplamente.tumblr.com/">Amplamente</a>   
56
    <a href="http://amplamente.tumblr.com/">Amplamente</a>   
57
    <a href="http://amplamente.tumblr.com/">Amplamente</a>   
58
    <a href="http://amplamente.tumblr.com/">Amplamente</a>   
59
    <a href="http://amplamente.tumblr.com/">Amplamente</a>
60
    <a href="http://amplamente.tumblr.com/">Amplamente</a>   
61
    
62
    
63
  </div>
64
65
TUTORIAL FEITO POR AMPLAMENTE.