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

Merge pull request #2 from TerribleDev/yo

Browse Source 
Yo
This commit is contained in:
Tommy Parnell
2018-12-03 16:36:55 -05:00
committed by GitHub
parent 4373fe3621 acb6df830d
commit 1d930bd877
11 changed files with 169 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
Desktop/Projects/TPcode/.gitignore → .gitignore vendored
View File

1
CNAME Normal file
View File

@@ -0,0 +1 @@
www.nashua.codes

BIN
Desktop/Projects/TPcode/img/nashuaBG.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 176 KiB

BIN
Desktop/Projects/TPcode/img/tommyAvatar2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

140
Desktop/Projects/TPcode/main.scss
View File

@@ -1,140 +0,0 @@
$fontColor: (
primaryFont: white,
secondaryFont: black,
);
$backgroundColor: (
intro: white,
upComingEvent: white,
theTeam: white,
);
@function backgroundColor($color-name) {
@return map-get($backgroundColor , $color-name)
}
@function fontColor($color-name) {
@return map-get($fontColor, $color-name)
}
body, html {
height: 100%;
}
body {
margin: 0%;
font-family: 'Helvetica';
}
.bgimg {
position: relative;
height: 100vh;
width: 100vw;
z-index: -1;
}
.headerCard {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url('/img/nashuaBG.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
header {
display: flex;
align-items: center;
flex-direction: column;
h1 {
font-size: 3rem;
color: fontColor(primaryFont);
font-weight: normal;
margin: 0rem;
}
p {
font-size: 1rem;
color: fontColor(primaryFont);
margin-bottom: 1rem;
}
.arrowDown {
color: fontColor(primaryFont)
}
}
.main {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.intro {
flex-basis: 33%;
background-color: backgroundColor(intro);
h2 {
margin-top: .5rem;
margin-bottom: 0;
color: fontColor(secondaryFont);
align-self: center;
}
p {
margin-left: .8rem;
margin-right: .8rem;
align-self: center;
}
}
.eventCard {
flex-basis: 33%;
background-color: backgroundColor(upComingEvent);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
h2 {
margin: 0;
}
ul {
list-style: none;
padding: 0;
li {
margin-bottom: .4rem;
.eventLink {
text-decoration: none;
color: fontColor(secondaryFont);
}
}
}
}
.teamCard {
flex-basis: 33%;
background-color: backgroundColor(theTeam);
h2 {
margin: 0;
}
p {
margin-left: .8rem;
margin-right: .8rem;
}
.tommyAvatar {
border-radius: 50%;
}
}

BIN
img/callout.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 KiB

BIN
img/nashuaBG.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
img/tommyAvatar2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

34
Desktop/Projects/TPcode/index.html → index.html
View File

@@ -12,55 +12,57 @@
</head> </head>
<body> <body>
<!-- <img class="bgimg" src="/img/bgimg.jpeg" alt="computer on a white desk" /> -->
<div class="headerCard"> <div class="headerCard">
<header class="header"> <header class="header">
<h1>Nashua Codes</h1> <h1>Nashua Codes</h1>
<p>Free Programming Classes</p> <p>Free Programming Classes</p>
<span class="arrowDown"><i class="fas fa-chevron-circle-down fa-2x"></i></span> <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>
</header> </header>
</div> </div>
<main class="main"> <main class="main" id="mainLoc">
<section class="intro"> <section class="intro">
<h2> <h2>
Intro Intro
</h2> </h2>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis eros vel libero bibendum Nashua codes! is a group of talented engineers trying to improve the computer science education in
vulputate. Sed vel enim porttitor, mattis eros sit amet, tempor enim. Morbi in tincidunt neque. Southern New Hampshire, and Northern Mass. Our workshops are free to the public.
Maecenas vitae bibendum justo. Praesent pharetra mollis ante quis sodales. Nulla in vestibulum </p>
augue, at varius augue. Quisque finibus urna eu elit porta, ac rhoncus metus imperdiet. Donec
auctor ipsum nisi, eu pulvinar turpis egestas sit amet.
</p>
</section> </section>
<section class="eventCard"> <section class="eventCard">
<h2> <h2>
Upcoming Events Upcoming Events
</h2> </h2>
<ul> <span>Coming soon!</span>
<!-- <ul>
<li> <li>
<i class="far fa-calendar-alt"></i> <a class="eventLink" href="#"> Novmeber 1st- Intro to JS</a> <i class="far fa-calendar-alt"></i> <a class="eventLink" href="#"> Novmeber 1st- Intro to JS</a>
</li> </li>
<li> <li>
<i class="far fa-calendar-alt"></i> <a class="eventLink" href="#">November 21st- Intro to html</a> <i class="far fa-calendar-alt"></i> <a class="eventLink" href="#">November 21st- Intro to html</a>
</li> </li>
</ul> </ul> -->
</section> </section>
<section class="teamCard"> <section class="teamCard">
<h2> <h2>
The Team The Team
</h2> </h2>
<img class="tommyAvatar" src="/img/tommyAvatar2.jpg"/> <img class="tommyAvatar" src="/img/tommyAvatar2.jpg" />
<p> <p>
Insert Bio Here..... Tommy “TerribleDev” Parnell is a Senior Software Engineer at Cargurus. Tommy loves all things web and
mobile!
</p> </p>
</section> </section>
<footer class="teamCard">
<h2>Contact us</h2>
<p>Need to talk with us? Looking for ways you can help, or sponsor us? Please <a href="mailto:tommy@terribledev.io">email us</a> and we will try to get back to you!</p>
</footer>
</main> </main>
<script src="main.js" type="text/javascript" ></script>
</body> </body>
</html> </html>

5
main.js Normal file
View File

@@ -0,0 +1,5 @@
"use strict";
function scrollDown(){
document.getElementById('mainLoc').scrollIntoView({block: 'start', behavior: 'smooth'});
}

145
main.scss Normal file
View File

@@ -0,0 +1,145 @@
$darkBg: #373837;
$lightBg: white;
$darkFont: black;
$lightFont: white;
%dark {
background-color: $darkBg;
color: $lightFont;
}
%light {
background-color: $lightBg;
$color: $darkFont;
}
@mixin textShadow() {
text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
border: 10px;
}
body {
margin: 0%;
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;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.96);
text-align: center;
&:hover {
background-color: $darkBg;
color: $lightBg;
}
}
.headerCard {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
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-size: auto;
background-position-x: 22%;
background-position-y: bottom;
}
}
header {
display: flex;
align-items: center;
flex-direction: column;
h1 {
font-size: 3rem;
color: $lightFont;
font-weight: normal;
margin: 0rem;
@include textShadow();
}
p {
font-size: 1rem;
color: $lightFont;
margin-bottom: 1rem;
@include textShadow();
}
.arrowDown {
color: $lightFont;
@include textShadow();
margin-top: .4em;
cursor: pointer;
&:hover {
color: $darkFont;
}
}
}
.main {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
& > section:nth-child(odd) {
@extend %dark;
}
& > * {
min-height: 33vh; // atleast as tall as 33% of the view port
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
p {
padding-left: 0.8rem;
padding-right: 0.8rem;
}
}
}
.intro {
h2 {
margin-top: 0.5rem;
margin-bottom: 0;
}
}
.eventCard {
h2 {
margin: 0;
}
ul {
list-style: none;
padding: 0;
li {
margin-bottom: 0.4rem;
a {
text-decoration: underline;
color: $darkFont;
}
}
}
}
.teamCard {
.tommyAvatar {
border-radius: 50%;
}
}