Skip to content

Commit f95f679

Browse files
sjmiller7sjmiller7
authored
Merge pull request #1214 from codeRIT/bh-1212
Contact Section - BrickHack Club Site
2 parents c0765ae + 162758f commit f95f679

File tree

3 files changed

+217
-33
lines changed

3 files changed

+217
-33
lines changed

‎bhclub.html‎

Lines changed: 49 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,21 @@
1616
<link rel="preconnect" href="https://fonts.googleapis.com">
1717
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1818
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">
19+
<link href="https://fonts.googleapis.com/css2?family=Sora&display=swap" rel="stylesheet">
1920
</head>
2021
<body>
2122
<nav>
2223
<div id="navbar-top">
2324
<i class="fa fa-bars" aria-hidden="true" id="toggle"></i>
24-
<a id="logo" href="#landing" class="nav-link"><img src="./assets/logo.svg"></a>
25+
<a id="logo" href="#landing" class="nav-link"><img src="./assets/logo.svg" alt="BrickHack logo"></a>
2526
</div>
26-
<div>
27-
<a class="btn-light" href="https://discord.gg/gNJXjvzkuB" target="_blank">JOIN</a>
27+
<div id="navbar-middle">
28+
<a href="#landing" class="nav-link">Join Us</a>
2829
<a href="#about" class="nav-link">About</a>
2930
<a href="#events" class="nav-link">Events</a>
3031
<a href="#teams" class="nav-link">Teams</a>
3132
<a href="#contact" class="nav-link">Contact</a>
3233
</div>
33-
<div>
34-
<a class="social-link" href="https://discord.gg/gNJXjvzkuB" target="_blank">Discord</a>
35-
<a class="social-link" href="#" target="_blank">GitHub</a>
36-
<a class="social-link" href="#" target="_blank">Twitter</a>
37-
<a class="social-link" href="#" target="_blank">Instagram</a>
38-
<a class="social-link" href="#" target="_blank">Facebook</a>
39-
</div>
4034
</nav>
4135
<main>
4236
<section id="landing">
@@ -52,7 +46,51 @@ <h1>Events</h1>
5246
<h1>Teams</h1>
5347
</section>
5448
<section id="contact">
55-
<h1>Contact</h1>
49+
<div>
50+
<h1>Contact</h1>
51+
<p>Have any questions? Feel free to reach out to us at <b>[email protected]</b></p>
52+
<a class="btn-light" href="mailto:[email protected]">EMAIL US</a>
53+
<p>You can also sign up to receive our BrickHack event newsletter here:</p>
54+
<!-- MailChimp email form, copied from bh8 preregister -->
55+
<div class="field-row-stacked">
56+
<div id="mc_embed_signup">
57+
<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>
58+
<div id="mc_embed_signup_scroll">
59+
<div class="mc-field-group">
60+
<div class="field-row">
61+
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="[email protected]">
62+
<button type="submit">SUBMIT</button>
63+
</div>
64+
</div>
65+
<div id="mce-responses" class="clear">
66+
<div class="response" id="mce-error-response" style="display:none"></div>
67+
<div class="response" id="mce-success-response" style="display:none"></div>
68+
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
69+
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_122b09a8cef4c1f3888af8e40_4c1af7f783" tabindex="-1" value=""></div>
70+
</div>
71+
</form>
72+
</div>
73+
</div>
74+
</div>
75+
<div>
76+
<div id="line"></div>
77+
<div id="footer">
78+
<a id="footer-logo" href="#landing"><img src="./assets/logo.svg" alt="BrickHack logo"></a>
79+
<div>
80+
<p>Rochester Institute of Technology</p>
81+
<p>1 Lomb Memorial Dr, Rochester, NY 14623</p>
82+
</div>
83+
<div id="socials">
84+
<span id="social-text">Connect with us!</span>
85+
<a class="social-link" href="https://discord.gg/gNJXjvzkuB" target="_blank" rel="noopener">Discord</a>
86+
<a class="social-link" href="#" target="_blank" rel="noopener">CampusGroups</a>
87+
<a class="social-link" href="#" target="_blank" rel="noopener">GitHub</a>
88+
<a class="social-link" href="#" target="_blank" rel="noopener">Twitter</a>
89+
<a class="social-link" href="#" target="_blank" rel="noopener">Instagram</a>
90+
<a class="social-link" href="#" target="_blank" rel="noopener">Facebook</a>
91+
</div>
92+
</div>
93+
</div>
5694
</section>
5795
</main>
5896
<!-- This is where Parcel imports are located! (SASS, etc.) -->

‎package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sass/bhclub.scss‎

Lines changed: 167 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
// Variables
2-
$off-white: #F3F4F5;
3-
$blue: #163FD4;
4-
$dark-blue: #081646;
2+
$off-white: #F6F8FA;
3+
$blue: #1447C8;
4+
$dark-blue: #1B336D;
5+
$off-black: #081646;
56

67
// CSS Resets
78
* {
89
padding: 0;
910
margin: 0;
1011
box-sizing: border-box;
1112
font-family: 'Work Sans', sans-serif;
12-
color: $dark-blue;
13+
color: $off-black;
1314
}
1415

1516
// Font
@@ -19,23 +20,36 @@ a {
1920

2021
&:hover {
2122
font-weight: bold;
23+
border-bottom: 4px solid $blue;
2224
}
2325
}
2426

2527
h1 {
2628
font-size: 4.5rem;
2729
font-weight: normal;
30+
padding-bottom: 50px;
31+
}
32+
33+
p {
34+
font-size: 1.25rem;
35+
padding-bottom: 15px;
36+
}
37+
38+
p:last-child {
39+
padding-bottom: 0;
2840
}
2941

