diff --git a/.stylelintrc.json b/.stylelintrc.json deleted file mode 100644 index 189e393..0000000 --- a/.stylelintrc.json +++ /dev/null @@ -1,159 +0,0 @@ -{ - "rules": { - "block-no-empty": true, - "comment-no-empty": true, - "declaration-block-no-duplicate-custom-properties": true, - "declaration-block-no-shorthand-property-overrides": true, - "font-family-no-duplicate-names": true, - "function-calc-no-unspaced-operator": true, - "function-linear-gradient-no-nonstandard-direction": true, - "media-feature-name-no-unknown": true, - "named-grid-areas-no-invalid": true, - "no-duplicate-selectors": true, - "no-empty-source": true, - "no-extra-semicolons": true, - "no-invalid-double-slash-comments": true, - "no-irregular-whitespace": true, - "property-no-unknown": true, - "selector-pseudo-class-no-unknown": true, - "selector-pseudo-element-no-unknown": true, - "string-no-newline": true, - "unit-no-unknown": true, - "font-family-no-missing-generic-family-keyword": true, - "no-descending-specificity": null, - "color-hex-case": "lower", - "color-hex-length": "long", - "font-family-name-quotes": "always-unless-keyword", - "function-comma-newline-after": "always-multi-line", - "function-comma-newline-before": "never-multi-line", - "function-comma-space-after": "always-single-line", - "function-comma-space-before": "never", - "function-max-empty-lines": 0, - "function-name-case": "lower", - "function-parentheses-space-inside": "never-single-line", - "function-url-quotes": "always", - "function-whitespace-after": "always", - "number-leading-zero": "always", - "number-no-trailing-zeros": true, - "length-zero-no-unit": true, - "string-quotes": "double", - "unit-case": "lower", - "value-keyword-case": "lower", - "value-list-comma-newline-after": "always-multi-line", - "value-list-comma-newline-before": "never-multi-line", - "value-list-comma-space-after": "always-single-line", - "value-list-comma-space-before": "never", - "value-list-max-empty-lines": 0, - "value-no-vendor-prefix": true, - "property-case": "lower", - "property-no-vendor-prefix": true, - "keyframe-declaration-no-important": true, - "declaration-no-important": true, - "declaration-bang-space-after": "never", - "declaration-bang-space-before": "always", - "declaration-colon-space-after": "always-single-line", - "declaration-colon-space-before": "never", - "declaration-block-no-duplicate-properties": true, - "declaration-block-semicolon-newline-after": "always", - "declaration-block-semicolon-newline-before": "never-multi-line", - "declaration-block-semicolon-space-after": "always-single-line", - "declaration-block-semicolon-space-before": "never", - "declaration-block-trailing-semicolon": "always", - "block-closing-brace-empty-line-before": "never", - "block-closing-brace-newline-after": "always", - "block-closing-brace-newline-before": "always", - "block-closing-brace-space-after": "always-single-line", - "block-closing-brace-space-before": "always-single-line", - "block-opening-brace-newline-after": "always", - "block-opening-brace-space-after": "always-single-line", - "block-opening-brace-space-before": "always", - "selector-attribute-brackets-space-inside": "never", - "selector-attribute-operator-space-after": "never", - "selector-attribute-operator-space-before": "never", - "selector-attribute-quotes": "always", - "selector-combinator-space-after": "always", - "selector-combinator-space-before": "always", - "selector-descendant-combinator-no-non-space": true, - "selector-max-id": 0, - "selector-pseudo-class-case": "lower", - "selector-pseudo-class-parentheses-space-inside": "never", - "selector-pseudo-element-case": "lower", - "selector-pseudo-element-colon-notation": "double", - "selector-type-case": "lower", - "selector-type-no-unknown": true, - "selector-max-empty-lines": 0, - "selector-list-comma-newline-after": "always", - "selector-list-comma-newline-before": "never-multi-line", - "selector-list-comma-space-after": "always-single-line", - "selector-list-comma-space-before": "never", - "rule-empty-line-before": [ - "always", - { - "except": [ - "first-nested" - ], - "ignore": [ - "after-comment" - ] - } - ], - "media-feature-colon-space-after": "always", - "media-feature-colon-space-before": "never", - "media-feature-name-case": "lower", - "media-feature-name-no-vendor-prefix": true, - "media-feature-parentheses-space-inside": "never", - "media-feature-range-operator-space-after": "always", - "media-feature-range-operator-space-before": "always", - "media-query-list-comma-newline-after": "always-multi-line", - "media-query-list-comma-newline-before": "never-multi-line", - "media-query-list-comma-space-after": "always-single-line", - "media-query-list-comma-space-before": "never-single-line", - "at-rule-empty-line-before": [ - "always", - { - "except": [ - "first-nested", - "blockless-after-blockless" - ], - "ignore": [ - "after-comment" - ] - } - ], - "at-rule-name-case": "lower", - "at-rule-name-space-after": "always", - "at-rule-no-unknown": [ - true, - { - "ignoreAtRules": [ - "mixin", - "define-mixin", - "include", - "content", - "rules", - "each" - ] - } - ], - "at-rule-no-vendor-prefix": true, - "at-rule-semicolon-newline-after": "always", - "indentation": 2, - "max-nesting-depth": [ - 2, - { - "ignoreAtRules": [ - "media" - ] - } - ], - "max-empty-lines": 2, - "no-eol-whitespace": true, - "no-missing-end-of-source-newline": true, - "no-duplicate-at-import-rules": true, - "no-invalid-position-at-import-rule": true, - "color-no-invalid-hex": true, - "color-no-hex": null, - "color-named": "never", - "number-max-precision": 2 - } -} diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index 0a8e1a6..0000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "recommendations": [ - "EditorConfig.EditorConfig" - ] -} diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 721d26b..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "editor.renderWhitespace": "selection", - "files.exclude": { - "*:Zone.Identifier": true, - "node_modules/": true - }, - "editor.bracketPairColorization.independentColorPoolPerBracketType": true, - "editor.guides.bracketPairs": "active", - "files.insertFinalNewline": true, - "files.trimFinalNewlines": true, - "files.trimTrailingWhitespace": true, - "css.format.spaceAroundSelectorSeparator": true, - "css.lint.compatibleVendorPrefixes": "warning", - "css.lint.duplicateProperties": "warning", - "css.lint.idSelector": "error", - "css.lint.important": "error", - "css.lint.importStatement": "warning", - "css.lint.universalSelector": "warning", - "css.lint.unknownVendorSpecificProperties": "warning", - "css.lint.zeroUnits": "error", - "html.format.endWithNewline": true, - "html.format.indentInnerHtml": true -} diff --git a/about.html b/about.html index fc93257..332ea36 100644 --- a/about.html +++ b/about.html @@ -3,6 +3,7 @@ О нас + diff --git a/catalog.html b/catalog.html index b411d5b..05baf4e 100644 --- a/catalog.html +++ b/catalog.html @@ -3,6 +3,7 @@ Каталог + diff --git a/faq.html b/faq.html new file mode 100644 index 0000000..257fdb7 --- /dev/null +++ b/faq.html @@ -0,0 +1,206 @@ + + + + + О нас + + + + + + + + + + + + + +
+

