From 7e5feaf833bdc826a7eb671757beab78028529fe Mon Sep 17 00:00:00 2001 From: Sophia Date: Tue, 3 Nov 2020 18:13:37 -0800 Subject: [PATCH 1/2] reorganize middle school programs into 2 boxes like resource page --- index.html | 96 +++++++++++++++++++----------------------------------- 1 file changed, 33 insertions(+), 63 deletions(-) diff --git a/index.html b/index.html index 551998fd..a20eb365 100644 --- a/index.html +++ b/index.html @@ -48,76 +48,46 @@

sign up! -
-

Middle School Programs

-
-
-

- - Form and Function - -

-

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. -

- Click here to learn more and sign - up! - -
- -
- -
- -
- -
- +
+
+

Middle School Programs

+
+ +
+
+
+

Form and Function

+

Form and Function is a free weekly after-school program that gives middle schoolers the power + to crack the “code” of web development! +

+
+
+ +
-
-

- - Hello World - -

-

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! -

- Click here to learn more! - +
+ + +
+
+
+

Hello World

+

Hello World is a summer camp for motivated girls to learn to build their own websites, getting + down-and-dirty + with real code.

+
+
+ +
+ +
-
-
-
-
- - +
From fa08f4300085c246ee6c4e001fb6f60ab7839ea3 Mon Sep 17 00:00:00 2001 From: Sophia Date: Tue, 3 Nov 2020 18:13:51 -0800 Subject: [PATCH 2/2] little sizing changes --- styles/index.scss | 84 ++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 69 insertions(+), 15 deletions(-) diff --git a/styles/index.scss b/styles/index.scss index 8c43a1b3..e5e2b81b 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -1,15 +1,7 @@ --- ---- -@import 'variables'; - -.bot { - margin-top: 20px; -} +--- -.section img { - height: 200px; - padding-left: 75px; -} +@import 'variables'; #righttext { flex-grow: 10; @@ -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; } \ No newline at end of file