Skip to content

A
Avalon
Commit 3b9f8518 authored by Sergey's avatar Sergey
Browse files
Options

Registration page and list companies page is done

parent b0a09a0d
Hide whitespace changes
Inline Side-by-side
Showing with 1343 additions and 149 deletions
package-lock.json
View file @ 3b9f8518
...@@ -5918,6 +5918,11 @@ ...@@ -5918,6 +5918,11 @@
"integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==", "integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==",
"dev": true "dev": true
}, },
"js-datepicker": {
"version": "5.11.0",
"resolved": "https://registry.npmjs.org/js-datepicker/-/js-datepicker-5.11.0.tgz",
"integrity": "sha512-QeCCEyEqR/pWJO43Vn2+apKjpVaazJvl7Y7k3NRk0/qrj8tBpt7T+fGLaQYXG2yxAWCVufmLfUEFc4LWIiVwHA=="
},
"js-tokens": { "js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
......
src/companies-list.html 0 → 100644
View file @ 3b9f8518
<!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-auto 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-auto 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 justify-content-between">
<a href="#" class="button-text favorites hidden">
<img class="img-svg" src="./img/icon_favorites.svg" alt="">
Избранное
</a>
<a href="#" class="button-text feedback hidden" data-count="+16">
<img class="img-svg" src="./img/icon_feedback.svg" alt="">
Отклики
</a>
<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-auto header-bottom-left">
<a href="#">
<img src="./img/logo.svg" alt="">
</a>
<p>Быстрый поиск узкоквалифицированной работы</p>
</div>
<div class="col-auto 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/icon_resume.svg" alt="">
Разместить резюме
</a>
<a href="#" class="button-text login">
<img class="img-svg" src="./img/icon_enter.svg" alt="">
Войти
</a>
<div class="header-profile header-profile_hidden">
<a href="#" class="button-text profile">
<img class="img-svg" src="./img/icon_profile.svg" alt="">
Чапаев
</a>
<a href="#" class="button-text logout">
<img class="img-svg" src="./img/icon_logout.svg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="header-scroll">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-auto">
<a href="#">
<img src="./img/logo_fixed.svg" alt="">
</a>
</div>
<div class="col-auto">
<a href="#" class="button-text choice-mode">
Ищу работника
<img class="img-svg" src="./img/arrow_down_scroll.svg" alt="">
</a>
</div>
<div class="col-6 header-scroll-right">
<a href="#" class="button-text favorites hidden">
<img class="img-svg" src="./img/icon_favorites_scroll.svg" alt="">
</a>
<a href="#" class="button-text feedback hidden" data-count="+16">
<img class="img-svg" src="./img/icon_feedback_scroll.svg" alt="">
</a>
<a href="#" class="button-text search-work">
<img class="img-svg" src="./img/icon_search_scroll.svg" alt="">
</a>
<a href="#" class="button-text release-resume">
<img class="img-svg" src="./img/icon_resume_scroll.svg" alt="">
</a>
<a href="#" class="button-text login">
<img class="img-svg" src="./img/icon_enter_scroll.svg" alt="">
</a>
<div class="header-profile header-profile_hidden">
<a href="#" class="button-text profile">
<img class="img-svg" src="./img/icon_profile_scroll.svg" alt="">
Чапаев
</a>
<a href="#" class="button-text logout">
<img class="img-svg" src="./img/icon_logout_scroll.svg" alt="">
</a>
</div>
</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-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-choice-filter block-mb-yellow">
<p class="block-choice-filter__name">Сфера деятельности</p>
<div class="block-checkbox">
<label for="building">
<input type="checkbox" id="building" name="building" hidden>
<div class="check"></div>
Строительство
</label>
</div>
<div class="block-checkbox">
<label for="repairs">
<input type="checkbox" id="repairs" name="repairs" hidden>
<div class="check"></div>
Ремонт
</label>
</div>
<div class="block-checkbox">
<label for="security">
<input type="checkbox" id="security" name="security" hidden checked>
<div class="check"></div>
Охрана, безопасность
</label>
</div>
<div class="block-checkbox">
<label for="working-staff">
<input type="checkbox" id="working-staff" name="working-staff" hidden checked>
<div class="check"></div>
Рабочий персонал
</label>
</div>
<div class="block-checkbox">
<label for="administrative-staff">
<input type="checkbox" id="administrative-staff" name="administrative-staff" hidden checked>
<div class="check"></div>
Административный персонал
</label>
</div>
<div class="block-checkbox">
<label for="service">
<input type="checkbox" id="service" name="service" hidden checked>
<div class="check"></div>
Инсталляция и сервис
</label>
</div>
<div class="block-checkbox">
<label for="production">
<input type="checkbox" id="production" name="production" hidden checked>
<div class="check"></div>
Производство
</label>
</div>
<div class="block-checkbox">
<label for="agriculture">
<input type="checkbox" id="agriculture" name="agriculture" 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="open-vacancies-yes">
<input type="checkbox" id="open-vacancies-yes" name="open-vacancies-yes" hidden>
<div class="check"></div>
Да
</label>
</div>
<div class="block-checkbox">
<label for="open-vacancies-no">
<input type="checkbox" id="open-vacancies-no" name="open-vacancies-no" hidden>
<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-companies">
<div class="col-6">
<a href="#" class="image-companies" style="background-image: url(./img/img_banner4.png);"></a>
</div>
<div class="col-6">
<div class="company-card popular">
<div class="company-card__left">
<div class="company-card__image">
<img src="./img/img_top_company1.png" alt="">
</div>
<p class="title-rating">Рейтинг</p>
<div class="rating__wrapper">
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<div class="rating__filled-stars" style="width: 81%;">
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
</div>
</div>
</div>
<div class="company-card__right">
<p class="company-card__name">ООО «Ростелеком»</p>
<p class="company-card__count">12 вакансий</p>
<p class="company-card__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-6">
<div class="company-card popular">
<div class="company-card__left">
<div class="company-card__image">
<img src="./img/img_top_company1.png" alt="">
</div>
<p class="title-rating">Рейтинг</p>
<div class="rating__wrapper">
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<div class="rating__filled-stars" style="width: 81%;">
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
</div>
</div>
</div>
<div class="company-card__right">
<p class="company-card__name">ООО «Ростелеком»</p>
<p class="company-card__count">12 вакансий</p>
<p class="company-card__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-6">
<div class="company-card popular">
<div class="company-card__left">
<div class="company-card__image">
<img src="./img/img_top_company1.png" alt="">
</div>
<p class="title-rating">Рейтинг</p>
<div class="rating__wrapper">
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<div class="rating__filled-stars" style="width: 81%;">
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
</div>
</div>
</div>
<div class="company-card__right">
<p class="company-card__name">ООО «Ростелеком»</p>
<p class="company-card__count">12 вакансий</p>
<p class="company-card__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-6">
<div class="company-card popular">
<div class="company-card__left">
<div class="company-card__image">
<img src="./img/img_top_company1.png" alt="">
</div>
<p class="title-rating">Рейтинг</p>
<div class="rating__wrapper">
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<div class="rating__filled-stars" style="width: 81%;">
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
</div>
</div>
</div>
<div class="company-card__right">
<p class="company-card__name">ООО «Ростелеком»</p>
<p class="company-card__count">12 вакансий</p>
<p class="company-card__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-6">
<div class="company-card popular">
<div class="company-card__left">
<div class="company-card__image">
<img src="./img/img_top_company1.png" alt="">
</div>
<p class="title-rating">Рейтинг</p>
<div class="rating__wrapper">
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<div class="rating__filled-stars" style="width: 81%;">
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
</div>
</div>
</div>
<div class="company-card__right">
<p class="company-card__name">ООО «Ростелеком»</p>
<p class="company-card__count">12 вакансий</p>
<p class="company-card__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-6">
<div class="company-card popular">
<div class="company-card__left">
<div class="company-card__image">
<img src="./img/img_top_company1.png" alt="">
</div>
<p class="title-rating">Рейтинг</p>
<div class="rating__wrapper">
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<div class="rating__filled-stars" style="width: 81%;">
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
</div>
</div>
</div>
<div class="company-card__right">
<p class="company-card__name">ООО «Ростелеком»</p>
<p class="company-card__count">12 вакансий</p>
<p class="company-card__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-6">
<div class="company-card popular">
<div class="company-card__left">
<div class="company-card__image">
<img src="./img/img_top_company1.png" alt="">
</div>
<p class="title-rating">Рейтинг</p>
<div class="rating__wrapper">
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<div class="rating__filled-stars" style="width: 81%;">
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
</div>
</div>
</div>
<div class="company-card__right">
<p class="company-card__name">ООО «Ростелеком»</p>
<p class="company-card__count">12 вакансий</p>
<p class="company-card__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-6">
<div class="company-card popular">
<div class="company-card__left">
<div class="company-card__image">
<img src="./img/img_top_company1.png" alt="">
</div>
<p class="title-rating">Рейтинг</p>
<div class="rating__wrapper">
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<span class="i-star" style="background-image: url(./img/icon_star_empty.svg);"></span>
<div class="rating__filled-stars" style="width: 81%;">
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
<span class="i-star--filled" style="background-image: url(./img/icon_star_full.svg);"></span>
</div>
</div>
</div>
<div class="company-card__right">
<p class="company-card__name">ООО «Ростелеком»</p>
<p class="company-card__count">12 вакансий</p>
<p class="company-card__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</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
src/img/arrow_left_datapicker.svg 0 → 100644
View file @ 3b9f8518
<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.6 20L11 18.6L2.7 10L3.6 9.1L11 1.4L9.6 0C7.6 2.1 1.9 8 0 10C1.4 11.5 0 10 9.6 20Z" fill="#3C3B55"/>
</svg>
src/img/arrow_left_datapicker_hover.svg 0 → 100644
View file @ 3b9f8518
<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.6 20L11 18.6L2.7 10L3.6 9.1L11 1.4L9.6 0C7.6 2.1 1.9 8 0 10C1.4 11.5 0 10 9.6 20Z" fill="#92C83E"/>
</svg>
src/img/arrow_right_datapicker.svg 0 → 100644
View file @ 3b9f8518
<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M1.4 0.753418L0 2.07504L8.3 10.1936L7.4 11.0432L0 18.3122L1.4 19.6338C3.4 17.6513 9.1 12.0816 11 10.1936C9.6 8.77758 11 10.1936 1.4 0.753418Z" fill="#3C3B55"/>
</g>
<defs>
<clipPath id="clip0">
<rect y="0.753418" width="11" height="18.8804" fill="white"/>
</clipPath>
</defs>
</svg>
src/img/arrow_right_datapicker_hover.svg 0 → 100644
View file @ 3b9f8518
<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M1.4 0.753418L0 2.07504L8.3 10.1936L7.4 11.0432L0 18.3122L1.4 19.6338C3.4 17.6513 9.1 12.0816 11 10.1936C9.6 8.77758 11 10.1936 1.4 0.753418Z" fill="#92C83E"/>
</g>
<defs>
<clipPath id="clip0">
<rect y="0.753418" width="11" height="18.8804" fill="white"/>
</clipPath>
</defs>
</svg>
src/img/icon_info.svg 0 → 100644
View file @ 3b9f8518
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.8 12H7.2V7.2H8.8V12ZM8.8 4H7.2V5.6H8.8V4ZM16 0C16 3.28 16 12.8 16 16C12.72 16 3.2 16 0 16C0 12.72 0 3.2 0 0C3.28 0 12.8 0 16 0ZM14.4 1.6H1.6V14.4H14.4V1.6Z" fill="#B7B6C4"/>
</svg>
src/index.html
View file @ 3b9f8518
...@@ -341,7 +341,7 @@ ...@@ -341,7 +341,7 @@
</div> </div>
</div> </div>
</div> </div>
<a href="vacancies.html" class="button-text ref-detail block-mt-blue"> <a href="vacancies-list.html" class="button-text ref-detail block-mt-blue">
<img class="img-svg" src="./img/icon_more.svg" alt=""> <img class="img-svg" src="./img/icon_more.svg" alt="">
Все вакансии Все вакансии
</a> </a>
...@@ -351,9 +351,9 @@ ...@@ -351,9 +351,9 @@
<div class="container"> <div class="container">
<div class="top-companies-slider block-mt-dark-blue"> <div class="top-companies-slider block-mt-dark-blue">
<div class="top-companies-slider-wrapper owl-carousel owl-theme"> <div class="top-companies-slider-wrapper owl-carousel owl-theme">
<div class="top-companies-slider-block popular"> <div class="company-card popular">
<div class="top-companies-slider-block__left"> <div class="company-card__left">
<div class="top-companies-slider-block__image"> <div class="company-card__image">
<img src="./img/img_top_company1.png" alt=""> <img src="./img/img_top_company1.png" alt="">
</div> </div>
<div class="rating__wrapper"> <div class="rating__wrapper">
...@@ -371,16 +371,16 @@ ...@@ -371,16 +371,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="top-companies-slider-block__right"> <div class="company-card__right">
<p class="top-companies-slider-block__name">ООО «Ростелеком»</p> <p class="company-card__name">ООО «Ростелеком»</p>
<p class="top-companies-slider-block__count">12 вакансий</p> <p class="company-card__count">12 вакансий</p>
<p class="top-companies-slider-block__desc">Компания занимается предоставлением услуг связи и Интернета.</p> <p class="company-card__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div> </div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div> <div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div> </div>
<div class="top-companies-slider-block popular"> <div class="company-card popular">
<div class="top-companies-slider-block__left"> <div class="company-card__left">
<div class="top-companies-slider-block__image"> <div class="company-card__image">
<img src="./img/img_top_company2.png" alt=""> <img src="./img/img_top_company2.png" alt="">
</div> </div>
<div class="rating__wrapper"> <div class="rating__wrapper">
...@@ -398,16 +398,16 @@ ...@@ -398,16 +398,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="top-companies-slider-block__right"> <div class="company-card__right">
<p class="top-companies-slider-block__name">ООО «Ростелеком»</p> <p class="company-card__name">ООО «Ростелеком»</p>
<p class="top-companies-slider-block__count">12 вакансий</p> <p class="company-card__count">12 вакансий</p>
<p class="top-companies-slider-block__desc">Одна из крупнейших сетей по продаже мебели и товаров для дома.</p> <p class="company-card__desc">Одна из крупнейших сетей по продаже мебели и товаров для дома.</p>
</div> </div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div> <div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div> </div>
<div class="top-companies-slider-block popular"> <div class="company-card popular">
<div class="top-companies-slider-block__left"> <div class="company-card__left">
<div class="top-companies-slider-block__image"> <div class="company-card__image">
<img src="./img/img_top_company3.png" alt=""> <img src="./img/img_top_company3.png" alt="">
</div> </div>
<div class="rating__wrapper"> <div class="rating__wrapper">
...@@ -425,16 +425,16 @@ ...@@ -425,16 +425,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="top-companies-slider-block__right"> <div class="company-card__right">
<p class="top-companies-slider-block__name">ООО «Ростелеком»</p> <p class="company-card__name">ООО «Ростелеком»</p>
<p class="top-companies-slider-block__count">12 вакансий</p> <p class="company-card__count">12 вакансий</p>
<p class="top-companies-slider-block__desc">Компания занимается предоставлением услуг связи и Интернета.</p> <p class="company-card__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div> </div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div> <div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div> </div>
<div class="top-companies-slider-block"> <div class="company-card">
<div class="top-companies-slider-block__left"> <div class="company-card__left">
<div class="top-companies-slider-block__image"> <div class="company-card__image">
<img src="./img/img_top_company1.png" alt=""> <img src="./img/img_top_company1.png" alt="">
</div> </div>
<div class="rating__wrapper"> <div class="rating__wrapper">
...@@ -452,16 +452,16 @@ ...@@ -452,16 +452,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="top-companies-slider-block__right"> <div class="company-card__right">
<p class="top-companies-slider-block__name">ООО «Ростелеком»</p> <p class="company-card__name">ООО «Ростелеком»</p>
<p class="top-companies-slider-block__count">12 вакансий</p> <p class="company-card__count">12 вакансий</p>
<p class="top-companies-slider-block__desc">Компания занимается предоставлением услуг связи и Интернета.</p> <p class="company-card__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div> </div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div> <div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div> </div>
<div class="top-companies-slider-block"> <div class="company-card">
<div class="top-companies-slider-block__left"> <div class="company-card__left">
<div class="top-companies-slider-block__image"> <div class="company-card__image">
<img src="./img/img_top_company2.png" alt=""> <img src="./img/img_top_company2.png" alt="">
</div> </div>
<div class="rating__wrapper"> <div class="rating__wrapper">
...@@ -479,16 +479,16 @@ ...@@ -479,16 +479,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="top-companies-slider-block__right"> <div class="company-card__right">
<p class="top-companies-slider-block__name">ООО «Ростелеком»</p> <p class="company-card__name">ООО «Ростелеком»</p>
<p class="top-companies-slider-block__count">12 вакансий</p> <p class="company-card__count">12 вакансий</p>
<p class="top-companies-slider-block__desc">Компания занимается предоставлением услуг связи и Интернета.</p> <p class="company-card__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div> </div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div> <div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div> </div>
<div class="top-companies-slider-block"> <div class="company-card">
<div class="top-companies-slider-block__left"> <div class="company-card__left">
<div class="top-companies-slider-block__image"> <div class="company-card__image">
<img src="./img/img_top_company3.png" alt=""> <img src="./img/img_top_company3.png" alt="">
</div> </div>
<div class="rating__wrapper"> <div class="rating__wrapper">
...@@ -506,17 +506,17 @@ ...@@ -506,17 +506,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="top-companies-slider-block__right"> <div class="company-card__right">
<p class="top-companies-slider-block__name">ООО «Ростелеком»</p> <p class="company-card__name">ООО «Ростелеком»</p>
<p class="top-companies-slider-block__count">12 вакансий</p> <p class="company-card__count">12 вакансий</p>
<p class="top-companies-slider-block__desc">Компания занимается предоставлением услуг связи и Интернета.</p> <p class="company-card__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div> </div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div> <div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div> </div>
</div> </div>
<div class="navigation-top-companies"></div> <div class="navigation-top-companies"></div>
</div> </div>
<a href="#" class="button-text ref-detail block-mt-blue"> <a href="companies-list.html" class="button-text ref-detail block-mt-blue">
<img class="img-svg" src="./img/icon_more.svg" alt=""> <img class="img-svg" src="./img/icon_more.svg" alt="">
Все компании Все компании
</a> </a>
......
src/js/main.js
View file @ 3b9f8518
import '../scss/style.scss'; import '../scss/style.scss';
import Choices from '../../node_modules/choices.js/src/scripts/choices'; import Choices from '../../node_modules/choices.js/src/scripts/choices';
import 'owl.carousel'; import 'owl.carousel';
import datepicker from 'js-datepicker';
// Вывод svg // Вывод svg
...@@ -208,6 +209,78 @@ if(inputFile.length > 0) ...@@ -208,6 +209,78 @@ if(inputFile.length > 0)
} }
// Табы
var tabs = document.querySelectorAll('.tabs');
if(tabs.length > 0)
{
tabs.forEach(function(elem, index)
{
var tabsItem = elem.querySelectorAll('.tabs-item');
var tabsContent = elem.querySelector('.tabs-content');
var tabsItems = elem.querySelector('.tabs-items')
tabsItem.forEach(function(elem, index)
{
elem.addEventListener('click', function(e)
{
e.preventDefault();
if(!elem.classList.contains('tabs-item_active'))
{
// var prevDataTab = tabsItems.querySelector('.tabs-item_active').dataset.tab;
tabsItems.querySelector('.tabs-item_active').classList.remove('tabs-item_active');
elem.classList.add('tabs-item_active');
var dataTab = elem.dataset.tab;
if(tabsContent.querySelectorAll('.tabs-content-block_active').length > 0)
{
let oldTabsContent = tabsContent.querySelectorAll('.tabs-content-block_active');
oldTabsContent.forEach(tab => {
tab.classList.remove('tabs-content-block_active');
});
// tabsContent.querySelector('.tabs-content-block_active').classList.remove('tabs-content-block_active');
}
if(tabsContent.querySelectorAll('div[data-tab="' + dataTab + '"]').length > 0)
{
let newTabsContent = tabsContent.querySelectorAll('div[data-tab="' + dataTab + '"]');
newTabsContent.forEach(tab => {
tab.classList.add('tabs-content-block_active');
});
// tabsContent.querySelector('div[data-tab="' + dataTab + '"]').classList.add('tabs-content-block_active');
}
}
});
});
});
}
// Datapicker
let inputBirthday = document.querySelector('#birthday');
const picker = datepicker(inputBirthday, {
formatter: (input, date, instance) =>
{
const value = date.toLocaleDateString();
input.value = value; // => '1/1/2099'
},
startDay: 0,
customDays: ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'],
customMonths: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
showAllDates: true,
overlayButton: 'Выбрать',
overlayPlaceholder: 'Укажите год'
});
// if(document.querySelector('.qs-datepicker'))
// {
// document.querySelector('.qs-left').appendChild('<img src="../img/arrow_left_datapicker.svg">');
// document.querySelector('.qs-right').appendChild('<img src="../img/arrow_right_datapicker.svg">');
// }
......
src/main.html
View file @ 3b9f8518
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
<a href="index.html">Главная (Для соискателей)</a> <a href="index.html">Главная (Для соискателей)</a>
</li> </li>
<li> <li>
<a href="vacancies.html">Список вакансий (Для соискателей)</a> <a href="vacancies-list.html">Список вакансий (Для соискателей)</a>
</li> </li>
<li> <li>
<a href="faq.html">Часто задаваемые вопросы (Для соискателей)</a> <a href="faq.html">Часто задаваемые вопросы (Для соискателей)</a>
...@@ -150,9 +150,12 @@ ...@@ -150,9 +150,12 @@
<li> <li>
<a href="password-recovery.html">Восстановление пароля (Для соискателей)</a> <a href="password-recovery.html">Восстановление пароля (Для соискателей)</a>
</li> </li>
<!-- <li> <li>
<a href="registration.html">Регистрация (Для соискателей)</a> <a href="registration.html">Регистрация (Для соискателей)</a>
</li> --> </li>
<li>
<a href="companies-list.html">Список компаний (Для соискателей)</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
src/registration.html
View file @ 3b9f8518
...@@ -125,32 +125,126 @@ ...@@ -125,32 +125,126 @@
<div class="container"> <div class="container">
<h1>Регистрация</h1> <h1>Регистрация</h1>
<div class="content-page block-mt-dark-blue"> <div class="content-page block-mt-dark-blue">
<div class="container-compressed"> <div class="advantages-registration">
<form action="" name="form-password-recovery" id="form-password-recovery" enctype="multipart/form-data"> <h2>Преимущества регистрации в личном кабинете</h2>
<div class="block-mb-green"> <p>Регистрация в интернет-магазине отличается от регистрации, скажем, в почтовом сервисе. Вы запрашиваете намного больше информации. Если в большинстве случаев для регистрации на сайте посетителю достаточно ввести адрес электронной почты и подтвердить свои намерения, кликнув по ссылке в письме, то при регистрации в интернет-магазине запрашивается гораздо больше данных. Причем большая часть этих данных рассматривается покупателем как информация личного характера. А терпением подавляющая масса интернет-пользователей не отличается — факт общеизвестен. Так что если преимущества регистрации не очевидны еще до ее начала, весь процесс вызовет раздражение закономерные вопросы со стороны покупателя. Будет ли указанный ящик завален спамом? Стоит ли регистрация денег?</p>
<label for="phone">Телефон</label> <div class="block-mt-blue">
<input type="text" placeholder="+7" name="phone" id="phone"> <div class="row advantages-registration-row">
</div> <div class="col-3">
<div class="block-mb-green"> <div class="block-advantages-registration">
<div class="little-title"> <div class="block-advantages-registration__image">
<span>или</span> <img src="./img/img_adv1.png" alt="">
</div>
<p class="block-advantages-registration__name">Заголовок преимущества</p>
<p class="block-advantages-registration__desc">Регистрация в интернет-магазине отличается от регистрации, скажем, в почтовом сервисе.</p>
</div>
</div>
<div class="col-3">
<div class="block-advantages-registration">
<div class="block-advantages-registration__image">
<img src="./img/img_adv2.png" alt="">
</div>
<p class="block-advantages-registration__name">Заголовок преимущества</p>
<p class="block-advantages-registration__desc">Вы запрашиваете намного больше информации.</p>
</div>
</div>
<div class="col-3">
<div class="block-advantages-registration">
<div class="block-advantages-registration__image">
<img src="./img/img_adv3.png" alt="">
</div>
<p class="block-advantages-registration__name">Заголовок преимущества</p>
<p class="block-advantages-registration__desc">Если в большинстве случаев для регистрации на сайте посетителю достаточно ввести адрес электронной почты.</p>
</div>
</div>
<div class="col-3">
<div class="block-advantages-registration">
<div class="block-advantages-registration__image">
<img src="./img/img_adv4.png" alt="">
</div>
<p class="block-advantages-registration__name">Заголовок преимущества</p>
<p class="block-advantages-registration__desc">Причем большая часть этих данных рассматривается покупателем как информация личного характера.</p>
</div>
</div> </div>
</div> </div>
<div class="block-mb-green"> </div>
<label for="email">E-mail</label> </div>
<input type="text" name="email" id="email" placeholder="E-MAIL"> <div class="container-compressed">
</div> <div class="block-mt-blue">
<div class="block-mb-green"> <div class="tabs">
<div class="block-file"> <div class="tabs-items">
<label for="file"> <a href="#" class="tabs-item tabs-item_active" data-tab="tab-simple-registration">
<input type="file" name="file" id="file" hidden> Простая регистрация
<div class="other-button button-attach-file">Прикрепить файл</div> </a>
<span class="file-value">Файл не выбран</span> <a href="#" class="tabs-item" data-tab="tab-extended-registration">
</label> Расширенная регистрация
<span class="block-tooltip" data-info="Всплывающий тултип с кратким пояснительным текстом, появляющийся при наведении курсора на иконку">
<img class="img-svg" src="./img/icon_info.svg" alt="">
</span>
</a>
</div>
<div class="tabs-content block-mt-blue">
<form action="" name="form-registration" id="form-registration" enctype="multipart/form-data">
<div class="block-mb-yellow">
<label for="name">Имя</label>
<input type="text" placeholder="ИМЯ" name="name" id="name">
</div>
<div class="block-mb-yellow">
<label for="sername">Фамилия</label>
<input type="text" placeholder="ФАМИЛИЯ" name="sername" id="sername">
</div>
<div class="block-mb-yellow">
<label for="patronymic">Отчество</label>
<input type="text" placeholder="ОТЧЕСТВО" name="patronymic" id="patronymic">
</div>
<div class="tabs-content-block" data-tab="tab-extended-registration">
<div class="block-mb-yellow">
<label for="birthday">Дата рождения</label>
<input type="text" name="birthday" id="birthday" placeholder="ВЫБЕРИТЕ ДАТУ">
</div>
<div class="block-gender block-mb-green">
<p>Пол:</p>
<div class="block-radio">
<label for="male">
<input type="radio" id="male" name="gender" hidden checked>
<div class="radio"></div>
Мужской
</label>
</div>
<div class="block-radio">
<label for="female">
<input type="radio" id="female" name="gender" hidden>
<div class="radio"></div>
Женский
</label>
</div>
</div>
</div>
<div class="block-mb-yellow">
<label for="phone">Телефон</label>
<input type="text" name="phone" id="phone" placeholder="+7">
</div>
<div class="tabs-content-block" data-tab="tab-extended-registration">
<div class="block-mb-yellow">
<label for="email">E-mail</label>
<input type="text" name="email" id="email" placeholder="E-MAIL">
</div>
<div class="block-mb-yellow">
<label for="address">Адрес</label>
<input type="text" name="address" id="address" placeholder="РЕГИОН / РАЙОН, ГОРОД / Н.П., УЛИЦА">
</div>
</div>
<div class="block-mb-green">
<label for="password">Пароль</label>
<input type="password" name="password" id="password" placeholder="ПАРОЛЬ">
</div>
<p class="block-mb-green" style="font-size: 14px;">* - поля, обязательные для заполнения</p>
<p class="block-mb-green" style="font-size: 14px;">Нажимая кнопку «Зарегистрироваться», Вы даёте своё согласие на обработку персональных данных</p>
<input type="submit" name="submit-registration" class="main-button" id="submit-registration" value="Зарегистрироваться">
</form>
</div> </div>
</div> </div>
<input type="submit" name="submit-password-recovery" class="main-button" id="submit-password-recovery" value="Отправить"> </div>
</form>
</div> </div>
</div> </div>
</div> </div>
......
src/scss/_libs.scss
View file @ 3b9f8518
...@@ -3,5 +3,6 @@ ...@@ -3,5 +3,6 @@
@import '~owl.carousel/dist/assets/owl.carousel.min.css'; @import '~owl.carousel/dist/assets/owl.carousel.min.css';
@import '~bootstrap/scss/bootstrap.scss'; @import '~bootstrap/scss/bootstrap.scss';
@import '../../node_modules/choices.js/src/styles/choices.scss'; @import '../../node_modules/choices.js/src/styles/choices.scss';
@import '~js-datepicker/src/datepicker';
@import '~normalize.css'; @import '~normalize.css';
// @import '~tiny-slider/dist/tiny-slider.css'; // @import '~tiny-slider/dist/tiny-slider.css';
\ No newline at end of file
src/scss/style.scss
View file @ 3b9f8518
...@@ -496,6 +496,11 @@ select ...@@ -496,6 +496,11 @@ select
border-color: $color-primary !important; border-color: $color-primary !important;
} }
.choices[data-type*=select-one]:after
{
right: 20px;
}
// Стили для блока с файлом // Стили для блока с файлом
.block-file .block-file
...@@ -786,6 +791,128 @@ textarea:focus ...@@ -786,6 +791,128 @@ textarea:focus
} }
} }
// Стили дял календаря
.qs-datepicker-container
{
width: 265px;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
background-color: #ffffff;
border: 0;
border-radius: 0;
}
.qs-datepicker .qs-controls
{
background: #fff;
padding-top: 10px;
}
.qs-datepicker .qs-squares
{
padding: 6px;
padding-top: 10px;
}
.qs-datepicker .qs-month-year
{
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: 0 !important;
}
.qs-datepicker .qs-square.qs-day
{
font-family: Montserrat Bold;
font-size: 11px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
text-transform: uppercase;
width: 26px;
}
.qs-datepicker .qs-square
{
width: 26px;
height: 25px;
border-radius: 3px;
border: solid 1px transparent;
background-color: #ffffff;
font-family: Montserrat Bold;
font-size: 12px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 4px;
margin-left: 5px;
margin-right: 5px;
transition: .3s;
}
.qs-datepicker .qs-current
{
border-color: currentColor;
}
.qs-datepicker .qs-current span
{
text-decoration: none !important;
}
.qs-datepicker .qs-current:hover
{
color: $color-primary !important;
border-color: currentColor;
background: #fff !important;
}
.qs-datepicker .qs-active
{
background: $color-clicked !important;
color: #fff !important;
}
.qs-datepicker .qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover
{
background: $color-hover;
color: #fff;
}
.qs-datepicker .qs-arrow:hover
{
background: transparent !important;
}
// .qs-datepicker .qs-arrow.qs-left:after, .qs-datepicker .qs-arrow.qs-right:after
// {
// display: none;
// }
// .qs-datepicker .qs-arrow.qs-right
// {
// opacity: 0;
// z-index: -1;
// pointer-events: none;
// }
// Шапка // Шапка
.header .header
...@@ -1423,6 +1550,80 @@ button ...@@ -1423,6 +1550,80 @@ button
outline: none; outline: none;
} }
// Карточка компании
.company-card
{
display: flex;
padding: 32px;
background-color: #fff;
border-radius: 3px;
// width: 400px;
position: relative;
&__left
{
width: 31%;
}
&__right
{
margin-left: 26px;
width: 65%;
}
&__image
{
img
{
max-width: 100%;
height: auto;
width: auto !important;
}
}
&__name
{
font-family: Montserrat Bold;
font-size: 18px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
max-height: 44px;
height: 44px;
overflow: hidden;
margin-bottom: 22px;
}
&__count
{
font-family: Montserrat Light;
font-size: 16px;
font-weight: 300;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-disabled;
max-height: 20px;
height: 20px;
overflow: hidden;
margin-bottom: 30px;
}
&__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;
max-height: 77px;
height: 77px;
overflow: hidden;
}
}
.top-companies .top-companies
{ {
h1 h1
...@@ -1451,77 +1652,6 @@ button ...@@ -1451,77 +1652,6 @@ button
{ {
} }
&-block
{
display: flex;
padding: 32px;
background-color: #fff;
border-radius: 3px;
// width: 400px;
position: relative;
&__left
{
width: 31%;
}
&__right
{
margin-left: 26px;
width: 65%;
}
&__image
{
img
{
max-width: 100%;
height: auto;
width: auto !important;
}
}
&__name
{
font-family: Montserrat Bold;
font-size: 18px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
max-height: 44px;
height: 44px;
overflow: hidden;
margin-bottom: 22px;
}
&__count
{
font-family: Montserrat Light;
font-size: 16px;
font-weight: 300;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-disabled;
max-height: 20px;
height: 20px;
overflow: hidden;
margin-bottom: 30px;
}
&__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;
max-height: 77px;
height: 77px;
overflow: hidden;
}
}
} }
} }
...@@ -2054,7 +2184,7 @@ button ...@@ -2054,7 +2184,7 @@ button
} }
} }
.list-image .image-vacancies
{ {
border-radius: 3px; border-radius: 3px;
box-shadow: 0 10px 20px 0 rgba(15,20,91,.1); box-shadow: 0 10px 20px 0 rgba(15,20,91,.1);
...@@ -2063,24 +2193,69 @@ button ...@@ -2063,24 +2193,69 @@ button
height: 488px; height: 488px;
max-height: 488px; max-height: 488px;
max-width: 295px; max-width: 295px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
} }
.search-list .search-list
{ {
margin-top: 32px; margin-top: 32px;
&-row &-row-vacancies
{ {
margin-left: -10px; margin-left: -10px;
margin-right: -10px; margin-right: -10px;
.col-4
{
margin-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
} }
.col-4 &-row-companies
{ {
margin-bottom: 22px; margin-left: -9px;
padding-left: 10px; margin-right: -9px;
padding-right: 10px; .col-6
{
margin-bottom: 22px;
padding-left: 9px;
padding-right: 9px;
}
.company-card
{
height: 300px;
box-shadow: 0 10px 20px 0 rgba(15,20,91,.1);
border-radius: 3px;
.title-rating
{
margin-top: 22px;
margin-bottom: 22px;
font-family: Montserrat Bold;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
}
.company-card__name
{
height: 66px;
max-height: 66px;
}
.company-card__desc
{
height: 96px;
max-height: 96px;
}
}
} }
} }
.list-container .list-container
{ {
&-row &-row
...@@ -2308,6 +2483,243 @@ button ...@@ -2308,6 +2483,243 @@ button
} }
// Страница Регистрация
.advantages-registration
{
h2
{
margin-bottom: 40px;
}
&-row
{
margin-left: -37.5px;
margin-right: -37.5px;
.block-advantages-registration
{
padding-left: 37.5px;
padding-right: 37.5px;
&__image
{
text-align: center;
height: 120px;
img
{
max-width: 100%;
height: auto;
}
}
&__name
{
font-family: Montserrat Bold;
font-size: 15px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
margin-top: 32px;
text-align: center;
}
&__desc
{
font-family: Montserrat Regular;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 22px;
letter-spacing: normal;
color: $color-primary;
margin-top: 32px;
text-align: center;
}
}
}
}
#submit-registration
{
display: flex;
width: auto;
margin: 0 auto;
}
// Выбор пола
.block-gender
{
display: flex;
align-items: center;
padding-bottom: 45px;
border-bottom: 2px solid #DDDCE8;
.block-radio
{
margin-top: 0;
margin-left: 50px;
}
label
{
margin-bottom: 0 !important;
}
p
{
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;
}
}
// Tooltip
.block-tooltip
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
transition: .3s;
cursor: pointer;
width: 16px;
height: 16px;
.img-svg
{
max-width: 100%;
height: auto;
}
}
.block-tooltip:before
{
content: "";
position: absolute;
border: 8px solid rgba(0,0,0,0);
border-right: 12px solid #fff;
display: block;
width: 0;
height: 0;
right: -18px;
top: 0;
transition: .3s;
opacity: 0;
z-index: -1;
}
.block-tooltip:after
{
content: attr(data-info);
position: absolute;
display: block;
width: 230px;
border-radius: 3px;
background-color: #ffffff;
padding: 10px 20px;
font-family: Montserrat Regular;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 22px;
letter-spacing: normal;
color: $color-primary;
text-transform: initial;
right: -248px;
top: -18px;
transition: .3s;
opacity: 0;
z-index: -1;
}
.block-tooltip:hover
{
.img-svg path
{
fill: $color-ref;
}
}
.block-tooltip:hover:before, .block-tooltip:hover:after
{
opacity: 1;
z-index: 3;
}
// Табы
.tabs
{
&-items
{
display: flex;
justify-content: space-between;
.tabs-item
{
font-family: Raleway Bold;
font-size: 16px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-disabled;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 20px;
transition: .3s;
text-transform: uppercase;
border-bottom: 4px solid currentColor;
display: flex;
.block-tooltip
{
margin-left: 10px;
}
}
.tabs-item_active
{
color: $color-ref !important;
}
.tabs-item:hover
{
color: $color-hover;
}
}
&-content
{
&-block
{
display: none;
}
&-block_active
{
display: block;
}
}
}
// Страница Список компаний
.image-companies
{
display: block;
// width: 453px;
max-width: 453px;
height: 300px;
max-height: 300px;
border-radius: 3px;
box-shadow: 0 10px 20px 0 rgba(15,20,91,.1);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 0;
}
.footer .footer
......
src/vacancies.html → src/vacancies-list.html
View file @ 3b9f8518
...@@ -315,9 +315,9 @@ ...@@ -315,9 +315,9 @@
</form> </form>
</div> </div>
<div class="search-list"> <div class="search-list">
<div class="row search-list-row"> <div class="row search-list-row-vacancies">
<div class="col-4"> <div class="col-4">
<a href="#" class="list-image" style="background-image: url(./img/img_banner3.png);"></a> <a href="#" class="image-vacancies" style="background-image: url(./img/img_banner3.png);"></a>
</div> </div>
<div class="col-4"> <div class="col-4">
<div class="vacancy-card popular"> <div class="vacancy-card popular">
......
webpack.config.js
View file @ 3b9f8518
...@@ -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', 'articles', 'faq', 'vacancies', 'current-article', 'main', 'service-rules', 'access-account', 'password-recovery', 'registration']; const pages = ['index', 'articles', 'faq', 'vacancies-list', 'current-article', 'main', 'service-rules', 'access-account', 'password-recovery', 'registration', 'companies-list'];
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