-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (109 loc) · 5.4 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Gerador de Cartão - HTML, CSS E JS</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='css/estilo_index.css'>
<link rel='stylesheet' type='text/css' media='screen' href='css/estilo_footer.css'>
<script src='js/main.js'></script>
</head>
<body>
<div class="area-do-conteudo">
<div class="conteudo">
<div class="area-dos-dados">
<div class="centralizar-area-titulo">
<div class="titulo-topo"><p>Gerador de Cartão</p></div>
</div>
<div class="cores">
<button id="cor1" onclick="mudar_cor1() " title="Defina a cor do seu cartão." alt="Vermelho"></button>
<button id="cor2" onclick="mudar_cor2() "></button>
<button id="cor3" onclick="mudar_cor3() "></button>
<button id="cor4" onclick="mudar_cor4() "></button>
<button id="cor5" onclick="mudar_cor5() "></button>
</div>
<div class="centralizar-area-dos-dados">
<div class="inserir-dados">
<div class="dados">
<input type="text" id="numero_cartao" name="num1" onkeyup="dados_input_numero_cartao()" maxlength="19" autofocus placeholder="NÚMERO DO CARTÃO"/>
<input type="text" id="nome_titular" onkeyup="dados_input_nome_titular()" maxlength="30" placeholder="NOME DO TITULAR"/>
<input type="text" id="expiracao" onkeyup="dados_input_expirar()" maxlength="4" placeholder="EXPIRAÇÃO"/>
<input type="text" id="cvv" onkeyup="dados_input_cvv()" maxlength="3" placeholder="CVV"/><br><br>
<button id="adicionar" onclick="adicionar()">ADICIONAR</button>
</div>
</div>
<div class="cartao-gerado">
<div class="flip">
<div class="cartao-frente">
<div class="topo">
<div class="sensor">
<img src="img/wifi.svg" alt="bandeira">
</div>
<div class="bandeira">
<img src="img/visa.svg" alt="bandeira">
</div>
</div>
<div class="meio">
<div class="numero-cartao">
<h3 id="numero">1111 2222 3333 4444</h3>
</div>
</div>
<div class="fim">
<div class="dados-titular">
<p>CARD HOLD NAME</p>
<h3 id="nome">KLEBER BELO</h3>
</div>
<div class="data-expirar">
<p>EXPIRY DATE</p>
<h3 id="expirar">10/22</h3>
</div>
<div class="cvv">
<p>CVV</p>
<h3 id="cvv">***<h3>
</div>
<div class="chip">
<img src="img/chip.svg" alt="bandeira">
</div>
</div>
</div>
<div class="cartao-verso">
<div class="info-verso">
<p>Atendimento ao Cliente</p>
<p>+55 (71)9.8361-8345</p>
</div>
<div class="tarja-magnetica">
</div>
<div class="assinatura">
<p>Assinatura autorizada</p>
</div>
<div class="cvv-2" title="Código de segurança">
<p>CVV</p>
<h3 id="c-cvv">***<h3>
</div>
<div class="tipo-cartao">
<p>Platinum</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="area2">
<footer class="footer-distributed">
<div class="footer-right">
<a href="https://www.linkedin.com/in/kleber-belo-da-silva-1a693a224/"><img src="img/linkedin.svg" alt="Linkedin" style="width:100%"></a>
<a href="https://api.whatsapp.com/send?phone=5571983619345"><img src="img/whatsapp.svg" alt="Whatsapp" style="width:100%"></a>
</div>
<div class="footer-left">
<p class="footer-links">
<a class="link-1" href="#">INICIO</a>
</p>
<p>Desenvolvido por: Kleber Belo © 2022</p>
</div>
</footer>
</section>
</body>
</html>