Skip to content

Finish the lab #5

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

Finish the lab #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bbd42b0
Finish the Stevens mockup
Steve-D-Eckles Sep 26, 2019
0a78258
Finish the Instagram mockup
Steve-D-Eckles Sep 26, 2019
487ba87
Finish GitHub mockup
Steve-D-Eckles Sep 26, 2019
756ec66
Fix a minor issue with the Stevens mockup
Steve-D-Eckles Sep 26, 2019
f8dc14b
Finish the Airbnb mockup
Steve-D-Eckles Sep 30, 2019
55db6fb
Add the amazon layout mockup
Steve-D-Eckles Oct 1, 2019
bb11359
Update the airbnb mockup to be better
Steve-D-Eckles Oct 1, 2019
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
40 changes: 39 additions & 1 deletion airbnb/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,39 @@
<!-- Add your HTML here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title>Airbnb</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<header>
<h1>Book unique homes and experiences.</h1>
</header>
<main>
<label>Where<input type="text" placeholder="Anywhere" /></label>
<label class="check">Check in<input type="text" placeholder="mm/dd/yy"></label>
<label class="check">Check out<input type="text" placeholder="mm/dd/yy"></label>
<label>Guests
<select>
<option value="one">1 Guest</option>
<option value="two">2 Guests</option>
<option value="three">3 Guests</option>
<option value="four">4 Guests</option>
<option value="five">5 Guests</option>
</select>
</label>
<a href="#">Search</a>
</main>
<nav class="explore">
<h2>Explore Airbnb</h2>
<ul>
<li><a href="#"><img src="https://placekitten.com/100/100" alt="Placeholder kitten"></a><a href="#" class="text">Homes</a></li>
<li><a href="#"><img src="https://placekitten.com/100/100" alt="Placeholder kitten"></a><a href="#" class="text">Experiences</a></li>
<li><a href="#"><img src="https://placekitten.com/100/100" alt="Placeholder kitten"></a><a href="#" class="text">Restaurants</a></li>
</ul>
</nav>
</body>

</html>
89 changes: 88 additions & 1 deletion airbnb/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,88 @@
/* Add your CSS here */
html {
box-sizing: border-box;
font-size: 10px;
}

*, *::before, *::after {
box-sizing: inherit;
margin: 0px;
padding: 0px;
}

h1 {
background-image: url(https://placekitten.com/1000/100);
color: #fff;
padding: 2rem 0;
padding-left: 1rem;
}

main {
display: flex;
flex-wrap: wrap;
padding: 1rem;
}

main label {
display: block;
width: 100%;
text-transform: uppercase;
padding: 0.5rem 0;
margin-bottom: 0.5rem;
}

main input {
display: block;
width: 100%;
}

.check {
width: 50%;
}

select {
display: block;
width: 100%;
}

main a {
display: block;
background: red;
width: 100%;
text-align: center;
padding: 0.5rem 0;
text-decoration: none;
color: white;
font-size: 1.4rem;
}

h2 {
margin: 1rem;
}

nav ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 1rem;
}

nav li {
width: 31%;
height: 100px;
display: flex;
justify-content:
}

.text {
display: flex;
width: 100%;
align-items: center;
text-decoration: none;
padding-left: 1rem;
font-size: 2rem;
color: #000;
border: 1px solid grey;
border-left: none;
}
32 changes: 31 additions & 1 deletion amazon/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,31 @@
<!-- Add your HTML here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8" />
<title>Amazon</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<header>
<h1>Computer &amp; Technology Books</h1>
<p>Browse a wide selection of <a href="#">programming guides</a>, <a href="#">Android resources</a>, and <a href="#">Java books</a>.</p>
</header>