Часто задаваемые вопросы

+
+
+ + Есть ли у вас круглосуточная поддержка? +
+ + + + + + +
+
+

+ Да, мы предоставляем данную услугу. Стоимость обслуживания при это увеличивается. Однако система круглосуточного мониторинга настраивается для каждого клиента по индивидуально обговоренному тарифу. +

+
+ +
+ + Обслуживаете ли вы 1С? +
+ + + + + + +
+
+

+ Мы оказываем поддержку в обновлении и администрированнии типовых конфигураций: создание новых пользователей и баз, назначение прав, подключение баз и обновление платформы. +

+
+ +
+ + Какие регионы вы обслуживаете? +
+ + + + + + +
+
+

+ Мы работаем по всей России. +

+
+ +
+ + Как происходит консультанция, и что следует после неё? +
+ + + + + + +
+
+

+ Во время консультанции мы обговариваем список услуг, которые вас заинтересовали, договариваемся о вашей встрече с выездным мастером и стоимости IT-аудита (при необходимости), затем обговариваем дальнейшее сотрудничество. +

+
+ +
+ + Что входит в IT-аудит? +
+ + + + + + +
+
+
    +
  • + Визуальный осмотр инфраструктуры и оборудования выездным мастером. +
  • +
  • + Полная инвентаризация всего принимаего на обслуживание оборудования. +
  • +
  • + Проведение опроса сотрудников о текущих и хронических проблемах. +
  • +
  • + Обследование IT-инфраструктуры. +
  • +
  • + Встреча по итогам с уточнением организационных вопросов и приоритетова. +
  • +
+
+ +
+ + Какие дополнительные услуги вы предоставляете? +
+ + + + + + +
+
+

+ Мы предоставляем абсолютно любые услуги, связанные с IT инфраструктурой. За подробной информацией можете связаться с нами по номеру телефона, либо записаться на консультанцию на главной странице данного сайта. +

