Skip to content

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

Main page almost done

parent b1a85e4e
Show whitespace changes
Inline Side-by-side
Showing with 827 additions and 37 deletions
package-lock.json
View file @ 434c52d4
......@@ -9767,6 +9767,11 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true
},
"tiny-slider": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/tiny-slider/-/tiny-slider-2.9.2.tgz",
"integrity": "sha512-2sgEJpVbpIbbgiYM/xGa0HMvvtUZSJvXeZJmLWBux6VgFqh/MQG8LXBR59ZLYpa/1OtwM0E6/ic55oLOJN9Mnw=="
},
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
......
src/img/arrow_right_step.svg 0 → 100644
View file @ 434c52d4
<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M23.9 10.7019L13.8 0.701872C12.8 -0.298128 11.1 -0.198128 10.1 0.801872C9 1.80187 9 3.50187 10 4.50187L14.3 8.60187H2C0.7 8.60187 0 9.90187 0 11.1019C0 11.7019 0.2 12.3019 0.5 12.8019C0.9 13.3019 1.4 13.7019 2 13.7019H14.3L10.1 17.9019C9.6 18.4019 9.4 19.0019 9.4 19.6019C9.4 20.3019 9.7 21.0019 10.2 21.5019C10.7 22.0019 11.4 22.3019 12.1 22.3019C12.8 22.3019 13.4 22.0019 13.8 21.6019L23.8 11.5019C24 11.3019 24 10.9019 23.9 10.7019Z" fill="#3C3B55"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="24" height="22.2" fill="white"/>
</clipPath>
</defs>
</svg>
src/img/arrow_slider_left.svg 0 → 100644
View file @ 434c52d4
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M6.16 0L7 0.84L2.02 6L2.56 6.54L7 11.16L6.16 12C4.96 10.74 1.54 7.2 0.400001 6C1.24 5.1 0.4 6 6.16 0Z" fill="#3C3B55"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="6.6" height="12" transform="matrix(-1 0 0 1 7 0)" fill="white"/>
</clipPath>
</defs>
</svg>
src/img/arrow_slider_right.svg 0 → 100644
View file @ 434c52d4
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M0.84 0L0 0.84L4.98 6L4.44 6.54L0 11.16L0.84 12C2.04 10.74 5.46 7.2 6.6 6C5.76 5.1 6.6 6 0.84 0Z" fill="#3C3B55"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="6.6" height="12" fill="white"/>
</clipPath>
</defs>
</svg>
src/img/icon_resume.svg
View file @ 434c52d4
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M5 15.4H9.3L19.2 4.7L15.1 0L5 9.9V15.4ZM7 10.7L15 2.7L16.6 4.7L8.5 13.4H7V10.7ZM20 10.4C20 14.2 20 16.7 20 20.4C13.4 20.4 16.8 20.4 0 20.4C0 11.7 0 9.1 0 0.4C3.8 0.4 6.2 0.4 10 0.4V2.4H2V18.4H18V10.4H20Z" fill="#262262"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="20" height="20.4" fill="white"/>
</clipPath>
</defs>
</g>
</svg>
src/img/icon_star_empty.svg 0 → 100644
View file @ 434c52d4
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve" width="15" height="15">
<path id="star_x5F_favorite_1_" d="M19.5,9.4c1.1-1.1,0.5-3-1-3.2l-3.8-0.6c-0.6-0.1-1.1-0.5-1.4-1l-1.7-3.6C11.3,0.4,10.6,0,10,0
C9.4,0,8.7,0.4,8.4,1.1L6.7,4.6c-0.3,0.6-0.8,0.9-1.4,1L1.6,6.2c-1.5,0.2-2.1,2.1-1,3.2l2.7,2.8c0.4,0.4,0.6,1.1,0.5,1.7l-0.6,3.9
C3,19,3.9,20,4.9,20c0.3,0,0.6-0.1,0.8-0.2l3.4-1.8c0.3-0.1,0.6-0.2,0.8-0.2c0.3,0,0.6,0.1,0.8,0.2l3.4,1.8c0.3,0.2,0.6,0.2,0.8,0.2
c1.1,0,2-1,1.8-2.2l-0.6-3.9c-0.1-0.6,0.1-1.2,0.5-1.7L19.5,9.4z M15,10.4c-1,1-1.5,2.5-1.2,3.9l0.4,2.7L12,15.7
c-0.6-0.3-1.3-0.5-2-0.5s-1.4,0.2-2,0.5L5.7,17l0.4-2.7C6.4,12.9,6,11.4,5,10.4L3.1,8.5l2.6-0.4C7,7.9,8.2,7,8.9,5.7L10,3.3l1.1,2.4
C11.8,7,13,7.9,14.3,8.1l2.6,0.4L15,10.4z" stroke="#dddce8"/>
</svg>
src/img/icon_star_full.svg 0 → 100644
View file @ 434c52d4
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve" width="15" height="15" fill="#92c83e">
<path id="star_x5F_favorite" d="M16.7,12.2c-0.4,0.4-0.6,1.1-0.5,1.7l0.6,3.9C17,19,16.1,20,15.1,20c-0.3,0-0.6-0.1-0.8-0.2
l-3.4-1.8c-0.3-0.1-0.6-0.2-0.8-0.2c-0.3,0-0.6,0.1-0.8,0.2l-3.4,1.8C5.5,19.9,5.2,20,4.9,20c-1.1,0-2-1-1.8-2.2l0.6-3.9
c0.1-0.6-0.1-1.2-0.5-1.7L0.5,9.4c-1.1-1.1-0.5-3,1-3.2l3.8-0.6c0.6-0.1,1.1-0.5,1.4-1l1.7-3.6C8.7,0.4,9.4,0,10,0
c0.6,0,1.3,0.4,1.6,1.1l1.7,3.6c0.3,0.6,0.8,0.9,1.4,1l3.8,0.6c1.5,0.2,2.1,2.1,1,3.2L16.7,12.2z"/>
</svg>
src/img/new_resume_icon.svg 0 → 100644
View file @ 434c52d4
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20.4" style="enable-background:new 0 0 20 20.4;" xml:space="preserve" width="20" height="20.4">
<path id="edit_x5F_cover" d="M5,15.4h4.3l9.9-10.7L15.1,0L5,9.9V15.4z M7,10.7l8-8l1.6,2l-8.1,8.7H7V10.7z M20,10.4
c0,3.8,0,6.3,0,10c-6.6,0-3.2,0-20,0c0-8.7,0-11.3,0-20c3.8,0,6.2,0,10,0v2H2v16h16v-8H20z"/>
</svg>
src/index.html
View file @ 434c52d4
......@@ -49,7 +49,7 @@
Найти работу
</a>
<a href="#" class="button-text release-resume">
<img class="img-svg" src="./img/icon_resume.svg" alt="">
<img class="img-svg" src="./img/new_resume_icon.svg" alt="">
Разместить резюме
</a>
<a href="#" class="button-text enter-account">
......@@ -87,7 +87,7 @@
</div>
<div class="quick-job-search__buttons">
<a href="#" class="button-text release-resume">
<img class="img-svg" src="./img/icon_resume.svg" alt="">
<img class="img-svg" src="./img/new_resume_icon.svg" alt="">
Разместить резюме
</a>
<a href="#" class="button-text vacancies-map">
......@@ -97,13 +97,13 @@
</div>
</div>
</div>
<div class="new-vacancies">
<div class="new-vacancies block-mb-purple">
<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 popular">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
......@@ -121,11 +121,11 @@
Откликнуться
</a>
</div>
<div class="vacancy-card__label" 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="col-3">
<div class="vacancy-card vacancy-card_popular">
<div class="vacancy-card popular">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
......@@ -143,11 +143,11 @@
Откликнуться
</a>
</div>
<div class="vacancy-card__label" 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="col-3">
<div class="vacancy-card vacancy-card_popular">
<div class="vacancy-card popular">
<div class="vacancy-card__desc">
<p class="vacancy-card__name">Помощник мастера</p>
<p class="vacancy-card__company">ОКБМ им. Африкантова</p>
......@@ -165,7 +165,7 @@
Откликнуться
</a>
</div>
<div class="vacancy-card__label" 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="col-3">
......@@ -187,6 +187,7 @@
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-3">
......@@ -208,6 +209,7 @@
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-3">
......@@ -229,6 +231,7 @@
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-3">
......@@ -250,6 +253,7 @@
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="col-3">
......@@ -271,11 +275,248 @@
Откликнуться
</a>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="button-text ref-detail block-mt-blue">
<img class="img-svg" src="./img/icon_more.svg" alt="">
Все вакансии
</a>
</div>
<div class="top-companies block-mb-purple">
<h1>Лучшие компании</h1>
<div class="container">
<div class="top-companies-slider block-mt-dark-blue">
<div class="top-companies-slider-wrapper owl-carousel owl-theme">
<div class="top-companies-slider-block popular">
<div class="top-companies-slider-block__left">
<div class="top-companies-slider-block__image">
<img src="./img/img_top_company1.png" alt="">
</div>
<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="top-companies-slider-block__right">
<p class="top-companies-slider-block__name">ООО «Ростелеком»</p>
<p class="top-companies-slider-block__count">12 вакансий</p>
<p class="top-companies-slider-block__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
<div class="top-companies-slider-block popular">
<div class="top-companies-slider-block__left">
<div class="top-companies-slider-block__image">
<img src="./img/img_top_company2.png" alt="">
</div>
<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="top-companies-slider-block__right">
<p class="top-companies-slider-block__name">ООО «Ростелеком»</p>
<p class="top-companies-slider-block__count">12 вакансий</p>
<p class="top-companies-slider-block__desc">Одна из крупнейших сетей по продаже мебели и товаров для дома.</p>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
<div class="top-companies-slider-block popular">
<div class="top-companies-slider-block__left">
<div class="top-companies-slider-block__image">
<img src="./img/img_top_company3.png" alt="">
</div>
<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="top-companies-slider-block__right">
<p class="top-companies-slider-block__name">ООО «Ростелеком»</p>
<p class="top-companies-slider-block__count">12 вакансий</p>
<p class="top-companies-slider-block__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
<div class="top-companies-slider-block">
<div class="top-companies-slider-block__left">
<div class="top-companies-slider-block__image">
<img src="./img/img_top_company1.png" alt="">
</div>
<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="top-companies-slider-block__right">
<p class="top-companies-slider-block__name">ООО «Ростелеком»</p>
<p class="top-companies-slider-block__count">12 вакансий</p>
<p class="top-companies-slider-block__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
<div class="top-companies-slider-block">
<div class="top-companies-slider-block__left">
<div class="top-companies-slider-block__image">
<img src="./img/img_top_company2.png" alt="">
</div>
<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="top-companies-slider-block__right">
<p class="top-companies-slider-block__name">ООО «Ростелеком»</p>
<p class="top-companies-slider-block__count">12 вакансий</p>
<p class="top-companies-slider-block__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
<div class="top-companies-slider-block">
<div class="top-companies-slider-block__left">
<div class="top-companies-slider-block__image">
<img src="./img/img_top_company3.png" alt="">
</div>
<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="top-companies-slider-block__right">
<p class="top-companies-slider-block__name">ООО «Ростелеком»</p>
<p class="top-companies-slider-block__count">12 вакансий</p>
<p class="top-companies-slider-block__desc">Компания занимается предоставлением услуг связи и Интернета.</p>
</div>
<div class="label-top" style="background-image: url(./img/icon_label_top.svg);"></div>
</div>
</div>
<div class="navigation-top-companies"></div>
</div>
<a href="#" class="button-text ref-detail block-mt-blue">
<img class="img-svg" src="./img/icon_more.svg" alt="">
Все компании
</a>
</div>
</div>
<div class="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>
</div>
<div class="col-3">
<div class="images__block" style="background-image: url(./img/img_banner.png)"></div>
</div>
<div class="col-3">
<div class="images__block" style="background-image: url(./img/img_banner.png)"></div>
</div>
<div class="col-3">
<div class="images__block" style="background-image: url(./img/img_banner.png)"></div>
</div>
</div>
</div>
</div>
<div class="usage-steps">
<h1>Как пользоваться сервисом</h1>
<div class="container">
<div class="usage-steps-slider block-mt-dark-blue">
<div class="usage-steps-slider-wrapper owl-carousel owl-theme">
<div class="usage-steps-slider-block">
<div class="usage-steps-slider-block__image">
<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>
</div>
<div class="usage-steps-slider-block">
<div class="usage-steps-slider-block__image">
<img src="./img/img_step_slider.png" alt="">
</div>
<p class="usage-steps-slider-block__name">Шаг 2. Зайдите в личный кабинет</p>
<p class="usage-steps-slider-block__desc">Чтобы поиск был продуктивным, начните с регистрации на сайте</p>
</div>
<div class="usage-steps-slider-block">
<div class="usage-steps-slider-block__image">
<img src="./img/img_step_slider.png" alt="">
</div>
<p class="usage-steps-slider-block__name">Шаг 3. Зарегистрируйтесь</p>
<p class="usage-steps-slider-block__desc">Чтобы поиск был продуктивным, начните с регистрации на сайте</p>
</div>
<div class="usage-steps-slider-block">
<div class="usage-steps-slider-block__image">
<img src="./img/img_step_slider.png" alt="">
</div>
<p class="usage-steps-slider-block__name">Шаг 4. Зайдите в личный кабинет</p>
<p class="usage-steps-slider-block__desc">Чтобы поиск был продуктивным, начните с регистрации на сайте</p>
</div>
</div>
<div class="navigation-steps-slider"></div>
</div>
</div>
</div>
</div>
<footer class="footer">
......
src/js/main.js
View file @ 434c52d4
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';
var imgSvg = document.querySelectorAll('.img-svg');
......@@ -43,3 +45,154 @@ 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, //Зацикливаем слайдер
items:3,
margin:20, //Отступ от элемента справа в 50px
nav:true, //Отключение навигации
dots: false,
autoplay: false, //Автозапуск слайдера
smartSpeed:300, //Время движения слайда
autoplayTimeout:300, //Время смены слайда
mouseDrag: false,
touchDrag: false,
navContainer: '.navigation-top-companies',
navText: ["<div class='arrow-slider'><img src='./img/arrow_slider_left.svg'></div>", "<div class='arrow-slider'><img src='./img/arrow_slider_right.svg'></div>"],
});
$('.usage-steps-slider-wrapper').owlCarousel({
loop:true, //Зацикливаем слайдер
items:1,
margin:0, //Отступ от элемента справа в 50px
nav:true, //Отключение навигации
dots: false,
autoplay: false, //Автозапуск слайдера
smartSpeed:300, //Время движения слайда
autoplayTimeout:300, //Время смены слайда
mouseDrag: false,
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()
{
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);
}
});
}
});
// $('.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);
// }
// });
// }
// });
src/scss/_libs.scss
View file @ 434c52d4
@import './_custom';
@import '~owl.carousel/dist/assets/owl.theme.default.min.css';
@import '~owl.carousel/dist/assets/owl.carousel.min.css';
@import '~bootstrap/scss/bootstrap.scss';
@import '~normalize.css';
// @import '~tiny-slider/dist/tiny-slider.css';
\ No newline at end of file
src/scss/style.scss
View file @ 434c52d4
......@@ -527,9 +527,30 @@ input[type="text"]:focus
// Свежие вакансии
.label-top
{
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;
opacity: 0;
transition: .3s;
}
.vacancy-card
{
width: 295px;
max-width: 295px;
height: 488px;
border-radius: 3px;
background-color: #ffffff;
......@@ -655,35 +676,18 @@ input[type="text"]:focus
{
margin-left: 50px;
}
// .vacancy-card__respond:hover
// {
// .img-svg path
// {
// fill: $color-hover;
// }
// }
}
&__label
}
.popular
{
.label-top
{
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;
opacity: 1;
}
}
.vacancy-card.vacancy-card_popular
.vacancy-card.popular
{
background-color: $color-hover;
p
......@@ -716,14 +720,334 @@ input[type="text"]:focus
}
&-content
{
.row
{
margin-right: -10px;
margin-left: -10px;
}
.col-3
{
margin-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
}
}
.ref-detail
{
font-family: Montserrat Bold;
font-size: 18px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-ref;
}
// Лучшие компании
.arrow-slider
{
width: 30px;
height: 30px;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
border: solid 1px #dddce8;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.navigation-top-companies
{
display: flex;
justify-content: space-between;
width: 100%;
position: absolute;
top: 33%;
z-index: 3;
}
button
{
background: transparent;
border: none;
outline: none;
}
.top-companies
{
h1
{
text-align: center;
}
.container
{
position: relative;
}
&-slider
{
button
{
position: absolute;
}
.owl-prev
{
left: 0;
}
.owl-next
{
right: 30px;
}
&-wrapper
{
}
&-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;
}
}
}
}
// Звезды
.rating__wrapper
{
display: flex;
position: relative;
margin-top: 22px;
}
.rating .i-star, .rating .i-star--filled
{
// color: $color-hover;
// width: 15px;
// height: 15px;
// display: block;
// line-height: 0;
}
.rating__filled-stars
{
position: absolute;
top: 0;
left: 0;
overflow-x: hidden;
display: flex;
}
.rating__filled-stars span
{
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
min-width: 15px;
height: 15px;
max-width: 15px;
display: inline-block;
margin-right: 6px;
}
.i-star
{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 15px;
height: 15px;
max-width: 15px;
min-width: 15px;
display: inline-block;
margin-right: 6px;
}
// Баннеры с рекламой
.images
{
.row
{
margin-left: -10px;
margin-right: -10px;
}
.col-3
{
// margin-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
// height: 184px;
}
&__block
{
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 184px;
// width: 295px;
// display: block !important;
}
}
// Как пользоваться сервисом
.navigation-steps-slider
{
display: flex;
align-items: center;
}
.arrow-steps
{
font-family: Raleway Bold;
font-size: 24px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
display: flex;
&__right
{
span
{
margin-left: 7px;
margin-right: 12px;
}
}
&__left
{
span
{
margin-left: 7px;
}
img
{
margin-right: 12px;
}
}
}
.usage-steps
{
h1
{
text-align: center;
}
&-slider
{
&-wrapper
{
}
&-block
{
display: flex;
flex-direction: column;
align-items: center;
&__image
{
}
&__name
{
font-family: Raleway Bold;
font-size: 24px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
margin-top: 64px;
}
&__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: 43px;
}
}
}
}
.footer
{
......
webpack.config.js
View file @ 434c52d4
......@@ -3,6 +3,7 @@ const HTMLWebpackPlugin = require('html-webpack-plugin');
// const {CleanWebpackPlugin} = require('clean-webpack-plugin');
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'];
......@@ -34,6 +35,11 @@ const webpackConfig = {
),
new MiniCssExtractPlugin({
filename: './css/style.css'
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
],
module: {
......
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