Skip to content

oops #27

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
blong191 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

oops #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
51 changes: 50 additions & 1 deletion airbnb/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,50 @@
<!-- Add your HTML here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<img src="http://placekitten.com/900/100" alt="">
<h1>Book unique homes and exeriences</h1>
</header>
<main>
<section class="first-last">
<h3>WHERE</h3>
<input type="text" name="where" value="Anywhere">
</section>
<section class="check">
<section>
<h3>CHECK IN</h3>
<input class="date" type="date" name="" value="mm/dd/yyyy">
</section>
<section>
<h3>CHECK OUT</h3>
<input class="date" type="date" name="" value="mm/dd/yyyy">
</section>
</section>
<section class="first-last">
<h3>GUESTS</h3>
<input type="text" name="guests" value="1 guest">
</section>
<a class="button" href="#">Search</a>
</main>
<footer>
<h2>Explore Airbnb</h2>
<section>
<img src="http://placekitten.com/100/100" alt="a room">
<p>Homes</p>
</section>
<section>
<img src="http://placekitten.com/100/100" alt="people riding bikes">
<p>Experiences</p>
</section>
<section>
<img src="http://placekitten.com/100/100" alt="food">
<p>Restaurants</p>
</section>
</footer>
</body>
</html>
47 changes: 46 additions & 1 deletion airbnb/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,46 @@
/* Add your CSS here */
* {
font-family: sans-serif;
box-sizing: border-box;
}
header{
position: relative;
}
body{
margin: 0;
}
h1{
position: absolute;
top:0;
left:0;
color: white;
}
.first-last{
display: flex;
padding: 10px;
flex-direction: column;
}
.first-last input{
height: 2.5rem;
font-size: 1rem;
color: grey;
}
h3{
font-size: .5rem;
color: grey;
}
.check{
display: flex;
padding: 10px;
flex-direction: row;
flex-wrap: wrap;
}
.check section{
display: flex;
flex-direction: column;
}
.date{
height: 2.5rem;
font-size: 1rem;
color: grey;
width: %;
}
55 changes: 54 additions & 1 deletion amazon/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,54 @@
<!-- Add your HTML here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="amazon.css">
</head>

<body>
<h1>Computer & Technology</h1>
<p>Browse a wide selection of <a href="#">Programing </a><a href="#">Guides </a><a href="#">Android resources </a>,and <a href="#">Java books</a>.</p>
<h2>Shop by category</h2>
<section class="none">
<section class="one">
<article>
<img src="http://placekitten.com/100/125" alt="cute cat">
<a href="#">Programing</a>
</article>
<article>
<img src="http://placekitten.com/100/125" alt="cute cat">
<a href="#">Computer Science</a>
</article>
<article>
<img src="http://placekitten.com/100/125" alt="cute cat">
<a href="#">Programing Languages</a>
</article>
<article>
<img src="http://placekitten.com/100/125" alt="cute cat">
<a href="#">Networking & Cloud Computing</a>
</article>
</section>
<section class="two">
<article>
<img src="http://placekitten.com/100/125" alt="cute cat">
<a href="#">Security & Encryption</a>
</article>
<article>
<img src="http://placekitten.com/100/125" alt="cute cat">
<a href="#">Software</a>
</article>
<article>
<img src="http://placekitten.com/100/125" alt="cute cat">
<a href="#">Operating</a>
</article>
<article>
<img src="http://placekitten.com/100/125" alt="cute cat">
<a href="#">Games & Strategy Guides</a>
</article>
</section>
</section>
</body>

