ts-cset · kevinlueke · Sep 26, 2019 · Sep 26, 2019 · Sep 26, 2019 · Oct 1, 2019
diff --git a/airbnb/index.html b/airbnb/index.html
@@ -1 +1,37 @@
-<!-- Add your HTML here -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Airbnb</title>
+    <link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8">
+  </head>
+  <body>
+    <h1>Book unique homes and experiences.</h1>
+      <section class="form">
+          <label class="where">Where</label>
+          <input type="text" placeholder="Anywhere"/>
+          <div class="checkin-out">
+            <div class="checkinside">
+              <label class="check-in">Check In</label>
+              <input type="text" placeholder= "mm/dd/yy"/>
+            </div>
+            <div class="checkinside">
+              <label class="check-out">Check Out</label>
+              <input type="text" placeholder= "mm/dd/yy"/>
+            </div>
+          </div>
+          <label class="guest">Guests</label>
+          <input type="text" placeholder= "1 Guest"/>
+      </section>    
+    <a class="search" href="#" target="_blank">Search</a>
+    <section class="bottom">    
+      <h2>Explore Airbnb</h2>
+      <div class="click">
+        <a href="#" target="_blank" class="b1"><img class="b1" src="http://placekitten.com/150/100" alt="Cat"/>Homes</a>
+        <a href="#" target="_blank" class="b2"><img class="b2" src="http://placekitten.com/150/100" alt="Cat"/>Experiences</a>
+        <a href="#" target="_blank" class="b3"><img class="b3" src="http://placekitten.com/150/100" alt="Cat"/>Restraunts</a>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/airbnb/styles.css b/airbnb/styles.css
@@ -1 +1,46 @@
-/* Add your CSS here */
+body {
+  padding: 10px 0;
+}
+
+h1 {
+color: white;
+background-image: url(http://placekitten.com/600/1200);
+
+}
+
+section.form {
+  padding: 10px 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.checkinside {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 50%;
+}
+
+.checkin-out {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+section.bottom {
+  display: flex;
+  flex-direction: column;
+}
+
+.b1, .b2, .b3 {
+  border: 1px solid grey;
+}
+
+a.search {
+  text-decoration: none;
+  background-color: red;
+  color: white;
+  padding: 10px 0;
+  display: flex;
+  justify-content: center;
+}
diff --git a/amazon/index.html b/amazon/index.html
@@ -1 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='UTF-8'/>
+    <title>Positioning Is Easy!</title>
+    <link href='styles.css' rel='stylesheet'/>
+  </head>
+  <body>
+    <article class="top">
+        <h1>Computer & Technolgy 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>
+        <h2>Shop by category</h2>
+    </article>
+
+    <article class="bottom">
+        <a class="selections" href=""><img alt="book" src="book.jpeg">Programming</a>
+        <a class="selections" href=""><img alt="book" src="book.jpeg">Computer Science</a>
+        <a class="selections" href=""><img alt="book" src="book.jpeg">Programming Languages</a>
+        <a class="selections" href=""><img alt="book" src="book.jpeg">Networking & Cloud Compter</a>
+        <a class="selections" href=""><img alt="book" src="book.jpeg">Security & Encryption</a>
+        <a class="selections" href=""><img alt="book" src="book.jpeg">Software</a>
+        <a class="selections" href=""><img alt="book" src="book.jpeg">Operating Systems</a>
+        <a class="selections" href=""><img alt="book" src="book.jpeg">Games & Strategy Guides</a>
+      </article>
+
+
+ </body>
 <!-- Add your HTML here -->
diff --git a/amazon/styles.css b/amazon/styles.css
@@ -1 +1,29 @@
-/* Add your CSS here */
+
+* {
+    box-sizing: content-box;
+}
+body {
+width: 1000px;
+}
+h1 {
+    font-size: 2rem;
+    color: orange;
+}
+
+p {
+    color: grey;
+}
+h2 {
+    border-bottom: 1px solid lightgrey;
+}
+
+.bottom {
+    display: flex;
+    width: 600px;
+    flex-wrap: wrap;
+}
+
+.selections {
+    width: 130px;
+    padding: 10px;
+}
diff --git a/instagram/index.html b/instagram/index.html
@@ -1 +0,0 @@
-<!-- Add your HTML here -->

diff --git a/instagram/styles.css b/instagram/styles.css
@@ -1 +0,0 @@
-/* Add your CSS here */

diff --git a/stevens-college/index.html b/stevens-college/index.html
@@ -1 +1,25 @@
-<!-- Add your HTML here -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Computer Software Engineering Technology</title>
+    <link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8">
+  </head>
+  <body>
+    <main>
+      <h1>Computer Software Engineering Technology</h1>
+      <img src="http://placekitten.com/g/600/300" alt="Picture of a kitten">
+      <nav class="menu">
+        <a href="#" target="_blank" class="menu">SCHEDULE</a>
+        <a href="#" target="_blank" class="menu">FACULTY</a>
+        <a href="#" target="_blank" class="menu">TOOL LIST</a>
+      </nav>
+      <article>
+      Computers have become a major factor in the development and operation of the modern industry.
+      From providing means of communications, to operating machines, to facilitating international 
+      commerce, to systems animation, computers and their related software programs makes things possible.
+      </article>
+    </main>
+  </body>
+</html>
diff --git a/stevens-college/styles.css b/stevens-college/styles.css
@@ -1 +1,37 @@
-/* Add your CSS here */
+body{
+  background-color: #fafafa;
+}
+
+main {
+  width: 600px;
+}
+
+h1 {
+  position: relative;
+  font-size: 4rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  margin: 0;
+}
+
+img {
+  display: block;
+  margin: 0 auto;
+}
+
+.menu {
+  display: flex;
+  justify-content: center; 
+}
+
+a {
+  color: white;
+  text-decoration: none;
+  background-color: darkred;
+  padding: 1rem 2rem;
+  margin: 1rem;
+}
+
+article {
+  line-height: 1.25;
+}