Skip to content

more-css-practice #9

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

more-css-practice #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3aeb080
added html and css for the instagram page
CodeMart10 Sep 26, 2019
78ce7cc
polished instagram page
CodeMart10 Sep 26, 2019
6685233
completed recreation of github website
CodeMart10 Sep 27, 2019
d2e4ab7
add html to amazon recreation
CodeMart10 Sep 27, 2019
dbe343c
finished amazon recreation
CodeMart10 Sep 27, 2019
988fa42
stevens college finished
CodeMart10 Oct 1, 2019
afa6e04
fixed stevens college
CodeMart10 Oct 1, 2019
2d648a6
finished airbnb
CodeMart10 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
66 changes: 65 additions & 1 deletion airbnb/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,65 @@
<!-- 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>
<h1>Book unique homes and experiences.</h1>

<section class="text">

<article class="where">
<label class="label">Where<input type="text" name="name" value="Anywhere"></label>
</article>

<section class="middle">

<article class="checkin">
<label class="label50">Check in<input type="text" name="name" value="mm/dd/yyyy"></label>
</article>

<article class="checkin">
<label class="label50">Check out<input type="text" name="name" value="mm/dd/yyyy"></label>
</article>

</section>

<article class="where">
<label class="label">
Guests<input type="text" name="name" value="1 guest">
</label>
</article>

<article class="search">
<a href="#">Search</a>
</article>

</section>

<h2>Explore Airbnb</h2>

<section class="explore">

<article>
<img src="http://placekitten.com/g/200/300" alt="homes">
<a href="#">Homes</a>
</article>

<article>
<img src="http://placekitten.com/g/200/300" alt="People riding bikes">
<a href="#">Experiences</a>
</article>

<article>
<img src="http://placekitten.com/g/200/300" alt="Restaurants">
<a href="#">Restaurants</a>
</article>


</section>


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

a {
text-decoration: none;
}

li {
list-style: none;
}

body {
display: flex;
flex-direction: column;
}

.text {
height: 300px;
}

.checkin {
width: 100%;
}

.middle {
display: flex;
width: 100%;
}

.text article {
margin-top: 10px;
margin-bottom: 10px;
}

.search {
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
height: 40px;
}


.label input {
display: block;
width: 100%;
height: 40px;

}

.label50 input {
display: block;
width: 100%;
height: 40px;
}

.explore {
display: flex;
flex-direction: row;
}

.explore article {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding: 20px;
border: 1px solid gray;
margin: 10px;
width: 350px;
}

.explore article a {
padding-left: 30px;
}

img {
height: 70px;
width: 120px;
}
81 changes: 80 additions & 1 deletion amazon/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,80 @@
<!-- 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>

<section class="head">
<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>
</section>
<section class="body">

<h2>Shop by category</h2>

<section class="shop">
<article>

<img src="http://placekitten.com/g/200/300" alt="peace sign, thumbs up">
<a href="#">Programming</a>

</article>

<article>

<img src="http://placekitten.com/g/200/300" alt="peace sign, thumbs up">
<a href="#">Computer Science</a>

</article>

<article>

<img src="http://placekitten.com/g/200/300" alt="peace sign, thumbs up">
<a href="#">Programming Languages</a>

</article>

<article>

<img src="http://placekitten.com/g/200/300" alt="peace sign, thumbs up">
<a href="#">Networking &amp; Cloud Computing</a>

</article>

<article>

<img src="http://placekitten.com/g/200/300" alt="peace sign, thumbs up">
<a href="#">Security &amp; Encryption</a>

</article>

<article>

<img src="http://placekitten.com/g/200/300" alt="peace sign, thumbs up">
<a href="#">Software</a>

</article>

<article>

<img src="http://placekitten.com/g/200/300" alt="peace sign, thumbs up">
<a href="#">Operating Systems</a>

</article>

<article>

<img src="http://placekitten.com/g/200/300" alt="peace sign, thumbs up">
<a href="#">Games &amp; Strategy Guides</a>

</article>
</section>

</section>

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

.head {
display: flex;
flex-direction: column;
}

.body {
display: flex;
flex-direction: column;
}

.shop {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
width: 1200px;

}

h2 {
border-bottom: 2px solid lightgray;
padding-bottom: 10px;
}

article {
display: flex;
flex-direction: column;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 30px;
margin-top: 30px;

}

article a {
display: flex;
justify-content: center;
align-content: center;
}
67 changes: 66 additions & 1 deletion github/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,66 @@
<!-- 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>

<ul class="about">
<li><a href="#">About</a></li>
<li>Careers</li>
</ul>

<h1>Come help us make collaboration even better</h1>

<section class="first">
<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>
</section>

<ul class="middle">
<li><a href="#">Open positions</a></li>
<li><a href="#">Apprenticeships</a></li>
<li><a href="#">Internships</a></li>
</ul>

<section>

<section class="sec1">

<img src="http://placekitten.com/g/200/300" alt="peace sign, thumbs up">

<article>

<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>

</section>
<section class="sec2">

<img src="http://placekitten.com/g/200/300" alt="globe with message icons">


<article>

<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>

</section>
</section>

</body>
</html>
Loading