1-JavaScript/index.html at EntregaFinal · alanbuep/1-JavaScript · 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
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
<!DOCTYPE html>
<html lang="en">
<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 favicon logo -->
    <link rel="shortcut icon" href="img/TG.png" type="image/x-icon">
    <!-- Link Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <!-- Link CSS self -->
    <link rel="stylesheet" href="css/styles.css">
    <!-- Link fuentes texto -->
    <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=Bruno+Ace+SC&display=swap" rel="stylesheet">
    <!-- AOS -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <!-- Sweetalert -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Etiquetas SEO on page -->
    <meta name="description" content="Te damos la bienvenida a la tienda gamer y de computación más grande del pais. Aquí encontraras hardware de última generación al menor precio de mercado.">
    <!-- Keywords -->
    <meta name="keywords" content="hardware, gamer, tienda gamer, componentes, monitores, notebooks, teclados, mouse, placas de video, mother, procesadores, amd, intel, nvidia, ati, asus, acer, samsung, radeon, 4090, 3070, ram, logitech, sillas, lenovo, dell, juegos">
    <title>TiendaGamer | Inicio</title>
</head>
<body>
    <header class="header">

        <section class="marcas_header container-fluid">
            <div class="caja_marcas_header">
                <img src="img/nav_amd.png" alt="">
            </div>

            <div class="caja_marcas_header">
                <img src="img/nav_corsair.png" alt="">
            </div>

            <div class="caja_marcas_header">
                <img src="img/nav_geforce.png" alt="">
            </div>

            <div class="caja_marcas_header">
                <img src="img/nav_intel.png" alt="">
            </div>

            <div class="caja_marcas_header">
                <img src="img/nav_logitech.png" alt="">
            </div>

            <div class="caja_marcas_header">
                <img src="img/ati.png" alt="">
            </div>

            <div class="caja_marcas_header">
                <img src="img/samsung.svg" alt="">
            </div>
        </section>

        <!-- Bienvenida -->
        <section class="logo_bien_header">
            <div class="logo">
                <a href="index.html"><img src="img/TG.png"></a>
            </div>

            <div class="container" data-aos="fade-down"
            data-aos-easing="linear"
            data-aos-duration="1500">
                <h1>Bienvenidos a Tienda Gamer</h1>
            </div>
        </section>

        <!-- Menu de navegacion -->
        <div class="container">
            <form id="searchForm" class="d-flex" role="search">
                <input id="searchInput" class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>

        <nav class="navbar navbar-expand-lg column">
            <div class="btn-group container-fluid" role="group" aria-label="Basic outlined example">
                <a href="index.html" class="btn btn-primary btn-secondary">Inicio</a>
                <button id="verTodo" type="button" class="btn btn-primary btn-secondary">Ver todo</button>
                <button id="verCarrito" type="button" class="btn btn-primary btn-secondary">Ver Carrito</button>
                <button id="addProducto" type="button" class="btn btn-primary btn-secondary">Agregar Productos</button>
                <button id="delProducto" type="button" class="btn btn-primary btn-secondary">Eliminar Productos</button>
            </div>
        </nav>
    </header>

        <!-- Banner -->
        <section class="banner">
            <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="img/banner1.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="img/banner2.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="img/banner3.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="img/banner4.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="img/banner5.jpg" class="d-block w-100" alt="...">
                </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
                </button>
            </div>
        </section>

        <!-- Productos -->
        <section id="mostrarProductos" class="container-fluid row gap-4 justify-content-center text-center"></section>

    <footer>
        <section class="logo_bien_header">
            <div class="logo">
                <a href="index.html"><img src="img/TG.png"></a>
            </div>

            <div class="container">
                <p>Seguinos en nuestras redes</p>
                <a href="https://www.instagram.com/" target="_blank">
                    <img class="social_media" src="img/instagram-logo.svg" alt="">
                </a>
            </div>
        </section>

        <section class="text-center">
            <div>
                <p>Derechos de autor © 2023 Tienda Gamer</p>
            </div>
        </section>
    </footer>

    <a class="contacto" href="https://web.whatsapp.com/" target="_blank">
        <img class="wapp" src="img/whatsapp-icon.svg" alt="">
    </a>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
    <script src="functions.js"></script>
    <script src="main.js"></script>
    <!-- script AOS -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script> AOS.init();</script>
</body>
</html>