diff --git a/src/README.md b/src/README.md new file mode 100644 index 0000000..6a76686 --- /dev/null +++ b/src/README.md @@ -0,0 +1 @@ +# AirBnB \ No newline at end of file diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/fonts/Avenir-Book.ttf b/src/fonts/Avenir-Book.ttf new file mode 100644 index 0000000..ab9362f Binary files /dev/null and b/src/fonts/Avenir-Book.ttf differ diff --git a/src/fonts/Avenir-Heavy.ttf b/src/fonts/Avenir-Heavy.ttf new file mode 100644 index 0000000..83ce97e Binary files /dev/null and b/src/fonts/Avenir-Heavy.ttf differ diff --git a/src/fonts/Avenir-Medium.ttf b/src/fonts/Avenir-Medium.ttf new file mode 100644 index 0000000..f1d4dab Binary files /dev/null and b/src/fonts/Avenir-Medium.ttf differ diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d7..0000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/.gitkeep b/src/images/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/images/Ellipse.jpg b/src/images/Ellipse.jpg new file mode 100644 index 0000000..1620539 Binary files /dev/null and b/src/images/Ellipse.jpg differ diff --git a/src/images/Image.jpg b/src/images/Image.jpg new file mode 100644 index 0000000..c31ea48 Binary files /dev/null and b/src/images/Image.jpg differ diff --git a/src/images/Rectangle 2.jpg b/src/images/Rectangle 2.jpg new file mode 100644 index 0000000..8bff4da Binary files /dev/null and b/src/images/Rectangle 2.jpg differ diff --git a/src/images/burger.svg b/src/images/burger.svg new file mode 100644 index 0000000..0e064ea --- /dev/null +++ b/src/images/burger.svg @@ -0,0 +1,56 @@ + + + + + + image/svg+xml + + + + + + + + diff --git a/src/images/cross.svg b/src/images/cross.svg new file mode 100644 index 0000000..f330add --- /dev/null +++ b/src/images/cross.svg @@ -0,0 +1,56 @@ + + + + + + image/svg+xml + + + + + + + + diff --git a/src/index.html b/src/index.html index c1de13f..5cdc0c7 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,168 @@ - - - - Title - - - -

Hello Mate Academy

- - + + + + + + + AirBnB + + + +
+
+ + + + + + + + User Photo + +
+
+ +
+
+ +
+
+

25$ per night

+ + + +
+ +

Quiet apartment

+

Entire apartment

+

4 guests

+

1 bed

+

1 bath

+ +

City Apartment is newly renovated in the hear + t of Budapest, right in the city center. Lor + em ipsum dolor sit amet, consectetur adipi + scing elit, sed do eiusmod tempor incid + idunt ut labore et dolore magna aliqua. Ut en + im ad minim veniam. +

+ + + Contact host + + +
+

Amenities

+

+ Elevator +

+

+ Hair dryer +


+

+ Washer +

+

+ Kitchen +


+ + Show All Amenities + +
+ +
+

+ Reviews +

+
+
+

+
+

+ John +

+

+ September 2016 +

+
+
+

+ Lorem ipsum dolor sit amet, consectetur + adipiscing elit, sed do + eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam. +

+
+ +
+
+

+
+

+ John +

+

+ September 2017 +

+
+
+

+ Sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam. +

+
+
+ +
+

Hosted by Jane

+

Budapest, Hungary

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore + et magna aliqua. +

