Skip to content

Commit 103a8be

Browse files
loc-devloc-dev
committed
Disponibilizando a primeira versão do meu Portfolio
1 parent b0863af commit 103a8be

File tree

8 files changed

+587
-0
lines changed

8 files changed

+587
-0
lines changed

‎contato.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!doctype html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Contato - Leonardo Oliveira</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="css/styles.css">
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Slab&display=swap">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
11+
<script type="text/javascript" src="js/script.js"></script>
12+
</head>
13+
<body>
14+
<div id="navigation" class="navigation">
15+
<ul>
16+
<li><a href="index.html">Home</a></li>
17+
<li><a href="portfolio.html">Portfolio</a></li>
18+
<li><a href="curriculo.html">Currículo</a></li>
19+
<li><a href="contato.html">Contato</a></li>
20+
<li id="nav-toggle" class="nav-toggle" onclick="openmenu()">&#9776;</li>
21+
</ul>
22+
</div>
23+
<div class="main">
24+
<ul class="shortcut">
25+
<li><a href="index.html">Home</a></li>
26+
<li>-></li>
27+
<li>Contato</li>
28+
</ul>
29+
30+
<h1>Contato</h1>
31+
<p>
32+
Vamos conversar?
33+
</p>
34+
<h2>E-mail</h2>
35+
<hr>
36+
<p>leonardoc.developer@gmail.com</p>
37+
38+
<h2>Mídias sociais</h2>
39+
<hr>
40+
<div class="icon-fa">
41+
<a href="https://www.linkedin.com/in/leonardoc-dev/" title="Link para o perfil do Linkedin" target="_blank"><i class="fab fa-linkedin"></i></a>
42+
<a href="https://discordapp.com/channels/@me/398958583703928843" title="Link para contato no DiscordApp" target="_blank"><i class="fab fa-discord"></i></a>
43+
</div>
44+
45+
<h2>Meus códigos</h2>
46+
<hr>
47+
<div class="icon-fa">
48+
<a href="https://github.com/leonardoc-dev" title="Link para o perfil do GitHub" target="_blank"><i class="fab fa-github-square"></i></a>
49+
</div>
50+
51+
<div class="return">
52+
<a href="index.html">&#8592; Voltar ao início</a>
53+
</div>
54+
</div>
55+
</body>
56+
</html>

‎css/styles.css‎

