diff --git a/.gitignore b/.gitignore index 1558091fd7..9c4e2570bb 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,6 @@ backstop_data dist .cache .parcel-cache + +styles.css +styles.css.map diff --git a/README.md b/README.md index 97d3c9060a..4672527a63 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ In this task, you will learn how to implement a landing page. To do that: - [Nothing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6802-139&t=L7eKz5YKLN0m5WxR-0) - watch the lesson videos and implement your page blocks similarly to the videos; - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar; -- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://.github.io/layout_miami/) +- when you finish the first block of your page deploy it and create a Pull Request with a +[DEMO LINK](https://MateuszCieplak.github.io/layout_miami/) - after each next block do the same (add, commit and push the changes, and deploy the updated demo; - check yourself using the [CHECKLIST](https://github.com/mate-academy/layout_miami/blob/master/checklist.md) when finished; diff --git a/package.json b/package.json index 1ed1e30d3d..d6e36c872e 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@linthtml/linthtml": "^0.9.5", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.7.3", + "@mate-academy/scripts": "^1.9.4", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", diff --git a/src/images/Cover_photo.jpg b/src/images/Cover_photo.jpg new file mode 100644 index 0000000000..d5a6e6edff Binary files /dev/null and b/src/images/Cover_photo.jpg differ diff --git a/src/images/IClose.png b/src/images/IClose.png new file mode 100644 index 0000000000..5029f7ad33 Binary files /dev/null and b/src/images/IClose.png differ diff --git a/src/images/Logo.svg b/src/images/Logo.svg new file mode 100644 index 0000000000..4fa6cd0bc6 --- /dev/null +++ b/src/images/Logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/cross.svg b/src/images/cross.svg deleted file mode 100644 index 08f1f27cea..0000000000 --- a/src/images/cross.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/crown.svg b/src/images/crown.svg deleted file mode 100644 index 962d90e9ca..0000000000 --- a/src/images/crown.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/favicon.jpg b/src/images/favicon.jpg new file mode 100644 index 0000000000..b533c62a3f Binary files /dev/null and b/src/images/favicon.jpg differ diff --git a/src/images/favicon.png b/src/images/favicon.png deleted file mode 100644 index 0e04c361e1..0000000000 Binary files a/src/images/favicon.png and /dev/null differ diff --git a/src/images/footer-320.jpg b/src/images/footer-320.jpg new file mode 100644 index 0000000000..6ebf068f2d Binary files /dev/null and b/src/images/footer-320.jpg differ diff --git a/src/images/footer-for-desktop.jpg b/src/images/footer-for-desktop.jpg new file mode 100644 index 0000000000..042f2a7d6b Binary files /dev/null and b/src/images/footer-for-desktop.jpg differ diff --git a/src/images/footer-for-ipad.jpg b/src/images/footer-for-ipad.jpg new file mode 100644 index 0000000000..042f2a7d6b Binary files /dev/null and b/src/images/footer-for-ipad.jpg differ diff --git a/src/images/header_Icon-Phone-call.png b/src/images/header_Icon-Phone-call.png new file mode 100644 index 0000000000..21a07a1d7c Binary files /dev/null and b/src/images/header_Icon-Phone-call.png differ diff --git a/src/images/header_background.jpg b/src/images/header_background.jpg new file mode 100644 index 0000000000..c4eebd3077 Binary files /dev/null and b/src/images/header_background.jpg differ diff --git a/src/images/header_icon-burger-menu.svg b/src/images/header_icon-burger-menu.svg new file mode 100644 index 0000000000..b5ea4b25d0 --- /dev/null +++ b/src/images/header_icon-burger-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/header_icon-menu-burger-hover.svg b/src/images/header_icon-menu-burger-hover.svg new file mode 100644 index 0000000000..1fc00346bf --- /dev/null +++ b/src/images/header_icon-menu-burger-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/header_icon-menu-close.svg b/src/images/header_icon-menu-close.svg new file mode 100644 index 0000000000..c212cc4270 --- /dev/null +++ b/src/images/header_icon-menu-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/header_icon_menu_phone.svg b/src/images/header_icon_menu_phone.svg new file mode 100644 index 0000000000..ce3f027938 --- /dev/null +++ b/src/images/header_icon_menu_phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/header_logo.png b/src/images/header_logo.png new file mode 100644 index 0000000000..2fe63e5555 Binary files /dev/null and b/src/images/header_logo.png differ diff --git a/src/images/logo.png b/src/images/logo.png deleted file mode 100644 index 9b6a4dd7d4..0000000000 Binary files a/src/images/logo.png and /dev/null differ diff --git a/src/images/main_bike-1.png b/src/images/main_bike-1.png new file mode 100644 index 0000000000..95976b3df0 Binary files /dev/null and b/src/images/main_bike-1.png differ diff --git a/src/images/main_bike-2.jpg b/src/images/main_bike-2.jpg new file mode 100644 index 0000000000..c3b10ba1b1 Binary files /dev/null and b/src/images/main_bike-2.jpg differ diff --git a/src/images/main_bike-3.jpg b/src/images/main_bike-3.jpg new file mode 100644 index 0000000000..76b8f1346b Binary files /dev/null and b/src/images/main_bike-3.jpg differ diff --git a/src/images/main_detail-desktop-1.jpg b/src/images/main_detail-desktop-1.jpg new file mode 100644 index 0000000000..4e8babda4d Binary files /dev/null and b/src/images/main_detail-desktop-1.jpg differ diff --git a/src/images/main_detail-desktop-2.jpg b/src/images/main_detail-desktop-2.jpg new file mode 100644 index 0000000000..33b4ac80dd Binary files /dev/null and b/src/images/main_detail-desktop-2.jpg differ diff --git a/src/images/main_detail-desktop-3.jpg b/src/images/main_detail-desktop-3.jpg new file mode 100644 index 0000000000..367dc231e0 Binary files /dev/null and b/src/images/main_detail-desktop-3.jpg differ diff --git a/src/images/main_detail-desktop-4.jpg b/src/images/main_detail-desktop-4.jpg new file mode 100644 index 0000000000..c67d474366 Binary files /dev/null and b/src/images/main_detail-desktop-4.jpg differ diff --git a/src/images/main_detail-desktop-5.jpg b/src/images/main_detail-desktop-5.jpg new file mode 100644 index 0000000000..3ebe97ea8f Binary files /dev/null and b/src/images/main_detail-desktop-5.jpg differ diff --git a/src/images/main_detail-desktop-6.jpg b/src/images/main_detail-desktop-6.jpg new file mode 100644 index 0000000000..6231450fc1 Binary files /dev/null and b/src/images/main_detail-desktop-6.jpg differ diff --git a/src/images/menu.svg b/src/images/menu.svg deleted file mode 100644 index 5d6b5a0b38..0000000000 --- a/src/images/menu.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/menu_hover.svg b/src/images/menu_hover.svg deleted file mode 100644 index 39263b75bc..0000000000 --- a/src/images/menu_hover.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/phone.svg b/src/images/phone.svg deleted file mode 100644 index 0c2c52cb54..0000000000 --- a/src/images/phone.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/photos/1.jpg b/src/images/photos/1.jpg deleted file mode 100644 index f796f55605..0000000000 Binary files a/src/images/photos/1.jpg and /dev/null differ diff --git a/src/images/photos/2.jpg b/src/images/photos/2.jpg deleted file mode 100644 index d9053b6a20..0000000000 Binary files a/src/images/photos/2.jpg and /dev/null differ diff --git a/src/images/photos/3.jpg b/src/images/photos/3.jpg deleted file mode 100644 index 5e40be94d2..0000000000 Binary files a/src/images/photos/3.jpg and /dev/null differ diff --git a/src/images/photos/4.jpg b/src/images/photos/4.jpg deleted file mode 100644 index de64313343..0000000000 Binary files a/src/images/photos/4.jpg and /dev/null differ diff --git a/src/images/photos/5.jpg b/src/images/photos/5.jpg deleted file mode 100644 index aad06bff54..0000000000 Binary files a/src/images/photos/5.jpg and /dev/null differ diff --git a/src/images/photos/6.jpg b/src/images/photos/6.jpg deleted file mode 100644 index 104ff18faa..0000000000 Binary files a/src/images/photos/6.jpg and /dev/null differ diff --git a/src/index.html b/src/index.html index f63807ad65..9dd59fdd80 100644 --- a/src/index.html +++ b/src/index.html @@ -6,17 +6,380 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Miami + My Bike + + + + - - -

