Skip to content

Commit ba2a55d

Browse files
mryohomryoho
committed
Added google doc to portfolio page
1 parent f73eef3 commit ba2a55d

File tree

4 files changed

+202
-93
lines changed

4 files changed

+202
-93
lines changed

‎index.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,6 @@
4040
background-color: #059D8E;
4141
}
4242

43-
44-
4543
.sidebar-nav{
4644
margin: 15px 0px;
4745
color:#FFFFFF;
@@ -149,7 +147,7 @@
149147
<h1 class="main-title">Mr. Yoho's Homepage</h1>
150148
<div class="left-panel">
151149
<h2 class="sub-title">My Background</h2>
152-
<p class="text-info">Born and raised in Colorado and Oregon. Majored in computer science, French, and engineering physics at Whitworth University. Studied abroad at Institut National de Sciences Appliques de Lyon in Lyon France and traveled Europe extensively. Lived, taught, and coached teachers in urban and rural Mississippi.
150+
<p class="text-info">Born and raised in Colorado and Oregon. Majored in computer science, French, and engineering physics at Whitworth University. Studied abroad at Institut National de Sciences Appliques de Lyon in Lyon France and traveled Europe extensively. Lived, taught, and coached teachers in urban and rural Mississippi.
153151
</div>
154152
<div class="right-panel">
155153
<h2 class="sub-title">What I Do Now</h2>

‎index_template.html

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<!-- TODO: Update Title -->
5+
<title>Mr. Yoho's Web Page</title>
6+
7+
<!-- Include the following stylesheet (controls sytle of navbar and footer) -->
8+
<link rel="stylesheet" type="text/css" href="./css/style.css">
9+
10+
<!-- TODO: Change CSS colors and image so that it matches your desired theme -->
11+
<style>
12+
body {
13+
font-family: Verdana;
14+
background-color:#C2C2C2;
15+
}
16+
17+
/* TODO: Make sure the height of your page is big enough */
18+
.main {
19+
clear: left;
20+
min-width: 600px;
21+
max-width: 800px;
22+
height:650px;
23+
margin:0 auto;
24+
}
25+
26+
.main-page{
27+
display: block;
28+
float:right;
29+
background-color:#E0E0E0;
30+
height:100%;
31+
width:75%;
32+
box-sizing:border-box;
33+
}
34+
35+
.sidebar {
36+
box-sizing:border-box;
37+
padding:10px;
38+
float:left;
39+
width:25%;
40+
height:100%;
41+
background-color: #059D8E;
42+
}
43+
44+
.sidebar-nav{
45+
margin: 15px 0px;
46+
color:#FFFFFF;
47+
}
48+
49+
.sidebar li {
50+
margin: 20px 5px 0px;
51+
}
52+
53+
.sidebar ul ul li{
54+
margin: 10px 15px 0px;
55+
font-size:0.8em;
56+
}
57+
58+
.sidebar ul ul li a{
59+
text-decoration: none;
60+
color: #FFFFFF;
61+
}
62+
63+
.sidebar ul ul li a:hover{
64+
color: #F26101;
65+
}
66+
67+
.image-container {
68+
height:300px;
69+
width:100%;
70+
position: relative;
71+
/* TODO: Update the following image */
72+
background-image: url("./img/home/south_sister.jpg");
73+
background-repeat: no-repeat;
74+
background-size: 100% 300px;
75+
}
76+
77+
.main-title {
78+
margin: 10px 15px;
79+
font-size: 30px;
80+
}
81+
82+
.left-panel{
83+
box-sizing: border-box;
84+
width: 50%;
85+
float:left;
86+
padding:20px;
87+
}
88+
89+
.right-panel{
90+
box-sizing: border-box;
91+
width: 50%;
92+
float:left;
93+
padding:20px;
94+
}
95+
96+
.sub-title {
97+
text-align: center;
98+
}
99+
100+
.text-info {
101+
font-size: 0.8em;
102+
margin: 20px;
103+
}
104+
105+
</style>
106+
</head>
107+
<body>
108+
<div class="navbar">
109+
<ul class="navigation">
110+
<!-- TODO: Ensure that your Navbar is correct -->
111+
<li class="active"><a href="">Home</a></li>
112+
<li><a href="./portfolio.html">Portfolio</a></li>
113+
</ul>
114+
</div>
115+
116+
<div class="main">
117+
<div class="sidebar">
118+
<ul class="sidebar-nav">
119+
<!-- TODO: Update the recent projects -->
120+
<li><strong>Recent Projects</strong></li>
121+
<ul>
122+
<li><a href="./portfolio.html">Shooting Star</a></li>
123+
<li><a href="./portfolio.html">Maze Game</a></li>
124+
</ul>
125+
</ul>
126+
</div>
127+
<div class="main-page">
128+
<div class="image-container"></div>
129+
130+
<!-- TODO: Update the page title -->
131+
<h1 class="main-title">Mr. Yoho's Homepage</h1>
132+
<!-- TODO: Update the left-panel and right-panel with info from your 90s website -->
133+
<div class="left-panel">
134+
<h2 class="sub-title">My Background</h2>
135+
<p class="text-info">Born and raised in Colorado and Oregon. Majored in computer science, French, and engineering physics at Whitworth University. Studied abroad at Institut National de Sciences Appliques de Lyon in Lyon France and traveled Europe extensively. Lived, taught, and coached teachers in urban and rural Mississippi.
136+
</div>
137+
<div class="right-panel">
138+
<h2 class="sub-title">What I Do Now</h2>
139+
<p class="text-info">I currently serve as the founding computer science teacher at Alpha Cindy Avitia High School, where I have the joy of working with students from all over East San Jose to discover more about computer science. I also find time to mountain bike, spend time with close friends, and occassionally play some guitar.
140+
</div>
141+
142+
</div>
143+
<!-- TODO: Add anything you want to the footer -->
144+
<div class="footer">
145+
</div>
146+
</div>
147+
148+
149+
150+
</body>
151+
</html>

‎portfolio.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -159,13 +159,19 @@ <h2>My Work</h2>
159159
<!-- The div below shows an Embedded Scratch Project -->
160160
<div class="grid">
161161
<iframe allowtransparency="true" width="350" height="300" src="//scratch.mit.edu/projects/embed/90479001/?autostart=false" frameborder="0" allowfullscreen></iframe>
162-
<p>Maze Game</p>
162+
<p><a href="https://scratch.mit.edu/projects/90479001/" target="_blank">Maze Game</a></p>
163163
</div>
164164

165165
<!-- The div below is a screenshot of a document that you can click on to get to the document-->
166166
<div class="grid">
167167
<a href="https://www.khanacademy.org/computer-programming/spin-off-of-project-shooting-star/6482264175542272" target="_blank"><img src="./img/portfolio/project_shooting_star.png" alt="Project Shooting Star" width="350"></a>
168-
<p>Project Shooting Star</p>
168+
<p><a href="https://www.khanacademy.org/computer-programming/spin-off-of-project-shooting-star/6482264175542272" target="_blank">Project Shooting Star</a></p>
169+
</div>
170+
171+
<!-- The div below is an example of a linked Google Doc -->
172+
<div class="grid">
173+
<iframe src="https://docs.google.com/document/d/1ZTqoVsyfyCs3ZU6sGfs6fJ4j9kXUNjJo_tBRSxe1rZs/pub?embedded=true" height=300 width=350></iframe>
174+
<p><a href="https://docs.google.com/document/d/1ZTqoVsyfyCs3ZU6sGfs6fJ4j9kXUNjJo_tBRSxe1rZs/pub" target="_blank">Live Website Challenge</a></p>
169175
</div>
170176
</div>
171177
</div>

‎portfolio_starter.html

Lines changed: 42 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<!-- TODO Add your webpage title -->
5-
<title></title>
4+
<!-- TODO: Update your portfolio page title -->
5+
<title>Mr. Yoho - Portfolio</title>
6+
7+
<!-- Linked Stylesheet (Controls Navbar and Footer) -->
8+
<link rel="stylesheet" type="text/css" href="./css/style.css">
69
<style>
710
/*Reset CSS below -- this gets rid of a lot of cross-browser bugs*/
811
/************ DO NOT TOUCH ANY OF THE CSS BELOW ***************/
@@ -52,9 +55,9 @@
5255
}
5356

