Skip to content
This repository was archived by the owner on Jan 26, 2025. It is now read-only.

Better homepage #127

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Better homepage #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b5b06bf
compress something.png
sophiaswang Sep 27, 2020
89166ff
rearrange sections into middle/high school divide
sophiaswang Sep 27, 2020
c35a1f1
add imgs
sophiaswang Sep 27, 2020
2f5ffa7
make things fit together css
sophiaswang Sep 27, 2020
688b77b
switch order of middle and high school
sophiaswang Sep 27, 2020
8e2f1eb
Merge branch 'master' into better-homepage
sophiaswang Dec 17, 2020
5065a54
add FF photo
sophiaswang Dec 17, 2020
06cb160
fix css
sophiaswang Dec 17, 2020
4c3884e
update from master
sophiaswang Jan 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added imgs/ealogo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/ffgroup.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified imgs/something.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/surprisebot.PNG
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
216 changes: 42 additions & 174 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,48 @@ <h2> Activity</h2>
</div>
</div>
<div class="section">
<h2>Middle School Programs</h2>
<div class="details-container">
<div class="details-item">
<img class="boximg" src="imgs/ffgroup.png">
<h3 class="noslashes">
<a href="{{ 'formfunction.html' | relative_url| remove: '.html' }}">
Form and Function
</a>
</h3>
<p>Form and Function gives middle schoolers the power to crack the “code” of web development! Our free
weekly
after-school program helps you transform the web into a canvas for your ideas. Interactive projects,
demos,
and individual help will teach you how to use HTML, CSS, and JavaScript to create your own unique
website.
</p>
<a href="{{ 'formfunction.html' | relative_url| remove: '.html' }}"> Click here to learn more and sign
up!</a>
</div>
<div class="details-item">
<img class="boximg" src="imgs/Trio.jpg">
<h3 class="noslashes">
<a href="{{ 'helloworld.html' | relative_url | remove: '.html' }}">
Hello World
</a>
</h3>
<p>Hello World is a summer camp for motivated girls to learn to build their own websites, getting
down-and-dirty
with real code. Every camper will learn the principles of front-end web development and the
heart of
CSS,
HTML, and JavaScript. Moreover, she’ll get the techniques, resources, and passion to continue
tinkering
with
code for the rest of her life!
</p>
<a href="{{ 'helloworld.html' | relative_url | remove: '.html' }}"> Click here to learn more!</a>
</div>
</div>
</div>

<div class="section no-margin">
<div class="details-item">
<h2>High School Programs</h3>
<h3 class="noslashes">
Expand Down Expand Up @@ -62,177 +104,3 @@ <h3 class="noslashes">
</a>
</div>
</div>

<div class="section">
<div class="details-item">
<h2 class="nomargin-below">Middle School Programs</h2>
<div class="details-container">
<div class="details-item" id="righttext">
<h3 class="noslashes">
<a href="{{ 'formfunction.html' | relative_url| remove: '.html' }}">
Form and Function
</a>
</h3>
<p>Form and Function gives middle schoolers the power to crack the “code” of web development! Our free
weekly
after-school program helps you transform the web into a canvas for your ideas. Interactive projects,
demos,
and individual help will teach you how to use HTML, CSS, and JavaScript to create your own unique
website.
</p>
<a href="{{ 'formfunction.html' | relative_url| remove: '.html' }}"> Click here to learn more and sign
up!</a>

</div>

<div class="details-item computerbot">
<img class="bot" src="imgs/FFbot.png">
</div>

<div class="details-container">

<div class="details-item">
<img class="bot" src="imgs/thinkingbot.png">
</div>
<div class="details-item" id="righttext">
<h3 class="noslashes">
<a href="{{ 'helloworld.html' | relative_url | remove: '.html' }}">
Hello World
</a>
</h3>
<p>Hello World is a summer camp for motivated girls to learn to build their own websites, getting
down-and-dirty
with real code. Every camper will learn the principles of front-end web development and the
heart of
CSS,
HTML, and JavaScript. Moreover, she’ll get the techniques, resources, and passion to continue
tinkering
with
code for the rest of her life!
</p>
<a href="{{ 'helloworld.html' | relative_url | remove: '.html' }}"> Click here to learn more!</a>

</div>
</div>
</div>
</div>
</div>


<!--Photos
<div class="section">
<div class="home-photos">
<img src="imgs/Row.jpg">
<img src="imgs/BunnyEars.jpg">
</div>
</div>-->

<!-- <div class="section">
<h2> After-School Programs</h2>
<div class="details-container">

<div class="details-item">
<img src="imgs/FFbot.png">
</div>
<div class="details-item">
<h3>
<a href="{{ 'formfunction.html' | relative_url| remove: '.html' }}">
Form and Function
</a>
</h3>
<p>Form and Function gives middle schoolers the power crack the “code” of web development! Our free
weekly
after-school program helps you transform the web into a canvas for your ideas. Interactive projects,
demos,
and individual help will teach you how to use HTML, CSS, and JavaScript to create your own unique
website.
</p>
<a href="{{ 'formfunction.html' | relative_url| remove: '.html' }}"> Click here to learn more and sign
up!</a>
</div>

