Skip to content

Commit 2c64a83

Browse files
mattolivrmattolivr
committed
2-DR1-TP2.04
1 parent 62d9545 commit 2c64a83

File tree

2 files changed

+153
-0
lines changed

2 files changed

+153
-0
lines changed

‎2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.04/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>DR1 - TP 2.04</title>
7+
<link rel="stylesheet" href="./style.css">
8+
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
10+
</head>
11+
<body>
12+
<main>
13+
<article>
14+
<div class="menu">
15+
<ul>
16+
<li>Works</li>
17+
<li>Blog</li>
18+
<li>Contact</li>
19+
</ul>
20+
<button><i class="fa-solid fa-bars"></i></button>
21+
</div>
22+
<div class="apresentacao">
23+
<img src="https://cdn.shopify.com/s/files/1/0042/9981/6995/files/lucas-sankey-378674-unsplash.jpg?v=1565336080" alt="Foto de Perfil" title="Foto de Perfil">
24+
<div class="dados-pessoais">
25+
<h2>Hi, I am John, Creative Technologist</h2>
26+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima cum quo sunt accusamus adipisci! Quos dicta sint ut deserunt illum expedita accusamus, corporis sit quasi. Dignissimos repellendus optio blanditiis suscipit?</p>
27+
<button class="download">Download Resume</button>
28+
</div>
29+
</div>
30+
</article>
31+
</main>
32+
</body>
33+
</html>

‎2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.04/style.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: Verdana, Geneva, Tahoma, sans-serif;
9+
}
10+
11+
article {
12+
display: flex;
13+
flex-direction: column;
14+
align-items: center;
15+
justify-content: space-between;
16+
17+
min-height: 100vh;
18+
19+
padding: 0 24px;
20+
text-align: center;
21+
}
22+
23+
.menu {
24+
width: 100%;
25+
26+
display: flex;
27+
flex-direction: row;
28+
justify-content: flex-end;
29+
30+
& > ul {
31+
list-style-type: none;
32+
display: none;
33+
34+
li {
35+
font-size: 1.2rem;
36+
}
37+
}
38+
39+
& > button {
40+
align-self: flex-end;
41+
font-size: 2rem;
42+
margin: 16px 0;
43+
44+
background-color: transparent;
45+
border: none;
46+
outline: none;
47+
48+
color: gray;
49+
}
50+
}
51+
52+
.apresentacao {
53+
flex-grow: 1;
54+
55+
display: flex;
56+
flex-direction: column;
57+
justify-content: center;
58+
align-items: center;
59+
60+
gap: 52px;
61+
62+
img {
63+
border-radius: 50%;
64+
width: 50%;
65+
}
66+
67+
.dados-pessoais {
68+
display: flex;
69+
flex-direction: column;
70+
align-items: center;
71+
gap: 24px;
72+
73+
h2 {
74+
font-size: 1.8rem;
75+
}
76+
77+
.download {
78+
background-color: rgb(243, 86, 86);
79+
80+
padding: 10px 20px;
81+
border-radius: 2px;
82+
border: none;
83+
84+
color: white;
85+
font-size: 1.05rem;
86+
87+
width: fit-content;
88+
}
89+
}
90+
}
91+
92+
@media (min-width: 992px) {
93+
.apresentacao {
94+
flex-direction: row-reverse;
95+
gap: 72px;
96+
97+
img {
98+
max-width: 350px;
99+
}
100+
101+
.dados-pessoais {
102+
align-items: flex-start;
103+
text-align: left;
104+
}
105+
}
106+
107+
.menu {
108+
& > ul {
109+
display: flex;
110+
flex-direction: row;
111+
gap: 24px;
112+
113+
padding: 16px 0;
114+
}
115+
116+
& > button {
117+
display: none;
118+
}
119+
}
120+
}

0 commit comments

Comments
 (0)