diff --git a/fonts/Avenir-Black.eot b/fonts/Avenir-Black.eot new file mode 100644 index 0000000..ba08db8 Binary files /dev/null and b/fonts/Avenir-Black.eot differ diff --git a/fonts/Avenir-Black.ttf b/fonts/Avenir-Black.ttf new file mode 100644 index 0000000..4051b41 Binary files /dev/null and b/fonts/Avenir-Black.ttf differ diff --git a/fonts/Avenir-Black.woff b/fonts/Avenir-Black.woff new file mode 100644 index 0000000..523b134 Binary files /dev/null and b/fonts/Avenir-Black.woff differ diff --git a/fonts/Avenir-Black.woff2 b/fonts/Avenir-Black.woff2 new file mode 100644 index 0000000..51dbade Binary files /dev/null and b/fonts/Avenir-Black.woff2 differ diff --git a/fonts/Avenir-BlackOblique.eot b/fonts/Avenir-BlackOblique.eot new file mode 100644 index 0000000..de20e1a Binary files /dev/null and b/fonts/Avenir-BlackOblique.eot differ diff --git a/fonts/Avenir-BlackOblique.ttf b/fonts/Avenir-BlackOblique.ttf new file mode 100644 index 0000000..b34b12d Binary files /dev/null and b/fonts/Avenir-BlackOblique.ttf differ diff --git a/fonts/Avenir-BlackOblique.woff b/fonts/Avenir-BlackOblique.woff new file mode 100644 index 0000000..eec53fb Binary files /dev/null and b/fonts/Avenir-BlackOblique.woff differ diff --git a/fonts/Avenir-BlackOblique.woff2 b/fonts/Avenir-BlackOblique.woff2 new file mode 100644 index 0000000..ebe39bf Binary files /dev/null and b/fonts/Avenir-BlackOblique.woff2 differ diff --git a/fonts/Avenir-Book.eot b/fonts/Avenir-Book.eot new file mode 100644 index 0000000..b63b9ae Binary files /dev/null and b/fonts/Avenir-Book.eot differ diff --git a/fonts/Avenir-Book.ttf b/fonts/Avenir-Book.ttf new file mode 100644 index 0000000..82aca05 Binary files /dev/null and b/fonts/Avenir-Book.ttf differ diff --git a/fonts/Avenir-Book.woff b/fonts/Avenir-Book.woff new file mode 100644 index 0000000..5a6f31c Binary files /dev/null and b/fonts/Avenir-Book.woff differ diff --git a/fonts/Avenir-Book.woff2 b/fonts/Avenir-Book.woff2 new file mode 100644 index 0000000..15a72cf Binary files /dev/null and b/fonts/Avenir-Book.woff2 differ diff --git a/fonts/Avenir-BookOblique.eot b/fonts/Avenir-BookOblique.eot new file mode 100644 index 0000000..500ab3b Binary files /dev/null and b/fonts/Avenir-BookOblique.eot differ diff --git a/fonts/Avenir-BookOblique.ttf b/fonts/Avenir-BookOblique.ttf new file mode 100644 index 0000000..76fe7be Binary files /dev/null and b/fonts/Avenir-BookOblique.ttf differ diff --git a/fonts/Avenir-BookOblique.woff b/fonts/Avenir-BookOblique.woff new file mode 100644 index 0000000..a643b12 Binary files /dev/null and b/fonts/Avenir-BookOblique.woff differ diff --git a/fonts/Avenir-BookOblique.woff2 b/fonts/Avenir-BookOblique.woff2 new file mode 100644 index 0000000..96e370b Binary files /dev/null and b/fonts/Avenir-BookOblique.woff2 differ diff --git a/fonts/Avenir-Heavy.eot b/fonts/Avenir-Heavy.eot new file mode 100644 index 0000000..e4eecaa Binary files /dev/null and b/fonts/Avenir-Heavy.eot differ diff --git a/fonts/Avenir-Heavy.ttf b/fonts/Avenir-Heavy.ttf new file mode 100644 index 0000000..df516d6 Binary files /dev/null and b/fonts/Avenir-Heavy.ttf differ diff --git a/fonts/Avenir-Heavy.woff b/fonts/Avenir-Heavy.woff new file mode 100644 index 0000000..b33d505 Binary files /dev/null and b/fonts/Avenir-Heavy.woff differ diff --git a/fonts/Avenir-Heavy.woff2 b/fonts/Avenir-Heavy.woff2 new file mode 100644 index 0000000..0b6b273 Binary files /dev/null and b/fonts/Avenir-Heavy.woff2 differ diff --git a/fonts/Avenir-HeavyOblique.eot b/fonts/Avenir-HeavyOblique.eot new file mode 100644 index 0000000..0cd33fe Binary files /dev/null and b/fonts/Avenir-HeavyOblique.eot differ diff --git a/fonts/Avenir-HeavyOblique.ttf b/fonts/Avenir-HeavyOblique.ttf new file mode 100644 index 0000000..2888068 Binary files /dev/null and b/fonts/Avenir-HeavyOblique.ttf differ diff --git a/fonts/Avenir-HeavyOblique.woff b/fonts/Avenir-HeavyOblique.woff new file mode 100644 index 0000000..91f8a6d Binary files /dev/null and b/fonts/Avenir-HeavyOblique.woff differ diff --git a/fonts/Avenir-HeavyOblique.woff2 b/fonts/Avenir-HeavyOblique.woff2 new file mode 100644 index 0000000..8196bc2 Binary files /dev/null and b/fonts/Avenir-HeavyOblique.woff2 differ diff --git a/fonts/Avenir-Light.eot b/fonts/Avenir-Light.eot new file mode 100644 index 0000000..65edc62 Binary files /dev/null and b/fonts/Avenir-Light.eot differ diff --git a/fonts/Avenir-Light.ttf b/fonts/Avenir-Light.ttf new file mode 100644 index 0000000..6cab226 Binary files /dev/null and b/fonts/Avenir-Light.ttf differ diff --git a/fonts/Avenir-Light.woff b/fonts/Avenir-Light.woff new file mode 100644 index 0000000..77b383a Binary files /dev/null and b/fonts/Avenir-Light.woff differ diff --git a/fonts/Avenir-Light.woff2 b/fonts/Avenir-Light.woff2 new file mode 100644 index 0000000..6ffeb3e Binary files /dev/null and b/fonts/Avenir-Light.woff2 differ diff --git a/fonts/Avenir-LightOblique.eot b/fonts/Avenir-LightOblique.eot new file mode 100644 index 0000000..298ff20 Binary files /dev/null and b/fonts/Avenir-LightOblique.eot differ diff --git a/fonts/Avenir-LightOblique.ttf b/fonts/Avenir-LightOblique.ttf new file mode 100644 index 0000000..765378d Binary files /dev/null and b/fonts/Avenir-LightOblique.ttf differ diff --git a/fonts/Avenir-LightOblique.woff b/fonts/Avenir-LightOblique.woff new file mode 100644 index 0000000..d54a3cc Binary files /dev/null and b/fonts/Avenir-LightOblique.woff differ diff --git a/fonts/Avenir-LightOblique.woff2 b/fonts/Avenir-LightOblique.woff2 new file mode 100644 index 0000000..343404a Binary files /dev/null and b/fonts/Avenir-LightOblique.woff2 differ diff --git a/fonts/Avenir-Medium.eot b/fonts/Avenir-Medium.eot new file mode 100644 index 0000000..63e54d6 Binary files /dev/null and b/fonts/Avenir-Medium.eot differ diff --git a/fonts/Avenir-Medium.ttf b/fonts/Avenir-Medium.ttf new file mode 100644 index 0000000..c5b6f38 Binary files /dev/null and b/fonts/Avenir-Medium.ttf differ diff --git a/fonts/Avenir-Medium.woff b/fonts/Avenir-Medium.woff new file mode 100644 index 0000000..a0f3051 Binary files /dev/null and b/fonts/Avenir-Medium.woff differ diff --git a/fonts/Avenir-Medium.woff2 b/fonts/Avenir-Medium.woff2 new file mode 100644 index 0000000..5b7d8f5 Binary files /dev/null and b/fonts/Avenir-Medium.woff2 differ diff --git a/fonts/Avenir-MediumOblique.eot b/fonts/Avenir-MediumOblique.eot new file mode 100644 index 0000000..c852663 Binary files /dev/null and b/fonts/Avenir-MediumOblique.eot differ diff --git a/fonts/Avenir-MediumOblique.ttf b/fonts/Avenir-MediumOblique.ttf new file mode 100644 index 0000000..9a83405 Binary files /dev/null and b/fonts/Avenir-MediumOblique.ttf differ diff --git a/fonts/Avenir-MediumOblique.woff b/fonts/Avenir-MediumOblique.woff new file mode 100644 index 0000000..572d2db Binary files /dev/null and b/fonts/Avenir-MediumOblique.woff differ diff --git a/fonts/Avenir-MediumOblique.woff2 b/fonts/Avenir-MediumOblique.woff2 new file mode 100644 index 0000000..6953380 Binary files /dev/null and b/fonts/Avenir-MediumOblique.woff2 differ diff --git a/fonts/Avenir-Oblique.eot b/fonts/Avenir-Oblique.eot new file mode 100644 index 0000000..c579088 Binary files /dev/null and b/fonts/Avenir-Oblique.eot differ diff --git a/fonts/Avenir-Oblique.ttf b/fonts/Avenir-Oblique.ttf new file mode 100644 index 0000000..97af983 Binary files /dev/null and b/fonts/Avenir-Oblique.ttf differ diff --git a/fonts/Avenir-Oblique.woff b/fonts/Avenir-Oblique.woff new file mode 100644 index 0000000..52e558d Binary files /dev/null and b/fonts/Avenir-Oblique.woff differ diff --git a/fonts/Avenir-Oblique.woff2 b/fonts/Avenir-Oblique.woff2 new file mode 100644 index 0000000..d2deb7a Binary files /dev/null and b/fonts/Avenir-Oblique.woff2 differ diff --git a/fonts/Avenir-Roman.eot b/fonts/Avenir-Roman.eot new file mode 100644 index 0000000..4ecef10 Binary files /dev/null and b/fonts/Avenir-Roman.eot differ diff --git a/fonts/Avenir-Roman.ttf b/fonts/Avenir-Roman.ttf new file mode 100644 index 0000000..3c43f40 Binary files /dev/null and b/fonts/Avenir-Roman.ttf differ diff --git a/fonts/Avenir-Roman.woff b/fonts/Avenir-Roman.woff new file mode 100644 index 0000000..c23b11e Binary files /dev/null and b/fonts/Avenir-Roman.woff differ diff --git a/fonts/Avenir-Roman.woff2 b/fonts/Avenir-Roman.woff2 new file mode 100644 index 0000000..24e0940 Binary files /dev/null and b/fonts/Avenir-Roman.woff2 differ diff --git a/fonts/fonts.scss b/fonts/fonts.scss new file mode 100644 index 0000000..fa00888 --- /dev/null +++ b/fonts/fonts.scss @@ -0,0 +1,23 @@ +@font-face { + font-family: "Avenir"; + src: url("Avenir-Roman.eot"); + src: local("Avenir Roman"), local("Avenir-Roman"), url("Avenir-Roman.eot?#iefix") format("embedded-opentype"), url("Avenir-Roman.woff2") format("woff2"), url("Avenir-Roman.woff") format("woff"), url("Avenir-Roman.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Avenir Book"; + src: url("Avenir-Book.eot"); + src: local("Avenir Book"), local("Avenir-Book"), url("Avenir-Book.eot?#iefix") format("embedded-opentype"), url("Avenir-Book.woff2") format("woff2"), url("Avenir-Book.woff") format("woff"), url("Avenir-Book.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Avenir"; + src: url("Avenir-Medium.eot"); + src: local("Avenir Medium"), local("Avenir-Medium"), url("Avenir-Medium.eot?#iefix") format("embedded-opentype"), url("Avenir-Medium.woff2") format("woff2"), url("Avenir-Medium.woff") format("woff"), url("Avenir-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; +} diff --git a/fonts/stylesheet.css b/fonts/stylesheet.css new file mode 100644 index 0000000..b202d4c --- /dev/null +++ b/fonts/stylesheet.css @@ -0,0 +1,144 @@ +@font-face { + font-family: 'Avenir'; + src: url('Avenir-Roman.eot'); + src: local('Avenir Roman'), local('Avenir-Roman'), + url('Avenir-Roman.eot?#iefix') format('embedded-opentype'), + url('Avenir-Roman.woff2') format('woff2'), + url('Avenir-Roman.woff') format('woff'), + url('Avenir-Roman.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Avenir'; + src: url('Avenir-Light.eot'); + src: local('Avenir Light'), local('Avenir-Light'), + url('Avenir-Light.eot?#iefix') format('embedded-opentype'), + url('Avenir-Light.woff2') format('woff2'), + url('Avenir-Light.woff') format('woff'), + url('Avenir-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: 'Avenir Book'; + src: url('Avenir-BookOblique.eot'); + src: local('Avenir Book Oblique'), local('Avenir-BookOblique'), + url('Avenir-BookOblique.eot?#iefix') format('embedded-opentype'), + url('Avenir-BookOblique.woff2') format('woff2'), + url('Avenir-BookOblique.woff') format('woff'), + url('Avenir-BookOblique.ttf') format('truetype'); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: 'Avenir Black Oblique'; + src: url('Avenir-BlackOblique.eot'); + src: local('Avenir Black Oblique'), local('Avenir-BlackOblique'), + url('Avenir-BlackOblique.eot?#iefix') format('embedded-opentype'), + url('Avenir-BlackOblique.woff2') format('woff2'), + url('Avenir-BlackOblique.woff') format('woff'), + url('Avenir-BlackOblique.ttf') format('truetype'); + font-weight: 900; + font-style: italic; +} + +@font-face { + font-family: 'Avenir'; + src: url('Avenir-Heavy.eot'); + src: local('Avenir Heavy'), local('Avenir-Heavy'), + url('Avenir-Heavy.eot?#iefix') format('embedded-opentype'), + url('Avenir-Heavy.woff2') format('woff2'), + url('Avenir-Heavy.woff') format('woff'), + url('Avenir-Heavy.ttf') format('truetype'); + font-weight: 900; + font-style: normal; +} + +@font-face { + font-family: 'Avenir'; + src: url('Avenir-HeavyOblique.eot'); + src: local('Avenir Heavy Oblique'), local('Avenir-HeavyOblique'), + url('Avenir-HeavyOblique.eot?#iefix') format('embedded-opentype'), + url('Avenir-HeavyOblique.woff2') format('woff2'), + url('Avenir-HeavyOblique.woff') format('woff'), + url('Avenir-HeavyOblique.ttf') format('truetype'); + font-weight: 900; + font-style: italic; +} + +@font-face { + font-family: 'Avenir'; + src: url('Avenir-MediumOblique.eot'); + src: local('Avenir Medium Oblique'), local('Avenir-MediumOblique'), + url('Avenir-MediumOblique.eot?#iefix') format('embedded-opentype'), + url('Avenir-MediumOblique.woff2') format('woff2'), + url('Avenir-MediumOblique.woff') format('woff'), + url('Avenir-MediumOblique.ttf') format('truetype'); + font-weight: 500; + font-style: italic; +} + +@font-face { + font-family: 'Avenir'; + src: url('Avenir-LightOblique.eot'); + src: local('Avenir Light Oblique'), local('Avenir-LightOblique'), + url('Avenir-LightOblique.eot?#iefix') format('embedded-opentype'), + url('Avenir-LightOblique.woff2') format('woff2'), + url('Avenir-LightOblique.woff') format('woff'), + url('Avenir-LightOblique.ttf') format('truetype'); + font-weight: 300; + font-style: italic; +} + +@font-face { + font-family: 'Avenir Book'; + src: url('Avenir-Book.eot'); + src: local('Avenir Book'), local('Avenir-Book'), + url('Avenir-Book.eot?#iefix') format('embedded-opentype'), + url('Avenir-Book.woff2') format('woff2'), + url('Avenir-Book.woff') format('woff'), + url('Avenir-Book.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Avenir'; + src: url('Avenir-Black.eot'); + src: local('Avenir Black'), local('Avenir-Black'), + url('Avenir-Black.eot?#iefix') format('embedded-opentype'), + url('Avenir-Black.woff2') format('woff2'), + url('Avenir-Black.woff') format('woff'), + url('Avenir-Black.ttf') format('truetype'); + font-weight: 900; + font-style: normal; +} + +@font-face { + font-family: 'Avenir'; + src: url('Avenir-Oblique.eot'); + src: local('Avenir Oblique'), local('Avenir-Oblique'), + url('Avenir-Oblique.eot?#iefix') format('embedded-opentype'), + url('Avenir-Oblique.woff2') format('woff2'), + url('Avenir-Oblique.woff') format('woff'), + url('Avenir-Oblique.ttf') format('truetype'); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: 'Avenir'; + src: url('Avenir-Medium.eot'); + src: local('Avenir Medium'), local('Avenir-Medium'), + url('Avenir-Medium.eot?#iefix') format('embedded-opentype'), + url('Avenir-Medium.woff2') format('woff2'), + url('Avenir-Medium.woff') format('woff'), + url('Avenir-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} + diff --git a/images/Ellipse.png b/images/Ellipse.png new file mode 100644 index 0000000..9404882 Binary files /dev/null and b/images/Ellipse.png differ diff --git a/images/Image.png b/images/Image.png new file mode 100644 index 0000000..458fee3 Binary files /dev/null and b/images/Image.png differ diff --git a/images/Rectangle 2.png b/images/Rectangle 2.png new file mode 100644 index 0000000..7e0efe2 Binary files /dev/null and b/images/Rectangle 2.png differ diff --git a/index.html b/index.html index c1de13f..4fc6b15 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,242 @@ - + - - - - Title - - - -

Hello Mate Academy

- - + + + + + qwe + + + + + + +
+
+ + +
+
+ +
+
+ +
+
+
+
+

Quiet apartment

+

Entire apartment

+
+
+

+ 4 guests +

+
+
+

+ 1 bed +

+
+
+

+ 1 bath +

+
+
+
+ City Apartment is newly renovated in the heart of Budapest, right in + the city center. Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam. +
+ +

Contact host

+ +
+

Amenities

+
+
+

Elevator

+

Washer

+
+
+

Hair dryer

+

Kitchen

+
+
+
+ +

Show All Amenities

+ +
+ +
+

+ Reviews +

+
+
+
+ +
+
+
John
+
September 2016
+
+
+
+
Lorem ipsum dolor sit amet, concectetur adipiscing et, sed + do elusmad tempor inciidunt ut abore et dolore magna + ‘qua. Ut enim ad minim veniam. +
+
+
+
+
+
+ +
+
+
John
+
September 2016
+
+
+
+
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua + ‘nial inn venlam.
+
+
+
+ +
+

+ Hosted by Jane +

+
+ Budapest, Hungary +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Beatae id in labore nulla obcaecati officiis quam. +
+ Contact Host +
+
+
+
+
+

25$ per night

+ + + +
+
+
+
+
+ + + diff --git a/styles/footer.css b/styles/footer.css new file mode 100644 index 0000000..3c11610 --- /dev/null +++ b/styles/footer.css @@ -0,0 +1,15 @@ +.footer { + display: grid; + width: 100%; + -webkit-box-shadow: 0 -1px 0 #e1e7ed; + box-shadow: 0 -1px 0 #e1e7ed; + grid-template-columns: repeat(3, 1fr); + justify-items: center; + margin-bottom: 35px; } + .footer__item--topic { + margin: 45px 0 20px; } + .footer__item a h5 { + font-weight: 300; + margin-bottom: 10px; } + +/*# sourceMappingURL=footer.css.map */ diff --git a/styles/footer.css.map b/styles/footer.css.map new file mode 100644 index 0000000..30bf191 --- /dev/null +++ b/styles/footer.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["footer.scss"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,WAAW;EACX,oCAA4B;UAA5B,4BAA4B;EAC5B,qCAAqC;EACrC,qBAAqB;EACrB,mBAAmB,EAAA;EAIjB;IACE,mBAAmB,EAAA;EAHtB;IAOG,gBAAgB;IAChB,mBAAmB,EAAA","file":"footer.css","sourcesContent":[".footer {\n display: grid;\n width: 100%;\n box-shadow: 0 -1px 0 #e1e7ed;\n grid-template-columns: repeat(3, 1fr);\n justify-items: center;\n margin-bottom: 35px;\n\n &__item {\n\n &--topic {\n margin: 45px 0 20px;\n }\n\n a h5 {\n font-weight: 300;\n margin-bottom: 10px;\n }\n }\n}\n"]} \ No newline at end of file diff --git a/styles/form.css b/styles/form.css new file mode 100644 index 0000000..7819e92 --- /dev/null +++ b/styles/form.css @@ -0,0 +1,35 @@ +.form { + border: 1px solid #e1e7ed; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 3px; } + .form__price { + font-weight: 300; + margin-bottom: 40px; } + .form__block { + margin: 30px 30px 40px; } + .form__block--area { + width: 100%; + border: 1px solid #e1e7ed; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 3px; + padding: 14px 17px; + margin-bottom: 1em; } + .form__btn { + border: none; + font-size: 1em; + color: white; + font-weight: 600; + width: 100%; + padding: 15px; + background-color: #fd5c63; + border-radius: 4px; + -webkit-transition: color 0.3s, background-color 0.3s, border 0.3s; + transition: color 0.3s, background-color 0.3s, border 0.3s; } + .form__btn:hover { + background-color: white; + color: #fd5c63; + border: 1px solid #fd5c63; } + +/*# sourceMappingURL=form.css.map */ diff --git a/styles/form.css.map b/styles/form.css.map new file mode 100644 index 0000000..632a9b7 --- /dev/null +++ b/styles/form.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["form.scss","_values.scss"],"names":[],"mappings":"AAEA;EACE,yBAAyB;EACzB,8BAAsB;UAAtB,sBAAsB;EACtB,kBAAkB,EAAA;EAClB;IACE,gBAAgB;IAChB,mBAAmB,EAAA;EAGrB;IACE,sBAAsB,EAAA;IAEtB;MACE,WAAW;MACX,yBAAyB;MACzB,8BAAsB;cAAtB,sBAAsB;MACtB,kBAAkB;MAClB,kBAAkB;MAClB,kBAAkB,EAAA;EAItB;IACE,YAAY;IACZ,cAAc;IACd,YAAY;IACZ,gBAAgB;IAChB,WAAW;IACX,aAAa;IACb,yBC7BqB;ID8BrB,kBAAkB;IAClB,kEAA0D;IAA1D,0DAA0D,EAAA;IAT3D;MAWG,uBAAuB;MACvB,cClCmB;MDmCnB,yBCnCmB,EAAA","file":"form.css","sourcesContent":["@import \"values\";\n\n.form {\n border: 1px solid #e1e7ed;\n box-sizing: border-box;\n border-radius: 3px;\n &__price {\n font-weight: 300;\n margin-bottom: 40px;\n }\n\n &__block {\n margin: 30px 30px 40px;\n\n &--area {\n width: 100%;\n border: 1px solid #e1e7ed;\n box-sizing: border-box;\n border-radius: 3px;\n padding: 14px 17px;\n margin-bottom: 1em;\n }\n }\n\n &__btn {\n border: none;\n font-size: 1em;\n color: white;\n font-weight: 600;\n width: 100%;\n padding: 15px;\n background-color: $font_color_pink;\n border-radius: 4px;\n transition: color 0.3s, background-color 0.3s, border 0.3s;\n &:hover {\n background-color: white;\n color: $font_color_pink;\n border: 1px solid $font_color_pink;\n }\n }\n}\n","$font_color_grey: #3d4e61;\n$font_color_btn: #118488;\n$font_color_pink: #fd5c63;\n"]} \ No newline at end of file diff --git a/styles/header.css b/styles/header.css new file mode 100644 index 0000000..5c5ee3b --- /dev/null +++ b/styles/header.css @@ -0,0 +1,39 @@ +.header__logo { + width: 30px; + height: 30px; + margin: 5px; } + +.header__block { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } + +.header__background img { + width: 100%; } + +.nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + max-width: 300px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } + .nav__item { + white-space: nowrap; + padding: 5px 15px; } + .nav__item:hover { + font-size: 1.2em; } + +.profile { + width: 30px; + height: 30px; + padding-right: 20px; } + +/*# sourceMappingURL=header.css.map */ diff --git a/styles/header.css.map b/styles/header.css.map new file mode 100644 index 0000000..b0fd3df --- /dev/null +++ b/styles/header.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["header.scss"],"names":[],"mappings":"AACE;EACE,WAAW;EACX,YAAY;EACZ,WAAW,EAAA;;AAGb;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,yBAA8B;MAA9B,sBAA8B;UAA9B,8BAA8B,EAAA;;AAGhC;EACE,WAAW,EAAA;;AAIf;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,gBAAgB;EAChB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,qBAAyB;MAAzB,kBAAyB;UAAzB,yBAAyB,EAAA;EACzB;IACE,mBAAmB;IACnB,iBAAiB,EAAA;IAFlB;MAKG,gBAAgB,EAAA;;AAKtB;EACE,WAAW;EACX,YAAY;EACZ,mBAAmB,EAAA","file":"header.css","sourcesContent":[".header {\n &__logo {\n width: 30px;\n height: 30px;\n margin: 5px;\n }\n\n &__block {\n display: flex;\n justify-content: space-between;\n }\n\n &__background img {\n width: 100%;\n }\n}\n\n.nav {\n display: flex;\n max-width: 300px;\n align-items: center;\n justify-content: flex-end;\n &__item {\n white-space: nowrap;\n padding: 5px 15px;\n\n &:hover {\n font-size: 1.2em;\n }\n }\n}\n\n.profile {\n width: 30px;\n height: 30px;\n padding-right: 20px;\n}\n"]} \ No newline at end of file diff --git a/styles/hosted.css b/styles/hosted.css new file mode 100644 index 0000000..9cc3381 --- /dev/null +++ b/styles/hosted.css @@ -0,0 +1,22 @@ +.hosted__topic--under { + font-size: 0.88em; + margin: 15px 0 20px; } + +.hosted__topic--text { + margin-bottom: 30px; } + +.hosted__btn { + font-weight: 600; + padding: 15px 25px; + color: #118488; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: 1px solid #118488; + border-radius: 4px; + -webkit-transition: color 0.3s, background-color 0.3s; + transition: color 0.3s, background-color 0.3s; } + .hosted__btn:hover { + color: white; + background-color: #118488; } + +/*# sourceMappingURL=hosted.css.map */ diff --git a/styles/hosted.css.map b/styles/hosted.css.map new file mode 100644 index 0000000..820823c --- /dev/null +++ b/styles/hosted.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["hosted.scss","_values.scss"],"names":[],"mappings":"AAII;EACE,iBAAiB;EACjB,mBAAmB,EAAA;;AAErB;EACE,mBAAmB,EAAA;;AAGvB;EACE,gBAAgB;EAChB,kBAAkB;EAClB,cCdoB;EDepB,8BAAsB;UAAtB,sBAAsB;EACtB,yBChBoB;EDiBpB,kBAAkB;EAClB,qDAA6C;EAA7C,6CAA6C,EAAA;EAP9C;IASG,YAAY;IACZ,yBCrBkB,EAAA","file":"hosted.css","sourcesContent":["@import \"values\";\n\n.hosted {\n &__topic {\n &--under {\n font-size: 0.88em;\n margin: 15px 0 20px;\n }\n &--text {\n margin-bottom: 30px;\n }\n }\n &__btn {\n font-weight: 600;\n padding: 15px 25px;\n color: $font_color_btn;\n box-sizing: border-box;\n border: 1px solid $font_color_btn;\n border-radius: 4px;\n transition: color 0.3s, background-color 0.3s;\n &:hover {\n color: white;\n background-color: $font_color_btn;\n }\n }\n}\n","$font_color_grey: #3d4e61;\n$font_color_btn: #118488;\n$font_color_pink: #fd5c63;\n"]} \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index d04391a..f361aba 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,14 +1,242 @@ -h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; } +@charset "UTF-8"; +ul { + margin: 0; + padding: 0; + list-style-type: none; } + +a { + color: #3d4e61; + text-decoration: none; } + +h1, +h2, +h3, +h4, +h5, +h6, +p { + font-size: 1em; + margin: 0; } + +.header__logo { + width: 30px; + height: 30px; + margin: 5px; } + +.header__block { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } + +.header__background img { + width: 100%; } + +.nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + max-width: 300px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } + .nav__item { + white-space: nowrap; + padding: 5px 15px; } + .nav__item:hover { + font-size: 1.2em; } + +.profile { + width: 30px; + height: 30px; + padding-right: 20px; } + +.order__title { + font-size: 2.25em; } + .order__title--under { + margin: 25px 0; + color: #687c94; } + +.order__text { + margin: 30px 0; + line-height: 24px; } + +.filter { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .filter__item { + margin-right: 30px; } + +.amenities { + margin-bottom: 20px; } + .amenities__topic { + font-size: 1.25em; + margin: 50px 0 25px; } + .amenities__block { + display: grid; + grid-template-columns: 10em 10em; } + +.reviews__topic { + margin-bottom: 40px; } + +.reviews__item { + margin-bottom: 35px; } + .reviews__item .name { + font-size: 1.25em; } + .reviews__item .date { + font-size: 0.88em; } + .reviews__item--info { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-bottom: 25px; } + .reviews__item--info .photo { + margin-right: 20px; + width: 50px; + height: 50px; + border-radius: 50%; + background-color: #c4c4c4; } + +.hosted__topic--under { + font-size: 0.88em; + margin: 15px 0 20px; } + +.hosted__topic--text { + margin-bottom: 30px; } + +.hosted__btn { + font-weight: 600; + padding: 15px 25px; + color: #118488; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: 1px solid #118488; + border-radius: 4px; + -webkit-transition: color 0.3s, background-color 0.3s; + transition: color 0.3s, background-color 0.3s; } + .hosted__btn:hover { + color: white; + background-color: #118488; } + +.footer { + display: grid; + width: 100%; + -webkit-box-shadow: 0 -1px 0 #e1e7ed; + box-shadow: 0 -1px 0 #e1e7ed; + grid-template-columns: repeat(3, 1fr); + justify-items: center; + margin-bottom: 35px; } + .footer__item--topic { + margin: 45px 0 20px; } + .footer__item a h5 { + font-weight: 300; + margin-bottom: 10px; } + +.form { + border: 1px solid #e1e7ed; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 3px; } + .form__price { + font-weight: 300; + margin-bottom: 40px; } + .form__block { + margin: 30px 30px 40px; } + .form__block--area { + width: 100%; + border: 1px solid #e1e7ed; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 3px; + padding: 14px 17px; + margin-bottom: 1em; } + .form__btn { + border: none; + font-size: 1em; + color: white; + font-weight: 600; + width: 100%; + padding: 15px; + background-color: #fd5c63; + border-radius: 4px; + -webkit-transition: color 0.3s, background-color 0.3s, border 0.3s; + transition: color 0.3s, background-color 0.3s, border 0.3s; } + .form__btn:hover { + background-color: white; + color: #fd5c63; + border: 1px solid #fd5c63; } @font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; } + font-family: Avenir; + /* Гарнитура шрифта */ + src: url("./../fonts/Avenir-Book.ttf"); + /* Путь к файлу со шрифтом */ } + +@-webkit-keyframes lineUnderLink { + from { + -webkit-transform: translateX(0); + transform: translateX(0); + width: 0; } + to { + width: 100%; + -webkit-transform: translateX(100); + transform: translateX(100); } } + +@keyframes lineUnderLink { + from { + -webkit-transform: translateX(0); + transform: translateX(0); + width: 0; } + to { + width: 100%; + -webkit-transform: translateX(100); + transform: translateX(100); } } + +.body { + margin: 0; + font-family: Avenir, sans-serif; + color: #3d4e61; + font-size: 16px; } + +.container { + max-width: 900px; + display: grid; + margin: 40px auto 75px; + -webkit-column-gap: 80px; + -moz-column-gap: 80px; + column-gap: 80px; + grid-template-columns: 1fr 330px; } + +.section { + margin-bottom: 70px; } + +.topic { + font-size: 1.75em; } -body { - background: #eee; } +.order__link { + -webkit-transition: color 0.3s; + transition: color 0.3s; + position: relative; } + .order__link h3 { + display: inline; } + .order__link:hover { + color: #fd5c63; } + .order__link:hover:after { + content: ""; + width: 0%; + position: absolute; + top: 100%; + left: 0; + height: 2px; + background-color: #fd5c63; + border-radius: 8px; + -webkit-animation: lineUnderLink 0.3s linear both; + animation: lineUnderLink 0.3s linear both; } /*# sourceMappingURL=main.css.map */ diff --git a/styles/main.css.map b/styles/main.css.map index b97d669..2c1cc02 100644 --- a/styles/main.css.map +++ b/styles/main.css.map @@ -1 +1 @@ -{"version":3,"sources":["utils/_extends.scss","_fonts.scss","main.scss","utils/_vars.scss"],"names":[],"mappings":"AAAA;EACE,iCAAiC;EACjC,gBAAgB,EAAA;;ACFlB;EACE,qBAAqB;EACrB,+DAA+D;EAC/D,mBAAmB;EACnB,kBAAkB,EAAA;;ACApB;EACE,gBCLW,EAAA","file":"main.css","sourcesContent":["%h1 {\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n}\n","@font-face {\n font-family: \"Roboto\";\n src: url(\"../fonts/Roboto-Regular-webfont.woff\") format(\"woff\");\n font-weight: normal;\n font-style: normal;\n}\n","@import \"utils\";\n@import \"fonts\";\n@import \"typography\";\n\nbody {\n background: $c-gray;\n}\n","$c-gray: #eee;\n"]} \ No newline at end of file +{"version":3,"sources":["main.css","resetStyles.scss","_values.scss","header.scss","order.scss","reviews.scss","hosted.scss","footer.scss","form.scss","main.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACEhB;EACE,SAAS;EACT,UAAU;EACV,qBAAqB,EAAA;;AAGvB;EACE,cCTuB;EDUvB,qBAAqB,EAAA;;AAGvB;;;;;;;EAOE,cAAc;EACd,SAAS,EAAA;;AEpBT;EACE,WAAW;EACX,YAAY;EACZ,WAAW,EAAA;;AAGb;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,yBAA8B;MAA9B,sBAA8B;UAA9B,8BAA8B,EAAA;;AAGhC;EACE,WAAW,EAAA;;AAIf;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,gBAAgB;EAChB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,qBAAyB;MAAzB,kBAAyB;UAAzB,yBAAyB,EAAA;EACzB;IACE,mBAAmB;IACnB,iBAAiB,EAAA;IAFlB;MAKG,gBAAgB,EAAA;;AAKtB;EACE,WAAW;EACX,YAAY;EACZ,mBAAmB,EAAA;;AClCnB;EACE,iBAAiB,EAAA;EACjB;IACE,cAAc;IACd,cAAc,EAAA;;AAGlB;EACE,cAAc;EACd,iBAAiB,EAAA;;AAIrB;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa,EAAA;EACb;IACE,kBAAkB,EAAA;;AAItB;EACE,mBAAmB,EAAA;EACnB;IACE,iBAAiB;IACjB,mBAAmB,EAAA;EAGrB;IACE,aAAa;IACb,gCAAgC,EAAA;;AC7BlC;EACE,mBAAmB,EAAA;;AAErB;EACE,mBAAmB,EAAA;EADpB;IAGG,iBAAiB,EAAA;EAHpB;IAMG,iBAAiB,EAAA;EAEnB;IACE,oBAAa;IAAb,oBAAa;IAAb,aAAa;IACb,mBAAmB,EAAA;IAFpB;MAIG,kBAAkB;MAClB,WAAW;MACX,YAAY;MACZ,kBAAkB;MAClB,yBAAyB,EAAA;;AChB7B;EACE,iBAAiB;EACjB,mBAAmB,EAAA;;AAErB;EACE,mBAAmB,EAAA;;AAGvB;EACE,gBAAgB;EAChB,kBAAkB;EAClB,cJdoB;EIepB,8BAAsB;UAAtB,sBAAsB;EACtB,yBJhBoB;EIiBpB,kBAAkB;EAClB,qDAA6C;EAA7C,6CAA6C,EAAA;EAP9C;IASG,YAAY;IACZ,yBJrBkB,EAAA;;AKDxB;EACE,aAAa;EACb,WAAW;EACX,oCAA4B;UAA5B,4BAA4B;EAC5B,qCAAqC;EACrC,qBAAqB;EACrB,mBAAmB,EAAA;EAIjB;IACE,mBAAmB,EAAA;EAHtB;IAOG,gBAAgB;IAChB,mBAAmB,EAAA;;ACdzB;EACE,yBAAyB;EACzB,8BAAsB;UAAtB,sBAAsB;EACtB,kBAAkB,EAAA;EAClB;IACE,gBAAgB;IAChB,mBAAmB,EAAA;EAGrB;IACE,sBAAsB,EAAA;IAEtB;MACE,WAAW;MACX,yBAAyB;MACzB,8BAAsB;cAAtB,sBAAsB;MACtB,kBAAkB;MAClB,kBAAkB;MAClB,kBAAkB,EAAA;EAItB;IACE,YAAY;IACZ,cAAc;IACd,YAAY;IACZ,gBAAgB;IAChB,WAAW;IACX,aAAa;IACb,yBN7BqB;IM8BrB,kBAAkB;IAClB,kEAA0D;IAA1D,0DAA0D,EAAA;IAT3D;MAWG,uBAAuB;MACvB,cNlCmB;MMmCnB,yBNnCmB,EAAA;;AOOzB;EACE,mBAAmB;EAAE,qBAAA;EACrB,sCAAsC;EAAE,4BAAA,EAA6B;;AAGvE;EACE;IACE,gCAAwB;YAAxB,wBAAwB;IACxB,QAAQ,EAAA;EAGV;IACE,WAAW;IACX,kCAA0B;YAA1B,0BAA0B,EAAA,EAAA;;AAR9B;EACE;IACE,gCAAwB;YAAxB,wBAAwB;IACxB,QAAQ,EAAA;EAGV;IACE,WAAW;IACX,kCAA0B;YAA1B,0BAA0B,EAAA,EAAA;;AAI9B;EACE,SAAS;EACT,+BAA+B;EAC/B,cP7BuB;EO8BvB,eAAe,EAAA;;AAGjB;EACE,gBAAgB;EAChB,aAAa;EACb,sBAAsB;EACtB,wBAAgB;KAAhB,qBAAgB;UAAhB,gBAAgB;EAChB,gCAAgC,EAAA;;AAGlC;EACE,mBAAmB,EAAA;;AAGrB;EACE,iBAAiB,EAAA;;AAGnB;EACE,8BAAsB;EAAtB,sBAAsB;EACtB,kBAAkB,EAAA;EAFpB;IAII,eAAe,EAAA;EAJnB;IAkBI,cPjEqB,EAAA;IO+CzB;MAQM,WAAW;MACX,SAAS;MACT,kBAAkB;MAClB,SAAS;MACT,OAAO;MACP,WAAW;MACX,yBP7DmB;MO8DnB,kBAAkB;MAClB,iDAAyC;cAAzC,yCAAyC,EAAA","file":"main.css","sourcesContent":["@charset \"UTF-8\";\nul {\n margin: 0;\n padding: 0;\n list-style-type: none; }\n\na {\n color: #3d4e61;\n text-decoration: none; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np {\n font-size: 1em;\n margin: 0; }\n\n.header__logo {\n width: 30px;\n height: 30px;\n margin: 5px; }\n\n.header__block {\n display: flex;\n justify-content: space-between; }\n\n.header__background img {\n width: 100%; }\n\n.nav {\n display: flex;\n max-width: 300px;\n align-items: center;\n justify-content: flex-end; }\n .nav__item {\n white-space: nowrap;\n padding: 5px 15px; }\n .nav__item:hover {\n font-size: 1.2em; }\n\n.profile {\n width: 30px;\n height: 30px;\n padding-right: 20px; }\n\n.order__title {\n font-size: 2.25em; }\n .order__title--under {\n margin: 25px 0;\n color: #687c94; }\n\n.order__text {\n margin: 30px 0;\n line-height: 24px; }\n\n.filter {\n display: flex; }\n .filter__item {\n margin-right: 30px; }\n\n.amenities {\n margin-bottom: 20px; }\n .amenities__topic {\n font-size: 1.25em;\n margin: 50px 0 25px; }\n .amenities__block {\n display: grid;\n grid-template-columns: 10em 10em; }\n\n.reviews__topic {\n margin-bottom: 40px; }\n\n.reviews__item {\n margin-bottom: 35px; }\n .reviews__item .name {\n font-size: 1.25em; }\n .reviews__item .date {\n font-size: 0.88em; }\n .reviews__item--info {\n display: flex;\n margin-bottom: 25px; }\n .reviews__item--info .photo {\n margin-right: 20px;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #c4c4c4; }\n\n.hosted__topic--under {\n font-size: 0.88em;\n margin: 15px 0 20px; }\n\n.hosted__topic--text {\n margin-bottom: 30px; }\n\n.hosted__btn {\n font-weight: 600;\n padding: 15px 25px;\n color: #118488;\n box-sizing: border-box;\n border: 1px solid #118488;\n border-radius: 4px;\n transition: color 0.3s, background-color 0.3s; }\n .hosted__btn:hover {\n color: white;\n background-color: #118488; }\n\n.footer {\n display: grid;\n width: 100%;\n box-shadow: 0 -1px 0 #e1e7ed;\n grid-template-columns: repeat(3, 1fr);\n justify-items: center;\n margin-bottom: 35px; }\n .footer__item--topic {\n margin: 45px 0 20px; }\n .footer__item a h5 {\n font-weight: 300;\n margin-bottom: 10px; }\n\n.form {\n border: 1px solid #e1e7ed;\n box-sizing: border-box;\n border-radius: 3px; }\n .form__price {\n font-weight: 300;\n margin-bottom: 40px; }\n .form__block {\n margin: 30px 30px 40px; }\n .form__block--area {\n width: 100%;\n border: 1px solid #e1e7ed;\n box-sizing: border-box;\n border-radius: 3px;\n padding: 14px 17px;\n margin-bottom: 1em; }\n .form__btn {\n border: none;\n font-size: 1em;\n color: white;\n font-weight: 600;\n width: 100%;\n padding: 15px;\n background-color: #fd5c63;\n border-radius: 4px;\n transition: color 0.3s, background-color 0.3s, border 0.3s; }\n .form__btn:hover {\n background-color: white;\n color: #fd5c63;\n border: 1px solid #fd5c63; }\n\n@font-face {\n font-family: Avenir;\n /* Гарнитура шрифта */\n src: url(\"./../fonts/Avenir-Book.ttf\");\n /* Путь к файлу со шрифтом */ }\n\n@keyframes lineUnderLink {\n from {\n transform: translateX(0);\n width: 0; }\n to {\n width: 100%;\n transform: translateX(100); } }\n\n.body {\n margin: 0;\n font-family: Avenir, sans-serif;\n color: #3d4e61;\n font-size: 16px; }\n\n.container {\n max-width: 900px;\n display: grid;\n margin: 40px auto 75px;\n column-gap: 80px;\n grid-template-columns: 1fr 330px; }\n\n.section {\n margin-bottom: 70px; }\n\n.topic {\n font-size: 1.75em; }\n\n.order__link {\n transition: color 0.3s;\n position: relative; }\n .order__link h3 {\n display: inline; }\n .order__link:hover {\n color: #fd5c63; }\n .order__link:hover:after {\n content: \"\";\n width: 0%;\n position: absolute;\n top: 100%;\n left: 0;\n height: 2px;\n background-color: #fd5c63;\n border-radius: 8px;\n animation: lineUnderLink 0.3s linear both; }\n","@import \"values\";\n\nul {\n margin: 0;\n padding: 0;\n list-style-type: none;\n}\n\na {\n color: $font_color_grey;\n text-decoration: none;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np {\n font-size: 1em;\n margin: 0;\n}\n","$font_color_grey: #3d4e61;\n$font_color_btn: #118488;\n$font_color_pink: #fd5c63;\n",".header {\n &__logo {\n width: 30px;\n height: 30px;\n margin: 5px;\n }\n\n &__block {\n display: flex;\n justify-content: space-between;\n }\n\n &__background img {\n width: 100%;\n }\n}\n\n.nav {\n display: flex;\n max-width: 300px;\n align-items: center;\n justify-content: flex-end;\n &__item {\n white-space: nowrap;\n padding: 5px 15px;\n\n &:hover {\n font-size: 1.2em;\n }\n }\n}\n\n.profile {\n width: 30px;\n height: 30px;\n padding-right: 20px;\n}\n",".order {\n &__title {\n font-size: 2.25em;\n &--under {\n margin: 25px 0;\n color: #687c94;\n }\n }\n &__text {\n margin: 30px 0;\n line-height: 24px;\n }\n}\n\n.filter {\n display: flex;\n &__item {\n margin-right: 30px;\n }\n}\n\n.amenities {\n margin-bottom: 20px;\n &__topic {\n font-size: 1.25em;\n margin: 50px 0 25px;\n }\n\n &__block {\n display: grid;\n grid-template-columns: 10em 10em;\n }\n}\n",".reviews {\n &__topic {\n margin-bottom: 40px;\n }\n &__item {\n margin-bottom: 35px;\n .name {\n font-size: 1.25em;\n }\n .date {\n font-size: 0.88em;\n }\n &--info {\n display: flex;\n margin-bottom: 25px;\n .photo {\n margin-right: 20px;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #c4c4c4;\n }\n }\n }\n}\n","@import \"values\";\n\n.hosted {\n &__topic {\n &--under {\n font-size: 0.88em;\n margin: 15px 0 20px;\n }\n &--text {\n margin-bottom: 30px;\n }\n }\n &__btn {\n font-weight: 600;\n padding: 15px 25px;\n color: $font_color_btn;\n box-sizing: border-box;\n border: 1px solid $font_color_btn;\n border-radius: 4px;\n transition: color 0.3s, background-color 0.3s;\n &:hover {\n color: white;\n background-color: $font_color_btn;\n }\n }\n}\n",".footer {\n display: grid;\n width: 100%;\n box-shadow: 0 -1px 0 #e1e7ed;\n grid-template-columns: repeat(3, 1fr);\n justify-items: center;\n margin-bottom: 35px;\n\n &__item {\n\n &--topic {\n margin: 45px 0 20px;\n }\n\n a h5 {\n font-weight: 300;\n margin-bottom: 10px;\n }\n }\n}\n","@import \"values\";\n\n.form {\n border: 1px solid #e1e7ed;\n box-sizing: border-box;\n border-radius: 3px;\n &__price {\n font-weight: 300;\n margin-bottom: 40px;\n }\n\n &__block {\n margin: 30px 30px 40px;\n\n &--area {\n width: 100%;\n border: 1px solid #e1e7ed;\n box-sizing: border-box;\n border-radius: 3px;\n padding: 14px 17px;\n margin-bottom: 1em;\n }\n }\n\n &__btn {\n border: none;\n font-size: 1em;\n color: white;\n font-weight: 600;\n width: 100%;\n padding: 15px;\n background-color: $font_color_pink;\n border-radius: 4px;\n transition: color 0.3s, background-color 0.3s, border 0.3s;\n &:hover {\n background-color: white;\n color: $font_color_pink;\n border: 1px solid $font_color_pink;\n }\n }\n}\n","@import \"values\";\n@import \"resetStyles\";\n@import \"header\";\n@import \"order\";\n@import \"reviews\";\n@import \"hosted\";\n@import \"footer\";\n@import \"form\";\n\n@font-face {\n font-family: Avenir; /* Гарнитура шрифта */\n src: url(\"./../fonts/Avenir-Book.ttf\"); /* Путь к файлу со шрифтом */\n}\n\n@keyframes lineUnderLink {\n from {\n transform: translateX(0);\n width: 0;\n }\n\n to {\n width: 100%;\n transform: translateX(100);\n }\n}\n\n.body {\n margin: 0;\n font-family: Avenir, sans-serif;\n color: $font_color_grey;\n font-size: 16px;\n}\n\n.container {\n max-width: 900px;\n display: grid;\n margin: 40px auto 75px;\n column-gap: 80px;\n grid-template-columns: 1fr 330px;\n}\n\n.section {\n margin-bottom: 70px;\n}\n\n.topic {\n font-size: 1.75em;\n}\n\n.order__link {\n transition: color 0.3s;\n position: relative;\n h3 {\n display: inline;\n }\n &:hover {\n &:after {\n content: \"\";\n width: 0%;\n position: absolute;\n top: 100%;\n left: 0;\n height: 2px;\n background-color: $font_color_pink;\n border-radius: 8px;\n animation: lineUnderLink 0.3s linear both;\n }\n color: $font_color_pink;\n }\n}\n"]} \ No newline at end of file diff --git a/styles/order.css b/styles/order.css new file mode 100644 index 0000000..4e660cb --- /dev/null +++ b/styles/order.css @@ -0,0 +1,27 @@ +.order__title { + font-size: 2.25em; } + .order__title--under { + margin: 25px 0; + color: #687c94; } + +.order__text { + margin: 30px 0; + line-height: 24px; } + +.filter { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .filter__item { + margin-right: 30px; } + +.amenities { + margin-bottom: 20px; } + .amenities__topic { + font-size: 1.25em; + margin: 50px 0 25px; } + .amenities__block { + display: grid; + grid-template-columns: 10em 10em; } + +/*# sourceMappingURL=order.css.map */ diff --git a/styles/order.css.map b/styles/order.css.map new file mode 100644 index 0000000..0792aae --- /dev/null +++ b/styles/order.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["order.scss"],"names":[],"mappings":"AACE;EACE,iBAAiB,EAAA;EACjB;IACE,cAAc;IACd,cAAc,EAAA;;AAGlB;EACE,cAAc;EACd,iBAAiB,EAAA;;AAIrB;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa,EAAA;EACb;IACE,kBAAkB,EAAA;;AAItB;EACE,mBAAmB,EAAA;EACnB;IACE,iBAAiB;IACjB,mBAAmB,EAAA;EAGrB;IACE,aAAa;IACb,gCAAgC,EAAA","file":"order.css","sourcesContent":[".order {\n &__title {\n font-size: 2.25em;\n &--under {\n margin: 25px 0;\n color: #687c94;\n }\n }\n &__text {\n margin: 30px 0;\n line-height: 24px;\n }\n}\n\n.filter {\n display: flex;\n &__item {\n margin-right: 30px;\n }\n}\n\n.amenities {\n margin-bottom: 20px;\n &__topic {\n font-size: 1.25em;\n margin: 50px 0 25px;\n }\n\n &__block {\n display: grid;\n grid-template-columns: 10em 10em;\n }\n}\n"]} \ No newline at end of file diff --git a/styles/resetStyles.css b/styles/resetStyles.css new file mode 100644 index 0000000..6a7dfeb --- /dev/null +++ b/styles/resetStyles.css @@ -0,0 +1,20 @@ +ul { + margin: 0; + padding: 0; + list-style-type: none; } + +a { + color: #3d4e61; + text-decoration: none; } + +h1, +h2, +h3, +h4, +h5, +h6, +p { + font-size: 1em; + margin: 0; } + +/*# sourceMappingURL=resetStyles.css.map */ diff --git a/styles/resetStyles.css.map b/styles/resetStyles.css.map new file mode 100644 index 0000000..0c6c0e0 --- /dev/null +++ b/styles/resetStyles.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["resetStyles.scss","_values.scss"],"names":[],"mappings":"AAEA;EACE,SAAS;EACT,UAAU;EACV,qBAAqB,EAAA;;AAGvB;EACE,cCTuB;EDUvB,qBAAqB,EAAA;;AAGvB;;;;;;;EAOE,cAAc;EACd,SAAS,EAAA","file":"resetStyles.css","sourcesContent":["@import \"values\";\n\nul {\n margin: 0;\n padding: 0;\n list-style-type: none;\n}\n\na {\n color: $font_color_grey;\n text-decoration: none;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np {\n font-size: 1em;\n margin: 0;\n}\n","$font_color_grey: #3d4e61;\n$font_color_btn: #118488;\n$font_color_pink: #fd5c63;\n"]} \ No newline at end of file diff --git a/styles/reviews.css b/styles/reviews.css new file mode 100644 index 0000000..c0b7f5f --- /dev/null +++ b/styles/reviews.css @@ -0,0 +1,22 @@ +.reviews__topic { + margin-bottom: 40px; } + +.reviews__item { + margin-bottom: 35px; } + .reviews__item .name { + font-size: 1.25em; } + .reviews__item .date { + font-size: 0.88em; } + .reviews__item--info { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-bottom: 25px; } + .reviews__item--info .photo { + margin-right: 20px; + width: 50px; + height: 50px; + border-radius: 50%; + background-color: #c4c4c4; } + +/*# sourceMappingURL=reviews.css.map */ diff --git a/styles/reviews.css.map b/styles/reviews.css.map new file mode 100644 index 0000000..9e4c283 --- /dev/null +++ b/styles/reviews.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["reviews.scss"],"names":[],"mappings":"AACE;EACE,mBAAmB,EAAA;;AAErB;EACE,mBAAmB,EAAA;EADpB;IAGG,iBAAiB,EAAA;EAHpB;IAMG,iBAAiB,EAAA;EAEnB;IACE,oBAAa;IAAb,oBAAa;IAAb,aAAa;IACb,mBAAmB,EAAA;IAFpB;MAIG,kBAAkB;MAClB,WAAW;MACX,YAAY;MACZ,kBAAkB;MAClB,yBAAyB,EAAA","file":"reviews.css","sourcesContent":[".reviews {\n &__topic {\n margin-bottom: 40px;\n }\n &__item {\n margin-bottom: 35px;\n .name {\n font-size: 1.25em;\n }\n .date {\n font-size: 0.88em;\n }\n &--info {\n display: flex;\n margin-bottom: 25px;\n .photo {\n margin-right: 20px;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #c4c4c4;\n }\n }\n }\n}\n"]} \ No newline at end of file