diff --git a/README.md b/README.md index 7fa4acc..b903750 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ # Base layout template with Gulp, SCSS and Stylelint 1. Create a repo using this template 1. Replace `` and `` with your Github username and the new repo name - - [DEMO LINK](https://.github.io//) + - [DEMO LINK](https://ilya-maker.github.io/gulp-template/) diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/fonts/Avenir-Black.eot b/src/fonts/Avenir-Black.eot new file mode 100644 index 0000000..ba08db8 Binary files /dev/null and b/src/fonts/Avenir-Black.eot differ diff --git a/src/fonts/Avenir-Black.ttf b/src/fonts/Avenir-Black.ttf new file mode 100644 index 0000000..4051b41 Binary files /dev/null and b/src/fonts/Avenir-Black.ttf differ diff --git a/src/fonts/Avenir-Black.woff b/src/fonts/Avenir-Black.woff new file mode 100644 index 0000000..523b134 Binary files /dev/null and b/src/fonts/Avenir-Black.woff differ diff --git a/src/fonts/Avenir-Black.woff2 b/src/fonts/Avenir-Black.woff2 new file mode 100644 index 0000000..51dbade Binary files /dev/null and b/src/fonts/Avenir-Black.woff2 differ diff --git a/src/fonts/Avenir-BlackOblique.eot b/src/fonts/Avenir-BlackOblique.eot new file mode 100644 index 0000000..de20e1a Binary files /dev/null and b/src/fonts/Avenir-BlackOblique.eot differ diff --git a/src/fonts/Avenir-BlackOblique.ttf b/src/fonts/Avenir-BlackOblique.ttf new file mode 100644 index 0000000..b34b12d Binary files /dev/null and b/src/fonts/Avenir-BlackOblique.ttf differ diff --git a/src/fonts/Avenir-BlackOblique.woff b/src/fonts/Avenir-BlackOblique.woff new file mode 100644 index 0000000..eec53fb Binary files /dev/null and b/src/fonts/Avenir-BlackOblique.woff differ diff --git a/src/fonts/Avenir-BlackOblique.woff2 b/src/fonts/Avenir-BlackOblique.woff2 new file mode 100644 index 0000000..ebe39bf Binary files /dev/null and b/src/fonts/Avenir-BlackOblique.woff2 differ diff --git a/src/fonts/Avenir-Book.eot b/src/fonts/Avenir-Book.eot new file mode 100644 index 0000000..b63b9ae Binary files /dev/null and b/src/fonts/Avenir-Book.eot differ diff --git a/src/fonts/Avenir-Book.ttf b/src/fonts/Avenir-Book.ttf new file mode 100644 index 0000000..82aca05 Binary files /dev/null and b/src/fonts/Avenir-Book.ttf differ diff --git a/src/fonts/Avenir-Book.woff b/src/fonts/Avenir-Book.woff new file mode 100644 index 0000000..5a6f31c Binary files /dev/null and b/src/fonts/Avenir-Book.woff differ diff --git a/src/fonts/Avenir-Book.woff2 b/src/fonts/Avenir-Book.woff2 new file mode 100644 index 0000000..15a72cf Binary files /dev/null and b/src/fonts/Avenir-Book.woff2 differ diff --git a/src/fonts/Avenir-BookOblique.eot b/src/fonts/Avenir-BookOblique.eot new file mode 100644 index 0000000..500ab3b Binary files /dev/null and b/src/fonts/Avenir-BookOblique.eot differ diff --git a/src/fonts/Avenir-BookOblique.ttf b/src/fonts/Avenir-BookOblique.ttf new file mode 100644 index 0000000..76fe7be Binary files /dev/null and b/src/fonts/Avenir-BookOblique.ttf differ diff --git a/src/fonts/Avenir-BookOblique.woff b/src/fonts/Avenir-BookOblique.woff new file mode 100644 index 0000000..a643b12 Binary files /dev/null and b/src/fonts/Avenir-BookOblique.woff differ diff --git a/src/fonts/Avenir-BookOblique.woff2 b/src/fonts/Avenir-BookOblique.woff2 new file mode 100644 index 0000000..96e370b Binary files /dev/null and b/src/fonts/Avenir-BookOblique.woff2 differ diff --git a/src/fonts/Avenir-Heavy.eot b/src/fonts/Avenir-Heavy.eot new file mode 100644 index 0000000..e4eecaa Binary files /dev/null and b/src/fonts/Avenir-Heavy.eot differ diff --git a/src/fonts/Avenir-Heavy.ttf b/src/fonts/Avenir-Heavy.ttf new file mode 100644 index 0000000..df516d6 Binary files /dev/null and b/src/fonts/Avenir-Heavy.ttf differ diff --git a/src/fonts/Avenir-Heavy.woff b/src/fonts/Avenir-Heavy.woff new file mode 100644 index 0000000..b33d505 Binary files /dev/null and b/src/fonts/Avenir-Heavy.woff differ diff --git a/src/fonts/Avenir-Heavy.woff2 b/src/fonts/Avenir-Heavy.woff2 new file mode 100644 index 0000000..0b6b273 Binary files /dev/null and b/src/fonts/Avenir-Heavy.woff2 differ diff --git a/src/fonts/Avenir-HeavyOblique.eot b/src/fonts/Avenir-HeavyOblique.eot new file mode 100644 index 0000000..0cd33fe Binary files /dev/null and b/src/fonts/Avenir-HeavyOblique.eot differ diff --git a/src/fonts/Avenir-HeavyOblique.ttf b/src/fonts/Avenir-HeavyOblique.ttf new file mode 100644 index 0000000..2888068 Binary files /dev/null and b/src/fonts/Avenir-HeavyOblique.ttf differ diff --git a/src/fonts/Avenir-HeavyOblique.woff b/src/fonts/Avenir-HeavyOblique.woff new file mode 100644 index 0000000..91f8a6d Binary files /dev/null and b/src/fonts/Avenir-HeavyOblique.woff differ diff --git a/src/fonts/Avenir-HeavyOblique.woff2 b/src/fonts/Avenir-HeavyOblique.woff2 new file mode 100644 index 0000000..8196bc2 Binary files /dev/null and b/src/fonts/Avenir-HeavyOblique.woff2 differ diff --git a/src/fonts/Avenir-Light.eot b/src/fonts/Avenir-Light.eot new file mode 100644 index 0000000..65edc62 Binary files /dev/null and b/src/fonts/Avenir-Light.eot differ diff --git a/src/fonts/Avenir-Light.ttf b/src/fonts/Avenir-Light.ttf new file mode 100644 index 0000000..6cab226 Binary files /dev/null and b/src/fonts/Avenir-Light.ttf differ diff --git a/src/fonts/Avenir-Light.woff b/src/fonts/Avenir-Light.woff new file mode 100644 index 0000000..77b383a Binary files /dev/null and b/src/fonts/Avenir-Light.woff differ diff --git a/src/fonts/Avenir-Light.woff2 b/src/fonts/Avenir-Light.woff2 new file mode 100644 index 0000000..6ffeb3e Binary files /dev/null and b/src/fonts/Avenir-Light.woff2 differ diff --git a/src/fonts/Avenir-LightOblique.eot b/src/fonts/Avenir-LightOblique.eot new file mode 100644 index 0000000..298ff20 Binary files /dev/null and b/src/fonts/Avenir-LightOblique.eot differ diff --git a/src/fonts/Avenir-LightOblique.ttf b/src/fonts/Avenir-LightOblique.ttf new file mode 100644 index 0000000..765378d Binary files /dev/null and b/src/fonts/Avenir-LightOblique.ttf differ diff --git a/src/fonts/Avenir-LightOblique.woff b/src/fonts/Avenir-LightOblique.woff new file mode 100644 index 0000000..d54a3cc Binary files /dev/null and b/src/fonts/Avenir-LightOblique.woff differ diff --git a/src/fonts/Avenir-LightOblique.woff2 b/src/fonts/Avenir-LightOblique.woff2 new file mode 100644 index 0000000..343404a Binary files /dev/null and b/src/fonts/Avenir-LightOblique.woff2 differ diff --git a/src/fonts/Avenir-Medium.eot b/src/fonts/Avenir-Medium.eot new file mode 100644 index 0000000..63e54d6 Binary files /dev/null and b/src/fonts/Avenir-Medium.eot differ diff --git a/src/fonts/Avenir-Medium.ttf b/src/fonts/Avenir-Medium.ttf new file mode 100644 index 0000000..c5b6f38 Binary files /dev/null and b/src/fonts/Avenir-Medium.ttf differ diff --git a/src/fonts/Avenir-Medium.woff b/src/fonts/Avenir-Medium.woff new file mode 100644 index 0000000..a0f3051 Binary files /dev/null and b/src/fonts/Avenir-Medium.woff differ diff --git a/src/fonts/Avenir-Medium.woff2 b/src/fonts/Avenir-Medium.woff2 new file mode 100644 index 0000000..5b7d8f5 Binary files /dev/null and b/src/fonts/Avenir-Medium.woff2 differ diff --git a/src/fonts/Avenir-MediumOblique.eot b/src/fonts/Avenir-MediumOblique.eot new file mode 100644 index 0000000..c852663 Binary files /dev/null and b/src/fonts/Avenir-MediumOblique.eot differ diff --git a/src/fonts/Avenir-MediumOblique.ttf b/src/fonts/Avenir-MediumOblique.ttf new file mode 100644 index 0000000..9a83405 Binary files /dev/null and b/src/fonts/Avenir-MediumOblique.ttf differ diff --git a/src/fonts/Avenir-MediumOblique.woff b/src/fonts/Avenir-MediumOblique.woff new file mode 100644 index 0000000..572d2db Binary files /dev/null and b/src/fonts/Avenir-MediumOblique.woff differ diff --git a/src/fonts/Avenir-MediumOblique.woff2 b/src/fonts/Avenir-MediumOblique.woff2 new file mode 100644 index 0000000..6953380 Binary files /dev/null and b/src/fonts/Avenir-MediumOblique.woff2 differ diff --git a/src/fonts/Avenir-Oblique.eot b/src/fonts/Avenir-Oblique.eot new file mode 100644 index 0000000..c579088 Binary files /dev/null and b/src/fonts/Avenir-Oblique.eot differ diff --git a/src/fonts/Avenir-Oblique.ttf b/src/fonts/Avenir-Oblique.ttf new file mode 100644 index 0000000..97af983 Binary files /dev/null and b/src/fonts/Avenir-Oblique.ttf differ diff --git a/src/fonts/Avenir-Oblique.woff b/src/fonts/Avenir-Oblique.woff new file mode 100644 index 0000000..52e558d Binary files /dev/null and b/src/fonts/Avenir-Oblique.woff differ diff --git a/src/fonts/Avenir-Oblique.woff2 b/src/fonts/Avenir-Oblique.woff2 new file mode 100644 index 0000000..d2deb7a Binary files /dev/null and b/src/fonts/Avenir-Oblique.woff2 differ diff --git a/src/fonts/Avenir-Roman.eot b/src/fonts/Avenir-Roman.eot new file mode 100644 index 0000000..4ecef10 Binary files /dev/null and b/src/fonts/Avenir-Roman.eot differ diff --git a/src/fonts/Avenir-Roman.ttf b/src/fonts/Avenir-Roman.ttf new file mode 100644 index 0000000..3c43f40 Binary files /dev/null and b/src/fonts/Avenir-Roman.ttf differ diff --git a/src/fonts/Avenir-Roman.woff b/src/fonts/Avenir-Roman.woff new file mode 100644 index 0000000..c23b11e Binary files /dev/null and b/src/fonts/Avenir-Roman.woff differ diff --git a/src/fonts/Avenir-Roman.woff2 b/src/fonts/Avenir-Roman.woff2 new file mode 100644 index 0000000..24e0940 Binary files /dev/null and b/src/fonts/Avenir-Roman.woff2 differ diff --git a/src/fonts/fonts.scss b/src/fonts/fonts.scss new file mode 100644 index 0000000..fa00888 --- /dev/null +++ b/src/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/src/fonts/stylesheet.css b/src/fonts/stylesheet.css new file mode 100644 index 0000000..b202d4c --- /dev/null +++ b/src/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/src/images/Airbnb_icon-icons.com_66791.ico b/src/images/Airbnb_icon-icons.com_66791.ico new file mode 100644 index 0000000..003d7ee Binary files /dev/null and b/src/images/Airbnb_icon-icons.com_66791.ico differ diff --git a/src/images/Ellipse.png b/src/images/Ellipse.png new file mode 100644 index 0000000..9404882 Binary files /dev/null and b/src/images/Ellipse.png differ diff --git a/src/images/Image.png b/src/images/Image.png new file mode 100644 index 0000000..458fee3 Binary files /dev/null and b/src/images/Image.png differ diff --git a/src/images/Rectangle 2.png b/src/images/Rectangle 2.png new file mode 100644 index 0000000..7e0efe2 Binary files /dev/null and b/src/images/Rectangle 2.png differ diff --git a/src/index.html b/src/index.html index c1de13f..fcfb07f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,244 @@ - + - - - - Title - - - -

