Skip to content

Commit 128fdb2

Browse files
ElveeCElveeC
committed
feat: add top-projects slider, section styles
1 parent 74ab51c commit 128fdb2

7 files changed

Lines changed: 244 additions & 49 deletions

File tree

‎source/index.html‎

Lines changed: 77 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -157,9 +157,9 @@ <h3 class="visually-hidden">Контакты</h3>
157157
</div>
158158
</section>
159159

160-
<section class="portfolio">
160+
<section class="portfolio section">
161161
<div class="portfolio__inner-top">
162-
<h2 class="portfolio__title">Проекты</h2>
162+
<h2 class="section__title">Проекты</h2>
163163
<div class="portfolio__description-wrapper">
164164
<h3 class="portfolio__description-title">Аналитика, брендинг<br>и разработка для B2B</h3>
165165
<p class="portfolio__description portfolio__description--upper">Only.digital — агентство с&nbsp;фокусом
@@ -192,7 +192,7 @@ <h3 class="portfolio__description-title">Аналитика, брендинг<br
192192
</picture>
193193
</div>
194194
<h4 class="portfolio__card-title">Сибур</h4>
195-
<p class="portfolio__card-descrition">3D, Анимация, Production, Web-design</p>
195+
<p class="portfolio__card-description">3D, Анимация, Production, Web-design</p>
196196
</li>
197197
<li class="portfolio__item">
198198
<div class="portfolio__img-wrapper">
@@ -214,7 +214,7 @@ <h4 class="portfolio__card-title">Сибур</h4>
214214
</div>
215215

216216
<h4 class="portfolio__card-title">MR group</h4>
217-
<p class="portfolio__card-descrition">3D, Анимация, Production, Web-design</p>
217+
<p class="portfolio__card-description">3D, Анимация, Production, Web-design</p>
218218
</li>
219219
<li class="portfolio__item">
220220
<div class="portfolio__img-wrapper">
@@ -235,7 +235,7 @@ <h4 class="portfolio__card-title">MR group</h4>
235235
</picture>
236236
</div>
237237
<h4 class="portfolio__card-title">Северсталь</h4>
238-
<p class="portfolio__card-descrition">3D, Анимация, Production, Web-design</p>
238+
<p class="portfolio__card-description">3D, Анимация, Production, Web-design</p>
239239
</li>
240240
<li class="portfolio__item">
241241
<div class="portfolio__img-wrapper">
@@ -256,7 +256,7 @@ <h4 class="portfolio__card-title">Северсталь</h4>
256256
</picture>
257257
</div>
258258
<h4 class="portfolio__card-title">WHOOSH</h4>
259-
<p class="portfolio__card-descrition">3D, Анимация, Production, Web-design</p>
259+
<p class="portfolio__card-description">3D, Анимация, Production, Web-design</p>
260260
</li>
261261
<li class="portfolio__item">
262262
<div class="portfolio__img-wrapper">
@@ -277,7 +277,7 @@ <h4 class="portfolio__card-title">WHOOSH</h4>
277277
</picture>
278278
</div>
279279
<h4 class="portfolio__card-title">Сайт R&D-центра НЛМК</h4>
280-
<p class="portfolio__card-descrition">3D, Анимация, Production, Web-design</p>
280+
<p class="portfolio__card-description">3D, Анимация, Production, Web-design</p>
281281
</li>
282282
<li class="portfolio__item">
283283
<div class="portfolio__img-wrapper">
@@ -298,7 +298,7 @@ <h4 class="portfolio__card-title">Сайт R&D-центра НЛМК</h4>
298298
</picture>
299299
</div>
300300
<h4 class="portfolio__card-title">Новые академики</h4>
301-
<p class="portfolio__card-descrition">3D, Анимация, Production, Web-design</p>
301+
<p class="portfolio__card-description">3D, Анимация, Production, Web-design</p>
302302
</li>
303303
</ul>
304304

