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

use clicky boxes on homepage #161

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

use clicky boxes on homepage #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7e5feaf
reorganize middle school programs into 2 boxes
sophiaswang Nov 4, 2020
fa08f43
little sizing changes
sophiaswang Nov 4, 2020
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
96 changes: 33 additions & 63 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,76 +48,46 @@ <h3 class="noslashes">
sign
up!</a>
</div>
<div class="details-item">
<h2>Middle School Programs</h2>
<div class="details-container nomargin">
<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="section no-margin">
<h2>Middle School Programs</h2>
<div class="resources-container">
<a class="nounderline" href="{{ 'formfunction.html' | relative_url | remove: '.html' }}">
<div class="resources-column">
<div class="details-container">
<div class="details-item">
<h3 class="noslashes heading-link">Form and Function</h3>
<p>Form and Function is a free weekly after-school program that gives middle schoolers the power
to crack the “code” of web development!
</p>
</div>
<div class="details-item">
<img class="bot" src="imgs/FFbot.png">
</div>
</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>
</a>
<a class="nounderline" href="{{ 'helloworld.html' | relative_url | remove: '.html' }}">
<div class="resources-column">
<div class="details-container">
<div class="details-item">
<h3 class="noslashes heading-link">Hello World</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.</p>
</div>
<div class="details-item">
<img class="bot" src="imgs/thinkingbot.png">
</div>
</div>
</div>
</a>
</div>

</div>
<div class="section">

</div>
</div>

<!-- <div class= "details-item">
<img src="imgs/SelenaSquare.jpg">
</div> -->

<!--- <div class="details.item">
<img id="IMG" src="imgs/trio.jpg">
</div>
<div class="details.item">
<img id="IMG" src="imgs/trio.jpg">
</div>
<div class="details.item" id="IMG">
<img id="IMG" src="imgs/trio.jpg">
</div> -->


</div>

Expand Down
84 changes: 69 additions & 15 deletions styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
---
---
@import 'variables';

.bot {
margin-top: 20px;
}
---

.section img {
height: 200px;
padding-left: 75px;
}
@import 'variables';

#righttext {
flex-grow: 10;
Expand All @@ -24,27 +16,89 @@
}
}

.bot {
height: 170px;
}

#pumpkin {
width: 200px;
height: auto;
margin-top: 20px;
}

@media screen and (min-width: 992px) {
#pumpkin {
width: 150px;
padding-left: 75px;
}
}

@media screen and (max-width: 767px) {
.computerbot {
display: none;
}
#pumpkin {
padding: 0;
padding: 0;
}

.bot {
display: block;
margin: auto;
padding-left: 0 !important;
padding-left: 0;
}
}

.resources-container .details-container {
align-items: center;
}

.resources-container .details-item {
flex-basis: 100px;
}

/* Details*/
.resources-container {
display: flex;
flex-direction: column; //mobile-first layout
padding: 0 -5px;
align-content: stretch;
align-items: stretch;
justify-content: space-evenly;

}

.resources-column {
min-width: 200px;
height: 100%;
margin: 5px 0px;
padding-left: 20px;
transition: 0.2s;

&:hover {
box-shadow: 2px 2px 5px $dark;
border-radius: 10px;
}

p {
color: $dark;
}
}

@media (min-width: 768px) {
.resources-container {
flex-direction: row;
}

.resources-column {
width: 40vw;
}
}

.resources-container .bot {
padding-left: 15px;
}

.nounderline {
text-decoration: none;
}

.heading-link {
text-decoration: underline;
}