Skip to content

Commit 1309b13

Browse files
brunorodrisbrunorodris
committed
Barra de busca personalizada
1 parent 6fb5a4c commit 1309b13

File tree

3 files changed

+101
-0
lines changed

3 files changed

+101
-0
lines changed

‎15 - Barra de busca personalizada/buscar.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
let boxBuscar = document.querySelector('.buscar-box');
3+
let lupa = document.querySelector('.lupa-buscar');
4+
let btnFechar = document.querySelector('.btn-fechar');
5+
6+
lupa.addEventListener('click', ()=> {
7+
boxBuscar.classList.add('ativar')
8+
})
9+
10+
btnFechar.addEventListener('click', ()=> {
11+
boxBuscar.classList.remove('ativar')
12+
})

‎15 - Barra de busca personalizada/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Barra de busca personalizada</title>
9+
</head>
10+
<body>
11+
12+
<div class="buscar-box">
13+
<div class="lupa-buscar">
14+
<i class="bi bi-search"></i>
15+
</div><!--lupa-buscar-->
16+
17+
<div class="input-buscar">
18+
<input type="text" name="" id="" placeholder="Faça uma busca">
19+
</div><!--input-buscar-->
20+
21+
<div class="btn-fechar">
22+
<i class="bi bi-x-circle"></i>
23+
</div><!--btn-fechar-->
24+
</div><!--buscar-box-->
25+
26+
<script src="buscar.js"></script>
27+
</body>
28+
</html>

‎15 - Barra de busca personalizada/style.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: "Outfit",sans-serif;
6+
}
7+
8+
body{
9+
height: 100vh;
10+
background-color: #282828;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
}
15+
16+
.buscar-box{
17+
width: 80px;
18+
height: 80px;
19+
background-color: #fff;
20+
overflow: hidden;
21+
display: flex;
22+
justify-content: space-between;
23+
position: relative;
24+
transition: .5s;
25+
}
26+
27+
.buscar-box.ativar{
28+
width: 400px;
29+
}
30+
31+
.buscar-box .lupa-buscar, .buscar-box .btn-fechar{
32+
min-width: 80px;
33+
height: 80px;
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
cursor: pointer;
38+
}
39+
40+
.buscar-box .btn-fechar i{
41+
font-size: 20px;
42+
margin-left: 15px;
43+
}
44+
45+
.buscar-box .lupa-buscar i{
46+
font-size: 35px;
47+
}
48+
49+
.buscar-box .input-buscar{
50+
position: absolute;
51+
left: 80px;
52+
width: calc(100% - 120px);
53+
height: 100%;
54+
line-height: 80px;
55+
}
56+
57+
.buscar-box .input-buscar input{
58+
border: 0;
59+
outline: 0;
60+
font-size: 20px;
61+
}

0 commit comments

Comments
 (0)