Add simple schedule page

stogacs · Mar 11, 2024 · 92f3d59 · 92f3d59
1 parent 1187117
commit 92f3d59
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 1 deletion.
diff --git a/hackstoga/index.html b/hackstoga/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>hackStoga | Conestoga Computer Science Club</title>
-    <meta name="description" content="Join us for Conestoga High Schools' annual hackathon!" />
+    <meta name="description" content="Join us for Conestoga High School's annual hackathon!" />
     <meta name="theme-color" content="#eaaded" />
 
     <!--CSS re-used across stogacs.club -->

diff --git a/hackstoga/schedule/index.html b/hackstoga/schedule/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>hackStoga Schedule | Conestoga Computer Science Club</title>
+    <meta
+      name="description"
+      content="Computer Science is an incredibly broad field, and it is often tough for beginners who are interested in the subject to get their feet wet in the subject because of its complex nature, learning curve, and copious career sub-paths. This page seeks to provide beginners more accessible resources to get them interested, engaged, and off the ground with CS!"
+    />
+    <meta name="theme-color" content="#eaaded" />
+
+    <!--CSS re-used across stogacs.club -->
+    <link rel="stylesheet" href="/style/theme.css" />
+    <link rel="stylesheet" href="/style/navbar.css" />
+
+    <!-- Load in page specific CSS -->
+    <link rel="stylesheet" href="/style/hackstoga/info.css" />
+
+    <!-- Load in external CSS Libraries -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/pure-min.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/build/grids-responsive-min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
+  </head>
+  <body>
+    <header>
+      <p class="navbar-title">Conestoga Computer Science Club</p>
+      <input type="checkbox" id="navbar-click" />
+      <label for="navbar-click" class="navbar-toggle"><i class="fas fa-bars"></i></label>
+      <ul id="navbar-links">
+        <li><a href="../index.html">Back</a></li>
+      </ul>
+    </header>
+    <section
+      id="splash"
+      class="screen"
+      style="background-image: url('/media/banners/donut-boxes.JPG')"
+    >
+      <h1>Schedule</h1>
+    </section>
+
+    <div class="triangle-divider">
+      <svg
+        data-name="Layer 1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1200 120"
+        preserveAspectRatio="none"
+      >
+        <path d="M1200 0L0 0 598.97 114.72 1200 0z" class="shape-fill"></path>
+      </svg>
+    </div>
+
+    <section id="content" class="screen pure-g">
+      <div class="pure-u-1-12"><!-- formatting div PRE--></div>
+      <div class="pure-u-5-6 pure-g">
+        <iframe
+          src="../embed/schedule/index.html"
+          style="width: 100%; height: 750px; border: none; overflow: scroll"
+        ></iframe>
+        <p style="color: var(--garnet); font-size: 32px; text-align: center"
+          >Schedule is not currently final!</p
+        >
+      </div>
+      <div class="pure-u-1-12"><!-- formatting div POST--></div>
+    </section>
+  </body></html
+>
diff --git a/media/banners/donut-boxes.JPG b/media/banners/donut-boxes.JPG
diff --git a/style/hackstoga/info.css b/style/hackstoga/info.css
@@ -0,0 +1,40 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+
+/* screens */
+@media screen and (min-width: 800px) {
+  .formatting-separator {
+    height: 100px;
+  }
+}
+
+#splash {
+  /* this used to be the hackStoga banner but we have enough pictures of the event that we can use those */
+  background-image: url('/media/banners/resources.png');
+  font-family: 'Montserrat', sans-serif;
+}
+
+#content {
+  color: var(--light);
+  font-size: 120%;
+}
+
+/* divider */
+.triangle-divider {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  line-height: 0;
+  transform: rotate(180deg) translateY(148px);
+}
+
+.triangle-divider svg {
+  position: relative;
+  display: block;
+  width: calc(100% + 1.3px);
+  height: 150px;
+}
+
+.triangle-divider .shape-fill {
+  fill: var(--dark);
+}