ts-cset · jczimmerman · Sep 26, 2019 · Sep 26, 2019 · Sep 30, 2019 · Oct 1, 2019
diff --git a/airbnb/index.html b/airbnb/index.html
@@ -1 +1,77 @@
 <!-- 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>
+
+    <section>
+      <form class="form" action="#" method="post">
+        <section>
+          <label for="location">Where</label>
+          <input type="text" name="location" value="Anywhere">
+        </section>
+
+        <section class="checks">
+
+          <section>
+            <label for="check-in">Check-in</label>
+            <input class="border-right" type="date" name="check-in" value="">
+          </section>
+
+          <section>
+            <label for="check-out">Check-out</label>
+            <input class="border-left" type="date" name="check-out" value="">
+          </section>
+
+        </section>
+
+        <section>
+          <label for="guests">Guests</label>
+          <input type="number" name="guests" placeholder="1 Guest">
+        </section>
+
+        <section class="button">
+          <button type="submit" name="submit">Search</button>
+        </section>
+      </form>
+    </section>
+
+    <section>
+      <h2>Explore Airbnb</h2>
+
+      <section class="links">
+
+        <section>
+          <a href="#" class="no-underline">
+            <img src="http://placekitten.com/100/100" alt="Snapshot of a bedroom.">
+            <h3>Homes</h3>
+          </a>
+        </section>
+
+        <section>
+          <a href="#" class="no-underline">
+            <img src="http://placekitten.com/100/100" alt="3 people riding bikes.">
+            <h3>Experiences</h3>
+          </a>
+        </section>
+
+        <section>
+          <a href="#" class="no-underline">
+            <img src="http://placekitten.com/100/100" alt="Top view of a restaurant table.">
+            <h3>Restaurants</h3>
+          </a>
+        </section>
+
+      </section>
+
+    </section>
+  </body>
+</html>
diff --git a/airbnb/styles.css b/airbnb/styles.css
@@ -1 +1,87 @@
 /* Add your CSS here */