Miami

+ +
+ +

Take the Streets

+
+ + + +
+

Move Free

+
+

+ Shift your ride, not gears. Find the fastest way to move in the city + as the bike adapts intuitively to power the speed you need. +

+
+ +
+

+ Compare bikes +

+
+
+ + bike-1 + +

Sporty 4

+

+ The iconic frame brought to a new performance height as a sporty, + active ride. +

+
$ 2 590
+
+
+ + bike-2 + +

Ride in town ST

+

+ An open frame for an upright riding position as the most + comfortable ride in town. +

+
$ 2 590
+
+
+ + bike-3 + +

Agile ride 3

+

+ The lightweight frame that has earned its street tread as a sleek, + agile ride. +

+
$ 2 090
+
+
+
+ +
+

The Details

+
+
+
+ detail-1 +
+
+ detail-2 +
+

Auto Unlock

+

+ The app senses when you're nearby to unlock automatically. GPS + tracking so you know where your bike is and can track it anytime. +

+
+
+
+
+
+ detail-3 +
+
+ detail-4 +
+

Range & Integrated lights

+

+ The removable battery has up to 70km battery autonomy and weighs + only 2.4 kg. Lights integrated into the frame give you always-on + visibility day and night. +

+
+
+
+
+
+ detail-5 +
+
+ detail-6 +
+

+ Hydraulic disc brakes & Lightweight +

+

+ Brakes with total stopping power the second you make contact. The + removable battery has up to 70km battery autonomy and weighs only + 2.4 kg. Lights integrated into the frame give you always-on + visibility day and night. +

+ +
+
+
+ +
+

Contact us

+
+
+ + + + +
+
+

Phone

+ +

+48 513 093 342

+ +

Email

+ +

hello@miami.com

+ +

Address

+ +

+ 400 first ave +
+ suite 700 +
+ Minneapolis, MN 55401 +

