ts-cset · jpochetedmead · Sep 26, 2019 · Sep 26, 2019 · Sep 27, 2019 · Sep 27, 2019
diff --git a/airbnb/images/Experiences.png b/airbnb/images/Experiences.png
diff --git a/airbnb/images/Homes.png b/airbnb/images/Homes.png
diff --git a/airbnb/images/Restaurants.png b/airbnb/images/Restaurants.png
diff --git a/airbnb/images/background-airbnb.png b/airbnb/images/background-airbnb.png
diff --git a/airbnb/index.html b/airbnb/index.html
@@ -1 +1,54 @@
 <!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Book unique homes and experiences - Airbnb</title>
+    <link href="styles.css" rel="stylesheet" type="text/css"/>
+  </head>
+  <body>
+
+<div class="header">
+  <h1>Book unique homes and experiences.</h1>
+</div>
+
+ <div class="forms">
+    <p>Where</p>
+    <input class="where" type="search" name="Where" value="Anywhere">
+  <div class="in-out-text">
+    <p>Check In</p>
+    <p>Check Out</p>
+  </div>
+  <div class="input-in-out">
+    <input class="checkin" type="date" name="Check In" value="mm/dd/yyyy">
+    <input class="checkout" type="date" name="Check Out" value="mm/dd/yyyy">
+  </div>
+    <p>Guests</p>
+    <form>
+      <select class="guests" type="text" name="Guests">
+        <option value="1">1 guest</option>
+        <option value="2">2 guests</option>
+        <option value="3">3 guests</option>
+        <option value="4">4 guests</option>
+        <option value="5+">5 or more guests</option>
+      </select>
+    </form>
+    <!-- drop-down options -->
+    <!-- Red background and white letter search button -->
+    <br>
+      <input class="search" type="submit" value="Search">
+ </div>
+
+ <div class="explore">
+    <h2>Explore Airbnb</h2>
+    <div class="thenumbers">
+     <ul>
+       <li class="one"><a href="https://www.airbnb.com/s/homes"><img src="images/Homes.png" alt="Homes">Homes</a></li>
+       <li class="two"><a href="https://www.airbnb.com/s/experiences"><img src="images/Experiences.png" alt="Experiences">Experiences</a></li>
+       <li class="three"><a href="https://www.airbnb.com/s/restaurants"><img src="images/Restaurants.png" alt="Restaurants">Restaurants</a></li>
+     </ul>
+   </div>
+ </div>
+
+  </body>
+</html>
diff --git a/airbnb/styles.css b/airbnb/styles.css
@@ -1 +1,109 @@
 /* Add your CSS here */
+.header {
+  background-image: url(images/background-airbnb.png);
+}
+
+.header h1 {
+  color: white;
+  font-family: sans-serif;
+  padding: 25px 35px 20px 10px;
+}
+
+.forms {
+  padding: 10px;
+}
+
+.forms p {
+  color: gray;
+}
+
+.forms .where {
+  color: gray;
+  border-radius: 2px;
+  width: 100%;
+}
+
+.forms .in-out-text {
+  display: flex;
+  justify-content: space-around;
+}
+
+.forms .input-in-out {
+  display: flex;
+  justify-content: space-around;
+}
+
+.forms .checkin {
+  color: gray;
+  border-radius: 2px;
+}
+
+.forms .checkout {
+  color: gray;
+  border-radius: 2px;
+}
+
+
+.guests {
+  width: 100%;
+}
+
+.search {
+  background-color: #F06649;
+  color: white;
+  border-radius: 5px;
+  width: 100%;
+  height: 40px;
+}
+
+.explore {
+  background-color: white;
+  color: gray;
+  justify-content: space-around;
+}
+
+.explore h2 {
+  color: gray;
+  font-weight: bold;
+}
+
+.explore img {
+  width: 40%;
+}
+
+.explore ul {
+  list-style-type: none;
+  text-align: center;
+}
+
+.explore a {
+  color: gray;
+  text-decoration: none;
+  border-width: thin;
+  border-style: outset;
+  border-color: gray;
+  border-radius: 3px;
+}
+
+.explore a:hover {
+  background-color: #F06649;
+  color: white;
+}
+
+.thenumbers {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+}
+
+.explore .one {
+  display: inline-flex;
+}
+
+.explore .two {
+  display: inline-flex;
+}
+
+.explore .three {
+  display: inline-flex;
+}
diff --git a/amazon/images/computer-science.png b/amazon/images/computer-science.png
diff --git a/amazon/images/games-guides.png b/amazon/images/games-guides.png
diff --git a/amazon/images/networking-cloud-computing.png b/amazon/images/networking-cloud-computing.png
diff --git a/amazon/images/operating-systems.png b/amazon/images/operating-systems.png
diff --git a/amazon/images/programming-languages.png b/amazon/images/programming-languages.png
diff --git a/amazon/images/programming.png b/amazon/images/programming.png
diff --git a/amazon/images/security-encryption.png b/amazon/images/security-encryption.png
diff --git a/amazon/images/software.png b/amazon/images/software.png
diff --git a/amazon/index.html b/amazon/index.html
@@ -1 +1,39 @@
 <!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+
