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>

44
main.scss
View File

@@ -4,27 +4,38 @@ $lightBg: white;
$darkFont: black; $darkFont: black;
$lightFont: white; $lightFont: white;
%dark {
%dark {
background-color: $darkBg; background-color: $darkBg;
color: $lightFont 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;
}
} }
@@ -41,11 +52,11 @@ body {
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-repeat: no-repeat;
background-size: cover; background-size: cover;
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
background-image: url('/img/callout.jpg'); background-image: url("/img/callout.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: auto; background-size: auto;
background-position-x: 22%; background-position-x: 22%;
@@ -63,7 +74,6 @@ header {
font-weight: normal; font-weight: normal;
margin: 0rem; margin: 0rem;
@include textShadow(); @include textShadow();
} }
p { p {
@@ -77,6 +87,9 @@ header {
color: $lightFont; color: $lightFont;
@include textShadow(); @include textShadow();
cursor: pointer; cursor: pointer;
&:hover {
color: $darkFont;
}
} }
} }
@@ -98,15 +111,15 @@ header {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
p { p {
padding-left: .8rem; padding-left: 0.8rem;
padding-right: .8rem; padding-right: 0.8rem;
} }
} }
} }
.intro { .intro {
h2 { h2 {
margin-top: .5rem; margin-top: 0.5rem;
margin-bottom: 0; margin-bottom: 0;
} }
} }
@@ -121,7 +134,7 @@ header {
padding: 0; padding: 0;
li { li {
margin-bottom: .4rem; margin-bottom: 0.4rem;
a { a {
text-decoration: underline; text-decoration: underline;
@@ -136,4 +149,3 @@ header {
border-radius: 50%; border-radius: 50%;
} }
} }