Page list vacancies and others is done

package-lock.json

@@ -2148,6 +2148,16 @@
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
       "integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ=="
     },
+    "choices.js": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/choices.js/-/choices.js-9.0.1.tgz",
+      "integrity": "sha512-JgpeDY0Tmg7tqY6jaW/druSklJSt7W68tXFJIw0GSGWmO37SDAL8o60eICNGbzIODjj02VNNtf5h6TgoHDtCsA==",
+      "requires": {
+        "deepmerge": "^4.2.0",
+        "fuse.js": "^3.4.5",
+        "redux": "^4.0.4"
+      }
+    },
     "chokidar": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
@@ -2990,6 +3000,11 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+    },
     "default-gateway": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@@ -4716,6 +4731,11 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "fuse.js": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz",
+      "integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw=="
+    },
     "gauge": {
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
@@ -5901,8 +5921,7 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
       "version": "3.13.1",
@@ -6184,7 +6203,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -8317,6 +8335,15 @@
         "strip-indent": "^1.0.1"
       }
     },
+    "redux": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -9615,6 +9642,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",

package.json

@@ -41,6 +41,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.8.3",
     "bootstrap": "^4.4.1",
+    "choices.js": "^9.0.1",
     "fetch-polyfill": "^0.8.2",
     "gsap": "^3.1.1",
     "jquery": "^3.4.1",

src/faq.html

@@ -71,7 +71,7 @@
                                 <div class="accordion-block-title">
                                     <p>Как создать резюме?</p>
                                     <a href="#" class="arrow-accordion">
-                                       <img src="./img/arrow_accordion.svg" alt="">
+                                       <img class="img-svg" src="./img/arrow_accordion.svg" alt="">
                                     </a>
                                 </div>
                                 <div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>
@@ -80,7 +80,7 @@
                                 <div class="accordion-block-title">
                                     <p>Как изменить пароль в аккаунте соискателя?</p>
                                     <a href="#" class="arrow-accordion">
-                                        <img src="./img/arrow_accordion.svg" alt="">
+                                        <img class="img-svg" src="./img/arrow_accordion.svg" alt="">
                                     </a>
                                 </div>
                                 <div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>
@@ -89,7 +89,7 @@
                                 <div class="accordion-block-title">
                                     <p>Виды поддержки для соискателей</p>
                                     <a href="#" class="arrow-accordion">
-                                        <img src="./img/arrow_accordion.svg" alt="">
+                                        <img class="img-svg" src="./img/arrow_accordion.svg" alt="">
                                     </a>
                                 </div>
                                 <div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>
@@ -98,7 +98,7 @@
                                 <div class="accordion-block-title">
                                     <p>Управление рассылками для соискателей</p>
                                     <a href="#" class="arrow-accordion">
-                                        <img src="./img/arrow_accordion.svg" alt="">
+                                        <img class="img-svg" src="./img/arrow_accordion.svg" alt="">
                                     </a>
                                 </div>
                                 <div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>
@@ -107,7 +107,7 @@
                                 <div class="accordion-block-title">
                                     <p>Как подтвердить номер телефона?</p>
                                     <a href="#" class="arrow-accordion">
-                                        <img src="./img/arrow_accordion.svg" alt="">
+                                        <img class="img-svg" src="./img/arrow_accordion.svg" alt="">
                                     </a>
                                 </div>
                                 <div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>

src/img/arrow_back.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 20L11.4 18.6L3.8 11H20V9H3.8L11.4 1.4L10 0C6.3 3.7 3.5 6.5 0 10C4 14 1.2 11.2 10 20Z" fill="#262262"/>
+</svg>

src/img/arrow_forward.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 20L8.6 18.6L16.2 11H0V9H16.2L8.6 1.4L10 0C13.7 3.7 16.5 6.5 20 10C16 14 18.8 11.2 10 20Z" fill="#262262"/>
+</svg>

src/img/bg-submit-quick-search.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM8 14C4.7 14 2 11.3 2 8C2 4.7 4.7 2 8 2C11.3 2 14 4.7 14 8C14 11.3 11.3 14 8 14ZM20 18.6L18.6 20L14.4 15.8L15.8 14.4L20 18.6Z" fill="#B7B6C4"/>
+</svg>

src/index.html

@@ -281,7 +281,7 @@
                         </div>
                     </div>
                 </div>
-                <a href="#" class="button-text ref-detail block-mt-blue">
+                <a href="vacancies.html" class="button-text ref-detail block-mt-blue">
                     <img class="img-svg" src="./img/icon_more.svg" alt="">
                     Все вакансии
                 </a>