5457
/************** END OF RESET CSS **************/
55-
56-
5758
</style>
59+
60+
<!-- TODO: Change the CSS colors below so that it fits your website theme -->
5861
<style type="text/css" media="screen">
5962
body {
6063
background-color: gray;
@@ -63,78 +66,31 @@
6366
font-family: Verdana;
6467
}
6568

66-
/* PORTFOLIO GRID CSS BEGIN */
6769
.grid {
6870
background-color: white;
6971
border:1px solid black;
7072
display: inline-block;
7173
margin:8px;
7274
color:black;
7375
}
74-
76+
7577
#carousel {
7678
background-color: #ff6600;
77-
margin:10px;
7879
padding:15px;
7980
}
80-
/* END PORTFOLIO GRID CSS */
81-
82-
/* NAVBAR CSS BEGIN */
83-
.nav li {
84-
line-height: 40px;
85-
padding:20px;
86-
list-style: none;
87-
display: inline-block;
88-
background-color: white;
89-
}
9081

91-
/* Select all child links in a nav element */
92-
.nav a {
93-
text-decoration: none;
94-
}
95-
96-
.navbar-outside {
97-
display:block;
98-
background-color: #313732;
99-
height:80px;
100-
}
101-
102-
.navbar {
103-
min-width:600px;
104-
max-width:800px;
105-
margin: 0 auto;
106-
}
107-
108-
.navigation li {
109-
padding: 30px 15px;
110-
list-style: none;
111-
text-decoration: none;
112-
float:left;
113-
height: 20px;
114-
}
11582