<div class="details-container">
<div class="details-item">
<h3>
<a href="{{ 'uncommonsense.html' | relative_url | remove: '.html' }}">
Uncommon Sense
</a>
</h3>
<p>Uncommon Sense is a free weekly program launched in partnership with <a
href="https://web.stanford.edu/group/ea/">Stanford Effective Altruism</a> for curious
highschoolers interested in learning ways to
form hypotheses about the world and make decisions that effectively accomplish their goals.
Students will match wits with AIs, instructors, and each other as they explore topics like cognitive
psychology,
game theory, prediction markets, and so much more!
</p>
<a href="{{ 'uncommonsense.html' | relative_url | remove: '.html' }}"> Click here to learn more and sign
up!</a>
</div>
<div class="details-item">
<img id="Bot" src="imgs/thinkingbot.png">
</div>
</div>
</div>-->

<!--Details-
<div class="section">
<h2>Details</h2>
<div>
<div id="warning"><strong>Registration is OPEN. The program has been moved online for health reasons. It is now free and any payments accepted are currently being refunded.</strong></div>
<div class="details-container">
<div class="details-item">
<div>
<p><strong>Who: </strong>Girls in grades 5-8 (rising 6-9). Coding experience not
necessary,
but always welcome. It is strongly recommended that younger girls, those who may
want to
take things more slowly, and those who are completely unfamiliar with technology
sign up
for the first session. Those who are older, crave a challenge, and are more
comfortable
with technology (though they may not necessarily have programming experience) are
encouraged to sign up for the second session.
</p>
</div>
<div>
<p><strong>Times: </strong><br>
Session 1 (HTML/CSS): August 3rd-7th, 2:00-4:00 pm PST<br>
Session 2 (JavaScript): August 10th-14th, 2:00-4:00 pm PST</p>
</div>
<div>
<p><strong>Cost: </strong><br>
Online: FREE (suggested donation: $30)</p>
</div>
<div>
<a href="{{ 'programs.html' | relative_url | remove: '.html' }}"><button class="action-button largebutton">Sign Up</button></a>
</div>
</div>-->


<!-- <div class="details-item">
<p><strong>Location: </strong> 4560 SW 110th Ave, Beaverton, OR, 97005</p>
<iframe id="map"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2797.143362310373!2d-122.79196428489877!3d45.48705773993969!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54950c1c96a8cec1%3A0x909836a2d8afa1b!2s4560%20SW%20110th%20Ave%2C%20Beaverton%2C%20OR%2097005!5e0!3m2!1sen!2sus!4v1588189531601!5m2!1sen!2sus"
width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
tabindex="0"></iframe>
</div> -->

<!--Bios-->
<!--<div class="section">
<h2>//About the Instructors</h2>
<div>
<p><strong class="author">Sydney Von Arx</strong></p>
<p>I am Sydney Von Arx, and I love to code! I’m a computer science major at Stanford. I have experience
with eight programming languages. I have completed three computer science-related internships and
built several programs and apps. My real specialty, though, is web development. One of the few
things I love more than coding is teaching!</p>
</div>
<div>
<p><strong class="author">Selena Zhang</strong></p>
<p>I’m Selena Zhang, and coding is my passion! I plan to study computer science at MIT next year. I’ve
studied quantum computing and robotics under Professor Perkowski at PSU, but I got my start with web
development! I love teaching and learning from others, and I’ve devoted hundreds of hours to
teaching after-school programs throughout high school.</p>
</div>
</div>-->
53 changes: 33 additions & 20 deletions styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,10 @@
---
@import 'variables';

.bot {
margin-top: 20px;
}

.section img {
height: 200px;
padding-left: 75px;
}

#righttext {
flex-grow: 10;
height: 400px;
margin-left: 0;
}

.no-margin {
Expand All @@ -24,9 +17,24 @@
}
}

#pumpkin {
width: 225px;
height: auto;
.flexcontain {
display: flex;
}

.boximg {
object-fit: cover;
width: 100%;
margin: 0;
}

@media only screen and (max-width: 768px) {
.section img {
height: 200px;
}
#pumpkin {
width: 225px;
height: auto;
}
}

@media screen and (min-width: 992px) {
Expand All @@ -36,15 +44,20 @@
}

@media screen and (max-width: 767px) {
.computerbot {
display: none;
}
#pumpkin {
padding: 0;
}
.bot {
display: block;
margin: auto;
padding-left: 0 !important;
}
}

.bot {
margin-top: 20px;
}

#righttext {
flex-grow: 10;
}

#pumpkin {
width: 225px;
height: auto;
}