-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (128 loc) · 11.6 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
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<title>John's Gaming Hub</title>
<style>
body {
background-image: url(https://images4.alphacoders.com/674/674016.png);
padding: 10px;
font-family: fantasy;
}
header {
font-size: 1.5em;
font-weight: bold;
}
[id=all-contents] {
max-width: 800px;
margin: auto;
}
/* navigation menu */
nav {
margin: 0 auto;
margin-bottom: 20px;
display: flex;
padding: 10px;
}
nav header {
display: flex;
align-items: center;
color: rgb(209, 18, 18);
flex: 1;
}
nav ul {
list-style-image: none;
}
nav li {
display: inline-block;
padding: 0 10px;
}
nav a {
text-decoration: none;
color: #fff;
}
/* main container area beneath menu */
main {
display: flex;
margin: 10px;
}
[class=sidebar] {
margin-right: 25px;
padding: 10px;
}
[class=sidebar] img {
width: 200px;
}
[class=content] {
flex: 1;
padding: 15px;
}
[class=interests] header {
font-size: 1.25em;
}
button {
margin: 10px;
}
</style>
<style type="text/css">
p {
color: rgb(209, 18, 18);
text-shadow: -1px 0 grey, 0 1px grey, 1px 0 grey, 0 -1px grey;
}
h1 {
color: rgb(209, 18, 18);
font-family: fantasy;
text-shadow: -1px 0 grey, 0 1px grey, 1px 0 grey, 0 -1px grey;
}
div {
border: 2px solid;
border-radius: 25px;
color: rgb(209, 18, 18);
text-shadow: -1px 0 grey, 0 1px grey, 1px 0 grey, 0 -1px grey;
}
</style>
</head>
<body>
<div id="all-contents">
<nav>
<h1 class="header" id="firstheader">Welcome to John's Gaming Hub!</h1>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="studies.html">Studies</a></li>
</ul>
</nav>
<main>
<div class="sidebar">
<img src="data:image/png;base64,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">
</div>
<div class="content">
<header>John is Playing Games again...</header>
<p>Student at Mcmain High</p>
<section class="interests"
<header> Interests</header>
<ul>
<li>Sleeping</li>
<li>Games (League of Legends!)</li>
<li>Computers/Technology</li>
</ul>
<p> Hey there random person or aquaitence of mine! Maybe if you already cant tell, im a League of Legends addict! I play league day and night trying to get out of bronze! Im currently a bronze 4 jungle main but i feel i could be challenger if i got better teammates! You can add me: "iAcez" on league if you want me to carry you! Also be sure to check out my youtube channel youtube.com/kuroaf, make sure you leave a like and comment down below the video telling me what you thought of my dank plays! Subscribe if you already havent and ill be back next week with another minecraft video!</p>
</section>
</div>
</main>
<main>
<div class="content">
<header>Professional Interests</header>
<section class="interests">
<button>Click Me to Learn More About Smart John!</button>
<ul class="professional-interests">
<li>JavaScript Web Development</li>
<li>Improving My Photography Skills</li>
<li>Studying Advanced Technology</li>
<li>Aiming for a Software Engineering Degree!</li>
</ul>
</section>
</div>
</main>
</div>
</body>
</html>