+   <div class="the-main">
+    <h1>Computer & Technology Books</h1>
+    <p>Browse a wide selection of
+      <a href="https://www.amazon.com/Programming-Computers-Internet-Books/b/ref=amb_link_1?ie=UTF8&node=3839&pf_rd_m=ATVPDKIKX0DER&pf_rd_s=merchandised-search-1&pf_rd_r=7YW561ZWB8NP1FDS2Y5D&pf_rd_r=7YW561ZWB8NP1FDS2Y5D&pf_rd_t=101&pf_rd_p=e958ce81-3cd8-4829-8ad3-21a44b122dca&pf_rd_p=e958ce81-3cd8-4829-8ad3-21a44b122dca&pf_rd_i=5">programming guides</a>,
+      <a href="https://www.amazon.com/s?rh=n%3A5%2Cp_28%3AAndroid&s=salesrank&pf_rd_i=5&pf_rd_m=ATVPDKIKX0DER&pf_rd_p=e958ce81-3cd8-4829-8ad3-21a44b122dca&pf_rd_p=e958ce81-3cd8-4829-8ad3-21a44b122dca&pf_rd_r=M0AFP6JZ9VAGGXNTKCB9&pf_rd_r=M0AFP6JZ9VAGGXNTKCB9&pf_rd_s=merchandised-search-1&pf_rd_t=101&ref=amb_link_2">android resources</a>,
+      and <a href="https://www.amazon.com/s?rh=n%3A5%2Cp_28%3AJava&s=salesrank&pf_rd_i=5&pf_rd_m=ATVPDKIKX0DER&pf_rd_p=e958ce81-3cd8-4829-8ad3-21a44b122dca&pf_rd_p=e958ce81-3cd8-4829-8ad3-21a44b122dca&pf_rd_r=M0AFP6JZ9VAGGXNTKCB9&pf_rd_r=M0AFP6JZ9VAGGXNTKCB9&pf_rd_s=merchandised-search-1&pf_rd_t=101&ref=amb_link_3">Java books</a>.
+    </p>
+
+    <h2>Shop by category</h2>
+    </div>
+
+  <div class="images">
+
+     <ul>
+      <div class="thelist"><li><img src="images/programming.png" alt="Programming"><p><a href="#">Programming</a></p><li></div>
+      <div class="thelist"><li><img src="images/computer-science.png" alt="Computer Science"><p><a href="#">Computer Science</a></p></li></div>
+      <div class="thelist"><li><img src="images/programming-languages.png" alt="Programming Languages"><p><a href="#">Programming Languages</a></p></li></div>
+      <div class="thelist"><li><img src="images/networking-cloud-computing.png" alt="Networking &amp; Cloud Computing"><p><a href="#">Networking &amp; Cloud Computing</a></p></li></div>
+
+     <div class="thelist"><li><img src="images/security-encryption.png" alt="Security &amp; Encryption"><p><a href="#">Security &amp; Encryption</a></p></li></div>
+     <div class="thelist"><li><img src="images/software.png" alt="Software"><p><a href="#">Software</a></p></li></div>
+     <div class="thelist"><li><img src="images/operating-systems.png" alt="Operating Systems"><p><a href="#">Operating Systems</a></p></li></div>
+     <div class="thelist"><li><img src="images/games-guides.png" alt="Games &amp; Strategy Guides"><p><a href="#">Games &amp; Strategy Guides</a></p></li></div>
+    </ul>
+
+  </div>
+
+  </body>
+</html>
diff --git a/amazon/styles.css b/amazon/styles.css
@@ -1 +1,51 @@
 /* Add your CSS here */
