diff --git a/AboutUs.html b/AboutUs.html new file mode 100644 index 0000000..a99ae97 --- /dev/null +++ b/AboutUs.html @@ -0,0 +1,8 @@ + + + + About Us + + + + \ No newline at end of file diff --git a/blank-profile-pic.png b/blank-profile-pic.png new file mode 100644 index 0000000..b398aa2 Binary files /dev/null and b/blank-profile-pic.png differ diff --git a/filters.html b/filters.html new file mode 100644 index 0000000..11cb0d8 --- /dev/null +++ b/filters.html @@ -0,0 +1,10 @@ + + + + Profile + + + +

Configure filters

+ + \ No newline at end of file diff --git a/grey.jpg b/grey.jpg new file mode 100644 index 0000000..a4877ab Binary files /dev/null and b/grey.jpg differ diff --git a/home.css b/home.css new file mode 100644 index 0000000..fe240e2 --- /dev/null +++ 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 new file mode 100644 index 0000000..3489920 --- /dev/null +++ b/home.html @@ -0,0 +1,45 @@ + + + + Home + + + + + + +
+ + +
+ + + +
+ +
+
+ hotel +
+ +
+ + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/img/blue.jpg b/img/blue.jpg new file mode 100644 index 0000000..99d95cd Binary files /dev/null and b/img/blue.jpg differ diff --git a/img/home-back.jpg b/img/home-back.jpg new file mode 100644 index 0000000..81124c2 Binary files /dev/null and b/img/home-back.jpg differ diff --git a/img/hotel-ex.jpg b/img/hotel-ex.jpg new file mode 100644 index 0000000..58ccb88 Binary files /dev/null and b/img/hotel-ex.jpg differ diff --git a/img/nature-background.jpg b/img/nature-background.jpg new file mode 100644 index 0000000..84121dc Binary files /dev/null and b/img/nature-background.jpg differ diff --git a/img/window-nature.jpg b/img/window-nature.jpg new file mode 100644 index 0000000..3ec23bb Binary files /dev/null and b/img/window-nature.jpg differ diff --git a/index.css b/index.css index 533d4d6..8f106f3 100644 --- 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 */ diff --git a/index.html b/index.html index a12445d..7abb048 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,90 @@ Lodger + - -

Lodger starter template

+ +
+ + + +
+ +

Lodger Match with your perfect lodging

+

---Insert Something---

+ + +
+
+ diff --git a/login.css b/login.css new file mode 100644 index 0000000..aff71fe --- /dev/null +++ b/login.css @@ -0,0 +1,14 @@ +html { + margin: 0px; + padding: 0px; + font-family: sans-serif; +} + +#login-page { + margin: 0; + padding: 0; + background: url(seashore.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center top; +} diff --git a/login.html b/login.html new file mode 100644 index 0000000..2dc2e93 --- /dev/null +++ b/login.html @@ -0,0 +1,12 @@ + + + + Login + + + +
+

Login

+
+ + diff --git a/my_hotels.html b/my_hotels.html new file mode 100644 index 0000000..4e9d967 --- /dev/null +++ b/my_hotels.html @@ -0,0 +1,10 @@ + + + + My List + + + +

Liked Lodgings

+ + \ No newline at end of file diff --git a/profile.css b/profile.css new file mode 100644 index 0000000..91f9560 --- /dev/null +++ b/profile.css @@ -0,0 +1,85 @@ +html, +body { + margin: 0px; + padding: 0px; + font-family: sans-serif; + height: 100%; + overflow: hidden; + align-items: center; + min-height: 100vh; +} + +body { + background-image: url(grey.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: bottom; +} + +.container { + height: 100%; + padding: 0; + margin: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; +} + +.page { + width: 40%; + height: 75%; + padding: 2%; + background-color: rgba(0,0,0,0.4); + border-radius: 1rem; + border: 1px solid rgb(88, 96, 105); /* dunno if it looks uglier with it or not*/ + text-align: center; + position: fixed; /* only added to get edit button position to bottom left + relative to page and not the entire screen*/ +} + +img { + max-width: 35%; + border-radius: 4%; +} +.page h1, +.page h2, +.page h4 { + font-weight: 200; + letter-spacing: 1px; + margin: 1%; + color: lightgray; +} + +p{ + font-size: 100%; + letter-spacing: 2px; + color: lightgray; + text-align: left; +} + +.edit { + cursor: pointer; + background-color: transparent; + color: lightgray; + border: none; + font-size: 5vh; + position: absolute; + right: 0; + bottom: 0; +} +.back { + cursor: pointer; + background-color: transparent; + border: none; + font-size: 7vh; + position: absolute; + left: 0; + top: 0; + text-decoration: none; + color: rgb(230, 230, 230); +} + +a { + color: rgb(152, 156, 160); +} \ No newline at end of file diff --git a/profile.html b/profile.html new file mode 100644 index 0000000..a1b5f69 --- /dev/null +++ b/profile.html @@ -0,0 +1,43 @@ + + + + Profile + + + + +
+
+
+ profile-pic +
+

Username

+

Bob Bobby, 88, CA

+
+

Bio

+

Yes, I like piña coladas + And getting caught in the rain + I'm not much into health food + I am into champagne + I've got to meet you by tomorrow noon + And cut through all this red tape + At a bar called O'Malley's + Where we'll plan our escape

+ +

+ So I waited with high hopes + And she walked in the place + I knew her smile in an instant + I knew the curve of her face + It was my own lovely lady + And she said, "Aw, it's you" + Then we laughed for a moment + And I said, "I never knew"

+
+ +
+ +
+ + + diff --git a/seashore.jpg b/seashore.jpg new file mode 100644 index 0000000..846306d Binary files /dev/null and b/seashore.jpg differ diff --git a/white-building.jpg b/white-building.jpg new file mode 100644 index 0000000..e93747a Binary files /dev/null and b/white-building.jpg differ