ts-cset · ScottJohnson02 · Sep 26, 2019 · Sep 26, 2019 · Sep 26, 2019 · Oct 1, 2019
diff --git a/.DS_Store b/.DS_Store
diff --git a/airbnb/index.html b/airbnb/index.html
@@ -1 +1,70 @@
 <!-- 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" type="text/css">
+</head>
+
+<body>
+  <header>
+    <h1>Book unique homes and experiences</h1>
+  </header>
+  <form class="search" action="index.html" method="post">
+    <div class="Where">
+      <h2 class="category">where</h2>
+      <input class="anywhere" type="text" name="where" placeholder="anywhere">
+    </div>
+    <div class="CheckInAndOut">
+      <div class="checkin">
+        <h2 class="category">Check in</h2>
+        <h2 class="category">check out</h2>
+
+      </div>
+      <div class="checkout">
+        <input type="text" name="Checkin" placeholder="mm/dd/yyyy">
+        <input type="text" name="Checkout" placeholder="mm/dd/yyyy">
+      </div>
+    </div>
+    <div class="guest">
+      <h2 class="category">guests</h2>
+      <input type="text" name="Checkout" placeholder="1 guest">
+    </div>
+  </form>
+
+  <h2 class="SearchButton">Search</h2>
+
+  <h2>Explore Airbnb</h2>
+
+  <div class="Explore">
+    <div class="exploreitem">
+      <img src="http://placekitten.com/200/100" alt="home">
+      <h3>Homes</h3>
+
+    </div>
+
+    <div class="exploreitem">
+      <img src="http://placekitten.com/200/100" alt="Path">
+      <h3>Experiences</h3>
+
+
+    </div>
+
+    <div class="exploreitem">
+      <img src="http://placekitten.com/200/100" alt="Table with food">
+      <h3>Resturaunts</h3>
+
+    </div>
+
+  </div>
+
+
+
+
+
+
+</body>
+
+</html>
diff --git a/airbnb/styles.css b/airbnb/styles.css
@@ -1 +1,74 @@
 /* Add your CSS here */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+header{
+  padding: 3rem;
+  background-color: grey;
+  color: white;
+  background-image: url(http://placekitten.com/1500/1500);
+}
+input{
+  margin: 1rem;
+
+}
+.anywhere{
+  display: block;
+  width: 100%;
+}
+.category{
+  text-transform: uppercase;
+
+}
+.CheckInAndOut div{
+  display: flex;
+  flex-direction: row;
+
+}
+.CheckInAndOut h2{
+  width: 50%;
+}
+
+.CheckInAndOut div{
+  display: flex;
+  flex-direction: row;
+}
+.checkout input{
+  display: block;
+  width: 50%;
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+}
+.guest input{
+  display: block;
+  width: 100%;
+}
+.exploreitem{
+  display: flex;
+  border: solid lightgrey;
+  flex-flow: row;
+  width: 33%;
+  margin: 1rem;
+
+
+
+
+}
+
+.Explore{
+display: flex;
+
+}
+
+.SearchButton{
+  text-align: center;
+  color: white;
+  background-color: #F67878;
+}
+h3{
+  flex direction: column;
+  align-self: center;
+}
diff --git a/amazon/index.html b/amazon/index.html
@@ -1 +1,57 @@
-<!-- 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" type="text/css">
+</head>
+
+<body>
+
+  <header>
+    <h1> Computer &#38; 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>
+
+  <h2>Shop by category</h2>
+  <section>
+
+
+
+    <div class="section-item">
+      <img src="http://placekitten.com/100/140" alt="book about programming">
+      <a href="#">Programming</a>
+    </div>
+    <div class="section-item">
+      <img src="http://placekitten.com/80/140" alt="book about programming">
+      <a href="#">Computer Science</a>
+    </div>
+    <div class="section-item">
+      <img src="http://placekitten.com/100/140" alt="book about programming">
+      <a href="#">Programming Languages</a>
+    </div>
+    <div class="section-item">
+      <img src="http://placekitten.com/120/140" alt="book about programming">
+      <a href="#">Networking & Cloud Computing</a>
+    </div>
+    <div class="section-item">
+      <img src="http://placekitten.com/100/140" alt="book about programming">
+      <a href="#">Security & Encryption</a>
+    </div>
+    <div class="section-item">
+      <img src="http://placekitten.com/90/140" alt="book about programming">
+      <a href="#">Software</a>
+    </div>
+    <div class="section-item">
+      <img src="http://placekitten.com/100/140" alt="book about programming">
+      <a href="#">Operating Systems</a>
+    </div>
+    <div class="section-item">
+      <img src="http://placekitten.com/120/140" alt="book about programming">
+      <a href="#">Games & Strategy Guides</a>
+    </div>
+  </section>
+</body>
+
+</html><!-- Add your HTML here -->
diff --git a/amazon/styles.css b/amazon/styles.css
@@ -1 +1,44 @@
 /* Add your CSS here */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+h1{
+  color: #FF8C00;
+  font-size: 1.75rem;
+  padding: 1rem;
+  padding-left: .5rem;
+}
+p{
+  padding: .5rem;
+
+}
+h2{
+  font-size: 1.5rem;
+  padding: .5rem ;
+  padding-top: 2rem;
+  border-bottom: .1rem solid lightgrey;
+}
+
+section{
+  display: flex;
+  justify-content: center;
+  flex-flow: wrap row;
+
+}
+.section-item{
+  height: 300px;
+  width: 20%;
+  margin: 1rem;
+}
+
+img{
+ display: block;
+ position: relative;
+ left: 12%
+}
+
+.section-item a{
+  display: block;
+}
diff --git a/github/index.html b/github/index.html
@@ -1 +1,54 @@
-<!-- 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" type="text/css">
+</head>
+
+<body>
+  <nav>
+    <a href="#">About</a>
+    <a href="#">Careers</a>
+  </nav>
+  <article class="Help">
+    <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>
+
+  </article>
+  <nav class=Jobs>
+    <a href="#">Open positions</a>
+    <a href="#">Apprenticeships</a>
+    <a href="#">Internships</a>
+  </nav>
+
+
+  <div class="Articles">
+    <article class="Diversity">
+      <img src="http://placekitten.com/100/140" alt="hand signs">
+      <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>
+    <article class="Happier">
+      <img src="http://placekitten.com/100/140" alt=" globe">
+      <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 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>
+
+
+
+
+
+</body>
+
+</html>
diff --git a/github/styles.css b/github/styles.css
@@ -1 +1,26 @@
 /* Add your CSS here */
+.Help{
+  text-align: center;
+}
+.Jobs{
+  display: flex;
+  justify-content: center;
+}
+.Jobs a{
+  margin: 1rem;
+
+}
+.Articles{
+  display: flex;
+
+
+}
+img{
+  float: left;
+  margin: 1rem;
+}
+
+.happier img{
+ margin-left: 2rem;
+
+}
diff --git a/instagram/index.html b/instagram/index.html
@@ -1 +1,53 @@
 <!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <title>Instagram</title>
+  <link rel="stylesheet" href="styles.css" type="text/css">
+</head>
+
+<body>
+  <nav>
+    <h3>ABOUT</h3>
+    <a href="#">Company</a>
+    <a href="#">Press</a>
+    <a href="#">Jobs</a>
+    <h3>LEGAL</h3>
+    <a href="#">Terms</a>
+    <a href="#">Privacy</a>
+    <a href="#">Platform</a>
+    <a href="#">Libraries</a>
+  </nav>
+
+  <article class="About">
+    <h1>About Us</h1>
+
+    <h2>The Team</h2>
+    <h2> Kevin Systrom (CEO, co-founder)</h2>
+    <p> Kevin Systrom (<a href="#">@Kevin</a>) is the CEO and co-founder 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
+      strategy as well as day-to-day operations.</p>
+    <p>Since the begining, Kevin has focused on simplicity and inspiring creativity
+      through solving with thoughtful product design. As a result, instagram
+      has become the home for visual storytelling for everyone from celebrities, newsrooms and
+      brands, to teens, musicans and anyone with a creative passion.</p>
+    <p>Prior to founding Instagram, Kevin was part of the start up Odeo, which later
+      became Twitter, and spent two years at Google working on products like
+      Gmail and Google Reader. He graduated from Stanford University with a BS
+      in management science and engineering and serves on the boards of Walmart and KCRW.
+    </p>
+
+    <h2>Mike Kreiger (CTO, co-founder)</h2>
+    <p> Mike Kreiger(<a href="#">@mikeyk</a>) is the cto and co-founder of Instagram, a global
+      community of more than 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 Sao Paulo, Brazil, Mike holds an MS in Symbolic Systems from Stanford University
+      Prior to founding Instagram, he worked at Meebo as a user experience designer and front-end engineer.</p>
+  </article>
+
+</body>
+
+</html>