TheSushiCoders · clare-lee · Jul 17, 2020 · Jul 21, 2020 · Jul 21, 2020 · Jul 24, 2020
diff --git a/AboutUs.html b/AboutUs.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>About Us</title>
+    <link rel="stylesheet" type="text/css" href="index.css" />
+  </head>
+
+</html>
diff --git a/blank-profile-pic.png b/blank-profile-pic.png
diff --git a/filters.html b/filters.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Profile</title>
+        <link rel="stylesheet" type="text/css" href="index.css"  />
+    </head>
+    <body>
+        <h1>Configure filters</h1>
+    </body>
+</html>
diff --git a/grey.jpg b/grey.jpg
diff --git a/home.css b/home.css
@@ -0,0 +1,104 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  height: 100%;
+  overflow: hidden;
+
+}
+
+body {
+    background-image: url(img/blue.jpg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+/* box 1 */
+.box1 {
+    height: 10%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    color: darkgray;
+}
+.box1 li, .box1 a {
+    text-decoration: none;
+    list-style: none;
+    display: inline;
+    color: white;
+}
+.box1 li {
+    padding: 0 1rem;
+    font-size: 1.3rem;
+}
+.logo { /* Want to get logo to be centered below doesnt work*/
+    width: 20%;
+    align-self: center;
+}
+.box1 .back {
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    font-size: 3rem;
+    text-decoration: none;
+    color: white;
+}
+
+/* box2 */
+.box2 { 
+    height: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem 5rem 0 5rem;
+}
+.holder{
+    max-width: 75%;
+    padding: 2rem;
+    border-radius: 1rem;
+    background-color: rgba(0,0,0,0.4);
+    border: 1px solid black;
+    text-align: center;
+
+}
+.holder img {
+    max-width: 90%;
+    border-radius: 1rem;
+    border: 1px solid black;
+}
+
+/* box3 */
+
+.box3 {
+    height: 10%;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+}
+
+.box3 .bottom li {
+    bottom:2rem;
+    cursor: pointer;
+    list-style: none;
+    display: inline;
+    text-decoration: none;
+}
+.box3 .bottom li a {
+    color: white;
+
+}
+.box3 .bottom li button {
+    background: transparent;
+    border: 0;
+    font-size: 3rem;
+    color: white;
+}
diff --git a/home.html b/home.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Home</title>
+        <link rel="stylesheet" type="text/css" href="home.css" />
+        <script src="https://kit.fontawesome.com/867adbb233.js" crossorigin="anonymous"></script>
+    </head>
+
+    <body>
+    <!-- containter start -->
+    <div class="container">
+
+    <!-- box1 naviagtion bar -->
+    <div class="box1">
+        <button class="back"><a href="index.html"><i class="fas fa-arrow-left"></i></a></button>
+        <img src="logo.svg" class="logo" alt="Logo" />
+            <nav>
+                <ul>
+                    <li><a href="#">Recently Seen</a></li>
+                    <li><a href="my_hotels.html">My Hotels</a></li>   
+                </ul>
+            </nav>
+    </div>
+    <!-- box2 image to swipe -->
+    <div class="box2">
+        <div class="holder">
+            <img src="img/hotel-ex.jpg" alt="hotel">
+        </div>
+
+    </div>
+
+    <!-- box3 buttons -->
+    <div class="box3">
+        <ul class="bottom">
+            <li><button class="back"><a href="index.html"><i class="fas fa-times-circle"></i></a></button></li>
+            <li><button class="back"><a href="index.html"><i class="fas fa-plus-circle"></i></a></button></li>
+            <li><button class="back"><a href="index.html"><i class="fab fa-gratipay"></i></a></button></li>
+        </ul>
+    </div>
+
+    <!-- containter end -->
+    </div> 
+
+    </body>
+</html>
diff --git a/img/blue.jpg b/img/blue.jpg
diff --git a/img/home-back.jpg b/img/home-back.jpg
diff --git a/img/hotel-ex.jpg b/img/hotel-ex.jpg
diff --git a/img/nature-background.jpg b/img/nature-background.jpg
diff --git a/img/window-nature.jpg b/img/window-nature.jpg
diff --git a/index.css b/index.css
@@ -1,36 +1,156 @@
 html,
 body {
+  margin: 0px;
+  padding: 0px;
   font-family: sans-serif;
+  height: 100%;
+  overflow: hidden;
+  background-color: #ead2ac;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.container {
+  /* padding: 70px 20px 20px 250px; */
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+/* header */
+img {
+  max-width: 35%;
+  margin-left: 35%;
   color: white;
-  background-color: #121212;
-  text-align: center;
+}
+h1 {
+  max-width: 50%;
+  max-height: 15%;
+  margin-left: 35%;
+  align-items: center;
+  color: white;
+}
+
+/* sidebar */
+/* .wrapper {
+  display: flex;
+  position: relative;
+}
+.sidebar {
+  width: 200px;
+  height: 100%;
+  background: #e6b89c;
+  color: white;
+  padding: 30px 0;
+  position: fixed;
+} */
+
+.navbar {
+  height: 100vh;
+  width: 12rem;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  background: #e6b89c;
+  color: white;
+  padding: 30px 0;
+}
+
+.navbar h1,
+.navbar ul,
+.navbar ul li {
+  width: 100%;
+}
+
+.navbar ul {
+  list-style: none;
+}
+
+.navbar h2 {
+  text-transform: uppercase;
+  text-align: center;
+  margin-bottom: 30px;
+  letter-spacing: 3px;
+}
+.navbar ul li {
+  text-align: left;
+  padding: 15px;
+  padding-left: 45px;
+  border-top: 2px solid #ead2ac;
+  letter-spacing: 3px;
+}
+.nav-links a {
+  color: white;
+  text-decoration: none;
+}
+
+.main-container {
+  width: calc(100vw - 12rem);
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: overlay;
+}
+
+/* footer*/
+.footer {
+  display: flex;
+  justify-content: space-evenly;
+  background: #4281a4;
+  color: lightgray;
+  height: 200px;
+  position: relative;
+  bottom: 0px;
+  padding: 18px;
+}
+
+.footer a {
+  text-decoration: none;
+  color: white;
+}
+
+.footer .column {
+  width: 30%;
   height: 100%;
 }
 
-img {
-  margin-bottom: 2rem;
-  animation: bounce 2s;
-  animation-iteration-count: infinite;
+/* first section of footer */
+.about-us {
+  /* height: 175px;
+  width: 33%; */
 }
+.about-us h2 {
+  /* text-decoration: none; */
+}
+.about-txt {
+  padding: 10px 0;
+}
+
+/* second section of footer */
 
-.app-name {
-  color: #fe3c72;
+.footer .relevant-links .links {
+  padding: 10px 20px;
 }
 
-@keyframes bounce {
-  0%,
-  40% {
-    transform: translateY(0rem);
-  }
-  50% {
-    transform: translateY(-0.5rem);
-  }
-  60%,
-  100% {
-    transform: translateY(0rem);
-  }
+/* third section of footer */
+.contact-list {
+  padding: 10px;
 }
+/* footer end*/
+/* ///index end/// */
+
+/* ---login page--- */
+#login-page {
+  margin: 0;
+  padding: 0;
+  background: url(seashore.jpg);
+  background-repeat: no-repeat;
+  background-size: contain cover;
+  background-position: center;
+}
+/* ///login page end/// */
+
+/* profile page */