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 - Hero Section #1253

Merged
merged 6 commits into from
Dec 20, 2021
Merged

BrickHack 8 Site - Hero Section #1253

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b7c764b
starting hero
sjmiller7 Nov 28, 2021
2292e7e
hero section
sjmiller7 Nov 28, 2021
8a580cf
swapping out loop file
sjmiller7 Dec 6, 2021
79cea16
fixes
sjmiller7 Dec 10, 2021
fd3b65b
design fixes
sjmiller7 Dec 19, 2021
eacc94c
spacing fix
sjmiller7 Dec 19, 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/LandingLoop.mp4
View file
Open in desktop
Binary file not shown.
33 changes: 31 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,37 @@
</a>

<!-- Hero -->
<section id="hero" class="section-pad-left">

<section id="hero">
<div id="hero-content">
<h1>BrickHack 8</h1>
<h3>March 5 - 6, 2022 | RIT Online Hackathon</h3>
<p>Sign up to be notified when applications open: </p>
<!-- MailChimp email form, copied from bh8 preregister -->
<div class="field-row-stacked">
<div id="mc_embed_signup">
<form action="https://coderit.us11.list-manage.com/subscribe/post?u=122b09a8cef4c1f3888af8e40&amp;id=4c1af7f783" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<div class="field-row">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="[email protected]">
<button type="submit">SUBMIT</button>
</div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_122b09a8cef4c1f3888af8e40_4c1af7f783" tabindex="-1" value=""></div>
</div>
</form>
</div>
</div>
</div>
<div id="hero-video">
<video width="750" autoplay muted loop>
<source src="./assets/bh8/videos/LandingLoop.mp4" type="video/mp4">
</video>
</div>
</section>

<!-- About -->
Expand Down
61 changes: 60 additions & 1 deletion sass/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ body {
h1 {
font-size: 4rem;
font-weight: 600;
padding-bottom: 2rem;
padding-bottom: 1rem;
font-family: 'Sora', sans-serif;
margin-left: -5px;
color: $darker-blue;
Expand Down Expand Up @@ -229,7 +229,60 @@ section {

// Hero
#hero {
display: flex;
flex-direction: column;

#hero-video{
width: 100%;
display: flex;
justify-content: flex-end;
z-index: -1;
margin-top: -200px;

video {
max-width: 100%;
}
}

#hero-content {

p {
margin-top: 2rem;
}

.field-row-stacked {
border: 2px solid $blue;
border-radius: 5px;
font-size: var(--body-font-size);
display: inline-block;
background-color: white;

input {
border: none;
outline: none;
background-color: transparent;
font-size: var(--body-font-size);
padding: 1rem 1.5rem;
}

button {
outline: none;
border: none;
border-left: 2px solid $blue;
background-color: $blue;
color: $off-white;
border-radius: 5px 0px 0px 5px;
font-size: var(--body-font-size);
padding: 1rem 1.5rem;
font-weight: 600;
transition: all 0.25s;

&:hover {
background-color: $dark-blue;
}
}
}
}
}

// About
Expand Down Expand Up @@ -434,6 +487,12 @@ footer {
}

@media screen and (max-width: 1220px) {
// Hero
#hero #hero-video{
margin-top: 0px;
justify-content: center;
}

// About
#about #about-content #about-buttons {
width: 100%;
Expand Down