Skip to content

display exercise complete #24

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
pavitran wants to merge 9 commits into
base: master
Choose a base branch
from
Open

display exercise complete #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9313345
display exercise complete
pavitran Oct 26, 2016
69fa108
completed position-exercise
pavitran Oct 27, 2016
c7dbd9c
position-exercise-complete
pavitran Oct 27, 2016
0032590
float-ex-complete
pavitran Oct 27, 2016
266baf4
Greg's list
pavitran Oct 28, 2016
ab00c70
AnalogSea signup complete
pavitran Oct 28, 2016
e8f6d65
AnalogSea signup complete
pavitran Oct 28, 2016
5b1fa55
AnalogSea signup complete
pavitran Oct 28, 2016
cf2b5f8
Responsive layout solution
pavitran Oct 29, 2016
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
23 changes: 23 additions & 0 deletions analog-sea.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>Analog Sea Signup</title>
<meta charset="utf-8" name="description" content="A simple signup page for Analog Sea Signup.">
<link rel="stylesheet" type="text/css" href="styles/analog-sea.css">
</head>
<body>
<header><img src="images/logo.png"></header>
<main>
<form action="/signup/" method="POST">
<h1 class="cen_tex">Sign Up</h1>
<label for="email">Email</label>
<input type="email" name="email" required placeholder="[email protected]" id="email" class="in_wid a_in">
<label for="password">Password</label>
<input type="password" name="password" required placeholder="123passw0rd" id="password" class="in_wid b_in">
<button type="submit" class="in_wid">Sign Up</button>
<div class="cen_tex for"><a href="/forgot-password/new" >Forgot Password?</a></div>
</form>
<div class="cen_tex login"><span>Already have an account? </span><a href="/login">Log In</a></div>
</main>
</body>
</html>
75 changes: 75 additions & 0 deletions css/float-grid.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
* {
box-sizing: border-box;
}

/* Grid measurements:
*
* 960px wide including 12 gutters (half gutters on both edges)
*
* 60px columns (12)
* 20px gutters (two half-gutters + 11 full gutters, so 12 total)
*
*
* For smaller screens, we always want 20px of padding on either side,
* so 960 + 20 + 20 => 1000px
*
**/
.row {
max-width: 1000px;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
}

/* Clearfix */
.row::before,
.row::after {
display: table;
content: '';
}

.row::after {
clear: both;
}

.col-3, .col-4, .col-6, .col-12 {
float: left;

/* Gutters:
* Each column is padded by half-a-gutter on each side,
*
* Half a gutter is 10px, 10/960 (context) = 1.041666%
*
*/
padding-left: 1.04166666%;
padding-right: 1.04166666%;
}

/* Mobile defaults */
.col-3, .col-4, .col-6, .col-12 {
width: 100%;
}


/* Non-mobile, grid */
@media only screen and (min-width: 640px) {
/* 3 columns, 3/12 in % */
.col-3 {
width: 25%;
}

/* 4 columns */
.col-4 {
width: 33.33%
}

/* 6 columns */
.col-6 {
width: 50%
}

/* 12 columns */
.col-12 {
width: 100%
}
}
30 changes: 30 additions & 0 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
main {
padding-top: 100px;
}

main .row {
margin-bottom: 20px;
}

.box {
height: 200px;
text-align: center;
padding-top: 30px;
}

.black {
background-color: black;
color: white;
}

.green {
background-color: green;
}

.orange {
background-color: orange;
}

.blue {
background-color: blue;
}
12 changes: 11 additions & 1 deletion display-exercise.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,16 @@
</head>
<body>
<!-- your HTML here to implement the colored box design -->
<p>Placeholder!</p>
<main>

<div class="box half green"></div>
<div class="box half blue"></div>


<div class="box one_third gray"></div>
<div class="box one_third black"></div>
<div class="box one_third orange"></div>

</main>
</body>
</html>
2 changes: 1 addition & 1 deletion float-exercise.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<h1>Nebulas</h1>
<h3>Are they really that nebulous?</h3>

