diff --git a/house.html b/house.html new file mode 100644 index 0000000..a4111b6 --- /dev/null +++ b/house.html @@ -0,0 +1,146 @@ + + + + + + + + House Details Page + + + + + + + +
+
+

Wenge House

+
+
+ + + + + + 250 Reviews +
+
+

Location: San Francisco, Califonia, United States

+
+
+
+
+
+
+
+
+
+
+
+

Entire rental unit hosted by Brandon

+

2 guest     2 beds    1 bathroom

+

$ 100 / day

+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+

Guest will be allocated on the ground floor according to availability. You get a + comfortable Two bedroom apartment has a true city feeling. The price quoted is for two guest, at the guest + slot please ark the number of guests to get the exect price for groups. The Guest will be allocated ground + floor according to availability. You get the comfortable tow bedroom apartment that has a true city feeling. +

+
+
+

Location on Map

+ + San Francisco, Califonia, United States +

It's like a home away from home.

+
+
+
+ +
+

Hosted by Brandon

+

+ + + + + + +     250 reviews     Response rate 100%     Response time: 60 + min +

+
+
+ Contact Host +
+
+
+ + + + + +
+

Copyright @ 2021, Aasif Khan Developer.

+
+
+ + + + \ No newline at end of file diff --git a/images/arrow.png b/images/arrow.png new file mode 100644 index 0000000..23b98cf Binary files /dev/null and b/images/arrow.png differ diff --git a/images/banner-2.png b/images/banner-2.png new file mode 100644 index 0000000..e7bfd2c Binary files /dev/null and b/images/banner-2.png differ diff --git a/images/banner.png b/images/banner.png new file mode 100644 index 0000000..f38bab0 Binary files /dev/null and b/images/banner.png differ diff --git a/images/dubai.png b/images/dubai.png new file mode 100644 index 0000000..16e41c0 Binary files /dev/null and b/images/dubai.png differ diff --git a/images/host.png b/images/host.png new file mode 100644 index 0000000..8e9a20e Binary files /dev/null and b/images/host.png differ diff --git a/images/house-1.png b/images/house-1.png new file mode 100644 index 0000000..206c755 Binary files /dev/null and b/images/house-1.png differ diff --git a/images/house-2.png b/images/house-2.png new file mode 100644 index 0000000..d6bc8b8 Binary files /dev/null and b/images/house-2.png differ diff --git a/images/house-3.png b/images/house-3.png new file mode 100644 index 0000000..1fb3f92 Binary files /dev/null and b/images/house-3.png differ diff --git a/images/house-4.png b/images/house-4.png new file mode 100644 index 0000000..5165042 Binary files /dev/null and b/images/house-4.png differ diff --git a/images/house-5.png b/images/house-5.png new file mode 100644 index 0000000..7c4e4fd Binary files /dev/null and b/images/house-5.png differ diff --git a/images/image-1.png b/images/image-1.png new file mode 100644 index 0000000..56ceff3 Binary files /dev/null and b/images/image-1.png differ diff --git a/images/image-10.png b/images/image-10.png new file mode 100644 index 0000000..85314ed Binary files /dev/null and b/images/image-10.png differ diff --git a/images/image-15.png b/images/image-15.png new file mode 100644 index 0000000..5389192 Binary files /dev/null and b/images/image-15.png differ diff --git a/images/image-2.png b/images/image-2.png new file mode 100644 index 0000000..6cd5822 Binary files /dev/null and b/images/image-2.png differ diff --git a/images/image-3.png b/images/image-3.png new file mode 100644 index 0000000..3e178dd Binary files /dev/null and b/images/image-3.png differ diff --git a/images/image-4.png b/images/image-4.png new file mode 100644 index 0000000..2cc54bc Binary files /dev/null and b/images/image-4.png differ diff --git a/images/image-5.png b/images/image-5.png new file mode 100644 index 0000000..5389192 Binary files /dev/null and b/images/image-5.png differ diff --git a/images/image-6.png b/images/image-6.png new file mode 100644 index 0000000..65c7a2d Binary files /dev/null and b/images/image-6.png differ diff --git a/images/image-7.png b/images/image-7.png new file mode 100644 index 0000000..e71e83b Binary files /dev/null and b/images/image-7.png differ diff --git a/images/image-8.png b/images/image-8.png new file mode 100644 index 0000000..ac0506f Binary files /dev/null and b/images/image-8.png differ diff --git a/images/image-9.png b/images/image-9.png new file mode 100644 index 0000000..351531a Binary files /dev/null and b/images/image-9.png differ diff --git a/images/image-s1.png b/images/image-s1.png new file mode 100644 index 0000000..7658608 Binary files /dev/null and b/images/image-s1.png differ diff --git a/images/image-s2.png b/images/image-s2.png new file mode 100644 index 0000000..4c6feae Binary files /dev/null and b/images/image-s2.png differ diff --git a/images/image-s3.png b/images/image-s3.png new file mode 100644 index 0000000..31dfb5b Binary files /dev/null and b/images/image-s3.png differ diff --git a/images/image-s4.png b/images/image-s4.png new file mode 100644 index 0000000..f80e2a6 Binary files /dev/null and b/images/image-s4.png differ diff --git a/images/image-s5.png b/images/image-s5.png new file mode 100644 index 0000000..bf4fd29 Binary files /dev/null and b/images/image-s5.png differ diff --git a/images/image-s6.png b/images/image-s6.png new file mode 100644 index 0000000..fb0b1ee Binary files /dev/null and b/images/image-s6.png differ diff --git a/images/logo-red.png b/images/logo-red.png new file mode 100644 index 0000000..1968773 Binary files /dev/null and b/images/logo-red.png differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..c47d6b6 Binary files /dev/null and b/images/logo.png differ diff --git a/images/new-delhi.png b/images/new-delhi.png new file mode 100644 index 0000000..7bbf7f2 Binary files /dev/null and b/images/new-delhi.png differ diff --git a/images/new-york.png b/images/new-york.png new file mode 100644 index 0000000..ec3f72f Binary files /dev/null and b/images/new-york.png differ diff --git a/images/paris.png b/images/paris.png new file mode 100644 index 0000000..a21afb5 Binary files /dev/null and b/images/paris.png differ diff --git a/images/search.png b/images/search.png new file mode 100644 index 0000000..471efe6 Binary files /dev/null and b/images/search.png differ diff --git a/images/story-1.png b/images/story-1.png new file mode 100644 index 0000000..a5cc3dd Binary files /dev/null and b/images/story-1.png differ diff --git a/images/story-2.png b/images/story-2.png new file mode 100644 index 0000000..3ecfdc9 Binary files /dev/null and b/images/story-2.png differ diff --git a/images/story-3.png b/images/story-3.png new file mode 100644 index 0000000..7a96c44 Binary files /dev/null and b/images/story-3.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b74b900 --- /dev/null +++ b/index.html @@ -0,0 +1,198 @@ + + + + + + + Hotel Web page + + + + + +
+ +
+