Hello Mate Academy

- - + + + + + Airbnb + + + + + + +
+
+ + +
+
+ +
+
+ +
+
+
+
+

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/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 2067b3f..0000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb4..0000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 1366a06..0000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "utils/vars"; -@import "utils/mixins"; -@import "utils/extends"; diff --git a/src/styles/_values.scss b/src/styles/_values.scss new file mode 100644 index 0000000..338eac6 --- /dev/null +++ b/src/styles/_values.scss @@ -0,0 +1,3 @@ +$font_color_grey: #3d4e61; +$font_color_btn: #118488; +$font_color_pink: #fd5c63; diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 0000000..ab3c8cb --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,20 @@ +.footer { + display: grid; + width: 100%; + box-shadow: 0 -1px 0 #e1e7ed; + grid-template-columns: repeat(3, 1fr); + justify-items: center; + margin-bottom: 35px; + + &__item { + + &--topic { + font-weight: bold; + margin: 45px 0 20px; + } + + &--text { + margin-bottom: 10px; + } + } +} diff --git a/src/styles/form.scss b/src/styles/form.scss new file mode 100644 index 0000000..82bd4f1 --- /dev/null +++ b/src/styles/form.scss @@ -0,0 +1,49 @@ +@import "values"; + +.form { + border: 1px solid #e1e7ed; + box-sizing: border-box; + border-radius: 3px; + &__price { + font-weight: 300; + margin-bottom: 40px; + } + + &__block { + margin: 30px 30px 40px; + + &--area { + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + } + + font-size: 16px; + width: 100%; + border: 1px solid #e1e7ed; + box-sizing: border-box; + border-radius: 3px; + padding: 14px 17px; + margin-bottom: 1em; + } + } + + &__btn { + cursor: pointer; + box-sizing: border-box; + font-size: 1em; + color: white; + font-weight: 600; + width: 100%; + padding: 15px; + background-color: $font_color_pink; + border-radius: 4px; + border: 1px solid $font_color_pink; + transition: color 0.3s, background-color 0.3s, border 0.3s; + &:hover { + background-color: white; + color: $font_color_pink; + } + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 0000000..44da9bd --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,42 @@ +@import "values"; + +.header { + + &__logo { + width: 30px; + height: 30px; + margin: 5px; + } + + &__block { + display: flex; + justify-content: space-between; + //position: fixed; + //top: 0; + } + + &__background img { + width: 100%; + } +} + +.nav { + display: flex; + max-width: 300px; + align-items: center; + justify-content: flex-end; + &__item { + white-space: nowrap; + padding: 5px 15px; + transition: color 0.1s; + &:hover a { + color: $font_color_pink; + } + } +} + +.profile { + width: 30px; + height: 30px; + padding-right: 20px; +} diff --git a/src/styles/hosted.scss b/src/styles/hosted.scss new file mode 100644 index 0000000..66b481d --- /dev/null +++ b/src/styles/hosted.scss @@ -0,0 +1,26 @@ +@import "values"; + +.hosted { + &__topic { + &--under { + font-size: 0.88em; + margin: 15px 0 20px; + } + &--text { + margin-bottom: 30px; + } + } + &__btn { + font-weight: 600; + padding: 15px 25px; + color: $font_color_btn; + box-sizing: border-box; + border: 1px solid $font_color_btn; + border-radius: 4px; + transition: color 0.3s, background-color 0.3s; + &:hover { + color: white; + background-color: $font_color_btn; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e..5395167 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,72 @@ -@import "utils"; -@import "fonts"; -@import "typography"; +@import "values"; +@import "resetStyles"; +@import "header"; +@import "order"; +@import "reviews"; +@import "hosted"; +@import "footer"; +@import "form"; -body { - background: $c-gray; +@font-face { + font-family: Avenir; /* Гарнитура шрифта */ + src: url("./../fonts/Avenir-Book.ttf"); /* Путь к файлу со шрифтом */ } + +@keyframes lineUnderLink { + from { + transform: translateX(0); + width: 0; + } + + to { + width: 100%; + transform: translateX(100); + } +} + +.body { + margin: 0; + font-family: Avenir, sans-serif; + color: $font_color_grey; + font-size: 16px; +} + +.container { + max-width: 900px; + display: grid; + margin: 40px auto 75px; + column-gap: 80px; + grid-template-columns: 1fr 330px; +} + +.section { + margin-bottom: 70px; +} + +.topic { + font-size: 1.75em; +} + +.order__link { + transition: color 0.1s; + position: relative; + h3 { + display: inline; + } + &:hover { + &:after { + content: ""; + width: 0%; + position: absolute; + top: 100%; + left: 0; + height: 2px; + background-color: $font_color_pink; + border-radius: 8px; + animation: lineUnderLink 0.1s linear both; + } + color: $font_color_pink; + } +} + +@import "media"; diff --git a/src/styles/media.scss b/src/styles/media.scss new file mode 100644 index 0000000..7fae694 --- /dev/null +++ b/src/styles/media.scss @@ -0,0 +1,28 @@ +@media (max-width: 1070px) { + .container { + margin: 40px 100px 75px; + } +} + +@media (max-width: 950px) { + .container { + display: flex; + flex-direction: column-reverse; + } + + .forms { + margin-bottom: 50px; + } +} + +@media (max-width: 770px) { + .container { + margin: 40px 50px 75px; + } +} + +@media (max-width: 520px) { + .body { + font-size: 12px; + } +} diff --git a/src/styles/order.scss b/src/styles/order.scss new file mode 100644 index 0000000..276b9f9 --- /dev/null +++ b/src/styles/order.scss @@ -0,0 +1,33 @@ +.order { + &__title { + font-size: 2.25em; + &--under { + margin: 25px 0; + color: #687c94; + } + } + &__text { + margin: 30px 0; + line-height: 24px; + } +} + +.filter { + display: flex; + &__item { + margin-right: 30px; + } +} + +.amenities { + margin-bottom: 20px; + &__topic { + font-size: 1.25em; + margin: 50px 0 25px; + } + + &__block { + display: grid; + grid-template-columns: 10em 10em; + } +} diff --git a/src/styles/resetStyles.scss b/src/styles/resetStyles.scss new file mode 100644 index 0000000..6326cc2 --- /dev/null +++ b/src/styles/resetStyles.scss @@ -0,0 +1,23 @@ +@import "values"; + +ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +a { + color: $font_color_grey; + text-decoration: none; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + font-size: 1em; + margin: 0; +} diff --git a/src/styles/reviews.scss b/src/styles/reviews.scss new file mode 100644 index 0000000..9b6181b --- /dev/null +++ b/src/styles/reviews.scss @@ -0,0 +1,25 @@ +.reviews { + &__topic { + margin-bottom: 40px; + } + &__item { + margin-bottom: 35px; + .name { + font-size: 1.25em; + } + .date { + font-size: 0.88em; + } + &--info { + display: flex; + margin-bottom: 25px; + .photo { + margin-right: 20px; + width: 50px; + height: 50px; + border-radius: 50%; + background-color: #c4c4c4; + } + } + } +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index a1a5dd0..0000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c7978..0000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006f..0000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee;