-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
193 lines (190 loc) · 12.1 KB
/
index.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="Index">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P5H2Z9T');</script>
<!-- End Google Tag Manager -->
<title>Matias' Portfolio</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" href="wp-content/images/assets/img/brand/portfolio-logo.svg">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="wp-content\images\assets\img\brand\favicon.ico" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="s.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.1/css/hover-min.css" integrity="sha512-SJw7jzjMYJhsEnN/BuxTWXkezA2cRanuB8TdCNMXFJjxG9ZGSKOX5P3j03H6kdMxalKHZ7vlBMB4CagFP/de0A==" crossorigin="anonymous" />
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js">
</script>
<script type="text/javascript">
(function(){
emailjs.init("user_6Z3m CVCm9NiTNUQqYhMfV8E");
})();
</script>
<style>
@media (min-width: 768px) {
.col-md-5 {
margin-left: 20rem!important;
}
}
</style>
</head>
<body id="all" class="_HuijHU5gh89gd769 _UH89ke body" onoffline="offline()" ononline="online()">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P5H2Z9T"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<nav class="navbar navbar-expand-lg navbar-light bg-body sticky-top p-4">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="wp-content/images/assets/img/brand/portfolio-logo.svg" style="width:50px;" alt="Logo" class="me-3"> Matias' Portfolio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ms-auto" id="navbarNavDropdown">
<ul class="navbar-nav navbar-nav-scroll ms-auto" style="--bs-scroll-height: 1000px;">
<li class="nav-item">
<a class="nav-link my-lg-2 active link" href="/" aria-current="page"><span data-content="Página principal">Página principal</span></a>
</li>
<li class="nav-item dropdown">
<a class=" nav-link my-lg-2 dropdown-toggle link" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span data-content="Proyectos">Proyectos</span>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="projects/dgrafix.html">D'grafix</a></li>
<li><a class="dropdown-item" href="projects/projects.html">Ver todos <i class="bi bi-chevron-double-right"></i></a></li>
</ul>
</li>
<li class="nav-item">
<a class=" nav-link my-lg-2 link" href="aboutme.html"><span data-content="Sobre mí">Sobre mí</span></a>
</li>
<li class="nav-item">
<a class=" nav-link my-lg-2 link" href="contact.html"><span data-content="Contacto">Contacto</span></a>
</li>
</ul>
</nav>
<div class="position-fixed bottom-0 start-0 p-3" style="z-index: 5;">
<div id="offline" style="display:block;"></div>
</div>
<div class="presentation-section">
<div class="ccontainer">
<h2 class="object" data-value="3">Matias'<br><span>portfolio</span></h2>
<img src="wp-content/images/assets/img/parallax-img/firefox.png" class="object" data-value="-2">
<img src="wp-content/images/assets/img/parallax-img/safari.png" class="object" data-value="6">
<img src="wp-content/images/assets/img/parallax-img/vs.png" class="object" data-value="4">
<img src="wp-content/images/assets/img/parallax-img/chrome.png" class="object" data-value="-6">
<img src="wp-content/images/assets/img/parallax-img/edge.png" class="object" data-value="8">
<img src="wp-content/images/assets/img/parallax-img/html.png" class="object" data-value="-4">
<img src="wp-content/images/assets/img/parallax-img/js.png" class="object" data-value="5">
</div>
</div>
<section class="my-5 ms-1 pb-md-4 align-items-center py-5">
<div class="col-md-5 ms-2 ms-sm-0 ms-md-2">
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-secondary">
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="32" height="32" viewBox="0 0 115.879598 128.961753" preserveAspectRatio="xMidYMid meet">
<g transform="translate(-15.883922,139.961753) scale(0.100000,-0.100000)" stroke="none">
<path d="M660 1391 c-41 -13 -84 -38 -106 -63 -18 -19 -283 -422 -309 -468 -9 -17 -20 -26 285 252 263 240 274 252 267 272 -7 17 -90 21 -137 7z" class="path-2" style=" fill: #ffffff; "/>
<path d="M1065 1341 c-29 -13 -57 -47 -95 -116 -18 -33 -74 -132 -123 -220 -50 -88 -133 -236 -185 -330 -52 -93 -105 -190 -119 -214 -14 -24 -21 -42 -16 -40 5 2 128 132 274 289 531 572 501 538 497 568 -3 23 -11 30 -58 45 -65 22 -147 30 -175 18z" class="path-4" style="fill: #ffffff;"/>
<path d="M272 1321 c-83 -21 -100 -33 -111 -83 -9 -37 13 -216 28 -231 13 -13 35 1 60 41 105 158 171 267 171 278 0 19 -57 17 -148 -5z" class="path-1" style=" fill: #ffffff; "/>
<path d="M791 1218 c-47 -44 -166 -155 -265 -245 -100 -91 -193 -179 -208 -195 -45 -51 -45 -86 2 -192 44 -99 69 -132 95 -122 17 6 24 17 182 296 165 293 253 449 281 498 37 65 8 52 -87 -40z" class="path-3" style=" fill: #ffffff; "/>
<path d="M1080 868 c-400 -433 -520 -568 -526 -593 -3 -14 -1 -38 6 -53 15 -34 105 -112 129 -112 29 0 67 36 99 93 15 28 135 238 266 466 130 227 235 415 234 417 -2 2 -96 -97 -208 -218z" class="path-5" style=" fill: #ffffff; "/>
<path d="M1286 878 c-31 -57 -286 -507 -369 -651 -27 -48 -47 -90 -44 -93 8 -9 149 157 214 253 65 95 116 201 188 387 52 135 58 188 11 104z" style="fill: #ffffff;"/>
</g>
</svg>
</div>
<h2 class="display-5 fw-normal">¡Bienvenido!</h2>
<p class="lead fw-normal">
<b>Hola!</b> Bienvenido a mi portafolio. Aquí encontrarás todos mis trabajos.
</p>
<p class="text-muted">Estoy especializado en el front-end y me gusta crear cosas sencillas, pero que vayan al grano. Si me deseas contactar, puedes ir a la página <a href="contact.html">Contacto</a>.</p>
<a class="link link--arrowed" href="projects/projects.html">Ver los trabajos<svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" stroke="#2079FF" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
<circle class="arrow-icon--circle" cx="16" cy="16" r="15.12"></circle>
<path class="arrow-icon--arrow" d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98"></path>
</g>
</svg></a>
</div>
<div class="col-md-7 ps-md-5">
</div>
</section>
<section class="section-grid">
<div class="grid-1 hvr-grow-shadow">
<img src="wp-content/images/assets/img/banners/file-alt-regular.svg" alt="File" style="width: 150px;height: 150px;" class="section-grid-img">
<p class="section-grid-text-1">Las páginas que diseño son con una temática sencilla y minimalista. Siempre veo cómo hacerla de una manera con la que la página se vea fresca.</p>
</div>
<div class="grid-2 hvr-grow-shadow">
<img src="wp-content/images/assets/img/banners/cloud-solid.svg" alt="File" style="width: 150px;height: 150px;" class="section-grid-img">
<p class="section-grid-text-2">Las páginas que diseño son con una temática sencilla y minimalista. Siempre veo cómo hacerla de una manera con la que la página se vea fresca.</p>
</div>
<div class="grid-3 hvr-grow-shadow">
<img src="wp-content/images/assets/img/banners/hdd-regular.svg" alt="File" style="width: 150px;height: 150px;" class="section-grid-img">
<p class="section-grid-text-3">Las páginas que diseño son con una temática sencilla y minimalista. Siempre veo cómo hacerla de una manera con la que la página se vea fresca.</p>
</div>
</section>
<div class="container">
<div class="newsletter" align="center">
<h3 class="newsletter-text">Suscríbete a nuestro newsletter!</h3>
<div class="container">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeG0dw-Gt9CdF7d0quuTtMOVt8ubuCLgElJebDndhb2rh9uSw/viewform?embedded=true" class="ratio ratio-1x1" frameborder="0" marginheight="0" marginwidth="0" height="550" width="720">Cargando…</iframe>
</div>
</div>
</div>
<div class="footer-links">
<div class="footer-container">
<ul>
<li>
<a href="/">
<h5 class="title">Página principal</h5>
</a>
</li>
</ul>
<ul>
<li>
<a href="projects/projects.html">
<h5 class="title">Proyectos</h5>
</a>
</li>
</ul>
<ul>
<li>
<a href="aboutme.html">
<h5 class="title">Sobre mí </h5>
</a>
</li>
</ul>
<ul>
<li>
<a href="contact.html">
<h5 class="title">Contacto</h5>
</a>
</li>
</ul>
</div>
</div>
<footer class="footer">
<h6>©2021 Matias' Portfolio</h6>
</footer>
<div class="cookies-advice position-fixed bottom-0 start-0 m-3 shadow-lg text-center" id="cookiesAdvice" style="z-index: 1000001;">
<img class="cookie" src="cookies.svg" alt="Cookie">
<h3>Aviso de cookies</h3>
<p class="p-cookies">Utilizamos cookies propias y de terceros para mejorar la experiencia de uso.</p>
<button class="accept-cookies btn btn-secondary d-block w-100" id="acceptCookies">De acuerdo</button>
</div>
<div class="backdrop-cookies" id="backdropCookies"></div>
<script src="main.js"></script>
<script src="js/app.js"></script>
<script src="cookies.js"></script>
<script src="plugins/app.js"></script>
</body>
</html>