Skip to content

BrickHack 8 Site - FAQ Section #1252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 20, 2021
Merged

BrickHack 8 Site - FAQ Section #1252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
024e41a
faq styling + ricky
sjmiller7 Nov 28, 2021
8ef9e16
fixing mobile
sjmiller7 Nov 28, 2021
621d99b
removing old padding class
sjmiller7 Nov 28, 2021
c5ce63f
fixes
sjmiller7 Dec 10, 2021
72e3dc2
Merge branch 'bh-1246' into bh-1250
sjmiller7 Dec 20, 2021
c1b653c
fixing broken cards
sjmiller7 Dec 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/bh8/videos/FAQLoop.mp4
View file
Open in desktop
Binary file not shown.
87 changes: 19 additions & 68 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,13 +86,13 @@ <h2>What is a Hackathon?</h2>
<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="card">
<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="card">
<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>
Expand Down Expand Up @@ -122,69 +122,31 @@ <h3>Last year's BrickHack 7 in numbers:</h3>
</section>

<!-- FAQ -->
<section id="faq" class="section-pad">
<h2>Frequently Asked Questions</h2>
<p>Don't see your question here? <a href="mailto:[email protected]">Contact Us</a></p>
<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="150" height="200" autoplay muted loop>
<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" aria-hidden="true"></i>
Is this event digital or in-person?
</button>
<div class="panel">
<p>BrickHack 8 will be run entirely digitally, via Discord and Zoom.</p>
<p>More details will be sent out as the event draws closer, including the server link.</p>
<p>For now, make sure to <a id="register" href="https://apply.brickhack.io/users/sign_up">register</a> for updates!
</div>
</div>
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus" aria-hidden="true"></i>
Who can participate in BrickHack?
</button>
<div class="panel">
<p>Anyone currently enrolled as a student can attend!</p>
<p>If you don't fit that description, you're
absolutely welcome to attend as a mentor or volunteer. All attendees must be 18 years or older.</p>
</div>
</div>
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus" aria-hidden="true"></i>
Do I need a team to join?
</button>
<div class="panel">
<p>Nope! If you have an existing team, that's great &mdash; otherwise, we'll provide time to form new teams with other hackers at the start of the event.</p>
<p>Please note that you can have up to a total of 4 members in a team.</p>
</div>
</div>
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus" aria-hidden="true"></i>
Do RIT students need to apply?
</button>
<div class="panel">
<p>Yes. All students, RIT or not, need to apply to the event.</p>
<p>Our main limitation is space. Even though we're a digital event, we need to provide judging, chat moderation, interpreting services, and more. All of these require staff, and we only have so many resources to run the event.</p>
<p>Maybe next year we'll have AI run the event...</p>
</div>
</div>
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus" aria-hidden="true"></i>
<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>
<div id="faq-cards-right">
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus" aria-hidden="true"></i>
<i class="fa fa-plus fa-plus-orange" aria-hidden="true"></i>
How accessible is the digital event?
</button>
<div class="panel">
Expand All @@ -195,17 +157,19 @@ <h2>Frequently Asked Questions</h2>
</div>
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus" aria-hidden="true"></i>
<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 id="faq-cards-right">
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus" aria-hidden="true"></i>
<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">
Expand All @@ -215,20 +179,7 @@ <h2>Frequently Asked Questions</h2>
</div>
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus" aria-hidden="true"></i>
Will there be swag or prizes shipped out?
</button>
<div class="panel">
<p>Everyone is eligible to receive digital swag and digital prizes.</p>
<p>If your shipping address is in the United States, we are shipping physical swag and prizes.</p>
<p>If your shipping address is in Canada, we are shipping physical prizes.</p>
<p>If your shipping address is outside of the United States and Canada, we are unable to ship physical swag and prizes.</p>
<p><em>We have a limited amount of swag, make sure that you check in and turn in a project to be eligible to receive swag.</em></p>
</div>
</div>
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus" aria-hidden="true"></i>
<i class="fa fa-plus fa-plus-orange" aria-hidden="true"></i>
Should I bring my own bricks?
</button>
<div class="panel">
Expand Down
2 changes: 2 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,10 @@ $(document).on('click', '.mobile-grayout', function() {

// FAQ Cards hide/show
let card = document.getElementsByClassName("card");
console.log(card);
for (let i = 0; i < card.length; i++) {
let accordion = card[i].getElementsByClassName("accordion-header")[0];
console.log(accordion);
// Click should only work on accordion-header of each card
accordion.addEventListener("click", function() {

Expand Down
129 changes: 73 additions & 56 deletions sass/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ section {
justify-content: space-between;
margin: 3rem 0rem;

.card {
.about-card {
background-color: white;
border: 1px solid $light-blue;
border-radius: 6px;
Expand Down Expand Up @@ -308,6 +308,16 @@ section {

// FAQ
#faq {
#faq-title {
display: flex;
flex-wrap: wrap;
align-items: center;

#faq-title-content {
margin-right: 3rem;
}
}

#faq-cards {
margin-top: 40px;
display: flex;
Expand All @@ -330,8 +340,9 @@ section {
.card {
width: 100%;
margin-bottom: $card-m;
border-radius: 7px;
background-color: $light-blue;
border-radius: 6px;
background-color: white;
border: 2px solid $blue;

&:active {
transform: none;
Expand All @@ -341,45 +352,52 @@ section {
background-color: transparent;
cursor: pointer;
outline: none;
color: $blue;
font-weight: bold;
text-align: left;
padding: 20px 30px;
border: none;
border-radius: 0px 0px 6px 6px; // making bottom corners round and top corners filled
width: 100%;
font-size: 1.25rem;
font-size: var(--body-font-size);

.fa-plus, .fa-minus {
.fa-plus {
margin-right: 10px;
color: $blue;

&-blue {
color: $blue;
}

&-light-blue {
color: $light-blue;
}

&-orange {
color: $orange;
}
}

.fa-minus {
margin-right: 10px;
color: white;
}
}

.panel {
display: none; // Toggled in JS
margin-top: -30px;
padding: 20px 30px;
font-size: 0.8em;
// Align w/ header text, not sure if this can be made cleaner.
margin-left: 35px;
padding: 20px 65px; // large side padding aligns with header text

p, em {
color: $dark-blue;
color: $blue;
line-height: 23px;
margin-bottom: 10px;
}
}
}

.active {
background-color: white;

// Need to explicitly set for some reason
.accordion-header, .panel {
color: $dark-blue;
}

&:hover {
background-color: white;
}
.active .accordion-header {
color: white;
background-color: $blue;
}
}
}
Expand Down Expand Up @@ -441,12 +459,19 @@ footer {

@media screen and (max-width: 1500px) {
// FAQ
#faq #faq-cards {
flex-direction: column;
#faq {
#faq-title {
flex-direction: column;
align-items: flex-start;
}

&-left, &-right {
margin: 0;
width: 100%;
#faq-cards {
flex-direction: column;

&-left, &-right {
margin: 0;
width: 100%;
}
}
}
}
Expand Down Expand Up @@ -566,10 +591,10 @@ footer {
#about-cards {
flex-direction: column;

.card {
.about-card {
width: 100%;

&:not(.card:last-of-type) {
&:not(.about-card:last-of-type) {
margin-bottom: 2rem;
}
}
Expand Down Expand Up @@ -609,30 +634,33 @@ footer {
font-size: 1.35rem;
}

#faq #faq-cards {
margin-top: 20px;
flex-direction: column;
// About
#about #about-content {
p {
font-size: 1em;
}

&-left, &-right {
margin: 0;
width: 100%;
#about-buttons {
flex-direction: column;
width: 60%;

a {
margin-left: 0;
}
}
}

// FAQ
#faq #faq-cards {
margin-top: 20px;

.card {
.accordion-header {
padding: 10px 20px;
font-size: 1em;
}

.panel {
padding: 20px;
margin-left: 30px;
padding-bottom: 10px; // TODO: Why does padding: 10px not look good?

p {
margin-bottom: 0;
font-size: 1em;
}
padding: 20px 50px 10px;
}
}
}
Expand All @@ -648,17 +676,6 @@ footer {
}
}

#faq #faq-wrapper {
// Only center the "contact" string in the FAQ
a {
white-space: nowrap;
}

.contact {
text-align: center;
}
}

footer {
height: 200px;
background-size: auto 200px;
Expand Down