Skip to content

Instantly share code, notes, and snippets.

@hellobrian

hellobrian/alex-and-brian-stuff.markdown

Created November 26, 2018 03:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hellobrian/ea517fd83e3484423c712980b972fa66 to your computer and use it in GitHub Desktop.
Save hellobrian/ea517fd83e3484423c712980b972fa66 to your computer and use it in GitHub Desktop.
Download ZIP
Alex and Brian Stuff
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tech Challenge 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Cabin:400,500,700|Playfair+Display:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="styles/style-dist.css">
</head>
<body>
<!-- HEADER STARTS -->
<header>
<div class="wrapper">
<i class="fas fa-bars menu"></i>
<div class="flex-container">
<div class="logo">
<h2>HackerYou</h2>
</div>
<!-- NAV STARTS -->
<nav class="top-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Bootcamp</a></li>
<li><a href="#">Part-Time</a></li>
</ul>
</nav>
<!-- NAV ENDS -->
</div>
</div>
</header>
<!-- HEADER ENDS -->
<!-- HERO SECTION STARTS -->
<section class="hero">
<div class="wrapper hero-container">
<div class="hero-box">
<div class="text-wrapper">
<h1>Winter 2019 Tech Test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium at, magnam illo eaque provident reprehenderit ipsa, quas nisi doloremque pariatur modi incidunt vero officia qui molestiae facilis. Ratione, dignissimos, doloribus magnam illo eaque.</p>
</div>
</div>
</div>
</section>
<!-- HERO SECTION ENDS -->
<!-- WELCOME SECTION STARTS -->
<section>
<div class="wrapper welcome-container">
<h2>Welcome to HackerYou</h2>
<div class="welcome-box">
<span class="arrows"><i class="fas fa-angle-left"></i></span>
<img src="assets/image-2.jpg" alt="classroom with students on computer">
<span class="arrows"><i class="fas fa-angle-right"></i></span>
</div>
<p>Full-time web development immersive</p>
<p class="dates">January 1st, 2019</p>
</div>
</section>
<!-- WELCOME SECTION ENDS -->
<!-- GALLERY SECTION STARTS -->
<section class="gallery">
<div class="wrapper">
<div class="gallery-container">
<div class="box">
<div class="box-image">
<img src="https://img.huffingtonpost.com/asset/5b7fdeab1900001d035028dc.jpeg?cache=sixpwrbb1s&ops=1910_1000" alt="instructor teaching a class">
<p class="box-date">Jan 9, 2019</p>
</div>
<div class="box-text">
<h2>Web Development</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde accusantium nobis quibusdam nam minima magnam fuga similique iusto pariatur amet.</p>
<p><a href="#" class="read">Read More</a></p>
</div>
</div>
<div class="box">
<div class="box-image">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="three instructors wearing blue shirts">
<p class="box-date">Jan 7, 2019</p>
</div>
<div class="box-text">
<h2>Team Culture</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde accusantium nobis quibusdam nam minima magnam fuga similique iusto pariatur amet.</p>
<p><a href="#" class="read">Read More</a></p>
</div>
</div>
<div class="box">
<div class="box-image">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="instructor helping a student">
<p class="box-date">Jan 6, 2019</p>
</div>
<div class="box-text">
<h2>JavaScript</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde accusantium nobis quibusdam nam minima magnam fuga similique iusto pariatur amet.</p>
<p><a href="#" class="read">Read More</a></p>
</div>
</div>
<div class="box">
<div class="box-image">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="student working on code seen on a computer screen ">
<p class="box-date">Jan 4, 2019</p>
</div>
<div class="box-text">
<h2>Student Experience</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde accusantium nobis quibusdam nam minima magnam fuga similique iusto pariatur amet.</p>
<p><a href="#" class="read">Read More</a></p>
</div>
</div>
</div>
</div>
</section>
<!-- GALLERY SECTION ENDS -->
<!-- FOOTER STARTS -->
<footer>
<div class="bottom">
<!-- BOTTOM CONTAINER STARTS -->
<div class="wrapper bottom-container">
<div class="box1">
<!-- BOTTOM INFO STARTS -->
<div class="info">
<p>Hackeryou Tech Test</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam laboriosam deserunt labore reiciendis tempore!</p>
</div>
<!-- BOTTOM INFO ENDS -->
<!-- BOTTOM NAV STARTS -->
<div class="bottom-nav">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Bootcamp</a></li>
<li><a href="#">Part-Time</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<!-- BOTTOM NAV ENDS -->
</div>
<div class="box2">
<!-- SUBSCRIBE STARTS -->
<div class="newsletter">
<p>Subscribe to our newsletter</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<form action="">
<label for="email">
<input type="email" name="email" placeholder="email address" class="email" required="">
</label>
<input type="submit" value="Subscribe">
</form>
</div>
<!-- SUBSCRIBE ENDS -->
</div>
</div>
<!-- BOTTOM CONTAINER ENDS -->
</div>
<!-- COPYRIGHT FOOTER STARTS -->
<div class="copyright">
<div class="wrapper copyright-container">
<div class="copy">
<p>&copy;2018 Hackeryou</p>
</div>
<!-- SOCIAL ICONS STARTS -->
<div class="social">
<nav class="social-nav">
<ul>
<li><a href="https://twitter.com/"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://www.instagram.com/?hl=en"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="https://plus.google.com/discover"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</nav>
</div>
<!-- SOCIAL ICONS ENDS -->
</div>
</div>
<!-- COPYRIGHT FOOTER ENDS -->
</footer>
<!-- FOOTER ENDS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts/scripts.js"></script>
</body>
</html>
Raw
style.scss
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
// VARIABLE STYLES
$primary: #F6F8FA;
$color-yellow: #EEB013;
$color-red: #DC143C;
$basefont: 'Playfair Display', serif;
// GENERAL STYLES
html {
font: 62.5%;
}
body {
font-family: 'Cabin', sans-serif;
font-size: 1.2rem;
color: black;
background: $primary;
}
img {
display: block;
width: 100%;
}
h1,
h2,
h3 {
font-family: $basefont;
margin: 0;
width: 100%;
}
a {
display: inline-block;
text-decoration: none;
text-transform: uppercase;
color: black;
font-size: 1rem;
font-weight: 500;
letter-spacing: 1px;
}
ul {
padding: 0;
margin: 0;
li {
list-style-type: none;
font-weight: 700;
}
}
.wrapper {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
// HEADER STYLES
.flex-container {
display: flex;
justify-content: space-between;
.logo {
font-size: 1.4rem;
padding: 30px 0;
}
}
.menu {
position: absolute;
left: 20px;
top: 20px;
z-index: 1;
display: none;
}
// NAV STYLES
.top-nav {
display: flex;
}
.top-nav ul {
display: flex;
justify-content: center;
align-items: center;
li {
padding-left: 20px;
text-align: center;
a {
border-bottom: 2px solid transparent;
padding: 15px 0;
transition: text-shadow .3s;
&:hover {
border-bottom: 2px solid $color-yellow;
text-shadow: 0 0 0.65px #333;
}
}
}
}
.top-nav ul.active {
top: 0;
right: 0;
bottom: 0;
}
// HERO STYLES
.hero {
background: url(https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi) no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
position: relative;
.hero-container {
height: 100vh;
display: flex;
align-items: center;
.hero-box {
width: 500px;
background: $primary;
padding: 5%;
line-height: 2rem;
.text-wrapper {
background: red;
position: absolute;
width: 100%;
z-index: 2;
top: calc(50% - 32px);
}
}
}
}
// WELCOME STYLES
.welcome-container {
padding: 0;
text-align: center;
padding: 50px 0;
h2 {
margin: 0;
padding: 0;
}
p:nth-of-type(1) {
text-transform: uppercase;
font-weight: 700;
}
}
.welcome-box {
display: flex;
justify-content: center;
align-items: center;
img {
margin: 0 auto;
padding: 20px 80px;
}
.arrows {
font-size: 2rem;
&:hover {
color: $color-yellow;
}
}
}
.dates {
font-family: $basefont;
font-style: italic;
}
// GALLERY STYLES
.gallery {
background: white;
padding: 50px 0;
.gallery-container {
display: flex;
flex-flow: row wrap;
margin: 0 -15px;
}
}
.box {
width: calc(50% - 30px);
margin: 15px;
background: $primary;
.box-image {
position: relative;
.box-date {
background: $color-red;
color: white;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 700;
position: absolute;
right: 40px;
bottom: -10px;
margin: 0;
padding: 5px 10px;
letter-spacing: 1px;
}
}
}
.box-text {
padding: 20px 40px;
margin: 0;
line-height: 2rem;
p {
@media (min-width: 300px) {
background: red;
font-size: 14px;
}
@media (min-width: 500px) {
background: blue;
font-size: 16px;
}
}
.read {
color: $color-red;
font-weight: 700;
transition: text-shadow .3s;
&:hover {
text-shadow: 0 0 0.65px $color-red;
}
}
}
// BOTTOM STYLES
footer {
color: white;
}
.bottom {
background: #535353;
color: white;
.bottom-container {
display: flex;
flex-flow: row wrap;
padding: 40px 0;
.box1 {
width: calc(50% - 15px);
margin-right: 15px;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.box2 {
width: calc(50% - 15px);
margin-left: 15px;
// padding-left: 10px;
// display: flex;
// justify-content: space-between;
// flex-flow: row wrap;
}
}
}
.info {
width: 66.66%;
p {
margin: 0;
line-height: 2rem;
&:first-child {
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
}
}
}
.bottom-nav ul {
line-height: 1.5rem;
// display: flex;
// flex-flow: column;
li a {
color: white;
transition: text-shadow .3s;
&:hover {
color: $color-yellow;
text-shadow: 0 0 0.65px white;
}
}
}
.newsletter p {
margin: 0;
line-height: 2rem;
&:first-child {
text-transform: uppercase;
font-weight: 700;
}
}
form {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 20px 0;
input[type="email"] {
font-family: $basefont;
font-style: italic;
padding: 1rem;
// padding: 10px 135px 10px 10px;
flex: 1 0 auto;
border: 1px solid grey;
width: 100%;
}
}
input[type="submit"] {
background: $color-red;
color: white;
text-transform: uppercase;
font-family: 'Cabin', sans-serif;
font-weight: 700;
display: inline-block;
padding: 10px 30px;
border: 1px solid $color-red;
text-align: center;
}
input[type="submit"]:hover {
background: lighten($color-red, 10);
}
// COPYRIGHT STYLES
.copyright {
border: 1px solid #383838;
background: #202020;
padding: 15px 0;
.copyright-container {
display: flex;
justify-content: space-between;
.copy p {
margin: 0;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 1rem;
font-weight: 500;
}
}
}
.social ul {
display: flex;
li a {
color: white;
padding-left: 10px;
&:hover {
color: $color-yellow;
}
}
}
// Portrait tablet and small desktops
@media (max-width: 940px) {
.wrapper {
width: 80%;
}
}
// Landscape phone to portrait tablet
@media (max-width: 768px) {
.wrapper {
width: 80%;
}
.logo {
// margin: 0 auto;
// text-align: center;
}
.flex-container {
display: flex;
flex-flow: row wrap;
// margin: 0 auto;
// text-align: center;
}
.top-nav {
// display: flex;
// flex-flow: row wrap;
// width: 100%;
// margin: 0 auto;
}
}
// Landscape phones and down
@media (max-width: 480px) {
.wrapper {
width: 95%;
}
.flex-container {
// display: flex;
// flex-flow: row no-wrap;
margin: 0 auto;
text-align: center;
}
.logo {
margin: 0 auto;
text-align: center;
}
.logo h2 {
margin: 0 auto;
text-align: center;
}
.hero {
height: 50vw;
.hero-box {
// display: none;
// height: 1vw;
// margin-top: 5vh;
// padding: 1%;
// transform: translate(0px, 50px);
h1 {
font-size: 1.6rem;
}
p {
display: none;
}
}
}
.menu {
display: block;
}
.top-nav {
// background: black;
}
.top-nav ul {
right: -30%;
bottom: 0;
display: block;
// width: 30%;
flex-direction: column;
background: rgba(0,0,0,0.8);
position: fixed;
transition: all .3s;
}
.top-nav ul li a {
color: white;
text-align: center;
margin: 0 auto;
}
.welcome-box {
width: 95%;
margin: 0 auto;
.arrows {
font-size: 1.2rem;
}
img {
padding: 5px 10px;
}
}
.box {
width: 100%
}
.box1, .box2{
width: 100%;
margin: 0;
}
}
// .hero-container {
// position: relative;
// .hero-box {
// position: absolute;
// top: 250px;
// left: 0;
// width: 45%;
// background: $primary;
// padding: 40px;
// line-height: 2rem;
// }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment