Skip to content

Didn't finish the whole page #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JourdanClark wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Didn't finish the whole page #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
58a16d5
Started project
JourdanClark Sep 19, 2017
4e1bce3
Finished background section and menu
JourdanClark Sep 19, 2017
5bf0db9
Removed old code that was breaking the mobile version
JourdanClark Sep 20, 2017
5a2db75
Improved scaling for mobile slightly
JourdanClark Sep 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!-- http://htmlpreview.github.io/?https://github.com/JourdanClark/DOM/blob/master/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>
Lambda School - A computer science education that's 100% free until you're hired
</title>
<link rel="shortcut icon" href="res/favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="res/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="res/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="res/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="res/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="res/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="res/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="res/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="res/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="res/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="res/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="res/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="res/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="res/favicon/favicon-16x16.png">
<link rel="stylesheet" href="public/index.css">
<script src="public/index.js"></script>
</head>
<body>
<div class="container">
<div class="header mobile">
<div class="logo">
<a href="">
<img src="res/images/lambdawhite.png">
</a>
</div>
<div class="menu">
<div class="menu items">
<p> about </p>
<p class="menu items courses"> courses </p>
<div class="menu items courses dropdown">
<h1> view all courses </h1>
<h4> courses: </h4>
<h2> computer science &amp; software engineering </h2>
<h2> artificial intelligence &amp; machine learning </h2>
<h4> free course archives: </h4>
<h2> javascript mini bootcamp </h2>
<h2> web development mini bootcamp </h2>
</div>
<p> blog </p>
<p> contact </p>
<p> apply </p>
</div>
</div>
</div>
<div class="background">
<div class="info">
<h1>
The Computer Science Education of the Future
</h1>
<h3>
Immesive preparation for the world's most in-demand careers, for as little as <b> $0 until you're hired </b>
</h3>
<button class="info button" id="courses"> view courses </button>
<button class="info button" id="apply"> apply now </button>
</div>
</div>
<div style="height: 500px;">
</div>
</div>
</body>
</html>
199 changes: 199 additions & 0 deletions public/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@

h1, h2, h4 {
text-transform: uppercase;
}

.container {
position: absolute;
min-width: 400px;
max-width: 100%;
width: 100%;
margin: 0;
padding: 0;
left:0;
top:0;
height: 100%;
}

.header {
position: absolute;
width: 100%;
height: 60px;
left: 0;
top: 0;
border-bottom: 1.5px solid rgb(218, 215, 255);
border-bottom: 1.5px solid rgba(218, 215, 255, .5);
min-height: 60px;
}

.background {
background: linear-gradient(rgba(5, 40, 60, .9), rgba(55, 189, 255, .6)), url("res/images/background.jpg");
background-position: center center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
display: inline-block;
}

.logo {
position: relative;
display: inline-block;
float: left;
top: 50%;
transform: translateY(-50%);
margin-left: 2vmin;
margin-right: 3vmin;
}

.logo > a > img {
height: 30px;
}

.menu {
display: inline-block;
text-align: center;
}

.menu.items > p {
position: relative;
display: inline-block;
margin-top: 0px;
padding: 20px 10px 24px 10px;
font-size: 16px;
color: white;
text-transform: uppercase;
top: 0;
}

.menu.items.courses:hover + .menu.items.courses.dropdown {
display: block;
}

.menu.items.courses.dropdown:hover {
display: block;
}

.menu.items.courses.dropdown {
position: absolute;
display: none;
text-align: left;
width: 380px;
color: white;
background-color: rgb(25,26,28);
padding: 8px 8px 8px 20px;
margin-top: -16px;
box-shadow: 5px 5px 8px rgba(0, 0, 0, .5);
}

.menu.items.courses.dropdown > * {
opacity: .6;
}

.menu.items.courses.dropdown > h1 {
font-size: 14px;
}

.menu.items.courses.dropdown > h2 {
font-size: 13px;
margin-top: 20px;
}

.menu.items.courses.dropdown > h4 {
font-size: 10px;
margin-top: 30px;
opacity: .4;
}

.menu.items > p:hover {
opacity: .8;
}

.info {
text-align: center;
color: white;
}

.info > h1 {
margin-top: 30vmin;
margin-left: 20vmin;
margin-right: 20vmin;
font-size: 7vmin;
text-shadow: 4px 3px 2px rgba(0, 0, 0, .5);
}

.info > h3 {
margin-left: 60px;
margin-right: 60px;
font-size: 4vmin;
font-weight: normal;
}

.info.button {
position: relative;
display: inline-block;
border: 1px solid white;
padding: 15px 56px 15px 56px;
background: transparent;
outline: none;
font-size: 12px;
text-transform: uppercase;
}

.info.button#apply {
background-color: rgba(255,255,255,.8);
color: rgba(16,24,24,.7);
}

.info.button:hover {
padding: 14px 53px 15px 51px;
font-size: 13px;
}

.info.button:active {
padding: 16px 60px 16px 59px;
font-size: 11px;
}

.info.button#apply:hover {
padding: 14px 53px 15px 54px;
}

.info.button#apply:active {
padding: 16px 59px 16px 59px;
font-size: 11px;
}

@media screen and (max-width: 995px){
.header {
background-color: rgb(16,24,24);
position: fixed;
z-index: 9001;
}

.logo > a > img{
height: 20px;
}

.background {
position: relative;
}

.info > h1{
margin-top: 25vh;
}

.menu.items > * {
font-size: 12px !important;
padding-right: 1.5vmin !important;
padding-left: 1.5vmin !important;
padding-bottom: 3% !important;
padding-top: 6% !important;
bottom: 0 !important;
}

.menu.items.courses:hover + .menu.items.courses.dropdown {
display: none;
}
}
1 change: 1 addition & 0 deletions public/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// was trying to do everything in css
Binary file added public/res/images/background.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/favicon/android-icon-192x192.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/favicon/apple-icon-114x114.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/favicon/apple-icon-120x120.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/favicon/apple-icon-144x144.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/favicon/apple-icon-152x152.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/favicon/apple-icon-180x180.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/favicon/apple-icon-57x57.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/favicon/apple-icon-60x60.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/favicon/apple-icon-72x72.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/favicon/apple-icon-76x76.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/favicon/favicon-16x16.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/favicon/favicon-32x32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/favicon/favicon-96x96.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/favicon/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added res/images/background.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/images/ben.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/images/drew.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/images/istock1blue.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/images/istock4blue.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/images/istock5blue.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/images/istock6blue.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/images/jiovan.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/images/karthik.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/images/lambdawhite.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/images/latoyya.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/images/logo-dark.png
View file
Open in desktop
Binary file added res/images/patrick.jpg
View file
Open in desktop
Binary file added res/images/ryan.jpg
View file
Open in desktop
Binary file added res/images/sean.jpg
View file
Open in desktop