Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 4057a68

Browse files
kingramzykingramzy
authored
Merge pull request bellshade#156 from Mgkusumaputra/pejuang_strek#4
Feat: Bio Link Tool Template
2 parents 5830839 + bf299a0 commit 4057a68

File tree

4 files changed

+318
-0
lines changed

4 files changed

+318
-0
lines changed

‎Template/Bio Link Tool/Style/SButton.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.circle ul li a:hover {
2+
transform: translate(0, -10px);
3+
color: #000000;
4+
}
5+
6+
.circle ul li .fa-instagram:hover {
7+
color: #E1306C;
8+
}
9+
10+
.circle ul li .fa-facebook:hover {
11+
color: #3B5998;
12+
}
13+
14+
.circle ul li .fa-twitter:hover {
15+
color: #55ACEE;
16+
}
17+
18+
.circle ul li .fa-tiktok:hover {
19+
color: #010101;
20+
}
21+
22+
.circle ul li .fa-pinterest:hover {
23+
color: #BD081C;
24+
}
25+
26+
.circle ul li .fa-linkedin:hover {
27+
color: #0077B5;
28+
}
29+
30+
.circle ul li .fa-telegram:hover {
31+
color: #0088CC;
32+
}
33+
34+
.circle ul li .fa-reddit:hover {
35+
color: #FF4500;
36+
}
37+
38+
.circle ul li .fa-youtube:hover {
39+
color: #FF0000;
40+
}
41+
42+
.circle ul li .fa-quora:hover {
43+
color: #B92B27;
44+
}
45+
46+
.circle ul li .fa-discord:hover {
47+
color: #7289DA;
48+
}
49+
50+
.circle ul li .fa-twitch:hover {
51+
color: #9147FE;
52+
}
53+
54+
.circle ul li .fa-soundcloud:hover {
55+
color: #FF7700;
56+
}
57+
58+
.circle ul li .fa-github:hover {
59+
color: #211F1F;
60+
}
61+
62+
.circle ul li .fa-medium:hover {
63+
color: #12100E;
64+
}

‎Template/Bio Link Tool/Style/main.css‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
html {
7+
font-family: "Rubik", sans-serif;
8+
}
9+
10+
body {
11+
min-height: 100vh;
12+
max-width: 100%;
13+
background-color: #f0f0f0;
14+
color: #262626;
15+
}
16+
17+
.main {
18+
padding-bottom: 85px;
19+
}
20+
21+
.header {
22+
margin: 20px 0 55px;
23+
display: flex;
24+
flex-direction: column;
25+
align-items: center;
26+
}
27+
28+
.avatar img {
29+
border-radius: 50%;
30+
width: 96px;
31+
height: 96px;
32+
margin-bottom: 12px;
33+
}
34+
35+
.username {
36+
text-decoration: underline;
37+
text-align: center;
38+
}
39+
40+
.long-btn {
41+
margin: 20px auto;
42+
border-radius: 20px;
43+
border: 2px solid #262626;
44+
padding: 5px;
45+
max-width: 540px;
46+
height: 42px;
47+
display: flex;
48+
justify-content: center;
49+
text-align: center;
50+
align-items: center;
51+
color: #262626;
52+
text-decoration: none;
53+
font-size: 18px;
54+
}
55+
56+
.long-btn:hover {
57+
color: #f0f0f0;
58+
background-color: #262626;
59+
transition-duration: 0.3s;
60+
}
61+
62+
.circle ul {
63+
margin: 30px;
64+
text-align: center;
65+
justify-content: center;
66+
align-items: center;
67+
/* */
68+
}
69+
70+
.circle ul li {
71+
display: inline-block;
72+
list-style: none;
73+
margin: 0px 5px;
74+
}
75+
76+
.circle ul li .fab {
77+
font-size: 36px;
78+
line-height: 50px;
79+
transition: 0.6s;
80+
color: #262626;
81+
list-style: none;
82+
}
83+
84+
.circle ul li a {
85+
text-decoration: none;
86+
width: 64px;
87+
height: 64px;
88+
border-radius: 50%;
89+
transition: 0.5s;
90+
}
91+
92+
.footer {
93+
text-align: center;
94+
margin-bottom: 15px;
95+
}
96+
97+
.footer a{
98+
color: #262626;
99+
text-decoration: none;
100+
font-weight: bold;
101+
}
102+
103+
@media (max-width: 576px) {
104+
.long-btn {
105+
max-width: 270px;
106+
font-size: 12px;
107+
height: 28px;
108+
}
109+
.avatar img {
110+
width: 64px;
111+
height: 64px;
112+
}
113+
.username {
114+
font-size: 14px;
115+
}
116+
.circle ul li .fab {
117+
font-size: 28px;
118+
}
119+
.circle ul li a {
120+
width: 40px;
121+
height: 40px;
122+
}
123+
.footer {
124+
font-size: 12px;
125+
}
126+
}

