-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
212 lines (175 loc) · 19.4 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
<!DOCTYPE html>
<html lang="pt-BR">
<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">
<title>Ríchard Lucas</title>
<!-- fonts -->
<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=Caveat:wght@700&family=Fira+Code:wght@300;400;500;600;700&family=Italianno&display=swap" rel="stylesheet">
<!-- folders CSS -->
<link rel="stylesheet" href="css/components/header/header.css">
<link rel="stylesheet" href="css/components/header/action.css">
<link rel="stylesheet" href="css/components/section-1/banner.css">
<link rel="stylesheet" href="css/components/section-2/skills.css">
<link rel="stylesheet" href="css/components/section-2/wrapper-skill.css">
<link rel="stylesheet" href="css/components/general/button.css">
<link rel="stylesheet" href="css/components/general/title.css">
<link rel="stylesheet" href="css/components/general/subtitle.css">
<link rel="stylesheet" href="css/components/general/box.css">
<link rel="stylesheet" href="css/components/general/progress-bar.css">
<link rel="stylesheet" href="css/components/section-3/section-3.css">
<link rel="stylesheet" href="css/components/section-4/section-4.css">
<link rel="stylesheet" href="css/components/section-4/carousel.css">
<link rel="stylesheet" href="css/components/section-5/section-5.css">
<link rel="stylesheet" href="css/reset.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="css/components/general/general.js" ></script>
</head>
<body>
<header class="header">
<div class="head">
<img class="logo" src="assets/imgs/loguinho.png" alt="Logo Ríchard Lucas">
<nav class="links">
<a class= "action" data-page="section-1" lang="en">Home</a>
<a class= "action" data-page="section-2" lang="en">Skills</a>
<a class= "action" data-page="section-3">Projects</a>
<a class= "action" data-page="section-4">About</a>
<a class= "action" data-page="section-5">Contact</a>
<a class= "button -b2" href="assets/docs/Profile (3).pdf" lang="en">DownloadCV</a>
</nav>
</div>
</header>
<section id="section-1" class="section" >
<div class="banner-title">
<p>Ríchard Lucas</p>
</div>
<div class="pre-banner">
<p class="banner">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque iste laboriosam nostrum atque facere culpa commodi, error labore, magni ad perspiciatis, eveniet iure eligendi sapiente vitae saepe autem exercitationem consequuntur? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur eveniet cum nisi ducimus nemo ad aliquam suscipit temporibus numquam in aspernatur sapiente possimus, odio, ipsum asperiores iure sequi? Tempora, veniam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic aut consequatur quas, recusandae eius labore tenetur adipisci, laudantium suscipit, quasi illo ab odit. Mollitia fuga possimus, expedita ratione quos saepe. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, modi veritatis error quae laudantium similique veniam cum fugiat culpa quisquam odio qui praesentium nemo perspiciatis reiciendis, deserunt minima, magni ipsam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, hic a exercitationem perspiciatis temporibus error, nam sed quae esse placeat sint rerum alias veritatis quisquam inventore! Impedit inventore placeat neque.Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</section>
<section id="section-2" class="section">
<h2 id= "#1" class="main-title -second">S k i l l s</h2>
<div class="wrapper-skill">
<article class="skill-tec">
<img class="icon" src="assets/imgs/ico_html5.png" alt="Logo HTML5 em pixel art">
<div class="right">
<h3 class="title">HTML</h3>
<progress class="progress-bar" max="100" value="70">70%</progress>
</div>
</article>
<article class="skill-tec">
<img class="icon" src="assets/imgs/ico_nodejs.png" alt="Logo Node JS em pixel art">
<div class="right">
<h3 class="title">Node JS</h3>
<progress class="progress-bar" max="100" value="70">70%</progress>
</div>
</article>
<article class="skill-tec">
<img class="icon" src="assets/imgs/ico_css3.png" alt="Logo CSS3 em pixel art">
<div class="right">
<h3 class="title">CSS</h3>
<progress class="progress-bar" max="100" value="70">70%</progress>
</div>
</article>
<article class="skill-tec">
<img class="icon" src="assets/imgs/ico_tdd.png" alt="Logo TDD em pixel art">
<div class="right">
<h3 class="title">TDD</h3>
<progress class="progress-bar" max="100" value="70">70%</progress>
</div>
</article>
<article class="skill-tec">
<img class="icon" src="assets/imgs/ico_js.png" alt="Logo JavaScript em pixel art">
<div class="right">
<h3 class="title">JavaScript</h3>
<progress class="progress-bar" max="100" value="70">70%</progress>
</div>
</article>
<article class="skill-tec">
<img class="icon" src="assets/imgs/ico_restapi.png" alt="Logo Rest API em pixel art">
<div class="right">
<h3 class="title">Rest API</h3>
<progress class="progress-bar" max="100" value="70">70%</progress>
</div>
</article>
<article class="skill-tec">
<img class="icon" src="assets/imgs/ico_react.png" alt="Logo react em pixel art">
<div class="right">
<h3 class="title">React</h3>
<progress class="progress-bar" max="100" value="70">70%</progress>
</div>
</article>
<article class="skill-tec">
<img class="icon" src="assets/imgs/ico_ux.png" alt="Logo UX em pixel art">
<div class="right">
<h3 class="title">UX</h3>
<progress class="progress-bar" max="100" value="70">70%</progress>
</div>
</article>
</div>
</section>
<section id="section-3" class="section">
<h3 class="main-title -second">P r o j e t o s</h3>
<figure class="banner-pj">
<a href="https://github.com/Kyori-kyo/Javascript-piano" target="_blank"><img class="projects especify1" src="assets/imgs/Ríchard's Web Piano.png" alt="Piano com logo"></a>
<a href="https://kyori-kyo.github.io/meu-portfolio/" target="_blank"><img class="projects" src="assets/imgs/loguinho.png" alt="Logo Ríchard Lucas"></a>
<a href="https://github.com/Kyori-kyo/Kyorify-Spotify-like-" target="_blank"><img class="projects especify2" src="assets/imgs/Kyorify.png" alt="Logo Kyorify"></a>
</figure>
</section>
<section id="section-4" class="section">
<h3 class="main-title -second">S o b r e</h3>
<div class="bodi">
<div class="items-wrapper">
<div id="items">
<img class="item -img" src="assets/imgs/Beep.jpg" alt="">
<img class="item -img" src="assets/imgs/beep 2.jpg" alt="">
<img class="item -img" src="assets/imgs/beep 3.jpg" alt="">
<img class="item -img" src="assets/imgs/beep 4.jpg" alt="">
</div>
</div>
</div>
<p class="description">Apaixonado por aprender, Ríchard já foi mecânico, para ajudar seu pai, ajudante de eletricista, vendedor, tutor e outros. Descobriu a programação em 2011 porém não teve a oportunidade de se aprofundar até 2021. Atualmente terminou seus estudos e o mesmo dedica 90% do seu tempo para aprimorar suas habilidades com o objetivo de providenciar projetos inovadores e bem feitos. Em seu tempo livre gosta de tocar ukulele, ler ou caminhar na praia a noite.</p>
</section>
<section id="section-5" class="section">
<h3 class="main-title -second">C o n t a t o</h3>
<div class="container">
<div class="mb-3 subtitle">
<label for="exampleFormControlInput1" class="form-label">Email</label>
<input type="email" class="form" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3 subtitle">
<label for="exampleFormControlTextarea1" class="form-label">Por favor, se tiver Propostas, críticas ou idéias para eu melhorar insira-as abaixo:</label>
<textarea class="form" id="exampleFormControlTextarea1" placeholder="Hello!.." rows="4"></textarea>
</div>
<div class="mb-3 -b3">
<button type="button" class="button">Enviar</button>
<button type="button" class="button">Voltar</button>
</div>
<nav class="link-logos">
<a href="https://www.linkedin.com/in/richardlucascm/" target="_blank"> <img class="end-logo" src="assets/imgs/pngegg.png" alt="linkedin logo"> </a>
<a href="https://github.com/Kyori-kyo" target="_blank"> <img class="end-logo" src="assets/imgs/github.png" alt="GitHub logo"> </a>
<a href="https://www.instagram.com/rick_greymane/" target="_blank"> <img class="end-logo" src="assets/imgs/insta.png" alt="Instagram logo"> </a>
<a href="https://twitter.com/Kyori_G" target="_blank"> <img class="end-logo" src="assets/imgs/twitter.png" alt="Twitter logo"> </a>
</nav>
<p class="end">The end</p>
</div>
</section>
<script src="css/components/section-4/script.js"></script>
</body>
</html>
<!-- SUMÁRIO
lang="" define a linguagem para o SEO
<em> -- engloba uma palvra específica ou frase para
interagir somente com ela
anchor // Emmet = a[lang=en]{Skills}
MDN: ótima fonte de pesquisa para HTML & CSS
-->