Lines changed: 321 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,321 @@
1+
body {
2+
background-color: #ffecdf;
3+
margin: initial;
4+
font-family: 'Josefin Slab', serif;
5+
}
6+
7+
.navigation {
8+
color: #b48257;
9+
height: 45px;
10+
11+
animation-name: navigation-bar;
12+
animation-duration: 3s;
13+
}
14+
15+
.navigation ul {
16+
list-style: none;
17+
margin-top: initial;
18+
padding: initial;
19+
text-align: right;
20+
height: 45px;
21+
}
22+
23+
.navigation li {
24+
display: inline-block;
25+
padding-left: 30px;
26+
padding-right: 30px;
27+
line-height: 45px;
28+
font-size: 18px;
29+
}
30+
31+
.navigation a {
32+
text-decoration: none;
33+
color: #b48257;
34+
}
35+
36+
.navigation a:hover {
37+
color: #1b0706;
38+
}
39+
40+
#nav-toggle {
41+
display: none;
42+
}
43+
44+
#nav-toggle:hover {
45+
color: #1b0706;
46+
cursor: pointer;
47+
}
48+
49+
.cover-page {
50+
color: #b48257;
51+
display: flex;
52+
}
53+
54+
.cover-page span {
55+
color: #1b0706;
56+
display: block;
57+
}
58+
59+
.cover-page div {
60+
display: inline-block;
61+
height: 650px;
62+
}
63+
64+
.main-picture {
65+
width: 40%;
66+
text-align: center;
67+
68+
animation-name: profile-picture;
69+
animation-duration: 2s;
70+
}
71+
72+
.main-picture img {
73+
width: 320px;
74+
border-radius: 320px;
75+
margin-top: 100px;
76+
}
77+
78+
.main-title {
79+
vertical-align: top;
80+
width: 60%;
81+
82+
animation-name: title;
83+
animation-duration: 2s;
84+
}
85+
86+
.main-title h1 {
87+
margin-top: 200px;
88+
text-transform: uppercase;
89+
font-size: 50px;
90+
}
91+
92+
.main-title h2 {
93+
margin-top: -20px;
94+
font-size: 18px;
95+
text-indent: 0.2em;
96+
}
97+
98+
.main {
99+
padding: 60px 120px;
100+
101+
animation-name: contents;
102+
animation-duration: 4s;
103+
}
104+
105+
.main h1 {
106+
color: #b48257;
107+
}
108+
109+
.main h2 {
110+
color: #b48257;
111+
text-transform: uppercase;
112+
font-size: 16px;
113+
margin-top: 40px;
114+
}
115+
116+
.main h3 {
117+
color: #1b0706;
118+
text-transform: uppercase;
119+
font-size: 12px;
120+
}
121+
122+
.main p {
123+
color: #b48257;
124+
font-size: 18px;
125+
line-height: 25px;
126+
text-align: justify;
127+
}
128+
129+
.main a{
130+
color: #794E30;
131+
}
132+
133+
.main hr {
134+
border: 1px solid #b48257;
135+
}
136+
137+
.shortcut {
138+
list-style: none;
139+
padding: initial;
140+
color: #C7835E;
141+
}
142+
143+
.shortcut li {
144+
display: inline-block;
145+
}
146+
147+
.shortcut a {
148+
color: #C7835E;
149+
}
150+
151+
.icon-fa {
152+
font-size: 32px;
153+
display: inline-block;
154+
padding-top: 15px;
155+
}
156+
157+
.return {
158+
display: block;
159+
padding-top: 20px;
160+
}
161+
162+
.return a {
163+
text-decoration: none;
164+
}
165+
166+
.work-picture {
167+
width: 320px;
168+
height: 320px;
169+
display: inline-block;
170+
margin-right: 10px;
171+
margin-bottom: 10px;
172+
background-repeat: no-repeat;
173+
}
174+
175+
.work-link {
176+
text-decoration: none;
177+
}
178+
179+
.div-effect {
180+
width: 100%;
181+
height: 100%;
182+
background-color: black;
183+
opacity: 0;
184+
transition: 2s;
185+
}
186+
187+
.div-effect:hover {
188+
opacity: 0.80;
189+
transition: 2s;
190+
}
191+
192+
.div-effect-text {
193+
text-align: center;
194+
padding-top: 131px;
195+
line-height: 1.6;
196+
}
197+
198+
.div-effect-text h1 {
199+
font-size: 16px;
200+
color: #b48257;
201+
text-transform: uppercase;
202+
font-weight: bold;
203+
margin: initial;
204+
}
205+
206+
.div-effect-text h2 {
207+
font-size: 16px;
208+
color: #E5D7D4;
209+
text-transform: none;
210+
font-weight: bold;
211+
margin: initial;
212+
}
213+
214+
@keyframes profile-picture {
215+
0% {opacity: 0;transform: translate(0px, 20px);}
216+
100% {opacity: 1;transform: translate(0px, 0px);}
217+
}
218+
219+
@keyframes title {
220+
0% {opacity: 0;transform: translate(0px, -20px);}
221+
100% {opacity: 1;transform: translate(0px, 0px);}
222+
}
223+
224+
@keyframes navigation-bar {
225+
0% {opacity: 0;}
226+
50% {opacity: 0;}
227+
100% {opacity: 1;}
228+
}
229+
230+
@keyframes contents {
231+
0% {opacity: 0;transform: translate(-20px, 0px);}
232+
100% {opacity: 1;transform: translate(0px, 0px);}
233+
}
234+
235+
@media (max-width: 1080px) {
236+
237+
.navigation li {
238+
display: none;
239+
}
240+
241+
#nav-toggle {
242+
display: inline-block;
243+
}
244+
245+
.cover-page {
246+
display: block;
247+
}
248+
249+
.cover-page div {
250+
height: auto;
251+
}
252+
253+
.main-picture {
254+
width: 100%;
255+
}
256+
257+
.main-picture img {
258+
margin-top: 20px;
259+
max-width: 55%;
260+
}
261+
262+
.main-title {
263+
width: 100%;
264+
text-align: center;
265+
}
266+
267+
.main-title h1 {
268+
margin-top: 40px;
269+
font-size: 35px;
270+
margin-left: 20px;
271+
margin-right: 20px;
272+
}
273+
274+
.main-title h2 {
275+
margin-top: 12px;
276+
margin-left: 20px;
277+
margin-right: 20px;
278+
}
279+
280+
.main {
281+
padding: 10px 5%;
282+
}
283+
284+
.main p {
285+
text-align: left;
286+
line-height: 30px;
287+
}
288+
289+
.shortcut {
290+
font-size: 14px;
291+
}
292+
293+
.work-picture {
294+
display: block;
295+
max-width: 100%;
296+
margin-bottom: 20px;
297+
}
298+
299+
.div-effect {
300+
opacity: 0.80;
301+
}
302+
303+
.menujs {
304+
height: auto;
305+
}
306+
307+
.menujs ul {
308+
height: auto;
309+
text-align: center;
310+
padding-left: 15%;
311+
padding-right: 15%;
312+
}
313+
314+
.menujs li {
315+
display: block;
316+
border-bottom: 1px solid #b48257;
317+
padding: initial;
318+
width: 100%;
319+
}
320+
321+
}

0 commit comments

Comments
 (0)