codeRIT · sjmiller7 · Jan 2, 2022 · Oct 29, 2021 · Oct 30, 2021 · Nov 6, 2021
diff --git a/assets/bh8/adobesvg.gif b/assets/bh8/adobesvg.gif
diff --git a/assets/bh8/bh8_social_cards.png b/assets/bh8/bh8_social_cards.png
diff --git a/assets/bh8/contact-monitor.svg b/assets/bh8/contact-monitor.svg
diff --git a/assets/bh8/hackerpowered.gif b/assets/bh8/hackerpowered.gif
diff --git a/assets/bh8/logo.svg b/assets/bh8/logo.svg
diff --git a/assets/bh8/macmade-blkwtbrdrspin.gif b/assets/bh8/macmade-blkwtbrdrspin.gif
diff --git a/assets/bh8/videos/AboutLoop.mp4 b/assets/bh8/videos/AboutLoop.mp4
diff --git a/assets/bh8/videos/FAQLoop.mp4 b/assets/bh8/videos/FAQLoop.mp4
diff --git a/assets/bh8/videos/LandingLoop.mp4 b/assets/bh8/videos/LandingLoop.mp4
diff --git a/assets/social_cards.png b/assets/social_cards.png
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <!-- Standard Meta Tags-->
     <title>BrickHack 8</title>
     <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1 minimum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="keywords" content="hackathons, hackathon, hack-a-thon, programming, hardware, development, design, rit"/>
     <meta name="description" content="RIT's premiere collegiate hackathon devoted to bringing designers, developers, and all sorts of makers together for 24 hours to create something from nothing.">
 
@@ -13,73 +13,219 @@
     <meta property="twitter:title" content="BrickHack 8">
     <meta property="twitter:url" content="https://brickhack.io" >
     <meta property="twitter:description" content="RIT's premiere collegiate hackathon devoted to bringing designers, developers, and all sorts of makers together for 24 hours to create something from nothing.">
-    <meta name="twitter:image" content="./assets/bh8/bh8_social_cards.png">
+    <meta name="twitter:image" content="./assets/social_cards.png">
 
     <!-- Open Graph Cards -->
     <meta property="og:type" content="website" />
     <meta property="og:title" content="Brickhack 8" />
     <meta property="og:site_name" content="BrickHack 8" />
     <meta property="og:url" content="https://brickhack.io" />
     <meta property="og:description" content="RIT's premiere collegiate hackathon devoted to bringing designers, developers, and all sorts of makers together for 24 hours to create something from nothing."/>
-    <meta property="og:image" content="./assets/bh8/bh8_social_cards.png" />
+    <meta property="og:image" content="./assets/social_cards.png" />
 
     <!-- Favicons -->
     <link rel="apple-touch-icon" sizes="180x180" href="resources/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="resources/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="resources/favicon/favicon-16x16.png">
 
-    <!-- Custom Win98 stylesheet -->
-    <link rel="stylesheet" href="https://unpkg.com/98.css" />
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Sora&display=swap" rel="stylesheet">
 </head>
 <body>
-    <section id="main">
+    <!-- Nav -->
+    <nav>
+        <div class="top">
+            <i id="toggle" class="fa fa-bars" aria-hidden="true" id="toggle"></i>
+            <a id="logo" href="https://brickhack.io">
+                <img src="assets/bh8/logo.svg" alt="BrickHack 8 Logo" />
+            </a>
+        </div>
+        <div class="left navbar-items">
+            <a class="link" href="#about">About</a>
+            <a class="link" href="#faq">FAQ</a>
+            <a class="link" href="#contact">Contact</a>
+        </div>
+        <div class="right">
+            <!-- Login and Signup links will go here -->
+        </div>
+    </nav>
+    <div class="mobile-grayout"></div>
+
+    <!-- MLH Banner -->
+    <a id="mlh-trust-badge" href="https://mlh.io/seasons/2022/events?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2022-season&utm_content=gray" target="_blank">
+        <img src="https://s3.amazonaws.com/logged-assets/trust-badge/2022/mlh-trust-badge-2022-gray.svg" alt="Major League Hacking 2022 Hackathon Season" style="width:100%">
+    </a>
+
+    <!-- Hero -->
+    <section id="hero">
+        <div id="hero-content">
+            <h1>BrickHack 8</h1>
+            <h3>March 5-6, 2022</h3>
+            <h3>RIT Online Hackathon</h3>
+            <p>Apply today: </p>
+            <!-- Login and Signup buttons -->
+            <div id="hero-buttons">
+                <a id="login" href="https://apply.brickhack.io/">LOGIN</a>
+                <a id="register" href="https://apply.brickhack.io/users/sign_up">REGISTER</a>
+            </div>
+        </div>
+        <div id="hero-video">
+            <video width="750" autoplay muted loop playsinline>
+                <source src="./assets/bh8/videos/LandingLoop.mp4" type="video/mp4">
+            </video>
+        </div>
+    </section>
 
