fdsw-github/index.html at e8599c5dcd39b63686ef2e1a892f0e7d08751ec1 · gsanchezd/fdsw-github · 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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!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 rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <title>Raquel Pérez</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
      integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="assets/css/estilos.css" />
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img src="assets/img/logo-2.png" class="img-fluid" />
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0 fs-5">
            <li class="nav-item">
              <a class="nav-link" href="#">Acerca de mi</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Trabajos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contacto</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <header id="Hero-Section" class="text-light text-start py-5 mt-5">
      <div class="container text-center">
        <h1 class="display-1 fw-bold text-dark">
          Mi pasión por el<br />
          Desarrollo Web
        </h1>
        <p class="my-5 text-dark">
          La decisión de transicionar al desarrollo front-end porque fue
          natural, y que creo en la importancia del desarrollo web como
          herramienta clave en la comunicación y el acceso a la información en
          el mundo moderno. El desarrollo web me permite combinar creatividad y
          lógica para construir interfaces que sean funcionales, atractivas y
          accesibles. Me emociona la idea de formar parte de campo en constante
          evolución, donde puedo aprender continuamente y crear soluciones que
          realmente marquen una diferencia en la experiencia de los usuarios.
        </p>
        <div class="mb-5 pb-5">
          <button class="btn btn-dark btn-lg btn-outline-info text-light me-4">
            Trabajos
          </button>
          <button class="btn btn-dark btn-lg btn-outline-info text-light me-4">
            Contacto
          </button>
        </div>
      </div>
    </header>

    <section id="Acerca-de-mi" class="container text-center my-5">
      <h2 class="display-3 fw-bold my-4">Acerca de mí</h2>

      <p class="my-4">
        Soy una profesional en transición al desarrollo front-end, con
        experiencia en roles administrativos y de atención al cliente. Estoy
        aprendiendo HTML, CSS, JavaScript y React, motivada por crear interfaces
        web funcionales y atractivas. Busco aportar soluciones innovadoras
        mientras desarrollo mi carrera en el mundo digital.
      </p>

      <div class="row">
        <div class="col-12 col-md-4">
          <i class="fas fa-camera fa-3x my-3"></i>
          <h3 class="my-3 fw-bold">Creatividad</h3>
          <p class="my-3">
            Disfruto encontrar soluciones innovadoras a problemas, combinar
            ideas de manera única y expresar conceptos de forma visual y
            funcional.
          </p>
        </div>
        <div class="col-12 col-md-4">
          <i class="fas fa-bullhorn fa-3x my-3"></i>
          <h3 class="my-3 fw-bold">Adaptabilidad</h3>
          <p class="my-3">
            Mi experiencia en roles variados me ha enseñado a trabajar
            eficientemente bajo distintas circunstancias y a responder con
            flexibilidad a las necesidades del equipo.
          </p>
        </div>
        <div class="col-12 col-md-4">
          <i class="far fa-map fa-3x my-3"></i>
          <h3 class="my-3 fw-bold">Analítica</h3>
          <p class="my-3">
            Mi experiencia en gestión de información y resolución de problemas
            me permite abordar tareas de manera lógica y estructurada,
            asegurando resultados efectivos.
          </p>
        </div>
      </div>
    </section>

    <section id="Mis-trabajos" class="my-5 p-5 bg-info">
      <h2 class="display-4 fw-bold text-center text-light mb-3">
        Mis proyectos
      </h2>

      <div class="row">
        <div class="col-12 col-sm-4 py-2">
          <div class="card">
            <div
              class="image-top"
              style="background-image: url(assets/img/landing-page.png)"
            ></div>
            <div class="card-body text-center">
              <h5 class="card-title fw-bold">Mi landing page</h5>
              <p class="card-text">
                En este proyecto pude crear una landing page que contenía un
                header con su barra de navegación, una sección principal con
                productos, una sección con una breve descripción de la tienda y
                un formulario de contacto. En su pie de página contenia el
                disclaimer de copyright.
              </p>
              <div class="d-flex justify-content-center">
                <button type="button" class="btn btn-outline-info">
                  Ver más
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-4 py-2">
          <div class="card">
            <div
              class="image-top"
              style="background-image: url(assets/img/iguana-page.png)"
            ></div>
            <div class="card-body text-center">
              <h5 class="card-title fw-bold">Iguana Page</h5>
              <p class="card-text">
                En esta página se trato de replicar la maqueta llamada "Iguana
                Page" para aplicar flexbox en todas las secciones. La misma esta
                estructurada con CSS en su totalidad y pudo replicar tando los
                colores, las medidas, y las fuentes de la misma. A su vez, se
                incluyeron iconos sacados de Font Awesome.
              </p>
              <div class="d-flex justify-content-center">
                <button type="button" class="btn btn-outline-info">
                  Ver más
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-4 py-2">
          <div class="card">
            <div
              class="image-top"
              style="background-image: url(assets/img/cupones-page.png)"
            ></div>
            <div class="card-body text-center">
              <h5 class="card-title fw-bold">Cuppon Page</h5>
              <p class="card-text">
                En esta página pude aprender a utilizar los principios de
                bootstrap para personalizar el sitio web y, por sobre todas la
                cosas, hacer el sitio lo más responsivo posible utilizando su
                sintáxis para modificar colores, márgenes, padding, e incluso
                aplicar flexbox y grids dentro del HTML.
              </p>
              <div class="d-flex justify-content-center">
                <button type="button" class="btn btn-outline-info">
                  Ver más
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="Contacto" class="container my-5">
      <h2 class="display-4 fw-bold text-center my-4">Contáctame</h2>

      <p class="text-center my-4 d-none d-md-block">
        ¡Me encantaría saber de ti! Si tienes alguna pregunta sobre mi y mis proyectos, no
        dudes en contactarme. ¡Estaré encantada de responderte!
      </p>

      <form>
        <div class="form-group mb-4">
          <label class="mb-2">Nombre</label>
          <input class="form-control" placeholder="Nombre" />
        </div>

        <div class="form-group mb-4">
          <label class="mb-2">Correo electrónico</label>
          <input class="form-control" placeholder="Correo electrónico" />
        </div>

        <div class="form-group">
          <label class="mb-2">Mensaje</label>
          <textarea
            class="form-control"
            placeholder="Escribe aquí tu mensaje"
          ></textarea>
        </div>

        <div class="my-3 text-end d-flex justify-content-center">
          <button class="btn btn-outline-info">Enviar</button>
        </div>
      </form>
    </section>

    <footer class="bg-dark text-center text-light p-4">
      <p class="mb-0">Raquel Pérez 2019. Todos los derechos reservados.</p>
    </footer>
  </body>
</html>