Skip to content

Commit 9ca2f56

Browse files
sjmiller7sjmiller7
authored
BrickHack 8 Site - FAQ Section (#1252)
* faq styling + ricky * fixing mobile * removing old padding class * fixes * fixing broken cards
1 parent de567c3 commit 9ca2f56

File tree

4 files changed

+94
-124
lines changed

4 files changed

+94
-124
lines changed

‎assets/bh8/videos/FAQLoop.mp4

239 KB
Binary file not shown.

‎index.html

Lines changed: 19 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,13 @@ <h2>What is a Hackathon?</h2>
8686
<p>Apply to come spend March 5th and 6th, 2022 with us to learn, collaborate, build, and innovate!</p>
8787
</div>
8888
<div id="about-cards">
89-
<div class="card">
89+
<div class="about-card">
9090
<h3>Applying</h3>
9191
<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>
9292
<p>If your application is accepted, you will receive an email from our team with more information.</p>
9393
<p>You must be 18+ and a current university student to apply. Applications and event attendance are completely free.</p>
9494
</div>
95-
<div class="card">
95+
<div class="about-card">
9696
<h3>Participating</h3>
9797
<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>
9898
</div>
@@ -122,69 +122,31 @@ <h3>Last year's BrickHack 7 in numbers:</h3>
122122
</section>
123123

124124
<!-- FAQ -->
125-
<section id="faq" class="section-pad">
126-
<h2>Frequently Asked Questions</h2>
127-
<p>Don't see your question here? <a href="mailto:[email protected]">Contact Us</a></p>
125+
<section id="faq">
126+
<div id="faq-title">
127+
<div id="faq-title-content">
128+
<h2>Frequently Asked Questions</h2>
129+
<p>Don't see your question here? Feel free to <a href="mailto:[email protected]">contact us</a></p>
130+
</div>
131+
<video width="150" height="200" autoplay muted loop>
132+
<source src="./assets/bh8/videos/FAQLoop.mp4" type="video/mp4">
133+
</video>
134+
</div>
128135
<div id="faq-cards">
129136
<div id="faq-cards-left">
130137
<div class="card">
131138
<button class="accordion-header">
132-
<i class="fa fa-plus" aria-hidden="true"></i>
133-
Is this event digital or in-person?
134-
</button>
135-
<div class="panel">
136-
<p>BrickHack 8 will be run entirely digitally, via Discord and Zoom.</p>
137-
<p>More details will be sent out as the event draws closer, including the server link.</p>
138-
<p>For now, make sure to <a id="register" href="https://apply.brickhack.io/users/sign_up">register</a> for updates!
139-
</div>
140-
</div>
141-
<div class="card">
142-
<button class="accordion-header">
143-
<i class="fa fa-plus" aria-hidden="true"></i>
144-
Who can participate in BrickHack?
145-
</button>
146-
<div class="panel">
147-
<p>Anyone currently enrolled as a student can attend!</p>
148-
<p>If you don't fit that description, you're
149-
absolutely welcome to attend as a mentor or volunteer. All attendees must be 18 years or older.</p>
150-
</div>
151-
</div>
152-
<div class="card">
153-
<button class="accordion-header">
154-
<i class="fa fa-plus" aria-hidden="true"></i>
155-
Do I need a team to join?
156-
</button>
157-
<div class="panel">
158-
<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>
159-
<p>Please note that you can have up to a total of 4 members in a team.</p>
160-
</div>
161-
</div>
162-
<div class="card">
163-
<button class="accordion-header">
164-
<i class="fa fa-plus" aria-hidden="true"></i>
165-
Do RIT students need to apply?
166-
</button>
167-
<div class="panel">
168-
<p>Yes. All students, RIT or not, need to apply to the event.</p>
169-
<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>
170-
<p>Maybe next year we'll have AI run the event...</p>
171-
</div>
172-
</div>
173-
<div class="card">
174-
<button class="accordion-header">
175-
<i class="fa fa-plus" aria-hidden="true"></i>
139+
<i class="fa fa-plus fa-plus-light-blue" aria-hidden="true"></i>
176140
Can I re-use an old project?
177141
</button>
178142
<div class="panel">
179143
<p>No. You can start thinking of ideas beforehand, but no work can be done!</p>
180144
<p>(No designs, no UML diagrams, no code, etc.)</p>
181145
</div>
182146
</div>
183-
</div>
184-
<div id="faq-cards-right">
185147
<div class="card">
186148
<button class="accordion-header">
187-
<i class="fa fa-plus" aria-hidden="true"></i>
149+
<i class="fa fa-plus fa-plus-orange" aria-hidden="true"></i>
188150
How accessible is the digital event?
189151
</button>
190152
<div class="panel">
@@ -195,17 +157,19 @@ <h2>Frequently Asked Questions</h2>
195157
</div>
196158
<div class="card">
197159
<button class="accordion-header">
198-
<i class="fa fa-plus" aria-hidden="true"></i>
160+
<i class="fa fa-plus fa-plus-blue" aria-hidden="true"></i>
199161
When will I know if I got in?
200162
</button>
201163
<div class="panel">
202164
<p>Soon!</p>
203165
<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>
204166
</div>
205167
</div>
168+
</div>
169+
<div id="faq-cards-right">
206170
<div class="card">
207171
<button class="accordion-header">
208-
<i class="fa fa-plus" aria-hidden="true"></i>
172+
<i class="fa fa-plus fa-plus-light-blue" aria-hidden="true"></i>
209173
I'm new to coding. What if I have questions while I hack?
210174
</button>
211175
<div class="panel">
@@ -215,20 +179,7 @@ <h2>Frequently Asked Questions</h2>
215179
</div>
216180
<div class="card">
217181
<button class="accordion-header">
218-
<i class="fa fa-plus" aria-hidden="true"></i>
219-
Will there be swag or prizes shipped out?
220-
</button>
221-
<div class="panel">
222-
<p>Everyone is eligible to receive digital swag and digital prizes.</p>
223-
<p>If your shipping address is in the United States, we are shipping physical swag and prizes.</p>
224-
<p>If your shipping address is in Canada, we are shipping physical prizes.</p>
225-
<p>If your shipping address is outside of the United States and Canada, we are unable to ship physical swag and prizes.</p>
226-
<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>
227-
</div>
228-
</div>
229-
<div class="card">
230-
<button class="accordion-header">
231-
<i class="fa fa-plus" aria-hidden="true"></i>
182+
<i class="fa fa-plus fa-plus-orange" aria-hidden="true"></i>
232183
Should I bring my own bricks?
233184
</button>
234185
<div class="panel">

‎index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,10 @@ $(document).on('click', '.mobile-grayout', function() {
6262

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

‎sass/index.scss

Lines changed: 73 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ section {
271271
justify-content: space-between;
272272
margin: 3rem 0rem;
273273

274-
.card {
274+
.about-card {
275275
background-color: white;
276276
border: 1px solid $light-blue;
277277
border-radius: 6px;
@@ -308,6 +308,16 @@ section {
308308

309309
// FAQ
310310
#faq {
311+
#faq-title {
312+
display: flex;
313+
flex-wrap: wrap;
314+
align-items: center;
315+
316+
#faq-title-content {
317+
margin-right: 3rem;
318+
}
319+
}
320+
311321
#faq-cards {
312322
margin-top: 40px;
313323
display: flex;
@@ -330,8 +340,9 @@ section {
330340
.card {
331341
width: 100%;
332342
margin-bottom: $card-m;
333-
border-radius: 7px;
334-
background-color: $light-blue;
343+
border-radius: 6px;
344+
background-color: white;
345+
border: 2px solid $blue;
335346

336347
&:active {
337348
transform: none;
@@ -341,45 +352,52 @@ section {
341352
background-color: transparent;
342353
cursor: pointer;
343354
outline: none;
355+
color: $blue;
356+
font-weight: bold;
344357
text-align: left;
345358
padding: 20px 30px;
346359
border: none;
360+
border-radius: 0px 0px 6px 6px; // making bottom corners round and top corners filled
347361
width: 100%;
348-
font-size: 1.25rem;
362+
font-size: var(--body-font-size);
349363

350-
.fa-plus, .fa-minus {
364+
.fa-plus {
351365
margin-right: 10px;
352-
color: $blue;
366+
367+
&-blue {
368+
color: $blue;
369+
}
370+
371+
&-light-blue {
372+
color: $light-blue;
373+
}
374+
375+
&-orange {
376+
color: $orange;
377+
}
378+
}
379+
380+
.fa-minus {
381+
margin-right: 10px;
382+
color: white;
353383
}
354384
}
355385

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

364390
p, em {
365-
color: $dark-blue;
391+
color: $blue;
366392
line-height: 23px;
367393
margin-bottom: 10px;
368394
}
369395
}
370396
}
371397

372-
.active {
373-
background-color: white;
374-
375-
// Need to explicitly set for some reason
376-
.accordion-header, .panel {
377-
color: $dark-blue;
378-
}
379-
380-
&:hover {
381-
background-color: white;
382-
}
398+
.active .accordion-header {
399+
color: white;
400+
background-color: $blue;
383401
}
384402
}
385403
}
@@ -441,12 +459,19 @@ footer {
441459

442460
@media screen and (max-width: 1500px) {
443461
// FAQ
444-
#faq #faq-cards {
445-
flex-direction: column;
462+
#faq {
463+
#faq-title {
464+
flex-direction: column;
465+
align-items: flex-start;
466+
}
446467

447-
&-left, &-right {
448-
margin: 0;
449-
width: 100%;
468+
#faq-cards {
469+
flex-direction: column;
470+
471+
&-left, &-right {
472+
margin: 0;
473+
width: 100%;
474+
}
450475
}
451476
}
452477
}
@@ -566,10 +591,10 @@ footer {
566591
#about-cards {
567592
flex-direction: column;
568593

569-
.card {
594+
.about-card {
570595
width: 100%;
571596

572-
&:not(.card:last-of-type) {
597+
&:not(.about-card:last-of-type) {
573598
margin-bottom: 2rem;
574599
}
575600
}
@@ -609,30 +634,33 @@ footer {
609634
font-size: 1.35rem;
610635
}
611636

612-
#faq #faq-cards {
613-
margin-top: 20px;
614-
flex-direction: column;
637+
// About
638+
#about #about-content {
639+
p {
640+
font-size: 1em;
641+
}
615642

616-
&-left, &-right {
617-
margin: 0;
618-
width: 100%;
643+
#about-buttons {
644+
flex-direction: column;
645+
width: 60%;
646+
647+
a {
648+
margin-left: 0;
649+
}
619650
}
651+
}
652+
653+
// FAQ
654+
#faq #faq-cards {
655+
margin-top: 20px;
620656

621657
.card {
622658
.accordion-header {
623659
padding: 10px 20px;
624-
font-size: 1em;
625660
}
626661

627662
.panel {
628-
padding: 20px;
629-
margin-left: 30px;
630-
padding-bottom: 10px; // TODO: Why does padding: 10px not look good?
631-
632-
p {
633-
margin-bottom: 0;
634-
font-size: 1em;
635-
}
663+
padding: 20px 50px 10px;
636664
}
637665
}
638666
}
@@ -648,17 +676,6 @@ footer {
648676
}
649677
}
650678

651-
#faq #faq-wrapper {
652-
// Only center the "contact" string in the FAQ
653-
a {
654-
white-space: nowrap;
655-
}
656-
657-
.contact {
658-
text-align: center;
659-
}
660-
}
661-
662679
footer {
663680
height: 200px;
664681
background-size: auto 200px;

0 commit comments

Comments
 (0)