Skip to content

Commit 09d6c6e

Browse files
emanoelcamposemanoelcampos
committed
adicionando efeitos usando hover e active
1 parent d782f4e commit 09d6c6e

File tree

2 files changed

+127
-0
lines changed

2 files changed

+127
-0
lines changed

‎06-pseudo-classes-css/produtos.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
header {
2+
background-color: #BBBBBB;
3+
padding: 20px 0;
4+
}
5+
6+
.caixa {
7+
width: 940px;
8+
position: relative;
9+
margin: 0 auto;
10+
}
11+
12+
nav {
13+
position: absolute;
14+
top: 110px;
15+
right: 0px;
16+
}
17+
18+
nav li{
19+
display: inline;
20+
margin: 0 0 0 15px;
21+
}
22+
23+
nav a{
24+
text-transform: uppercase;
25+
color: #000000;
26+
font-weight: bold;
27+
font-size: 22px;
28+
text-decoration: none;
29+
}
30+
31+
nav a:hover {
32+
color: #C78C19;
33+
text-decoration: underline;
34+
}
35+
36+
.produtos {
37+
width: 940px;
38+
margin: 0 auto;
39+
padding: 50px 0;
40+
}
41+
42+
.produtos li {
43+
display: inline-block;
44+
text-align: center;
45+
width: 30%;
46+
vertical-align: top;
47+
margin: 0 1.5%;
48+
padding: 30px 20px;
49+
box-sizing: border-box;
50+
border: 2px solid #000000;
51+
border-radius: 10px;
52+
}
53+
54+
.produtos li:hover {
55+
border-color: #C78C19;
56+
}
57+
58+
.produtos li:active {
59+
border-color: #088C19;
60+
}
61+
62+
.produtos li:hover h2 {
63+
font-size: 34px;
64+
}
65+
66+
.produtos h2 {
67+
font-size: 30px;
68+
font-weight: bold;
69+
}
70+
71+
.produto-descricao {
72+
font-size: 18px;
73+
}
74+
75+
.produto-preco {
76+
font-size: 22px;
77+
font-weight: bold;
78+
margin: 10px 0;
79+
}

‎06-pseudo-classes-css/produtos.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Produtos - Barbearia Alura</title>
8+
<link rel="stylesheet" href="../reset.css">
9+
<link rel="stylesheet" href="produtos.css">
10+
</head>
11+
<body>
12+
<header>
13+
<div class="caixa">
14+
<h1><img src="../assets/logo.png" alt="logo barbearia alura"></h1>
15+
<nav>
16+
<ul>
17+
<li><a href="/index.html">Home</a></li>
18+
<li><a href="produtos.html">Produtos</a></li>
19+
<li><a href="contato.html">Contato</a></li>
20+
</ul>
21+
</nav>
22+
</div>
23+
</header>
24+
25+
<main>
26+
<ul class="produtos">
27+
<li>
28+
<h2>Cabelo</h2>
29+
<img src="../assets/cabelo.jpg" alt="desenho de cabelo">
30+
<p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
31+
<p class="produto-preco">R$ 25,00</p>
32+
</li>
33+
<li>
34+
<h2>Barba</h2>
35+
<img src="../assets/barba.jpg" alt="desenho de barba">
36+
<p class="produto-descricao">Corte e desenho profissional de barba</p>
37+
<p class="produto-preco">R$ 18,00</p>
38+
</li>
39+
<li>
40+
<h2>Cabelo + Barba</h2>
41+
<img src="../assets/cabelo+barba.jpg" alt="desenho de um cabelo e uma barba">
42+
<p class="produto-descricao">Pacote completo de cabelo e barba</p>
43+
<p class="produto-preco">R$ 35,00</p>
44+
</li>
45+
</ul>
46+
</main>
47+
</body>
48+
</html>

0 commit comments

Comments
 (0)