proyectofinal/cart.html at main · rodmacPy/proyectofinal · GitHub

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
<!DOCTYPE html>
<html lang="es">
<head>
    <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="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@700&family=Mulish:wght@400;700&display=swap"
    rel="stylesheet">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/styleCart.css">
    <title>Carrito - Rodmac Emprendimientos</title>
</head>
<body>
    <div id="alert">
        <section class="tarjeta">
            <div class="tarjeta-frente">
				<div class="logoBanco"  id="logoMarca"></div>
				<img src="img/chip.png" alt="chip" class="chip">
				<div class="datos">
					<div class="grupo" id="numero">
						<p id="numeroTarjeta">#### #### #### #### ####</p>
					</div>
					<div class="grupo-datos">
						<div class="grupo" id="nombre">
							<p class="label">Nombre:</p>
							<p class="nombre">name username</p>
						</div>
						<div class="grupo" id="vto">
							<p class="label">Vencimiento:</p>
							<p class="vto"><span class="mm">MM</span>/<span class="aa">AA</span></p>
						</div>
					</div>
				</div>
			</div>
        </section>
        <form class="form">
            <div class="content-form">
                <div class="grupo">
                    <label for="nTarjeta" class="form_label">Número de tarjeta:</label>
                    <input type="text" name="nTarjeta" id="nTarjeta" class="form_input" maxlength="19" autocomplete="off"/>
                </div>
                <div class="grupo">
                    <label for="nombreinput" class="form_label">Nombre (como figura en la tarjeta):</label>
                    <input type="text"  name="nombreinput" id="nombreinput" class="form_input" maxlength="19" placeholder="Nombre" autocomplete="off">
                </div>
                <div class="grupo-vencimiento">
                    <div class="grupo">
                        <label for="vtoTarjeta" class="form_label">Vencimiento</label>
                        <div class="vtoForm">
                            <input type="text" name="mm" id="mm" class="form_input" maxlength="2" placeholder="MM" autocomplete="off">
                            <input type="text" name="aa" id="aa" class="form_input" maxlength="2" placeholder="AA" autocomplete="off">
                        </div>
                    </div>
                    <div class="grupo">
                        <label for="cvv" class="form_label">CCV</label>
                        <input type="text"  name="cvv" id="cvv" class="form_input" maxlength="3" placeholder="CVV" autocomplete="off">
                    </div>
                </div>
            </div>
            <button id="btn_confirmar" class="btn_confirmar">CONFIRMAR</button>
        </form>
    </div>
    <header>
        <h1>RODMAC</h1>
        <a href="index.html" class="principal">
        <img src="./img/home.png" />Inicio</a>
    </header>
    <main>

        <section class="containerProduct">
            <h1>Carrito</h1>
            <div id="order-items">


            </div>

        </section>
    </main>
    <footer>
        <p id="prueba">Total a pagar: 0 PYG</p>
        <button id="pagar">Realizar Pago</button>
    </footer>
    <template id="template-card">
        <div class="card">
            <img src="" alt="" class="img-card ">
            <div class="product-card">
                <h5>Titulo</h5>
                <p class="description">Descripcion</p>
                <p class="price">precio</p>
                <button class="btn btn-2 hover-opacity"><span>Quitar</span></button>
            </div>
        </div>
    </template>
    <script src="js/cart.js"></script>
</body>
</html>