beths stuff
This commit is contained in:
Beth Parnell
2
Desktop/Projects/TPcode/.gitignore
vendored
Normal file
2
Desktop/Projects/TPcode/.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
*.css
|
||||
*.css.map
|
||||
BIN
Desktop/Projects/TPcode/img/nashuaBG.jpg
Normal file
BIN
Desktop/Projects/TPcode/img/nashuaBG.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
BIN
Desktop/Projects/TPcode/img/tommyAvatar2.jpg
Normal file
BIN
Desktop/Projects/TPcode/img/tommyAvatar2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
66
Desktop/Projects/TPcode/index.html
Normal file
66
Desktop/Projects/TPcode/index.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE <!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Nahua Codes</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
|
||||
crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- <img class="bgimg" src="/img/bgimg.jpeg" alt="computer on a white desk" /> -->
|
||||
<div class="headerCard">
|
||||
<header class="header">
|
||||
<h1>Nashua Codes</h1>
|
||||
<p>Free Programming Classes</p>
|
||||
<span class="arrowDown"><i class="fas fa-chevron-circle-down fa-2x"></i></span>
|
||||
</header>
|
||||
|
||||
</div>
|
||||
|
||||
<main class="main">
|
||||
<section class="intro">
|
||||
<h2>
|
||||
Intro
|
||||
</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis eros vel libero bibendum
|
||||
vulputate. Sed vel enim porttitor, mattis eros sit amet, tempor enim. Morbi in tincidunt neque.
|
||||
Maecenas vitae bibendum justo. Praesent pharetra mollis ante quis sodales. Nulla in vestibulum
|
||||
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 class="eventCard">
|
||||
<h2>
|
||||
Upcoming Events
|
||||
</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<i class="far fa-calendar-alt"></i> <a class="eventLink" href="#"> Novmeber 1st- Intro to JS</a>
|
||||
</li>
|
||||
<li>
|
||||
<i class="far fa-calendar-alt"></i> <a class="eventLink" href="#">November 21st- Intro to html</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="teamCard">
|
||||
<h2>
|
||||
The Team
|
||||
</h2>
|
||||
<img class="tommyAvatar" src="/img/tommyAvatar2.jpg"/>
|
||||
<p>
|
||||
Insert Bio Here.....
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
140
Desktop/Projects/TPcode/main.scss
Normal file
140
Desktop/Projects/TPcode/main.scss
Normal file
@@ -0,0 +1,140 @@
|
||||
$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%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user