ts-cset · BillSpyro · Sep 25, 2019 · Sep 25, 2019 · Sep 26, 2019 · Sep 26, 2019
diff --git a/airbnb/index.html b/airbnb/index.html
@@ -1 +1,71 @@
 <!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <title>Airbnb</title>
+  <link href="styles.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+
+  <article>
+
+    <h1>
+      Book unique homes and experiences.
+    </h1>
+
+    <section class="FirstSection">
+
+      <label for="Where">WHERE</label>
+      <input type="text" id="Where" name="Where" placeholder="Anywhere">
+
+      <div class="CheckOutside">
+        <div class="CheckInside">
+          <label for="CheckIn">CHECK IN</label>
+          <input type="text" id="CheckIn" name="Check In" placeholder="mm/dd/yyyy">
+
+        </div>
+        <div class="CheckInside">
+          <label for="CheckOut">CHECK OUT</label>
+          <input type="text" id="CheckOut" name="Check Out" placeholder="mm/dd/yyyy">
+        </div>
+      </div>
+
+      <label for="Guests">GUESTS</label>
+      <input type="text" id="Guests" name="Guests" placeholder="1 guest">
+
+      <button type="button" name="button">Search</button>
+
+    </section>
+
+    <section>
+
+      <h2>
+        Explore Airbnb
+      </h2>
+
+      <div class="ImgOutside">
+        <div class="ImgInside">
+          <img src="http://placekitten.com/200/300" alt="Bedroom" />
+          <a href="#">Homes</a>
+        </div>
+
+        <div class="ImgInside">
+          <img src="http://placekitten.com/200/300" alt="People biking outside" />
+          <a href="#">Experiences</a>
+        </div>
+
+        <div class="ImgInside">
+          <img src="http://placekitten.com/200/300" alt="Food from a restaurant" />
+          <a href="#">Restaurants</a>
+        </div>
+      </div>
+    </section>
+
+  </article>
+
+</body>
+
+</html>
diff --git a/airbnb/styles.css b/airbnb/styles.css
@@ -1 +1,90 @@
 /* Add your CSS here */
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+
+article h1 {
+
+width: 100%;
+margin: auto;
+background-image: url(http://placekitten.com/200/300);
+color: white;
+padding: 10px;
+
+}
+
+section.FirstSection {
+
+display: flex;
+flex-direction: column;
+padding: 20px;
+
+}
+
+section.FirstSection div.CheckOutside {
+
+display: flex;
+flex-direction: row;
+justify-content: space-around;
+
+}
+
+section.FirstSection div.CheckOutside div.CheckInside {
+
+display: flex;
+flex-direction: column;
+justify-content: space-around;
+width: 50%;
+
+}
+
+label, input, button {
+
+padding: 10px 0;
+
+}
+
+button {
+
+background-color: red;
+color: white;
+
+}
+
+section div.ImgOutside {
+
+display: flex;
+justify-content: space-between;
+
+}
+
+img{
+
+width: 100px;
+height: 100px;
+
+}
+
+section div.ImgOutside div.ImgInside {
+
+border: solid grey 1px;
+display: flex;
+align-items: center;
+
+}
+
+section div.ImgOutside div.ImgInside a {
+
+padding-top: 35px;
+padding-bottom: 35px;
+padding-left: 20px;
+padding-right: 150px;
+color: black;
+text-decoration: none;
+
+}
diff --git a/amazon/index.html b/amazon/index.html
@@ -1 +1,72 @@
 <!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <title>Amazon</title>
+  <link href="styles.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+
+  <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>
+
+  <h2>
+    Shop by category
+  </h2>
+
+  <section>
+
+    <div>
+      <img src="http://placekitten.com/200/300" alt="Image of a programming book" />
+      <a href="#">Programming</a>
+    </div>
+
+    <div>
+      <img src="http://placekitten.com/200/300" alt="Image of a computer science book" />
+      <a href="#">Computer Science</a>
+    </div>
+
+    <div>
+      <img src="http://placekitten.com/200/300" alt="Image of a programming Languages book" />
+      <a href="#">Programming Languages</a>
+    </div>
+
+    <div>
+      <img src="http://placekitten.com/200/300" alt="Image of a Networking &amp; Cloud Computing book" />
+      <a href="#">Networking &amp; Cloud Computing</a>
+    </div>
+
+    <div>
+      <img src="http://placekitten.com/200/300" alt="Image of a Security &amp; Encryption book" />
+      <a href="#">Security &amp; Encryption</a>
+    </div>
+
+    <div>
+      <img src="http://placekitten.com/200/300" alt="Image of a Software book" />
+      <a href="#">Software</a>
+    </div>
+
+    <div>
+      <img src="http://placekitten.com/200/300" alt="Image of an Operating Systems book" />
+      <a href="#">Operating Systems</a>
+    </div>
+
+    <div>
+      <img src="http://placekitten.com/200/300" alt="Image of a Games &amp; Strategy Guides book" />
+      <a href="#">Games &amp; Strategy Guides</a>
+    </div>
+
+
+  </section>
+
+</body>
+
+</html>
diff --git a/amazon/styles.css b/amazon/styles.css
@@ -1 +1,50 @@
 /* Add your CSS here */
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+h1 {
+
+color: #e37911;
+
+}
+
+h2 {
+
+border-bottom: 1px grey solid;
+
+}
+
+section {
+
+display: flex;
+flex-wrap: wrap;
+
+}
+
+section div{
+
+width: 25%;
+padding: 20px;
+display: flex;
+flex-direction: column;
+align-items: center;
+
+}
+
+section div img {
+
+width: 100px;
+height: 150px;
+
+}
+
+div a {
+
+text-decoration: none;
+
+}
diff --git a/github/index.html b/github/index.html
@@ -1 +1,70 @@
 <!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <title>Github</title>
+  <link href="styles.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+
+  <nav>
+    <ul>
+      <li><a href="#">About</a></li>
+      <li><a href="#" class="second">Careers</a></li>
+    </ul>
+  </nav>
+
+  <article>
+
+    <h1>
+      Come help us make a collaboration even better
+    </h1>
+
+    <p class="FirstParagraph">
+      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>
+      <li><a href="#">Open positions</a></li>
+      <li><a href="#">Apprenticeships</a></li>
+      <li><a href="#">Internships</a></li>
+    </ul>
+
+<div>
+    <section>
+      <img src="http://placekitten.com/200/300" alt="Five hands each showing a different symbol and two speech bubbles overlapping" />
+      <div class="Inside">
+      <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>
+      </div>
+    </section>
+
+    <section>
+      <img src="http://placekitten.com/200/300" alt="Earth with three different speech bubbles" />
+      <div class="Inside">
+      <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>
+      </div>
+    </section>
+</div>
+
+  </article>
+
+
+</body>
+
+</html>