@@ -312,23 +312,23 @@ <h4 class="portfolio__group-title">Крупнейшие компании</h4>
312312
srcset="images/sibur-mob@2x.jpg 2x" alt="Сибур.">
313313
</div>
314314
<h5 class="portfolio__card-title">Сибур</h5>
315-
<p class="portfolio__card-descrition">3D, Анимация, Production, Web-design</p>
315+
<p class="portfolio__card-description">3D, Анимация, Production, Web-design</p>
316316
</li>
317317
<li class="portfolio__item">
318318
<div class="portfolio__img-wrapper">
319319
<img class="portfolio__image" src="images/mr-mob.jpg" width="315" height="315"
320320
srcset="images/mr-mob@2x.jpg 2x" alt="MR group.">
321321
</div>
322322
<h5 class="portfolio__card-title">MR group</h5>
323-
<p class="portfolio__card-descrition">3D, Анимация, Production, Web-design</p>
323+
<p class="portfolio__card-description">3D, Анимация, Production, Web-design</p>
324324
</li>
325325
<li class="portfolio__item">
326326
<div class="portfolio__img-wrapper">
327327
<img class="portfolio__image" src="images/severstal-mob.jpg" width="315" height="315"
328328
srcset="images/severstal-mob@2x.jpg 2x" alt="Северсталь.">
329329
</div>
330330
<h5 class="portfolio__card-title">Северсталь</h5>
331-
<p class="portfolio__card-descrition">3D, Анимация, Production, Web-design</p>
331+
<p class="portfolio__card-description">3D, Анимация, Production, Web-design</p>
332332
</li>
333333
</ul>
334334
</li>
@@ -341,31 +341,92 @@ <h4 class="portfolio__group-title">Девелоперы</h4>
341341
srcset="images/whoosh-mob@2x.jpg 2x" alt="Whoosh.">
342342
</div>
343343
<h5 class="portfolio__card-title">WHOOSH</h5>
344-
<p class="portfolio__card-descrition">3D, Анимация, Production, Web-design</p>
344+
<p class="portfolio__card-description">3D, Анимация, Production, Web-design</p>
345345
</li>
346346
<li class="portfolio__item">
347347
<div class="portfolio__img-wrapper">
348348
<img class="portfolio__image portfolio__image-1" src="images/rd-mob.jpg" width="315" height="315"
349349
srcset="images/rd-mob@2x.jpg 2x" alt="R&D-центр НЛМК.">
350350
</div>
351351
<h5 class="portfolio__card-title">Сайт R&D-центра НЛМК</h5>
352-
<p class="portfolio__card-descrition">3D, Анимация, Production, Web-design</p>
352+
<p class="portfolio__card-description">3D, Анимация, Production, Web-design</p>
353353
</li>
354354
<li class="portfolio__item">
355355
<div class="portfolio__img-wrapper">
356356
<img class="portfolio__image" src="images/academics-mob.jpg" width="315" height="315"
357357
srcset="images/academics-mob@2x.jpg 2x" alt="Новые академики.">
358358
</div>
359359
<h5 class="portfolio__card-title">Новые академики</h5>
360-
<p class="portfolio__card-descrition">3D, Анимация, Production, Web-design</p>
360+
<p class="portfolio__card-description">3D, Анимация, Production, Web-design</p>
361361
</li>
362362
</ul>
363363
</li>
364364
</ul>
365365
</section>
366366

367-
<section class="banner">
368-
<h2 class="visually-hidden">Услуги</h2>
367+
<section class="top-projects section">
368+
<div class="top-projects__inner-top">
369+
<h2 class="section__title">Крупные проекты</h2>
370+
<div class="top-projects__description-wrapper">
371+
<h3 class="top-projects__description-title">Поддерживаем и развиваем долгосрочное сотрудничество</h3>
372+
</div>
373+
</div>
374+
375+
<button class="top-projects__button top-projects__button--back" type="button">Назад</button>
376+
<button class="top-projects__button top-projects__button--next" type="button">Вперед</button>
377+
378+
<div class="top-projects__list-wrapper">
379+
<ul class="top-projects__list">
380+
<li class="top-projects__item">
381+
<p class="top-projects__card-category">Промышленность</p>
382+
<h4 class="top-projects__card-title">Северсталь</h4>
383+
<p class="top-projects__card-description">Адаптация нового брендинга для digital</p>
384+
</li>
385+
386+
<li class="top-projects__item">
387+
<p class="top-projects__card-category">Промышленность</p>
388+
<h4 class="top-projects__card-title">Сибур</h4>
389+
<p class="top-projects__card-description">Адаптация нового брендинга для digital</p>
390+
</li>
391+
392+
<li class="top-projects__item">
393+
<p class="top-projects__card-category">Недвижимость</p>
394+
<h4 class="top-projects__card-title">MR Group</h4>
395+
<p class="top-projects__card-description">3D, Анимация, Production, Web-design</p>
396+
</li>
397+
398+
<li class="top-projects__item">
399+
<p class="top-projects__card-category">Недвижимость</p>
400+
<h4 class="top-projects__card-title">Главстрой</h4>
401+
<p class="top-projects__card-description">3D, Анимация, Production, Web-design</p>
402+
</li>
403+
404+
<li class="top-projects__item">
405+
<p class="top-projects__card-category">Промышленность</p>
406+
<h4 class="top-projects__card-title">Северсталь</h4>
407+
<p class="top-projects__card-description">Адаптация нового брендинга для digital</p>
408+
</li>
409+
410+
<li class="top-projects__item">
411+
<p class="top-projects__card-category">Промышленность</p>
412+
<h4 class="top-projects__card-title">Сибур</h4>
413+
<p class="top-projects__card-description">Адаптация нового брендинга для digital</p>
414+
</li>
415+
416+
<li class="top-projects__item">
417+
<p class="top-projects__card-category">Недвижимость</p>
418+
<h4 class="top-projects__card-title">MR Group</h4>
419+
<p class="top-projects__card-description">3D, Анимация, Production, Web-design</p>
420+
</li>
421+
422+
<li class="top-projects__item">
423+
<p class="top-projects__card-category">Недвижимость</p>
424+
<h4 class="top-projects__card-title">Главстрой</h4>
425+
<p class="top-projects__card-description">3D, Анимация, Production, Web-design</p>
426+
</li>
427+
428+
</ul>
429+
</div>
369430
</section>
370431
</main>
371432

‎source/scripts/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
/* в этот файл добавляет скрипты*/
1+
import { initProjectsSlider } from './projects-slider';
2+
3+
initProjectsSlider();

‎source/scripts/projects-slider.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
const GAP_DESKTOP = 20;
2+
const GAP_COUNT_DESKTOP = 3;
3+
const PADDING_LARGE = 30;
4+
const PADDING_MEDIUM = 20;
5+
const PADDING_COUNT = 2;
6+
const DESKTOP_STANDARD_WIDTH = 1439;
7+
const TABLET_MAX_WIDTH = 1279;
8+
const ITEM_WIDTH_MOB = 315;
9+
const ITEMS_PER_PAGE_COUNT = 4;
10+
11+
const nextButton = document.querySelector('.top-projects__button--next');
12+
const backButton = document.querySelector('.top-projects__button--back');
13+
const list = document.querySelector('.top-projects__list');
14+
const items = list.querySelectorAll('.top-projects__item');
15+
16+
const windowWidth = document.body.clientWidth;
17+
18+
let currentOffset = 0;
19+
let itemWidth = ITEM_WIDTH_MOB;
20+
let activeIndex = 0;
21+
backButton.disabled = true;
22+
23+
if (windowWidth > DESKTOP_STANDARD_WIDTH) {
24+
itemWidth = Math.floor((windowWidth - GAP_DESKTOP * GAP_COUNT_DESKTOP - PADDING_LARGE * PADDING_COUNT) / ITEMS_PER_PAGE_COUNT);
25+
26+
items.forEach((item) => {
27+
item.style.width = `${itemWidth}px`;
28+
item.style.minWidth = `${itemWidth}px`;
29+
});
30+
} else if (windowWidth > TABLET_MAX_WIDTH) {
31+
itemWidth = Math.floor((windowWidth - GAP_DESKTOP * GAP_COUNT_DESKTOP - PADDING_MEDIUM * PADDING_COUNT) / ITEMS_PER_PAGE_COUNT);
32+
33+
items.forEach((item) => {
34+
item.style.width = `${itemWidth}px`;
35+
item.style.minWidth = `${itemWidth}px`;
36+
});
37+
}
38+
39+
const handleNextButtonClick = () => {
40+
currentOffset = currentOffset - itemWidth - GAP_DESKTOP;
41+
list.style.transform = `translateX(${currentOffset}px)`;
42+
activeIndex += 1;
43+
44+
if (activeIndex !== 0) {
45+
backButton.disabled = false;
46+
}
47+
if (activeIndex === items.length - ITEMS_PER_PAGE_COUNT) {
48+
nextButton.disabled = true;
49+
}
50+
};
51+
52+
const handleBackButtonClick = () => {
53+
currentOffset = currentOffset + itemWidth + GAP_DESKTOP;
54+
list.style.transform = `translateX(${currentOffset}px)`;
55+
activeIndex -= 1;
56+
57+
if (activeIndex !== items.length - ITEMS_PER_PAGE_COUNT) {
58+
nextButton.disabled = false;
59+
}
60+
61+
if (activeIndex === 0) {
62+
backButton.disabled = true;
63+
}
64+
};
65+
66+
const initProjectsSlider = () => {
67+
nextButton.addEventListener('click', handleNextButtonClick);
68+
backButton.addEventListener('click', handleBackButtonClick);
69+
};
70+
71+
export { initProjectsSlider };