-        <img id="logo" src="./resources/pixel-logo-real.png" alt="BrickHack 8 logo. Two stripes, left orange and right blue, in a parallelogram with a white border.">
+    <!-- About -->
+    <section id="about">
+        <div id="about-text">
+            <h2>What is a Hackathon?</h2>
+            <p>A hackathon is an invention marathon. BrickHack is a 24-hour digital hackathon that is completely free and open to any university student 18+ years old.</p>
+            <p>Apply to come spend March 5th and 6th, 2022 with us to learn, collaborate, build, and innovate!</p>
+        </div>
+        <div id="about-cards">
+            <div class="about-card">
+                <h3>Applying</h3>
+                <p>When applications open, you will apply to BrickHack via the HackEngine system. Applications will be open until the event opens on March 5th.</p>
+                <p>If your application is accepted, you will receive an email from our team with more information.</p>
+                <p>You must be 18+ and a current university student to apply. Applications and event attendance are completely free.</p>
+            </div>
+            <div class="about-card">
+                <h3>Participating</h3>
+                <p>At BrickHack, students compete individually or in teams of 2-4 to build anything they want. You could make an app, a website, a game, a design, or any other form of interactive media. No experience is required; we provide mentors to help you along the way!</p>
+            </div>
+        </div>
+        <div id="about-stats">
+            <div id="stats-content">
+                <h3>Last year's BrickHack 7 in numbers:</h3>
+                <div id="stats">
+                    <div>
+                        <p><b>600</b></p>
+                        <p>Participants</p>
+                    </div>
+                    <div>
+                        <p><b>18</b></p>
+                        <p>Schools represented</p>
+                    </div>
+                    <div>
+                        <p><b>20</b></p>
+                        <p>Locations</p>
+                    </div>
+                </div>
+            </div>
+            <video width="500" autoplay muted loop playsinline>
+                <source src="./assets/bh8/videos/AboutLoop.mp4" type="video/mp4">
+            </video>
+        </div>
+    </section>
 
-        <p id="secret-message">Nothing to see here!</p>
-        <div class="window">
-            <div class="title-bar">
-                <div class="title-bar-text">BrickHack 8</div>
-                <div class="title-bar-controls">
-                    <button aria-label="Minimize" class="window-control"></button>
-                    <button aria-label="Maximize" class="window-control"></button>
-                    <button aria-label="Close" class="window-control"></button>
+    <!-- FAQ -->
+    <section id="faq">
+        <div id="faq-title">
+            <div id="faq-title-content">
+                <h2>Frequently Asked Questions</h2>
+                <p>Don't see your question here? Feel free to <a href="mailto:[email protected]">contact us</a></p>
+            </div>
+            <video width="110" height="200" autoplay muted loop playsinline>
+                <source src="./assets/bh8/videos/FAQLoop.mp4" type="video/mp4">
+            </video>
+        </div>
+        <div id="faq-cards">
+            <div id="faq-cards-left">
+                <div class="card">
+                    <button class="accordion-header">
+                        <i class="fa fa-plus fa-plus-light-blue" aria-hidden="true"></i>
+                        Can I re-use an old project?
+                    </button>
+                    <div class="panel">
+                        <p>No. You can start thinking of ideas beforehand, but no work can be done!</p>
+                        <p>(No designs, no UML diagrams, no code, etc.)</p>
+                    </div>
+                </div>
+                <div class="card">
+                    <button class="accordion-header">
+                        <i class="fa fa-plus fa-plus-orange" aria-hidden="true"></i>
+                        How accessible is the digital event?
+                    </button>
+                    <div class="panel">
+                        <p>We've put a lot of thought into making sure all of BrickHack can be enjoyed by everyone. We're planning to have interpreting services and audio captioning to boot, with more accommodations to come in the future.</p>
+                        <p>During registration, put any services that you require in the "special needs" field, and we'll do our best to meet them!</p>
+                        <p>For any outstanding questions, email <a href="mailto:[email protected]">[email protected]</a>.</p>
+                    </div>
+                </div>
+                <div class="card">
+                    <button class="accordion-header">
+                        <i class="fa fa-plus fa-plus-blue" aria-hidden="true"></i>
+                        When will I know if I got in?
+                    </button>
+                    <div class="panel">
+                        <p>Soon!</p>
+                        <p>Every application is considered on a first-come, first-serve basis. So register early! We'll send an email out if you're accepted.</p>
+                    </div>
                 </div>
             </div>
