-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (131 loc) · 5.81 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="shortcut icon" href="IMG/picpay.png" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/reset.css">
<link rel="stylesheet" href="CSS/style.css">
<title>PicPro</title>
</head>
<body>
<header>
<div class="container flex">
<img src="IMG/picpro.png" alt="Logo do PicPro">
<img src="IMG/kenzie.png" alt="Logo da Kenzie">
</div>
</header>
<main>
<section id="user" class="container normalText">
<div class="info vertical spaceBtwe flex">
<div class="flex">
<img src="IMG/user.png" alt="Icone do usuário">
<p>Olá, <strong>@Gabls</strong></p>
</div>
<div>
<img src="IMG/presente.png" alt="Icone do usuário">
<img src="IMG/chat.png" alt="Icone do usuário">
</div>
</div>
<div class="spaceBtwe flex">
<p>Saldo PicPay <strong>R$0,00 <img src="IMG/visualizar.png" alt="Icone para visualizar o saldo"></strong></p>
<button class="brdRadius">Extrato</button>
</div>
<ul class="spaceBtwe flex smallText">
<li id="0" class="brdRadius">
<img id="0" src="IMG/qrcode.png" alt="Icone do QR Code">
<p><strong id="0">QR Code</strong></p>
</li>
<li id="1" class="brdRadius">
<img id="1" src="IMG/pix.png" alt="Icone do Pix">
<p><strong id="1" >Pix</strong></p>
</li>
<li id="2" class="brdRadius">
<img id="2" src="IMG/codigo.png" alt="Icone do Boleto">
<p><strong id="2">Pagar Boleto</strong></p>
</li>
<li id="3" class="brdRadius">
<img id="3" src="IMG/cobrar.png" alt="Icone de Pagar Boleto">
<p><strong id="3">Cobrar</strong></p>
</li>
</ul>
</section>
<section id="content">
<div class="container normalText">
<div id="payment">
<p class="block brdRadius bigText"><strong>Selecione a forma de pagamaneto</strong></p>
<img src="IMG/banner.png" alt="Banner do PicPay">
</div>
<div id="qrcode" data-id="0" class="centerText off">
<img src="IMG/qrcode-code.png" alt="QR Code">
<p class="smallText"><strong>@Gabls</strong></p>
<button class="brdRadius normalText">Cobre um amigo</button>
<a href="#"><strong>Compartilhar meu código</strong></a>
</div>
<div id="pix" data-id="1" class="off">
<img src="IMG/pix-logo.png" alt="Logo do Pix">
<div class="block brdRadius vertical flex">
<img src="IMG/pix1.png" alt="Icone opção enviar">
<p>Envie por CPF/CNPJ, telefone, e-mail ou chave aleatória</p>
</div>
<div class="block brdRadius vertical flex">
<img src="IMG/pix2.png" alt="Icone opção inserir">
<p>Insira um código Pix copia e cola para enviar um pagamento</p>
</div>
</div>
<div id="boleto" data-id="2" class="off">
<img src="IMG/boleto.png" alt="Icone do Boleto">
<h2 class="bigText"><strong>Pagar com código de barras</strong></h2>
<p>Você pode parcelar em até 12x no cartão ou usar seu saldo em carteira para pagar à vista.</p>
<input type="text" placeholder="Insira o código de barras" class="brdRadius">
</div>
<div id="demand" data-id="3" class="off">
<img src="IMG/cobrar-image.png" alt="Icone do Cobrar">
<h2 class="bigText"><strong>Cobrar</strong></h2>
<p>Divida a conta com os amigos de forma fácil.</p>
<div class="block vertical flex brdRadius">
<img src="IMG/picpay.png" alt="Logo do PicPay">
<p><strong>Amigos do PicPay</strong>Divida e acompanhe um gasto com pessoas por aqui</p>
</div>
</div>
</div>
</section>
</main>
<footer>
<ul class="container vertical flex spaceBtwe">
<li>
<a>
<img src="IMG/inicio.png" alt="Icone do início">
<p>Início</p>
</a>
</li>
<li>
<a>
<img src="IMG/carteira-icon.png" alt="Icone da carteira">
<p>Carteira</p>
</a>
</li>
<li id="mid">
<a>
<img src="IMG/pagar.png" alt="Icone de pagar">
<p>Pagar</p>
</a>
</li>
<li>
<a>
<img src="IMG/notificacao.png" alt="Icone de notificação">
<p>Notificações</p>
</a>
</li>
<li>
<a>
<img src="IMG/bolsa.png" alt="Icone de bolsa">
<p>Store</p>
</a>
</li>
</ul>
</footer>
<script src="JS/script.js"></script>
</body>
</html>