<main>
<h2>Shop by category</h2>
<ul>
<li><img src="http://placekitten.com/75/100" alt="A placeholder kitten" /><a href="#">Programming</a></li>
<li><img src="http://placekitten.com/75/100" alt="A placeholder kitten" /><a href="#">Computer Science</a></li>
<li><img src="http://placekitten.com/75/100" alt="A placeholder kitten" /><a href="#">Programming Languages</a></li>
<li><img src="http://placekitten.com/75/100" alt="A placeholder kitten" /><a href="#">Networking &amp; Cloud Computing</a></li>
<li><img src="http://placekitten.com/75/100" alt="A placeholder kitten" /><a href="#">Security &amp; Encryption</a></li>
<li><img src="http://placekitten.com/75/100" alt="A placeholder kitten" /><a href="#">Software</a></li>
<li><img src="http://placekitten.com/75/100" alt="A placeholder kitten" /><a href="#">Operating Systems</a></li>
<li><img src="http://placekitten.com/75/100" alt="A placeholder kitten" /><a href="#">Games &amp; Strategy Guides</a></li>
</ul>
</main>
</body>

</html>
52 changes: 51 additions & 1 deletion amazon/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,51 @@
/* Add your CSS here */
html {
box-sizing: border-box;
font-size: 10px;
}

*, *::before, *::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}

h1 {
color: orange;
margin: 2rem;
margin-bottom: 1rem;
font-size: 3rem;
}

header p {
margin-left: 2rem;
margin-bottom: 2rem;
color: grey
}

a {
text-decoration: none;
}

main {
margin-left: 2rem;
}

h2 {
border-bottom: 1px solid grey;
margin-bottom: 1.5rem;
}

ul {
display: flex;
flex-wrap: wrap;
}

li {
width: 25%;
display: flex;
flex-direction: column;
}

li img {
align-self: flex-start;
}
52 changes: 51 additions & 1 deletion github/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,51 @@
<!-- Add your HTML here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Github</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<header>
<ul>
<li><a href="#">About</a> /</li>
<li><a href="#">Careers</a></li>
</ul>
</header>

<main>
<article class="main-info">
<h1>Come help us make collaboration even better</h1>
<p>At GitHub we build the tools that make collaborating and writing software
easier for everyone. We've built a company we truly love working for, and
we think you will too.</p>
<ul class="careers">
<li><a href="#">Open Positions</a></li>
<li><a href="#">Apprenticeships</a></li>
<li><a href="#">Internship</a></li>
</ul>
</article>
<div class="blurbs">
<img class="icon" src="https://placekitten.com/300/300" alt="A picture of a kitten used as a placeholder" />
<article class="small">
<h2>A diverse and inclusive workplace</h2>
<p>At GitHub we think that a diverse company is a strong company, and we
work hard to foster a supportive and welcoming workplace. Learn more about
our commitment to diversity and inclusion and see our <a href="#">current
demographic data.</a></p>
</article>
<img class="icon" src="https://placekitten.com/300/300" alt="A picture of a kitten used as a placeholder" />
<article class="small">
<h2>Work happier</h2>
<p>Build amazing things with autonomy, self-direction, and a healthy
work-life balance. We offer flexible work schedules for all of our employees
and unlimited PTO. We also believe that if a job allows for it, you should
<a href="#">work wherever you're happiest.</a></p>
</article>
</div>
</main>

</body>

</html>
84 changes: 83 additions & 1 deletion github/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,83 @@
/* Add your CSS here */
html {
box-sizing: border-box;
font-size: 10px;
}

*, *::before, *::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}

main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 3rem;
}

.main-info {
width: 70%;
text-align: center;
}

.main-info h1 {
font-size: 4rem;
}

.main-info p,
.careers a {
font-size: 2rem;
padding: 2rem 0;
}

.careers {
list-style: none;
display: flex;
justify-content: space-around;
}

.careers a {
display: block;
text-decoration: none;
}

.icon {
height: 5rem;
width: 5rem;
align-self: center;
}

.blurbs {
display: flex;
justify-content: space-between;
width: 90%;
padding: 3rem;
}

.small {
width: 40%;
}

.small p {
font-size: 1.3rem;
}

.small a {
text-decoration: none;
}

header ul {
list-style: none;
display: flex;
}

header li{
padding-left: 1rem;
padding-top: 1rem;
}

header a {
text-decoration: none;
}
Loading