BrickHack 8 Site - Initial Release (#1251)

* swapping files and start gutting bh7 copy

* more gutting of css

* style refactor

* logo update

* design fixes

* mobile navbar

* design fixes

* social cards being funky

* editing social card resolution

* adjusting social card

* favicon swap

* nav underline

* outline color fix

* remove login

* fixes

* comment fixes

* contact first attempt

* changing social links

* Revert "comment fixes"

This reverts commit 75f57c6.

* Revert "Revert "comment fixes""

This reverts commit 6c75a58.

* Revert "changing social links"

This reverts commit fef9a7b.

* Revert "contact first attempt"

This reverts commit d980e9a.

* BrickHack 8 Site - Hero Section (#1253)

* starting hero

* hero section

* swapping out loop file

* fixes

* design fixes

* spacing fix

* BrickHack 8 Site - About Section (#1254)

* inital about section

* card width

* fixes

* BrickHack 8 Site - FAQ Section (#1252)

* faq styling + ricky

* fixing mobile

* removing old padding class

* fixes

* fixing broken cards

* BrickHack 8 Site - Contact & Footer (#1256)

* contact section

* fixes

* newline eof

Co-authored-by: Skye Gallup <[email protected]>

* fixing aspect ratio code

Co-authored-by: Skye Gallup <[email protected]>

* design + js fixes

* design fixes

* trying to hide play button

* trying to hide play button 2

* trying to hide play button 3

* fixing faq ricky

* fixing mobile grayout opacity

* hiding mlh banner

* copyright date

* updating stats

* prepping for open applications

* content fixes for chris

* spelling error

Co-authored-by: Chris Baudouin, Jr. <[email protected]>

* fixing spelling error

* fixing faq padding

* hero content adjustments

* hero content addition

* centering hero on mobile

Co-authored-by: Skye Gallup <[email protected]>
Co-authored-by: Chris Baudouin, Jr. <[email protected]>

Author: 3 people

assets/bh8/adobesvg.gif

@@ -4,82 +4,230 @@
     <!-- 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.">
+    <meta name="description" content="RIT's premier collegiate hackathon devoted to bringing designers, developers, and all sorts of makers together for 24 hours to create something from nothing.">
 
     <!-- Twitter Cards -->
     <meta property="twitter:card" content="summary"/>
     <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 property="twitter:description" content="RIT's premier 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/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:description" content="RIT's premier 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/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">
+            <a class="link" href="https://apply.brickhack.io/users/sign_up">Register</a>
+            <a id="login" href="https://apply.brickhack.io/">LOGIN</a>
+        </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>
+            <p>RIT'S PREMIER HACKATHON</p>
+            <h3>March 5-6, 2022</h3>
+            <h3>Virtual Event</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.</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><a href="https://apply.brickhack.io/users/sign_up">Register</a> an account via our application system to apply to BrickHack today! 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>449</b></p>
+                        <p>Participants</p>
+                    </div>
+                    <div>
+                        <p><b>137</b></p>
+                        <p>Schools represented</p>
+                    </div>
+                    <div>
+                        <p><b>38</b></p>
+                        <p>Countries</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; 2022 BrickHack Club</p>
+        </div>
     </footer>
 
     <!-- This is where Parcel imports are located! (SASS, etc.) -->