ts-cset · kdmundale · Sep 26, 2019 · Sep 26, 2019 · Sep 26, 2019 · Sep 26, 2019
diff --git a/airbnb/index.html b/airbnb/index.html
@@ -1 +1,52 @@
-<!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <link href="styles.css" rel="stylesheet" type="text/css">
+  <title>AirBnB</title>
+</head>
+
+<body>
+  <header>
+    <h1>Book unique homes and experiences.</h1>
+  </header>
+  <main>
+    <form action="" method="get" class="form">
+      <div class="form">
+        <label for="place">Where</label>
+        <p><input type="text" name="where" id="where" required></p>
+        <div class="form">
+          <div class="dates">
+            <div class="check_in_box">
+              <label for="check_in">Check In</label>
+              <p><input type="date" name="check_in" id="check_in" required></p>
+            </div>
+            <div class="check_in_box">
+              <label for="check_out">Check Out</label>
+              <p><input type="date" name="check_out" id="check_out" required></p>
+            </div>
+          </div>
+          <label for="guests">Guests</label>
+          <p><input type="number" name="guests" id="guests" required></p>
+        </div>
+        <imput class="button" type="submit" value="Search">
+      </div>
+      <footer>
+        <a href="#">
+          <img src="http://via.placeholder.com">
+          <p>Homes</p>
+        </a>
+        <a href="#">
+          <img src="http://via.placeholder.com">
+          <p>Expieriences</p>
+        </a>
+        <a href="#">
+          <img src="http://via.placeholder.com">
+          <p>Restaurants</p>
+        </a>
+        </footer>
+</body>
+
+</html><!-- Add your HTML here -->
diff --git a/airbnb/styles.css b/airbnb/styles.css
@@ -1 +1,44 @@
-/* Add your CSS here */
+* {
+  box-sizing: border-box;
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+header {
+  border-bottom: 1px solid grey;
+  padding: 2em 0 2em 0;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  margin: 3em 0.5em 3em 0.5em;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+.dates {
+  display: flex;
+  flex-direction: row;
+  margin: 1em 0em 1em 0em;
+}
+
+.check_in_box {
+  display: flex;
+  flex-direction: column;
+  width: 48%;
+}
+
+footer {
+  display: flex;
+  flex-direction: row;
+  margin: 2em 0.5em 2em 0.5em;
+}
+
+a {
+  width: 32%;
+}
diff --git a/amazon/index.html b/amazon/index.html
@@ -1 +1,55 @@
-<!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <link href="styles.css" rel="stylesheet" type="text/css">
+  <title>Amazon</title>
+</head>
+
+<body>
+  <header>
+    <div class="top">
+      <h1>Computer & Technology Books</h1>
+      <p class="text">Browse a wide selection of <a href="#">programming guides</a>, <a href="#">Android resources</a>, and <a href="#">Java books</a>.</p>
+    </div>
+    <h2>Shop by category</h2>
+  </header>
+  <main>
+    <a class="products" href="#">
+      <img src="https://via.placeholder.com/150">
+      <p>Programming</p>
+    </a>
+    <a class="products" href="#">
+      <img src="https://via.placeholder.com/150">
+      <p>Computer Science</p>
+    </a>
+    <a class="products" href="#">
+      <img src="https://via.placeholder.com/150">
+      <p>Programming Languages</p>
+    </a>
+    <a class="products" href="#">
+      <img src="https://via.placeholder.com/150">
+      <p>Networking & Cloud Computing</p>
+    </a>
+    <a class="products" href="#">
+      <img src="https://via.placeholder.com/150">
+      <p>Security & Encryption</p>
+    </a>
+    <a class="products" href="#">
+      <img src="https://via.placeholder.com/150">
+      <p>Software</p>
+    </a>
+    <a class="products" href="#">
+      <img src="https://via.placeholder.com/150">
+      <p>Operating Systems</p>
+    </a>
+    <a class="products" href="#">
+      <img src="https://via.placeholder.com/150">
+      <p>Games & Strategy Guides</p>
+    </a>
+  </main>
+</body>
+
+</html>
diff --git a/amazon/styles.css b/amazon/styles.css
@@ -1 +1,60 @@
-/* Add your CSS here */
+* {
+  box-sizing: border-box;
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+main {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 1em;
+}
+
+header {
+  border-bottom: 1px solid lightgrey;
+}
+
+.top {
+  padding-bottom: 2em;
+}
+
+p.text {
+  color: #818585;
+}
+
+h1 {
+  color: orange;
+  margin-bottom: 10px;
+}
+
+a.products {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  justify-content: space-around;
+  padding-bottom: 10px;
+  text-align: left;
+  text-decoration: none;
+}
+
+img {
+  height: 150px;
+  width: 150px;
+}
+
+header {
+  padding-bottom: 15px;
+}
+
+.products {
+  height: 14em;
+  width: 25%;
+}
diff --git a/github/index.html b/github/index.html
@@ -1 +1,41 @@
-<!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <link href="styles.css" rel="stylesheet" type="text/css">
+  <title></title>
+</head>
+
+<body>
+  <header>
+    <p><a href="#">About</a> / <a href="#">Careers</a></p>
+  </header>
+  <main>
+    <div class="text">
+      <h1>Come help us make collaboration even better</h1>
+      <h2>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.</h2>
+    </div>
+    <div class="links">
+      <a class="button" href="#">Open positions</a>
+      <a class="button" href="#">Apprenticeships</a>
+      <a class="button" href="#">Internships</a>
+    </div>
+    <footer>
+      <img src="http://via.placeholder.com" />
+      <div class="foot">
+        <h3>A diverse and inclusive workplace</h3>
+        <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 demograpic
+            data</a>.</p>
+      </div>
+      <img src="http://via.placeholder.com" />
+      <div class="foot">
+        <h3>Work happier</h3>
+        <p>Build amazing things with autonomy, self-direction, and a healthy work-life balance. We offer flexible work schedules for all 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>
+    </footer>
+</body>
+
+</html>
diff --git a/github/styles.css b/github/styles.css
@@ -1 +1,74 @@
-/* Add your CSS here */
+* {
+  box-sizing: border-box;
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+header {
+  display: flex;
+  flex-direction: row;
+  font-size: 16px;
+  margin-top: 1em;
+  margin-left: 1em;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.text {
+  margin: 10em 5em 3em 5em;
+  text-align: center;
+}
+
+h1 {
+  margin-bottom: 30px;
+  font-size: 3.5em;
+}
+
+.links {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  padding: 30px;
+}
+
+footer {
+  display: flex;
+  flex-direction: row;
+}
+
+a {
+  text-decoration: none;
+}
+
+img {
+  height: 100px;
+  width: 100px;
+}
+
+.button {
+  padding: 20px;
+}
+
+h3 {
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+h3 {
+  margin-left: 1em;
+}
+
+.foot>p {
+  margin-left: 1em;
+  padding-bottom: 5em;
+}
diff --git a/instagram/index.html b/instagram/index.html
@@ -1 +1,44 @@
-<!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <link href="styles.css" rel="stylesheet" type="text/css">
+  <title>Instagram</title>
+</head>
+
+<body>
+  <div class="sidemenu">
+    <h4>About</h4>
+    <ul class="sidebar">
+      <li><a href="#" class="side">Company</a></li>
+      <li><a href="#" class="side">Press</a></li>
+      <li><a href="#" class="side">Jobs</a></li>
+    </ul>
+    <h4>Legal</h4>
+    <ul class="sidebar">
+      <li><a href="#" class="side">Terms</a></li>
+      <li><a href="#" class="side">Privacy</a></li>
+      <li><a href="#" class="side">Platform</a></li>
+      <li><a href="#" class="side">Libraries</a></li>
+    </ul>
+  </div>
+  <main>
+    <h1>About Us</h1>
+    <h2>The Team</h2>
+    <h3>Kevin Systrom &#40;CEO, co-founder&#41;</h3>
+    <p><strong>Kevin Systrom &#40;</strong><a href="#">&#64;kevin</a>&#41; 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 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 &#40;CTO, co-founder&#41;</h3>
+    <p><strong>Mike Krieger</strong> &#40;<a href="#">&#64;mikeyk</a>&#41; 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&atilde;o Paulo, Brazil, Mike holds an MS in Symbolic Systems from STanford University. Prior to founding Instagram, he worked at Meebo as a user expierience designer and front-end engineer.</p>
+  </main>
+</body>
+
+</html>