Skip to content

A
Avalon
Commit 176c593d authored by Sergey's avatar Sergey
Browse files
Options

Main page and articles is done, make faq page

parent 434c52d4
Hide whitespace changes
Inline Side-by-side
Showing with 1111 additions and 119 deletions
src/articles.html 0 → 100644
View file @ 176c593d
<!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="all-articles">
<div class="row">
<div class="col-3">
<a href="#" class="article-image" style="background-image: url(./img/img_banner2.png);"></a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<!-- <div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div> -->
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);"></div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</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>
<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/faq.html 0 → 100644
View file @ 176c593d
<!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="all-faq">
<div class="accordion-content">
<div class="accordion-content-block accordion-content-block_hide">
<div class="accordion-block-title">
<p>Как создать резюме?</p>
<a href="#" class="arrow-accordion">
<img 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>Как изменить пароль в аккаунте соискателя?</p>
<a href="#" class="arrow-accordion">
<img 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>Виды поддержки для соискателей</p>
<a href="#" class="arrow-accordion">
<img 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>Управление рассылками для соискателей</p>
<a href="#" class="arrow-accordion">
<img 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>Как подтвердить номер телефона?</p>
<a href="#" class="arrow-accordion">
<img src="./img/arrow_accordion.svg" alt="">
</a>
</div>
<div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>
</div>
</div>
</div>
<div class="wrapper-ask-question block-mt-blue">
<h2>Задать вопрос</h2>
<div class="block-mt-green">
<form action="" id="form-ask-question">
<div class="block-mb-orange">
<input type="text" name="name" placeholder="Имя">
</div>
<div class="block-mb-orange">
<input type="text" name="phone" placeholder="Телефон">
</div>
<div class="block-mb-orange">
<input type="text" name="email" placeholder="E-mail">
</div>
<div class="block-mb-orange">
<textarea name="message"></textarea>
</div>
<input type="submit" class="main-button" name="send-question" value="Отправить">
</form>
</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
src/img/arrow_accordion.svg 0 → 100644
View file @ 176c593d
<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M9.91667 1.04545L8.83333 0.0454545C8.79167 0 8.75 0 8.70833 0C8.66667 0 8.58333 0.0454545 8.58333 0.0909091L5 4.63636L1.45833 0.0909091C1.41667 0.0454545 1.375 0 1.29167 0C1.25 0 1.20833 0 1.16667 0.0454545L0.0833333 1.04545C0.0416667 1.09091 0 1.13636 0 1.22727C0 1.27273 0 1.31818 0.0416667 1.36364L4.83333 7.40909C4.875 7.45455 4.91667 7.5 5 7.5C5.04167 7.5 5.125 7.45455 5.16667 7.40909L9.95833 1.36364C10 1.31818 10 1.27273 10 1.22727C10 1.13636 9.95833 1.09091 9.91667 1.04545Z" fill="#262262"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="10" height="7.5" fill="white"/>
</clipPath>
</defs>
</svg>
src/index.html
View file @ 176c593d
...@@ -462,25 +462,25 @@ ...@@ -462,25 +462,25 @@
</a> </a>
</div> </div>
</div> </div>
<div class="images block-mb-purple"> <div class="main-images block-mb-purple">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-3"> <div class="col-3">
<div class="images__block" style="background-image: url(./img/img_banner.png)"></div> <a href="#" class="main-images__block" style="background-image: url(./img/img_banner.png)"></a>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="images__block" style="background-image: url(./img/img_banner.png)"></div> <a href="#" class="main-images__block" style="background-image: url(./img/img_banner.png)"></a>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="images__block" style="background-image: url(./img/img_banner.png)"></div> <a href="#" class="main-images__block" style="background-image: url(./img/img_banner.png)"></a>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="images__block" style="background-image: url(./img/img_banner.png)"></div> <a href="#" class="main-images__block" style="background-image: url(./img/img_banner.png)"></a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="usage-steps"> <div class="usage-steps block-mb-purple">
<h1>Как пользоваться сервисом</h1> <h1>Как пользоваться сервисом</h1>
<div class="container"> <div class="container">
<div class="usage-steps-slider block-mt-dark-blue"> <div class="usage-steps-slider block-mt-dark-blue">
...@@ -490,7 +490,7 @@ ...@@ -490,7 +490,7 @@
<img src="./img/img_step_slider.png" alt=""> <img src="./img/img_step_slider.png" alt="">
</div> </div>
<p class="usage-steps-slider-block__name">Шаг 1. Зарегистрируйтесь</p> <p class="usage-steps-slider-block__name">Шаг 1. Зарегистрируйтесь</p>
<p class="usage-steps-slider-block__desc">Чтобы поиск был продуктивным, начните с регистрации на сайте</p> <p class="usage-steps-slider-block__desc">Чтобы поиск был продуктивным, начните с регистрации на сайте, Чтобы поиск был продуктивным, начните с регистрации на сайте, Чтобы поиск был продуктивным, начните с регистрации на сайте, Чтобы поиск был продуктивным, начните с регистрации на сайте</p>
</div> </div>
<div class="usage-steps-slider-block"> <div class="usage-steps-slider-block">
<div class="usage-steps-slider-block__image"> <div class="usage-steps-slider-block__image">
...@@ -518,6 +518,132 @@ ...@@ -518,6 +518,132 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq-main block-mb-purple">
<h1>Часто задаваемые вопросы</h1>
<div class="container">
<div class="faq-main-content block-mt-dark-blue">
<div class="faq-main-content__left">
<div class="accordion-content">
<div class="accordion-content-block accordion-content-block_hide">
<div class="accordion-block-title">
<p>Как создать резюме?</p>
<a href="#" class="arrow-accordion">
<img 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>Как изменить пароль в аккаунте соискателя?</p>
<a href="#" class="arrow-accordion">
<img 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>Виды поддержки для соискателей</p>
<a href="#" class="arrow-accordion">
<img 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>Управление рассылками для соискателей</p>
<a href="#" class="arrow-accordion">
<img 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>Как подтвердить номер телефона?</p>
<a href="#" class="arrow-accordion">
<img src="./img/arrow_accordion.svg" alt="">
</a>
</div>
<div class="accordion-block-desc">Чтобы мы могли обеспечить защиту и поддержку вашего аккаунта, вы должны предоставить нам действительный номер телефона. Для проверки точности и актуальности указанной вами информации мы можем попросить вас подтвердить номер телефона через SMS или звонок. Вы получите от нас 6-значный PIN-код, который нужно будет указать в аккаунте.</div>
</div>
</div>
</div>
<div class="faq-main-content__right">
<div class="faq-main-content__image">
<img src="./img/img_main_faq.png" alt="">
</div>
</div>
</div>
</div>
<a href="faq.html" class="button-text ref-detail block-mt-blue">
<img class="img-svg" src="./img/icon_more.svg" alt="">
Все вопросы и ответы
</a>
</div>
<div class="useful-articles">
<h1>Полезные статьи</h1>
<div class="container">
<div class="useful-articles-content block-mt-dark-blue">
<div class="row">
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article1.png);">
<!-- <img src="./img/img_article1.png" alt=""> -->
</div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article2.png);">
<!-- <img src="./img/img_article2.png" alt=""> -->
</div>
<div class="article-block__content">
<p class="article-block__name">Заголовок в одну строку</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article3.png);">
<!-- <img src="./img/img_article3.png" alt=""> -->
</div>
<div class="article-block__content">
<p class="article-block__name">Очень длинный заголовок, размещающийся на нескольких строках</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
<div class="col-3">
<a href="#" class="article-block">
<div class="article-block__image" style="background-image: url(./img/img_article4.png);">
<!-- <img src="./img/img_article4.png" alt=""> -->
</div>
<div class="article-block__content">
<p class="article-block__name">Двустрочный заголовок статьи</p>
<p class="article-block__text">Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы).</p>
<p class="article-block__date">12.12.2019</p>
</div>
</a>
</div>
</div>
</div>
</div>
<a href="articles.html" class="button-text ref-detail block-mt-blue">
<img class="img-svg" src="./img/icon_more.svg" alt="">
Все статьи
</a>
</div>
</div> </div>
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
......
src/js/main.js
View file @ 176c593d
console.log('hi'); console.log('hi');
import '../scss/style.scss'; import '../scss/style.scss';
// import { tns } from "../../node_modules/tiny-slider/src/tiny-slider";
// import tns from 'tiny-slider';
import 'owl.carousel'; import 'owl.carousel';
// Вывод svg
var imgSvg = document.querySelectorAll('.img-svg'); var imgSvg = document.querySelectorAll('.img-svg');
for(var i = 0; i < imgSvg.length; i++) for(var i = 0; i < imgSvg.length; i++)
...@@ -45,56 +45,8 @@ for(var i = 0; i < imgSvg.length; i++) ...@@ -45,56 +45,8 @@ for(var i = 0; i < imgSvg.length; i++)
request.send(); request.send();
} }
// $('img.img-svg').each(function(){ // Слайдеры на главной
// var $img = $(this);
// var imgClass = $img.attr('class');
// var imgURL = $img.attr('src');
// $.get(imgURL, function(data) {
// var $svg = $(data).find('svg');
// if(typeof imgClass !== 'undefined') {
// $svg = $svg.attr('class', imgClass+' replaced-svg');
// }
// $svg = $svg.removeAttr('xmlns:a');
// if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
// $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
// }
// $img.replaceWith($svg);
// }, 'xml');
// });
// console.log(tns);
// var topCompanies = tns({
// container: '.top-companies-slider-wrapper',
// slideBy: 1,
// items: 3,
// auto: false,
// speed: 500,
// autoplayTimeout: 500,
// nav: false,
// // controlsContainer: '.partners-slider-controls',
// mouseDrag: true,
// // responsive: {
// // 0:
// // {
// // items: 1
// // },
// // 400:
// // {
// // items: 2
// // },
// // 620:
// // {
// // items: 3
// // },
// // 1031:
// // {
// // items: 5
// // }
// // }
// });
// console.log($('.container'));
$('.top-companies-slider-wrapper').owlCarousel({ $('.top-companies-slider-wrapper').owlCarousel({
loop:true, //Зацикливаем слайдер loop:true, //Зацикливаем слайдер
...@@ -112,7 +64,7 @@ $('.top-companies-slider-wrapper').owlCarousel({ ...@@ -112,7 +64,7 @@ $('.top-companies-slider-wrapper').owlCarousel({
}); });
$('.usage-steps-slider-wrapper').owlCarousel({ $('.usage-steps-slider-wrapper').owlCarousel({
loop:true, //Зацикливаем слайдер loop:false, //Зацикливаем слайдер
items:1, items:1,
margin:0, //Отступ от элемента справа в 50px margin:0, //Отступ от элемента справа в 50px
nav:true, //Отключение навигации nav:true, //Отключение навигации
...@@ -124,29 +76,35 @@ $('.usage-steps-slider-wrapper').owlCarousel({ ...@@ -124,29 +76,35 @@ $('.usage-steps-slider-wrapper').owlCarousel({
touchDrag: false, touchDrag: false,
navContainer: '.navigation-steps-slider', navContainer: '.navigation-steps-slider',
navText : ["<div class='arrow-steps arrow-steps__left'><img src='./img/arrow_right_step.svg' style='transform:rotateZ(180deg)'>Шаг <span></span></div>","<div class='arrow-steps arrow-steps__right'>Шаг <span></span><img src='./img/arrow_right_step.svg'></div>"], navText : ["<div class='arrow-steps arrow-steps__left'><img src='./img/arrow_right_step.svg' style='transform:rotateZ(180deg)'>Шаг <span></span></div>","<div class='arrow-steps arrow-steps__right'>Шаг <span></span><img src='./img/arrow_right_step.svg'></div>"],
onInitialized: function(e) { onInitialized: function(e)
// $('.arrow-steps__right span')..text('/ '+ this.items().length / 4); {
$('.arrow-steps__right span').text('2'); let nextSlider = 2;
let currentGroupSlider = $('.count-slider-nav span').eq(0).text(); let prevSlider = 0;
let lengthGroupSlider = this.items().length / 4;
// console.log(lengthGroupSlider); $('.arrow-steps__right span').text(nextSlider);
console.log(currentGroupSlider); let lengthSlider = this.items().length;
$('.dairy-complexes-slider-nav .owl-next').click(function() console.log(nextSlider);
$('.navigation-steps-slider .owl-next').click(function()
{ {
if(currentGroupSlider < lengthGroupSlider) if(nextSlider <= lengthSlider)
{ {
currentGroupSlider++; nextSlider++;
$('.count-slider-nav span').eq(0).text(currentGroupSlider); prevSlider++;
$('.arrow-steps__right span').text(nextSlider);
$('.arrow-steps__left span').text(prevSlider);
} }
}); });
$('.dairy-complexes-slider-nav .owl-prev').click(function() $('.navigation-steps-slider .owl-prev').click(function()
{ {
if(currentGroupSlider > 1) if(nextSlider > 2)
{ {
currentGroupSlider--; nextSlider--;
$('.count-slider-nav span').eq(0).text(currentGroupSlider); prevSlider--;
$('.arrow-steps__right span').text(nextSlider);
$('.arrow-steps__left span').text(prevSlider);
} }
}); });
...@@ -154,45 +112,37 @@ $('.usage-steps-slider-wrapper').owlCarousel({ ...@@ -154,45 +112,37 @@ $('.usage-steps-slider-wrapper').owlCarousel({
}); });
// $('.dairy-complexes-slider').owlCarousel({ // Аккордеон
// loop:false, //Зацикливаем слайдер
// margin:30, //Отступ от элемента справа в 50px try
// nav:true, //Отключение навигации {
// smartSpeed:300, //Время движения слайда let accordionContentBlock = document.querySelectorAll('.accordion-content-block');
// autoplayTimeout:300, //Время смены слайда accordionContentBlock.forEach((elem) =>
// dots: false, {
// items: 4, elem.addEventListener('click', function(e)
// slideBy: 4, {
// navContainer: '.dairy-complexes-slider-nav', e.preventDefault();
// navText : ["<img src='img/img_arrow_left.svg'>", "<img src='img/img_arrow_right.svg'>"], elem.classList.toggle('accordion-content-block_hide');
// onInitialized: function(e) { })
// $('.count-slider-nav span').eq(1).text('/ '+ this.items().length / 4); });
// let currentGroupSlider = $('.count-slider-nav span').eq(0).text(); }
// let lengthGroupSlider = this.items().length / 4; catch (e) {
// // console.log(lengthGroupSlider); console.log(e);
// console.log(currentGroupSlider); }
// $('.dairy-complexes-slider-nav .owl-next').click(function() // Проверка изображения в карточке статьи
// {
// if(currentGroupSlider < lengthGroupSlider) let articleBlocks = document.querySelectorAll('.article-block');
// {
// currentGroupSlider++; articleBlocks.forEach(article => {
// $('.count-slider-nav span').eq(0).text(currentGroupSlider); if(!article.querySelector('.article-block__image'))
// } {
// }); article.querySelector('.article-block__content').style.height = '100%';
}
// $('.dairy-complexes-slider-nav .owl-prev').click(function() });
// {
// if(currentGroupSlider > 1)
// {
// currentGroupSlider--;
// $('.count-slider-nav span').eq(0).text(currentGroupSlider);
// }
// });
// }
// });
src/scss/style.scss
View file @ 176c593d
...@@ -203,6 +203,10 @@ a:hover ...@@ -203,6 +203,10 @@ a:hover
// background-color: $color-disabled; // background-color: $color-disabled;
// } // }
button
{
outline: none !important;
}
.button-text .button-text
{ {
...@@ -243,6 +247,43 @@ a:hover ...@@ -243,6 +247,43 @@ a:hover
} }
} }
.other-button
{
background-color: #fff;
padding: 15px 30px;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
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;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
transition: .3s;
}
.other-button:hover
{
color: $color-hover;
}
.other-button:active
{
color: $color-clicked;
}
.wrapper-button
{
display: flex;
justify-content: center;
align-items: center;
}
// Поле ввода // Поле ввода
input[type="text"] input[type="text"]
...@@ -287,6 +328,55 @@ input[type="text"]:focus ...@@ -287,6 +328,55 @@ input[type="text"]:focus
} }
} }
// Пагинация
.wrapper-pagination
{
display: flex;
justify-content: center;
align-items: center;
.pagination
{
display: flex;
align-items: center;
&__block
{
background-color: #fff;
color: $color-ref;
font-family: Montserrat Bold;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
transition: .3s;
margin-right: 10px;
border: 0;
}
&__block:hover
{
color: #fff;
background-color: $color-hover;
}
&__block:active
{
color: #fff;
background-color: $color-clicked;
}
&__block_current
{
background-color: $color-ref;
color: #ffffff;
}
}
}
// Шапка // Шапка
.header .header
...@@ -935,7 +1025,7 @@ button ...@@ -935,7 +1025,7 @@ button
// Баннеры с рекламой // Баннеры с рекламой
.images .main-images
{ {
.row .row
{ {
...@@ -954,7 +1044,11 @@ button ...@@ -954,7 +1044,11 @@ button
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
display: block;
height: 184px; height: 184px;
border-radius: 3px;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
border: 0;
// width: 295px; // width: 295px;
// display: block !important; // display: block !important;
} }
...@@ -966,6 +1060,28 @@ button ...@@ -966,6 +1060,28 @@ button
{ {
display: flex; display: flex;
align-items: center; align-items: center;
position: absolute;
top: 409px;
width: 100%;
justify-content: space-between;
z-index: 3;
height: 31px;
button
{
position: absolute;
}
button.disabled
{
display: none;
}
.owl-prev
{
left: 0;
}
.owl-next
{
right: 0;
}
} }
.arrow-steps .arrow-steps
...@@ -1008,9 +1124,10 @@ button ...@@ -1008,9 +1124,10 @@ button
} }
&-slider &-slider
{ {
position: relative;
&-wrapper &-wrapper
{ {
// position: relative;
} }
&-block &-block
{ {
...@@ -1019,7 +1136,13 @@ button ...@@ -1019,7 +1136,13 @@ button
align-items: center; align-items: center;
&__image &__image
{ {
height: 347px;
img
{
max-width: 100%;
height: auto;
width: auto !important;
}
} }
&__name &__name
{ {
...@@ -1032,6 +1155,8 @@ button ...@@ -1032,6 +1155,8 @@ button
letter-spacing: normal; letter-spacing: normal;
color: $color-primary; color: $color-primary;
margin-top: 64px; margin-top: 64px;
text-align: center;
width: 400px;
} }
&__desc &__desc
{ {
...@@ -1044,11 +1169,296 @@ button ...@@ -1044,11 +1169,296 @@ button
letter-spacing: normal; letter-spacing: normal;
color: $color-primary; color: $color-primary;
margin-top: 43px; margin-top: 43px;
text-align: center;
width: 400px;
}
}
}
}
// Аккордеон
.accordion-content
{
&-block
{
margin-bottom: 33px;
border-top: solid 2px #dddce8;
padding-top: 33px;
cursor: pointer;
.accordion-block-title
{
display: flex;
align-items: center;
justify-content: space-between;
p
{
font-family: Montserrat Bold;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
width: 85%;
}
.arrow-accordion
{
display: flex;
justify-content: center;
align-items: center;
width: 26px;
height: 26px;
border-radius: 10px;
box-shadow: 0 5px 5px 0 rgba(15, 20, 91, 0.15);
border: solid 1px #dddce8;
background-color: #ffffff;
transition: .3s;
img
{
transition: .3s;
transform: rotateX(180deg);
}
}
}
.accordion-block-desc
{
font-family: Montserrat Regular;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
margin-top: 33px;
}
}
&-block:nth-child(1)
{
border: 0;
}
&-block_hide
{
.accordion-block-desc
{
display: none;
}
.accordion-block-title
{
.arrow-accordion
{
img
{
transform: rotateX(0deg);
}
}
}
}
}
// Часто задаваемые вопросы на главной
.faq-main
{
h1
{
text-align: center;
}
&-content
{
display: flex;
align-items: center;
justify-content: space-between;
&__right
{
width: 25%;
.faq-main-content__image
{
width: 100%;
img
{
max-width: 100%;
height: auto;
}
} }
} }
&__left
{
width: 68%;
}
} }
} }
// Полезные статьи
.article-image
{
border-radius: 3px;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
display: block;
border: 0;
height: 549px;
max-height: 549px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.article-block
{
border-radius: 3px;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
display: block;
border: 0;
height: 549px;
max-height: 549px;
&__image
{
height: 197px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
&__content
{
padding: 32px 35px;
background-color: #ffffff;
min-height: 352px;
position: relative;
.article-block__name
{
font-family: Raleway Bold;
font-size: 18px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
height: 86px;
max-height: 86px;
overflow: hidden;
margin-bottom: 22px;
}
.article-block__text
{
font-family: Montserrat Regular;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
height: 136px;
max-height: 136px;
overflow: hidden;
margin-bottom: 22px;
}
.article-block__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;
height: 22px;
max-height: 22px;
overflow: hidden;
position: absolute;
bottom: 32px;
}
}
}
.useful-articles
{
h1
{
text-align: center;
}
&-content
{
.row
{
margin-left: -10px;
margin-right: -10px;
.col-3
{
padding-left: 10px;
padding-right: 10px;
}
}
}
}
// Страница Статьи
.all-articles
{
.row
{
margin-left: -10px;
margin-right: -10px;
.col-3
{
padding-left: 10px;
padding-right: 10px;
margin-bottom: 22px;
}
}
}
// Страница Часто задаваемые вопросы
.wrapper-ask-question
{
form
{
input[type="text"]
{
width: 300px;
}
textarea
{
width: 610px;
height: 127px;
}
}
}
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;
}
.footer .footer
{ {
background-color: #fff; background-color: #fff;
......
webpack.config.js
View file @ 176c593d
...@@ -5,7 +5,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin'); ...@@ -5,7 +5,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack'); const webpack = require('webpack');
const isDev = process.env.NODE_ENV = 'development'; const isDev = process.env.NODE_ENV = 'development';
const pages = ['index']; const pages = ['index', 'articles', 'faq'];
const webpackConfig = { const webpackConfig = {
context: path.resolve(__dirname, 'src'), 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