+ Find Your Next Stay +

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
+

Exclusives

+
+
+ + +

London

+

Starts @ $250

+ +
+
+ + +

Switzerland

+

Starts @ $250

+ +
+
+ + +

Austraila

+

Starts @ $250

+ +
+
+ + +

France

+

Starts @ $250

+ +
+
+ + +

Amsterdam

+

Starts @ $250

+ +
+
+ + +

Netherlands

+

Starts @ $250

+ +
+
+ + +

New Yark

+

Starts @ $250

+ +
+
+ + +

Chicago

+

Starts @ $250

+ +
+
+ + +

San Francisco

+

Starts @ $250

+ +
+
+ + +

Shanghal

+

Starts @ $250

+ +
+
+ +

Trending Places

+
+
+ +

Dubai

+
+
+ +

New York

+
+
+ +

Paris

+
+
+ +

New Delhi

+
+
+
+

Sharing
Is Earning Now

+

Great opportunity to make by
sharing your extra space.

+ Know More +
+ +

Travellers Stories

+
+
+ +

Popular European countries with a budget of just $10,000

+
+
+ +

Travaled more than 100 countries in less than a year

+
+
+ +

Best experience you get while traveling to Thailand

+
+
+ Start making money +
+

About Staybnb

+

Contrary to popular belief, Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum aliquid quaerat recusandae sapiente nulla eaque distinctio inventore asperiores laborum nam labore nobis, tempora, explicabo ea eius illo est, unde assumenda. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus cupiditate quis excepturi, assumenda illum quod animi in provident dicta optio voluptates voluptatibus quasi saepe fugit aut officia rem ipsum veritatis? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem nam sunt alias aperiam. Soluta ipsam provident atque nulla velit accusantium eligendi maiores nihil odit, laudantium ullam perferendis quo distinctio ab.

