-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
172 lines (158 loc) · 13.9 KB
/
contact.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hola 👋 mi nombre es Selene González | @gonzalezseledev</title>
<link rel="apple-touch-icon" sizes="180x180" href="./assets/images/favicon/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="512x512" href="./assets/images/favicon/android-chrome-512x512.png">
<link rel="apple-touch-icon" sizes="192x192" href="./assets/images/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon//favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon//favicon-16x16.png">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="stylesheet" href="./assets/pages/contact.css">
</head>
<body>
<div class="loader-section">
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><clipPath id="edfb101d4f"><path d="M 50.296875 27.578125 L 324.796875 27.578125 L 324.796875 347 L 50.296875 347 Z M 50.296875 27.578125 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#edfb101d4f)"><path fill="#5EC4C8" d="M 54.042969 108.332031 C 53.472656 108.691406 52.957031 109.117188 52.492188 109.605469 C 52.03125 110.09375 51.632812 110.628906 51.308594 111.21875 C 50.980469 111.804688 50.730469 112.425781 50.558594 113.078125 C 50.386719 113.726562 50.300781 114.390625 50.296875 115.0625 L 50.296875 263.210938 C 50.300781 263.898438 50.386719 264.574219 50.566406 265.238281 C 50.742188 265.902344 51 266.53125 51.34375 267.128906 C 51.683594 267.726562 52.09375 268.269531 52.578125 268.757812 C 53.058594 269.25 53.597656 269.667969 54.1875 270.019531 L 182.78125 345.878906 C 183.390625 346.226562 184.035156 346.496094 184.710938 346.675781 C 185.390625 346.859375 186.082031 346.949219 186.785156 346.949219 C 187.488281 346.949219 188.179688 346.859375 188.859375 346.675781 C 189.539062 346.496094 190.183594 346.226562 190.792969 345.878906 L 320.59375 269.992188 C 321.191406 269.644531 321.734375 269.226562 322.222656 268.738281 C 322.707031 268.25 323.125 267.707031 323.46875 267.105469 C 323.8125 266.507812 324.074219 265.878906 324.253906 265.210938 C 324.429688 264.542969 324.519531 263.867188 324.519531 263.175781 L 324.769531 115.019531 C 324.765625 114.339844 324.679688 113.671875 324.503906 113.015625 C 324.332031 112.359375 324.078125 111.738281 323.746094 111.144531 C 323.414062 110.554688 323.011719 110.011719 322.542969 109.523438 C 322.070312 109.035156 321.546875 108.609375 320.96875 108.253906 L 190.941406 28.832031 C 190.320312 28.445312 189.652344 28.152344 188.945312 27.953125 C 188.242188 27.75 187.519531 27.648438 186.785156 27.648438 C 186.050781 27.648438 185.332031 27.75 184.625 27.953125 C 183.917969 28.152344 183.253906 28.445312 182.628906 28.832031 Z M 186.832031 44.894531 L 308.925781 119.5 L 308.703125 258.679688 L 186.832031 329.878906 L 66.160156 258.695312 L 66.160156 119.480469 Z M 186.832031 44.894531 " fill-opacity="1" fill-rule="nonzero"/></g><path fill="#5EC4C8" d="M 83.917969 252.484375 C 112.910156 269.085938 147.121094 288.730469 181.277344 308.480469 C 185.503906 310.925781 189.066406 310.917969 193.230469 308.480469 C 203.519531 302.484375 213.820312 296.5 224.128906 290.527344 C 246.0625 277.796875 268.742188 264.644531 290.890625 251.460938 C 293.082031 250.152344 294.84375 245.984375 295.101562 242.890625 C 295.511719 238.109375 295.4375 233.175781 295.386719 228.402344 C 295.339844 225.027344 295.296875 221.542969 295.386719 218.09375 C 295.492188 214.875 294.496094 213.203125 291.558594 211.480469 C 280.28125 204.960938 269.066406 198.367188 257.910156 191.703125 C 248.972656 186.421875 240.027344 181.152344 231.070312 175.898438 C 218.609375 168.609375 206.085938 161.398438 193.460938 154.136719 L 175.488281 143.792969 L 176.851562 142.476562 C 182.941406 136.601562 188.273438 135.933594 195.25 140.09375 C 225.304688 158.109375 256.085938 175.648438 282.558594 190.636719 C 285.53125 192.316406 290.097656 193.015625 291.636719 192.03125 C 293.96875 190.511719 295.699219 185.996094 295.785156 182.894531 C 296.035156 174.324219 296 165.585938 295.972656 157.117188 C 295.972656 149.238281 295.921875 141.117188 296.117188 133.117188 C 296.257812 127.445312 294.148438 123.976562 288.835938 121.160156 C 282.308594 117.683594 275.800781 113.941406 269.507812 110.316406 L 253.699219 101.25 C 233.136719 89.492188 212.605469 77.703125 192.101562 65.882812 C 188.601562 63.871094 185.867188 63.84375 182.539062 65.765625 C 171.527344 72.1875 160.492188 78.605469 149.445312 85.019531 C 128.078125 97.464844 105.984375 110.28125 84.363281 123.089844 C 83.082031 123.996094 82.023438 125.113281 81.191406 126.445312 C 80.363281 127.777344 79.820312 129.21875 79.574219 130.769531 C 78.980469 139.613281 78.980469 148.457031 79.574219 157.300781 C 79.71875 158.421875 80.074219 159.46875 80.640625 160.445312 C 81.207031 161.421875 81.941406 162.25 82.839844 162.929688 C 94.511719 170.324219 106.617188 177.425781 116.90625 183.371094 C 136.777344 194.898438 156.683594 206.402344 176.628906 217.886719 L 199.425781 231.035156 L 197.976562 232.351562 C 193.050781 236.855469 187.410156 240.253906 179.746094 234.839844 C 174.65625 231.394531 169.398438 228.226562 163.980469 225.328125 C 161.800781 224.117188 159.628906 222.902344 157.472656 221.648438 L 143.328125 213.460938 C 126.699219 203.800781 109.5 193.808594 92.402344 184.296875 C 90.34375 183.234375 88.15625 182.707031 85.839844 182.714844 C 84.660156 182.667969 83.523438 182.878906 82.441406 183.355469 C 80.660156 184.242188 79.175781 188.757812 79.101562 191.984375 C 78.898438 201.765625 78.933594 211.628906 78.976562 221.222656 C 78.976562 228.6875 79.03125 236.15625 78.976562 243.628906 C 78.890625 247.878906 80.339844 250.429688 83.917969 252.484375 Z M 83.917969 252.484375 " fill-opacity="1" fill-rule="nonzero"/></svg>
</div>
<header class="header" data-header>
<div class="container">
<a href="home.html" class="logo">
gonzalezsele.dev
</a>
<nav class="navbar" data-navbar>
<div class="navbar-top">
<a href="home.html" class="logo">
gonzalezsele.dev
</a>
<button class="nav-close-btn" aria-label="close-menu" data-nav-toggler>
<ion-icon name="close-outline" aria-hidden="true"></ion-icon>
</button>
</div>
<ul class="navbar-list">
<li>
<a href="portfolio.html" class="navbar-link">Proyectos</a>
</li>
<li>
<a href="about.html" class="navbar-link">About</a>
</li>
<li>
<a href="contact.html" class="navbar-link active">Contacto</a>
</li>
<li>
<a download="" href="./assets/pdf/resume.pdf" class="navbar-link">Curriculum</a>
</li>
</ul>
<div class="wrapper">
<a href="mailto:[email protected]" class="contact-link">
</a>
</div>
<ul class="social-list">
<li>
<a href="https://www.linkedin.com/in/gonzalezseledev/" class="social-link" target="_blank">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>
<li>
<a href="https://github.com/gonzalezseledev" class="social-link" target="_blank">
<ion-icon name="logo-github"></ion-icon>
</a>
</li>
</ul>
</nav>
<button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
<ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
</button>
<div class="overlay" data-nav-toggler data-overlay></div>
</div>
</header>
<main class="main">
<section class="contact">
<div class="contact__container">
<div class="left">
<div class="form__wrapper">
<div class="contact__heading">
<h1 class="contact__heading">¿Te gusta mi trabajo?</h1>
<p class="text">
<span>¡Caminemos juntos! =)</span> Si estás ampliando tu equipo de desarrollo, ponerte en contacto conmigo es fácil: ¡solo tienes que rellenar el formulario de contacto! O si lo prefieres, puedes escribirme a <a href="mailto:[email protected]">[email protected]</a>. Me gustaría que me hablaras de tu proyecto, y como podemos crecer juntos. Estoy segura de que mis competencias, mi curiosidad e iniciativa pueden contribuir de manera positiva dentro del equipo.
</p>
</div>
<form class="contact__form" action="https://formsubmit.co/921fa4632604820a1caa764ee57745cd" method="POST" />
<div class="input__wrap">
<input class="contact__input" autocomplete="off" name="nombre" type="text" required>
<label>Nombre</label>
<i class='icon bx bx-user'></i>
</div>
<div class="input__wrap">
<input class="contact__input" autocomplete="off" name="telefono" type="text" required>
<label>Teléfono</label>
<i class='icon bx bx-phone'></i>
</div>
<div class="input__wrap w-100">
<input class="contact__input" autocomplete="off" name="email" type="text" required>
<label>Email</label>
<i class='icon bx bx-envelope' ></i>
</div>
<div class="input__wrap w-100">
<input class="contact__input" autocomplete="off" name="asunto" type="text" required>
<label>Asunto</label>
<i class='icon bx bx-hash'></i>
</div>
<div class="input__wrap textarea w-100">
<textarea name="mensaje" autocomplete="off" class="contact__input" required></textarea>
<label>Mensaje</label>
<i class='icon bx bxs-inbox' ></i>
</div>
<div class="contact__buttons">
<input type="submit" value="Enviar" class="input-btn" id="input-btn">
</div>
<input type="hidden" name="_cc" value="[email protected]">
<input type="hidden" name="_next" value="https://gonzalezseledev.github.io/portafolio/thanks.html">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_template" value="box">
</form>
</div>
</div>
<div class="right">
<div class="image__wrapper">
<!-- <img src="./assets/images/contact.png" class="img" alt="img"> -->
<div class="wave__wrap">
<svg class="wave" viewBox="0 0 783 1536" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="wave" d="M236.705 1356.18C200.542 1483.72 64.5004 1528.54 1 1535V1H770.538C793.858 63.1213 797.23 196.197 624.165 231.531C407.833 275.698 274.374 331.715 450.884 568.709C627.393 805.704 510.079 815.399 347.561 939.282C185.043 1063.17 281.908 1196.74 236.705 1356.18Z"/>
</svg>
</div>
<svg class="dashed__wave" viewBox="0 0 345 877" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="dashed-wave" d="M0.5 876C25.6667 836.167 73.2 739.8 62 673C48 589.5 35.5 499.5 125.5 462C215.5 424.5 150 365 87 333.5C24 302 44 237.5 125.5 213.5C207 189.5 307 138.5 246 87C185 35.5 297 1 344.5 1"/>
</svg>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer-menu">
<a href="#" class="link footer-link">Back To Top</a>
•
<a href="portfolio.html" class="link footer-link">Proyectos</a>
•
<a href="about.html" class="link footer-link">About</a>
•
<a href="contact.html" class="link footer-link">Contacto</a>
</div>
<div class="footer-bottom">
<p class="copyright">
Hecho con ♡ desde Madrid © <a href="https://www.linkedin.com/in/gonzalezseledev/">gonzalezseledev</a>
2023
</p>
</div>
</footer>
<!-- custom js link -->
<script src="./assets/js/script.js"></script>
<!-- ionicon link -->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>