-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (121 loc) · 4.14 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
<!DOCTYPE HTML>
<html>
<head>
<title>About me</title>
<style>
body {
background: rgb(115, 79, 214);
color: rgb(45, 45, 45);
padding: 10px;
font-family: arial;
}
#all-contents {
max-width: 800px;
margin: auto;
}
/* navigation menu */
nav {
box-shadow: -6px -4px 2px -2px rgba(0,0,0,0.4);
background-image: linear-gradient(rgba(255,25,255,.5), rgb(4, 20, 161));
border-radius: 20px/60px;
margin: 0 auto;
margin-bottom: 20px;
display: flex;
padding: 10px;
}
h1 {
display: flex;
align-items: center;
color: rgb(11, 11, 12);
flex: 1;
margin: 0;
}
#nav-ul {
list-style-image: none;
}
.nav-butt {
display: inline;
padding: 7px 40px;
margin: 7px 10px;
border-radius: 20px/60px;
box-shadow: -6px -4px 2px -2px rgba(0,0,0,0.4);
}
a {
text-decoration: none;
color: rgb(8, 8, 8);
}
/* main container area beneath menu */
main {
background: rgb(156, 179, 241);
display: flex;
border-radius: 40px/80px;
box-shadow: -6px -4px 2px -2px rgba(0,0,0,0.4);
}
.sidebar {
margin-right: 25px;
padding: 10px;
}
.sidebar-img {
width: 200px;
}
.content {
flex: 1;
padding: 15px;
}
#interests {
border: 4px silver ridge;
padding: 8px;
}
h2, h3 {
margin: 5px;
}
.center-front{
text-align: center;
margin-left: 190px;
}
</style>
</head>
<body>
<!-- All content goes here -->
<div id="all-contents" >
<nav>
<h1>Overview</h1>
<ul id="nav-ul" >
<button class="nav-butt" onclick="window.location.href='index.html';">
Home
</button>
<button class="nav-butt"onclick="window.location.href='portfolio.html';" >
Portfolio
</button>
</ul>
</nav>
<main>
<!-- Sidebar section -->
<div class="sidebar">
<div class="center-front">
<h2>August Vaurigaud</h2>
<img class="sidebar-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_I__Y6aPTegyCw7iEvs5hQdNjZmtXYkmY4u1Ybna3lEmL8pY:https://dreamfarmstudios.com/wp-content/uploads/2019/10/LS-head-3d-modeling.jpg&usqp=CAU">
<p> Student at BCHS</p>
<!-- Interests section -->
</div>
<div>
<h3>Interests</h3>
<ul>
<li>Hardware and Computers (Building, Fixing, Repurposing, Selling on ebay, etc.)</li>
<li>Video Games/Game development</li>
<li>(leisurely:) Dogs, Unicycling, and Getting Packages in the mail, Piano</li>
</ul>
</div>
</div>
<!-- Content section -->
<div class="content">
<h2> </h2>
<p> </p>
<!-- Interests section -->
<div id="Interests">
</div>
</div>
</main>
</div>
</body>
</html>