Skip to content

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

Half main page is done

parent 27ad58f8
Hide whitespace changes
Inline Side-by-side
Showing with 856 additions and 79 deletions
src/img/icon_detail_vacancy.svg 0 → 100644
View file @ b1a85e4e
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 9V11H11V20H9V11H0V9H9V0H11V9H20Z" fill="#262262"/>
</svg>
src/img/icon_label_top.svg 0 → 100644
View file @ b1a85e4e
<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.311523 22.6274L45.5664 22.6274L65.0002 42.0613L65.0002 87.3162L0.311523 22.6274Z" fill="#262262"/>
<path d="M42.5393 36.1466L36.5303 30.1376L35.2235 31.4443L37.4311 33.6519L31.8082 39.2749L33.3921 40.8588L39.015 35.2359L41.2325 37.4533L42.5393 36.1466ZM39.7075 47.4118C41.8854 49.5897 45.0137 49.6887 47.0827 47.6197C49.1516 45.5507 49.0527 42.4224 46.8748 40.2445C44.687 38.0567 41.5587 37.9776 39.4996 40.0366C37.4405 42.0957 37.5197 45.224 39.7075 47.4118ZM41.0737 46.0456C39.8362 44.8082 39.8065 42.9768 41.1232 41.6602C42.4398 40.3435 44.2712 40.3732 45.5086 41.6107C46.7461 42.8481 46.7758 44.6795 45.4591 45.9961C44.1425 47.3128 42.3111 47.2831 41.0737 46.0456ZM54.7825 48.3898L51.7829 45.3903L44.8533 52.3199L46.457 53.9236L48.3676 52.013L49.7634 53.4089C51.6146 55.2601 53.7331 55.458 55.2774 53.9137C56.8316 52.3595 56.6337 50.241 54.7825 48.3898ZM50.981 52.013L49.6743 50.7063L52.0799 48.3007L53.3866 49.6074C54.3667 50.5875 54.4162 51.528 53.6539 52.2902C52.9015 53.0426 51.9611 52.9931 50.981 52.013Z" fill="white"/>
</svg>
src/img/icon_mail.svg
View file @ b1a85e4e
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M0 0.688477C0 3.78848 0 12.6885 0 15.6885C7.2 15.6885 12.5 15.6885 20 15.6885C20 12.6885 20 3.78848 20 0.688477C11.3 0.688477 8.8 0.688477 0 0.688477ZM2 13.6885V5.58848L10 12.5885L18 5.58848V13.5885H2V13.6885ZM18 2.98848L10 9.98848L2 2.98848V2.68848H18V2.98848Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0">
<rect y="0.688477" width="20" height="15" fill="white"/>
</clipPath>
</defs>
<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0C0 3.1 0 12 0 15C7.2 15 12.5 15 20 15C20 12 20 3.1 20 0C11.3 0 8.8 0 0 0ZM2 13V4.9L10 11.9L18 4.9V12.9H2V13ZM18 2.3L10 9.3L2 2.3V2H18V2.3Z" fill="#3C3B55"/>
</svg>
src/img/icon_vacancy_respond.svg 0 → 100644
View file @ b1a85e4e
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 9V11H11V20H9V11H0V9H9V0H11V9H20Z" fill="#262262"/>
</svg>
src/index.html
View file @ b1a85e4e
......@@ -6,67 +6,333 @@
<title>Главная</title>
</head>
<body>
<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 src="./img/arrow_down.svg" alt="">
</a>
<a href="#" class="choice-city">
Нижний Новгород
<img src="./img/arrow_down.svg" alt="">
</a>
<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 class="col-5 header-top-middle">
<a href="#" class="choice-mode choice-mode_active">Ищу работу</a>
<a href="#" class="choice-mode">Ищу работника</a>
</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/icon_resume.svg" alt="">
Разместить резюме
</a>
<a href="#" class="button-text enter-account">
<img class="img-svg" src="./img/icon_enter.svg" alt="">
Войти
</a>
</div>
</div>
<div class="col-auto header-top-right">
<a href="#" class="help">
Помощь
<img src="./img/arrow_down.svg" alt="">
</div>
</div>
</header>
<div class="wrapper-content block-mt-dark-blue block-mb-purple">
<div class="quick-job-search block-mb-purple">
<h1>Воспользуйтесь быстрым поиском</h1>
<div class="container">
<div class="quick-job-search-content block-mt-dark-blue">
<form action="" id="quick-search-form">
<input type="text" name="position" placeholder="ДОЛЖНОСТЬ">
<input type="text" name="city" placeholder="ГОРОД">
<input type="text" name="salary" placeholder="ЗАРПЛАТА">
<input type="submit" class="main-button" value="Найти">
</form>
<a href="#" class="button-text detailed-search">
<img class="img-svg" src="./img/icon_search.svg" alt="">
Расширенный поиск
</a>
<div class="hash-tags">
<a href="#" class="hash-tags__link"># работа рядом <span>(5)</span></a>
<a href="#" class="hash-tags__link"># работа прямо сейчас <span>(3)</span></a>
<a href="#" class="hash-tags__link"># работа завтра <span>(18)</span></a>
<a href="#" class="hash-tags__link"># работа через месяц <span>(11)</span></a>
<a href="#" class="hash-tags__link"># сезонная работа <span>(8)</span></a>
<a href="#" class="hash-tags__link"># постоянная работа <span>(8)</span></a>
</div>
</div>
<div class="quick-job-search__buttons">
<a href="#" class="button-text release-resume">
<img class="img-svg" src="./img/icon_resume.svg" alt="">
Разместить резюме
</a>
<a href="#" class="button-text vacancies-map">
<img class="img-svg" src="./img/icon_map.svg" alt="">
Вакансии на карте
</a>
</div>
</div>
</div>
<div class="new-vacancies">
<h1>Свежие вакансии</h1>
<div class="new-vacancies-content block-mt-dark-blue">
<div class="container">
<div class="row">
<div class="col-3">
<div class="vacancy-card vacancy-card_popular">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="vacancy-card__label" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-3">
<div class="vacancy-card vacancy-card_popular">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="vacancy-card__label" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-3">
<div class="vacancy-card vacancy-card_popular">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
<div class="vacancy-card__label" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-3">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
</div>
</div>
<div class="col-3">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
</div>
</div>
<div class="col-3">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
</div>
</div>
<div class="col-3">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
</div>
</div>
<div class="col-3">
<div class="vacancy-card">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
<p class="vacancy-card__salary">30 000 руб/мес</p>
<p class="vacancy-card__city">Нижний Новгород</p>
<p class="vacancy-card__parameters">Полный день, Гибкий график, Смена, Удалённая...</p>
<p class="vacancy-card__date">12.12.2019 г.</p>
</div>
<div class="vacancy-card__buttons">
<a href="#" class="vacancy-card__more">
<img class="img-svg" src="./img/icon_detail_vacancy.svg" alt="">
</a>
<a href="#" class="button-text vacancy-card__respond">
<img class="img-svg" src="./img/icon_mail.svg" alt="">
Откликнуться
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header-bottom">
<footer class="footer">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-5 header-bottom-left">
<div class="row justify-content-between">
<div class="col-2 footer-left">
<a href="#">
<img src="./img/logo.svg" alt="">
</a>
<p>Быстрый поиск узкоквалифицированной работы</p>
</div>
<div class="col-5 header-bottom-right">
<a href="#" class="search-work">
<img src="./img/icon_search.svg" alt="">
Найти работу
</a>
<a href="#" class="release-resume">
<img src="./img/icon_resume.svg" alt="">
Разместить резюме
</a>
<a href="#" class="enter-account">
<img src="./img/icon_enter.svg" alt="">
Войти
</a>
<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>
</div>
</header>
<footer class="footer">
</footer>
</footer>
</div>
</body>
</html>
\ No newline at end of file
src/js/main.js
View file @ b1a85e4e
console.log('hi');
import '../scss/style.scss';
\ No newline at end of file
import '../scss/style.scss';
var imgSvg = document.querySelectorAll('.img-svg');
for(var i = 0; i < imgSvg.length; i++)
{
var img = imgSvg[i];
var imgClass = img.getAttribute('class');
var imgUrl = img.getAttribute('src');
var request = new XMLHttpRequest();
request.open('GET', imgUrl, false);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
// Success!
var data = this.response;
var parser = new DOMParser();
var htmlSvg = parser.parseFromString(data, 'text/html');
var svg = htmlSvg.querySelector('svg');
svg.setAttribute('class', 'img-svg');
console.log(svg);
// img.replaceWith(svg);
img.parentElement.insertBefore(svg, img);
img.parentElement.removeChild(img);
}
else
{
console.log('error!');
}
};
request.onerror = function(e) {
console.log(e);
// There was a connection error of some sort
};
request.send();
}
src/scss/_custom.scss
View file @ b1a85e4e
......@@ -20,6 +20,5 @@ $color-clicked: #88ab51;
$color-ref: #262262;
$color-current: #69678e;
$color-disabled: #b7b6c3;
$color-main-button: #ffffff;
// $color-main-button: #ffffff;
$body-bg-color: #f7f6fb;
\ No newline at end of file
src/scss/_fonts.scss
View file @ b1a85e4e
......@@ -24,4 +24,13 @@
url('../fonts/Montserrat-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: 'Montserrat Light';
src: url('../fonts/Montserrat-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/Montserrat-Light.woff') format('woff'),
url('../fonts/Montserrat-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
\ No newline at end of file
src/scss/style.scss
View file @ b1a85e4e
......@@ -3,27 +3,52 @@
// Отступы
.block-purple
.block-mt-purple
{
margin-top: 96px;
}
.block-mt-dark-blue
{
margin-top: 75px;
}
.block-mt-blue
{
margin-top: 64px;
}
.block-mt-green
{
margin-top: 43px;
}
.block-mt-yellow
{
margin-top: 32px;
}
.block-mt-orange
{
margin-top: 22px;
}
.block-mb-purple
{
margin-bottom: 96px;
}
.block-dark-blue
.block-mb-dark-blue
{
margin-bottom: 75px;
}
.block-blue
.block-mb-blue
{
margin-bottom: 64px;
}
.block-green
.block-mb-green
{
margin-bottom: 43px;
}
.block-yellow
.block-mb-yellow
{
margin-bottom: 32px;
}
.block-orange
.block-mb-orange
{
margin-bottom: 22px;
}
......@@ -142,7 +167,7 @@ a:hover
/* Кнопки */
button
.main-button
{
padding: 15px 30px;
font-family: Montserrat Bold;
......@@ -150,21 +175,23 @@ button
font-weight: bold;
font-stretch: normal;
font-style: normal;
border: 0;
line-height: normal;
letter-spacing: normal;
color: $color-main-button;
color: #fff;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
background-color: $color-ref;
transition: .3s;
text-transform: uppercase;
}
button:hover
.main-button:hover
{
background-color: $color-hover;
box-shadow: 0 15px 25px 0 rgba(15, 20, 91, 0.1);
}
button:active
.main-button:active
{
background-color: $color-clicked;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
......@@ -176,6 +203,46 @@ button:active
// background-color: $color-disabled;
// }
.button-text
{
display: flex;
align-items: center;
transition: .3s;
font-family: Montserrat Bold;
font-size: 15px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-ref;
justify-content: center;
border: 0;
.img-svg
{
margin-right: 10px;
}
}
.button-text:hover
{
color: $color-hover;
.img-svg path
{
fill: $color-hover;
}
}
.button-text:active
{
color: $color-clicked;
.img-svg path
{
fill: $color-clicked;
}
}
// Поле ввода
input[type="text"]
......@@ -203,6 +270,22 @@ input[type="text"]:focus, input[type="text"]:focus::placeholder
{
color: $color-ref;
}
input[type="text"]:focus
{
border-left: 2px solid currentColor !important;
border-right: 2px solid currentColor !important;
}
.wrapper
{
display: flex;
flex-direction: column;
min-height: 100vh;
&-content
{
flex: 1 1 auto;
}
}
// Шапка
......@@ -218,11 +301,27 @@ input[type="text"]:focus, input[type="text"]:focus::placeholder
align-items: center;
a
{
img
font-family: Montserrat Bold;
font-size: 15px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-ref;
.img-svg
{
margin-left: 10px;
}
}
a:hover
{
color: $color-hover;
.img-svg path
{
fill: $color-hover;
}
}
.choice-lang
{
display: flex;
......@@ -263,10 +362,15 @@ input[type="text"]:focus, input[type="text"]:focus::placeholder
margin-right: 20px;
}
.choice-mode:hover
{
background-color: $color-ref;
color: #fff;
}
.choice-mode_active
{
background-color: $color-ref;
color: $color-main-button;
color: #fff;
}
}
......@@ -287,11 +391,19 @@ input[type="text"]:focus, input[type="text"]:focus::placeholder
line-height: normal;
letter-spacing: normal;
color: $color-ref;
img
.img-svg
{
margin-left: 10px;
}
}
.help:hover
{
color: $color-hover;
.img-svg path
{
fill: $color-hover;
}
}
}
}
&-bottom
......@@ -325,24 +437,369 @@ input[type="text"]:focus, input[type="text"]:focus::placeholder
display: flex;
align-items: center;
justify-content: space-between;
a
}
}
}
// Быстрый поиск
.quick-job-search
{
h1
{
text-align: center;
}
&-content
{
border-radius: 3px;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
background-color: #ffffff;
padding: 64px 105px 43px 105px;
form
{
display: flex;
justify-content: center;
flex-wrap: wrap;
input[type="text"]
{
border: 0;
font-family: Montserrat Bold;
font-size: 15px;
font-weight: bold;
width: 28%;
}
input[type="text"]:nth-child(1)
{
border-right: 0;
}
input[type="text"]:nth-child(3)
{
border-left: 0;
border-right: 0;
}
input[type="submit"]
{
padding-left: 50px;
padding-right: 50px;
}
}
.detailed-search
{
margin-top: 43px;
}
.hash-tags
{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-top: 73px;
&__link
{
display: flex;
margin-right: 15px;
margin-bottom: 15px;
align-items: center;
font-family: Montserrat Regular;
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-ref;
img
border: 0;
span
{
margin-right: 10px;
color: $color-disabled;
margin-left: 3px;
}
}
}
}
&__buttons
{
display: flex;
justify-content: space-around;
align-items: center;
padding-top: 22px;
padding-bottom: 22px;
border-top: 1px solid rgba(38, 34, 98, 0.1);
background-color: #fff;
}
}
// Свежие вакансии
.vacancy-card
{
width: 295px;
height: 488px;
border-radius: 3px;
background-color: #ffffff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 20px 0 rgba(15,20,91,.1);
position: relative;
&__desc
{
padding: 31px 33px;
display: flex;
flex-direction: column;
justify-content: space-between;
.vacancy-card__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: 66px;
height: 66px;
margin-bottom: 32px;
overflow: hidden;
}
.vacancy-card__company
{
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: 57px;
height: 57px;
margin-bottom: 32px;
overflow: hidden;
}
.vacancy-card__salary
{
font-weight: bold;
font-family: Montserrat Bold;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
margin-bottom: 20px;
overflow: hidden;
max-height: 19px;
height: 19px;
}
.vacancy-card__city
{
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-bottom: 20px;
overflow: hidden;
max-height: 19px;
height: 19px;
}
.vacancy-card__parameters
{
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-bottom: 32px;
overflow: hidden;
max-height: 40px;
height: 40px;
}
.vacancy-card__date
{
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;
// margin-bottom: 32px;
overflow: hidden;
max-height: 18px;
height: 18px;
}
}
&__buttons
{
display: flex;
align-items: center;
.vacancy-card__more
{
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
background-color: $body-bg-color;
border: 0;
}
.vacancy-card__respond
{
margin-left: 50px;
}
// .vacancy-card__respond:hover
// {
// .img-svg path
// {
// fill: $color-hover;
// }
// }
}
&__label
{
position: absolute;
right: -22px;
top: -22px;
display: block;
font-family: Montserrat Bold;
font-size: 14px;
font-weight: 700;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #fff;
width: 87px;
height: 87px;
background-repeat: no-repeat;
}
}
.vacancy-card.vacancy-card_popular
{
background-color: $color-hover;
p
{
color: #ffffff;
}
.vacancy-card__more
{
background-color: #82b435;
.img-svg path
{
fill: #fff;
}
}
.vacancy-card__respond
{
color: #fff !important;
.img-svg path
{
fill: #fff;
}
}
}
.new-vacancies
{
h1
{
text-align: center;
}
&-content
{
.col-3
{
margin-bottom: 22px;
}
}
}
.footer
{
background-color: #fff;
padding-top: 64px;
padding-bottom: 64px;
&-pages
{
&__link
{
font-family: Montserrat Regular;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 2.14;
letter-spacing: normal;
color: $color-ref;
display: block;
border: 0;
}
}
&-contacts
{
&__block
{
margin-bottom: 22px;
display: flex;
img
{
margin-right: 10px;
}
a
{
display: block;
border: 0;
font-family: Montserrat Regular;
font-size: 15px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 2;
letter-spacing: normal;
color: $color-primary;
}
}
.feedback
{
font-size: 12px;
}
}
&-left
{
a
{
display: block;
border: 0;
}
}
&-right
{
&__title
{
font-family: Raleway Bold;
font-size: 18px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-ref;
margin-bottom: 22px;
display: block;
border: 0;
}
}
}
......
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