- 
+ 
+
@@ -122,9 +122,9 @@
+
Garden care
-
- 
+ 
+
@@ -136,9 +136,9 @@
+
Planting
-
- 
+ 
+
@@ -150,9 +150,9 @@
+
Lawn care
-
- 
+ 
+
@@ -164,9 +164,9 @@
+
Planting
-
- 
+ 
+
@@ -178,9 +178,9 @@
+
Garden care
-
- 
+ 
+
@@ -205,24 +205,63 @@
Prices
-
+
+
+
+
-
Basics
-
+
+
+
+ Release of Letraset sheets containing Lorem Ipsum passages, and more recently +
+
+ $
+ 15
+ / per hour
+
+
+ Order
+
+
+
+
+
-
Standard
-
+
+
+
+ Release of Letraset sheets containing Lorem Ipsum passages, and more recently +
+
+ $
+ 25
+ / per hour
+
+
+ Order
+
+
+
+
+
@@ -289,16 +328,16 @@
diff --git a/plants/index.js b/plants/index.js
index 6c48d95..ea42dba 100644
--- a/plants/index.js
+++ b/plants/index.js
@@ -21,7 +21,9 @@
}
}());
+
// Scroll to anchors
+
(function () {
const smoothScroll = function (targetEl, duration) {
@@ -58,11 +60,164 @@
});
};
scrollTo();
+
+}());
+
+
+// Services
+
+(function () {
+
+ const buttonGardens = document.getElementById('js-buttonGardens');
+ const buttonLawn = document.getElementById('js-buttonLawn');
+ const buttonPlanting = document.getElementById('js-buttonPlanting');
+
+ const servicesGarden = document.querySelectorAll('.js-servicesGarden');
+ const servicesLawn = document.querySelectorAll('.js-servicesLawn');
+ const servicesPlanting = document.querySelectorAll('.js-servicesPlanting');
+
+ buttonGardens.addEventListener('click', (event) => {
+ if (buttonLawn.classList.contains('button-services-focus') && buttonPlanting.classList.contains('button-services-focus')) {
+ return;
+ }
+ if (buttonLawn.classList.contains('button-services-focus') || buttonPlanting.classList.contains('button-services-focus')) {
+ servicesGarden.forEach(x => x.classList.toggle('serviceBlur'));
+ } else {
+ servicesLawn.forEach(x => x.classList.toggle('serviceBlur'));
+ servicesPlanting.forEach(x => x.classList.toggle('serviceBlur'));
+ }
+ buttonGardens.classList.toggle('button-services-focus');
+ })
+
+ buttonLawn.addEventListener('click', (event) => {
+ if (buttonGardens.classList.contains('button-services-focus') && buttonPlanting.classList.contains('button-services-focus')) {
+ return;
+ }
+ if (buttonGardens.classList.contains('button-services-focus') || buttonPlanting.classList.contains('button-services-focus')) {
+ servicesLawn.forEach(x => x.classList.toggle('serviceBlur'));
+ } else {
+ servicesGarden.forEach(x => x.classList.toggle('serviceBlur'));
+ servicesPlanting.forEach(x => x.classList.toggle('serviceBlur'));
+ }
+ buttonLawn.classList.toggle('button-services-focus');
+ })
+
+ buttonPlanting.addEventListener('click', (event) => {
+ if (buttonGardens.classList.contains('button-services-focus') && buttonLawn.classList.contains('button-services-focus')) {
+ return;
+ }
+ if (buttonGardens.classList.contains('button-services-focus') || buttonLawn.classList.contains('button-services-focus')) {
+ servicesPlanting.forEach(x => x.classList.toggle('serviceBlur'));
+ } else {
+ servicesGarden.forEach(x => x.classList.toggle('serviceBlur'));
+ servicesLawn.forEach(x => x.classList.toggle('serviceBlur'));
+ }
+ buttonPlanting.classList.toggle('button-services-focus');
+ })
+
}());
+//Prices active
+(function () {
+ const dropDowns = document.querySelectorAll('.button-prices-items');
+
+ const buttonPricesBasics = document.getElementById('button-prices-items-basics');
+ const buttonPricesBasicsOpen = document.getElementById('prices-dropdown-content-basics');
+ const buttonPricesBasicsOpenPicBasics = document.getElementById('buttonPricesBasicsOpenPicBasics');
+ const buttonPricesBasicsOpenPicStandard = document.getElementById('buttonPricesBasicsOpenPicStandard');
+ const buttonPricesBasicsOpenPicPro_care = document.getElementById('buttonPricesBasicsOpenPicPro_care');
+
+ const buttonPricesStandard = document.getElementById('button-prices-items-standard');
+ const buttonPricesStandardOpen = document.getElementById('prices-dropdown-content-standard');
+ const buttonPricesStandardOpenPic = document.getElementById('buttonPricesStandardOpenPic');
+
+ const buttonPricesPro_care = document.getElementById('button-prices-items-pro_care');
+ const buttonPricesPro_careOpen = document.getElementById('prices-dropdown-content-pro_care');
+ const buttonPricesPro_careOpenPic = document.getElementById('button-prices-basics-open-pic-pro_care');
+
+ const priceLinks = document.querySelectorAll('.prices-link');
+
+ priceLinks.forEach((link) => {
+ link.addEventListener('click', (event) => event.stopPropagation());
+ });
+
+ buttonPricesBasics.addEventListener('click', (event) => {
+ if (buttonPricesStandardOpen.classList.contains('prices-dropdown-content-open') || buttonPricesPro_careOpen.classList.contains('prices-dropdown-content-open')) {
+ buttonPricesBasicsOpen.classList.toggle('prices-dropdown-content-open');
+ buttonPricesBasics.classList.toggle('button-prices-items-open');
+ buttonPricesBasics.classList.toggle('prices_items-open');
+ buttonPricesBasicsOpenPicBasics.classList.toggle('accordinon_button-pic-open');
+
+ buttonPricesStandardOpen.classList.remove('prices-dropdown-content-open');
+ buttonPricesStandard.classList.remove('button-prices-items-open');
+ buttonPricesStandard.classList.remove('prices_items-open');
+ buttonPricesBasicsOpenPicStandard.classList.remove('accordinon_button-pic-open');
+
+ buttonPricesPro_careOpen.classList.remove('prices-dropdown-content-open');
+ buttonPricesPro_care.classList.remove('button-prices-items-open');
+ buttonPricesPro_care.classList.remove('prices_items-open');
+ buttonPricesPro_careOpenPic.classList.remove('accordinon_button-pic-open');
+ } else {
+ buttonPricesBasicsOpen.classList.toggle('prices-dropdown-content-open');
+ buttonPricesBasics.classList.toggle('button-prices-items-open');
+ buttonPricesBasics.classList.toggle('prices_items-open');
+ buttonPricesBasicsOpenPicBasics.classList.toggle('accordinon_button-pic-open');
+ }
+ })
+
+ buttonPricesStandard.addEventListener('click', (event) => {
+ if (buttonPricesBasicsOpen.classList.contains('prices-dropdown-content-open') || buttonPricesPro_careOpen.classList.contains('prices-dropdown-content-open')) {
+ buttonPricesStandardOpen.classList.toggle('prices-dropdown-content-open');
+ buttonPricesStandard.classList.toggle('button-prices-items-open');
+ buttonPricesStandard.classList.toggle('prices_items-open');
+ buttonPricesBasicsOpenPicStandard.classList.toggle('accordinon_button-pic-open');
+
+ buttonPricesBasicsOpen.classList.remove('prices-dropdown-content-open');
+ buttonPricesBasics.classList.remove('button-prices-items-open');
+ buttonPricesBasics.classList.remove('prices_items-open');
+ buttonPricesBasicsOpenPicBasics.classList.remove('accordinon_button-pic-open');
+
+ buttonPricesPro_careOpen.classList.remove('prices-dropdown-content-open');
+ buttonPricesPro_care.classList.remove('button-prices-items-open');
+ buttonPricesPro_care.classList.remove('prices_items-open');
+ buttonPricesPro_careOpenPic.classList.remove('accordinon_button-pic-open');
+ } else {
+ buttonPricesStandardOpen.classList.toggle('prices-dropdown-content-open');
+ buttonPricesStandard.classList.toggle('button-prices-items-open');
+ buttonPricesStandard.classList.toggle('prices_items-open');
+ buttonPricesBasicsOpenPicStandard.classList.toggle('accordinon_button-pic-open');
+ }
+ })
+
+ buttonPricesPro_care.addEventListener('click', (event) => {
+ if (buttonPricesStandardOpen.classList.contains('prices-dropdown-content-open') || buttonPricesBasicsOpen.classList.contains('prices-dropdown-content-open')) {
+ buttonPricesPro_careOpen.classList.toggle('prices-dropdown-content-open');
+ buttonPricesPro_care.classList.toggle('button-prices-items-open');
+ buttonPricesPro_care.classList.toggle('prices_items-open');
+ buttonPricesPro_careOpenPic.classList.toggle('accordinon_button-pic-open');
+
+ buttonPricesBasicsOpen.classList.remove('prices-dropdown-content-open');
+ buttonPricesBasics.classList.remove('button-prices-items-open');
+ buttonPricesBasics.classList.remove('prices_items-open');
+ buttonPricesBasicsOpenPicBasics.classList.remove('accordinon_button-pic-open');
+
+ buttonPricesStandardOpen.classList.remove('prices-dropdown-content-open');
+ buttonPricesStandard.classList.remove('button-prices-items-open');
+ buttonPricesStandard.classList.remove('prices_items-open');
+ buttonPricesBasicsOpenPicStandard.classList.remove('accordinon_button-pic-open');
+ } else {
+ buttonPricesPro_careOpen.classList.toggle('prices-dropdown-content-open');
+ buttonPricesPro_care.classList.toggle('button-prices-items-open');
+ buttonPricesPro_care.classList.toggle('prices_items-open');
+ buttonPricesPro_careOpenPic.classList.toggle('accordinon_button-pic-open');
+ }
+ })
+
+}());
-//
-console.log('Требования к вёрстке\nВёрстка соответствует макету. Ширина экрана 768px +24\nблок +2\nсекция welcome +3\nсекция about +4\nсекция service +4\nсекция prices +4\nсекция contacts +4\nблок
Pro care
-
+
+
+
+ Release of Letraset sheets containing Lorem Ipsum passages, and more recently +
+
+ $
+ 35
+ / per hour
+
+
+ Order
+
2023
-
-
+ 
-
-
+ 
-
-
+ 
-
-
+ 