BrickHack 8 Site - Contact & Footer

index.html

@@ -205,34 +205,40 @@ <h2>Frequently Asked Questions</h2>
     </section>
 
     <!-- Contact -->
-    <footer>
-        <div id="footer-content">
-            <div>
-                <h2>contact us</h2>
-                <p><a href="mailto:[email protected]">[email protected]</a></p>
-            </div>
-            <div>
-                <a href="https://twitter.com/coderit" target="_blank">
+    <section id="contact">
+        <div id="contact-content">
+            <h2>Contact</h2>
+            <p>Feel free to let us know of any questions, comments, and/or concerns at <a href="mailto:[email protected]">[email protected]</a></p>
+            <p>Interested in joining our team? <a href="./club.html">Check out our club</a></p>
+        </div>
+        <div id="contact-socials">
+            <p>Connect with us:</p>
+            <div id="social-icons">
+                <a href="https://twitter.com/brickhackrit" target="_blank">
                     <i class="fab fa-twitter"></i>
                 </a>
                 <a href="https://www.facebook.com/brickhackrit" target="_blank">
                     <i class="fab fa-facebook"></i>
                 </a>
-                <a href="https://www.instagram.com/code.rit/" target="_blank">
+                <a href="https://www.instagram.com/brickhack/" target="_blank">
                     <i class="fab fa-instagram"></i>
                 </a>
-                <a href="https://github.com/codeRIT" target="_blank">
-                    <i class="fab fa-github"></i>
+                <a href="https://snapchat.com/add/brickhack" target="_blank">
+                    <i class="fab fa-snapchat"></i>
                 </a>
             </div>
-            <div>
-                <p>
-                    <a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf">code of conduct</a>
-                    |
-                    <a href="https://www.rit.edu/academicaffairs/policiesmanual/c070" target="_blank">privacy policy</a>
-                </p>
-                <p>copyright &#169; 2021 BrickHack Club</p>
-            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer>
+        <div id="footer-left">
+            <p><a href="mailto:[email protected]">[email protected]</a></p>
+        </div>
+        <div id="footer-right">
+            <p><a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf" target="_blank">MLH Code of Conduct</a></p>
+            <p><a href="https://www.rit.edu/academicaffairs/policiesmanual/c070" target="_blank">Privacy Policy</a></p>
+            <p>Copyright &copy; 2021 BrickHack Club</p>
         </div>
     </footer>
 

sass/index.scss

@@ -7,6 +7,8 @@ $light-blue: #44C6E6;
 $off-white: #F6F8FA;
 $darker-blue: #081646;
 $orange: #FF9C4A;
+$grey: #D0D9E2;
+
 // Typography
 :root {
     --body-font-size: 1.3rem;
@@ -347,59 +349,81 @@ section {
 
 
 // Contact
-footer {
-    width: 100%;
-    height: 300px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin-top: 20px;
-    background-image: url("../assets/footer/footer.svg");
-    background-repeat: repeat no-repeat;
-    background-position: bottom center;
-    background-size: auto 300px;
-    overflow-x: clip;
-
-    #footer-content {
+#contact {
+    padding-bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    min-height: auto;
+
+    #contact-content {
+        width: 50%;
+        padding-right: 20px;
+    }
+
+    #contact-socials {
+        align-self: flex-end;
+        background-image: url("../assets/bh8/contact-monitor.svg");
+        width: 430px;
+        max-width: 50%;
+        height: 330px;
+        margin-bottom: -2px; // Gets rid of gap between svg and footer
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        padding: 1rem 2.5rem 5rem;
         display: flex;
         flex-direction: column;
-        justify-content: space-around;
-        height: 235px;
-        margin: auto;
-        padding: 15px;
-        text-align: center;
+        justify-content: center;
+        align-items: center;
 
-        h2 {
-            margin-top: -5px;
-            margin-bottom: -5px;
-        }
+        #social-icons {
+            display: flex;
+            flex-wrap: wrap;
 
-        p {
-            font-size: 1em;
-        }
+            a {
+                margin: 1rem;
+
+                i {
+                    font-size: 3rem;
+                    color: $blue;
 
-        // FA brand icons
-        i {
-            font-size: 3em;
-            padding: 0px 5px;
-            color: $blue;
+                    &:hover {
+                        color: $dark-blue;
+                    }
+                }
+            }
         }
+    }
+}
 
-        a {
-            display: inline-block;
-            transition: 0.2s;
 
-            i {
-                transition: 0.2s;
-            }
+// Footer
+footer {
+    background-color: $grey;
+    padding: 2rem 5rem;
+    display: flex;
+    justify-content: space-between;
+
+    #footer-left {
+        padding-right: 1rem;
+    }
+
+    #footer-right {
+        display: flex;
+        justify-content: space-between;
 
-            &:hover i {
-                transform: translateY(-4px);
+        p {
+            padding-bottom: 0;
+
+            &:not(p:last-of-type) {
+                padding-right: 1rem;
             }
         }
     }
 }
 
+
 @media screen and (max-width: 1500px) {
     // About
     #about {
@@ -438,6 +462,16 @@ footer {
     #about #about-content #about-buttons {
         width: 100%;
     }
+
+    // Footer
+    footer #footer-right {
+        flex-direction: column;
+        text-align: right;
+
+        p:not(p:last-of-type) {
+            padding-right: 0;
+        }
+    }
 }
 
 @media screen and (max-width: 955px) {
@@ -576,6 +610,24 @@ footer {
             }
         }
     }
+
+    // Contact
+    #contact {
+        flex-direction: column;
+
+        #contact-content {
+            width: 100%;
+            padding-right: 0px;
+        }
+
+        #contact-socials {
+            margin: 2rem auto -2px;
+            max-width: 75%;
+            width: 75%;
+            height: calc((100vw - 7rem) * 0.56); // should be the same as 75% of the current width
+            // Essentially: (100vw - section padding to get 100% width) * 0.75 to get the 75% width * 0.75 for 75% of 75% width
+        }
+    }
 }
 
 @media screen and (max-width: 650px) {
@@ -611,24 +663,23 @@ footer {
         }
     }
 
-    footer {
-        height: 200px;
-        background-size: auto 200px;
-
-        #footer-content {
-            height: 157px;
-
-            h2 {
-                font-size: 1.2em;
-            }
+    // Contact
+    #contact #contact-socials {
+        max-width: 100%;
+        width: 100%;
+        justify-content: flex-start;
+        padding: 0;
+        margin: 2rem 0;
+        background-image: none;
+        height: auto;
+    }
 
-            p {
-                font-size: 0.8em;
-            }
+    // Footer
+    footer {
+        flex-direction: column;
 
-            i {
-                font-size: 2em;
-            }
+        #footer-right {
+            text-align: left;
         }
     }
-}
+}