ts-cset · ejmoyer · Sep 26, 2019 · Sep 26, 2019 · Sep 26, 2019 · Sep 26, 2019
diff --git a/airbnb/index.html b/airbnb/index.html
@@ -1 +1,37 @@
-<!-- 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">
+</head>
+
+<body>
+  <header>
+    <h1>Book unique homes and experiences.<h1>
+  </header>
+  <main class="centerboxes">
+    <label for="where">Where</label><input type="text" name="where">
+    <label class="center" for="date">Check In<input type="text" name="date"></label>
+    <label class="center" for="date">Check Out<input type="text" name="date"></label>
+    <label for="guests">Guests</label><select name="guests">
+      <option value"">1 guest</option>
+      <option value"two">2 guests</option>
+      <option value"three">3 guests</option>
+      <option value"four">4 guests</option>
+      <option value"five">5 guests</option>
+    </select>
+    <a class="search" href="#">Search</a>
+  </main>
+  <h2>Explore Airbnb</h2>
+  <nav>
+    <ul class="links">
+      <li><a href="#"><img src="http://placekitten.com/100/100" alt="placeholder"></a><a href="#">Homes</a></li>
+      <li><a href="#"><img src="http://placekitten.com/100/100" alt="placeholder"></a><a href="#">Experiences</a></li>
+      <li><a href="#"><img src="http://placekitten.com/100/100" alt="placeholder"></a><a href="#">Restaurants</a></li>
+    </ul>
+  </nav>
+</body>
+
+</html>
diff --git a/airbnb/styles.css b/airbnb/styles.css
@@ -1 +1,87 @@
-/* Add your CSS here */
+html {
+  box-sizing: border-box;
+  width: 1000px;
+}
+
+*, *:before. *:after {
+  box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+header {
+  background-image: url(http://placekitten.com/1000/300/);
+  height: 300px;
+  color: white;
+}
+
+main label {
+  display: block;
+  width: 100%;
+}
+
+main a {
+  display: block;
+}
+
+label:last-child {
+  width: 100%;
+}
+
+select {
+  width: 100%
+}
+
+.search {
+  border: red solid;
+  padding: 1em;
+  width: 100%;
+  margin-top: 1em;
+  background-color: red;
+  text-decoration: none;
+  text-align: center;
+}
+.centerboxes {
+  margin: 1em 0 1em 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.centerboxes label {
+  width: 50%;
+}
+
+.centerboxes input {
+  display: block;
+  width: 100%;
+}
+
+.center {
+  width: 100%
+}
+
+.center input {
+  display: block;
+  width: 100%;
+}
+
+.links {
+  display: flex;
+  justify-content: space-between;
+  list-style-type: none;
+}
+
+.links li {
+  display: flex;
+  width: 33%;
+  margin-left: 1em;
+}
+
+.links a:last-child {
+  border-top: solid grey;
+  border-right: solid grey;
+  border-bottom: solid grey;
+  height: 94px;
+  width: 100%;
+  text-decoration: none;
+}
diff --git a/amazon/index.html b/amazon/index.html
@@ -1 +1,28 @@
-<!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Amazon Books: Computer and Technology Books</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <header>
+      <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>
+    </header>
+    <article>
+    <h2>Shop by category<h2>
+      <ul class="links">
+        <li><img src="http://placekitten.com/300/300" alt="Placeholder Cat"><a href="#">Programming</a></li>
+        <li><img src="http://placekitten.com/300/300" alt="Placeholder Cat"><a href="#">Computer Science</a></li>
+        <li><img src="http://placekitten.com/300/300" alt="Placeholder Cat"><a href="#">Programming Languages</a></li>
+        <li><img src="http://placekitten.com/300/300" alt="Placeholder Cat"><a href="#">Networking &amp; Cloud Computing</a></li>
+        <li><img src="http://placekitten.com/300/300" alt="Placeholder Cat"><a href="#">Security &amp; Encryption</a></li>
+        <li><img src="http://placekitten.com/300/300" alt="Placeholder Cat"><a href="#">Software</a></li>
+        <li><img src="http://placekitten.com/300/300" alt="Placeholder Cat"><a href="#">Operating Systems</a></li>
+        <li><img src="http://placekitten.com/300/300" alt="Placeholder Cat"><a href="#">Games &amp; Strategy Guides</a></li>
+      </ul>
+    </article>
+  </body>
+</html>
diff --git a/amazon/styles.css b/amazon/styles.css
@@ -1 +1,43 @@
-/* Add your CSS here */
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+header p {
+  color: grey;
+  font-size: 14px;
+}
+
+h1 {
+  color: orange;
+}
+
+h2 {
+  padding: 0;
+  margin: 0;
+}
+.links {
+  display: flex;
+  list-style: none;
+  flex-wrap: wrap;
+  margin: 0;
+  border-top: 2px solid lightgrey;
+  padding-top: 1em;
+}
+
+.links li {
+  width: 25%;
+  padding-bottom: 1em;
+}
+
+.links a {
+  text-decoration: none;
+  font-size: 16px;
+}
+
+.links img {
+  width: 150px;
+}
diff --git a/github/index.html b/github/index.html
@@ -1 +1,46 @@
-<!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <title>Github About: Careers</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <header>
+    <h5><a href="#">About</a> /Careers</h5>
+  </header>
+  <article class="article">
+    <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>
+      <a href="#">Open positions</a>
+      <a href="#">Apprenticeships</a>
+      <a href="#">Internships</a>
+    </nav>
+  </article>
+
+<article class="midsection">
+  <article>
+    <img src="http://placekitten.com/150/150" alt="Placeholder Kitten">
+    <h4>A diverse and inclusive workplace</h4>
+    <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>
+    <img src="http://placekitten.com/150/150" alt="Placeholder Kitten">
+    <h4>Work happier</h4>
+    <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,38 @@
-/* Add your CSS here */
+* {
+  box-sizing: border-box;
+}
+
+.article {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  margin-bottom: 3em;
+}
+
+.article h1 {
+  font-size: 50px;
+}
+
+.article p {
+  font-size: 20px;
+}
+
+.article a {
+  padding: 1em;
+  text-decoration: none;
+}
+
+.midsection {
+  display: flex;
+  flex-direction: row;
+}
+
+.midsection article img {
+  float: left;
+  padding: 1em;
+}
+
+.midsection article a {
+  text-decoration: none;
+}
diff --git a/instagram/index.html b/instagram/index.html
@@ -1 +1,55 @@
-<!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <title>Instagram: About Us</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body class="body">
+  <aside class="aside">
+    <h2>About</h2>
+    <ol>
+      <li><a href="#">Company</a></li>
+      <li><a href="#">Press</a></li>
+      <li><a href="#">Jobs</a></li>
+    </ol>
+    <h2>Legal</h2>
+    <ol>
+      <li><a href="#">Terms</a></li>
+      <li><a href="#">Privacy</a></li>
+      <li><a href="#">Platform</a></li>
+      <li><a href="#">Libraries</a></li>
+    </ol>
+  </aside>
+  <article class="article">
+    <h1>About Us</h1>
+    <h4>The Team</h4>
+    <h3>Kevin Systrom (CEO, co-founder)</h3>
+    <p><strong>Kevin Systrom</strong><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 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 brands, to teens, musicians and
+      anyone with a 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 graduated from Stanford University with
+      a BS in Management Science & Engineering and serves on the boards of
+      Walmart and KCRW.</p>
+    <h3>Mike Krieger (CTO, co-founder)</h3>
+    <p><strong>Mike Krieger</strong><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 São 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>
diff --git a/instagram/styles.css b/instagram/styles.css
@@ -1 +1,44 @@
-/* Add your CSS here */
+html {
+  padding: 1em;
+  box-sizing: border-box;
+}
+
+.body {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.aside {
+  width: 25%;
+  border: thin solid lightgrey;
+  border-right: none;
+  margin: 1em 0 0 1em;
+  padding-left: .5em;
+}
+
+.article {
+  border: thin solid lightgrey;
+  width: 75%;
+  margin: 1em 0 1em 0;
+  padding: 1em;
+}
+
+h1 {
+  font-size: 2em;
+}
+
+h2 {
+  text-transform: uppercase;
+}
+
+ol {
+  list-style-type: none;
+}
+
+li a {
+  display: block;
+  margin: .5em;
+  text-decoration: none;
+  color: black;
+}