restructured css to reflect figma further

This commit is contained in:
AW_Dev 2024-05-10 23:00:14 -07:00
parent 61c93264f2
commit f6c1294e66
2 changed files with 39 additions and 16 deletions

View file

@ -119,16 +119,19 @@
<h1 class="project-idea-title">
What are you waiting for?
</h1>
<button onclick="location.href='./selector/'" class="gambling-select bluebutton hoverable">
Parts list
</button>
<button class="gambling-select hoverable redbutton">
What can I make?
</button>
<button onclick="generateBuildLink(this)" class="gambling-build hoverable greenbutton disabled">
Open the editor
<img src="./icons/arrow_white.svg">
</button>
<div class="project-idea-buttons">
<button onclick="location.href='./selector/'" class="gambling-select bluebutton hoverable">
Parts list
</button>
<button class="gambling-select hoverable redbutton">
What can I make?
</button>
<span class="flex-lb"></span>
<button onclick="generateBuildLink(this)" class="gambling-build hoverable greenbutton disabled">
Open the editor
<img src="./icons/arrow_white.svg">
</button>
</div>
<!-- <div class="project-idea-images">
<img src="./parts/humidity.png">
<img src="./parts/humidity.png">
@ -155,34 +158,34 @@
<h1>Frequently Asked Questions</h1>
<div class="faq-grid">
<div class="faq-item">
<h3>How many projects can I build?</h3>
<h1>How many projects can I build?</h1>
<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>
<h1>How much does it cost?</h1>
<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>
<h1>Who is eligible?</h1>
<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>
<h1>What do I need?</h1>
<p>Just a browser simulator & 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>
<h1>I need help!</h1>
<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>
<h1>What designs are allowed?</h1>
<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>

View file

@ -324,6 +324,22 @@ button {
border-radius: 30px;
}
.project-idea-buttons {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
column-gap: 20px;
row-gap: 5px;
}
.gambling-build {
margin: auto !important;
}
.project-idea-buttons button {
margin: 0;
}
.project-idea-container {
margin: auto;
padding: 50px;
@ -471,6 +487,10 @@ button {
margin-top: 1em;
}
.faq-item h1 {
font-size: 1.5em;
}
.timeline-header {
font-size: 70px;
width: fit-content;