TerribleDev/nashua.codes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add button to sign up for events

Browse Source
This commit is contained in:
Tommy Parnell
2018-12-01 18:34:56 -05:00
parent 282b71799b
commit 852b573977
2 changed files with 108 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -16,6 +16,7 @@
<header class="header"> <header class="header">
<h1>Nashua Codes</h1> <h1>Nashua Codes</h1>
<p>Free Programming Classes</p> <p>Free Programming Classes</p>
<a class="sub" href="http://eepurl.com/dPFsY1">Subscribe to Events!</a>
<a class="arrowDown" onclick="scrollDown();"><i class="fas fa-chevron-circle-down fa-2x"></i></a> <a class="arrowDown" onclick="scrollDown();"><i class="fas fa-chevron-circle-down fa-2x"></i></a>
</header> </header>
@@ -57,7 +58,7 @@
</p> </p>
</section> </section>
</main> </main>
<script src="main.js" type="text/javascript" /> <script src="main.js" type="text/javascript" ></script>
</body> </body>
</html> </html>

200
main.scss
View File

@@ -4,136 +4,148 @@ $lightBg: white;
$darkFont: black; $darkFont: black;
$lightFont: white; $lightFont: white;
%dark {
background-color: $darkBg;
%dark { color: $lightFont;
background-color: $darkBg;
color: $lightFont
} }
%light { %light {
background-color: $lightBg; background-color: $lightBg;
$color: $darkFont $color: $darkFont;
} }
@mixin textShadow(){ @mixin textShadow() {
text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
border: 10px; border: 10px;
} }
body { body {
margin: 0%; margin: 0%;
font-family: 'Helvetica'; font-family: "Helvetica";
}
.sub {
appearance: button;
margin-bottom: 0.4em;
padding: 0.35em;
background-color: $lightBg;
color: $darkFont;
text-decoration: none;
border-radius: 0.2em;
&:hover {
background-color: $darkBg;
color: $lightBg;
}
} }
.bgimg { .bgimg {
position: relative; position: relative;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
z-index: -1; z-index: -1;
} }
.headerCard { .headerCard {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-image: url('/img/callout.jpg'); background-image: url("/img/callout.jpg");
background-repeat: no-repeat;
background-size: cover;
@media only screen and (max-width: 768px) {
background-image: url("/img/callout.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: auto;
@media only screen and (max-width: 768px) { background-position-x: 22%;
background-image: url('/img/callout.jpg'); background-position-y: bottom;
background-repeat: no-repeat; }
background-size: auto;
background-position-x: 22%;
background-position-y: bottom;
}
} }
header { header {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
h1 { h1 {
font-size: 3rem; font-size: 3rem;
color: $lightFont; color: $lightFont;
font-weight: normal; font-weight: normal;
margin: 0rem; margin: 0rem;
@include textShadow(); @include textShadow();
}
}
p { p {
font-size: 1rem; font-size: 1rem;
color: $lightFont; color: $lightFont;
margin-bottom: 1rem; margin-bottom: 1rem;
@include textShadow(); @include textShadow();
} }
.arrowDown { .arrowDown {
color: $lightFont; color: $lightFont;
@include textShadow(); @include textShadow();
cursor: pointer; cursor: pointer;
} &:hover {
color: $darkFont;
}
}
} }
.main { .main {
min-height: 100vh; min-height: 100vh;
min-width: 100vw; min-width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
& > section:nth-child(odd) {
@extend %dark;
}
& > section {
min-height: 33vh; // atleast as tall as 33% of the view port
width: 100%; // 100% of the parent which is full width of viewport
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; justify-content: center;
& > section:nth-child(odd) { p {
@extend %dark; padding-left: 0.8rem;
} padding-right: 0.8rem;
& > section {
min-height: 33vh; // atleast as tall as 33% of the view port
width: 100%; // 100% of the parent which is full width of viewport
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
p {
padding-left: .8rem;
padding-right: .8rem;
}
} }
}
} }
.intro { .intro {
h2 { h2 {
margin-top: .5rem; margin-top: 0.5rem;
margin-bottom: 0; margin-bottom: 0;
} }
} }
.eventCard { .eventCard {
h2 { h2 {
margin: 0; margin: 0;
} }
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
li { li {
margin-bottom: .4rem; margin-bottom: 0.4rem;
a { a {
text-decoration: underline; text-decoration: underline;
color: $darkFont; color: $darkFont;
} }
}
} }
}
} }
.teamCard { .teamCard {
.tommyAvatar { .tommyAvatar {
border-radius: 50%; border-radius: 50%;
} }
} }