-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (116 loc) · 4.42 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-pink.css">
<title>Baby Young</title>
<script src="https://unpkg.com/feather-icons"></script>
<style>
body {
background: url("https://babyyou.ng/img_link_tree_template2_bg.jpg"); /* The image used for background */
}
.container {
width: 100%;
height: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.links-container {
display: flex;
flex-direction: column;
jusify-content: center;
align-items: center;
}
.links-container a {
width: 80%;
}
.w3-theme-l1:hover {
background-color: #f279a1 !important;
}
.margin-top-2 {
margin-top: 32px;
}
.bottom {
width: 100%;
text-align: center;
width: auto;
font-weight: bolder;
}
.bottom span {
color: #ed4d82;
}
.bottom svg {
stroke: #ed4d82;
fill: #ed4d82;
}
@media (min-width: 768px) {
.link {
width: 100%;
}
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
</style>
</head>
<body>
<!-- Content container -->
<div class="container">
<!-- Image and name container. Change to your pictue here. -->
<div style="text-align: center">
<img src="https://babyyou.ng/profile.jpg" class="w3-margin" alt="image" width="150px" height="150px" style="border-radius: 50%;">
<p><span class="name w3-padding w3-pink w3-round" style="font-weight: bolder;">Hi, I'm Baby Young!</span></p>
<p style="font-weight: bolder;">Check out my links!</p>
</div>
<!-- Links section 1. Replace the # inside of the "" with your links. -->
<h4 class="margin-top-2" style="text-align: center;">MY SOCIAL NETWORKS</h4>
<div class="links-container">
<a href="https://web.facebook.com/BabyYoungCruz" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Facebook</a>
<br>
<a href="https://www.instagram.com/babyyoungcruz/" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Instagram</a>
<br>
<!--
<a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Twitter</a>
<br>
<a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Github</a>
-->
</div>
<!-- Links section 2. Replace the # inside of the "" with your links. -->
<!--
<h4 class="margin-top-2" style="text-align: center;">MY CV</h4>
<div class="links-container">
<a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Curriculum Vitae</a>
</div>
-->
<!-- Links section 3. Replace the # inside of the "" with your links. -->
<!--
<h4 class="margin-top-2" style="text-align: center;">MY BLOG</h4>
<div class="links-container">
<a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Hashnode</a>
</div>
-->
<!-- Links section 3. Replace the # inside of the "" with your links. -->
<!--
<h4 class="margin-top-2" style="text-align: center;">MY BUSINESS</h4>
<div class="links-container">
<a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Business</a>
</div>
-->
<!-- Bottom section 3 -->
<div class="bottom margin-top-2 w3-padding w3-round">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span style="vertical-align: 7px;"> 2024 - Baby Young</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</div>
</div>
<script>
feather.replace()
</script>
</body>
</html>