-
Notifications
You must be signed in to change notification settings - Fork 0
/
browse-my-work.html
255 lines (243 loc) · 13.7 KB
/
browse-my-work.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
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
253
254
255
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/tabs.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/stars.css">
<link rel="stylesheet" href="css/modal.css">
<link rel="preload" href="css/normalize.css" as="style">
<link rel="stylesheet" href="css/normalize.css">
<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=Lato:ital,wght@0,300;0,400;1,100;1,400&family=Montserrat:ital,wght@0,300;0,400;0,700;0,900;1,200;1,400&family=Noto+Serif+Tamil:wght@100;400&family=PT+Serif:ital@0;1&family=Questrial&family=Rubik:wght@400;500&display=swap" rel="stylesheet">
<script type="text/javascript" src="main.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book</title>
<link rel="icon" type="fav-icon" href="img/vozzoa-sello.svg" href="img/vozzoa-sello.svg">
</head>
<body>
<header class="d-flex intro intro-var ">
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="index.html"><li>Home</li></a>
<a href="about.html"><li>About</li></a>
<a href="browse-my-work.html"><li>Work</li></a>
<a href="https://www.behance.net/fernandadominguez" target="_blank"><li>Behance</li></a>
<a href="https://www.linkedin.com/in/fernanda-dom%C3%ADnguez-dise%C3%B1o-design-mex/" target="_blank"><li>LinkedIn</li></a>
</ul>
</div>
</nav>
<a href="index.html" class="align-center d-flex pl-3 fs-22 m-0 primary-link"><h5 class= "m-0 primary-link" > Fernanda Domínguez </h5>
</a>
</header>
<input type="checkbox" id="theme-toggle" />
<label class="toggle-btn" onclick="toggleDarkLight()" for="theme-toggle"></label>
<!-- TECHSKILLS -->
<div style="border-radius: 6rem 6rem 0 0;" class="p-3 class-center d-flex">
<div class="class-center d-flex dinamic-col row">
<div class="text-container">
<div class="p-3 heading-var">
<h1 class="m-0">WORK 🚀</h1>
</div>
<div class="p-3">
<p> Work encompasses graphics and identity,
websites and digital experiences, product development,
strategy, and positioning.</br>
</br>
I invite you to explore the diverse array of projects where I have contributed my expertise in both interface design and development. Whether crafting pixel-perfect user interfaces, coding responsive layouts with HTML and CSS, or collaborating with cross-functional teams to deliver engaging and innovative solutions.
</p>
</div>
</div>
<div>
<div class="d-flex flex-row">
<a class="card container class-center">
<img src="img/Ilustrations/SVG/structure01.svg" alt="">
</a>
</div>
<div class="text-center pb-3 pt-3">
<a class="btn m-0 primary-btn" href="#section2" title="brownse work"> Let's have a look</a>
</div>
</div>
</div>
</div>
<section>
<section id="stars">
<div id="stars2"></div>
<div id="stars3"></div>
</section>
</section>
<section id="section2" class="gray-container m-0">
<div class="tabs m-0">
<ul id="tabs-list">
<label id="open-nav-label" for="nav-ctrl"></label>
<div class="slider-container tabs m-0">
<li id="li-for-panel-1" class="primary-container class-center slider-item card container ">
<label class="panel-label negative text-center m-0"
for="panel-1-ctrl">A Fintec</label>
</li>
<li id="li-for-panel-6" class="primary-container class-center slider-item card container ">
<label class="panel-label negative text-center m-0"
for="panel-5-ctrl">A Famous One</label>
</li>
<li id="li-for-panel-2"class="primary-container class-center slider-item card container ">
<label class="panel-label negative text-center m-0"
for="panel-2-ctrl">An Association</label>
</li>
<li id="li-for-panel-3" class="primary-container class-center slider-item card container ">
<label class="panel-label negative text-center m-0"
for="panel-3-ctrl">The Spa</label>
</li>
<li id="li-for-panel-4" class="primary-container class-center slider-item card container ">
<label class="panel-label negative text-center m-0"
for="panel-4-ctrl">An Insurance Co.</label>
</li>
<li id="li-for-panel-6" class="primary-container class-center slider-item card container ">
<label class="panel-label negative text-center m-0"
for="panel-6-ctrl">An Agency</label>
</li>
</ul>
</div>
<!-- WORK -->
<!-- TAB CONTROLLERS -->
<input id="panel-1-ctrl"
class="panel-radios d-none" type="radio" name="tab-radios" checked>
<input id="panel-2-ctrl"
class="panel-radios d-none" type="radio" name="tab-radios">
<input id="panel-3-ctrl"
class="panel-radios d-none" type="radio" name="tab-radios">
<input id="panel-4-ctrl"
class="panel-radios d-none" type="radio" name="tab-radios">
<input id="panel-5-ctrl"
class="panel-radios d-none" type="radio" name="tab-radios">
<input id="panel-6-ctrl"
class="panel-radios d-none" type="radio" name="tab-radios">
<!-- THE PANELS -->
<article id="panels">
<div class="">
<section id="panel-1">
<main>
<div class="d-flex d-block-sm mx-4 justify-content-around">
<div style="min-width: 45rem;" class="container pb-3 ">
<h1 class="m-0 fw-300 uppercase">Finamex</h1>
<p>UXD & UXE</p>
</div>
<div class="pl-3 pb-4 " >
<h5 class="m-0">
Finamex, Casa de Bolsa is a pioneering Mexican stock exchange firm that entered the international market early on. With their expertise, you can rest assured that your investments are in good hands.</h5>
</div>
</div>
<div class="text-center">
<a class="btn m-0 primary-btn" href="finamex.html" title="Nosotros>"> Dive in</a>
</div>
</main>
</section>
<section id="panel-2">
<main>
<div class="d-flex d-block-sm mx-4 ustify-content-around">
<div style="min-width: 45rem;" class="container pb-3 ">
<h1 class="m-0 fw-300 uppercase">Lentes Púrpura</h1>
<p> Web Development</p>
</div>
<div class="pl-3 pb-4 " >
<h5 class="m-0">
Lentes Púrpura is a non-profit consulting firm and association that focuses on gender and diversity. Their expert guidance can help your organization achieve greater inclusion and success.
</h5>
</div>
</div>
<div class="text-center">
<a class="btn m-0 primary-btn" href="lentes-purpura.html" title="Nosotros>">See through the lens</a>
</div>
</main>
</section>
<section id="panel-3">
<main>
<div class="d-flex d-block-sm mx-4 justify-content-around">
<div style="min-width: 45rem;" class="container pb-3 ">
<h1 class="m-0 fw-300 uppercase">Bodyssage</h1>
<p>Web Development</p>
</div>
<div class="pl-3 pb-4 " >
<h5 class="m-0">
Bodyssage and Face Move provide specialized services for sculptural massages and facial gymnastics. Their experienced professionals will help you look and feel your best.
</h5>
</div>
</div>
<div class="text-center">
<a class="btn m-0 primary-btn" href="bodyssage.html" title="Nosotros>"> Unlock the beauty</a>
</div>
</main>
</section>
<section id="panel-4">
<main>
<div class="d-flex d-block-sm mx-4 justify-content-around">
<div style="min-width: 45rem;" class="container pb-3 ">
<h1 class="m-0 fw-300 uppercase">Time Assistance</h1>
<p>Web Development</p>
</div>
<div class="pl-3 pb-4" >
<h5 class="m-0">
The health management product expert and funeral package solutions provider offers expert assistance in managing your health and planning for end-of-life. They provide compassionate support to ensure that you and your loved ones are taken care of.
</h5>
</br>
</div>
</div>
<div class="text-center">
<a class="btn m-0 primary-btn" href="time-assistance.html" title="Nosotros>">Ensure it today </a>
</div>
</main>
</section>
<section id="panel-5">
<main>
<div class="d-flex d-block-sm mx-4 justify-content-around">
<div style="min-width: 45rem;" class="container pb-3 ">
<h1 class="m-0 fw-300 uppercase">Totalplay</h1>
<p>UX Design</p>
</div>
<div class="pl-3 pb-4 " >
<h5 class="m-0">
Totalplay is a premier entertainment and connectivity platform in Mexico that offers cutting-edge technology and top-quality services. With Totalplay, you can stay connected and entertained no matter where you are.
</br>
</div>
</div>
<div class="text-center">
<a class="btn m-0 primary-btn" href="total-play.html" title="Nosotros>">More info</a>
</div>
</main>
</section>
<section id="panel-6">
<main>
<div class="d-flex d-block-sm mx-4 justify-content-around">
<div style="min-width: 45rem;" class="container pb-3 ">
<h1 class="m-0 fw-300 uppercase">Vozzoa</h1>
<p>Web Development</p>
</div>
<div class="pl-3 pb-4" >
<h5 class="m-0">
This digital agency specializes in personalized website development for small and medium-sized businesses. With their state-of-the-art technology and innovative solutions, they can help your business stand out in the crowded online marketplace.
</h5>
</div>
</div>
<div class="text-center">
<a class="btn m-0 primary-btn" href="vozzoa.html" title="Nosotros>"> Let´s go</a>
</div>
</main>
</section>
</div>
</article>
</section>
<footer class="container">
<div class="class-center d-flex flex-column">
<div class="class-center d-flex flex-column">
<p class="text-center"> Copyright © 2017-2023 Fernanda Domínguez, All Rights Reserved.</p>
</div>
</footer>
</body>
</html>