+
+ +
+ + + + + +
+

Copyright @ 2021, Aasif Khan Developer.

+
+
+ + + + \ No newline at end of file diff --git a/listing.html b/listing.html new file mode 100644 index 0000000..ab12602 --- /dev/null +++ b/listing.html @@ -0,0 +1,225 @@ + + + + + + + + Listning Page + + + + + + + +
+
+
+

200+ Options

+

Recommended Places In San Francisco

+
+
+ +
+
+

Private Villa in San Francisco

+

Deluxe Queen Room With Street View

+

1 Bedroom / 1 Bathroom / Wifi / Kitchen

+ + + + + +
+

2 Guest

+

$ 100 / Day

+
+
+
+
+
+ +
+
+

Private Villa in San Francisco

+

Deluxe Queen Room With Street View

+

1 Bedroom / 1 Bathroom / Wifi / Kitchen

+ + + + + +
+

2 Guest

+

$ 100 / Day

+
+
+
+
+
+ +
+
+

Private Villa in San Francisco

+

Deluxe Queen Room With Street View

+

1 Bedroom / 1 Bathroom / Wifi / Kitchen

+ + + + + +
+

2 Guest

+

$ 100 / Day

+
+
+
+
+
+ +
+
+

Private Villa in San Francisco

+

Deluxe Queen Room With Street View

+

1 Bedroom / 1 Bathroom / Wifi / Kitchen

+ + + + + +
+

2 Guest

+

$ 100 / Day

+
+
+
+
+
+ +
+
+

Private Villa in San Francisco

+

Deluxe Queen Room With Street View

+

1 Bedroom / 1 Bathroom / Wifi / Kitchen

+ + + + + +
+

2 Guest

+

$ 100 / Day

+
+
+
+
+
+ +
+
+

Private Villa in San Francisco

+

Deluxe Queen Room With Street View

+

1 Bedroom / 1 Bathroom / Wifi / Kitchen

+ + + + + +
+

2 Guest

+

$ 100 / Day

+
+
+
+
+
+
+

Select Filters

+

Property Type

+
+

House

(0) +
+
+

Hostel

(0) +
+
+

Flat

(0) +
+
+

Villa

(0) +
+
+

Guest Suite

(0) +
+

Amenities

+
+

Air Conditioning

(0) +
+
+

Wifi

(0) +
+
+

Gym

(0) +
+
+

Pool

(0) +
+
+

Kitchen

(0) +
+ +
+ View More +
+
+
+
+ +
+ + + + + +
+

Copyright @ 2021, Aasif Khan Developer.

