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 @@
</a>
</div>
</div>
<div class="images block-mb-purple">
<div class="main-images block-mb-purple">
<div class="container">
<div class="row">
<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 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 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 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 class="usage-steps">
<div class="usage-steps block-mb-purple">
<h1>Как пользоваться сервисом</h1>
<div class="container">
<div class="usage-steps-slider block-mt-dark-blue">
......@@ -490,7 +490,7 @@
<img src="./img/img_step_slider.png" alt="">
</div>
<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 class="usage-steps-slider-block">
<div class="usage-steps-slider-block__image">
......@@ -518,6 +518,132 @@
</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>
<footer class="footer">
<div class="container">
......
src/js/main.js
View file @ 176c593d
console.log('hi');
import '../scss/style.scss';
// import { tns } from "../../node_modules/tiny-slider/src/tiny-slider";
// import tns from 'tiny-slider';
import 'owl.carousel';
// Вывод svg
var imgSvg = document.querySelectorAll('.img-svg');
for(var i = 0; i < imgSvg.length; i++)
......@@ -45,56 +45,8 @@ for(var i = 0; i < imgSvg.length; i++)
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({
loop:true, //Зацикливаем слайдер
......@@ -112,7 +64,7 @@ $('.top-companies-slider-wrapper').owlCarousel({
});
$('.usage-steps-slider-wrapper').owlCarousel({
loop:true, //Зацикливаем слайдер
loop:false, //Зацикливаем слайдер
items:1,
margin:0, //Отступ от элемента справа в 50px
nav:true, //Отключение навигации
......@@ -124,29 +76,35 @@ $('.usage-steps-slider-wrapper').owlCarousel({
touchDrag: false,
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>"],
onInitialized: function(e) {
// $('.arrow-steps__right span')..text('/ '+ this.items().length / 4);
$('.arrow-steps__right span').text('2');
let currentGroupSlider = $('.count-slider-nav span').eq(0).text();
let lengthGroupSlider = this.items().length / 4;
// console.log(lengthGroupSlider);
console.log(currentGroupSlider);
$('.dairy-complexes-slider-nav .owl-next').click(function()
onInitialized: function(e)
{
let nextSlider = 2;
let prevSlider = 0;
$('.arrow-steps__right span').text(nextSlider);
let lengthSlider = this.items().length;
console.log(nextSlider);
$('.navigation-steps-slider .owl-next').click(function()
{
if(currentGroupSlider < lengthGroupSlider)
if(nextSlider <= lengthSlider)
{
currentGroupSlider++;
$('.count-slider-nav span').eq(0).text(currentGroupSlider);
nextSlider++;
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--;
$('.count-slider-nav span').eq(0).text(currentGroupSlider);
nextSlider--;
prevSlider--;
$('.arrow-steps__right span').text(nextSlider);
$('.arrow-steps__left span').text(prevSlider);
}
});
......@@ -154,45 +112,37 @@ $('.usage-steps-slider-wrapper').owlCarousel({
});
// $('.dairy-complexes-slider').owlCarousel({
// loop:false, //Зацикливаем слайдер
// margin:30, //Отступ от элемента справа в 50px
// nav:true, //Отключение навигации
// smartSpeed:300, //Время движения слайда
// autoplayTimeout:300, //Время смены слайда
// dots: false,
// items: 4,
// slideBy: 4,
// navContainer: '.dairy-complexes-slider-nav',
// navText : ["<img src='img/img_arrow_left.svg'>", "<img src='img/img_arrow_right.svg'>"],
// 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;
// // console.log(lengthGroupSlider);
// console.log(currentGroupSlider);
// $('.dairy-complexes-slider-nav .owl-next').click(function()
// {
// if(currentGroupSlider < lengthGroupSlider)
// {
// currentGroupSlider++;
// $('.count-slider-nav span').eq(0).text(currentGroupSlider);
// }
// });
// $('.dairy-complexes-slider-nav .owl-prev').click(function()
// {
// if(currentGroupSlider > 1)
// {
// currentGroupSlider--;
// $('.count-slider-nav span').eq(0).text(currentGroupSlider);
// }
// });
// }
// });
// Аккордеон
try
{
let accordionContentBlock = document.querySelectorAll('.accordion-content-block');
accordionContentBlock.forEach((elem) =>
{
elem.addEventListener('click', function(e)
{
e.preventDefault();
elem.classList.toggle('accordion-content-block_hide');
})
});
}
catch (e) {
console.log(e);
}
// Проверка изображения в карточке статьи
let articleBlocks = document.querySelectorAll('.article-block');
articleBlocks.forEach(article => {
if(!article.querySelector('.article-block__image'))
{
article.querySelector('.article-block__content').style.height = '100%';
}
});
src/scss/style.scss
View file @ 176c593d
......@@ -203,6 +203,10 @@ a:hover
// background-color: $color-disabled;
// }
button
{
outline: none !important;
}
.button-text
{
......@@ -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"]
......@@ -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
......@@ -935,7 +1025,7 @@ button
// Баннеры с рекламой
.images
.main-images
{
.row
{
......@@ -954,7 +1044,11 @@ button
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: block;
height: 184px;
border-radius: 3px;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
border: 0;
// width: 295px;
// display: block !important;
}
......@@ -966,6 +1060,28 @@ button
{
display: flex;
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
......@@ -1008,9 +1124,10 @@ button
}
&-slider
{
position: relative;
&-wrapper
{
// position: relative;
}
&-block
{
......@@ -1019,7 +1136,13 @@ button
align-items: center;
&__image
{
height: 347px;
img
{
max-width: 100%;
height: auto;
width: auto !important;
}
}
&__name
{
......@@ -1032,6 +1155,8 @@ button
letter-spacing: normal;
color: $color-primary;
margin-top: 64px;
text-align: center;
width: 400px;
}
&__desc
{
......@@ -1044,11 +1169,296 @@ button
letter-spacing: normal;
color: $color-primary;
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
{
background-color: #fff;
......
webpack.config.js
View file @ 176c593d
......@@ -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'];
const pages = ['index', 'articles', 'faq'];
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