Commit b14bb538 authored by Sergey's avatar Sergey

Page list vacancies and others is done

parent 176c593d
......@@ -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",
......
......@@ -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",
......
<!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">
<div class="article-detail block-mb-blue">
<div class="article-detail__image block-mb-blue">
<img src="./img/img_article_detail.png" alt="">
</div>
<p class="article-detail__date">12.12.2019</p>
<p class="article-detail__preview">Вступление статьи. Текст, который показывается в превью на главной и раздаточной страницах. Как правило, один абзац текста, который подробно раскрывает проблему, поставленную автором, и обозначает ее важность для читателя. Если заголовок привлекает внимание читателя, то вступление должно побудить прочитать статью до конца.</p>
</div>
<p>Аутсо́рсинг (от анг. outsourcing: (outer-source-using) использование внешнего источника/ресурса) — передача организацией на основании договора определённых бизнес-процессов или производственных функций на обслуживание другой компании, специализирующейся в соответствующей области. В отличие от услуг сервиса и поддержки, имеющих разовый, эпизодический, случайный характер и ограниченных началом и концом, на аутсорсинг передаются обычно функции по профессиональной поддержке бесперебойной работоспособности отдельных систем и инфраструктуры на основе длительного контракта (не менее 1 года). Наличие бизнес-процесса является отличительной чертой аутсорсинга от различных других форм оказания услуг и абонентского обслуживания.</p>
<div class="wrapper-transition-arrow block-mt-green">
<a href="#" class="transition-button transition-button__back" id="prev-article">
<img class="img-svg" src="./img/arrow_back.svg" alt="">
Предыдущая статья
</a>
<a href="#" class="transition-button transition-button__next" id="next-article">
Следующая статья
<img class="img-svg" src="./img/arrow_forward.svg" alt="">
</a>
</div>
<div class="wrapper-transition-arrow block-mt-green">
<a href="#" class="transition-button transition-button__back" id="back-to-list">
<img class="img-svg" src="./img/arrow_back.svg" alt="">
К списку статей
</a>
</div>
</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
......@@ -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>
......
<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>
<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>
<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>
......@@ -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>
......
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: ''
});
});
}
......
<!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
......@@ -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
......@@ -284,7 +284,68 @@ button
align-items: center;
}
// Поле ввода
.wrapper-transition-arrow
{
display: flex;
justify-content: space-between;
align-items: center;
}
.transition-button
{
display: flex;
align-items: center;
padding: 20px 30px;
background-color: #fff;
font-family: Montserrat Bold;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-ref;
text-transform: uppercase;
transition: .3s;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
border: 0;
&__back
{
.img-svg
{
margin-right: 10px;
transition: .3s;
}
}
&__next
{
.img-svg
{
margin-left: 10px;
transition: .3s;
}
}
}
.transition-button:hover
{
color: $color-hover;
.img-svg path
{
fill: $color-hover;
}
}
.transition-button:active
{
color: $color-clicked;
.img-svg path
{
fill: $color-clicked;
}
}
// Поля формы
input[type="text"]
{
......@@ -328,6 +389,310 @@ input[type="text"]:focus
}
}
// Стили для select
select
{
position: relative;
display: block;
width: 100%;
height: 53px;
font-family: Montserrat Bold;
font-size: 13px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
border: solid 2px #dddce8;
background-color: #ffffff;
appearance: none;
outline: none;
padding-left: 20px;
}
.choices__inner
{
border: solid 2px #dddce8 !important;
background-color: #ffffff;
min-height: 53px;
max-height: 53px;
display: flex;
align-items: center;
padding-left: 20px;
padding-right: 20px;
transition: .3s;
}
.choices__list--single .choices__item
{
font-family: Montserrat Bold;
font-size: 13px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
}
.choices__list--dropdown
{
border: 0 !important;
background-color: #ffffff;
top: 101%;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
height: 108px;
overflow: auto;
}
.choices__list--dropdown .choices__item--selectable
{
font-family: Montserrat Bold;
font-size: 13px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
min-height: 36px;
max-height: 36px;
display: flex;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted
{
background-color: $body-bg-color;
}
.choices[data-type*=select-one]:after
{
// border: 5px solid $color-primary;
border-top-color: $color-primary;
}
.choices__list--dropdown .choices__item--selectable
{
padding-right: 0 !important;
}
.choices.is-open .choices__inner
{
border-color: $color-primary !important;
}
// Стили для полосы прокрутки
::-webkit-scrollbar
{
width: 5px;
height: 71px;
border-radius: 3px;
background-color: #b7b6c3;
}
::-webkit-scrollbar-button
{
// width: 5px;
// height: 71px;
// border-radius: 3px;
// background-color: #b7b6c3;
}
::-webkit-scrollbar-track { background-color: #b7b6c3; }
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #b7b6c3; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #b7b6c3;}
::-webkit-resizer {background-color: #b7b6c3;}
// Стили для списка
ul
{
list-style-type: none;
list-style-image: none;
padding-left: 4px;
li
{
font-family: Montserrat Regular;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 2.75;
letter-spacing: normal;
color: #3c3b55;
position: relative;
padding-left: 25px;
a
{
border: 0;
}
}
li:before
{
content: '';
position: absolute;
width: 8px;
height: 8px;
background-color: $color-primary;
border-radius: 50%;
left: 0;
top: calc(50% - 4px);
}
}
// Стили для radio
.block-radio
{
margin-top: 22px;
label
{
cursor: pointer;
display: flex;
align-items: center;
font-family: Montserrat Regular;
font-size: 15px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
.radio
{
display: block;
margin-right: 10px;
width: 22px;
height: 22px;
border: solid 2px #dddce8;
background-color: #ffffff;
border-radius: 50%;
position: relative;
cursor: pointer;
transition: .3s;
}
.radio::before
{
content: '';
width: 12px;
height: 12px;
background-color: $color-ref;
position: absolute;
border-radius: 50%;
top: 3px;
left: 3px;
opacity: 0;
transition: .3s;
}
input[type="radio"]:checked ~ .radio
{
border-color: #dddce8;
}
input[type="radio"]:checked ~ .radio:before
{
opacity: 1;
}
}
}
.block-radio:hover
{
.radio
{
border-color: $color-primary;
}
}
// Стили для checkbox
.block-checkbox
{
margin-top: 22px;
label
{
cursor: pointer;
display: flex;
align-items: center;
font-family: Montserrat Regular;
font-size: 15px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
.check
{
display: block;
margin-right: 10px;
width: 22px;
height: 22px;
border: solid 2px #dddce8;
background-color: #ffffff;
position: relative;
cursor: pointer;
transition: .3s;
}
.check::before
{
content: '';
width: 12px;
height: 12px;
background-color: $color-ref;
position: absolute;
top: 3px;
left: 3px;
opacity: 0;
transition: .3s;
}
input[type="checkbox"]:checked ~ .check
{
border-color: #dddce8;
}
input[type="checkbox"]:checked ~ .check:before
{
opacity: 1;
}
}
}
.block-checkbox:hover
{
.check
{
border-color: $color-primary;
}
}
// Стили для textarea
textarea
{
resize: none;
outline: none;
border: solid 2px #dddce8;
background-color: #ffffff;
font-family: Montserrat Bold;
font-size: 13px;
font-weight: 700;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #b7b6c3;
padding-top: 20px;
padding-left: 20px;
}
textarea:focus
{
color: $color-ref;
border-color: $color-ref;
}
// Пагинация
.wrapper-pagination
......@@ -641,6 +1006,7 @@ input[type="text"]:focus
.vacancy-card
{
max-width: 295px;
// min-width: 295px;
height: 488px;
border-radius: 3px;
background-color: #ffffff;
......@@ -1215,7 +1581,7 @@ button
border: solid 1px #dddce8;
background-color: #ffffff;
transition: .3s;
img
.img-svg
{
transition: .3s;
transform: rotateX(180deg);
......@@ -1239,6 +1605,18 @@ button
{
border: 0;
}
&-block:hover
{
.arrow-accordion
{
background-color: $color-hover;
border-color: $color-hover;
.img-svg path
{
fill: #fff;
}
}
}
&-block_hide
{
.accordion-block-desc
......@@ -1249,7 +1627,7 @@ button
{
.arrow-accordion
{
img
.img-svg
{
transform: rotateX(0deg);
}
......@@ -1432,31 +1810,181 @@ button
}
}
textarea
// Список вакансий
.sidebar-filter
{
resize: none;
outline: none;
border: solid 2px #dddce8;
background-color: #ffffff;
form
{
}
}
.block-select-filter
{
&__name
{
font-family: Montserrat Regular;
font-size: 15px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
margin-bottom: 10px;
}
}
.block-choice-filter
{
&__name
{
font-family: Montserrat Bold;
font-size: 13px;
font-weight: 700;
font-size: 15px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #b7b6c3;
padding-top: 20px;
padding-left: 20px;
color: $color-primary;
}
}
textarea:focus
.block-filter-row
{
color: $color-ref;
border-color: $color-ref;
display: flex;
align-items: center;
justify-content: space-between;
&__block
{
width: 49%;
input, select
{
width: 100%;
}
}
}
.list-image
{
border-radius: 3px;
box-shadow: 0 10px 20px 0 rgba(15,20,91,.1);
display: block;
border: 0;
height: 488px;
max-height: 488px;
max-width: 295px;
}
.search-list
{
margin-top: 32px;
&-row
{
margin-left: -10px;
margin-right: -10px;
}
.col-4
{
margin-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
}
.list-container
{
&-row
{
margin-left: -25px;
margin-right: -25px;
.col-3
{
padding-left: 25px;
padding-right: 25px;
}
.col-9
{
padding-left: 25px;
padding-right: 25px;
}
}
}
.additional-search
{
display: flex;
justify-content: space-between;
align-items: center;
form
{
position: relative;
input[type="text"]
{
position: relative;
min-width: 265px;
max-width: 265px;
height: 41px;
}
input[type="submit"]
{
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
outline: none;
border: 0;
background: transparent;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
right: 10px;
top: 10px;
}
}
}
// Статья детальная
.article-detail
{
&__image
{
width: 100%;
height: auto;
img
{
max-width: 100%;
height: auto;
}
}
&__date
{
font-family: Montserrat Regular;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.57;
letter-spacing: normal;
color: $color-disabled;
margin-bottom: 32px;
}
&__preview
{
font-family: Montserrat Bold;
font-size: 19px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.47;
letter-spacing: normal;
color: $color-primary;
}
}
.footer
......
<!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">
<p>Аутсо́рсинг (от анг. outsourcing: (outer-source-using) использование внешнего источника/ресурса) — передача организацией на основании договора определённых бизнес-процессов или производственных функций на обслуживание другой компании, специализирующейся в соответствующей области. В отличие от услуг сервиса и поддержки, имеющих разовый, эпизодический, случайный характер и ограниченных началом и концом, на аутсорсинг передаются обычно функции по профессиональной поддержке бесперебойной работоспособности отдельных систем и инфраструктуры на основе длительного контракта (не менее 1 года). Наличие бизнес-процесса является отличительной чертой аутсорсинга от различных других форм оказания услуг и абонентского обслуживания.</p>
<div class="service-rules block-mt-orange block-mb-purple">
<div class="accordion-content">
<div class="accordion-content-block accordion-content-block_hide">
<div class="accordion-block-title">
<p>Шаг 1. Зарегистрируйтесь</p>
<a href="#" class="arrow-accordion">
<img class="img-svg" src="./img/arrow_accordion.svg" alt="">
</a>
</div>
<div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>
</div>
<div class="accordion-content-block accordion-content-block_hide">
<div class="accordion-block-title">
<p>Шаг 2. Найдите подходящую вакансию</p>
<a href="#" class="arrow-accordion">
<img class="img-svg" src="./img/arrow_accordion.svg" alt="">
</a>
</div>
<div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>
</div>
<div class="accordion-content-block accordion-content-block_hide">
<div class="accordion-block-title">
<p>Шаг 3. Напишите работодателю</p>
<a href="#" class="arrow-accordion">
<img class="img-svg" src="./img/arrow_accordion.svg" alt="">
</a>
</div>
<div class="accordion-block-desc">
<p>Оперативно откликайтесь на резюме. Это важно: чем раньше отклик на резюме, тем вероятнее, что на него откликнутся, в отличие от тех, кто откликнулся в хвосте.</p>
<br>
<img src="./img/img_step_rule.png" alt="">
</div>
</div>
<div class="accordion-content-block accordion-content-block_hide">
<div class="accordion-block-title">
<p>Шаг 4. Создайте резюме</p>
<a href="#" class="arrow-accordion">
<img class="img-svg" src="./img/arrow_accordion.svg" alt="">
</a>
</div>
<div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>
</div>
<div class="accordion-content-block accordion-content-block_hide">
<div class="accordion-block-title">
<p>Шаг 5. Поднимите свою компанию в рейтинге</p>
<a href="#" class="arrow-accordion">
<img class="img-svg" src="./img/arrow_accordion.svg" alt="">
</a>
</div>
<div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>
</div>
</div>
</div>
<p>Аутсо́рсинг (от анг. outsourcing: (outer-source-using) использование внешнего источника/ресурса) — передача организацией на основании договора определённых бизнес-процессов или производственных функций на обслуживание другой компании, специализирующейся в соответствующей области. В отличие от услуг сервиса и поддержки, имеющих разовый, эпизодический, случайный характер и ограниченных началом и концом, на аутсорсинг передаются обычно функции по профессиональной поддержке бесперебойной работоспособности отдельных систем и инфраструктуры на основе длительного контракта (не менее 1 года). Наличие бизнес-процесса является отличительной чертой аутсорсинга от различных других форм оказания услуг и абонентского обслуживания. Аутсо́рсинг (от анг. outsourcing: (outer-source-using) использование внешнего источника/ресурса) — передача организацией на основании договора определённых бизнес-процессов или производственных функций на обслуживание другой компании, специализирующейся в соответствующей области. В отличие от услуг сервиса и поддержки, имеющих разовый, эпизодический, случайный характер и ограниченных началом и концом, на аутсорсинг передаются обычно функции по профессиональной поддержке бесперебойной работоспособности отдельных систем и инфраструктуры на основе длительного контракта (не менее 1 года). Наличие бизнес-процесса является отличительной чертой аутсорсинга от различных других форм оказания услуг и абонентского обслуживания.</p>
</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
<!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">
<div class="list-container">
<div class="row list-container-row">
<div class="col-3">
<div class="sidebar-filter">
<form action="" id="form-filter">
<div class="block-select-filter block-mb-yellow">
<p class="block-select-filter__name">Город</p>
<select name="city">
<option value="0">Выберите город</option>
<option value="city1">Москва</option>
<option value="city2">Нижний Новгород</option>
<option value="city3">Казань</option>
</select>
</div>
<div class="block-select-filter block-mb-yellow">
<p class="block-select-filter__name">Должность</p>
<select name="position">
<option value="all">Все</option>
<option value="position1">Должность 1</option>
<option value="position2">Должность 2</option>
<option value="position3">Должность 3</option>
</select>
</div>
<div class="block-select-filter block-mb-yellow">
<p class="block-select-filter__name">Оплата труда, от</p>
<div class="block-filter-row">
<div class="block-filter-row__block">
<input type="text" name="payment" placeholder="0">
</div>
<div class="block-filter-row__block">
<select name="payment-time">
<option value="hour">В час</option>
<option value="week">В неделю</option>
<option value="month">В месяц</option>
<option value="day">В день</option>
</select>
</div>
</div>
</div>
<div class="block-choice-filter block-mb-yellow">
<p class="block-choice-filter__name">Авансирование</p>
<div class="block-radio">
<label for="advance-payment-yes">
<input type="radio" id="advance-payment-yes" name="advance-payment" hidden checked>
<div class="radio"></div>
Да
</label>
</div>
<div class="block-radio">
<label for="advance-payment-no">
<input type="radio" id="advance-payment-no" name="advance-payment" hidden>
<div class="radio"></div>
Нет
</label>
</div>
</div>
<div class="block-select-filter block-mb-yellow">
<p class="block-select-filter__name">Тип занятости</p>
<select name="employment">
<option value="shifts-30">Вахта 30 смен</option>
<option value="shifts-30">Вахта 30 смен</option>
<option value="shifts-30">Вахта 30 смен</option>
<option value="shifts-30">Вахта 30 смен</option>
</select>
</div>
<div class="block-select-filter block-mb-yellow">
<p class="block-select-filter__name">График</p>
<select name="schedule">
<option value="schedule1">Полный рабочий день</option>
<option value="schedule2">Полный рабочий день</option>
<option value="schedule3">Полный рабочий день</option>
</select>
</div>
<div class="block-choice-filter block-mb-yellow">
<p class="block-choice-filter__name">Проживание</p>
<div class="block-checkbox">
<label for="apartment">
<input type="checkbox" id="apartment" name="apartment" hidden>
<div class="check"></div>
Проживание в квартире
</label>
</div>
<div class="block-checkbox">
<label for="hostel">
<input type="checkbox" id="hostel" name="hostel" hidden>
<div class="check"></div>
Проживание в общежитии
</label>
</div>
<div class="block-checkbox">
<label for="residence-no">
<input type="checkbox" id="residence-no" name="residence-no" hidden checked>
<div class="check"></div>
Не требуется
</label>
</div>
</div>
<div class="block-choice-filter block-mb-yellow">
<p class="block-choice-filter__name">Питание</p>
<div class="block-radio">
<label for="food-yes">
<input type="radio" id="food-yes" name="food" hidden checked>
<div class="radio"></div>
Да
</label>
</div>
<div class="block-radio">
<label for="food-no">
<input type="radio" id="food-no" name="food" hidden>
<div class="radio"></div>
Нет
</label>
</div>
</div>
<div class="block-choice-filter block-mb-yellow">
<p class="block-choice-filter__name">Служебный транспорт</p>
<div class="block-radio">
<label for="transport-yes">
<input type="radio" id="transport-yes" name="transport" hidden checked>
<div class="radio"></div>
Да
</label>
</div>
<div class="block-radio">
<label for="transport-no">
<input type="radio" id="transport-no" name="transport" hidden>
<div class="radio"></div>
Нет
</label>
</div>
</div>
<div class="block-choice-filter block-mb-yellow">
<p class="block-choice-filter__name">Спецодежда</p>
<div class="block-checkbox">
<label for="work-clothes-free">
<input type="checkbox" id="work-clothes-free" name="work-clothes-free" hidden>
<div class="check"></div>
Бесплатная спецодежда
</label>
</div>
<div class="block-checkbox">
<label for="work-clothes-pay">
<input type="checkbox" id="work-clothes-pay" name="work-clothes-pay" hidden>
<div class="check"></div>
Вычитается из з/п
</label>
</div>
<div class="block-checkbox">
<label for="work-clothes-no">
<input type="checkbox" id="work-clothes-no" name="work-clothes-no" hidden checked>
<div class="check"></div>
Не требуется
</label>
</div>
</div>
<div class="block-choice-filter block-mb-yellow">
<p class="block-choice-filter__name">Тип работодателя</p>
<div class="block-checkbox">
<label for="direct-employers">
<input type="checkbox" id="direct-employers" name="direct-employers" hidden checked>
<div class="check"></div>
Прямые работодатели
</label>
</div>
<div class="block-checkbox">
<label for="recruitment-agencies">
<input type="checkbox" id="recruitment-agencies" name="recruitment-agencies" hidden checked>
<div class="check"></div>
Кадровые агенства
</label>
</div>
</div>
<div class="block-mt-green">
<input type="submit" name="submit-filter" class="main-button" value="Применить фильтр">
</div>
</form>
</div>
</div>
<div class="col-9">
<div class="additional-search">
<a href="#" class="button-text vacancies-map">
<img class="img-svg" src="./img/icon_map.svg" alt="">
Показать на карте
</a>
<form action="" id="quick-search">
<input type="text" name="q" placeholder="Поиск по вакансиям">
<input type="submit" name="submit-quick-search" value="" style="background-image: url(./img/bg-submit-quick-search.svg);">
</form>
</div>
<div class="search-list">
<div class="row search-list-row">
<div class="col-4">
<a href="#" class="list-image" style="background-image: url(./img/img_banner3.png);"></a>
</div>
<div class="col-4">
<div class="vacancy-card popular">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-4">
<div class="vacancy-card popular">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-4">
<div class="vacancy-card popular">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-4">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-4">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-4">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-4">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-4">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-4">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-4">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-4">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-4">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-4">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-4">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
</div>
<div class="wrapper-button block-mt-green">
<button type="button" class="other-button">Показать ещё</button>
</div>
<div class="wrapper-pagination block-mt-blue">
<div class="pagination">
<a href="#" class="pagination__block pagination__block_current">1</a>
<a href="#" class="pagination__block">2</a>
<a href="#" class="pagination__block">3</a>
<a href="#" class="pagination__block">4</a>
<a href="#" class="pagination__block">5</a>
<a href="#" class="pagination__block ellipsis">...</a>
<a href="#" class="pagination__block">18</a>
</div>
</div>
</div>
</div>
</div>
</div>
</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
......@@ -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'),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment