-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (103 loc) · 3.13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<title>LabShoppingList</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icone-aba-01.png">
<style>
@font-face {
font-family: 'Roboto-Black';
src: url('Roboto-Black.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto-Light';
src: url('Roboto-Light.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto-Thin';
src: url('Roboto-Thin.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto-Condensed';
src: url('Roboto-Condensed.ttf') format('truetype');
}
.cardPrincipal{
box-shadow: 2px 4px 12px rgb(0 0 0 / 8%);
height: fit-content;
width: fit-content;
border-radius: 18px;
margin: 0 auto;
padding: 30px;
color: black;
font-family: 'Roboto-Light';
}
.soma{
font-family: 'Roboto-Condensed';
color: white;
}
.principal{
width: 50%;
margin: 0 auto;
}
body{
background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
}
.lista{
text-Align: center;
float: under;
margin: 20px auto;
height: fit-content;
width: fit-content;
border-radius: 18px;
padding: 20px;
color: white;
box-shadow: 2px 4px 12px rgb(0 0 0 / 8%);
font-family: 'Roboto-Condensed';
}
.listaUL{
display: flex;
flex-direction: column;
margin: 15px;
padding: 10px;
border-bottom: 1px solid #f5f5f7;
border-top: 1px solid #f5f5f7;
}
header{
font-family: 'Roboto-Condensed';
color: white;
}
</style>
</head>
<body id = "fundo">
<header style="text-align: center; margin:0 auto;">
<h2>LabShoppingList</h2>
</header>
<main style="text-align: center; margin:0 auto;" class = "principal">
<section id="lista-de-itens">
<div class="cardPrincipal">
<input type="text" id="item" size="30px" placeholder="Digite um produto..."></input>
<button id="acao">Adicionar Item</button>
</div>
<div id="divLista" class="lista">
<ul id="listaItens" class="listaUL">
<span>
Lista de Compras
</span>
</ul>
</div>
<div id="somatorio" class="soma">
<span>
Valor Total dos Itens Listados:
</span>
<span id = "resultado">
R$ 0
</span>
</div>
</section>
</main>
<script src="index.js">
</script>
</body>
</html>