+
+* {
+  box-sizing: border-box;
+}
+
+.the-main {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid gray;
+}
+
+.the-main h1 {
+  color: darkorange;
+}
+
+.the-main h2 {
+  color: black;
+}
+
+.images {
+  display: inline-flex;
+  flex-direction: row;
+}
+
+.images ul {
+  list-style: none;
+}
+
+.images li {
+  list-style: none;
+}
+
+.images img {
+  width: 90px;
+  height: 100px;
+}
+
+.images p {
+}
+
+.images a {
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.thelist {
+  display: inline-flex;
+  flex-direction: row;
+  margin: 15px 5px 15px 5px;
+}
diff --git a/github/images/diverse-workplace.png b/github/images/diverse-workplace.png
diff --git a/github/images/work-happier.png b/github/images/work-happier.png
diff --git a/github/index.html b/github/index.html
@@ -1 +1,60 @@
 <!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Careers</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+
+<div class="top-menu">
+    <nav>
+      <ul>
+        <li><a href="https://github.com/about">About</a></li>
+        <li><a href="#">Careers</a></li>
+      </ul>
+    </nav>
+</div>
+
+<div class="middle-text">
+    <h1>Come help us make collaboration even better</h1>
+    <p>
+      At GibHub we build the tools that make collaborating and writing software easier for everyone.
+      We've build a company we truly love working for, and we think you will too.
+    </p>
+</div>
+
+<div class="middle-links">
+    <ul>
+      <li><a href="https://github.com/about/careers#positions">Open positions</a></li>
+      <li><a href="#">Apprenticeships</a></li>
+      <li><a href="https://github.com/about/careers#internships">Internships</a></li>
+    </ul>
+</div>
+
+<div class="bottom">
+    <img src="images/diverse-workplace.png" alt="A diverse and inclusive workplace">
+    <div class="p1">
+    <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 commiment to diversity
+      and inclusion and see our <a href="https://github.com/about/diversity">current demographic data</a>.
+    </p>
+   </div>
+    <img src="images/work-happier.png" alt="Work happier">
+    <div class="p2">
+    <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="https://github.com/about/careers/remote">work wherever you're happiest</a>.
+    </p>
+  </div>
+</div>
+
+  </body>
+</html>
diff --git a/github/styles.css b/github/styles.css
@@ -1 +1,71 @@
 /* Add your CSS here */
+
+* {
+  box-sizing: border-box;
+}
+
+.top-menu {
+  display: flex;
+  flex-direction: row;
+}
+
+.top-menu ul {
+  list-style: none;
+}
+
+.top-menu li {
+display: inline-flex;
+}
+
+.top-menu a {
+  color: blue;
+  text-decoration: none;
+}
+
+.top-menu a:hover {
+  color: black;
+}
+
+.middle-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.middle-links {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.middle-links li {
+  display: inline-flex;
+  padding: 20px;
+}
+
+.middle-links a {
+  color: blue;
+  text-decoration: none;
+}
+
+.bottom {
+  display: flex;
+  flex-direction: row;
+}
+
+.bottom a {
+  color: blue;
+  text-decoration: none;
+}
+
+.bottom img {
+  margin: 20px;
+}
+
+.bottom .p1 {
+
+}
+
+.bottom .p2 {
+
+}