+ +
+
+
+
+ + + + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd54008..0000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - 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 1837eb46e2..0000000000 --- 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 3280c3fe10..0000000000 --- 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/blocks/article.scss b/src/styles/blocks/article.scss new file mode 100644 index 0000000000..08103b9b04 --- /dev/null +++ b/src/styles/blocks/article.scss @@ -0,0 +1,24 @@ +@use '../utils/mixins' as *; + +.article { + &__paragraph { + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 22.4px; + text-align: left; + margin-bottom: 16px; + } + + &--distance { + margin-bottom: 40px; + + @include for-desktop { + margin-bottom: 48px; + } + } + + &:last-child { + margin-bottom: 0; + } +} diff --git a/src/styles/blocks/bike.scss b/src/styles/blocks/bike.scss new file mode 100644 index 0000000000..6bbdcd083e --- /dev/null +++ b/src/styles/blocks/bike.scss @@ -0,0 +1,41 @@ +@use '../utils/mixins' as *; + +.bike { + transition: transform 0.3s; + + &__item { + display: flex; + justify-content: center; + } + + &--image { + margin-bottom: 32px; + } + + &--price { + font-family: Poppins, sans-serif; + font-size: 24px; + font-weight: 700; + line-height: 33.6px; + text-align: left; + margin-bottom: 40px; + color: rgba(255, 255, 255, 1); + } + + &__paragraph { + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 22.4px; + text-align: left; + margin-bottom: 16px; + } + + &:hover { + transform: scale(1.1); + + @include for-desktop { + transform: scale(1.05); + } + } +} diff --git a/src/styles/blocks/bikes.scss b/src/styles/blocks/bikes.scss new file mode 100644 index 0000000000..436d1dc9ee --- /dev/null +++ b/src/styles/blocks/bikes.scss @@ -0,0 +1,17 @@ +@use '../utils/mixins' as *; + +.bikes { + @include grid; + + &__bike { + grid-column: span 2; + + @include for-ipad { + grid-column: 2 / 6; + } + + @include for-desktop { + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/body.scss b/src/styles/blocks/body.scss new file mode 100644 index 0000000000..5a62c67114 --- /dev/null +++ b/src/styles/blocks/body.scss @@ -0,0 +1,7 @@ +.body { + scroll-behavior: smooth; +} + +.page__body--with-menu { + overflow: hidden; +} diff --git a/src/styles/blocks/burger.scss b/src/styles/blocks/burger.scss new file mode 100644 index 0000000000..b8ffef74e9 --- /dev/null +++ b/src/styles/blocks/burger.scss @@ -0,0 +1,44 @@ +@use '../utils/mixins' as *; + +.burger { + &::before { + content: ''; + background-image: url('../images/header_icon-burger-menu.svg'); + background-size: cover; + display: inline-block; + width: 18px; + height: 12px; + + @include for-desktop { + width: 24px; + height: 16px; + } + } + + &::after { + content: ''; + background-image: url('../images/header_icon-menu-burger-hover.svg'); + background-size: cover; + display: none; + width: 18px; + height: 12px; + + @include for-desktop { + width: 24px; + height: 16px; + } + } + + &:hover { + &::before { + display: none; + } + &::after { + display: inline-block; + } + } + + &__label { + @include visually-hidden; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..ca121188f7 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,39 @@ +@use '../utils/mixins' as *; + +.button { + height: 56px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + background-color: rgba(255, 255, 255, 1); + border-radius: 40px; + text-decoration: none; + + margin-top: 40px; + + @include for-desktop { + margin-top: 48px; + } + + &::after { + content: 'Explore'; + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 27px; + text-align: center; + color: rgba(29, 29, 29, 1); + } + + &:hover { + box-shadow: 1px 4px 16px 0 rgba(232, 232, 240, 0.4); + transition-duration: 0.3s; + transition-timing-function: linear; + } + + &:target { + box-shadow: 1px 4px 16px 0 rgba(232, 232, 240, 0.64); + } +} diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 0000000000..95ebc39518 --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,7 @@ +@use '../utils/mixins' as *; + +.contact { + &__link { + text-decoration: none; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..c5555328b3 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,24 @@ +@use '../utils/mixins' as *; + +.footer { + height: 200px; + background-image: url('../images/footer-320.jpg'); + background-size: cover; + display: flex; + justify-content: center; + align-items: end; + + @include for-ipad { + height: 480px; + background-image: url('../images/footer-for-ipad.jpg'); + } + + @include for-desktop { + height: 555px; + background-image: url('../images/footer-for-desktop.jpg'); + } + + &__pictures { + margin-bottom: 24px; + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..712f1ae04e --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,70 @@ +@use '../utils/mixins' as *; + +.form { + grid-column: 1 / 3; + display: flex; + justify-content: center; + flex-direction: column; + + @include for-ipad { + grid-column: 1 / 4; + } + + @include for-desktop { + grid-column: 1 / 6; + } + + &__input { + display: flex; + box-sizing: border-box; + height: 48px; + border-radius: 40px; + padding: 14px 16px; + margin-bottom: 16px; + } + + &__message { + padding: 14px 16px; + border-radius: 16px; + height: 148px; + font-family: Poppins, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 20px; + margin-bottom: 32px; + } + + &__paragraph { + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 22.4px; + text-align: left; + margin-bottom: 24px; + + &:hover { + color: aqua; + } + } + + &__button { + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 27px; + text-align: center; + margin-bottom: 48px; + + @include for-ipad { + margin-bottom: 0; + } + + @include for-desktop { + margin-bottom: 0; + } + + &::after { + content: 'Send'; + } + } +} diff --git a/src/styles/blocks/forms.scss b/src/styles/blocks/forms.scss new file mode 100644 index 0000000000..369be160cd --- /dev/null +++ b/src/styles/blocks/forms.scss @@ -0,0 +1,17 @@ +@use '../utils/mixins' as *; + +.forms { + @include grid; + + &__contact { + grid-column: 1 /3; + + @include for-ipad { + grid-column: 4 / 7; + } + + @include for-desktop { + grid-column: 8 / 11; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..4599291e27 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,46 @@ +@use '../utils/mixins' as *; + +.header { + background-color: aquamarine; + background-image: url('../images/Cover_photo.jpg'); + background-position: 85%; + background-repeat: no-repeat; + background-size: cover; + min-height: 100vh; + box-sizing: border-box; + padding: 0 20px 88px; + + @include for-ipad { + background-position: center; + } + + @include grid; + + &__navigation { + grid-column: 1 / 3; + grid-row: 1 / 2; + align-self: start; + + @include for-ipad { + grid-column: 1 / 7; + } + + @include for-desktop { + grid-column: 1 / 13; + } + } + + &__title { + grid-column: 1 / 3; + grid-row: 2 / 3; + align-self: end; + + @include for-ipad { + grid-column: 1 / 7; + } + + @include for-desktop { + grid-column: 1 / 13; + } + } +} diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss new file mode 100644 index 0000000000..ab7106b4a6 --- /dev/null +++ b/src/styles/blocks/icons.scss @@ -0,0 +1,16 @@ +@use '../utils/mixins' as *; + +.icons { + width: 72px; + display: flex; + justify-content: space-between; + align-items: center; + + @include for-ipad { + width: 96px; + } + + @include for-desktop { + width: 96px; + } +} diff --git a/src/styles/blocks/links.scss b/src/styles/blocks/links.scss new file mode 100644 index 0000000000..5879afd124 --- /dev/null +++ b/src/styles/blocks/links.scss @@ -0,0 +1,30 @@ +@use '../utils/mixins' as *; + +.links { + padding-top: 48px; + + &__item { + margin-bottom: 24px; + } + + &__link { + font-family: Poppins, sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 22px; + letter-spacing: 2px; + text-decoration: none; + color: rgba(29, 29, 29, 1); + border-bottom: 2px solid transparent; + padding-bottom: 8px; + display: inline-block; + + @include for-desktop { + font-weight: 700; + } + + &:hover { + border-bottom: 2px solid rgba(29, 29, 29, 1); + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..c476849fe4 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,67 @@ +@use '../utils/mixins' as *; + +.main { + background-color: #1d1d1d; + padding: 60px 20px 120px; + font-family: Poppins, sans-serif; + font-size: 23px; + font-weight: 500; + line-height: 32.2px; + + @include grid; + + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 500; + line-height: 32px; + letter-spacing: -1.5px; + text-align: left; + color: rgba(255, 255, 255, 1); + margin-bottom: 32px; + grid-column: 1 /3; + + @include for-ipad { + grid-column: 1 / 4; + font-size: 48px; + line-height: 48px; + } + + @include for-desktop { + grid-column: 1 / 5; + font-size: 64px; + line-height: 64px; + } + } + + &__content { + grid-column: 1 /3; + + @include for-ipad { + grid-column: 4 / 7; + } + + @include for-desktop { + grid-column: 7 / 13; + } + } + + &__paragraph { + color: #fff; + } + + &__section { + padding-top: 92px; + grid-column: 1 /3; + + @include for-ipad { + padding-top: 132px; + grid-column: 1 / 7; + } + + @include for-desktop { + padding-top: 180px; + grid-column: 1 / 13; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..caa35342c6 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,78 @@ +@use '../utils/mixins' as *; + +.menu { + z-index: 2; + box-sizing: border-box; + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: rgba(194, 194, 194, 1); + padding: 0 20px; + height: 100vh; + transform: translateX(-100%); + transition: transform 0.3s ease-in-out; + place-content: start center; + overflow-y: auto; + + @include grid; + + &:target { + transform: translateX(0); + } + + &__navigation { + grid-column: span 2; + + @include for-ipad { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 12; + } + } + + &__links { + grid-column: span 2; + + @include for-ipad { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 12; + align-self: flex-start; + } + } + + &__paragraph { + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 27px; + margin-bottom: 16px; + grid-column: span 2; + + @include for-ipad { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 12; + } + } + + &__link { + font-family: Poppins, sans-serif; + font-size: 12px; + font-weight: 600; + line-height: 16px; + letter-spacing: 2px; + text-transform: uppercase; + text-decoration: none; + border-bottom: 2px solid rgba(29, 29, 29, 1); + padding-bottom: 8px; + color: rgba(29, 29, 29, 1); + } +} diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss new file mode 100644 index 0000000000..4a15dc5628 --- /dev/null +++ b/src/styles/blocks/navigation.scss @@ -0,0 +1,28 @@ +@use '../utils/mixins' as *; + +.navigation { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 24px; + + @include for-ipad { + margin-top: 36px; + } + + @include for-desktop { + margin-top: 36px; + } + + &__item { + background-image: url('../images/Logo.svg'); + background-size: cover; + width: 130px; + height: 38px; + + @include for-desktop { + width: 187px; + height: 56px; + } + } +} diff --git a/src/styles/blocks/paragraph.scss b/src/styles/blocks/paragraph.scss new file mode 100644 index 0000000000..c0ad94a74d --- /dev/null +++ b/src/styles/blocks/paragraph.scss @@ -0,0 +1,10 @@ +@use '../utils/mixins' as *; + +.paragraph { + font-family: Poppins, sans-serif; + font-size: 23px; + font-weight: 500; + line-height: 32.2px; + text-align: left; + color: #fff; +} diff --git a/src/styles/blocks/phone.scss b/src/styles/blocks/phone.scss new file mode 100644 index 0000000000..011b0b3331 --- /dev/null +++ b/src/styles/blocks/phone.scss @@ -0,0 +1,30 @@ +@use '../utils/mixins' as *; + +.phone { + &__label { + font-family: Poppins, sans-serif; + font-size: 12px; + font-weight: 600; + line-height: 16px; + letter-spacing: 2px; + text-transform: uppercase; + + color: rgba(255, 255, 255, 1); + position: absolute; + transform: translateX(calc(100% - 320px)) translateY(5px); + } + + &__icon { + height: 18px; + width: 18px; + + @include for-desktop { + height: 24px; + width: 24px; + } + } + + &:not(:hover) &__label { + @include visually-hidden; + } +} diff --git a/src/styles/blocks/pictures.scss b/src/styles/blocks/pictures.scss new file mode 100644 index 0000000000..a35850569e --- /dev/null +++ b/src/styles/blocks/pictures.scss @@ -0,0 +1,91 @@ +@use '../utils/mixins' as *; + +.pictures { + @include grid; + + &__item { + width: 100%; + position: relative; + padding-top: 100%; + margin-bottom: 16px; + + @include for-ipad { + grid-column: span 6; + padding-top: 187px; + } + + @include for-desktop { + grid-column: span 3; + padding-top: 320px; + } + + &--small { + @include for-ipad { + grid-column: span 2; + } + + @include for-desktop { + grid-column: span 4; + } + } + + &--big { + @include for-ipad { + grid-column: span 4; + } + + @include for-desktop { + grid-column: span 8; + } + } + } + + &--image { + top: 0; + width: 100%; + height: 100%; + position: absolute; + object-fit: cover; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + + @include for-desktop { + transform: scale(1.05); + } + } + } + + &__paragraph { + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 22.4px; + text-align: left; + + color: #fff; + + grid-column: 1 /3; + + @include for-ipad { + grid-column: 1 / 7; + } + + @include for-desktop { + grid-column: 1 / 9; + } + } + + &__button { + grid-column: 1 / 3; + + @include for-ipad { + grid-column: 2 / 6; + } + + @include for-desktop { + grid-column: 5 / 9; + } + } +} diff --git a/src/styles/blocks/price.scss b/src/styles/blocks/price.scss new file mode 100644 index 0000000000..eca45419ba --- /dev/null +++ b/src/styles/blocks/price.scss @@ -0,0 +1,9 @@ +.price { + font-family: Poppins, sans-serif; + font-size: 24px; + font-weight: 700; + line-height: 33.6px; + text-align: left; + margin-bottom: 40px; + color: rgba(255, 255, 255, 1); +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 0000000000..e872b365f5 --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,30 @@ +@use '../utils/mixins' as *; + +.section { + padding-top: 92px; + grid-column: 1 /3; + + @include for-ipad { + padding-top: 120px; + grid-column: 1 / 7; + } + + @include for-desktop { + padding-top: 24px; + margin-top: 120px; + grid-column: 1 / 13; + } + + &__title { + @include for-desktop { + font-size: 64px; + line-height: 64px; + letter-spacing: -1.5px; + text-align: center; + } + } + + &__article { + margin-bottom: 40px; + } +} diff --git a/src/styles/blocks/title.scss b/src/styles/blocks/title.scss new file mode 100644 index 0000000000..0edd0d209b --- /dev/null +++ b/src/styles/blocks/title.scss @@ -0,0 +1,80 @@ +@use '../utils/mixins' as *; + +.title { + font-family: Poppins, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 36px; + letter-spacing: -1.5px; + text-align: center; + + color: rgba(255, 255, 255, 1); + + @include for-ipad { + font-size: 64px; + line-height: 64px; + } + + @include for-desktop { + font-size: 80px; + line-height: 80px; + } + + &--secondary { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 500; + line-height: 32px; + letter-spacing: -1.5px; + text-align: left; + margin-bottom: 32px; + + @include for-ipad { + font-size: 48px; + line-height: 48px; + text-align: center; + margin-bottom: 48px; + } + + @include for-desktop { + font-size: 64px; + line-height: 64px; + letter-spacing: -1.5px; + text-align: center; + margin-bottom: 56px; + } + } + + &--third { + font-family: Poppins, sans-serif; + font-size: 24px; + font-weight: 700; + line-height: 33.6px; + text-align: left; + margin-bottom: 8px; + + grid-column: 1 / 3; + + @include for-ipad { + grid-column: 1 / 6; + } + + @include for-desktop { + grid-column: 1 / 7; + } + } + + &--fourth { + font-family: Poppins, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + text-align: left; + margin-bottom: 8px; + } + + // &--position { + // text-align: center; + // margin-bottom: 48px; + // } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..a80d604f32 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,24 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import './utils/reset'; +@import './blocks/body'; +@import './blocks/title'; +@import './blocks/header'; +@import './blocks/navigation'; +@import './blocks/paragraph'; +@import './blocks/icons'; +@import './blocks/menu'; +@import './blocks/links'; +@import './utils/mixins'; +@import './blocks/burger'; +@import './blocks/phone'; +@import './blocks/section'; +@import './blocks/price'; +@import './blocks/main'; +@import './blocks/pictures'; +@import './blocks/button'; +@import './blocks/forms'; +@import './blocks/form'; +@import './blocks/footer'; +@import './blocks/article'; +@import './blocks/bikes'; +@import './blocks/bike'; +@import './blocks/contact'; diff --git a/src/styles/styles.css b/src/styles/styles.css new file mode 100644 index 0000000000..d4b23cb4e1 --- /dev/null +++ b/src/styles/styles.css @@ -0,0 +1,1008 @@ +/* stylelint-disable comment-empty-line-before */ +/* stylelint-disable rule-empty-line-before */ +/* stylelint-disable at-rule-empty-line-before */ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote::before, +blockquote::after, +q::before, +q::after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +.body { + scroll-behavior: smooth; +} + +.page__body--with-menu { + overflow: hidden; +} + +.title { + font-family: Poppins, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 36px; + letter-spacing: -1.5px; + text-align: center; + color: rgb(255, 255, 255); +} +@media (min-width: 744px) { + .title { + font-size: 64px; + line-height: 64px; + } +} +@media (min-width: 1260px) { + .title { + font-size: 80px; + line-height: 80px; + } +} +.title--secondary { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 500; + line-height: 32px; + letter-spacing: -1.5px; + text-align: left; + margin-bottom: 32px; +} +@media (min-width: 744px) { + .title--secondary { + font-size: 48px; + line-height: 48px; + text-align: center; + margin-bottom: 48px; + } +} +@media (min-width: 1260px) { + .title--secondary { + font-size: 64px; + line-height: 64px; + letter-spacing: -1.5px; + text-align: center; + margin-bottom: 56px; + } +} +.title--third { + font-family: Poppins, sans-serif; + font-size: 24px; + font-weight: 700; + line-height: 33.6px; + text-align: left; + margin-bottom: 8px; + grid-column: 1/3; +} +@media (min-width: 744px) { + .title--third { + grid-column: 1/6; + } +} +@media (min-width: 1260px) { + .title--third { + grid-column: 1/7; + } +} +.title--fourth { + font-family: Poppins, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + text-align: left; + margin-bottom: 8px; +} + +.header { + background-color: aquamarine; + background-image: url('../images/Cover_photo.jpg'); + background-position: 85%; + background-repeat: no-repeat; + background-size: cover; + min-height: 100vh; + box-sizing: border-box; + padding: 0 20px 88px; + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 130px); + grid-column-gap: 20px; +} +@media (min-width: 744px) { + .header { + background-position: center; + } +} +@media (min-width: 744px) { + .header { + grid-template-columns: repeat(6, 80px); + grid-column-gap: 24px; + } +} +@media (min-width: 1260px) { + .header { + grid-template-columns: repeat(12, 63px); + grid-column-gap: 24px; + } +} +.header__navigation { + grid-column: 1/3; + grid-row: 1/2; + align-self: start; +} +@media (min-width: 744px) { + .header__navigation { + grid-column: 1/7; + } +} +@media (min-width: 1260px) { + .header__navigation { + grid-column: 1/13; + } +} +.header__title { + grid-column: 1/3; + grid-row: 2/3; + align-self: end; +} +@media (min-width: 744px) { + .header__title { + grid-column: 1/7; + } +} +@media (min-width: 1260px) { + .header__title { + grid-column: 1/13; + } +} + +.navigation { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 24px; +} +@media (min-width: 744px) { + .navigation { + margin-top: 36px; + } +} +@media (min-width: 1260px) { + .navigation { + margin-top: 36px; + } +} +.navigation__item { + background-image: url('../images/Logo.svg'); + background-size: cover; + width: 130px; + height: 38px; +} +@media (min-width: 1260px) { + .navigation__item { + width: 187px; + height: 56px; + } +} + +.paragraph { + font-family: Poppins, sans-serif; + font-size: 23px; + font-weight: 500; + line-height: 32.2px; + text-align: left; + color: #fff; +} + +.icons { + width: 72px; + display: flex; + justify-content: space-between; + align-items: center; +} +@media (min-width: 744px) { + .icons { + width: 96px; + } +} +@media (min-width: 1260px) { + .icons { + width: 96px; + } +} + +.menu { + z-index: 2; + box-sizing: border-box; + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: rgb(194, 194, 194); + padding: 0 20px; + height: 100vh; + transform: translateX(-100%); + transition: transform 0.3s ease-in-out; + place-content: start center; + overflow-y: auto; + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 130px); + grid-column-gap: 20px; +} +@media (min-width: 744px) { + .menu { + grid-template-columns: repeat(6, 80px); + grid-column-gap: 24px; + } +} +@media (min-width: 1260px) { + .menu { + grid-template-columns: repeat(12, 63px); + grid-column-gap: 24px; + } +} +.menu:target { + transform: translateX(0); +} +.menu__navigation { + grid-column: span 2; +} +@media (min-width: 744px) { + .menu__navigation { + grid-column: span 6; + } +} +@media (min-width: 1260px) { + .menu__navigation { + grid-column: span 12; + } +} +.menu__links { + grid-column: span 2; +} +@media (min-width: 744px) { + .menu__links { + grid-column: span 6; + } +} +@media (min-width: 1260px) { + .menu__links { + grid-column: span 12; + align-self: flex-start; + } +} +.menu__paragraph { + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 27px; + margin-bottom: 16px; + grid-column: span 2; +} +@media (min-width: 744px) { + .menu__paragraph { + grid-column: span 6; + } +} +@media (min-width: 1260px) { + .menu__paragraph { + grid-column: span 12; + } +} +.menu__link { + font-family: Poppins, sans-serif; + font-size: 12px; + font-weight: 600; + line-height: 16px; + letter-spacing: 2px; + text-transform: uppercase; + text-decoration: none; + border-bottom: 2px solid rgb(29, 29, 29); + padding-bottom: 8px; + color: rgb(29, 29, 29); +} + +.links { + padding-top: 48px; +} +.links__item { + margin-bottom: 24px; +} +.links__link { + font-family: Poppins, sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 22px; + letter-spacing: 2px; + text-decoration: none; + color: rgb(29, 29, 29); + border-bottom: 2px solid transparent; + padding-bottom: 8px; + display: inline-block; +} +@media (min-width: 1260px) { + .links__link { + font-weight: 700; + } +} +.links__link:hover { + border-bottom: 2px solid rgb(29, 29, 29); +} + +.burger::before { + content: ''; + background-image: url('../images/header_icon-burger-menu.svg'); + background-size: cover; + display: inline-block; + width: 18px; + height: 12px; +} +@media (min-width: 1260px) { + .burger::before { + width: 24px; + height: 16px; + } +} +.burger::after { + content: ''; + background-image: url('../images/header_icon-menu-burger-hover.svg'); + background-size: cover; + display: none; + width: 18px; + height: 12px; +} +@media (min-width: 1260px) { + .burger::after { + width: 24px; + height: 16px; + } +} +.burger:hover::before { + display: none; +} +.burger:hover::after { + display: inline-block; +} +.burger__label { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.phone__label { + font-family: Poppins, sans-serif; + font-size: 12px; + font-weight: 600; + line-height: 16px; + letter-spacing: 2px; + text-transform: uppercase; + color: rgb(255, 255, 255); + position: absolute; + transform: translateX(calc(100% - 320px)) translateY(5px); +} +.phone__icon { + height: 18px; + width: 18px; +} +@media (min-width: 1260px) { + .phone__icon { + height: 24px; + width: 24px; + } +} +.phone:not(:hover) .phone__label { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.section { + padding-top: 92px; + grid-column: 1/3; +} +@media (min-width: 744px) { + .section { + padding-top: 120px; + grid-column: 1/7; + } +} +@media (min-width: 1260px) { + .section { + padding-top: 24px; + margin-top: 120px; + grid-column: 1/13; + } +} +@media (min-width: 1260px) { + .section__title { + font-size: 64px; + line-height: 64px; + letter-spacing: -1.5px; + text-align: center; + } +} +.section__article { + margin-bottom: 40px; +} + +.price { + font-family: Poppins, sans-serif; + font-size: 24px; + font-weight: 700; + line-height: 33.6px; + text-align: left; + margin-bottom: 40px; + color: rgb(255, 255, 255); +} + +.main { + background-color: #1d1d1d; + padding: 60px 20px 120px; + font-family: Poppins, sans-serif; + font-size: 23px; + font-weight: 500; + line-height: 32.2px; + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 130px); + grid-column-gap: 20px; +} +@media (min-width: 744px) { + .main { + grid-template-columns: repeat(6, 80px); + grid-column-gap: 24px; + } +} +@media (min-width: 1260px) { + .main { + grid-template-columns: repeat(12, 63px); + grid-column-gap: 24px; + } +} +.main__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 500; + line-height: 32px; + letter-spacing: -1.5px; + text-align: left; + color: rgb(255, 255, 255); + margin-bottom: 32px; + grid-column: 1/3; +} +@media (min-width: 744px) { + .main__title { + grid-column: 1/4; + font-size: 48px; + line-height: 48px; + } +} +@media (min-width: 1260px) { + .main__title { + grid-column: 1/5; + font-size: 64px; + line-height: 64px; + } +} +.main__content { + grid-column: 1/3; +} +@media (min-width: 744px) { + .main__content { + grid-column: 4/7; + } +} +@media (min-width: 1260px) { + .main__content { + grid-column: 7/13; + } +} +.main__paragraph { + color: #fff; +} +.main__section { + padding-top: 92px; + grid-column: 1/3; +} +@media (min-width: 744px) { + .main__section { + padding-top: 132px; + grid-column: 1/7; + } +} +@media (min-width: 1260px) { + .main__section { + padding-top: 180px; + grid-column: 1/13; + } +} + +.pictures { + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 130px); + grid-column-gap: 20px; +} +@media (min-width: 744px) { + .pictures { + grid-template-columns: repeat(6, 80px); + grid-column-gap: 24px; + } +} +@media (min-width: 1260px) { + .pictures { + grid-template-columns: repeat(12, 63px); + grid-column-gap: 24px; + } +} +.pictures__item { + width: 100%; + position: relative; + padding-top: 100%; + margin-bottom: 16px; +} +@media (min-width: 744px) { + .pictures__item { + grid-column: span 6; + padding-top: 187px; + } +} +@media (min-width: 1260px) { + .pictures__item { + grid-column: span 3; + padding-top: 320px; + } +} +@media (min-width: 744px) { + .pictures__item--small { + grid-column: span 2; + } +} +@media (min-width: 1260px) { + .pictures__item--small { + grid-column: span 4; + } +} +@media (min-width: 744px) { + .pictures__item--big { + grid-column: span 4; + } +} +@media (min-width: 1260px) { + .pictures__item--big { + grid-column: span 8; + } +} +.pictures--image { + top: 0; + width: 100%; + height: 100%; + position: absolute; + object-fit: cover; + transition: transform 0.3s; +} +.pictures--image:hover { + transform: scale(1.1); +} +@media (min-width: 1260px) { + .pictures--image:hover { + transform: scale(1.05); + } +} +.pictures__paragraph { + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 22.4px; + text-align: left; + color: #fff; + grid-column: 1/3; +} +@media (min-width: 744px) { + .pictures__paragraph { + grid-column: 1/7; + } +} +@media (min-width: 1260px) { + .pictures__paragraph { + grid-column: 1/9; + } +} +.pictures__button { + grid-column: 1/3; +} +@media (min-width: 744px) { + .pictures__button { + grid-column: 2/6; + } +} +@media (min-width: 1260px) { + .pictures__button { + grid-column: 5/9; + } +} + +.button { + height: 56px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + background-color: rgb(255, 255, 255); + border-radius: 40px; + text-decoration: none; + margin-top: 40px; +} +@media (min-width: 1260px) { + .button { + margin-top: 48px; + } +} +.button::after { + content: 'Explore'; + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 27px; + text-align: center; + color: rgb(29, 29, 29); +} +.button:hover { + box-shadow: 1px 4px 16px 0 rgba(232, 232, 240, 0.4); + transition-duration: 0.3s; + transition-timing-function: linear; +} +.button:target { + box-shadow: 1px 4px 16px 0 rgba(232, 232, 240, 0.64); +} + +.forms { + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 130px); + grid-column-gap: 20px; +} +@media (min-width: 744px) { + .forms { + grid-template-columns: repeat(6, 80px); + grid-column-gap: 24px; + } +} +@media (min-width: 1260px) { + .forms { + grid-template-columns: repeat(12, 63px); + grid-column-gap: 24px; + } +} +.forms__contact { + grid-column: 1/3; +} +@media (min-width: 744px) { + .forms__contact { + grid-column: 4/7; + } +} +@media (min-width: 1260px) { + .forms__contact { + grid-column: 8/11; + } +} + +.form { + grid-column: 1/3; + display: flex; + justify-content: center; + flex-direction: column; +} +@media (min-width: 744px) { + .form { + grid-column: 1/4; + } +} +@media (min-width: 1260px) { + .form { + grid-column: 1/6; + } +} +.form__input { + display: flex; + box-sizing: border-box; + height: 48px; + border-radius: 40px; + padding: 14px 16px; + margin-bottom: 16px; +} +.form__message { + padding: 14px 16px; + border-radius: 16px; + height: 148px; + font-family: Poppins, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 20px; + margin-bottom: 32px; +} +.form__paragraph { + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 22.4px; + text-align: left; + margin-bottom: 24px; +} +.form__paragraph:hover { + color: aqua; +} +.form__button { + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 27px; + text-align: center; + margin-bottom: 48px; +} +@media (min-width: 744px) { + .form__button { + margin-bottom: 0; + } +} +@media (min-width: 1260px) { + .form__button { + margin-bottom: 0; + } +} +.form__button::after { + content: 'Send'; +} + +.footer { + height: 200px; + background-image: url('../images/footer-320.jpg'); + background-size: cover; + display: flex; + justify-content: center; + align-items: end; +} +@media (min-width: 744px) { + .footer { + height: 480px; + background-image: url('../images/footer-for-ipad.jpg'); + } +} +@media (min-width: 1260px) { + .footer { + height: 555px; + background-image: url('../images/footer-for-desktop.jpg'); + } +} +.footer__pictures { + margin-bottom: 24px; +} + +.article__paragraph { + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 22.4px; + text-align: left; + margin-bottom: 16px; +} +.article--distance { + margin-bottom: 40px; +} +@media (min-width: 1260px) { + .article--distance { + margin-bottom: 48px; + } +} +.article:last-child { + margin-bottom: 0; +} + +.bikes { + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 130px); + grid-column-gap: 20px; +} +@media (min-width: 744px) { + .bikes { + grid-template-columns: repeat(6, 80px); + grid-column-gap: 24px; + } +} +@media (min-width: 1260px) { + .bikes { + grid-template-columns: repeat(12, 63px); + grid-column-gap: 24px; + } +} +.bikes__bike { + grid-column: span 2; +} +@media (min-width: 744px) { + .bikes__bike { + grid-column: 2/6; + } +} +@media (min-width: 1260px) { + .bikes__bike { + grid-column: span 4; + } +} + +.bike { + transition: transform 0.3s; +} +.bike__item { + display: flex; + justify-content: center; +} +.bike--image { + margin-bottom: 32px; +} +.bike--price { + font-family: Poppins, sans-serif; + font-size: 24px; + font-weight: 700; + line-height: 33.6px; + text-align: left; + margin-bottom: 40px; + color: rgb(255, 255, 255); +} +.bike__paragraph { + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 22.4px; + text-align: left; + margin-bottom: 16px; +} +.bike:hover { + transform: scale(1.1); +} +@media (min-width: 1260px) { + .bike:hover { + transform: scale(1.05); + } +} + +.contact__link { + text-decoration: none; +} + +/*# sourceMappingURL=styles.css.map */ diff --git a/src/styles/styles.css.map b/src/styles/styles.css.map new file mode 100644 index 0000000000..378f41a74d --- /dev/null +++ b/src/styles/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["utils/reset.scss","blocks/body.scss","blocks/title.scss","utils/mixins.scss","blocks/header.scss","blocks/navigation.scss","blocks/paragraph.scss","blocks/icons.scss","blocks/menu.scss","blocks/links.scss","blocks/burger.scss","blocks/phone.scss","blocks/section.scss","blocks/price.scss","blocks/main.scss","blocks/pictures.scss","blocks/button.scss","blocks/forms.scss","blocks/form.scss","blocks/footer.scss","blocks/article.scss","blocks/bikes.scss","blocks/bike.scss","blocks/contact.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAiFE;EACA;EACA;EACA;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;EACE;EACA;;;ACpIF;EACE;;;AAGF;EACE;;;ACHF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;;ACCA;EDTF;IAWI;IACA;;;ACGF;EDfF;IAgBI;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AClBF;EDWA;IAUI;IACA;IACA;IACA;;;AClBJ;EDKA;IAiBI;IACA;IACA;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;;AC5CF;EDoCA;IAWI;;;ACzCJ;ED8BA;IAeI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AEtEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDaA;EACA;EACA;EACA;;AAfA;ECTF;IAWI;;;ADFF;ECTF;ID2BI;IACA;;;AAbF;ECfF;IDgCI;IACA;;;ACjBF;EACE;EACA;EACA;;ADVF;ECOA;IAMI;;;ADPJ;ECCA;IAUI;;;AAIJ;EACE;EACA;EACA;;ADxBF;ECqBA;IAMI;;;ADrBJ;ECeA;IAUI;;;;ACxCN;EACE;EACA;EACA;EACA;;AFKA;EETF;IAOI;;;AFQF;EEfF;IAWI;;;AAGF;EACE;EACA;EACA;EACA;;AFHF;EEDA;IAOI;IACA;;;;ACtBN;EACE;EACA;EACA;EACA;EACA;EACA;;;ACNF;EACE;EACA;EACA;EACA;;AJKA;EITF;IAOI;;;AJQF;EIfF;IAWI;;;;ACXJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ELQA;EACA;EACA;EACA;;AAfA;EKTF;IL2BI;IACA;;;AAbF;EKfF;ILgCI;IACA;;;AKhBF;EACE;;AAGF;EACE;;ALbF;EKYA;IAII;;;ALVJ;EKMA;IAQI;;;AAIJ;EACE;;ALzBF;EKwBA;IAII;;;ALtBJ;EKkBA;IAQI;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AL3CF;EKqCA;IASI;;;ALxCJ;EK+BA;IAaI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzEJ;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ANFF;EMRA;IAaI;;;AAGF;EACE;;;ACvBJ;EACE;EACA;EACA;EACA;EACA;EACA;;APQF;EOdA;IASI;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;APNF;EOAA;IASI;IACA;;;AAKF;EACE;;AAEF;EACE;;AAIJ;EPvCA;EACA;EACA;EACA;EACA;EACA;EACA;;;AQJA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAGF;EACE;EACA;;ARDF;EQDA;IAKI;IACA;;;AAIJ;ERzBA;EACA;EACA;EACA;EACA;EACA;EACA;;;ASLF;EACE;EACA;;ATOA;ESTF;IAKI;IACA;;;ATSF;ESfF;IAUI;IACA;IACA;;;ATGF;ESAA;IAEI;IACA;IACA;IACA;;;AAIJ;EACE;;;AC3BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACLF;EACE;EACA;EACA;EACA;EACA;EACA;EXeA;EACA;EACA;EACA;;AAfA;EWTF;IX2BI;IACA;;;AAbF;EWfF;IXgCI;IACA;;;AWvBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AXVF;EWCA;IAYI;IACA;IACA;;;AXTJ;EWLA;IAkBI;IACA;IACA;;;AAIJ;EACE;;AX1BF;EWyBA;IAII;;;AXvBJ;EWmBA;IAQI;;;AAIJ;EACE;;AAGF;EACE;EACA;;AX3CF;EWyCA;IAKI;IACA;;;AXzCJ;EWmCA;IAUI;IACA;;;;AC7DN;EZqBE;EACA;EACA;EACA;;AAfA;EYTF;IZ2BI;IACA;;;AAbF;EYfF;IZgCI;IACA;;;AY9BF;EACE;EACA;EACA;EACA;;AZEF;EYNA;IAOI;IACA;;;AZIJ;EYZA;IAYI;IACA;;;AZPJ;EYUE;IAEI;;;AZNN;EYIE;IAMI;;;AZhBN;EYoBE;IAEI;;;AZhBN;EYcE;IAMI;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AZlCJ;EYiCE;IAII;;;AAKN;EACE;EACA;EACA;EACA;EACA;EAEA;EAEA;;AZzDF;EYgDA;IAYI;;;AZtDJ;EY0CA;IAgBI;;;AAIJ;EACE;;AZrEF;EYoEA;IAII;;;AZlEJ;EY8DA;IAQI;;;;ACrFN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AbIA;EafF;IAcI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;AClCJ;EdqBE;EACA;EACA;EACA;;AAfA;EcTF;Id2BI;IACA;;;AAbF;EcfF;IdgCI;IACA;;;Ac9BF;EACE;;AdKF;EcNA;IAII;;;AdQJ;EcZA;IAQI;;;;ACXN;EACE;EACA;EACA;EACA;;AfKA;EeTF;IAOI;;;AfQF;EefF;IAWI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;Af5CF;EesCA;IASI;;;AfzCJ;EegCA;IAaI;;;AAGF;EACE;;;AChEN;EACE;EACA;EACA;EACA;EACA;EACA;;AhBGA;EgBTF;IASI;IACA;;;AhBKF;EgBfF;IAcI;IACA;;;AAGF;EACE;;;AClBF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AjBIF;EiBLA;IAII;;;AAIJ;EACE;;;ACnBJ;ElBqBE;EACA;EACA;EACA;;AAfA;EkBTF;IlB2BI;IACA;;;AAbF;EkBfF;IlBgCI;IACA;;;AkB9BF;EACE;;AlBKF;EkBNA;IAII;;;AlBQJ;EkBZA;IAQI;;;;ACXN;EACE;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AnBjBF;EmBgBA;IAII;;;;AClCJ;EACE","file":"styles.css"} \ No newline at end of file diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3e..0000000000 --- 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 80c79780dc..0000000000 --- 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 aeb006ffbb..0000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..21a7651a41 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,38 @@ +@mixin visually-hidden() { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +@mixin for-ipad() { + @media (min-width: 744px) { + @content; + } +} + +@mixin for-desktop() { + @media (min-width: 1260px) { + @content; + } +} + +@mixin grid() { + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 130px); + grid-column-gap: 20px; + + @include for-ipad { + grid-template-columns: repeat(6, 80px); + grid-column-gap: 24px; + } + + @include for-desktop { + grid-template-columns: repeat(12, 63px); + grid-column-gap: 24px; + } +} diff --git a/src/styles/utils/reset.scss b/src/styles/utils/reset.scss new file mode 100644 index 0000000000..2f1a2e9528 --- /dev/null +++ b/src/styles/utils/reset.scss @@ -0,0 +1,134 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote::before, +blockquote::after, +q::before, +q::after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +}