Skip to content

B
bobcat-su_full
Commit 9dc4b0c0 authored by Sergey's avatar Sergey
Browse files
Options

Add catalog full

parent 8d27fa05
Hide whitespace changes
Inline Side-by-side
Showing with 358 additions and 6 deletions
src/catalog.html
View file @ 9dc4b0c0
//= template/common/header.html
//= template/menu-list-catalog/index.html
//= template/breadcrumb/index.html
//= template/catalog-filter/index.html
//= template/catalog-products-list/index.html
//= template/catalog-description/index.html
//= template/news-main/index.html
//= template/link-list-red/index.html
//= template/common/footer.html
\ No newline at end of file
src/js/filter-slider.js
View file @ 9dc4b0c0
......@@ -5,14 +5,37 @@
if(listFilter) {
listFilter.forEach(function (itemSlider) {
var bodySlider = itemSlider.querySelector('.filter__slider-body');
var maxInput = itemSlider.querySelector('.filter__slider-max');
var minInput = itemSlider.querySelector('.filter__slider-min');
noUiSlider.create(bodySlider, {
start: [10, 30],
connect: true,
range: {
'min': -20,
'max': 40
'min': 10,
'max': 100
}
});
bodySlider.noUiSlider.on('update', function (values, handle) {
var value = values[handle];
if (handle) {
maxInput.value = Math.round(value);
} else {
minInput.value = Math.round(value);
}
})
});
minInput.addEventListener('change', function () {
bodySlider.noUiSlider.set([this.value, null]);
});
maxInput.addEventListener('change', function () {
bodySlider.noUiSlider.set([null, this.value]);
});
});
}
})();
\ No newline at end of file
src/scss/breadcrumb/breadcrumb.scss 0 → 100644
View file @ 9dc4b0c0
@import "../settings/color";
.breadcrumb{
padding: 10px 0;
font-size: 14px;
}
.breadcrumb__list{
display: flex;
list-style-type: none;
padding-left: 0;
margin: 0;
}
.breadcrumb__item{
&:after{
content: ">";
display: inline-block;
padding: 0 5px;
}
&:last-child{
&:after{
display: none;
}
}
}
.breadcrumb__link{
text-decoration: none;
color: $dark-text;
transition: .2s;
}
.breadcrumb__item:hover{
.breadcrumb__link{
text-decoration: underline;
color: rgba($dark-text, .8);
}
}
\ No newline at end of file
src/scss/catalog-description/catalog-description.scss 0 → 100644
View file @ 9dc4b0c0
.catalog-desc{
border-top: none;
}
.catalog-desc__content{
padding-top: 0;
}
\ No newline at end of file
src/scss/catalog-filter/catalog-filter-main.scss
View file @ 9dc4b0c0
......@@ -2,6 +2,8 @@
.filter{
background: $about-bg;
color: $dark-text;
position: relative;
}
.filter__wrapper{
......@@ -22,6 +24,10 @@
display: flex;
flex-direction: column;
align-items: center;
label{
width: 100%;
padding: 0 30px;
}
}
.filter__slider{
......@@ -58,6 +64,8 @@
width: 70px;
border-radius: 50px;
border: none;
padding: 2px 5px;
text-align: center;
}
p{
margin: 0;
......@@ -67,6 +75,14 @@
}
}
.filter-slider__line{
flex-grow: 1;
height: 1px;
width: auto;
background: white;
margin-top: 10px;
}
.filter__slider-body{
border-radius: 50px;
.noUi-connect{
......@@ -83,4 +99,58 @@
display: none;
}
}
}
.filter__btns-list{
display: flex;
align-items: center;
list-style-type: none;
justify-content: center;
margin: 0;
padding: 20px 0;
}
.filter__btns-item{
padding-right: 40px;
&:last-child{
padding-right: 0;
}
}
.filter__btn{
padding: 5px 15px;
border-radius: 50px;
text-transform: uppercase;
border: none;
transition: .2s;
}
.fitter__btn-apply{
&:after{
content: "✓";
display: inline-block;
padding-left: 10px;
}
}
.fitter__btn-reset{
&:after{
content: "☓";
display: inline-block;
padding-left: 10px;
}
}
.filter__btn:active{
background: $red-color;
color: $white-text;
}
.filter__dashed{
width: 100%;
border-bottom: 1px dashed $white-text;
position: absolute;
left: 0;
bottom: 0;
margin-bottom: 65px;
}
\ No newline at end of file
src/scss/catalog-products-list/catalog-products-list.scss 0 → 100644
View file @ 9dc4b0c0
@import "../settings/color";
.products-list__wrapper{
padding-top: 38px;
display: flex;
flex-direction: column;
}
.products-list__wrapper .h2__products-list{
margin: 0 auto;
}
.products-list__list{
display: flex;
list-style-type: none;
flex-wrap: wrap;
}
.product-item{
width: 25%;
height: 225px;
position: relative;
cursor: pointer;
margin-bottom: 20px;
}
.product-item__bg{
background: #c4c4c4;
position: absolute;
width: 115px;
height: 100%;
top: 0;
left: 0;
margin-left: 25px;
-webkit-transition: .2s;
-o-transition: .2s;
-moz-transition: .2s;
transition: .2s;
}
.product-item__img{
position: absolute;
bottom: 0;
left: 0;
max-width: 100%;
width: 276px;
-webkit-transition: .2s;
-o-transition: .2s;
-moz-transition: .2s;
transition: .2s;
}
.product-item__model{
font-size: 37px;
font-weight: bold;
color: #fefefe;
line-height: 1;
margin: 0;
padding-top: 15px;
}
.product-item:hover{
.product-item__bg{
background: $red-color;
transform: translateY(-10px);
}
.product-item__img{
transform: translateY(-10px);
}
}
\ No newline at end of file
src/scss/settings/color.scss
View file @ 9dc4b0c0
......@@ -5,4 +5,5 @@ $menu-list: #232021;
$about-bg: #dfdfdf;
$grey-text: #727272;
$footer: #333333;
$bg-slider: #c4c4c4;
\ No newline at end of file
$bg-slider: #c4c4c4;
$dark-text: #323232;
\ No newline at end of file
src/template/breadcrumb/index.html 0 → 100644
View file @ 9dc4b0c0
<div class="breadcrumb">
<div class="wrapper breadcrumb__wrapper">
<ul class="breadcrumb__list" itemscope="" itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="breadcrumb__item">
<a itemprop="item" href="/" class="breadcrumb__link">
<span itemprop="name">Главная</span>
<meta itemprop="position" content="1">
</a>
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="breadcrumb__item">
<a itemprop="item" href="/catalog/" class="breadcrumb__link">
<span itemprop="name">Каталог техники Bobcat</span>
<meta itemprop="position" content="2">
</a>
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="breadcrumb__item">
<a itemprop="item" href="/catalog/" class="breadcrumb__link">
<span itemprop="name">Колесные мини-погрузчики</span>
<meta itemprop="position" content="3">
</a>
</li>
</ul>
</div>
</div>
\ No newline at end of file
src/template/catalog-description/index.html 0 → 100644
View file @ 9dc4b0c0
<div class="catalog-desc about-main">
<div class="wrapper catalog-desc__wrapper about-main__wrapper">
<div class="catalog-desc__content about-main__content">
<img src="img/about-main.png" class="catalog-desc__img about-main__img">
<div class="catalog-desc__text about-main__text">
<p>Компания: Основана в Северной Дакоте, ведет деятельность по всему миру
Компания Bobcat лидирует в сферах разработки, производства, продвижения и реализации компактного оборудования для строительства, подрядных услуг, ландшафтного дизайна, сельского хозяйства, обслуживания дорог, коммунального хозяйства, промышленности и горной добычи. Мы стремимся помогать нашим заказчикам делать работу рационально и эффективно.
Наша компания глубоко укоренилась в Северной Дакоте – она была здесь образ
ована в далеком 1947 году. В настоящее время компания владеет тремя заводами в Северной Дакоте и является крупнейшим производителем этого штата. Кроме того, заводы Bobcat расположены во Франции, Чешской Республике и Китае.
<br><br>
Bobcat входит в группу компаний Doosan. Корпорация Doosan является мировым лидером в производстве строительной техники, энергетического оборудования, систем водоснабжения, двигателей и предоставлении инженерных решений заказчикам на протяжении более ста лет.
<br><br>
В 2017 году представительство компании Bobcat в регионе Европы, Ближнего Востока и Африки переместили</p>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/template/catalog-filter/index.html
View file @ 9dc4b0c0
......@@ -10,6 +10,7 @@
<input type="text" class="filter__slider-min">
<p>min 10</p>
</div>
<div class="filter-slider__line"></div>
<div class="filter-slider__input">
<input type="text" class="filter__slider-max">
<p>max 100</p>
......@@ -26,6 +27,7 @@
<input type="text" class="filter__slider-min">
<p>min 10</p>
</div>
<div class="filter-slider__line"></div>
<div class="filter-slider__input">
<input type="text" class="filter__slider-max">
<p>max 100</p>
......@@ -42,6 +44,7 @@
<input type="text" class="filter__slider-min">
<p>min 10</p>
</div>
<div class="filter-slider__line"></div>
<div class="filter-slider__input">
<input type="text" class="filter__slider-max">
<p>max 100</p>
......@@ -49,7 +52,16 @@
</div>
</div>
</li>
<li class="filter__item"></li>
<li class="filter__item">
<div class="filter__slider-title">Грузоподъемность, кг</div>
<label><input type="checkbox">Вертикальный</label>
<label><input type="checkbox">Радиальный</label>
</li>
</ul>
<ul class="filter__btns-list">
<li class="filter__btns-item"><button class="filter__btn fitter__btn-apply">Применить</button></li>
<li class="filter__btns-item"><button class="filter__btn fitter__btn-reset">Сбросить</button></li>
</ul>
</div>
<div class="filter__dashed"></div>
</div>
\ No newline at end of file
src/template/catalog-products-list/index.html 0 → 100644
View file @ 9dc4b0c0
<div class="products-list">
<div class="wrapper products-list__wrapper">
<h1 class="h2-line h2__products-list">Колесные мини-погрузчики</h1>
<ul class="products-list__list">
<li class="product-item">
<a href="#">
<div class="product-item__bg">
<p class="product-item__model">Bobcat<br>S530</p>
</div>
<img class="product-item__img" src="img/bobcat.png">
</a>
</li>
<li class="product-item">
<a href="#">
<div class="product-item__bg">
<p class="product-item__model">Bobcat<br>S530</p>
</div>
<img class="product-item__img" src="img/bobcat.png">
</a>
</li>
<li class="product-item">
<a href="#">
<div class="product-item__bg">
<p class="product-item__model">Bobcat<br>S530</p>
</div>
<img class="product-item__img" src="img/bobcat.png">
</a>
</li>
<li class="product-item">
<a href="#">
<div class="product-item__bg">
<p class="product-item__model">Bobcat<br>S530</p>
</div>
<img class="product-item__img" src="img/bobcat.png">
</a>
</li>
<li class="product-item">
<a href="#">
<div class="product-item__bg">
<p class="product-item__model">Bobcat<br>S530</p>
</div>
<img class="product-item__img" src="img/bobcat.png">
</a>
</li>
<li class="product-item">
<a href="#">
<div class="product-item__bg">
<p class="product-item__model">Bobcat<br>S530</p>
</div>
<img class="product-item__img" src="img/bobcat.png">
</a>
</li>
<li class="product-item">
<a href="#">
<div class="product-item__bg">
<p class="product-item__model">Bobcat<br>S530</p>
</div>
<img class="product-item__img" src="img/bobcat.png">
</a>
</li>
<li class="product-item">
<a href="#">
<div class="product-item__bg">
<p class="product-item__model">Bobcat<br>S530</p>
</div>
<img class="product-item__img" src="img/bobcat.png">
</a>
</li>
</ul>
</div>
</div>
\ No newline at end of file
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