3042
// Buttons
3143
a.btn-light {
3244
border: 2px solid $blue;
3345
border-radius: 5px;
34-
font-size: 1.5rem;
46+
font-size: 1.25rem;
3547
display: inline-block;
36-
padding: 5px 10px;
48+
padding: 1rem 1.125rem;
3749
font-weight: 600;
3850
transition: all 1s;
51+
margin-bottom: 1rem;
52+
background-color: white;
3953

4054
&:hover {
4155
color: $off-white;
@@ -48,15 +62,15 @@ a.btn-dark {
4862
color: $off-white;
4963
background-color: $blue;
5064
border-radius: 5px;
51-
font-size: 1.5rem;
65+
font-size: 1.25rem;
5266
display: inline-block;
5367
padding: 5px 10px;
5468
font-weight: 600;
5569
transition: all 1s;
5670

5771
&:hover {
5872
color: $blue;
59-
background-color: $off-white;
73+
background-color: white;
6074
}
6175
}
6276

@@ -94,35 +108,164 @@ nav {
94108
width: 75px;
95109
max-width: 100%;
96110
margin: 0px 0px 20px;
97-
}
98-
99-
a.btn-light {
100-
display: inline-block;
111+
border: none;
101112
}
102113

103114
.nav-link {
104-
font-size: 1.5rem;
105-
margin: 10px 0;
115+
font-size: 1.25rem;
116+
margin: 10px 0 14px;
117+
width: max-content;
118+
119+
&:hover {
120+
margin-bottom: 10px;
121+
}
106122
}
107123

108-
.social-link {
109-
font-size: 1.125rem;
110-
margin: 10px 0;
124+
#navbar-middle, #navbar-top {
125+
margin-bottom: auto;
111126
}
112127
}
113128

114129
// Main Content
115130
main {
116-
padding: 3.5rem;
131+
padding: 1.75rem 3.5rem;
117132
padding-left: calc(25% + 3.5rem); // pushes it outside of the nav while allowing for backgrounds to stretch underneath
118133
}
119134

120135
section {
121-
padding: 5rem 0;
136+
padding: 1.75rem 0;
137+
min-height: 100vh;
138+
display: flex;
139+
flex-flow: column nowrap;
140+
justify-content: center;
141+
}
142+
143+
// Contact Section / Footer
144+
#contact > div {
145+
margin-top: auto;
146+
}
147+
148+
.field-row-stacked {
149+
border: 2px solid $blue;
150+
border-radius: 5px;
151+
font-size: 1.5rem;
152+
display: inline-block;
153+
background-color: white;
154+
155+
input {
156+
border: none;
157+
outline: none;
158+
background-color: transparent;
159+
font-size: 1.25rem;
160+
padding: 1rem 1.125rem;
161+
}
162+
163+
button {
164+
outline: none;
165+
border: none;
166+
border-left: 2px solid $blue;
167+
background-color: transparent;
168+
color: $blue;
169+
border-radius: 5px 0px 0px 5px;
170+
font-size: 1.25rem;
171+
padding: 1rem 1.125rem;
172+
font-weight: 600;
173+
transition: all 1s;
174+
175+
&:hover {
176+
color: $off-white;
177+
background-color: $blue;
178+
}
179+
}
180+
}
181+
182+
#line {
183+
height: 1px;
184+
border-radius: 1px;
185+
width: 100%;
186+
background-color: black;
187+
opacity: 50%;
188+
margin: 3rem 0;
189+
}
190+
191+
#footer {
192+
display: flex;
193+
flex-flow: row nowrap;
194+
justify-content: space-around;
195+
align-items: flex-start;
196+
197+
div {
198+
padding-left: 2rem;
199+
}
200+
201+
#footer-logo img {
202+
width: 150px;
203+
}
204+
205+
#socials {
206+
display: flex;
207+
flex-flow: row wrap;
208+
width: 60%;
209+
210+
#social-text {
211+
font-weight: 600;
212+
font-size: 1.125rem;
213+
margin: 10px 1rem 14px 0px;
214+
}
215+
216+
.social-link {
217+
font-size: 1.125rem;
218+
margin: 10px 1rem 14px 0px;
219+
220+
&:hover {
221+
margin-bottom: 10px;
222+
}
223+
}
224+
}
225+
}
226+
227+
// Tablet Styling
228+
@media screen and (max-width: 1075px) {
229+
// Contact Section / Footer
230+
.field-row-stacked {
231+
232+
input {
233+
width: 100%;
234+
}
235+
236+
button {
237+
border: none;
238+
border-top: 2px solid $blue;
239+
border-radius: 5px 5px 0px 0px;
240+
width: 100%;
241+
}
242+
}
243+
244+
#line {
245+
margin-bottom: 1rem;
246+
}
247+
248+
#footer {
249+
flex-flow: column nowrap;
250+
251+
div {
252+
padding-left: 0rem;
253+
padding-top: 1rem;
254+
}
255+
256+
#footer-logo img {
257+
margin-top: 1rem;
258+
}
259+
260+
#socials {
261+
width: 100%;
262+
}
263+
}
122264
}
123265

124-
// Desktop Styling
125-
@media screen and (max-width: 750px) {
266+
// Mobile Styling
267+
@media screen and (max-width: 800px) {
268+
// Navigation
126269
nav {
127270
width: 100%;
128271
height: auto;
@@ -143,7 +286,8 @@ section {
143286
}
144287

145288
.show-nav {
146-
width: 75%;
289+
width: 50%;
290+
min-width: auto;
147291
height: 100%;
148292
position: fixed;
149293
background-color: $off-white;
@@ -160,6 +304,7 @@ section {
160304
}
161305
}
162306

307+
// Main content
163308
main {
164309
padding-left: 3.5rem;
165310
}

0 commit comments

Comments
 (0)