-            <div class="window-body">
-                <p>BrickHack 8 is returning virtually on March 5 & 6 2022!</p>
-                <div class="field-row-stacked">
-                    <div id="mc_embed_signup">
-                        <form action="https://coderit.us11.list-manage.com/subscribe/post?u=122b09a8cef4c1f3888af8e40&amp;id=4c1af7f783" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
-                            <div id="mc_embed_signup_scroll">
-                                <div class="mc-field-group">
-                                    <label for="mce-EMAIL">Enter your e-mail to stay updated.</label>
-                                    <div class="field-row">
-                                        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="[email protected]">
-                                        <button type="submit">Submit</button>
-                                    </div>
-                                </div>
-                                <div id="mce-responses" class="clear">
-                                    <div class="response" id="mce-error-response" style="display:none"></div>
-                                    <div class="response" id="mce-success-response" style="display:none"></div>
-                                </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
-                                <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_122b09a8cef4c1f3888af8e40_4c1af7f783" tabindex="-1" value=""></div>
-                            </div>
-                        </form>
+            <div id="faq-cards-right">
+                <div class="card">
+                    <button class="accordion-header">
+                        <i class="fa fa-plus fa-plus-light-blue" aria-hidden="true"></i>
+                        I'm new to coding. What if I have questions while I hack?
+                    </button>
+                    <div class="panel">
+                        <p>This year, we'll have mentors from various tech companies available to help, as well as other hackers who can volunteer their knowledge throughout the event.</p>
+                        <p>During the opening ceremony, we'll go over how to request help from a mentor!</p>
+                    </div>
+                </div>
+                <div class="card">
+                    <button class="accordion-header">
+                        <i class="fa fa-plus fa-plus-orange" aria-hidden="true"></i>
+                        Should I bring my own bricks?
+                    </button>
+                    <div class="panel">
+                        <p>We've got you covered.</p>
                     </div>
                 </div>
             </div>
         </div>
-        <div id="badges">
-            <img src="./assets/bh8/macmade-blkwtbrdrspin.gif" alt="Made with Macintosh badge">
-            <img src="./assets/bh8/adobesvg.gif" alt="This side is SVG powered badge">
-            <img src="./assets/bh8/hackerpowered.gif" alt="Hacker powered badge">
+    </section>
+
+    <!-- Contact -->
+    <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/brickhack/" target="_blank">
+                    <i class="fab fa-instagram"></i>
+                </a>
+                <a href="https://snapchat.com/add/brickhack" target="_blank">
+                    <i class="fab fa-snapchat"></i>
+                </a>
+            </div>
         </div>
     </section>
+
+    <!-- Footer -->
     <footer>
-        <p>Interested in sponsoring? <span class="text-break">E-mail <a href="mailto:[email protected]">[email protected]</a></span></p>
-        <p>Want to help organize? <span class="text-break"><a href="./club.html">Meet the team</a></span></p>
-        <p>View the <a href="./bh7.html">BrickHack 7 website</a></p>
+        <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>
 
     <!-- This is where Parcel imports are located! (SASS, etc.) -->