-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcheck.html
126 lines (114 loc) · 4.35 KB
/
check.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Checkout Techshop</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/open-iconic-bootstrap.css">
</head>
<style> .form-control:invalid {
border: 1px solid #cc0000;
}
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html">Techshop</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="sobre.html">Sobre</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Políticas.html">Políticas da empresa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contato.html">Entre em contato</a>
</li>
</ul>
</nav>
<div class="container">
<div class="container">
</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="container">
<h1 class="display-4">Ótima escolha!</h1>
<p class="lead">Obrigado por comprar na Techshop!
Preencha seus dados para efetivar a compra.</p>
</div>
</div>
<div class="container">
<div class="card mb-3">
<div class="container">
</div>
<form>
<fieldset>
<legend>Dados pessoais</legend>
<div class="form-group">
<label for="nome">Nome completo</label>
<input type="text" class="form-control" id="nome" name="nome" autofocus required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="[email protected]" required>
</div>
<div class="form-group">
<label for="cpf">CPF</label>
<input type="text" class="form-control" id="cpf" name="cpf" placeholder="000.000.000-00">
</div>
<div class="form-group custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="newsletter"
value="sim" checked>
<label class="custom-control-label" for="newsletter">
Quero receber Promos da Techshop.
</label>
</div>
</fieldset>
<fieldset>
<legend>Cartão de crédito</legend>
<div class="form-group">
<label for="numero-cartao">Número - CVV</label>
<input type="text" class="form-control" id="numero-cartao" name="numero-cartao">
</div>
<div class="form-group">
<label for="bandeira-cartao">Bandeira</label>
<select class="custom-select" id="bandeira-cartao">
<option disabled selected>Selecione uma opção...</option>
<option value="master">MasterCard</option>
<option value="visa">VISA</option>
<option value="amex">American Express</option>
</select>
</div>
<div class="form-group">
<label for="validade-cartao">Validade</label>
<input type="month" class="form-control" id="validade-cartao" name="validade-cartao">
</div>
</fieldset>
<button type="submit" class="btn btn-primary mb-3">
<span class="oi oi-thumb-up"></span>
Confirmar Pedido
</button>
</form>
<div class="card-header">
<div class="container">
<h2>Sua compra</h2>
</div>
<div class="card-body">
<div class="container">
<div class="container">
</div>
</div>
</div>
<dl>
<img src="img/Processador.png" alt="Processador"
class="img-thumbnail mb-3">
<dt>Produto</dt>
<dd>Processador INTEL I5</dd>
<dt>Cor</dt>
<dd>...</dd>
<dt>Preço</dt>
<dd>R$ 270,00</dd>
</dl>
</body>
<link rel="stylesheet" href="css/checkout.css">
</html>