+
+
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..cb31b29 --- /dev/null +++ b/style.css @@ -0,0 +1,751 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'poppins', sans-serif; +} +html{ + font-size: 62.5%; +} +.header{ + min-height: 100vh; + width: 100%; + background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(images/banner.png); + background-size: cover; + background-position: center; + +} +nav{ + display: flex; + align-items: center; + justify-content: space-between; + padding: 2rem 7%; + +} +.logo{ + width: 14rem; + cursor: pointer; +} +.nav-links li{ + list-style: none; + display: inline-block; + margin: 1rem 3rem; +} +.nav-links li a{ + font-size: 1.2rem; + text-decoration: none; + color: #fff; + +} +.register-btn{ + background: #fff; + color: #000; + padding: .8rem 2rem; + border-radius: 2rem; + text-decoration: none; + font-size: 1.4; +} +.container{ + padding: 0 7%; + +} +.header h1{ + font-size: 4vw; + font-weight: 500; + color: #fff; + text-align: center; + padding-top: 22%; + +} +.search-bar{ + background: #fff; + width: 70%; + margin: 3rem auto; + padding: .6rem 1rem .6rem 3rem; + border-radius: 5rem; + +} +.search-bar form{ + display: flex; + align-items: center; + flex-wrap: wrap; +} +.search-bar form input{ + margin-top: 1rem; + display: block; + border: 0; + outline: none; + background: transparent; +} +.search-bar form button{ + background: #ff5361; + width: 5.5rem; + height: 5.5rem; + border-radius: 50%; + border: 0; + outline: none; + cursor: pointer; +} +.search-bar form button img{ + width: 1.5rem; + margin-top: .7rem; + +} +.location_input{ + flex: 1; +} +.search-bar form label{ + font-weight: 900; + font-size: 1.5rem; +} +/* -------------------Exclusives---------------- */ +.sub-title{ + margin: 5rem 0 2rem; + font-size: 2.2vw; + font-weight: 500; + color: #333; +} +.exclusives{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); + grid-gap: 3rem; +} +.exclusives div img{ + width: 100%; + border-radius: 1rem; +} +.exclusives div{ + position: relative; +} +.exclusives div span{ + font-size: 1.2rem; + color: #fff; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + text-align: center; +} +/* ----------Trending places-------------- */ + +.trending{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); + grid-gap: 3rem; + margin-bottom: 3rem; +} +.trending div img{ + width: 100%; + border-radius: 1rem; +} +.trending h3{ + font-weight: 900; + margin-top: 1rem; +} +/* ---------call to action -------- */ +.cta{ + margin: 8rem 0; + background-image: linear-gradient(to right,#3f2321, transparent), url(images/banner-2.png); + border-radius: 1rem; + padding: 5%; + color: #fff; +} +.cta h3{ + font-size: 4vw; + line-height: 5.3vw; + font-weight: 500; +} +.cta p{ + font-size: 1.8rem; + margin: 1rem 0; +} +.cta-btn{ + font-size: 1.2rem; + background: #ff5361; + color: #fff; + text-decoration: none; + padding: 1.2rem 3rem; + border-radius: .8rem; + margin-top: 2rem; + display: inline-block; +} +/* ----------Travellers Stories --------------- */ +.stories{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); + grid-gap: 3rem; + margin-bottom: 3rem; +} +.stories div img{ + width: 100%; + border-radius: 1rem; +} +.stories div{ + position: relative; + text-align: center; +} +.stories p{ + width: 80%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + color: #fff; + font-size: 2.6rem; +} +.start-btn{ + text-decoration: none; + background: #ff5361; + color: #fff; + width: 80%; + max-width: 35rem; + display: block; + text-align: center; + margin: 6rem auto; + padding: 1.5rem; + border-radius: 3rem; + font-size: 2rem; +} + +/* ------- about msg ----------- */ +.about-msg +{ + text-align: center; + margin: 8rem 0; + color: #333; + font-size: 1.7rem; +} +.about-msg h2{ + font-size: 2.8rem; + margin-bottom: 3rem; + font-weight: 500; +} + +/* --------footer----------- */ +.footer{ + margin: 8rem 0 1rem; + text-align: center; +} +.footer a +{ + text-decoration: none; + color: #999; + font-size: 2.2rem; + margin: 0 1rem; +} +.footer hr{ + background: #999; + height: .1rem; + width: 100%; + border: 0; + margin: 2rem 0; +} +.footer p{ + padding-bottom: 1.5rem; + font-size: 1.5rem; +} +.active +{ + position: relative; +} +.active::after{ + content: ''; + background: #fff; + width: 2.5rem; + height: .2rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -1.2rem; + border-radius: .2rem; +} +nav .fa-bars{ + display: none; + /* visibility: hidden; */ +} +/* ----------for small screen----------- */ + +@media(max-width: 700px) { + + .logo{ + position: fixed; + top: 4%; + left: 7%; + } + nav{ + position: fixed; + top: 0; + z-index: 100; + display: inline-block; + width: 100%; + padding: 10rem 7% 0; + background: #000; + text-align: right; + max-height: 10rem; + overflow: hidden; + transition: max-height 0.5s; + } + nav .nav-links li{ + margin: 1rem 0; + display: block; + } + .register-btn{ + margin: 1.5rem 0 3rem; + display: inline-block; + } + nav .fa-bars{ + display: block; + position: fixed; + top: 4%; + right: 7%; + color: #fff; + font-size: 2.8rem; + } + .active::after{ + left: -4rem; + transform: translate(0, 50%); + bottom: 50%; + } + .hidemenu{ + max-height: 30rem; + } + .header h1{ + padding-top: 20rem; + font-size: 7vw; + } + .search-bar{ + width: 90%; + margin: 3rem auto; + padding: 2rem 1rem 3rem; + border-radius: .5rem; + position: relative; + } + .search-bar form{ + display: block; + } + .search-bar form input{ + border-bottom: .1rem solid#ddd; + width: 100%; + margin-top: 1rem; + margin-bottom: 2rem; + padding-bottom: 1rem; + } + .search-bar form button{ + position: absolute; + bottom: 0; + left: 50%; + transform: translate(-50%, 50%); + } + .sub-title{ + font-size: 6vw; + } + .cta{ + padding: 15% 5%; + } + .cta h3{ + font-size: 7vw; + line-height: 8vw; + } + .cta p{ + font-size: 1.4rem; + } + .cta-btn{ + padding: .6rem 1.5rem; + border-radius: .4rem; + margin-top: 1rem; + font-size: 1.4rem; + } + .stories p{ + font-size: 2.2rem; + } + .about-msg{ + font-size: 1.5rem; + } +} +/* ----------------listing page -------------- */ +.navbar-white{ + background: #fff; + box-shadow: 0 .5rem 1rem rgba(0,0,0,0.05); +} +.navbar-white .nav-links li a{ + color: #000; +} +.navbar-white .register-btn{ + background: #ff5361; + color: #fff; +} +nav.navbar-white .fa-bars{ + color: #000; +} +.navbar-white .active::after{ + background: #ff5361; +} +.list-container{ + margin-top: 5rem; + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +.left-col{ + flex-basis: 70%; +} +.right-col{ + flex-basis: 25%; +} +.left-col h1{ + color: #333; + font-weight: 600; + margin-bottom: 3rem; +} +.house{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding: 3rem 0; + border-top: .1rem solid #ccc; +} +.house-img{ + flex-basis: 40%; + +} +.house-info{ + flex-basis: 58%; + color: #555; +} +.house-img img{ + width: 100%; + border-radius: 1.2rem; +} +.house-info h3{ + font-weight: 600; + color: #333; + font-size: 2.2rem; + margin: .4rem 0; +} +.house-info i{ + color: #ff5361; + font-size: 1.8rem; + margin: 1rem .1rem; +} +.house-price{ + text-align: right; +} +.house-price h4{ + font-size: 2rem; +} +.house-price h4 span{ + font-size: 1.6rem; + font-weight: 500; +} +.sidebar{ + border: .1rem solid #999; + padding: 2rem 3rem; + margin-top: 3rem; +} +.sidebar h2{ + font-weight: 500; +} +.sidebar h3{ + font-weight: 500; + margin: 2rem 0 1rem; +} +.filter{ + display: flex; + align-items: center; + color: #555; + margin-bottom: 1rem; +} +.filter p{ + flex: 1; +} +.filter input{ + margin-right: 1.5rem; + cursor: pointer; +} +.sidebar-link{ + text-align: right; + margin: 2rem 0; +} +.sidebar-link a +{ + text-decoration: none; +} +.pagination{ + display: flex; + align-items: center; + justify-content: center; + margin: 4rem 0; +} +.pagination img{ + width: 1.5rem; + margin: 1rem 2rem; + cursor: pointer; +} +.right-arrow{ + transform: rotate(180deg); + cursor: pointer; +} +.pagination span{ + margin: 1rem.8rem; + width: 4rem; + height: 4rem; + line-height: 4rem; + text-align: center; + border-radius: 50%; + cursor: pointer; +} +.pagination .current{ + background: #333; + color: #fff; +} + +/* ----------small Screen listing page ----------- */ +@media only screen and (max-width: 700px){ + + .list-container{ + margin-top: 15rem; + } + .left-col, .right-col, .house-img, .house-info{ + flex-basis: 100%; + } + .left-col h1{ + font-size: 2.2rem; + } + .house-info h3{ + font-size: 1.8rem; + } + .house-info i{ + font-size: 1.6rem; + } + .pagination span{ + margin: 1rem .2rem; + width: 3rem; + height: 3rem; + line-height: 3rem; + font-size: 1.2rem; + } + .footer p{ + font-size: 1.5rem; + color: #333; + } +} + + +.house-details{ + padding: 0 12%; +} +.house-title{ + margin-top: 5rem; +} +.house-title h1{ + font-weight: 600; +} +.house-title .row{ + display: flex; + flex-wrap: wrap; + align-items: center; + margin: 1rem 0; +} +.house-title span{ + margin: 0 2rem; +} +.house-title i{ + color: #ff5361; + font-size: 1.4rem; +} +.house-title p{ + font-size: 1.2rem; +} +.gallery{ + display: grid; + grid-gap: 1rem; + grid-template-areas: 'first first . .' 'first first . .'; + margin: 2rem 0; +} +.gallery div img{ + width: 100%; + display: block; + border-radius: 1rem; +} +.gallery-img-1{ + grid-area: first; +} +.small-details h2{ + font-weight: 500; +} +.small-details h4{ + text-align: right; + font-size: 2.2rem; + +} +.line{ + border: 0; + height: .1rem; + background: #ccc; + width: 100%; + max-width: 80rem; + margin: 2rem 0 5rem; +} +.check-form{ + margin: 3rem 0; + background: #fff; + box-shadow: 0 0 3rem rgba(0, 0, 0, 0.3); + border-radius: .8rem; + display: flex; + flex-wrap: wrap; + align-items: center; + padding: 1rem 5rem; +} +.check-form label{ + font-weight: 700; + font-size: 1.2rem; + display: block; + margin-bottom: 1rem; +} +.check-form div{ + padding: 2rem; +} +.check-form input{ + background: transparent; + border: 0; + outline: none; + +} +.check-form button{ + background: #ff5361; + border: 0; + outline: none; + color: #fff; + padding: 1.8rem; + width: 35rem; + border-radius: .8rem; + font-size: 1.6rem; +} +.guest-field{ + flex: 1; +} +.details-list{ + list-style: none; + margin: 5rem 0; + +} +.details-list li{ + margin-left: 5rem; + color: #555; + font-size: 2rem; + font-weight: 500; + margin-bottom: 2rem; + position: relative; +} +.details-list li span{ + margin-top: 1rem; + display: block; + font-weight: 400; + font-size: 1.6rem; +} +.details-list li i{ + position: absolute; + top: .5rem; + left: -4rem; +} +.home-desc{ + max-width: 70rem; + margin-bottom: 5rem; + font-size: 1.5rem +} +.map{ + margin: 5rem 0; +} +.map iframe{ + width: 100%; + margin-bottom: 3rem; +} +.map h3{ + font-size: 2.6rem; + font-weight: 500; + margin-bottom: 3rem; +} +.map b{ + display: block; + margin-bottom: 1.6rem; + font-size: 1.2rem; +} +.map p{ + font-weight: 500; + font-size: 1.1rem; +} +.host{ + display: flex; + align-items: center; +} +.host img{ + width: 8rem; + border-radius: 50%; + margin-right: 3rem; +} +.host h2{ + margin-bottom: 1rem; + font-weight: 600; +} +.host i{ + color: #ff5361; +} +.contact-host{ + display: inline-block; + margin: 4rem 0 4rem 12rem; + text-decoration: none; + color: #555; + padding: 1.5rem 5rem; + border: .1rem solid #ff5361; + border-radius: .8rem; +} +/* ------------------media query for house details page ------------------- */ +@media only screen and (max-width: 700px){ + .house-details{ + margin-top: 15rem; + } + .row p{ + margin-top: 1rem; + } + .gallery{ + grid-template-areas: 'first first' '. .' '. .'; + } + .small-details h2{ + font-size: 2rem; + margin-top: 2.4rem; + } + .small-details p{ + margin-top: 1rem; + } + .small-details h4{ + text-align: left; + margin: 1rem 0; + font-size: 1.8rem; + } + .check-form{ + padding: 1rem 3rem; + } + .check-form div{ + padding: 2rem 0; + width: 100%; + } + .check-form input{ + border-bottom: .1rem solid #ccc; + width: 100%; + padding-bottom: .5rem; + } + .check-form button{ + font-size: 1.4rem; + margin-top: 1rem; + margin-bottom: 1.5rem; + border-radius: .4rem; + } + .host{ + display: block; + line-height: 2.8rem; + } + .contact-host{ + margin: 4rem 0; + + } +} \ No newline at end of file