@@ -528,7 +528,7 @@
                                     <div class="accordion-block-title">
                                         <p>Как создать резюме?</p>
                                         <a href="#" class="arrow-accordion">
-                                           <img src="./img/arrow_accordion.svg" alt="">
+                                           <img class="img-svg" src="./img/arrow_accordion.svg" alt="">
                                         </a>
                                     </div>
                                     <div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>
@@ -537,7 +537,7 @@
                                     <div class="accordion-block-title">
                                         <p>Как изменить пароль в аккаунте соискателя?</p>
                                         <a href="#" class="arrow-accordion">
-                                            <img src="./img/arrow_accordion.svg" alt="">
+                                            <img class="img-svg" src="./img/arrow_accordion.svg" alt="">
                                         </a>
                                     </div>
                                     <div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>
@@ -546,7 +546,7 @@
                                     <div class="accordion-block-title">
                                         <p>Виды поддержки для соискателей</p>
                                         <a href="#" class="arrow-accordion">
-                                            <img src="./img/arrow_accordion.svg" alt="">
+                                            <img class="img-svg" src="./img/arrow_accordion.svg" alt="">
                                         </a>
                                     </div>
                                     <div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>
@@ -555,7 +555,7 @@
                                     <div class="accordion-block-title">
                                         <p>Управление рассылками для соискателей</p>
                                         <a href="#" class="arrow-accordion">
-                                            <img src="./img/arrow_accordion.svg" alt="">
+                                            <img class="img-svg" src="./img/arrow_accordion.svg" alt="">
                                         </a>
                                     </div>
                                     <div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>
@@ -564,7 +564,7 @@
                                     <div class="accordion-block-title">
                                         <p>Как подтвердить номер телефона?</p>
                                         <a href="#" class="arrow-accordion">
-                                            <img src="./img/arrow_accordion.svg" alt="">
+                                            <img class="img-svg" src="./img/arrow_accordion.svg" alt="">
                                         </a>
                                     </div>
                                     <div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>

src/js/main.js

 console.log('hi');
 import '../scss/style.scss';
+import Choices from  '../../node_modules/choices.js/src/scripts/choices';
 import 'owl.carousel';
 
 // Вывод svg
@@ -142,6 +143,24 @@ articleBlocks.forEach(article => {
 });
 
 
+// Кастомизированный селект
+
+var elemsSelect = document.querySelectorAll('select');
+
+if(elemsSelect.length > 0)
+{
+  elemsSelect.forEach(function(elem)
+  {
+    new Choices(elem, {
+      choices: [],
+      placeholder: false,
+      searchEnabled: false,
+      itemSelectText: ''
+    });
+  });
+}
+
+
 
 
 

src/main.html

