ts-cset · BrendanHorst · Sep 25, 2019 · Sep 25, 2019 · Sep 26, 2019 · Sep 26, 2019
diff --git a/airbnb/index.html b/airbnb/index.html
@@ -1 +1,50 @@
-<!-- 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>
+
+  <form action="index.html" method="get">
+
+    <label for="where">Where</label>
+    <input type="text" name="where" placeholder="Anywhere">
+
+    <section>
+      <section>
+        <label for="check-in">Check in</label>
+        <input type="text" name="check-in" placeholder="mm/dd/yyyy">
+      </section>
+
+      <section>
+        <label for="check-out">Check out</label>
+        <input type="text" name="check-out" placeholder="mm/dd/yyyy">
+      </section>
+    </section>
+
+    <label for="guests">Guests</label>
+    <input type="text" name="guests" placeholder="1 guest">
+
+    <input class="search" type="submit" name="search" value="Search">
+  </form>
+
+  <section class="explore">
+    <h2>Explore Airbnb</h2>
+
+    <ul>
+      <li><a href="#"><img src="https://placekitten.com/100/75" alt="A room interior">Homes</a></li>
+      <li><a href="#"><img src="https://placekitten.com/100/75" alt="People riding bikes and having a good time">Experiences</a></li>
+      <li><a href="#"><img src="https://placekitten.com/100/75" alt="Picture of a meal">Restaurants</a></li>
+    </ul>
+  </section>
+</body>
+
+</html>
diff --git a/airbnb/styles.css b/airbnb/styles.css
@@ -1 +1,73 @@
-/* Add your CSS here */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  background-color: gray;
+  background-image: url("https://placekitten.com/2000/100");
+  height: 6rem;
+}
+
+h1{
+  color: white;
+  margin-left: 10px;
+}
+
+label {
+  display: block;
+  margin-top: 2rem;
+  text-transform: uppercase;
+  color: gray;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
+
+input {
+  display: block;
+  width: 100%;
+  height: 3rem;
+  font-size: 1rem;
+}
+
+form > section {
+  display: flex;
+}
+section > section {
+  width: 50%;
+}
+
+.search {
+  background-color: #ff5c5c;
+  color: white;
+  margin: 1rem 0 1rem 0;
+}
+
+.explore ul {
+  display: flex;
+  padding-left: 0;
+  justify-content: space-around;
+}
+
+.explore li {
+  width: 30%;
+  list-style: none;
+  border: thin solid lightgray;
+  height: 75px;
+}
+
+.explore li a {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: gray;
+  font-weight: bold;
+}
diff --git a/amazon/index.html b/amazon/index.html
@@ -1 +1,47 @@
-<!-- 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">
+</head>
+
+<body>
+  <main>
+
+    <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>
+
+    <section>
+
+      <h2>Shop by category</h2>
+
+      <ul>
+        <li><img src="https://placekitten.com/100/150" alt="A programming book">
+          <a href="#">Programming</a></li>
+        <li><img src="https://placekitten.com/100/150" alt="A computer science book">
+          <a href="#">Computer Science</a></li>
+        <li><img src="https://placekitten.com/100/150" alt="A programming language book">
+          <a href="#">Programming Languages</a></li>
+        <li><img src="https://placekitten.com/100/150" alt="A networking & cloud computing book">
+          <a href="#">Networking & Cloud Computing</a></li>
+        <li><img src="https://placekitten.com/100/150" alt="A security & encryption book">
+          <a href="#">Security & Encryption</a></li>
+        <li><img src="https://placekitten.com/100/150" alt="A software book">
+          <a href="#">Software</a></li>
+        <li><img src="https://placekitten.com/100/150" alt="An operating systems book">
+          <a href="#">Operating Systems</a></li>
+        <li><img src="https://placekitten.com/100/150" alt="A strategy guide">
+          <a href="#">Games $ Strategy Guides</a></li>
+      </ul>
+    </section>
+  </main>
+
+</body>
+
+</html>
diff --git a/amazon/styles.css b/amazon/styles.css
@@ -1 +1,42 @@
-/* Add your CSS here */
+*, *::after, *::before {
+  box-sizing: border-box;
+}
+
+main {
+  font-family: sans-serif;
+  padding: 10px;
+}
+
+h1 {
+  color: #ff6a00;
+  margin-bottom: 1rem;
+}
+
+p {
+  color: gray;
+  font-size: .8rem;
+}
+
+h2 {
+  margin-top: 2rem;
+  border-bottom: thin solid lightgray;
+  padding-bottom: 1rem;
+}
+
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+}
+
+li {
+  list-style: none;
+  width: 25%;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+li a {
+  display: block;
+  text-decoration: none;
+  font-weight: bold;
+}
diff --git a/github/index.html b/github/index.html
@@ -1 +1,52 @@
-<!-- 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">
+</head>
+
+<body>
+  <header>
+    <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>
+  </header>
+
+  <nav>
+    <ul>
+      <li><a href="#">About</a></li>
+      <li class="current">Careers</li>
+    </ul>
+  </nav>
+
+  <section class="links">
+    <ul>
+      <li><a href="#">Open positions</a></li>
+      <li><a href="#">Apprenticeships</a></li>
+      <li><a href="#">Internships</a></li>
+    </ul>
+  </section>
+
+  <section class="info">
+    <article class="diversity">
+      <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="happy">
+      <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>
+  </section>
+</body>
+
+</html>
diff --git a/github/styles.css b/github/styles.css
@@ -1 +1,100 @@
-/* Add your CSS here */
+*, *::after, *::before {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+}
+
+h1 {
+  text-align: center;
+  margin-top: 8rem;
+  font-size: 3rem;
+  width: 60%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+li {
+  display: inline;
+  list-style: none;
+}
+ul {
+  padding-left: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+p {
+  color: gray;
+}
+
+header p {
+  width: 70%;
+  font-size: 1.5rem;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+nav {
+  position: absolute;
+  top: 0;
+}
+
+.current::before{
+  content: "/ ";
+  color: gray;
+}
+
+.links li{
+  display: block;
+  width: 30%;
+  text-align: center;
+}
+.links ul{
+  display: flex;
+  width: 50%;
+  margin: 3rem auto 4rem auto;
+  justify-content: space-around;
+}
+
+.links a {
+  font-size: 1.2rem;
+}
+
+h2 {
+  font-weight: normal;
+}
+
+.info {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.info::before {
+  content: url("https://placekitten.com/100/100");
+  order: 1;
+  margin: 1rem;
+}
+
+.diversity {
+  width: 30%;
+  order: 2;
+  margin-right: 2rem;
+}
+
+.info::after {
+  content: url("https://placekitten.com/100/100");
+  order: 3;
+  margin: 1rem;
+  margin:left: 2rem;
+}
+
+.happy {
+  width: 30%;
+  order: 4;
+}