-
Notifications
You must be signed in to change notification settings - Fork 1
/
index-cinco.html
221 lines (178 loc) · 9.58 KB
/
index-cinco.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
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
<!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>
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Constanza Pérez</title>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- css -->
<link rel="stylesheet" href="css/styles-cinco.css">
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<h2 class="fs-4 fw-bold text-center m-0"><i class="fa-solid fa-terminal"></i> Constanza Pérez</h2>
</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="#">Lenguajes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Proyectos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- header -->
<header id="Hero-Section" class="text-light text-end py-5 mt-5">
<div class="container">
<div class="ms-auto col-12 col-md-7 ">
<h1 class="display-4 fw-bold my-5">
Desarrolador <br> Full Stack
</h1>
<p class="my-5">
Profesional de la tecnología encargada de diseñar, crear y mantener sitios web y aplicaciones web. <br> Mi trabajo implica la programación de códigos, la construcción de interfaces de usuario, la gestión de bases de datos y la optimización del rendimiento de los sitios.
</p>
<div class="mb-5 pb-5">
<button class="btn btn-lg btn-outline-info text-light me-4">Proyectos</button>
<button class="btn btn-lg btn-info text-light">Contacto</button>
</div>
</div>
</div>
</header>
<!-- seccion 1 -->
<section id="Acerca-de-mi" class="container text-center my-5">
<h2 class="display-5 fw-bold my-4">Lenguajes de Programación</h2>
<p class="my-4">
Los desarrolladores web utilizan lenguajes de programación como HTML, CSS, JavaScript, PHP, Python, entre otros, para desarrollar sitios web funcionales y atractivos.
</p>
<div class="row">
<div class="col-12 col-md-4" id="lenguajes">
<img src="assets/img-cinco/logo-html5" alt="logo html5">
<h3 class="my-3 fw-bold">HTML 5</h3>
<p class="my-3">
Se utiliza principalmente para crear y diseñar páginas web y aplicaciones web modernas. Aporta una serie de características y mejoras que permiten a los desarrolladores web crear experiencias en línea más ricas y avanzadas.
</p>
</div>
<div class="col-12 col-md-4" id="lenguajes">
<img src="assets/img/logo-css3" alt="logo CSS">
<h3 class="my-3 fw-bold">CSS 3</h3>
<p class="my-3">
se utiliza para dar estilo y formato a páginas web, permitiendo controlar la apariencia y la presentación de los elementos HTML..
</p>
</div>
<div class="col-12 col-md-4" id="lenguajes">
<img src="assets/img/logo-javascript.jpg" alt="">
<h3 class="my-3 fw-bold">JavaScript</h3>
<p class="my-3">
Los desarrolladores utilizan para hacer páginas web interactivas. Desde actualizar fuentes de redes sociales a mostrar animaciones y mapas interactivos, las funciones de JavaScript pueden mejorar la experiencia del usuario de un sitio web.
</p>
</div>
</div>
</section>
<!-- seccion 2 -->
<section id="Mis-trabajos" class="my-5 p-5">
<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-cinco/desafio-dos.jpg)"></div>
<div class="card-body">
<h5 class="card-title fw-bold">El Instinto</h5>
<p class="card-text">
Realicé la construcción de un landing page de la tienda online El Instinto. Para lograrlo, necesité implementar CSS utilizando archivos de hojas de estilo HTML de base para darle diseño al sitio.
</p>
<button type="button" class="btn btn-outline-info">
Ver más
</button>
</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-cinco/desafio-tres.jpg)"></div>
<div class="card-body">
<h5 class="card-title fw-bold">Iguana Page</h5>
<p class="card-text">
Costruí un langing page para una ONG dedicada a la protección de iguanas. <br>Para realizar este proyecto, apliqué mis conocimientos de posicionamiento en CSS y necesité combinarlo con flex.
</p>
<button type="button" class="btn btn-outline-info">
Ver más
</button>
</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-cinco/desafio-cuatro.jpg)"></div>
<div class="card-body">
<h5 class="card-title fw-bold">CUPPON</h5>
<p class="card-text">
Para desarrollar este proyecto, necesité implementar el sistema de grillas de Bootstrap, distribuyendo el contenido adecuadamente, para hacer una página web adaptable a distintos dispositivos.
</p>
<button type="button" class="btn btn-outline-info">
Ver más
</button>
</div>
</div>
</div>
</div>
</section>
<!-- seccion 3 -->
<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">
Soy una desarrolladora web altamente experimentada que crea sitios web <br> excepcionales y personalizados. <br> Mi enfoque en diseño atractivo, rendimiento óptimo y seguridad sólida garantiza que su proyecto esté en buenas manos. <br>¡Póngase en contacto para llevar su presencia en línea al siguiente nivel!
</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">Teléfono</label>
<input class="form-control" placeholder="Teléfono">
</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">
<button class="btn btn-info text-light">Enviar</button>
</div>
</form>
</section>
<!-- footer -->
<footer class="bg-dark text-center text-light p-4">
<p class="mb-0">Constanza Pérez 2023. <br>Todos los derechos reservados.</p>
</footer>
<!-- bootstrap -->
<script 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>
</body>
</html>