-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
189 lines (189 loc) · 10.2 KB
/
Copy pathindex.html
File metadata and controls
189 lines (189 loc) · 10.2 KB
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
<!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">
<!-- Links externos CDN´s -->
<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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<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" />
<!-- Fin link externos -->
<title>Néstor Muñoz</title>
<!-- Link internos -->
<link rel="stylesheet" href="./assets/css/estilos.css">
<!-- Fin link imternos -->
</head>
<body>
<!-- Header -->
<header id="Hero-Section" class="text-light text-start py-5">
<div id="Container_Frase" class="container">
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<a class="navbar-brand" href="#">
<img src="assets/img/logo_nestor_mr.png" class="img-fluid" alt="Nestor Muñoz">
</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 id="menu" class="navbar-nav ms-auto mb-2 mb-lg-0 fs-5">
<li class="nav-item">
<a class="nav-link" href="#Acerca-de-mi">Acerca de mi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Mis-trabajos">Mi trabajo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Contacto">Hablemos</a>
</li>
</ul>
</div>
</nav>
<div id="FraseHeader" class="ms-auto col-12 col-md-7 ">
<h1>Tecnologia<br> y negocios.</h1>
<div class="mb-5 pt-5">
<a href="#Acerca-de-mi"><button class="btn btn-lg btn-outline-info text-light me-4">Comencemos</button></a>
</div>
</div>
</div>
</header>
<!-- Fin Header -->
<!-- Quien es -->
<section id="Acerca-de-mi" class="container text-center my-5 pt-5">
<h2 class="display-3 fw-bold my-4 pt-5">¿Quien es Néstor Muñoz?</h2>
<p class="my-4">
<strong>Ingeniero en administración / Especialista en marketing / Front-end developer / Networker.</strong>
<br>_<br>
"Hay <strong>3 habilidades fundamentales</strong> para el desarrollo profesional."
</p>
<div class="row quien-es-row">
<div class="col-12 col-md-4">
<i class="fas fa-camera fa-3x my-3"></i>
<h2 class="my-5 fw-bold" >"Branding"</h2>
<h3 class="my-3 fw-bold">La mejor version de ti.</h3>
<img src="https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExd2tvM2RjcWFxZDFneDZuMXJzMzhmcXljOWlxYTBqazZlMTdtZjVjdCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/bdGdF94ymhiYo/giphy.gif" height="150px" style="padding-top: 10px;" alt="" srcset="">
<p class="my-3">
La imagen si importa, "como te ven, te tratar". Ocupate de ti como la persona importante que eres.
</p>
</div>
<div class="col-12 col-md-4">
<i class="fas fa-bullhorn fa-3x my-3"></i>
<h2 class="my-5 fw-bold" >"SEO y SEM"</h2>
<h3 class="my-3 fw-bold">Te busqué en Google!<br></h3>
<img src="https://media.tenor.com/dp_hQBGT0rIAAAAM/think-smart.gif" height="150px" style="padding-top: 10px;" alt="" srcset="">
<p class="my-3">
Si logras estar en las primeras posiciones de busquedas en Google, nadie va a dudar de tus habilidades.
</p>
</div>
<div class="col-12 col-md-4">
<i class="far fa-map fa-3x my-3"></i>
<h2 class="my-5 fw-bold" >"Fullstack", pero...</h2>
<h3 class="my-3 fw-bold"><span class="Span" style="display: ruby;">..."con imaginación!"</span></h3>
<img src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMmNyb212djl4dzdmdHBvczl1aHRkdGw3NmZxNWVubmtrbjlmeHRnNCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/QFsPtlrcMlS8w/giphy.gif" height="150px" style="padding-top: 10px;" alt="" srcset="">
<p class="my-3">
Los primero 5 segundos impactan en a la memeoria, haz que tus proyectos tengan valor desde el principio.
</p>
</div>
</div>
</section>
<!-- Fin Quien es -->
<!-- Portafolio de proyectos -->
<section id="Mis-trabajos" class="my-5 p-5 bg-info">
<h2 class="display-4 fw-bold text-center text-light mb-3 pt-5">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/SS-CUPPON.png)"></div>
<div class="card-body">
<h5 class="card-title fw-bold">"Cuppon" - web de descuentos turistcos.</h5>
<p class="card-text">
Web de cupones y descuentos para servicios de turismo en Chile, creada con HTML, Bootstrap y CSS personalizado.
</p>
<a href="./portafolio.html">
<button type="button" class="btn btn-outline-info">
Ir a "Proyectos"
</button>
</a>
</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/SS-VR-Con2024.png)"></div>
<div class="card-body">
<h5 class="card-title fw-bold">"Virtual Reality Convention" - Landing Page</h5>
<p class="card-text">
Web informativa de evento de tecnologia, un banner y columnas (row) con "horarios y charlas" modificadas con CSS.
</p>
<a href="./portafolio.html">
<button type="button" class="btn btn-outline-info">
Ir a "Proyectos"
</button>
</a>
</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/SS-Mario3-Game.png)"></div>
<div class="card-body">
<h5 class="card-title fw-bold">"Mapache Mario" - Web interactiba.</h5>
<p class="card-text">
Proyecto personal sin rumbo aparente, si desean colaborar con el proceso con gusto pueden hacer fork al proyecto.
</p>
<a href="./portafolio.html">
<button type="button" class="btn btn-outline-info">
Ir a "Proyectos"
</button>
</a>
</div>
</div>
</div>
<div class="d-grid gap-2 col-6 mx-auto pt-5">
<a id="btn-proyectos" href="./portafolio.html"><button class="btn btn-light" type="button"><b>Ver todos los proyectos</b></button></a>
</div>
</div>
</section>
<!-- Fin Portafolio de proyectos -->
<!-- Contacto -->
<section id="Contacto" class="container my-5">
<h2 class="display-4 fw-bold text-center my-4">Tu no encuentras a Néstor, Néstor te encuentra a ti.👀</h2>
<p class="text-center my-4 d-none d-md-block">⬇️ Dejame tus datos en este formulario y te contactaré a la brevedad.✌️</p>
<form>
<div class="form-group mb-4">
<label class="mb-2">Nombre y apellido</label>
<input class="form-control" placeholder="Loki hijo de Odin">
</div>
<div class="form-group mb-4">
<label class="mb-2">Numero de Whatsapp</label>
<input class="form-control" type="number" placeholder="+569 xx xx xx xx" />
</div>
<div class="form-group">
<label class="mb-2">Cuentame:</label>
<textarea class="form-control" placeholder="Necesito una web para mi negocio! 😊"></textarea>
</div>
<div class="my-3 text-end">
<button class="btn btn-info text-light">Enviar</button>
</div>
</form>
</section>
<!-- Fin Contacto -->
<!-- Footer -->
<footer class="bg-dark text-center text-light p-4">
<p class="mb-0">Portafolio creado con <span style="color: red;">♥</span> por Néstor Muñoz<br>Todos los derechos reservados / 2024.</p>
</footer>
<!-- Fin footer -->
<!-- Scripts -->
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous">
</script>
<!-- Fin Scripts -->
</body>
</html>