+* {
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+h1 {
+  color: #ffffff;
+  background-image: url(http://placekitten.com/200/300);
+  padding: 20px 0 20px 0;
+  margin-top: 0;
+}
+h2 {
+  color: #484848;
+}
+.form {
+  display: flex;
+  flex-direction: column;
+}
+.form section {
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0 10px 0;
+}
+.form .checks {
+  flex-direction: row;
+  justify-content: space-between;
+}
+.form .checks section {
+  flex: 1;
+}
+.border-right {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.border-left {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+label {
+  font-size: 12px;
+  color: #5b5b5b;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding-bottom: 8px;
+}
+input {
+  height: auto;
+  font-size: 19px;
+  color: #8f8f8f;
+  padding: 5px 5px 5px 5px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+}
+button {
+  background-color: #ff595f;
+  font-size: 18px;
+  color: #ffffff;
+  border-radius: 5px;
+  padding: 8px;
+}
+.links {
+  display: flex;
+  justify-content: space-between;
+}
+.links section {
+  border: 1px solid #f0f0f0;
+  width: 30%;
+}
+.links section a{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+img {
+  float: left;
+}
+h3 {
+  overflow: hidden;
+  padding-left: 10px;
+  color: #515151;
+  font-size: 12px;
+  font-weight: 750;
+  border-radius: 5px;
+}
+.no-underline {
+  text-decoration: none;
+}
diff --git a/amazon/index.html b/amazon/index.html
@@ -1 +1,46 @@
 <!-- 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>
+    <section>
+
+      <h1>Computer & 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>
+
+    <article>
+
+      <h2>Shop by category</h2>
+
+      <section class="shop">
+        <ul class="shop-selector">
+          <li><a href="#"><img src="https://via.placeholder.com/100x100"
+             alt="book image"><h3>Programming</h3></a></li>
+          <li><a href="#"><img src="https://via.placeholder.com/100x100"
+             alt="book image"><h3>Computer Science</h3></a></li>
+          <li><a href="#"><img src="https://via.placeholder.com/100x100"
+             alt="book image"><h3>Programming Languages</h3></a></li>
+          <li><a href="#"><img src="https://via.placeholder.com/100x100"
+             alt="book image"><h3>Networking & Cloud Computing</h3></a></li>
+          <li><a href="#"><img src="https://via.placeholder.com/100x100"
+             alt="book image"><h3>Security & Encryption</h3></a></li>
+          <li><a href="#"><img src="https://via.placeholder.com/100x100"
+             alt="book image"><h3>Software</h3></a></li>
+          <li><a href="#"><img src="https://via.placeholder.com/100x100"
+             alt="book image"><h3>Operating Systems</h3></a></li>
+          <li><a href="#"><img src="https://via.placeholder.com/100x100"
+             alt="book image"><h3>Games & Strategy Guides</h3></a></li>
+        </ul>
+      </section>
+
+    </article>
+  </body>
+</html>
diff --git a/amazon/styles.css b/amazon/styles.css
@@ -1 +1,43 @@
 /* Add your CSS here */
+* {
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+h1 {
+  color: #e37811;
+  font-size: 30px;
+  font-weight: 900;
+}
+h1 + p {
+color: #929298;
+font-size: 14px;
+font-weight: 500;
+}
+a {
+  color: #5589cc;
+}
+li a {
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+}
+h2 {
+  padding-bottom: 5px;
+  border-bottom: 2px solid #eceded;
+}
+.shop-selector {
+  display: flex;
+  flex-flow: row wrap;
+}
+li {
+  list-style: none;
+  padding: 20px;
+  width: 120px;
+}
+h3 {
+  font-size: 15px;
+  font-weight: 800;
+  color: #2473c6;
+  text-align: center;
+}
diff --git a/github/index.html b/github/index.html
@@ -1 +1,58 @@
 <!-- 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>
+
+    <header>
+      <nav>
+        <ul class="nav-header">
+          <li><a href="#">About</a></li>
+          <li><a href="#">Careers</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <section class="main-content">
+      <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>
+
+      <nav class="nav-container">
+        <ul class="nav-bar">
+          <li><a href="#">Open Positions</a></li>
+          <li><a href="#">Apprenticeships</a></li>
+          <li><a href="#">Internships</a></li>
+        </ul>
+      </nav>
+    </section>
+
+    <article class="descriptive-content">
+      <article class="article-padding">
+        <img class="pic" src="https://via.placeholder.com/150" alt="3 hands icon.">
+          <h2>A diverse and inclusive workplace</h2>
+          <p>At GitHub, we think that a diversive 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="article-padding">
+        <img class="pic" src="https://via.placeholder.com/150" alt="A world icon.">
+        <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>
+    </article>
+
+
+  </body>
+</html>
diff --git a/github/styles.css b/github/styles.css
@@ -1 +1,68 @@
 /* Add your CSS here */
+* {
+    font-family: sans-serif;
+    box-sizing: border-box;
+}
+a {
+ color: #397fdb;
+
+}
+.nav-header,
+.nav-bar,
+.descriptive-content,
+.main-content,
+.nav-container {
+  display: flex;
+}
+.nav-header {
+  flex-direction: row;
+  justify-content: flex-start;
+}
+.main-content {
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 20px;
+}
+.nav-bar {
+  width: 400px;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.nav-bar a,
+.nav-header a,
+p a {
+  text-decoration: none;
+}
+.nav-bar li,
+.nav-header li {
+  list-style: none;
+}
+.nav-header li:first-child {
+  padding-right: 20px;
+}
+.pic {
+  float: left;
+  margin-top: 20px;
+  margin-right: 20px;
+}
+article h2,
+article p {
+  overflow: hidden;
+}
+.main-content h1 {
+  font-size: 40px;
+  text-align: center;
+  color: #252a2f;
+}
+.main-content p {
+  text-align: center;
+}
+p {
+  color: #61676d;
+}
+.article-padding {
+  padding: 0 10px 0 10px;
+}
+h2 {
+  color: #252a2f;
+}