‎source/styles/blocks/portfolio.scss‎

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,5 @@
11
@import "../common/mixins.scss";
22

3-
.portfolio {
4-
padding: 160px 30px;
5-
6-
@media (max-width: $vp-1919) {
7-
padding: 130px 30px;
8-
}
9-
10-
@media (max-width: $vp-1439) {
11-
padding: 100px 30px;
12-
}
13-
14-
@media (max-width: $vp-1279) {
15-
padding: 80px 20px;
16-
}
17-
}
18-
193
.portfolio__inner-top {
204
margin-bottom: 100px;
215
display: grid;
@@ -39,21 +23,6 @@
3923
}
4024
}
4125

42-
.portfolio__title {
43-
margin: 0;
44-
font-size: 16px;
45-
font-weight: 500;
46-
text-transform: lowercase;
47-
48-
@media (max-width: $vp-1439) {
49-
font-size: 13px;
50-
}
51-
52-
@media (max-width: $vp-1279) {
53-
font-size: 12px;
54-
}
55-
}
56-
5726
.portfolio__description-wrapper {
5827
padding-right: 200px;
5928

@@ -118,6 +87,7 @@
11887
display: flex;
11988
overflow-x: scroll;
12089
scrollbar-width: none;
90+
column-gap: 10px;
12191
}
12292

12393
&--big {
@@ -178,7 +148,7 @@
178148
line-height: 125%;
179149
}
180150

181-
.portfolio__card-descrition {
151+
.portfolio__card-description {
182152
padding: 0 20px;
183153
}
184154

‎source/styles/blocks/section.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
.section {
3+
padding: 800px 30px;
4+
5+
@media (max-width: $vp-1919) {
6+
padding: 65px 30px;
7+
}
8+
9+
@media (max-width: $vp-1439) {
10+
padding: 50px 20px;
11+
}
12+
13+
@media (max-width: $vp-1279) {
14+
padding: 40px 15px;
15+
}
16+
17+
@media (max-width: $vp-767) {
18+
padding: 30px 10px;
19+
}
20+
}
21+
22+
.section__title {
23+
margin: 0;
24+
font-size: 16px;
25+
font-weight: 500;
26+
text-transform: lowercase;
27+
28+
@media (max-width: $vp-1439) {
29+
font-size: 13px;
30+
}
31+
32+
@media (max-width: $vp-1279) {
33+
font-size: 12px;
34+
}
35+
}

0 commit comments

Comments
 (0)