getcomputerproject/index.html at main · devem-hub/getcomputerproject · 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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!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, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <title>GetComputer.com</title>
    <link rel="icon" type="image/x-icon" href="img/favicon.ico">
</head>
<body>
    <header class="main-header">
        <div class="container container--flex">
          <div class="main-header__container">
            <h1 class="main-header__title">COMPUTERS</h1>
            <span class="icon-menu" id="btn-menu"><i class="fas fa-bars"></i></span>
            <nav class="main-nav" id="main-nav">
              <ul class="menu">
                <li class="menu__item"><a href="" class="menu__link">INICIO</a></li>
                <li class="menu__item"><a href="" class="menu__link">ACERCA DE</a></li>
                <li class="menu__item"><a href="" class="menu__link">EMPRESAS</a></li>
                <li class="menu__item"><a href="" class="menu__link">TIENDA</a></li>
                <li class="menu__item"><a href="" class="menu__link">CONTACTO</a></li>
              </ul>
            </nav>
          </div>
          <div class="main-header__container">
            <span class="main-header__txt">Necesitas Ayuda</span>
            <p class="main-header__txt"><i class="fas fa-phone"></i> Llama 12345678099</p>
          </div>
          <div class="main-header__container">
            <a href="" class="main-header__link"><i class="fas fa-user"></i></a>
            <a href="" class="main-header__btn">Mi carrito <i class="fas fa-shopping-cart"></i></a>
            <input type="search" class="main-header__input" placeholder="Buscar productos"><i class="fas fa-search"></i>
          </div>
        </div>
      </header>
      <div class="container-slider">
        <div class="slider" id="slider">
          <div class="slider__section">
            <img src="img/img1.jpg" alt="" class="slider__img">
            <div class="slider__content">
              <h2 class="slider__title">¡Las Mejores Ofertas!</h2>
              <p class="slider__txt">Este invierno 50% de descuentof</p>
              <a href="" class="btn-shop">COMPRA AHORA</a>
            </div>
          </div>
          <div class="slider__section">
            <img src="img/img2.jpg" alt="" class="slider__img">
            <div class="slider__content">
              <h2 class="slider__title">¡Obter tu nueva computadora!</h2>
              <p class="slider__txt">Este invierno 50% de descuento</p>
              <a href="" class="btn-shop">COMPRA AHORA</a>
            </div>
          </div>
          <div class="slider__section">
            <img src="img/img3.jpg" alt="" class="slider__img">
            <div class="slider__content">
              <h2 class="slider__title">¡Las Mejores Ofertas!</h2>
              <p class="slider__txt">Este invierno 50% de descuento</p>
              <a href="" class="btn-shop">COMPRA AHORA</a>
            </div>
          </div>
          <div class="slider__section">
            <img src="img/img4.jpg" alt="" class="slider__img">
            <div class="slider__content">
              <h2 class="slider__title">¡Obter tu nueva computadora!</h2>
              <p class="slider__txt">Este invierno 50% de descuento</p>
              <a href="" class="btn-shop">COMPRA AHORA</a>
            </div>
          </div>
        </div>
        <div class="slider__btn slider__btn--right" id="btn-right">&#62;</div>
        <div class="slider__btn slider__btn--left" id="btn-left">&#60;</div>
      </div>
      <main class="main">
        <div class="container">
          <h2 class="main-title">Nuevos Productos</h2>
          <section class="container-products">
            <div class="product">
              <img src="img/product1.png" alt="" class="product__img">
              <div class="product__description">
                <h3 class="product__title">HP Enterprise</h3>
                <span class="product__price">$10,158.99</span>
              </div>
              <i class="product__icon fas fa-cart-plus"></i>
            </div>
            <div class="product">
              <img src="img/product2.png" alt="" class="product__img">
              <div class="product__description">
                <h3 class="product__title">Standar Dell</h3>
                <span class="product__price">$8,359.9</span>
              </div>
              <i class="product__icon fas fa-cart-plus"></i>
            </div>
            <div class="product">
              <img src="img/product3.png" alt="" class="product__img">
              <div class="product__description">
                <h3 class="product__title">Basic Gaming HP</h3>
                <span class="product__price">$14,989.99</span>
              </div>
              <i class="product__icon fas fa-cart-plus"></i>
            </div>
            <div class="product">
              <img src="img/product4.png" alt="" class="product__img">
              <div class="product__description">
                <h3 class="product__title">Dell Enterprise</h3>
                <span class="product__price">$11,309.99</span>
              </div>
              <i class="product__icon fas fa-cart-plus"></i>
            </div>
          </section>
          <section class="container__testimonials">
            <h2 class="section__title">Testimonios</h2>
            <h3 class="testimonial__title">Evelyn G. </h3>
            <p class="testimonial__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, perferendis, animi! Numquam quasi similique, fuga sint. Nulla veritatis quia nemo, magni, necessitatibus impedit inventore, provident culpa repellat esse a quo.</p>
          </section>

          <div class="container-editor">
            <div class="editor__item">
              <img src="img/test1.jpg" alt="" class="editor__img">
              <p class="editor__circle">LOS MEJORES PRODUCTOS</p>
            </div>
            <div class="editor__item">
              <img src="img/test2.jpg" alt="" class="editor__img">
              <p class="editor__circle">LOS MEJORES PRODUCTOS</p>
            </div>
          </div>
          <section class="container-tips">
            <div class="tip">
              <i class="far fa-hand-paper"></i>
              <h2 class="tip__title">Satisfaccion Garantisada</h2>
              <p class="tip__txt">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit</p>
              <a href="" class="btn-shop">Compra Ahora</a>
            </div>
            <div class="tip">
             <i class="fas fa-rocket"></i>
              <h2 class="tip__title">Compra Rapida</h2>
              <p class="tip__txt">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
              <a href="" class="btn-shop">Compra Ahora</a>
            </div>
            <div class="tip">
              <i class="fas fa-cog"></i>
              <h2 class="tip__title">Alta Durabilidad</h2>
              <p class="tip__txt">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
              <a href="" class="btn-shop">Compra Ahora</a>
            </div>
          </section>
        </div>
      </main>
      <footer class="main-footer">
        <div class="footer__section">
          <h2 class="footer__title">Sobre nosotros</h2>
          <p class="footer__txt">Curabitur non nulla sit amet nislinit tempus convallis quis ac lectus. lac inia eget consectetur sed, convallis at tellus. Nulla porttitor accumsana tincidunt.</p>
        </div>
        <div class="footer__section">
          <h2 class="footer__title">Localidad :</h2>
          <p class="footer__txt">0926 4a Condominio, Avenida Papagayo, Ciudad de Puebla</p>
          <h2 class="footer__title">Contacto</h2>
          <p class="footer__txt">Phone : +121 098 8907 9987</p>
          <p class="footer__txt">Email : info@example.com</p>
        </div>
        <div class="footer__section">
          <h2 class="footer__title">Enlaces Rapidos</h2>
          <a href="" class="footer__link">Inicio</a>
          <a href="" class="footer__link">Acera de</a>
          <a href="" class="footer__link">Error</a>
          <a href="" class="footer__link">Tienda</a>
          <a href="" class="footer__link">Contacto</a>
        </div>
        <div class="footer__section">
          <h2 class="footer__title">Suscríbete a tus ofertas</h2>
          <p class="footer__txt">Al suscribirse a nuestra lista de correo, siempre recibirá nuestras últimas noticias y actualizaciones.</p>
          <input type="email" class="footer__input" placeholder="Ingresa tu email">
        </div>
        <p class="copy">© 2022 Computers. Todos los derechos reservados, proyecto BUAP - Administracion de Proyectos | Deseñado por EAMM & JJMM</p>
      </footer>
      <script src="js/slider.js"></script>
    </body>
</html>