Skip to content

Commit

Permalink
BrickHack 8 Site - Initial Release (#1251)
Browse files Browse the repository at this point in the history 
* 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 <colbygallup@gmail.com>

* fixing aspect ratio code

Co-authored-by: Skye Gallup <colbygallup@gmail.com>

* 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. <cjb5326@rit.edu>

* fixing spelling error

* fixing faq padding

* hero content adjustments

* hero content addition

* centering hero on mobile

Co-authored-by: Skye Gallup <colbygallup@gmail.com>
Co-authored-by: Chris Baudouin, Jr. <cjb5326@rit.edu>
  • Loading branch information
@sjmiller7 @cbaudouinjr
3 people committed Jan 2, 2022
1 parent fbc172a commit e952adb
Show file tree
Hide file tree
Showing 19 changed files with 1,045 additions and 223 deletions.
Binary file removed assets/bh8/adobesvg.gif
View file
Binary file not shown.
Binary file removed assets/bh8/bh8_social_cards.png
View file
Binary file not shown.
5 changes: 5 additions & 0 deletions assets/bh8/contact-monitor.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed assets/bh8/hackerpowered.gif
View file
Binary file not shown.
50 changes: 50 additions & 0 deletions assets/bh8/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed assets/bh8/macmade-blkwtbrdrspin.gif
View file
Binary file not shown.
Binary file added assets/bh8/videos/AboutLoop.mp4
View file
Binary file not shown.
Binary file added assets/bh8/videos/FAQLoop.mp4
View file
Binary file not shown.
Binary file added assets/bh8/videos/LandingLoop.mp4
View file
Binary file not shown.
Binary file modified assets/social_cards.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
238 changes: 193 additions & 45 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:hello@brickhack.io">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:hello@brickhack.io">hello@brickhack.io</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="hacker@email.com">
<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:hello@brickhack.io">hello@brickhack.io</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:sponsorship@brickhack.io">sponsorship@brickhack.io</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:hello@brickhack.io">hello@brickhack.io</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.) -->
Expand Down
Loading

0 comments on commit e952adb

Please sign in to comment.