Skip to content

Commit 4a1bbc7

Browse files
brunorodrisbrunorodris
committed
Página de link para a BIO
Página de link para a BIO desenvolvido no canal Inteliogia
1 parent 1ba5bc1 commit 4a1bbc7

File tree

3 files changed

+161
-0
lines changed

3 files changed

+161
-0
lines changed

‎17 - Página de link/favicon.png‎

3.2 KB
Loading

‎17 - Página de link/index.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+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
8+
9+
<!-- GOOGLE FONTS -->
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
13+
<!-- END GOOGLE FONTS -->
14+
15+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
16+
17+
<title>@meunome</title>
18+
</head>
19+
<body>
20+
<div class="container">
21+
<header>
22+
<img src="images/" alt="Minha foto do perfil">
23+
<h1>@meunome</h1>
24+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ducimus dolores hic. Iste dolore, temporibus alias sequi delectus illum.</p>
25+
</header>
26+
27+
<section class="botoes-links">
28+
<a href="#" target="_blank" class="link">
29+
<button class="degrade">
30+
<span>Link 1</span>
31+
<i class="bi bi-toggle-on"></i>
32+
</button>
33+
</a>
34+
35+
<a href="#" target="_blank" class="link">
36+
<button class="degrade">
37+
<span>Link 2</span>
38+
<i class="bi bi-code-slash"></i>
39+
</button >
40+
</a>
41+
42+
<a href="#" target="_blank" class="link">
43+
<button class="degrade">
44+
<span>Link 3</span>
45+
<i class="bi bi-facebook"></i>
46+
</button>
47+
</a>
48+
</section><!--botoes-links-->
49+
50+
<footer>
51+
<a href="#" class="btn-footer degrade" target="_blank"><i class="bi bi-envelope-fill"></i></a>
52+
<a href="" class="btn-footer degrade" target="_blank"><i class="bi bi-github"></i></a>
53+
</footer>
54+
</div><!--container-->
55+
</body>
56+
</html>

‎17 - Página de link/style.css‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: 'Outfit', sans-serif;
7+
}
8+
9+
html{
10+
height: 100vh;
11+
font-size: 14px;
12+
}
13+
14+
body{
15+
background-color: #282828;
16+
height: 100%;
17+
}
18+
19+
.container{
20+
height: 100%;
21+
max-width: 550px;
22+
margin: 0 auto;
23+
display: flex;
24+
flex-direction: column;
25+
justify-content: center;
26+
padding: 20px;
27+
color: #fff;
28+
}
29+
30+
a{
31+
text-decoration: none;
32+
color: #fff;
33+
}
34+
35+
.degrade{
36+
background: linear-gradient(to right, #FE4701, #FF0054);
37+
}
38+
39+
/* ESTILO DO HEADER */
40+
41+
header{
42+
text-align: center;
43+
margin-bottom: 40px;
44+
}
45+
46+
header img{
47+
max-width: 150px;
48+
margin-bottom: 20px;
49+
border-radius: 50%;
50+
}
51+
52+
header h1{
53+
font-size: 2em;
54+
margin-bottom: 10px;
55+
color: #5e5e5e;
56+
font-weight: 300;
57+
}
58+
59+
/* ESTILO DOS BOTÕES */
60+
61+
section.botoes-links{
62+
display: flex;
63+
flex-direction: column;
64+
gap: 20px;
65+
}
66+
67+
a.link button{
68+
width: 100%;
69+
padding: 10px 20px;
70+
display: flex;
71+
align-items: center;
72+
justify-content: space-between;
73+
border: none;
74+
border-radius: 30px;
75+
font-size: 1.2em;
76+
cursor: pointer;
77+
color: #fff;
78+
transition: .2s;
79+
}
80+
81+
a.link i{
82+
font-size: 1.5em;
83+
}
84+
85+
a.link button:hover, footer a.btn-footer:hover{
86+
transform: scale(1.05);
87+
}
88+
89+
/* ESTILO DO FOOTER */
90+
91+
footer{
92+
text-align: center;
93+
margin: 30px;
94+
}
95+
96+
footer a.btn-footer{
97+
width: 60px;
98+
height: 60px;
99+
display: inline-block;
100+
font-size: 2em;
101+
line-height: 60px;
102+
border-radius: 50%;
103+
margin: 0 10px;
104+
transition: .2s;
105+
}

0 commit comments

Comments
 (0)