<p>Lorem ipsum Id et non est non in occaecat nostrud fugiat in proident consequat aliquip veniam pariatur pariatur <img src="images/nebula1.png"> labore laboris aliqua eu et in dolore dolore dolor eu voluptate ea irure dolore nisi in sint adipisicing aliqua ad magna consequat adipisicing mollit in ad ad qui voluptate dolore et Duis proident aliquip Duis Excepteur quis eu officia proident sit aute nisi sed cillum officia velit dolore eiusmod in aute quis enim ad minim id labore aliquip elit ea elit in tempor dolor amet exercitation in laborum sint irure commodo laborum deserunt commodo ad minim officia deserunt Excepteur aute laboris qui elit laboris id in et esse laboris culpa ut nostrud Duis nulla et laborum ullamco quis deserunt elit dolor sed proident velit sed ad in in in laborum ut incididunt dolor reprehenderit sed ullamco fugiat minim Duis consequat magna cupidatat. Lorem ipsum Id et non est non in occaecat nostrud fugiat in proident consequat aliquip veniam pariatur pariatur labore laboris aliqua eu et in dolore dolore dolor eu voluptate ea irure dolore nisi in sint adipisicing aliqua ad magna consequat adipisicing mollit in ad ad <img src="images/nebula2.png"> qui voluptate dolore et Duis proident aliquip Duis Excepteur quis eu officia proident sit aute.</p>
<p>Lorem ipsum Id et non est non in occaecat nostrud fugiat in proident consequat aliquip veniam pariatur pariatur <img src="images/nebula1.png" class="nebula1"> labore laboris aliqua eu et in dolore dolore dolor eu voluptate ea irure dolore nisi in sint adipisicing aliqua ad magna consequat adipisicing mollit in ad ad qui voluptate dolore et Duis proident aliquip Duis Excepteur quis eu officia proident sit aute nisi sed cillum officia velit dolore eiusmod in aute quis enim ad minim id labore aliquip elit ea elit in tempor dolor amet exercitation in laborum sint irure commodo laborum deserunt commodo ad minim officia deserunt Excepteur aute laboris qui elit laboris id in et esse laboris culpa ut nostrud Duis nulla et laborum ullamco quis deserunt elit dolor sed proident velit sed ad in in in laborum ut incididunt dolor reprehenderit sed ullamco fugiat minim Duis consequat magna cupidatat. Lorem ipsum Id et non est non in occaecat nostrud fugiat in proident consequat aliquip veniam pariatur pariatur labore laboris aliqua eu et in dolore dolore dolor eu voluptate ea irure dolore nisi in sint adipisicing aliqua ad magna consequat adipisicing mollit in ad ad <img src="images/nebula2.png" class="nebula2"> qui voluptate dolore et Duis proident aliquip Duis Excepteur quis eu officia proident sit aute.</p>
<p>Nisi sed cillum officia velit dolore eiusmod in aute quis enim ad minim id labore aliquip elit ea elit in tempor dolor amet exercitation in laborum sint irure commodo laborum deserunt commodo ad minim officia deserunt Excepteur aute laboris qui elit laboris id in et esse laboris culpa ut nostrud Duis nulla et laborum ullamco quis deserunt elit dolor sed proident velit sed ad in in in laborum ut incididunt dolor reprehenderit sed ullamco fugiat minim Duis consequat magna cupidatat. Lorem ipsum Id et non est non in occaecat nostrud fugiat in proident consequat aliquip veniam pariatur pariatur labore laboris aliqua eu et in dolore dolore dolor eu voluptate ea irure dolore nisi in sint adipisicing aliqua ad magna consequat adipisicing mollit in ad ad qui voluptate dolore et Duis proident aliquip Duis Excepteur quis eu officia proident sit aute nisi sed cillum officia velit dolore eiusmod in aute quis enim ad minim id labore aliquip elit ea elit in tempor dolor amet exercitation in laborum sint irure commodo laborum deserunt commodo ad minim officia deserunt Excepteur aute laboris qui elit laboris id in et esse laboris culpa ut nostrud Duis nulla et laborum ullamco quis deserunt elit dolor sed proident velit sed ad in in in laborum ut incididunt dolor reprehenderit sed ullamco fugiat minim Duis consequat magna cupidatat.</p>
</main>

