-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (102 loc) · 4.3 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
<!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" />
<title>Muna's Site</title>
<style>
body {
background-image: url('https://www.w3schools.com/howto/img_link_tree_template1_bg.jpg'); /* The image used for background*/
background-repeat: no-repeat; /* Do not repeat the image */
background-position: center; /* Center the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.image-container {
text-align: center;
width: 100%;
}
.links-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
.link {
min-width: 50% !important;
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
.link {
width: 100%;
}
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
.w3-purple, .w3-hover-purple:hover {
color: #fff!important;
background-color: rgba(156, 39, 176, 0.6) !important;
}
</style>
</head>
<body class="w3-white">
<!-- Content container -->
<div class="container">
<!-- Image and name container. Change to your picture here. -->
<div class="image-container">
<img
src="Icon.svg"
class="w3-margin"
alt="Person"
max-width="100%"
height="150px"
style="border-radius: 50%"
/>
<div class="w3-text-white">
<p class="w3-text-white w3-large"> Welcome to <span class="w3-tag w3-large w3-round w3-black w3-text-white"><strong>Muna</strong></span>'s link site!
</p>
<p class="w3-large"><strong>See what I am up to.</strong></p>
</div>
<!-- Links section 1. Replace the # inside of the "" with your links. -->
<div class="links-container">
<a href="/Apps/Games/CC/CurrencyClicker.html" class="w3-button w3-hover-pink w3-large w3-round w3-purple w3-border link" target="_blank"><i class="fab fa-CurrencyClicker"></i>Currency Clicker</a>
<a href="/Apps/Games/SpaceVaders.html" class="w3-button w3-hover-pink w3-large w3-round w3-purple w3-border link" target="_blank"><i class="fab fa-SpaceVaders"></i>Space Vaders</a>
<a href="random.html" class="w3-button w3-hover-pink w3-large w3-round w3-purple w3-border link" target="_blank"><i class="fab fa-random"></i>Random Page</a>
<a href="#" class="w3-button w3-hover-pink w3-large w3-round w3-purple w3-border link" target="_blank"><i class="fab fa-facebook"></i>Facebook</a>
<a href="#" class="w3-button w3-hover-pink w3-large w3-round w3-purple w3-border link" target="_blank"><i class="fab fa-instagram"></i>Instagram</a>
<a href="#" class="w3-button w3-hover-pink w3-large w3-round w3-purple w3-border link" target="_blank"><i class="fab fa-twitter"></i>Twitter</a>
<a href="#" class="w3-button w3-hover-pink w3-large w3-round w3-purple w3-border link" target="_blank"><i class="fa fa-code"></i>Blog</a>
</div>
</div>
</div>
<!-- Footer. This section contains an ad for W3Schools Spaces. You can leave it to support us. -->
<footer class="w3-container w3-center w3-margin-top w3-margin-bottom w3-padding-top-48">
<a class="w3-margin-bottom" href="https://www.w3schools.com/spaces" title="This website was made with W3schools Spaces. Make your own free website today!" target="_blank"> <img src="https://spaces.w3schools.com/logo_4x.png" width="50" height="50">
</a>
<!-- End footer -->
</footer>
</body>
</html>