+ +
+ +
+ + + + + diff --git a/src/styles/booking-form.scss b/src/styles/booking-form.scss new file mode 100644 index 0000000..1b80a39 --- /dev/null +++ b/src/styles/booking-form.scss @@ -0,0 +1,77 @@ + +.booking-form { + height: 319px; + width: 330px; + border: 1px solid #e1e7ed; + border-radius: 3px; + box-sizing: border-box; + background-color: white; + padding: 30px; + position: sticky; + top: 70px; + display: flex; + flex-direction: column; + align-items: stretch; + float: right; + z-index: 0; + + @media screen and (max-width: 840px) { + float: none; + position: relative; + top: 0; + left: calc(50% - 165px); + } + + @media screen and (max-width: 345px) { + width: calc(100vw - 30px); + margin: 0 auto; + left: 0; + } + + &__price { + margin-bottom: 23px; + } + + &__input { + border: 1px solid #e1e7ed; + border-radius: 3px; + box-sizing: border-box; + background-color: white; + display: block; + height: 50px; + right: 0; + left: 0; + margin-top: 16px; + padding-left: 10px; + outline: none; + transition: box-shadow 0.5s; + &:hover, + &:focus { + box-shadow: 0 0 5px 5px #fd5c63; + } + } + + &__button { + background-color: #fd5c63; + border-radius: 4px; + color: white; + display: block; + height: 50px; + margin-top: 24px; + transition: background-color 0.5s, color 0.5s; + font-size: 20px; + outline: none; + cursor: pointer; + + &:focus { + box-shadow: 0 0 5px 5px #fd5c63; + background-color: white; + color: #fd5c63; + } + + &:hover { + background-color: white; + color: #fd5c63; + } + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 0000000..79f4984 --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,38 @@ + +.footer { + padding: 0 10px; + box-sizing: border-box; + height: 213px; + width: 100%; + margin: 0 auto; + box-shadow: 0 -1px 0 #e1e7ed; + border: 1px solid white; + + &__container { + display: flex; + width: 901px; + margin: 40px auto; + @media screen and (max-width: 900px) { + width: 100%; + } + } + + &__subcontainer { + display: flex; + flex-direction: column; + flex-grow: 1; + } + + &__link { + text-decoration: none; + color: #3d4e61; + line-height: 27px; + outline: none; + transition: transform 0.5s; + + &:hover, + &:focus { + transform: scale(1.1); + } + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 0000000..6a5a593 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,116 @@ +.header { + position: sticky; + top: 0; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + z-index: 1; + height: 60px; + margin: 0; + background-color: white; + box-shadow: 0 1px 0 #e1e7ed; + + &__container { + max-width: 950px; + display: flex; + justify-content: flex-end; + position: relative; + width: 100%; + margin: 0 auto; + } + + &__toggler { + display: none; + } + + &__nav { + display: flex; + margin-right: 87px; + height: 100%; + transition: 1s cubic-bezier(0.62, 1.96, 0.3, 0.31); + transform-origin: top; + + @media screen and (max-width: 500px) { + background-color: rgba(#fd5c63, 1); + color: white; + position: absolute; + top: 30px; + width: 100vw; + flex-direction: column; + height: calc(100vh - 60px); + transform: translateY(130vh); + align-items: center; + } + } + + &__label { + display: none; + height: 30px; + width: 30px; + background-image: url(../images/burger.svg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + + @media screen and (max-width: 500px) { + display: block; + position: absolute; + top: calc(50% - 15px); + left: calc(50% - 15px); + } + } + + &__toggler:checked ~ .header__nav { + transform: translateY(0); + } + + &__toggler:checked ~ .header__label { + background-image: url(../images/cross.svg); + } + + &__logo { + height: 30px; + width: 30px; + position: absolute; + top: calc(50% - 15px); + left: 26px; + } + + &__link { + display: block; + font-family: Avenir, sans-serif; + font-size: 16px; + font-weight: 400; + margin: auto 15px; + text-decoration: none; + outline: none; + transition: color 0.5s; + color: #3d4e61; + &:hover, + &:focus { + color: #fd5c63; + @media screen and (max-width: 500px) { + color: rgb(91, 91, 236); + } + + } + @media screen and (max-width: 500px) { + font-family: Avenir, sans-serif; + font-size: 32px; + font-weight: bold; + color: white; + margin: 6vh 0; + + } + } + + &__photo { + position: absolute; + right: 19px; + top: calc(50% - 15px); + width: 30px; + height: 30px; + margin: auto 19px auto 23px; + } +} diff --git a/src/styles/hosted.scss b/src/styles/hosted.scss new file mode 100644 index 0000000..78c39d7 --- /dev/null +++ b/src/styles/hosted.scss @@ -0,0 +1,43 @@ +.hosted { + width: 490px; + &__title { + font-family: Roboto, sans-serif; + font-weight: bold; + font-size: 28px; + line-height: 33px; + margin: 15px 0 0; + } + + &__were { + font-size: 14px; + line-height: 16px; + } + + &__button { + width: 150px; + height: 50px; + border: 1px solid #118488; + background-color: white; + border-radius: 4px; + color: #118488; + margin: 25px 0; + font-size: 20px; + transition: background-color 0.5s, color 0.5s, box-shadow 0.5s; + outline: none; + cursor: pointer; + + &:hover { + background-color: #118488; + color: white; + } + &:focus { + box-shadow: 0 0 5px 5px grey; + background-color: #118488; + color: white; + } + } + + @media screen and (max-width: 490px) { + width: 100%; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index 0f8860e..0000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "utils"; -@import "fonts"; -@import "typography"; - -body { - background: $c-gray; -} diff --git a/src/styles/reviews.scss b/src/styles/reviews.scss new file mode 100644 index 0000000..b523b0a --- /dev/null +++ b/src/styles/reviews.scss @@ -0,0 +1,47 @@ + +.reviews { + + &__title { + font-size: 28px; + line-height: 33px; + margin-bottom: 34px; + } + + &__circle { + height: 50px; + width: 50px; + border-radius: 50%; + background-color: #c4c4c4; + margin: 0 20px 0 0; + } + + &__name { + font-size: 20px; + margin: 0; + } + + &__date { + font-size: 14px; + margin: 0; + } + + &__container { + display: flex; + } + + &__subcontainer { + display: flex; + flex-direction: column; + justify-content: space-between; + } + + &__review { + width: 490px; + height: 120px; + margin: 13px 0 0; + + @media screen and (max-width: 490px) { + width: 100%; + } + } +} diff --git a/src/styles/styles.scss b/src/styles/styles.scss new file mode 100644 index 0000000..483c3fc --- /dev/null +++ b/src/styles/styles.scss @@ -0,0 +1,109 @@ + +@import "header"; +@import "booking-form"; +@import "reviews"; +@import "hosted"; +@import "footer"; + +@font-face { + font-family: Avenir; + font-weight: lighter; + src: url(../fonts/Avenir-Book.ttf); +} + +@font-face { + font-family: Avenir; + font-weight: normal; + src: url(../fonts/Avenir-Medium.ttf); +} + +@font-face { + font-family: Avenir; + font-weight: bold; + src: url(../fonts/Avenir-Heavy.ttf); +} + +html { + scroll-behavior: smooth; +} + +body { + font-size: 16px; + line-height: 19px; + font-family: Avenir, sans-serif; + margin: 0; + padding: 0; + color: #3d4e61; + + @media screen and (max-width: 900px) { + width: 100%; + } +} + +.content { + max-width: 901px; + margin: 39px auto; + + @media screen and (max-width: 900px) { + width: 100%; + box-sizing: border-box; + padding: 0 15px; + } + + &__primary-title { + font-size: 36px; + line-height: 42px; + } + + &__condition { + display: inline-block; + height: 28px; + width: 81px; + } + + &__description { + width: 490px; + line-height: 24px; + @media screen and (max-width: 490px) { + width: 100%; + } + } + + &__links { + font-weight: bold; + text-decoration: none; + color: #3d4e61; + transition: transform 0.5s, color 0.5s; + outline: none; + &:hover, + &:focus { + transform: scale(1.1); + color: #fd5c63; + } + } + + &__subtitle { + color: #687c94; + } +} + +.amenities { + &__amenity { + display: inline-block; + width: 180px; + margin: 13px 0; + } +} + +.promo { + width: 100%; + height: 464px; + display: block; + background: url(../images/Image.jpg) no-repeat; + background-size: cover; + background-position: center; + + @media screen and (max-width: 500px) { + height: 200px; + } +}