Expand Down
47 changes: 47 additions & 0 deletions gregslist.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>Greg's List</title>
<meta charset="utf-8" name="description" content="Greg's List is an old-school classified ads site">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles/gregslist.css">
</head>
<body>
<header>
<a class="logo"><h1>Greg's List</h1></a>
<nav class="top_nav">
<a href="">Post</a>
<a href="">Account</a>
</nav>
</header>
<main>
<form action="#">
<label>Search Jobs</label>
<input type="text" name="" placeholder="Developer, designer, internship...">
<button type="submit"><img src="images/magnifying-glass.png" class="icon"></button>
</form>
<nav class="main_nav">
<a >&lt;prev</a>
<span>1 to 100 of 179</span>
<a >next&gt;</a>
</nav>
<ul>
<li>
<span>June 22</span>
<a href="">Technical Project Manager</a>
<span>Midtown East</span>
</li>
<li>
<span>June 21</span>
<a href="">Frontend Developer</a>
<span>SoHo</span>
</li>
<li>
<span>June 20</span>
<a href="">Senior Python Developer / Cofounder</a>
<span>Flatiron</span>
</li>
</ul>
</main>
</body>
</html>
Binary file added images/logo.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 images/magnifying-glass.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.
4 changes: 4 additions & 0 deletions position-exercise.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@
</nav>

<main>
<div class="spaceare">
<!-- Put the HTML you need to accomplish the design -->
<img src="images/spacecat.png" class="space cat">
<img src="images/spacedog.png" class="space dog">
</div>
</main>
</body>
</html>
62 changes: 62 additions & 0 deletions responsive-grid--solution.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Responsive Grid Challenge</title>

<!-- Responsive viewport tag, tells small screens that it's responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Stylesheets -->
<link rel="stylesheet" href="css/float-grid.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<main>

<div class="row">
<div class="col-3">
<div class="box orange">3 columns</div>
</div>
<div class="col-3">
<div class="box blue">3 columns</div>
</div>
<div class="col-3">
<div class="box green">3 columns</div>
</div>
<div class="col-3">
<div class="box black">3 columns</div>
</div>
</div>


<div class="row">
<div class="col-4">
<div class="box orange">4 columns</div>
</div>
<div class="col-4">
<div class="box green">4 columns</div>
</div>
<div class="col-4">
<div class="box black">4 columns</div>
</div>
</div>

<div class="row">
<div class="col-6">
<div class="box orange">6 columns</div>
</div>
<div class="col-6">
<div class="box green">6 columns</div>
</div>
</div>

<div class="row">
<div class="col-12">
<div class="box blue">12 columns</div>
</div>
</div>

</main>
</body>
</html>
73 changes: 73 additions & 0 deletions styles/analog-sea.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
body{
background-color: #3f94e7;
font-family: sans-serif;
}
header img{
display: block;
height:35px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 30px;
}
form{
box-sizing: border-box;
width: 400px;
padding-left: 40px;
padding-right: 40px;
background-color: white;
border-radius: 3px;
margin: auto;
}
.cen_tex{
text-align: center;
padding-bottom: 30px;
}
.in_wid{
box-sizing: border-box;
width: 320px;
height: 55px;
padding: 15px;
border: 2px solid #DDDDDD;
border-radius: 3px;
}
.a_in , .b_in,.cen_tex{
margin-top: 15px;
margin-bottom: 15px;
}
h1{
padding-top: 30px;
font-weight: normal;
color: #565656;
}
button{
background-color: #15CD72;
font-size: 20px;
font-weight: bold;
color: white;
}
.cen_tex.login{
color: white;
font-weight: bold;
}
a {
color: inherit;
cursor: auto;
}
input::-webkit-input-placeholder {
font-size: 17px;
font-weight: bold;
}
label{
font-weight: bold;
}
.for{
color: #999;
font-size: 17px;
}
.for:hover{
color: #777;
}
button:hover{
background-color: #0CB863;
}
35 changes: 35 additions & 0 deletions styles/display-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
main{
margin-left: auto;
margin-right: auto;
margin-top: 90px;
width: 800px;
height: 500px;
font-size: 0;
}
.half{
width: 50%;
height: 40%;
}
.box{
border: 1px solid black;
display: inline-block;
}
.one_third{
width: 33.33%;
height: 60%;
}
.green{
background-color: green;
}
.black{
background-color: black;
}
.gray{
background-color: gray;
}
.blue{
background-color: blue;
}
.orange{
background-color: orange;
}
Loading