</html>
28 changes: 27 additions & 1 deletion amazon/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,27 @@
/* Add your CSS here */
* {
font-family: sans-serif;
box-sizing: border-box;
}
.none{
padding:10px;
border-top: thin solid lightgrey;

}
.one{
display: flex;
justify-content: space-around;
}
article{
display: flex;
flex-direction: column;
}
.two{
display: flex;
justify-content: space-around;
}
article img{
width: 100px;
}
article a{
width:150px;
}
50 changes: 49 additions & 1 deletion github/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,49 @@
<!-- Add your HTML here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<nav class="page">
<ul>
<li><a class="topbar-a" href="#">About</a></li>
<li class="in">/</li>
<li><a class="topbar-c" href="#">Careers</a></li>
</ul>
</nav>
<main>
<section class="intro">
<h1>Come help us make colaboration even better</h1>
<p>At Git Hub we build the tools that make collaborating easier
for everyone. We've built a comapny we truly love working for, and we think you will too.</p>
</section>
<nav class="king">
<ul class="links">
<li><a href="#">Open positions</a></li>
<li><a href="#">Apprenticeships</a></li>
<li><a href="#">Internship</a></li>
</ul>
</nav >
<section class="E" >
<article>
<img class="float" src="http://placekitten.com/100/100" alt="hands working together">
<h2 class="float">A diverse and inclusive workplace </h2>
<p class="float">At GitHub, we think that a diverse comapny is a strong company,
and we work hard to foster a supportive and welcoming workplace. learn more about out commitment
to diversity and inclusion and see our <a href="#">current demographic data.</a>
</p>
</article>
<article>
<img class="float" src="http://placekitten.com/100/100" alt="world with happieness">
<h2 class="float">Work happier</h2>
<p class="float">Build amazing things with autonomy, self-direction, and a healthy work-life balance.
We offer flexable 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>
</article>
</p>
</section>
</main>
</body>
</html>
68 changes: 67 additions & 1 deletion github/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,67 @@
/* Add your CSS here */
* {
font-family: sans-serif;
box-sizing: border-box;
}
ul{
padding: 0;
margin: 0;
}
li{
list-style-type:none;
display: inline;
}
a{
text-decoration: none;
}
.topbar-a{

}
.topbar-c{
color: black;
}
.in{
color:grey;
}
main{
display:flex;
flex-direction: column;
}
.intro{
width: 45rem;
align-self: center;
flex-direction: column;

}
h1 {
font-size: 2.5rem;
text-indent:3rem;
padding-left: 3rem;
}
.intro p{
font-size: 1.25rem;
align-self: center;
}
.king{
justify-content: center;
}
.links {
display: flex;
width: 40%;
justify-content: space-around;
margin-left: 30%
}
.float{
float: left;
flex-wrap: wrap;
}
h2{
font-size: 1rem;
margin: 0;
padding: 0;
display:inline;
}
.E p{
display: inline;
font-size: .5rem;
width: 30%;
}
54 changes: 53 additions & 1 deletion instagram/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,53 @@
<!-- Add your HTML here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">

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

<body>
<main>
<h1>About us<h1>
<h2 class="in">The Team<h2>
<h3 class="name">Kevin Systrom (CEO, co-founder)</h3>
<p>
<span>Kevun Systrom</span> (<a href="#">@Kevin</a>) is the CEO and cofounder of instagram
, a community of more than 1 billion who capture and share the world's moments on the service.
He is responsible for the company's overall vision and stratege as wekk as day to day operations.
</p>
<p>Since the beginning, Kevin has focused on simplicity and inspiring creativity through solving problems with thoughtful product design.
As a result, Instagram has become the home for visual storytelling for everyone from celebrities, newsrooms and bands, to teens, musicians and anyone with creative passion.
</p>
<p>prior to founding Instagram, Kevin was part of the startup Odeo, which later became Twitter, and spent two years at google working on products like gmail and google reader.
He greaduated from stanford University with a BS in Management science & Engineering and serves on the boards of walmart and KCRW.
</p>
<h3 class="name">Mike Krieger (CTO, co-founder)</h3>
<p>
<span>Mike Krieger</span>(<a href="#">@mikeyk</a>) is the CTO and co-founder of Instagram, a global community of more thatn 1 billion . As the head of engineering, mike focuses on building products that bring out the creativity in all
of
us.
</p>
<p>A native of são Paulo, Brazil, Mike holds an MS in Sybolic Systems from Stanford University.
prior to founding instagram, he worked at meebo as a user experience designer and front-end engineer
</p>
</main>
<nav class="nav">
<h3 class=side-title>ABOUT</h3>
<ul class="links">
<li class="selected"><a href="#">Company</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Jobs</a></li>
</ul>
<h3 class=side-title>LEAGAL</h3>
<ul class="links">
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Platform</a></li>
<li><a href="#">Libraries</a></li>
</ul>
</nav>
</body>

</html>
Loading