+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/images/faq/arrow-active.png b/images/faq/arrow-active.png new file mode 100644 index 0000000..5838c33 Binary files /dev/null and b/images/faq/arrow-active.png differ diff --git a/images/faq/arrow-active.svg b/images/faq/arrow-active.svg new file mode 100644 index 0000000..224f1fc --- /dev/null +++ b/images/faq/arrow-active.svg @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/images/faq/arrow.png b/images/faq/arrow.png new file mode 100644 index 0000000..6d872ac Binary files /dev/null and b/images/faq/arrow.png differ diff --git a/images/faq/arrow.svg b/images/faq/arrow.svg new file mode 100644 index 0000000..338aac6 --- /dev/null +++ b/images/faq/arrow.svg @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/index.html b/index.html index ab98899..a5cb901 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,8 @@ + + @@ -91,35 +93,37 @@

Кратко о нас

-
-
-

Записаться на консультацию

-

(Укажите желаемую дату и время, и мы свяжемся с вами)

-
-
-
-
-

- - + +

+
+

Записаться на консультацию

+

(Укажите желаемую дату и время, и мы свяжемся с вами)

+
+ +
+
+

+ + +

+

+ + +

+
+

+ +

-

- - +

+ +

-
-

- - -

-

- - -

+
+ +
- - - +
@@ -163,30 +167,29 @@

Мы в соц. сетях

