-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
238 lines (228 loc) · 11.9 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
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
<!DOCTYPE html>
<html lang='pt-br'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta name='description' content='Desenvolvedor Front End, Freelancer e UX/UI Designer. Localizado no Rio de Janeiro, Brasil.'>
<link rel='stylesheet' href='./css/style.css'>
<link rel='icon' href='./favicon.svg' type='svg+xml'>
<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=Poppins:wght@400;500;600&family=Lato:wght@400;500;700&display=swap' rel='stylesheet'>
<script src='./script.js'></script>
<title>Kaio Loureiro</title>
</head>
<body>
<header class='header'>
<div class='container header-container'>
<a href='/' class='header__logo' aria-label='Logo do Website' alt='Logo'></a>
<nav class='header-menu' aria-label='Menu Principal'>
<ul class='flex header-menu__items'>
<li><a href='#intro' class='h-menu__item c2'>Introdução</a></li>
<li><a href='#projects' class='h-menu__item c2'>Projetos</a></li>
<li><a href='#education' class='h-menu__item c2'>Formação</a></li>
<li><a href='#contact' class='h-menu__item menu_btn p0'>Contato</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section id='intro' class='container' aria-label='Introdução'>
<div class="wrapper intro-wrapper">
<div class='card intro-card'>
<div class='intro-titles'>
<h1 class='intro__title c1'>Kaio <span class='intro__title intro__title--gradient'>Loureiro</span>.</h1>
<p class='intro__h2-like c2'>Desenvolvedor Front End & UX/UI Designer.</p>
</div>
<div class='grid intro-grid'>
<a class='btn btn--highlight' href='#contact'>
<span class='icon icon--24x icon--hire-me'></span>
<p class='btn__text--bold p0'>Contrate-me!</p>
</a>
<a class='btn' href='#download'>
<span class='icon icon--24x icon--download'></span>
<p class='btn__text c1'>Baixar Currículo</p>
</a>
<div class='flex intro-flex'>
<span class='icon icon--24x icon--location intro-flex__icon--location'></span>
<p class='intro-flex__text c1'>Localizado no Rio de Janeiro, Brasil.</p>
</div>
<ul class='flex intro-flex'>
<li class='flex'>
<a class='icon icon--24x icon--github intro-flex__icon--social' href='https://github.com/kaioloureiro/' target='_blank' rel='external'></a>
</li>
<li class='flex'>
<a class='icon icon--24x icon--linkedin intro-flex__icon--social' href='https://www.linkedin.com/in/kaioloureiro' target='_blank' rel='external'></a>
</li>
<li class='flex'>
<a class='icon icon--24x icon--behance intro-flex__icon--social' href='https://www.behance.net/kaioloureiro' target='_blank' rel='external'></a>
</li>
<li class='flex'>
<a class='icon icon--24x icon--dribbble intro-flex__icon--social' href='https://dribbble.com/kaioloureiro' target='_blank' rel='external'></a>
</li>
<li class='flex'>
<a class='icon icon--24x icon--uplabs intro-flex__icon--social' href='https://www.uplabs.com/kaioloureiro' target='_blank' rel='external'></a>
</li>
</ul>
</div>
<p class='intro__description c2'>Cursando o 8º período de Sistemas de Informação na Universidade Estácio de Sá.</p>
</div>
</div>
</section>
<section id='projects' class='container' aria-label='Projetos'>
<div class='wrapper projects-wrapper'>
<div class='card projects-card'>
<div class='project-info'>
<span class='icon icon--60x icon--huddle'></span>
<h2 class='project__title c1'>Huddle Landing Page</h2>
<p class='project__description c2'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet, mi et accumsan imperdiet, nisl dui maximus erat, vel posuere massa enim vitae metus. <span class='project__description--bold p4'>Curabitur sit amet risus sapien</span>. Proin ullamcorper purus et eros ornare, dapibus tincidunt ante mollis.</p>
</div>
<div class='grid project-grid'>
<div class='project-grid__item'>
<h3 class='project-grid__title c1'>Ferramentas</h3>
<div class='flex project-flex'>
<a class='icon icon--24x icon--html project-flex__icon' href='#' target='_blank' rel='external'></a>
<a class='icon icon--24x icon--css project-flex__icon' href='#' target='_blank' rel='external'></a>
</div>
</div>
<div class='project-grid__item'>
<h3 class='project-grid__title c1'>Links</h3>
<div class='flex project-flex'>
<a class='icon icon--24x icon--github project-flex__icon' href='https://github.com/kaioloureiro/#' target='_blank' rel='external'></a>
<a class='icon icon--24x icon--website project-flex__icon' href='https://kaioloureiro.github.io/#' target='_blank' rel='external'></a>
</div>
</div>
</div>
</div>
<ul class='flex projects-carousel'>
<li class='flex carousel-item'>
<span class='carousel-item__text b ghost-text'>Projeto Selecionado</span>
<div class='carousel-item__card logo logo--placeholder' onclick='selectProject(this)'></div>
</li>
<li class='flex carousel-item'>
<span class='carousel-item__text b ghost-text'>Projeto Selecionado</span>
<div class='carousel-item__card logo logo--placeholder' onclick='selectProject(this)'></div>
</li>
<li class='flex carousel-item'>
<span class='carousel-item__text b ghost-text'>Projeto Selecionado</span>
<div class='carousel-item__card logo logo--placeholder' onclick='selectProject(this)'></div>
</li>
<li class='flex carousel-item'>
<span class='carousel-item__text b ghost-text'>Projeto Selecionado</span>
<div class='carousel-item__card logo logo--placeholder' onclick='selectProject(this)'></div>
</li>
</ul>
</div>
</section>
<section id='education' class='container' aria-label='Formação'>
<div class='wrapper education-wrapper'>
<div class='card education-card'>
<div class='flex education-header'>
<h3 class='education-header__title c6'>Bacharel</h3>
<span class='icon icon--36x icon--educ'></span>
</div>
<div class='flex education-body'>
<div class='education-body__item'>
<h4 class='education-body__title c1'>Sistemas de Informação</h4>
<div class='flex education-body__info c6'>
<p class='education-body__entity'>UNESA</p>
<p class='education-body__duration'>2019~2023</p>
</div>
</div>
</div>
</div>
<div class='card education-card'>
<div class='flex education-header'>
<h3 class='education-header__title c6'>Idiomas</h3>
<span class='icon icon--36x icon--lang'></span>
</div>
<div class='education-body'>
<div class='flex education-body__info'>
<p class='education-body__title c1'>Português</p>
<p class='c6'>Fluente</p>
</div>
<div class='flex education-body__info'>
<p class='education-body__title c1'>Inglês</p>
<p class='c6'>Avançado</p>
</div>
</div>
</div>
<div class='card education-card'>
<div class='flex education-header'>
<h3 class='education-header__title c6'>Cursos</h3>
<span class='icon icon--36x icon--courses'></span>
</div>
<div class='flex education-body'>
<div class='education-body__item'>
<h4 class='education-body__title c1'>HTML e CSS para Iniciantes</h4>
<div class='flex education-body__info c6'>
<p class='education-body__entity'>Origamid</p>
<p class='education-body__duration'>46h</p>
</div>
</div>
<div class='education-body__item'>
<h4 class='education-body__title c1'>UI Design para Iniciantes</h4>
<div class='flex education-body__info c6'>
<p class='education-body__entity'>Origamid</p>
<p class='education-body__duration'>34h</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id='contact' class='container' aria-label='Contato'>
<div class='wrapper contact-wrapper'>
<div class='card contact-card'>
<p class='contact__description c2'>Gostou de algum projeto que viu por aqui?
<br><br>Atualmente me encontro <span class="contact__description--bold p4">disponível</span> para trabalhos.
<br><br>Entre em <a href="https://wa.me/+5521965128285" class="contact__description--bold p4">contato</a> e vamos discutir sobre os seus projetos.
</p>
<div class='grid contact-items'>
<a class='grid contact-item__card' href='https://wa.me/+5521965128285' target='_blank' rel='external'>
<span class='icon icon--32x icon--wpp'></span>
<p class='contact-item__text c1'>+55 (21) 9 96512-8285</p>
</a>
<a class='grid contact-item__card' href='mailto:[email protected]' target='_blank' rel='external'>
<span class='icon icon--32x icon--email'></span>
<p class='contact-item__text c1'>[email protected]</p>
</a>
<a class='grid contact-item__card' href='https://www.google.com/maps/place/Rio+de+Janeiro/@-22.00333,-47.2785637,7z/data=!3m1!4b1!4m5!3m4!1s0x981894cae28ac3:0x349c31ac10583d0!8m2!3d-22.3534263!4d-42.7076107' target='_blank' rel='external'>
<span class='icon icon--32x icon--location'></span>
<p class='contact-item__text c1'>Rio de Janeiro, Brasil</p>
</a>
</div>
</div>
</div>
</section>
</main>
<footer class='footer'>
<div class='container footer-container'>
<div class='footer-copyright' aria-label='Direitos Autorais'>
<p class='footer-copyright__text c2'>© 2022 <a class='p4' href='https://kaioloureiro.github.io/' target='_self'>Kaio Loureiro</a>. Alguns Direitos Reservados.</p>
</div>
<div class='flex footer-social' aria-label='Mídias Sociais'>
<p class='footer-social__title ghost-text c6'>Mídias Sociais</p>
<ul class='flex footer-flex'>
<li class='flex'>
<a class='icon icon--24x icon--github footer-flex__icon' href='https://github.com/kaioloureiro/' target='_blank' rel='external'></a>
</li>
<li class='flex'>
<a class='icon icon--24x icon--linkedin footer-flex__icon' href='https://www.linkedin.com/in/kaioloureiro' target='_blank' rel='external'></a>
</li>
<li class='flex'>
<a class='icon icon--24x icon--behance footer-flex__icon' href='https://www.behance.net/kaioloureiro' target='_blank' rel='external'></a>
</li>
<li class='flex'>
<a class='icon icon--24x icon--dribbble footer-flex__icon' href='https://dribbble.com/kaioloureiro' target='_blank' rel='external'></a>
</li>
<li class='flex'>
<a class='icon icon--24x icon--uplabs footer-flex__icon' href='https://www.uplabs.com/kaioloureiro' target='_blank' rel='external'></a>
</li>
</ul>
</nav>
</div>
</div>
</footer>
</body>
</html>