116-
.navigation li a {
117-
text-decoration: none;
118-
color:#FFFFFF;
119-
}
120-
121-
.navigation li:hover {
122-
background-color: #F26101;
123-
}
124-
125-
.active {
126-
background-color: #4CAF50;
127-
color: white;
83+
body {
84+
font-family: Verdana;
85+
background-color:#C2C2C2;
12886
}
129-
/* END NAVBAR CSS */
130-
13187

13288
.main {
13389
display:block;
13490
clear: left;
13591
min-width: 600px;
13692
max-width: 800px;
137-
height:500px;
93+
height:100%;
13894
margin:0 auto;
13995
}
14096

@@ -154,15 +110,7 @@
154110
height:100%;
155111
background-color: #059D8E;
156112
}
157-
158-
.footer{
159-
width:100%;
160-
background-color: #313732;
161-
height:50px;
162-
clear:both;
163-
}
164-
165-
113+
166114
.main-title {
167115
margin: 10px 15px;
168116
font-size: 30px;
@@ -195,37 +143,43 @@
195143
</style>
196144
</head>
197145
<body>
198-
<div class="navbar-outside">
199146
<div class="navbar">
200-
<ul class="navigation">
201-
<li><a href="index.html" >Home</a></li>
202-
<li><a href="contact.html">Contact</a></a></li>
203-
<li><a href="">About</a></li>
204-
<li class="active"><a href="portfolio.html">Portfolio</a></li>
205-
<li><a href="">Social Media</a></li>
206-
<li><a href="blog.html">Blog</a></li>
207-
</ul>
147+
<ul class="navigation">
148+
<!-- TODO: Ensure that your Navbar is correct -->
149+
<li><a href="./index.html">Home</a></li>
150+
<li class="active"><a href="">Portfolio</a></li>
151+
</ul>
208152
</div>
209-
</div>
210153

211154
<div class="main">
212155
<div id="carousel">
213156
<h2>My Work</h2>
214-
<!-- The div below shows an Embedded Scratch Project -->
215-
<div class="grid">
216-
<iframe allowtransparency="true" width="350" height="300" src="//scratch.mit.edu/projects/embed/90479001/?autostart=false" frameborder="0" allowfullscreen></iframe>
217-
<p>Maze Game</p>
218-
</div>
219-
220-
<!-- The div below is a screenshot of a document that you can click on to get to the document-->
221-
<div class="grid">
222-
<a href="https://www.khanacademy.org/computer-programming/spin-off-of-project-shooting-star/6482264175542272" target="_blank"><img src="./img/portfolio/project_shooting_star.png" alt="Project Shooting Star" width="350"></a>
223-
<p>Project Shooting Star</p>
224-
</div>
225-
157+
<!-- The div below shows an Embedded Scratch Project -->
158+
<!-- TODO: Update for your Maze Game -->
159+
<div class="grid">
160+
<iframe allowtransparency="true" width="350" height="300" src="//scratch.mit.edu/projects/embed/90479001/?autostart=false" frameborder="0" allowfullscreen></iframe>
161+
<p><a href="https://scratch.mit.edu/projects/90479001/" target="_blank">Maze Game</a></p>
226162
</div>
163+
164+
<!-- The div below is a screenshot of a document that you can click on to get to the document-->
165+
<!-- TODO: Update for your Project: Shooting Star -->
166+
<div class="grid">
167+
<a href="https://www.khanacademy.org/computer-programming/spin-off-of-project-shooting-star/6482264175542272" target="_blank"><img src="./img/portfolio/project_shooting_star.png" alt="Project Shooting Star" width="350"></a>
168+
<p><a href="https://www.khanacademy.org/computer-programming/spin-off-of-project-shooting-star/6482264175542272" target="_blank">Project Shooting Star</a></p>
169+
</div>
170+
171+
<!-- The div below is an example of a linked Google Doc -->
172+
<!-- TODO: Update for your Algebra Challenge 2 (The fish tank one) -->
173+
<div class="grid">
174+
<iframe src="https://docs.google.com/document/d/1ZTqoVsyfyCs3ZU6sGfs6fJ4j9kXUNjJo_tBRSxe1rZs/pub?embedded=true" height=300 width=350></iframe>
175+
<p><a href="https://docs.google.com/document/d/1ZTqoVsyfyCs3ZU6sGfs6fJ4j9kXUNjJo_tBRSxe1rZs/pub" target="_blank">Live Website Challenge</a></p>
176+
</div>
177+
178+
<!-- TODO: Add more div class="grid" elements for your other Khan Academy Projects and Algebra Challenges -->
227179
</div>
228-
180+
</div>
181+
182+
<div class="footer">
229183
</div>
230184

231185

0 commit comments

Comments
 (0)