Finishing touches on programs & contact

RenegadeGirls · Nov 7, 2023 · e52c9dc · e52c9dc
1 parent 7c0ce82
commit e52c9dc
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 7 deletions.
diff --git a/contact/index.html b/contact/index.html
@@ -39,7 +39,11 @@
 <body>
     <div data-href="../global/tiles/navigation.html"></div>
     <div id="content">
-
+        <p id="email">Have any questions? Feel free to <a target="_blank" href="mailto:[email protected]?subject=Question about Renegade Girls">email us!</a></p>
+        <h2 id="employment">Employment</h2>
+        <p id="about">
+            The Renegade Girls Tinkering Club offers fun and community for children to explore the world of tinkering and making. Children get hands-on with their peers to see how things work. Tinkering, a process involving hands-on discovery, and trial and error toward a goal, helps girls develop grit and gives a solid foundation for STEM skills. Founded by mothers in STEM careers working to change the vast gender imbalance in their fields, the Renegade Girls Tinkering Club inspires girls to keep their love of scientific exploration.
+        </p>
     </div>
     <div data-href="../global/tiles/footer.html"></div>
 </body>

diff --git a/contact/style.css b/contact/style.css
@@ -0,0 +1,21 @@
+#content {
+    margin: 4rem 5rem 4rem 5rem;
+}
+
+#email {
+    font-family: "Comme";
+    font-size: 1.2em;
+}
+
+#employment {
+    font-family: "Poppins";
+    font-size: 2em;
+    font-weight: 500;
+    margin-top: 5rem;
+}
+
+#about {
+    font-family: "Nunito";
+    font-size: 1.2em;
+    max-width: 900px;
+}
diff --git a/programs/script.js b/programs/script.js
@@ -2,8 +2,8 @@ fetch(`${ location.origin }/api/programs/`)
     .then(data => data.json())
     .then(json => generatePrograms(json))
 
-const displayMonths = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
-const displayDays = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ];
+const displayMonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const displayDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
 const dateSettings = {
     timeZone: "America/Los_Angeles",
@@ -51,10 +51,10 @@ function generatePrograms(json) {
         programs.innerHTML += `<li class="program">
             <div class="timeholder">
                 <p class="timeframe">
-                    ${ displayMonths[ startTime.getMonth() ] } ${ startTime.getDate() }–${ endTime.getDate() }
+                    ${ displayMonths[startTime.getMonth()] } ${ startTime.getDate() }–${ endTime.getDate() }
                 </p>
                 <p class="days">
-                    ${ displayDays[ startTime.getDay() ] }–${ displayDays[ endTime.getDay() ] }, ${ time(startTime) }–${ time(endTime) }
+                    ${ displayDays[startTime.getDay()] }–${ displayDays[endTime.getDay()] }, ${ time(startTime) }–${ time(endTime) }
                 </p>
                 <p class="age-range">
                     ${ ageMin } to ${ ageMax } years olds

diff --git a/programs/style.css b/programs/style.css
@@ -4,13 +4,17 @@
 }
 
 #programs {
-    margin: 4rem 10rem 2rem 10rem;
-    padding: 3rem 0px 0px 0px;
+    margin: 4rem 10rem 5rem 10rem;
+    padding: 1rem 0px 0px 0px;
     border-radius: 7px;
     filter: drop-shadow(0px 3px 3px #00000037);
     background-color: var(--l);
 }
 
+.program:not(:last-child) {
+    border-bottom: 1px solid var(--i);
+}
+
 .program {
     list-style-type: none;
     display: flex;
@@ -97,6 +101,7 @@
 
 #schedule {
     margin-top: 3rem;
+    margin-bottom: 4rem;
     border-spacing: 0px;
     border-radius: 10px;
 }