Skip to content
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

BrickHack 8 Site - About Section #1254

Merged
merged 4 commits into from
Dec 20, 2021
Merged

BrickHack 8 Site - About Section #1254

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e337927
inital about section
sjmiller7 Dec 2, 2021
dd60d16
card width
sjmiller7 Dec 6, 2021
107a407
fixes
sjmiller7 Dec 10, 2021
4d735db
Merge branch 'bh-1246' into bh-1248
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/AboutLoop.mp4
View file
Open in desktop
Binary file not shown.
54 changes: 37 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,25 +64,45 @@
</section>

<!-- About -->
<section id="about" class="section-pad-top">

<div id="about-content" class="section-pad">
<div id="about-text">
<h2>What is a Hackathon?</h2>
<p>A Hackathon is an invention marathon. Any student can attend! Really, any student... and it's completely free.</p>
<p>Students work in teams and mentors are present to offer help. Sponsors attend to help, recruit, and promote their products. Teams compete in different categories and prizes are awarded, but everyone learns and everyone wins!</p>
<p>Come spend 24 hours with us at BrickHack and dedicate time to learn, collaborate, build, and innovate.</p>
<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 18+ years old.</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="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 id="about-buttons">
<a href="https://mlh.io/" target="_blank" rel="noopener noreferrer">
<i class="fas fa-arrow-right"></i>
Visit Major League Hacking
</a>
<a href="./gallery.html" rel="noopener noreferrer">
<i class="fas fa-images"></i>
BrickHack Gallery
</a>
<div class="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">
<p>Last year's BrickHack 7 in numbers:</p>
<div id="stats">
<div>
<h3>600</h3>
<p>Participants</p>
</div>
<div>
<h3>18</h3>
<p>Schools represented</p>
</div>
<div>
<h3>20</h3>
<p>Locations</p>
</div>
</div>
</div>
<video width="500" autoplay muted loop>
<source src="./assets/bh8/videos/AboutLoop.mp4" type="video/mp4">
</video>
</div>
</section>

Expand Down
138 changes: 56 additions & 82 deletions sass/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ h2 {
h3 {
font-size: 1.75rem;
font-weight: 600;
padding-bottom: 1rem;
padding-bottom: 2rem;
color: $darker-blue;
}

Expand Down Expand Up @@ -234,34 +234,40 @@ section {

// About
#about {
#about-content {
#about-cards {
display: flex;
justify-content: space-between;
align-items: center;
margin: 3rem 0rem;

#about-text {
width: 60%;
.card {
background-color: white;
border: 1px solid $light-blue;
border-radius: 6px;
padding: 20px;
width: 45%;
}
}

#about-buttons {
#about-stats {
display: flex;
flex-direction: column;
margin: 0px auto;
align-items: flex-start;
justify-content: space-between;

a {
@include button-primary;
display: flex;
align-items: center;
margin: 20px 0px;
width: 100%;
#stats-content {
width: 50%;

#stats {
display: flex;
justify-content: space-between;
flex-wrap: wrap;

div {
padding: 20px;
}
}
}

i.fa-arrow-right, i.fa-images {
font-size: 1.6em;
color: $orange;
padding-right: 10px;
video {
max-width: 50%;
}
}
}
Expand Down Expand Up @@ -401,27 +407,6 @@ footer {
}

@media screen and (max-width: 1500px) {
// About
#about {
#about-content {
flex-direction: column;

#about-text {
width: 100%;
}
}

#about-buttons {
flex-direction: row;
justify-content: center;
width: 70%;

a {
margin: 10px;
}
}
}

// FAQ
#faq #faq-cards {
flex-direction: column;
Expand All @@ -433,13 +418,6 @@ footer {
}
}

@media screen and (max-width: 1220px) {
// About
#about #about-content #about-buttons {
width: 100%;
}
}

@media screen and (max-width: 955px) {
// Nav
nav {
Expand Down Expand Up @@ -512,6 +490,34 @@ footer {
section {
padding: 100px 3.5rem 0px; // Set up to avoid nav overlap when linked
}

// About
#about {
#about-cards {
flex-direction: column;

.card {
width: 100%;

&:not(.card:last-of-type) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this needed anymore?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing it makes the two cards press up against each other with no space between them.

margin-bottom: 2rem;
}
}
}

#about-stats {
flex-direction: column;

#stats-content {
width: 100%;
}

video {
max-width: 100%;
padding-top: 2rem;
}
}
}
}

@media screen and (max-width: 900px) {
Expand All @@ -533,22 +539,6 @@ footer {
font-size: 1.35rem;
}

// About
#about #about-content {
p {
font-size: 1em;
}

#about-buttons {
flex-direction: column;
width: 60%;

a {
margin-left: 0;
}
}
}

#faq #faq-cards {
margin-top: 20px;
flex-direction: column;
Expand Down Expand Up @@ -579,25 +569,9 @@ footer {
}

@media screen and (max-width: 650px) {

#about {

#hackathon-content {
margin: 0;
padding: 20px;

i {
font-size: 1.5em;
}

p {
font-size: 1em;
}

#hackathon-buttons {
width: 100%;
}
}
// About
#about #stats-content #stats {
flex-direction: column;
}

#faq #faq-wrapper {
Expand Down