+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Все страницы</title>
+</head>
+<body>
+    <div class="wrapper">
+        <header class="header">
+            <div class="header-top">
+                <div class="container">
+                    <div class="row justify-content-between align-items-center">
+                        <div class="col-3 header-top-left">
+                            <a href="#" class="choice-lang">
+                                RU 
+                                <img class="img-svg" src="./img/arrow_down.svg" alt="">
+                            </a>
+                            <a href="#" class="choice-city">
+                                Нижний Новгород 
+                                <img class="img-svg" src="./img/arrow_down.svg" alt="">
+                            </a>
+                        </div>
+                        <div class="col-5 header-top-middle">
+                            <a href="#" class="choice-mode choice-mode_active">Ищу работу</a>
+                            <a href="#" class="choice-mode">Ищу работника</a>
+                        </div>
+                        <div class="col-auto header-top-right">
+                            <a href="#" class="help">
+                                Помощь
+                                <img class="img-svg" src="./img/arrow_down.svg" alt="">
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="header-bottom">
+                <div class="container">
+                    <div class="row justify-content-between align-items-center">
+                        <div class="col-5 header-bottom-left">
+                            <a href="#">
+                                <img src="./img/logo.svg" alt="">
+                            </a>
+                            <p>Быстрый поиск узкоквалифицированной работы</p>
+                        </div>
+                        <div class="col-5 header-bottom-right">
+                            <a href="#" class="button-text search-work">
+                                <img class="img-svg" src="./img/icon_search.svg" alt="">
+                                Найти работу
+                            </a>
+                            <a href="#" class="button-text release-resume">
+                                <img class="img-svg" src="./img/new_resume_icon.svg" alt="">
+                                Разместить резюме
+                            </a>
+                            <a href="#" class="button-text enter-account">
+                                <img class="img-svg" src="./img/icon_enter.svg" alt="">
+                                Войти
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <div class="wrapper-content block-mt-dark-blue block-mb-purple">
+            <div class="container">
+                <h1>Все страницы</h1>
+                <div class="content-page block-mt-dark-blue">
+                    <ul>
+                        <li>
+                            <a href="index.html">Главная (Для соискателей)</a>
+                        </li>
+                        <li>
+                            <a href="vacancies.html">Список вакансий (Для соискателей)</a>
+                        </li>
+                        <li>
+                            <a href="faq.html">Часто задаваемые вопросы (Для соискателей)</a>
+                        </li>
+                        <li>
+                            <a href="articles.html">Статьи (Для соискателей)</a>
+                        </li>
+                        <li>
+                            <a href="current-article.html">Статья детальная (Для соискателей)</a>
+                        </li>
+                        <li>
+                            <a href="service-rules.html">Как пользоваться сервисом (Для соискателей)</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <footer class="footer">
+            <div class="container">
+                <div class="row justify-content-between">
+                    <div class="col-2 footer-left">
+                        <a href="#">
+                            <img src="./img/logo.svg" alt="">
+                        </a>
+                    </div>
+                    <div class="col-9 footer-right">
+                        <div class="row">
+                            <div class="col-3 footer-pages">
+                                <a href="#" class="footer-right__title">О сервисе</a>
+                                <a href="#" class="footer-pages__link">Полезные статьи</a>
+                                <a href="#" class="footer-pages__link">Часто задаваемые вопросы</a>
+                                <a href="#" class="footer-pages__link">Как пользоваться сервисом</a>
+                            </div>
+                            <div class="col-3 footer-pages">
+                                <a href="#" class="footer-right__title">Соискателям</a>
+                                <a href="#" class="footer-pages__link">Разместить резюме</a>
+                                <a href="#" class="footer-pages__link">Поиск работы</a>
+                                <a href="#" class="footer-pages__link">Работа рядом</a>
+                            </div>
+                            <div class="col-3 footer-pages">
+                                <a href="#" class="footer-right__title">Работодателям</a>
+                                <a href="#" class="footer-pages__link">Разместить вакансию</a>
+                                <a href="#" class="footer-pages__link">Доступ к базе резюме</a>
+                                <a href="#" class="footer-pages__link">Реклама на сайте</a>
+                                <a href="#" class="footer-pages__link">Метка TOP-компании</a>
+                            </div>
+                            <div class="col-3 footer-contacts">
+                                <a href="#" class="footer-right__title">Контакты</a>
+                                <div class="footer-contacts__block">
+                                    <div class="footer-contacts__block__image">
+                                        <img src="./img/icon_phone.svg" alt="">
+                                    </div>
+                                    <div class="footer-contacts__block__content">
+                                        <a href="tel:79876543210">+7 987 654 32 10</a>
+                                        <a href="tel:71234567890">+7 123 456 78 90</a>
+                                    </div>
+                                </div>
+                                <div class="footer-contacts__block">
+                                    <div class="footer-contacts__block__image">
+                                        <img src="./img/icon_mail.svg" alt="">
+                                    </div>
+                                    <div class="footer-contacts__block__content">
+                                        <a href="mailto:info@vaxta-online.ru">info@vaxta-online.ru</a>
+                                    </div>
+                                </div>
+                                <button type="button" class="main-button feedback">Обратная связь</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    </div>
+</body>
+</html>
\ No newline at end of file

src/scss/_libs.scss

@@ -2,5 +2,6 @@
 @import '~owl.carousel/dist/assets/owl.theme.default.min.css';
 @import '~owl.carousel/dist/assets/owl.carousel.min.css';
 @import '~bootstrap/scss/bootstrap.scss';
+@import '../../node_modules/choices.js/src/styles/choices.scss';
 @import '~normalize.css';
 // @import '~tiny-slider/dist/tiny-slider.css';
\ No newline at end of file

webpack.config.js

@@ -5,7 +5,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const webpack = require('webpack');
 const isDev = process.env.NODE_ENV = 'development';
-const pages = ['index', 'articles', 'faq'];
+const pages = ['index', 'articles', 'faq', 'vacancies', 'current-article', 'main', 'service-rules'];
 
 const webpackConfig = {
     context: path.resolve(__dirname, 'src'),