ts-cset · tjusticelee · Sep 26, 2019 · Sep 26, 2019 · Sep 26, 2019 · Sep 27, 2019
diff --git a/airbnb/index.html b/airbnb/index.html
@@ -1 +1,61 @@
 <!-- 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>
+    <h1>Book unique homes and experiences</h1>
+
+    <section class="where">
+      <label for="where">Where <input type="text" name="" value="Anywhere"></label>
+    </section>
+
+    <section>
+      <section>
+        <label for="check in">Check in <input type="text" name="" value="mm/dd/yyyy"></label>
+      </section>
+
+      <section>
+        <label for="checkout">Check out <input type="text" name="" value="mm/dd/yyyy"></label>
+      </section>
+    </section>
+
+    <section class="guest">
+      <label for="guest">Guest <input type="text" name="" value="1 guest"></label>
+    </section>
+
+    <button type="button" name="button">Search</button>
+
+    <section>
+
+      <section>
+        <h2>Explore Airbnb</h2>
+      </section>
+
+      <section>
+        <img src="http://placekitten.com/200/300" alt="">
+        <p>Homes</p>
+      </section>
+
+      <section>
+        <img src="http://placekitten.com/200/300" alt="">
+        <p>Experiences</p>
+      </section>
+
+      <section>
+        <img src="http://placekitten.com/200/300" alt="">
+        <p>Restruants</p>
+      </section>
+
+    </section>
+
+
+    </body>
+
+
+
+</html>
diff --git a/airbnb/styles.css b/airbnb/styles.css
@@ -1 +1,16 @@
 /* Add your CSS here */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+h1 {
+  border-bottom: solid thin black;
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+
+.where, .guest {
+  display: flex;
+}
diff --git a/amazon/index.html b/amazon/index.html
@@ -1 +1,67 @@
 <!-- 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>
+  <section>
+      <h1>Computer & Technology Books</h1>
+      <p>Browse a wide selection of programming guides, Android Resources
+      and Java books.</p>
+</section>
+
+  <h2>Shop by category</h2>
+
+  <section class="books">
+
+    <article class="programming">
+      <img src="http://placekitten.com/200/300" alt="cat">
+      <p>Programming</p>
+    </article>
+
+    <article class="Computer Science">
+      <img src="http://placekitten.com/200/300" alt="cat">
+      <p>Computer Science</p>
+    </article>
+
+    <article class="Programming Languages">
+      <img src="http://placekitten.com/200/300" alt="cat">
+      <p>Programming Languages</p>
+    </article>
+
+    <article class="Netowrking">
+      <img src="http://placekitten.com/200/300" alt="cat">
+      <p>Networking & Cloud Computing</p>
+    </article>
+  </section>
+
+  <section class="books2">
+    <article class="Security">
+      <img src="http://placekitten.com/200/300" alt="cat">
+      <p>Security & Encryption</p>
+    </article>
+
+    <article class="Software">
+      <img src="http://placekitten.com/200/300" alt="cat">
+      <p>Software</p>
+    </article>
+
+    <article class="Operating">
+      <img src="http://placekitten.com/200/300" alt="cat">
+      <p>Operating Systems</p>
+    </article>
+
+    <article class="Games">
+      <img src="http://placekitten.com/200/300" alt="cat">
+      <p>Games & strategy guides</p>
+    </article>
+
+  </section>
+
+
+  </body>
+</html>
diff --git a/amazon/styles.css b/amazon/styles.css
@@ -1 +1,36 @@
 /* Add your CSS here */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+
+}
+
+h2 {
+  margin-top: 25px;
+  margin-bottom: 25px;
+  border-bottom: solid thin black;
+}
+
+body {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.books {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.books2 {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  margin-top: 100px;
+}
diff --git a/github/index.html b/github/index.html
@@ -1 +1,55 @@
-<!-- Add your HTML here -->
+<!-- Add your github 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>
+    About/Careers
+  </header>
+
+  <section class="top">
+    <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>
+      <ul>
+        <li>Open position</li>
+        <li>Appreniceships</li>
+        <li>Internships</li>
+      </ul>
+    </nav>
+  </section>
+
+    <section class="text">
+
+      <article>
+        <img src="http://placekitten.com/200/300" alt="">
+        <h2 class="head1">A diverse and inclusive workplace</h2>
+        <p class="text1">At GitHub, we think that a diverse company is a strong
+        company, and we work harder to foster a supportive and
+        welcoming workplace. Learn more about our commitment to
+        diversity and inclusion and see our current demographic
+        data.</p>
+      </article>
+
+      <article>
+        <img src="http://placekitten.com/200/300" alt="">
+        <h2 class="head2">Work happier</h2>
+        <p class="text2">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 work wherever you're happiest.</p>
+      </article>
+
+    </section>
+  </body>
+</html>
diff --git a/github/styles.css b/github/styles.css
@@ -1 +1,55 @@
 /* Add your CSS here */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.top {
+  margin-left: 300px;
+  margin-right: 300px;
+}
+
+h1 {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+  flex-wrap: wrap;
+  font-size: 75px;
+}
+
+p {
+  margin-top: 25px;
+  display: flex;
+  justify-content: center;
+}
+
+ul {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+
+li {
+  margin-left: 25px;
+  margin-right: 25px;
+}
+
+img {
+  float: left;
+  width: 150px;
+  height: 150px;
+  margin-right: 25px;
+}
+
+.text {
+  display: flex;
+  flex-direction: row;
+
+}
+
+.head1, .text1, .head2, .text2{
+  margin-left: 25px;
+}
diff --git a/instagram/index.html b/instagram/index.html
@@ -1 +1,77 @@
 <!-- Add your HTML here -->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Instagram mock up</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+
+
+  <body>
+
+    <section class="peeps">
+    <h1>About Us</h1>
+    <h2>The Team</h2>
+
+    <article class="kevin">
+      <h3>Kevin Systrom (CEO, co-founder)</h3>
+
+      <p>Kevin Systrom (@kevin) 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 ocerall 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 kater
+      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>
+    </article>
+
+    <article class="mike">
+      <h3>Mike Krieger (CTO, co-founder)</h3>
+
+      <p>Mike Krieger (@mikeyk) 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 natice of Sao 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>
+
+    </section>
+
+    <section class="navi">
+
+      <div class="about">
+        <nav>
+          <ul>
+            <li>About</li>
+            <li><a href="#">Company</a></li>
+            <li><a href="#">Press</a></li>
+            <li><a href="#">Jobs</a></li>
+          </ul>
+        </nav>
+      </div>
+
+      <div class="legal">
+        <nav>
+          <ul>
+            <li>Legal</li>
+            <li><a href="#">Terms</a></li>
+            <li><a href="#">Privacy</a></li>
+            <li><a href="#">Platform</a></li>
+            <li><a href="#">Libraries</a></li>
+          </ul>
+        </nav>
+      </div>
+
+    </section>
+  </body>
+</html>