+ \ No newline at end of file diff --git a/js/details.js b/js/details.js new file mode 100644 index 0000000..548d64e --- /dev/null +++ b/js/details.js @@ -0,0 +1,13 @@ +const details = document.querySelectorAll("details"); + +// добавить к каждому клику события клика +[...details].forEach((targetDetail) => { + targetDetail.addEventListener("click", _ => { + // закрывать всех кроме кликнутого + details.forEach((detail) => { + if (detail !== targetDetail) { + detail.removeAttribute("open"); + } + }); + }); +}); \ No newline at end of file diff --git a/js/href_highlightning.js b/js/href_highlightning.js new file mode 100644 index 0000000..34b6557 --- /dev/null +++ b/js/href_highlightning.js @@ -0,0 +1,39 @@ +window.onload = function () { + highlightAnchor(); + + // Подсветка при переходе по якорной ссылке + window.addEventListener('hashchange', highlightAnchor); +}; + +function highlightAnchor() { + // Убираем подсветку со всех элементов + const sections = document.querySelectorAll('high'); + sections.forEach(section => { + section.classList.remove('active-link'); + }); + + // Получаем текущий якорь + const currentAnchor = window.location.hash; + + // Если якорь существует, подсвечиваем соответствующий элемент + if (currentAnchor) { + const activeSection = document.querySelector(currentAnchor); + if (activeSection) { + activeSection.classList.add('active-link'); + + // Убираем подсветку через 10 секунд + setTimeout(() => { + activeSection.classList.remove('active-link'); + }, 600); + } + + // Удаляем часть ссылки после # + const cleanHash = currentAnchor.split('#')[1]; // Получаем часть после # + if (cleanHash) { + // Здесь можно сделать что-то с cleanHash, например, вывести в консоль + console.log('Удалена часть ссылки после #:', cleanHash); + // Можно также удалить её из URL, если это необходимо + history.replaceState(null, null, ' '); + } + } +} \ No newline at end of file diff --git a/styles/style-about.css b/styles/style-about.css index b3abaa3..61345fe 100644 --- a/styles/style-about.css +++ b/styles/style-about.css @@ -9,8 +9,8 @@ header .page-header-logo-href{ font-size: 20px; } .info .info-title { - margin-top: 130px; - margin-bottom: 80px; + margin-top: 150px; + margin-bottom: 60px; } .info .card-company { @@ -55,14 +55,4 @@ header .page-header-logo-href{ width: 40%; border: 5px solid #1d1d1f; padding: 20px; -} - - -footer .logo-footer{ - margin-left: auto; - -ms-flex-item-align: center; - -ms-grid-row-align: center; - align-self: center; - margin-bottom: 20px; - margin-right: 20px; } \ No newline at end of file diff --git a/styles/style-catalog.css b/styles/style-catalog.css index 989bf62..67e0db9 100644 --- a/styles/style-catalog.css +++ b/styles/style-catalog.css @@ -8,10 +8,11 @@ header .page-header-logo-href{ text-align: center; } .catalog-products .visually-hidden { - margin-bottom: 40px; + margin-top: 150px; + margin-bottom: 60px; } .catalog-products .product-list { - width: 95%; + width: 1580px; margin: 0 auto; display: -ms-grid; display: grid; @@ -40,13 +41,4 @@ header .page-header-logo-href{ -webkit-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; -} - -footer .logo-footer{ - margin-left: auto; - -ms-flex-item-align: center; - -ms-grid-row-align: center; - align-self: center; - margin-bottom: 20px; - margin-right: 20px; } \ No newline at end of file diff --git a/styles/style-faq.css b/styles/style-faq.css new file mode 100644 index 0000000..db5e549 --- /dev/null +++ b/styles/style-faq.css @@ -0,0 +1,133 @@ +header .page-header-logo-href{ + margin-left: 20px; + margin-right: 20px; +} + +.faq-title { + margin-top: 150px; + margin-bottom: 60px; +} + +.faq-items { + width: 1165px; + margin: auto; +} +.faq-items details { + border: 5px solid #1d1d1f; + border-radius: 30px; + background-color: #1d1d1f; + padding: 15px; + margin-top: 30px; + -webkit-transition: all 0.25s ease; + -o-transition: all 0.25s ease; + transition: all 0.25s ease; +} +.faq-items details:not([open]) { + height: 50px; +} +.faq-items details[open]:not(:nth-child(3)):not(:nth-child(5)) { + height: 150px; +} +.faq-items details[open]:nth-child(3) { + height: 100px; +} +.faq-items details[open]:nth-child(5) { + height: 240px; +} +.faq-items details summary { + color: #48696e; + font-size: 40px; + list-style: none; + cursor: pointer; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-transition: margin 0.35s ease-out, color 0.6s ease; + -o-transition: margin 0.35s ease-out, color 0.6s ease; + transition: margin 0.35s ease-out, color 0.6s ease; +} +.faq-items details summary:hover{ + color: #6eeeff; + -webkit-transition: 0.6s; + -o-transition: 0.6s; + transition: 0.6s; +} +.faq-items details[open] summary { + margin-bottom: 15px; +} +.faq-items details summary .arrow { + position: relative; + margin-left: auto; + margin-right: 20px; + -webkit-transition: all 0.25s ease; + -o-transition: all 0.25s ease; + transition: all 0.25s ease; +} +.faq-items details:not([open]) .arrow { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.faq-items details[open] .arrow { + -webkit-transform: none; + -ms-transform: none; + transform: none; +} +.faq-items details .arrow .img-svg:first-child { + position: absolute; + opacity: 0; + -webkit-transition: 0.35s; + -o-transition: 0.35s; + transition: 0.35s; +} +.faq-items details summary:hover .arrow .img-svg:first-child { + opacity: 1; + -webkit-transition: 0.35s; + -o-transition: 0.35s; + transition: 0.35s; +} +.faq-items details[open] .arrow .img-svg:first-child { + opacity: 1; +} + +.faq-items details p, +.faq-items details li { + color: #6fa4ab; + font-size: 25px; + font-style: italic; + margin-left: 50px; +} +.faq-items details li:not(:last-child) { + margin-bottom: 10px; +} + +.faq-items details a { + text-decoration: none; + color: #3ea9b8; + cursor: pointer; + font-style: italic; + text-decoration: underline; + -webkit-transition: 0.35s; + -o-transition: 0.35s; + transition: 0.35s; +} +.faq-items details a:hover { + color: #6eeeff; + -webkit-transition: 0.6s; + -o-transition: 0.6s; + transition: 0.6s; +} + +.page-footer .footer-info a { + -webkit-transition: 0.6s; + -o-transition: 0.6s; + transition: 0.6s; +} +.page-footer .footer-info a.active-link { + background-color: #c2c2c2; + border: 1px solid #6eeeff; + border-radius: 5px; +} \ No newline at end of file diff --git a/styles/style-index.css b/styles/style-index.css index 4300d02..06c3874 100644 --- a/styles/style-index.css +++ b/styles/style-index.css @@ -264,11 +264,11 @@ header .page-header-logo{ transition: 1.2s; } -footer .logo-footer-href{ - margin-left: auto; - -ms-flex-item-align: center; - -ms-grid-row-align: center; - align-self: center; - margin-bottom: 20px; - margin-right: 20px; +.main-site section { + -webkit-transition: 0.6s; + -o-transition: 0.6s; + transition: 0.6s; +} +.main-site section.active-link { + background-color: #c2c2c2; } \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 84c3391..675c8a4 100644 --- a/styles/style.css +++ b/styles/style.css @@ -146,6 +146,14 @@ footer { -ms-flex-item-align: end; align-self: flex-end; } +footer .logo-footer{ + margin-left: auto; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + margin-bottom: 20px; + margin-right: 20px; +} footer .contacts-title { margin-top: 20px; margin-left: 10px;