about page

Author: lzhou0714

_layouts/default.html

@@ -18,6 +18,40 @@
       logTopSecretMessage("Don't worry, our site isn't collecting any data about you, or anything, really. Pinky promise.");
       logTopSecretMessage("You look like somebody who likes web programming and hacking. Why not join our dev team? Check out https://teachla.uclaacm.com/dev");
     </script>
+    <div>
+      <!-- check if content is from home page -->
+      {% if page.url == "/" %}
+      <!-- fix this later! -->
+        <div class = "landing-top">
+          <!-- <img class = "img-responsive img-push-down img-curved img-push-up" src="{{site.baseurl}}/img/landing-illustration.svg" alt="illustration" /> -->
+          <div class="container container-fill {% if layout.fw or page.fw %}{% else %}container-restricted{% endif %}">
+          
+          <div class="row-desktop row-desktop-ratio-1-1">
+              <div class="col-padded v-center-children">
+                  <h1 class="title page-title">ACM <span class="text-teachla">Teach LA</span></h1>
+                  <h2 class="title tla-descrip">making coding
+                      <span class="vertical-slide">
+                          <span>accessible.</span>
+                          <span>fun.</span>
+                          <span>empowering.</span>
+                          <span>approachable.</span>
+                          <span>easy.</span>
+                      </span>
+                  </h2>
+                  <p>
+                      ACM Teach LA pairs UCLA students with schools in Los Angeles to provide free computer science classes. Our goal is to empower all students with the ability to code, and use it to make a difference.
+                  </p>
+                  <div class="button-container">
+                      <a class="button" href="{{site.baseurl}}/join"><span class="fa fa-fw fa-school"></span> Let's Work Together!</a>
+                      <a class="button button-dark" href="{{site.baseurl}}/about"><span class="fa fa-book"></span> Learn More</a>
+                  </div>
+              </div>
+          </div>
+        </div>
+        
+        </div>
+      {% endif %}
+    </div>
     <div class="container container-fill {% if layout.fw or page.fw %}{% else %}container-restricted{% endif %}">
       {{ content }}
     </div>

_sass/_basic.scss

@@ -58,7 +58,8 @@ ul > li {
 
 .container-restricted {
     margin: auto;
-    width: 1213px;
+    // width: 80vw;
+    width: 1400px;
     // enforces a not-too-wide text viewport
     max-width: 100vw;
     @media (min-width: $desktop-width) {
@@ -367,3 +368,14 @@ ul > li {
     border: 2px solid #5eda12;
     border-radius: 10px;
 }
+
+.landing-top{
+    
+    background-image: url("../img/landing-illustration.svg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    height: 100vh; /* Adjust this value based on the aspect ratio of the background image */
+    margin: 0;
+    padding: 20vh 0;
+    // background-size: 100vw 100%;
+}

_sass/_navbar.scss

@@ -13,7 +13,7 @@
 	#navbar-inner {
 		width: 100%;
 		margin: auto;
-		max-width: 1000px;
+		max-width: 1400px;
 	}
 
 	.nav-section.left {

about.html

@@ -4,8 +4,33 @@
 permalink: "/about"
 ---
 
-<h1 class="title page-title">About Us</h1>
-<img class="img-responsive" src="{{site.baseurl}}/img/day-of-code-wall-cropped.jpg" alt="Students after a successful Day of Code event!" />
+
+<!-- <img class="img-responsive" src="{{site.baseurl}}/img/day-of-code-wall-cropped.jpg" alt="Students after a successful Day of Code event!" /> -->
+<div class="row-desktop row-desktop-ratio-1-1">
+    <div class="col-padded v-center-children">
+        <h1 class="title page-title">About Us</h1>
+        <p>
+            Here is a comprehensive list of all of the classes that ACM Teach LA provides! You can find more information about what the class is about, its learning goals, and its curiculm. Part of our mission is making you education truly accessible, and that involves open-sourcing as much information as possible: everything out instructors have, you’ll find here.
+        </p>
+        <div class="button-container">
+
+            <a class="icon" href="https://www.facebook.com/acmteachla" target="_blank" rel="noopener noreferrer">
+                <span class="fab fa-facebook" aria-label="Facebook Logo & Link"></span>
+            </a>
+            <a class="icon" href="https://github.com/uclaacm/teach-la-website" target="_blank" rel="noopener noreferrer">
+                <span class="fab fa-github" aria-label="GitHub Logo & Repository"></span>
+            </a>
+            <a class="icon" href="https://www.linkedin.com/company/acm-teach-la-acm-ucla" target="_blank" rel="noopener noreferrer">
+                <span class="fab fa-linkedin" aria-label="LinkedIn Logo & Link"></span>
+            </a>
+
+        </div>
+    </div>
+    <div class="col-padded v-center-children">
+        <img class = 'img-responsive' src = "{{site.baseurl}}/img/about_graphic.png" alt = "about us"/>
+    </div>
+</div>
+
 
 <h2 class="title">Our Mission</h2>
 <p>