-
Notifications
You must be signed in to change notification settings - Fork 0
/
aboutme.html
210 lines (185 loc) · 5.02 KB
/
aboutme.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html>
<head>
<body>
<style>
body {
background-image: url("https://github.com/rbcmrchs/GWC-Portfolio/blob/GH-pages/claudio-testa-218497.jpg?raw=true");
background-color: #E6E6E6;
}
<style>
h1 {font-family: Courier New;
text-align: center;
}
}
</style>
<h1><font color="#E9E8E8">Rebecca Marchesi's Portfolio</font color="#E9E8E8"><br></h1>
<style>
body {font-family: Courier New;
text-align: center;
}
/* Style the tab */
div.tab {
text-align: center;
overflow: hidden;
border: 3px solid #ccc;
background-color: #CBCBCB;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: #CBCBCB;
float: center;
border: none;
outline: none;
cursor: pointer;
padding: 15px 45px;
transition: 0.3s;
font-size: 20px;
font-family: Courier New;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #9F9F9F;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #9F9F9F;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
font-weight: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks"onclick="openCity(event,'About Me')">About Me</button>
<button class="tablinks" onclick="openCity(event, 'Education')">Education</button>
<button class="tablinks" onclick="openCity(event, 'Travels')">Travels</button>
<button class="tablinks" onclick="openCity(event, 'Projects')">Projects</button>
</div>
<div id="About Me" class="tabcontent">
<style>
body {background-color: #E6E6E6;}
</style>
<body>
<h2>Biography</h2>
<style>
p {text-align: left;
background-color: #E6E6E6;}
</style>
<p>
<br>
I was born on the 18th of October in 2001 at Holy Cross Hospital in Maryland. <br><br>
My family lives in Brazil, and I was the first person to be born in the US. <br><br>
Since my family is Brazillian I know how to speak Portuguese, English, and Spanish. <br><br><br>
A fun fact about me is that even though I love to travel, i've never been on a plane before.
<br>
</p>
<style>
table {
font-family: Courier;
border-collapse: collapse;
width: 40%;
text-align: center;
background-color: #E6E6E6;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
<table>
<tr>
<font-weight: Bold;>
<th>My Likes</th>
<th>My Dislikes</th>
</tr>
<tr>
<td>Traveling</td>
<td>Carbonated Drinks</td>
</tr>
<tr>
<td>Hiking</td>
<td>Traffic</td>
</tr>
<tr>
<td>Watching Movies</td>
<td>Computer Crashes</td>
</tr>
</table>
<p>
<style>
p {background-color: #E6E6E6;}
</style>
<br>
Here are some of my favorite websites: <br><br>
<a href="http://weirdorconfusing.com/">Generates something weird or confusing you can purchase.</a><br><br>
<a href="http://ducksarethebest.com/">A whole lot of ducks.</a><br><br>
<a href="http://www.koalastothemax.com/">A koala.</a><br><br>
</p>
</body>
</div>
<div id="Education" class="tabcontent">
<h2>My Academic Career</h2>
<style>
p {text-align: left;}
</style>
<p><br>
I go to Northwood High School located in Silver Spring, Maryland. <br><br>
At school I play girls volleyball in the fall and co ed volleyball in the spring. <br><br>
I took AP Psychology and US Government last year and plan on taking AP Computer Science: Programming, BC Calculus, and Language. <br><br>
<center>
<a href="http://www.montgomeryschoolsmd.org/schools/northwoodhs/">
<img src="https://github.com/rbcmrchs/GWC-Portfolio/blob/master/logo.png?raw=true" alt="School Logo" style="width:200px;height:200px;">
</a>
</p>
</div>
<div id="Travels" class="tabcontent">
<h2>My Traveling Experience</h2>
<style>
p {text-align: left;}
</style>
<p>Travels Go Here</p>
</div>
<div id="Projects" class="tabcontent">
<h2>My Projects with GWC</h2>
<style>
p {text-align: left;}
</style>
<p><br>
This game is called Egg Chase. It involves the player as a chicken, crossing the streets while avioding the cars to collect as many eggs as possible before running out of lives. <br><br>
<center>
<img src="https://github.com/rbcmrchs/GWC-Portfolio/blob/master/GamePicture.png?raw=true" alt="Picture of Game" style="width:304px;height:228px;" align="middle">
<br><br>
If you'd like to try it, heres the link: <br>
<a href="https://scratch.mit.edu/projects/167657824/">Egg Chase Game</a>
</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<br>
<br>
<br>
<style>
</body>
</html>