‎Template/Bio Link Tool/index.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>@Your Username</title>
7+
8+
<!-- Css -->
9+
<link rel="stylesheet" href="./Style/main.css" />
10+
<link rel="stylesheet" href="./Style/SButton.css" />
11+
12+
<!-- Font Awesome -->
13+
<script
14+
src="https://kit.fontawesome.com/3ffd4c8596.js"
15+
crossorigin="anonymous"
16+
></script>
17+
18+
<!-- Google Fonts -->
19+
<link rel="preconnect" href="https://fonts.googleapis.com" />
20+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
21+
<link
22+
href="https://fonts.googleapis.com/css2?family=Rubik&display=swap"
23+
rel="stylesheet"
24+
/>
25+
</head>
26+
</head>
27+
<body>
28+
29+
<div class="main">
30+
31+
<!-- Avatar -->
32+
<div class="header">
33+
<div class="avatar">
34+
<img src="https://www.blexar.com/avatar.png" alt="" />
35+
</div>
36+
<div class="username">
37+
<h3>@Your Username</h3>
38+
</div>
39+
</div>
40+
41+
<div class="main-content">
42+
43+
<!-- Long Button -->
44+
<div class="long-button">
45+
<a
46+
href=""
47+
target="_blank"
48+
class="long-btn"
49+
>
50+
Content Long Button
51+
</a>
52+
</div>
53+
54+
<!-- Social Button -->
55+
<div class="circle-button">
56+
<div class="circle">
57+
<ul>
58+
<li class="instagram">
59+
<a href=""
60+
target="_blank"
61+
class="fab fa-whatsapp"
62+
></a>
63+
</li>
64+
</ul>
65+
</div>
66+
</div>
67+
68+
</div>
69+
</div>
70+
71+
<!-- Footer -->
72+
<div class="footer">
73+
<p>Template crated by <strong>Muhammad Garuda</strong></p>
74+
</div>
75+
</body>
76+
</html>

‎Template/Bio Link Tool/readme.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
## Panduan Penggunaan Template Bio Link Tool
2+
3+
4+
1. Ganti elemen dibawah pada file [index.html](index.html) dengan namamu sendiri.
5+
```HTML
6+
<title>@Your Username</title>
7+
```
8+
2. Ubah foto dari avatar dan username pada file [index.html](index.html) dengan avatar juga username milikmu.
9+
```HTML
10+
<div class="header">
11+
<div class="avatar">
12+
<img src="https://www.blexar.com/avatar.png" alt="" />
13+
</div>
14+
<div class="username">
15+
<h3>@Your Username</h3>
16+
</div>
17+
</div>
18+
```
19+
20+
3. Sesuaikan penggunaan long button dengan kebutuhan pada file [index.html](index.html)
21+
```HTML
22+
<div class="long-button">
23+
<a
24+
href=""
25+
target="_blank"
26+
class="long-btn"
27+
>
28+
Content Long Button
29+
</a>
30+
</div>
31+
```
32+
33+
4. Gunakan social button dengan syntaks:
34+
```HTML
35+
<li class="instagram">
36+
<a href=""
37+
target="_blank"
38+
class="fab fa-twitch"
39+
></a>
40+
</li>
41+
```
42+
Tukar class li dengan nama social media juga a class mengikuti syntaks `fab fa-(nama social media)`
43+
44+
untuk hasil yang responsive, penggunaan social button maksimal 8 Item.
45+
46+
Warna social media yang tersedia bisa dilihat pada file [Sbutton.css](Style/Sbutton.css)
47+
dapat ditambahkan dengan syntaks:
48+
```CSS
49+
.circle ul li .fa-(nama social media):hover {
50+
color: #(warna social media);
51+
}
52+
```

0 commit comments

Comments
 (0)