Add FAQ to bin page

This commit is contained in:
Max Wofford 2024-05-09 22:23:03 -04:00
parent 9c108e25e0
commit a888e51428
2 changed files with 52 additions and 0 deletions

View file

@ -88,6 +88,35 @@
</div>
</div>
</section>
<section class="section container">
<h1>Readme</h1>
<div class="faq-grid">
<div class="faq-item">
<h3>How many projects can I build?</h3>
<p>You can submit as many projects as you want! For second submissions, well ship the parts you dont have for example, your first project will get a pico included and subsequent projects wont ship with it.</p>
</div>
<div class="faq-item">
<h3>How much does it cost?</h3>
<p>100% free well also give a breadboard and the jumper wires you need to build your project too! The whole program is funded by <a href="https://hcb.hackclub.com/donations/start/the-bin">donations to a non-profit</a>.</p>
</div>
<div class="faq-item">
<h3>Who is eligible?</h3>
<p>You need to be a high schooler (or younger) in the United States. Submissions need to be in by June 1st to qualify.</p>
</div>
<div class="faq-item">
<h3>What do I need?</h3>
<p>Just a browser simulate & computer to upload your code to the pico well give you all the equipment you need for your circuit.</p>
</div>
<div class="faq-item">
<h3>I need help!</h3>
<p>Get it in the #electronics channel of the <a href="https://hackclub.com/slack">Hack&nbsp;Club&nbsp;Slack</a>.</p>
</div>
<div class="faq-item">
<h3>What designs are allowed?</h3>
<p>Check out the <a href="">list of eligible parts</a>! Each design can have up to 8 modules, and need at least 1 module.</p>
</div>
</div>
</section>
<footer>
<div class="footer-wrapper">
<div class="footer-information">

View file

@ -3,6 +3,10 @@
width: 100%;
box-sizing: border-box;
}
.container {
max-width: 52em;
margin: auto;
}
.landing-section {
height: 100vh;
@ -518,4 +522,23 @@
.project-idea-container h1 {
font-size: 40px;
margin-bottom: 10px;
}
.faq-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 2em;
margin-bottom: 2em;
}
.faq-item {
padding: 20px;
border: 1px solid rgba(255,255,255,0.4);
border-radius: 20px;
background-color: rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
}
.faq-item p {
margin-top: 1em;
}