Skip to content

A
ads
Commit 8f5d23b3 authored by IrinaPronina's avatar IrinaPronina
Browse files
Options

first out

parent 5198d38b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3072 additions and 263 deletions
src/blocks/about-solutions/about-solutions.pug 0 → 100644
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (about-solutions)
mixin about-solutions(text, mods)
//- Принимает:
//- text {string} - текст
//- mods {string} - список модификаторов
//- Вызов:
+about-solutions('Текст', 'some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' about-solutions--' + modsList[i].trim();
}
}
section.about-solutions
.about-solutions__inner.container
+text-block()
+best()
+task()
+apply()
+projects()
+partners()
+more()
src/blocks/about-solutions/about-solutions.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока about-solutions, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.about-solutions {
$block-name: &; // #{$block-name}__element
padding: 52px 0 52px;
background-color: $white;
@media (min-width: $screen-xl) {
background-image: url("../img/blum.svg");
background-repeat: no-repeat;
background-color: $white;
background-position: top 80px right;
background-size: 1074px;
}
@media (min-width: $screen-sm) {
padding: 80px 0 80px;
}
.partners {
margin-bottom: 52px;
@media (min-width: $screen-lg) {
margin-bottom: 62px;
}
}
}
\ No newline at end of file
src/blocks/about/about.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока about, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.about {
$block-name: &; // #{$block-name}__element
&__solutions-grid__item.solutions-grid__item {
height: 200px;
}
&__apply {
display: none;
padding-bottom: 120px;
margin-top: 80px;
z-index: -1;
@media (min-width: $screen-xl) {
display: block;
padding-bottom: 0px;
margin-top: 160px;
}
// @media (min-width: $screen-lg) {
// margin-top: 166px;
// padding-bottom: 108px;
// }
// @media (min-width: $screen-md) {
// margin-top: 100px;
// }
// @media (min-width: $screen-sm) {
// margin-top: 80px;
// padding-bottom: 24px;
// }
}
.solutions__title {
margin-bottom: 40px;
}
&__licence {
@media (min-width: $screen-xl) {
margin-bottom: 80px;
}
}
&__solutions-block {
display: none;
@media (min-width: $screen-xl) {
display: block;
}
}
&.solutions {
margin-bottom: 80px;
@media (max-width: ($screen-xl - 1)) {
margin-bottom: 80px;
}
}
&.decor:after {
bottom: -100px;
}
&__apply {
.apply__item{
@media (max-width: ($screen-xxl - 1)){
flex: 0 0 50%;
margin-bottom: 20px;
}
}
}
}
\ No newline at end of file
src/blocks/apply/apply.pug 0 → 100644
View file @ 8f5d23b3
This diff is collapsed.
src/blocks/apply/apply.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока apply, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.apply {
$block-name: &; // #{$block-name}__element
margin-bottom: 64px;
&__title {
margin-bottom: 56px;
}
&__list {
list-style: none;
padding: 0;
filter: drop-shadow(0px 8px 32px rgba(0, 0, 0, 0.24));
@media (min-width: $screen-lg) {
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
}
}
&__item {
margin-bottom: 16px;
@media (min-width: $screen-lg) {
padding: 0 20px;
flex: 0 0 25%;
margin-bottom: 0;
}
}
&__body {
background: linear-gradient(0deg, #005F82, #005F82);
display: flex;
padding: 18px 16px;
align-items: center;
border-radius: 16px;
@media (min-width: $screen-lg) {
padding: 36px 32px;
}
}
&__icon {
margin-right: 24px;
width: 48px;
height: 48px;
@media (min-width: $screen-lg) {
width: 60px;
height: 60px;
}
}
&__text {
color: $white;
font-size: 17px;
line-height: 1.3;
letter-spacing: 0.05em;
@media (min-width: $screen-lg) {
font-size: 20px;
}
}
}
\ No newline at end of file
src/blocks/best/best.pug 0 → 100644
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (best)
mixin best(text, mods)
//- Принимает:
//- text {string} - текст
//- mods {string} - список модификаторов
//- Вызов:
+best('Текст', 'some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' best--' + modsList[i].trim();
}
}
section.best(class=allMods)&attributes(attributes)
.best__inner.container
h2.best__title.h2-inner Преимущества
.best__about
ul.best__about-list
li.best__about-item
.best__about-body
.best__about-pic
img(src="img/logo-sq.svg" alt="Логотип").best__about-img
.best__about-content
.best__about-title
h3.best__about-h3.h5 Наглядная экономика проектов
.best__about-subtitle
p.best__about-text.text Автоматизация расчета экономической эффективности
li.best__about-item
.best__about-body
.best__about-pic
img(src="img/logo-sq.svg" alt="Логотип").best__about-img
.best__about-content
.best__about-title
h3.best__about-h3.h5 Единое пространство
.best__about-subtitle
p.best__about-text.text Единое пространство для совместной работы подразделений
li.best__about-item
.best__about-body
.best__about-pic
img(src="img/logo-sq.svg" alt="Логотип").best__about-img
.best__about-content
.best__about-title
h3.best__about-h3.h5 Эффективное управление данными
.best__about-subtitle
p.best__about-text.text Контроль полноты исходных данных
li.best__about-item
.best__about-body
.best__about-pic
img(src="img/logo-sq.svg" alt="Логотип").best__about-img
.best__about-content
.best__about-title
h3.best__about-h3.h5 Повышение эффективности
.best__about-subtitle
p.best__about-text.text Сокращение трудозатрат на ведение реестра
.best__screen
ul.best__screen-list
li.best__screen-item
img(src="img/screen1.jpg", alt="Статистика")
li.best__screen-item
img(src="img/screen2.jpg", alt="Статистика")
li.best__screen-item
img(src="img/screen3.jpg", alt="Статистика")
\ No newline at end of file
src/blocks/best/best.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока best, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.best {
$block-name: &; // #{$block-name}__element
@media (min-width: $screen-lg) {
margin-bottom: 46px;
}
&__title {
margin: 0;
margin-bottom: 32px;
@media (min-width: $screen-lg) {
margin-bottom: 56px;
}
}
&__about {
margin-bottom: 30px;
@media (min-width: $screen-lg) {
margin-bottom: 24px;
}
}
&__about-list {
padding: 0;
list-style: none;
@media (min-width: $screen-lg) {
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
}
}
&__about-item {
margin-bottom: 8px;
@media (min-width: $screen-lg) {
flex: 0 0 25%;
padding: 0 20px;
margin-bottom: 0;
}
}
&__about-body {
display: flex;
justify-content: space-between;
@media (min-width: $screen-lg) {
flex: 0 0 25%;
flex-direction: column;
justify-content: start;
}
}
&__about-pic {
width: 48px;
height: 48px;
@media (min-width: $screen-lg) {
width: 64px;
height: 64px;
margin-bottom: 24px;
}
}
&__about-img {
height: 100%;
object-fit: cover;
}
&__about-content {
width: calc(100% - 64px);
display: flex;
flex-direction: column;
@media (min-width: $screen-lg) {
flex: 1 0 auto;
width: 100%;
}
}
&__about-title {
display: flex;
margin-bottom: 8px;
@media (min-width: $screen-lg) {
flex: 1 0 auto;
}
}
&__about-h3 {
margin: 0;
}
&__about-subtitle {
display: flex;
@media (min-width: $screen-lg) {
flex: 1 0 auto;
}
}
&__screen-list {
padding: 0;
list-style: none;
margin-bottom: 64px;
@media (min-width: $screen-lg) {
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
}
}
&__screen-item {
margin-bottom: 24px;
@media (min-width: $screen-lg) {
padding: 20px;
flex: 0 0 33.333%;
display: flex;
margin-bottom: 0;
}
}
}
\ No newline at end of file
src/blocks/branch/branch.pug
View file @ 8f5d23b3
...@@ -25,17 +25,21 @@ mixin branch(text, mods) ...@@ -25,17 +25,21 @@ mixin branch(text, mods)
.branch__top(style="background-image: url(img/branch1.jpg);") .branch__top(style="background-image: url(img/branch1.jpg);")
a(href="javascript:void(0);").branch__link a(href="javascript:void(0);").branch__link
.branch__item-body .branch__item-body
h3.branch__item-title.h3 Цифровизация производства h3.branch__item-title Цифровизация производства
ul.branch__item-bottom ul.branch__item-bottom
li.branch__item-subtitle.h5 Цифровые двойники li.branch__item-item
li.branch__item-subtitle.h5 Достоверность данных span.branch__item-subtitle.h5 Цифровые двойники
li.branch__item-subtitle.h5 Проактивные приложения li.branch__item-item
li.branch__item-subtitle.h5 Распределённая командная работа и цифровой рабочий span.branch__item-subtitle.h5 Достоверность данных
li.branch__item-item
span.branch__item-subtitle.h5 Проактивные приложения
li.branch__item-item
span.branch__item-subtitle.h5 Распределённая командная работа и цифровой рабочий
ul.branch__grid ul.branch__grid
.branch__item(style="background-image: url(img/branch2.jpg);") .branch__item(style="background-image: url(img/branch2.jpg);")
a(href="javascript:void(0);").branch__link a(href="javascript:void(0);").branch__link
.branch__body .branch__body
h3.branch__title-h3.h3 Нефть и газ h3.branch__title-h3 Нефть и газ
ul.branch__bottom ul.branch__bottom
li.branch__subtitle.h5 Цифровые двойники li.branch__subtitle.h5 Цифровые двойники
li.branch__subtitle.h5 Цифровое бурение li.branch__subtitle.h5 Цифровое бурение
...@@ -45,7 +49,7 @@ mixin branch(text, mods) ...@@ -45,7 +49,7 @@ mixin branch(text, mods)
.branch__item(style="background-image: url(img/branch3.jpg);") .branch__item(style="background-image: url(img/branch3.jpg);")
a(href="javascript:void(0);").branch__link a(href="javascript:void(0);").branch__link
.branch__body .branch__body
h3.branch__title-h3.h3 Энергетика h3.branch__title-h3 Энергетика
ul.branch__bottom ul.branch__bottom
li.branch__subtitle.h5 Генерация li.branch__subtitle.h5 Генерация
li.branch__subtitle.h5 Ресурсоснабжающие организации и сбыт li.branch__subtitle.h5 Ресурсоснабжающие организации и сбыт
...@@ -53,7 +57,7 @@ mixin branch(text, mods) ...@@ -53,7 +57,7 @@ mixin branch(text, mods)
.branch__item(style="background-image: url(img/branch4.png);") .branch__item(style="background-image: url(img/branch4.png);")
a(href="javascript:void(0);").branch__link a(href="javascript:void(0);").branch__link
.branch__body .branch__body
h3.branch__title-h3.h3 Промышленное производство h3.branch__title-h3 Промышленное производство
ul.branch__bottom ul.branch__bottom
li.branch__subtitle.h5 Цифровые двойники li.branch__subtitle.h5 Цифровые двойники
li.branch__subtitle.h5 Достоверность данных li.branch__subtitle.h5 Достоверность данных
......
src/blocks/branch/branch.scss
View file @ 8f5d23b3
...@@ -5,11 +5,33 @@ ...@@ -5,11 +5,33 @@
.branch { .branch {
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
padding: 148px 0; padding: 46px 0;
margin-bottom: 48px;
@media (min-width: $screen-xxl) {
padding: 148px 0;
}
@media (min-width: $screen-xl) {
padding: 108px 0;
}
@media (min-width: $screen-lg) {
padding: 100px 0;
}
@media (min-width: $screen-sm) {
padding: 60px 0;
}
&__title { &__title {
color: $white; color: $white;
margin: 0 0 48px; margin: 0 0 30px;
@media (min-width: $screen-lg) {
margin: 0 0 48px;
}
} }
&__top { &__top {
...@@ -23,10 +45,14 @@ ...@@ -23,10 +45,14 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
@media (min-width: $screen-xl) { @media (min-width: $screen-xxl) {
margin-bottom: 40px; margin-bottom: 40px;
} }
@media (min-width: $screen-xl) {
margin-bottom: 32px;
}
&:before { &:before {
content: ''; content: '';
...@@ -78,29 +104,44 @@ ...@@ -78,29 +104,44 @@
} }
&__item-body { &__item-body {
padding: 48px; padding: 24px 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
}
&__item-title {
margin: 0 0 32px;
text-align: center;
@media (min-width: $screen-xl) { @media (min-width: $screen-xxl) {
margin: 0 0 38px; padding: 48px;
}
@media (min-width: $screen-lg) {
padding: 32px;
align-items: center;
} }
} }
&__item-subtitle { &__item-title {
padding: 0; font: 18px $ff-i-b;
position: relative; font-weight: 700;
margin: 0;
@media (min-width: $screen-xxl) {
font-size: 36px;
margin: 0 0 40px;
}
@media (min-width: $screen-lg) { @media (min-width: $screen-lg) {
margin-right: 64px; font-size: 30px;
text-align: center;
margin: 0 0 32px;
} }
}
&__item-item {
padding: 0;
position: relative;
display: flex;
justify-content: center;
width: 100%;
&:first-child::after, &:first-child::after,
...@@ -123,6 +164,11 @@ ...@@ -123,6 +164,11 @@
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 42px; margin-bottom: 42px;
width: 23%;
@media (min-width: $screen-xl) {
width: 28%;
}
@media (min-width: $screen-lg) { @media (min-width: $screen-lg) {
margin-bottom: 16px; margin-bottom: 16px;
...@@ -130,20 +176,23 @@ ...@@ -130,20 +176,23 @@
} }
} }
&__item-subtitle {
text-align: center;
}
&__item-bottom { &__item-bottom {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center;
max-width: 1000px;
list-style: none; list-style: none;
display: none;
@media (min-width: $screen-lg) { @media (min-width: $screen-lg) {
flex-direction: row; display: flex;
flex-wrap: wrap;
justify-content: space-between;
} }
} }
&__grid { &__grid {
...@@ -153,9 +202,13 @@ ...@@ -153,9 +202,13 @@
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
gap: 16px; gap: 16px;
@media (min-width: $screen-xxl) {
gap: 40px;
}
@media (min-width: $screen-xl) { @media (min-width: $screen-xl) {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 40px; gap: 16px;
} }
} }
...@@ -171,7 +224,7 @@ ...@@ -171,7 +224,7 @@
box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.24); box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.24);
z-index: 1; z-index: 1;
@media (min-width: $screen-xl) { @media (min-width: $screen-xxl) {
aspect-ratio: 1/1; aspect-ratio: 1/1;
} }
...@@ -281,15 +334,19 @@ ...@@ -281,15 +334,19 @@
&__body { &__body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 32px; padding: 24px 16px;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
@media (min-width: $screen-xl) { @media (min-width: $screen-xxl) {
padding: 48px; padding: 48px;
} }
@media (min-width: $screen-lg) {
padding: 32px;
}
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
...@@ -307,17 +364,36 @@ ...@@ -307,17 +364,36 @@
} }
&__title-h3 { &__title-h3 {
font: 18px $ff-i-b;
font-weight: 700;
margin: 0;
margin: 0 0 32px; @media (min-width: $screen-xxl) {
font-size: 36px;
min-height: 86px;
}
@media (min-width: $screen-xl) { @media (min-width: $screen-xl) {
min-height: 86px; min-height: 64px;
margin: 0 0 40px; margin: 0 0 40px;
} }
@media (min-width: $screen-lg) {
font-size: 28px;
margin: 0 0 32px;
}
} }
&__bottom { &__bottom {
list-style: disc; list-style: disc;
display: none;
@media (min-width: $screen-xxl) {
padding-left: 20px;
}
@media (min-width: $screen-lg) {
display: block;
}
} }
&__subtitle { &__subtitle {
......
src/blocks/breadcrumbs/breadcrumbs.pug
View file @ 8f5d23b3
...@@ -19,7 +19,7 @@ mixin breadcrumbs(mods) ...@@ -19,7 +19,7 @@ mixin breadcrumbs(mods)
} }
} }
ul.breadcrumbs(class=allMods, aria-label='Breadcrumb', role='navigation')&attributes(attributes) ul.breadcrumbs(class=allMods, aria-label='Breadcrumb', role='navigation')&attributes(attributes).container
block block
......
src/blocks/breadcrumbs/breadcrumbs.scss
View file @ 8f5d23b3
...@@ -7,29 +7,48 @@ ...@@ -7,29 +7,48 @@
margin-top: $typo-margin-vertical; margin-top: $typo-margin-vertical;
margin-bottom: $typo-margin-vertical; margin-bottom: $typo-margin-vertical;
padding: 0; padding: 0;
color: $text-color; color: $white;
font: 13px/1.2 $ff-i-r;
letter-spacing: 0.05em;
@media (min-width: $screen-xxl) {
font-size: 18px;
}
@media (min-width: $screen-xl) {
font-size: 15px;
margin-top: 0;
margin-bottom: 0;
}
a { a {
color: $text-color; color: $white;
opacity: 1;
text-decoration: none; text-decoration: none;
transition: all $transition-time;
&:hover, &:hover,
&:focus { &:focus {
color: $text-color; color: $main-dark;
text-decoration: none; text-decoration: none;
} }
} }
span {
opacity: 0.5;
}
&__item { &__item {
display: inline-block; display: inline-block;
margin-right: 0.6em; margin-right: 0.6em;
white-space: nowrap;
&:not(:last-child):after { &:not(:last-child):after {
content: '>'; content: '|';
display: inline-block; display: inline-block;
margin-left: 0.8em; margin-left: 0.8em;
color: $gray; color: $white;
} }
} }
} }
\ No newline at end of file
src/blocks/download/download.pug 0 → 100644
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (download)
mixin download(text, mods)
//- Принимает:
//- text {string} - текст
//- mods {string} - список модификаторов
//- Вызов:
+download('Текст', 'some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' download--' + modsList[i].trim();
}
}
ul.download
li.download__item
.download__body
.download__pic
svg(width='32' height='34' viewBox='0 0 32 34' fill='none' xmlns='http://www.w3.org/2000/svg')
path(d='M28.3346 33H4.33333C3.97971 33 3.64057 32.8595 3.39052 32.6095C3.14048 32.3594 3 32.0203 3 31.6667V2.33333C3 1.97971 3.14048 1.64057 3.39052 1.39052C3.64057 1.14048 3.97971 1 4.33333 1H20.3346L29.668 10.3333V31.6667C29.668 31.8418 29.6335 32.0151 29.5665 32.1769C29.4995 32.3387 29.4013 32.4857 29.2774 32.6095C29.1536 32.7333 29.0066 32.8315 28.8449 32.8985C28.6831 32.9655 28.5097 33 28.3346 33Z' stroke='#00BFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none')
path(d='M20.334 1V10.3333H29.6686' stroke='#00BFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none')
path(d='M11.666 21.6665L16.3327 26.3332L20.9993 21.6665' stroke='#00BFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none')
path(d='M16.334 15.6665V26.3332' stroke='#00BFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none')
.download__content
.download__title
h3.download__h3.h5 Документ №1
.download__subtitle
p.download__text.text Дополнительная информация описания документа.
+hyperlink()
li.download__item
.download__body
.download__pic
svg(width='32' height='34' viewBox='0 0 32 34' fill='none' xmlns='http://www.w3.org/2000/svg')
path(d='M28.3346 33H4.33333C3.97971 33 3.64057 32.8595 3.39052 32.6095C3.14048 32.3594 3 32.0203 3 31.6667V2.33333C3 1.97971 3.14048 1.64057 3.39052 1.39052C3.64057 1.14048 3.97971 1 4.33333 1H20.3346L29.668 10.3333V31.6667C29.668 31.8418 29.6335 32.0151 29.5665 32.1769C29.4995 32.3387 29.4013 32.4857 29.2774 32.6095C29.1536 32.7333 29.0066 32.8315 28.8449 32.8985C28.6831 32.9655 28.5097 33 28.3346 33Z' stroke='#00BFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none')
path(d='M20.334 1V10.3333H29.6686' stroke='#00BFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none')
path(d='M11.666 21.6665L16.3327 26.3332L20.9993 21.6665' stroke='#00BFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none')
path(d='M16.334 15.6665V26.3332' stroke='#00BFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none')
.download__content
.download__title
h3.download__h3.h5 Документ №1
.download__subtitle
p.download__text.text Дополнительная информация описания документа.
+hyperlink()
src/blocks/download/download.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока download, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.download {
$block-name: &; // #{$block-name}__element
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
&__item {
margin-bottom: 20px;
@media (min-width: $screen-xl) {
max-width: 440px;
margin-right: 40px;
margin-bottom: 0;
}
}
&__body {
display: flex;
}
&__pic {
width: 32px;
height: 32px;
margin-right: 20px;
svg {
width: 100%;
height: 100%;
}
}
&__content {
width: calc(100% - 52px);
@media (min-width: $screen-xl) {}
}
&__text {
margin: 0;
}
&__subtitle {
margin-bottom: 10px;
}
}
\ No newline at end of file
src/blocks/error/error.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока error, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.error {
$block-name: &; // #{$block-name}__element
&__wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
&__descr {
padding: 70px 0 40px;
text-align: center;
}
&__error {
color: $main-dark;
display: block;
margin-bottom: 16px;
}
&__text{
display: block;
margin-bottom: 40px;
}
}
\ No newline at end of file
src/blocks/hyperlink/hyperlink.pug 0 → 100644
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (hyperlink)
mixin hyperlink(text, mods)
//- Принимает:
//- text {string} - текст
//- mods {string} - список модификаторов
//- Вызов:
+hyperlink('Текст', 'some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' hyperlink--' + modsList[i].trim();
}
}
.hyperlink
a(href="" download).hyperlink__link
span.text-bold Скачать
.hyperlink__svg
svg(width='16' height='16' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg')
path(d='M14.7222 3.53111V2.324L13.8687 3.17756L4.71311 12.3331L4.70077 12.3455L4.68932 12.3586C4.65416 12.3991 4.61102 12.4318 4.56262 12.4548C4.51421 12.4778 4.46158 12.4905 4.40801 12.4922C4.35446 12.4939 4.30113 12.4845 4.25137 12.4646C4.20162 12.4446 4.15652 12.4147 4.1189 12.3765C4.08127 12.3384 4.05194 12.2928 4.03275 12.2428C4.01355 12.1928 4.0049 12.1393 4.00734 12.0858C4.00978 12.0323 4.02325 11.9798 4.04692 11.9317C4.07059 11.8837 4.10394 11.841 4.14487 11.8064L4.16101 11.7928L4.17595 11.7778L13.3137 2.63116L14.1663 1.77778H12.96H9.77778C9.67464 1.77778 9.57572 1.73681 9.50279 1.66387C9.42986 1.59094 9.38889 1.49203 9.38889 1.38889C9.38889 1.28575 9.42986 1.18683 9.50279 1.1139C9.57572 1.04097 9.67464 1 9.77778 1H15.1111C15.2143 1 15.3132 1.04097 15.3861 1.1139C15.459 1.18683 15.5 1.28575 15.5 1.38889V6.72222C15.5 6.82536 15.459 6.92428 15.3861 6.99721C15.3132 7.07014 15.2143 7.11111 15.1111 7.11111C15.008 7.11111 14.9091 7.07014 14.8361 6.99721C14.7632 6.92428 14.7222 6.82536 14.7222 6.72222V3.53111ZM1.77778 3.55556H1.27778V4.05556V14.7222V15.2222H1.77778H12.4444H12.9444V14.7222V10.2778C12.9444 10.1746 12.9854 10.0757 13.0583 10.0028C13.1313 9.92986 13.2302 9.88889 13.3333 9.88889C13.4365 9.88889 13.5354 9.92986 13.6083 10.0028C13.6813 10.0757 13.7222 10.1746 13.7222 10.2778V14.7222C13.7222 15.0611 13.5876 15.3861 13.348 15.6257C13.1083 15.8654 12.7833 16 12.4444 16H1.77778C1.43889 16 1.11388 15.8654 0.874252 15.6257C0.634623 15.3861 0.5 15.0611 0.5 14.7222V4.05556C0.5 3.35392 1.07614 2.77778 1.77778 2.77778H6.22222C6.32536 2.77778 6.42428 2.81875 6.49721 2.89168C6.57014 2.96461 6.61111 3.06353 6.61111 3.16667C6.61111 3.26981 6.57014 3.36872 6.49721 3.44165C6.42428 3.51458 6.32536 3.55556 6.22222 3.55556H1.77778Z' fill='#00BFFF' stroke='#00BFFF')
.hyperlink__size
span.hyperlink__doc PDF, 1.6 Mb
\ No newline at end of file
src/blocks/hyperlink/hyperlink.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока hyperlink, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.hyperlink {
$block-name: &; // #{$block-name}__element
display: flex;
align-items: flex-end;
&__link {
text-decoration: none;
color: $color-accent;
display: flex;
align-items: flex-end;
transition: color $transition-time;
&:hover{
color: $light-blue;
}
&:active{
color: #03ACE4;
}
}
&__svg {
padding-left: 8px;
}
&__size{
padding-left: 30px;
color: #93969E;
}
}
\ No newline at end of file
src/blocks/inner-wrapper/inner-wrapper.pug 0 → 100644
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (inner-wrapper)
mixin inner-wrapper(mods)
//- Принимает:
//- mods {string} - список модификаторов
//- Вызов:
+inner-wrapper('some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' inner-wrapper--' + modsList[i].trim();
}
}
section.inner-wrapper(class=allMods)&attributes(attributes).bottom--angled
block
mixin inner-wrapper-top(mods)
//- Принимает:
//- mods {string} - список модификаторов
//- Вызов:
+inner-wrapper__top('some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' inner-wrapper__top--' + modsList[i].trim();
}
}
.inner-wrapper__top(class=allMods)&attributes(attributes)
block
src/blocks/inner-wrapper/inner-wrapper.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока inner-wrapper, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.inner-wrapper {
$block-name: &; // #{$block-name}__element
> :last-child {
margin-bottom: 0;
padding-bottom: 0;
}
&__top {
padding: 1px 0;
background-repeat: no-repeat;
background-color: $main-dark;
background-position: center center;
background-size: cover;
@media (min-width: $screen-xxl) {
padding-top: 80px;
}
@media (min-width: $screen-xl) {
padding: 24px 0 0 0;
}
// & + *:not(.menu-vertical):not(.docs) {
// margin-top: 50px;
// @media (min-width: $screen-xxl) {
// margin-top: 94px;
// }
// @media (min-width: $screen-xl) {
// margin-top: 70px;
// }
// }
}
}
src/blocks/main-descr/main-descr.pug 0 → 100644
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (main-descr)
mixin main-descr(text, mods)
//- Принимает:
//- text {string} - текст
//- mods {string} - список модификаторов
//- Вызов:
+main-descr('Текст', 'some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' main-descr--' + modsList[i].trim();
}
}
.main-descr(class=allMods)&attributes(attributes)
.main-descr__inner
p.slider-text.main-descr__text=text
block
src/blocks/main-descr/main-descr.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока main-descr, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.main-descr {
$block-name: &; // #{$block-name}__element
color: black;
display: none;
@media (min-width: $screen-xxl) {
max-width: 1080px;
}
@media (min-width: $screen-xl) {
max-width: 800px;
}
@media (min-width: $screen-lg) {
display: block;
max-width: 620px;
}
}
src/blocks/main-title/main-title.pug 0 → 100644
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (main-title)
mixin main-title(title, mods)
//- Принимает:
//- title {string} - title
//- mods {string} - список модификаторов
//- Вызов:
+main-title('title', 'some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' main-title--' + modsList[i].trim();
}
}
section.main-title(class=allMods)&attributes(attributes)
.main-title__inner.container
h2.main-title__text.h2=title
block
src/blocks/main-title/main-title.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока main-title, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.main-title {
$block-name: &; // #{$block-name}__element
padding-top: 12px;
padding-bottom: 46px;
color: $white;
@media (min-width: $screen-xxl) {
min-height: 680px;
display: flex;
align-items: center;
}
@media (min-width: $screen-xl) {}
@media (min-width: $screen-lg) {}
@media (min-width: $screen-md) {
padding-top: 50px;
padding-bottom: 152px;
}
@media (min-width: $screen-sm) {
padding-top: 30px;
padding-bottom: 80px;
}
&__text {
@media (min-width: $screen-xxl) {
margin-bottom: 24px;
transform: translateY(-28px);
}
}
}
\ No newline at end of file
src/blocks/map/map.pug 0 → 100644
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (map)
mixin map(text, mods)
//- Принимает:
//- text {string} - текст
//- mods {string} - список модификаторов
//- Вызов:
+map('Текст', 'some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' map--' + modsList[i].trim();
}
}
section.map(class=allMods)&attributes(attributes)
.map__inner.container
address.map__top
ul.map__list
li.map__item
.map__body
.map__label
p.text-bold Адрес
.map__descr
p.text-bold 123290, г. Москва, Бизнес&nbsp;-&nbsp;центр&nbsp;&laquo;Якорь&raquo;, Причальный проезд, д.&nbsp;2
li.map__item
.map__body
.map__label
p.text-bold Телефон
.map__descr
a(href="tel:+7(495)2802595").text-bold +7 (495) 280-25-95
li.map__item
.map__body
.map__label
p.text-bold Email
.map__descr
p.text-bold info@adsolutions.ru
.map__block
<iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A892b519ac9d82448b844832f1cda828fa882eaafc4b4987e66b810fbd8affa75&amp;source=constructor" width="100%" height="400" frameborder="0"></iframe>
src/blocks/map/map.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока map, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.map {
$block-name: &; // #{$block-name}__element
padding: 46px 0 30px;
@media (min-width: $screen-xxl) {
padding: 80px 0;
}
&__top{
margin: 0;
margin-bottom: 64px;
}
&__list {
list-style: none;
padding: 0;
@media (min-width: $screen-lg) {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 -20px;
}
}
&__item {
@media (min-width: $screen-lg) {
flex: 0 0 33.3333%;
padding: 0 20px;
}
}
&__body {
@media (min-width: $screen-xxl) {
padding-right: 20px;
}
}
&__label {
color: $main-dark;
margin-bottom: 32px;
p {
text-transform: uppercase;
margin: 0;
}
}
&__descr {
a {
color: $black;
text-decoration: none;
}
p{
margin: 0;
}
}
}
\ No newline at end of file
src/blocks/more/more.pug 0 → 100644
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (more)
mixin more(text, mods)
//- Принимает:
//- text {string} - текст
//- mods {string} - список модификаторов
//- Вызов:
+more('Текст', 'some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' more--' + modsList[i].trim();
}
}
.more(class=allMods)&attributes(attributes)
.more__inner.container
.more__wrapper
a(href="").more__btn.btn Запросить дополнительную информацию
src/blocks/more/more.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока more, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.more {
$block-name: &;
&__wrapper{
display: flex;
justify-content: center;
}
}
src/blocks/num-solutions/num-solutions.pug 0 → 100644
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (num-solutions)
mixin num-solutions(text, mods)
//- Принимает:
//- text {string} - текст
//- mods {string} - список модификаторов
//- Вызов:
+num-solutions('Текст', 'some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' num-solutions--' + modsList[i].trim();
}
}
section.num-solutions.section--angled.mb-section-angled
.num-solutions__inner.container
h2.num-solutions__title.h2 Решения
.num-solutions__grid
+solutions-grid()
src/blocks/num-solutions/num-solutions.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока num-solutions, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.num-solutions {
$block-name: &; // #{$block-name}__element
padding: 46px 0 80px;
@media (min-width: $screen-xxl) {
padding: 160px 0 220px;
}
@media (min-width: $screen-xl) {
padding: 100px 0 180px;
}
@media (min-width: $screen-lg) {
padding: 80px 0 160px;
}
@media (min-width: $screen-sm) {
padding: 54px 0 100px;
}
&__title {
color: $white;
margin-bottom: 24px;
@media (min-width: $screen-lg) {
margin-bottom: 36px;
}
}
}
\ No newline at end of file
src/blocks/page-footer/page-footer.pug
View file @ 8f5d23b3
...@@ -56,7 +56,7 @@ mixin page-footer(mods) ...@@ -56,7 +56,7 @@ mixin page-footer(mods)
label.footer-form__label label.footer-form__label
input(type="text" name="name" placeholder="E-mail").footer-form__input input(type="text" name="name" placeholder="E-mail").footer-form__input
label.footer-form__label.message-mob label.footer-form__label.message-mob
textarea(name="name", cols="30", rows="6", placeholder="Ваше сообщение").footer-form__textarea textarea(name="name", cols="30", rows="2", placeholder="Ваше сообщение").footer-form__textarea
.footer-form__agree .footer-form__agree
label.footer-form__label.custom-checkbox label.footer-form__label.custom-checkbox
input(type="checkbox" name="name" required="required").footer-form__checkbox input(type="checkbox" name="name" required="required").footer-form__checkbox
......
src/blocks/page-footer/page-footer.scss
View file @ 8f5d23b3
...@@ -7,7 +7,16 @@ ...@@ -7,7 +7,16 @@
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
background-color: $main-dark; background-color: $main-dark;
padding: 120px 0 56px; padding: 58px 0 56px;
@media (min-width: $screen-xxl) {
padding: 120px 0 56px;
}
@media (min-width: $screen-lg) {
padding: 80px 0 48px;
}
&__body { &__body {
...@@ -18,30 +27,64 @@ ...@@ -18,30 +27,64 @@
&__about { &__about {
flex: 0 0 30%; flex: 0 0 30%;
margin-right: 20px;
margin-bottom: 32px; margin-bottom: 32px;
@media (min-width: $screen-xxl) {
margin-right: 42px;
}
@media (min-width: $screen-xl) {
margin-right: 52px;
}
@media (min-width: $screen-lg) { @media (min-width: $screen-lg) {
margin-bottom: 0; margin-bottom: 0;
margin-right: 66px;
} }
} }
&__menu { &__menu {
display: none; display: none;
@media (min-width: $screen-xxl) {
flex: 0 0 18%;
}
@media (min-width: $screen-xl) { @media (min-width: $screen-xl) {
display: block; display: block;
flex: 0 0 20%; flex: 0 0 17%;
} }
} }
&__logo { &__logo {
width: 267px; width: 200px;
margin-bottom: 56px; margin-bottom: 40px;
@media (min-width: $screen-xxl) {
margin-bottom: 54px;
}
@media (min-width: $screen-xl) {
margin-bottom: 46px;
}
@media (min-width: $screen-lg) {
width: 267px;
margin-bottom: 56px;
}
} }
&__info { &__info {
color: $white; color: $white;
margin: 0;
margin-bottom: 6px;
@media (min-width: $screen-xxl) {
margin-bottom: 24px;
}
@media (min-width: $screen-xl) {
margin-bottom: 16px;
}
@media (min-width: $screen-lg) { @media (min-width: $screen-lg) {
padding-left: 80px; padding-left: 80px;
...@@ -64,15 +107,21 @@ ...@@ -64,15 +107,21 @@
color: $white; color: $white;
text-decoration: none; text-decoration: none;
font: 13px/1.3 $ff-i-b; font: 13px/1.3 $ff-i-b;
margin-bottom: 24px; margin-bottom: 10px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@media (min-width: $screen-xxl) { @media (min-width: $screen-xxl) {
font-size: 22px; font-size: 22px;
margin-bottom: 24px;
}
@media (min-width: $screen-xl) {
margin-bottom: 16px;
} }
@media (min-width: $screen-lg) { @media (min-width: $screen-lg) {
font-size: 16px; font-size: 16px;
margin-bottom: 24px;
} }
} }
...@@ -82,14 +131,21 @@ ...@@ -82,14 +131,21 @@
text-decoration: none; text-decoration: none;
font: 13px/1.3 $ff-i-sb; font: 13px/1.3 $ff-i-sb;
font-weight: 500; font-weight: 500;
margin-bottom: 24px; margin-bottom: 10px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@media (min-width: $screen-xxl) { @media (min-width: $screen-xxl) {
font-size: 22px; font-size: 22px;
margin-bottom: 24px;
}
@media (min-width: $screen-xl) {
margin-bottom: 16px;
} }
@media (min-width: $screen-lg) { @media (min-width: $screen-lg) {
font-size: 16px; font-size: 16px;
margin-bottom: 24px;
} }
} }
...@@ -98,6 +154,7 @@ ...@@ -98,6 +154,7 @@
font: 12px/1.5 $ff-i-b; font: 12px/1.5 $ff-i-b;
margin-bottom: 0; margin-bottom: 0;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@media (min-width: $screen-xxl) { @media (min-width: $screen-xxl) {
font-size: 14px; font-size: 14px;
} }
...@@ -108,6 +165,7 @@ ...@@ -108,6 +165,7 @@
font: 12px/1.5 $ff-i-r; font: 12px/1.5 $ff-i-r;
margin-bottom: 0; margin-bottom: 0;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@media (min-width: $screen-xxl) { @media (min-width: $screen-xxl) {
font-size: 14px; font-size: 14px;
} }
...@@ -116,18 +174,23 @@ ...@@ -116,18 +174,23 @@
&__list { &__list {
list-style: none; list-style: none;
padding: 0;
} }
&__item { &__item {
color: $white; color: $white;
font: 18px/1.3 $ff-i-m; font: 18px/1.3 $ff-i-m;
font-weight: 500; font-weight: 500;
margin-bottom: 0;
letter-spacing: 0.05em; letter-spacing: 0.05em;
margin-bottom: 32px; margin-bottom: 32px;
@media (min-width: $screen-xxl) { @media (min-width: $screen-xxl) {
font-size: 22px; font-size: 22px;
margin-bottom: 32px;
}
@media (min-width: $screen-xl) {
margin-bottom: 24px;
} }
} }
...@@ -168,15 +231,19 @@ ...@@ -168,15 +231,19 @@
background: #336D69; background: #336D69;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
padding: 9px 16px; padding: 8px 16px;
margin-bottom: 8px; margin-bottom: 8px;
border: 1px solid #336D69; border: 1px solid #336D69;
transition: all $transition-time; transition: all $transition-time;
&::placeholder { &::placeholder {
color: $placeholder-color; color: $placeholder-color;
font: 14px/1.3 $ff-i-r; font: 12px/1.3 $ff-i-r;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@media (min-width: $screen-lg) {
font-size: 14px;
}
} }
&:focus { &:focus {
...@@ -212,7 +279,11 @@ ...@@ -212,7 +279,11 @@
&__title { &__title {
color: $white; color: $white;
margin: 0; margin: 0;
margin-bottom: 24px; margin-bottom: 18px;
@media (min-width: $screen-lg) {
margin-bottom: 24px;
}
} }
&__submit { &__submit {
...@@ -224,8 +295,23 @@ ...@@ -224,8 +295,23 @@
} }
&__agree { &__agree {
padding: 24px 0;
padding-left: 40px; padding-left: 40px;
margin-bottom: 16px;
@media (min-width: $screen-xxl) {
padding-top: 24px;
padding-bottom: 24px;
}
@media (min-width: $screen-xl) {
padding-top: 4px;
padding-bottom: 4px;
}
@media (min-width: $screen-lg) {
margin-bottom: 0;
padding: 24px 0;
padding-left: 40px;
}
} }
.custom-checkbox { .custom-checkbox {
...@@ -294,17 +380,3 @@ ...@@ -294,17 +380,3 @@
} }
} }
.footer--angled {
z-index: 10;
--section-padding: 80px;
--clip-point: calc(100% - var(--section-padding));
clip-path: polygon(0 0, 100% var(--section-padding), 100% 100%, 0% 100%);
background: $main-dark;
@media (min-width: $screen-xxl) {
--section-padding: 80px;
}
}
\ No newline at end of file
src/blocks/page-header/page-header.scss
View file @ 8f5d23b3
...@@ -10,22 +10,25 @@ ...@@ -10,22 +10,25 @@
color: $white; color: $white;
&__top { &__top {
padding: 16px 0 16px; padding: 16px 0 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
@media (min-width: $screen-xxl) { @media (min-width: $screen-xxl) {
padding: 40px 0 47px; padding: 40px 0 32px;
} }
@media (min-width: $screen-xl) { @media (min-width: $screen-xl) {
padding: 32px 0 32px; padding: 32px 0 24px;
} }
@media (min-width: $screen-lg) { @media (min-width: $screen-lg) {
padding: 24px 0 12px; padding: 24px 0 12px;
} }
@media (min-width: $screen-sm) {
padding: 16px 0 16px;
}
} }
...@@ -52,7 +55,9 @@ ...@@ -52,7 +55,9 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@media (min-width: $screen-xxl) {} @media (min-width: $screen-xxl) {
justify-content: flex-start;
}
@media (min-width: $screen-xl) { @media (min-width: $screen-xl) {
width: 40%; width: 40%;
...@@ -104,12 +109,12 @@ ...@@ -104,12 +109,12 @@
@media (min-width: $screen-xxl) { @media (min-width: $screen-xxl) {
font-size: 20px; font-size: 20px;
margin-bottom: 32px; margin-bottom: 16px;
} }
@media (min-width: $screen-lg) { @media (min-width: $screen-lg) {
font-size: 17px; font-size: 17px;
margin-bottom: 24px; margin-bottom: 8px;
display: block; display: block;
} }
} }
...@@ -122,7 +127,7 @@ ...@@ -122,7 +127,7 @@
&__search { &__search {
width: 22px; width: 22px;
height: 22px; height: 22px;
padding: 0;
} }
&__search-close { &__search-close {
...@@ -426,7 +431,7 @@ ...@@ -426,7 +431,7 @@
} }
} }
@media (max-width: ($screen-xl - 1)){ @media (max-width: ($screen-xl - 1)) {
padding: 0; padding: 0;
background-color: transparent; background-color: transparent;
max-height: 0; max-height: 0;
......
src/blocks/page/page.scss
View file @ 8f5d23b3
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
// Сделаем viewport великим снова! (привет, IE10) http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ // Сделаем viewport великим снова! (привет, IE10) http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@at-root { @at-root {
@-ms-viewport { // stylelint-disable-line @-ms-viewport {
// stylelint-disable-line
width: device-width; width: device-width;
} }
} }
...@@ -21,6 +22,7 @@ ...@@ -21,6 +22,7 @@
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Inter-Bold'; font-family: 'Inter-Bold';
src: url('../fonts/Inter-Bold.woff2') format('woff2'), src: url('../fonts/Inter-Bold.woff2') format('woff2'),
...@@ -29,6 +31,7 @@ ...@@ -29,6 +31,7 @@
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Inter-Medium'; font-family: 'Inter-Medium';
src: url('../fonts/Inter-Medium.woff2') format('woff2'), src: url('../fonts/Inter-Medium.woff2') format('woff2'),
...@@ -37,6 +40,7 @@ ...@@ -37,6 +40,7 @@
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Inter-SemiBold'; font-family: 'Inter-SemiBold';
src: url('../fonts/Inter-SemiBold.woff2') format('woff2'), src: url('../fonts/Inter-SemiBold.woff2') format('woff2'),
...@@ -94,8 +98,8 @@ ...@@ -94,8 +98,8 @@
} }
body { body {
display: flex; // Исправляем баг в IE для min-height and flexbox (flex-direction:column) display: flex; // Исправляем баг в IE для min-height and flexbox (flex-direction:column)
flex-direction: column; // и прижимаем footer в IE 10-11 flex-direction: column; // и прижимаем footer в IE 10-11
min-height: 100%; min-height: 100%;
margin: 0; margin: 0;
word-break: break-word; word-break: break-word;
...@@ -108,18 +112,19 @@ body { ...@@ -108,18 +112,19 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
&.lock{ &.lock {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
&::before{ &::before {
position: absolute; position: absolute;
content: ''; content: '';
top: 0px; top: 0px;
left: 0px; left: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(0deg,#00bfff 0,#00e68a 100%);; background: linear-gradient(0deg, #00bfff 0, #00e68a 100%);
;
opacity: 0.5; opacity: 0.5;
z-index: 10; z-index: 10;
transition: all $transition-time; transition: all $transition-time;
...@@ -151,12 +156,12 @@ label, ...@@ -151,12 +156,12 @@ label,
select, select,
textarea { textarea {
touch-action: manipulation; // Стилевая коррекция 300ms задержки (для поддерживающих браузеров) touch-action: manipulation; // Стилевая коррекция 300ms задержки (для поддерживающих браузеров)
margin: 0; // Убираем margin в Firefox и Safari margin: 0; // Убираем margin в Firefox и Safari
} }
button, button,
input { input {
overflow: visible; // Покажем торчащее в Edge overflow: visible; // Покажем торчащее в Edge
text-transform: none; // Уберём наследование text transform в Firefox text-transform: none; // Уберём наследование text transform в Firefox
} }
...@@ -185,7 +190,7 @@ input[type='month'] { ...@@ -185,7 +190,7 @@ input[type='month'] {
} }
textarea { textarea {
overflow: auto; // Удаление верт. скролла в IE. overflow: auto; // Удаление верт. скролла в IE.
resize: vertical; // Правильное изменение размеров resize: vertical; // Правильное изменение размеров
} }
...@@ -223,12 +228,12 @@ a { ...@@ -223,12 +228,12 @@ a {
hr { hr {
box-sizing: content-box; // Проблема Firefox box-sizing: content-box; // Проблема Firefox
height: 0; // Проблема Firefox height: 0; // Проблема Firefox
margin-top: $typo-margin-vertical * 2; margin-top: $typo-margin-vertical * 2;
margin-bottom: $typo-margin-vertical * 2; margin-bottom: $typo-margin-vertical * 2;
border: 0; border: 0;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
overflow: visible; // Проблема Edge и IE overflow: visible; // Проблема Edge и IE
} }
...@@ -243,6 +248,7 @@ blockquote, ...@@ -243,6 +248,7 @@ blockquote,
pre, pre,
address, address,
figure { figure {
padding: 0;
margin-top: 0; margin-top: 0;
margin-bottom: $typo-margin-vertical; margin-bottom: $typo-margin-vertical;
} }
...@@ -381,6 +387,7 @@ pre { ...@@ -381,6 +387,7 @@ pre {
--container-horizontal-padding: 15px; --container-horizontal-padding: 15px;
--container-width: calc(828px - var(--container-horizontal-padding) * 2); --container-width: calc(828px - var(--container-horizontal-padding) * 2);
} }
@media (min-width: $screen-md) { @media (min-width: $screen-md) {
--container-horizontal-padding: 15px; --container-horizontal-padding: 15px;
--container-width: calc(600px - var(--container-horizontal-padding) * 2); --container-width: calc(600px - var(--container-horizontal-padding) * 2);
...@@ -400,13 +407,25 @@ pre { ...@@ -400,13 +407,25 @@ pre {
} }
.all-pages__inner{ .all-pages__inner {
.h5{ .h5 {
text-decoration: none; text-decoration: none;
color: $main-dark; color: $main-dark;
transition: color $transition-time; transition: color $transition-time;
&:hover{
&:hover {
color: $main-light; color: $main-light;
} }
} }
}
.partners-slider__title {
background: linear-gradient(270deg, #00bfff -.23%, #00e68a 99.77%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 32px;
@media (min-width: $screen-lg) {
margin-bottom: 56px;
}
} }
\ No newline at end of file
src/blocks/partners-slider/partners-slider.pug → src/blocks/partners/partners.pug
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (partners-slider-slider) //- Все примеси в этом файле должны начинаться c имени блока (partners)
mixin partners-slider(text, mods) mixin partners(text, mods)
//- Принимает: //- Принимает:
//- text {string} - текст //- text {string} - текст
//- mods {string} - список модификаторов //- mods {string} - список модификаторов
//- Вызов: //- Вызов:
+partners-slider-slider('Текст', 'some-mod') +partners('Текст', 'some-mod')
- -
// список модификаторов // список модификаторов
...@@ -14,49 +14,49 @@ mixin partners-slider(text, mods) ...@@ -14,49 +14,49 @@ mixin partners-slider(text, mods)
if(typeof(mods) !== 'undefined' && mods) { if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(','); var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) { for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' partners-slider--' + modsList[i].trim(); allMods = allMods + ' partners--' + modsList[i].trim();
} }
} }
section.partners-slider(class=allMods)&attributes(attributes) .partners(class=allMods)&attributes(attributes)
.partners-slider__inner.container .partners__inner.container
h2.partners-slider__title.h2 Нам доверяют .partners__swiper.swiper
.partners-slider__swiper.swiper
.swiper-wrapper .swiper-wrapper
.partners-slider__slide.swiper-slide .partners__slide.swiper-slide
.partners-slider__logo .partners__logo
img(src="img/partner-1.png" alt="Клиент" loading="lazy").partners-slider__img img(src="img/partner-1.png" alt="Клиент" loading="lazy").partners__img
.partners-slider__slide.swiper-slide .partners__slide.swiper-slide
.partners-slider__logo .partners__logo
img(src="img/partner-2.png" alt="Клиент" loading="lazy").partners-slider__img img(src="img/partner-2.png" alt="Клиент" loading="lazy").partners__img
.partners-slider__slide.swiper-slide .partners__slide.swiper-slide
.partners-slider__logo .partners__logo
img(src="img/partner-3.png" alt="Клиент" loading="lazy").partners-slider__img img(src="img/partner-3.png" alt="Клиент" loading="lazy").partners__img
.partners-slider__slide.swiper-slide .partners__slide.swiper-slide
.partners-slider__logo .partners__logo
img(src="img/partner-4.png" alt="Клиент" loading="lazy").partners-slider__img img(src="img/partner-4.png" alt="Клиент" loading="lazy").partners__img
.partners-slider__slide.swiper-slide .partners__slide.swiper-slide
.partners-slider__logo .partners__logo
img(src="img/partner-5.png" alt="Клиент" loading="lazy").partners-slider__img img(src="img/partner-5.png" alt="Клиент" loading="lazy").partners__img
.partners-slider__slide.swiper-slide .partners__slide.swiper-slide
.partners-slider__logo .partners__logo
img(src="img/partner-1.png" alt="Клиент" loading="lazy").partners-slider__img img(src="img/partner-1.png" alt="Клиент" loading="lazy").partners__img
.partners-slider__slide.swiper-slide .partners__slide.swiper-slide
.partners-slider__logo .partners__logo
img(src="img/partner-2.png" alt="Клиент" loading="lazy").partners-slider__img img(src="img/partner-2.png" alt="Клиент" loading="lazy").partners__img
.partners-slider__slide.swiper-slide .partners__slide.swiper-slide
.partners-slider__logo .partners__logo
img(src="img/partner-3.png" alt="Клиент" loading="lazy").partners-slider__img img(src="img/partner-3.png" alt="Клиент" loading="lazy").partners__img
.partners-slider__slide.swiper-slide .partners__slide.swiper-slide
.partners-slider__logo .partners__logo
img(src="img/partner-4.png" alt="Клиент" loading="lazy").partners-slider__img img(src="img/partner-4.png" alt="Клиент" loading="lazy").partners__img
.partners-slider__prev .partners__prev
svg(width='29' height='24' viewBox='0 0 29 24' fill='none' xmlns='http://www.w3.org/2000/svg') svg(width='29' height='24' viewBox='0 0 29 24' fill='none' xmlns='http://www.w3.org/2000/svg')
path(d='M14.4104 2.71672C14.9964 2.1311 14.9967 1.18135 14.411 0.595402C13.8254 0.00944948 12.8757 0.0091809 12.2897 0.594802L14.4104 2.71672ZM3 12L1.93964 10.939L0.87808 12L1.93964 13.0609L3 12ZM12.2897 23.4052C12.8757 23.9908 13.8254 23.9905 14.411 23.4046C14.9967 22.8186 14.9964 21.8689 14.4104 21.2832L12.2897 23.4052ZM12.2897 0.594802L1.93964 10.939L4.06036 13.0609L14.4104 2.71672L12.2897 0.594802ZM1.93964 13.0609L12.2897 23.4052L14.4104 21.2832L4.06036 10.939L1.93964 13.0609Z' fill='black') path(d='M14.4104 2.71672C14.9964 2.1311 14.9967 1.18135 14.411 0.595402C13.8254 0.00944948 12.8757 0.0091809 12.2897 0.594802L14.4104 2.71672ZM3 12L1.93964 10.939L0.87808 12L1.93964 13.0609L3 12ZM12.2897 23.4052C12.8757 23.9908 13.8254 23.9905 14.411 23.4046C14.9967 22.8186 14.9964 21.8689 14.4104 21.2832L12.2897 23.4052ZM12.2897 0.594802L1.93964 10.939L4.06036 13.0609L14.4104 2.71672L12.2897 0.594802ZM1.93964 13.0609L12.2897 23.4052L14.4104 21.2832L4.06036 10.939L1.93964 13.0609Z' fill='black')
path(d='M3.25195 10.5C2.42353 10.5 1.75195 11.1716 1.75195 12C1.75195 12.8284 2.42353 13.5 3.25195 13.5V10.5ZM27.0004 13.5C27.8288 13.5 28.5004 12.8284 28.5004 12C28.5004 11.1716 27.8288 10.5 27.0004 10.5V13.5ZM3.25195 13.5H27.0004V10.5H3.25195V13.5Z' fill='black') path(d='M3.25195 10.5C2.42353 10.5 1.75195 11.1716 1.75195 12C1.75195 12.8284 2.42353 13.5 3.25195 13.5V10.5ZM27.0004 13.5C27.8288 13.5 28.5004 12.8284 28.5004 12C28.5004 11.1716 27.8288 10.5 27.0004 10.5V13.5ZM3.25195 13.5H27.0004V10.5H3.25195V13.5Z' fill='black')
.partners-slider__next .partners__next
svg(width='29' height='24' viewBox='0 0 29 24' fill='none' xmlns='http://www.w3.org/2000/svg') svg(width='29' height='24' viewBox='0 0 29 24' fill='none' xmlns='http://www.w3.org/2000/svg')
path(d='M14.5896 2.71672C14.0036 2.1311 14.0033 1.18135 14.589 0.595402C15.1746 0.00944948 16.1243 0.0091809 16.7103 0.594802L14.5896 2.71672ZM26 12L27.0604 10.939L28.1219 12L27.0604 13.0609L26 12ZM16.7103 23.4052C16.1243 23.9908 15.1746 23.9905 14.589 23.4046C14.0033 22.8186 14.0036 21.8689 14.5896 21.2832L16.7103 23.4052ZM16.7103 0.594802L27.0604 10.939L24.9396 13.0609L14.5896 2.71672L16.7103 0.594802ZM27.0604 13.0609L16.7103 23.4052L14.5896 21.2832L24.9396 10.939L27.0604 13.0609Z' fill='black') path(d='M14.5896 2.71672C14.0036 2.1311 14.0033 1.18135 14.589 0.595402C15.1746 0.00944948 16.1243 0.0091809 16.7103 0.594802L14.5896 2.71672ZM26 12L27.0604 10.939L28.1219 12L27.0604 13.0609L26 12ZM16.7103 23.4052C16.1243 23.9908 15.1746 23.9905 14.589 23.4046C14.0033 22.8186 14.0036 21.8689 14.5896 21.2832L16.7103 23.4052ZM16.7103 0.594802L27.0604 10.939L24.9396 13.0609L14.5896 2.71672L16.7103 0.594802ZM27.0604 13.0609L16.7103 23.4052L14.5896 21.2832L24.9396 10.939L27.0604 13.0609Z' fill='black')
path(d='M25.75 10.5C26.5784 10.5 27.25 11.1716 27.25 12C27.25 12.8284 26.5784 13.5 25.75 13.5V10.5ZM2.00159 13.5C1.17316 13.5 0.501585 12.8284 0.501585 12C0.501585 11.1716 1.17316 10.5 2.00159 10.5V13.5ZM25.75 13.5H2.00159V10.5H25.75V13.5Z' fill='black') path(d='M25.75 10.5C26.5784 10.5 27.25 11.1716 27.25 12C27.25 12.8284 26.5784 13.5 25.75 13.5V10.5ZM2.00159 13.5C1.17316 13.5 0.501585 12.8284 0.501585 12C0.501585 11.1716 1.17316 10.5 2.00159 10.5V13.5ZM25.75 13.5H2.00159V10.5H25.75V13.5Z' fill='black')
src/blocks/partners-slider/partners-slider.scss → src/blocks/partners/partners.scss
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока partners-slider, его элементов, // В этом файле должны быть стили для БЭМ-блока partners, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий... // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.partners-slider { .partners {
$block-name: &; // #{$block-name}__element
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
margin-bottom: 120px; margin-bottom: 86px;
@media (min-width: $screen-lg) {
margin-bottom: 120px;
}
&__title { &__title {
background: linear-gradient(270deg, #00BFFF -0.23%, #00E68A 99.77%); background: linear-gradient(270deg, #00BFFF -0.23%, #00E68A 99.77%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
margin-bottom: 60px;
@media (min-width: $screen-lg) {}
} }
&__slide { &__slide {
...@@ -62,6 +70,7 @@ ...@@ -62,6 +70,7 @@
transition: opacity $transition-time; transition: opacity $transition-time;
} }
} }
&:hover { &:hover {
svg path { svg path {
opacity: 1; opacity: 1;
...@@ -79,5 +88,4 @@ ...@@ -79,5 +88,4 @@
&__next { &__next {
right: 0; right: 0;
} }
}
}
\ No newline at end of file
src/blocks/plain-content/plain-content.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока plain-content, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.plain-content {
$block-name: &; // #{$block-name}__element
padding: 46px 0 30px;
@media (min-width: $screen-xxl){
padding: 80px 0;
}
}
.plain-content.bgrd {
background-size: 0;
padding: 46px 0 30px;
@media (min-width: $screen-xxl) {
padding: 160px 0;
margin: -80px 0;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
}
\ No newline at end of file
src/blocks/plus/plus.scss
View file @ 8f5d23b3
...@@ -9,12 +9,30 @@ ...@@ -9,12 +9,30 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: $white; background-color: $white;
background-position: center center; background-position: center center;
background-size: cover;
padding-bottom: 120px; padding-bottom: 120px;
margin-top: 204px; margin-top: 80px;
z-index: -1; z-index: -1;
@media (min-width: $screen-xl) {
padding-bottom: 120px;
}
@media (min-width: $screen-lg) {
margin-top: 204px;
padding-bottom: 108px;
}
@media (min-width: $screen-md) {
margin-top: 100px;
}
@media (min-width: $screen-sm) {
margin-top: 80px;
padding-bottom: 24px;
}
&__title { &__title {
margin-bottom: 32px;
background: linear-gradient(270deg, #00BFFF -0.23%, #00E68A 99.77%); background: linear-gradient(270deg, #00BFFF -0.23%, #00E68A 99.77%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
...@@ -22,14 +40,19 @@ ...@@ -22,14 +40,19 @@
} }
&__grid { &__grid {
padding: 0;
list-style: none; list-style: none;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(1, 1fr);
gap: 40px; gap: 40px;
@media (min-width: $screen-lg) { @media (min-width: $screen-lg) {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
@media (min-width: $screen-xs) {
grid-template-columns: repeat(2, 1fr);
}
} }
&__body { &__body {
...@@ -46,14 +69,23 @@ ...@@ -46,14 +69,23 @@
@media (min-width: $screen-xxl) { @media (min-width: $screen-xxl) {
width: 96px; width: 96px;
height: 96px; height: 96px;
margin-bottom: 32px;
}
@media (min-width: $screen-sm) {
margin-bottom: 8px;
} }
} }
&__descr { &__descr {
color: $main-dark; color: $main-dark;
text-transform: uppercase; text-transform: uppercase;
font: 22px/1.3 $ff-i-sb; font: 12px/1.3 $ff-i-sb;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
@media (min-width: $screen-xxl) {
font-size: 22px;
}
} }
} }
\ No newline at end of file
src/blocks/projects/projects.pug 0 → 100644
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (projects)
mixin projects(text, mods)
//- Принимает:
//- text {string} - текст
//- mods {string} - список модификаторов
//- Вызов:
+projects('Текст', 'some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' projects--' + modsList[i].trim();
}
}
.projects(class=allMods)&attributes(attributes)
.projects__inner.container
h2.projects__title.h2-inner Проекты
src/blocks/projects/projects.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока projects, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.projects {
$block-name: &; // #{$block-name}__element
&__title {
color: $black;
margin-bottom: 24px;
@media (min-width: $screen-xxl) {
margin-bottom: 88px;
}
@media (min-width: $screen-xl) {
margin-bottom: 60px;
}
@media (min-width: $screen-lg) {
margin-bottom: 40px;
}
}
}
\ No newline at end of file
src/blocks/solutions-grid/solutions-grid.pug 0 → 100644
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (solutions-grid)
mixin solutions-grid(text, mods)
//- Принимает:
//- text {string} - текст
//- mods {string} - список модификаторов
//- Вызов:
+solutions-grid('Текст', 'some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' solutions-grid--' + modsList[i].trim();
}
}
ul.solutions-grid(class=allMods)&attributes(attributes)
li.solutions-grid__item
a(href="javascript:void(0);").solutions-grid__body
h3.solutions-grid__subtitle.h5 Мониторинг технологических процессов и производств
li.solutions-grid__item
a(href="javascript:void(0);").solutions-grid__body
h3.solutions-grid__subtitle.h5 Энергоучёт и энергоэффективность
li.solutions-grid__item
a(href="javascript:void(0);").solutions-grid__body
h3.solutions-grid__subtitle.h5 Промышленная безопасность персонала
li.solutions-grid__item
a(href="javascript:void(0);").solutions-grid__body
h3.solutions-grid__subtitle.h5 Планирование и оптимизация производственных процессов
li.solutions-grid__item
a(href="javascript:void(0);").solutions-grid__body
h3.solutions-grid__subtitle.h5 Аналитика и визуализация, моделирование и прогнозирование, управление данными
li.solutions-grid__item
a(href="javascript:void(0);").solutions-grid__body
h3.solutions-grid__subtitle.h5 Поддержка процессов эксплуатации и ремонтов оборудования
li.solutions-grid__item
a(href="javascript:void(0);").solutions-grid__body
h3.solutions-grid__subtitle.h5 Цифровой персонал / Цифровое рабочее место
li.solutions-grid__item
a(href="javascript:void(0);").solutions-grid__body
h3.solutions-grid__subtitle.h5 Цифровое зрение: ИИ, Большие данные, Глубокое обучение
src/blocks/solutions-grid/solutions-grid.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока solutions-grid, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.solutions-grid {
$block-name: &; // #{$block-name}__element
margin: 0;
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
z-index: 7;
filter: drop-shadow(0px 8px 32px rgba(0, 0, 0, 0.24));
transform: translateY(20px);
@media (min-width: $screen-xxl) {
margin: 0;
gap: 40px;
}
@media (min-width: $screen-xl) {
margin: 0 14%;
row-gap: 32px;
column-gap: 40px;
}
@media (min-width: $screen-lg) {
margin: 0 6%;
row-gap: 32px;
column-gap: 40px;
}
&__item {
grid-column: 12 span;
background-color: $black;
border-radius: 16px;
background-repeat: no-repeat;
background-color: $black;
background-position: center center;
background-size: cover;
overflow: hidden;
transition: all $transition-time;
@media (min-width: $screen-xxl) {
grid-column: 3 span;
}
@media (min-width: $screen-xl) {
grid-column: 6 span;
width: 320px;
aspect-ratio: 1/1;
height: 320px;
}
@media (min-width: $screen-lg) {
grid-column: 6 span;
width: 320px;
height: 200px;
}
@media (min-width: $screen-sm) {
grid-column: 6 span;
}
&:nth-child(1) {
background-image: url("../img/a1.jpg");
&:hover {
background-image: url("../img/a2.jpg");
}
}
&:nth-child(2) {
background-image: url("../img/b1.jpg");
&:hover {
background-image: url("../img/b2.jpg");
}
}
&:nth-child(3) {
background-image: url("../img/c1.jpg");
&:hover {
background-image: url("../img/c2.jpg");
}
}
&:nth-child(4) {
background-image: url("../img/d1.jpg");
&:hover {
background-image: url("../img/d2.jpg");
}
}
&:nth-child(5) {
background-image: url("../img/e1.jpg");
&:hover {
background-image: url("../img/e2.jpg");
}
}
&:nth-child(6) {
background-image: url("../img/f1.jpg");
&:hover {
background-image: url("../img/f2.jpg");
}
}
&:nth-child(7) {
background-image: url("../img/g1.jpg");
&:hover {
background-image: url("../img/g2.jpg");
}
}
&:nth-child(8) {
background-image: url("../img/h1.jpg");
&:hover {
background-image: url("../img/h2.jpg");
}
}
}
&__body {
display: block;
cursor: pointer;
text-decoration: none;
padding: 16px;
width: 100%;
height: 100%;
@media (min-width: $screen-lg) {
padding: 32px;
}
@media (min-width: $screen-md) {
padding: 16px;
}
}
&__subtitle {
margin: 0;
color: $white;
}
}
src/blocks/solutions/solutions.pug
View file @ 8f5d23b3
...@@ -28,29 +28,4 @@ mixin solutions(text, mods) ...@@ -28,29 +28,4 @@ mixin solutions(text, mods)
p.solutions__top-text.text Мы&nbsp;предлагаем набор планов и&nbsp;возможностей, инноваций и&nbsp;связанных с&nbsp;ними технологических решений, которые помогают компаниям и&nbsp;промышленным предприятиям перейти на&nbsp;новые уровни автоматизации и&nbsp;цифровизации. p.solutions__top-text.text Мы&nbsp;предлагаем набор планов и&nbsp;возможностей, инноваций и&nbsp;связанных с&nbsp;ними технологических решений, которые помогают компаниям и&nbsp;промышленным предприятиям перейти на&nbsp;новые уровни автоматизации и&nbsp;цифровизации.
p.solutions__top-text.text Наши Заказчики&nbsp;&mdash; основные предприятия реального сектора экономики: энергетики, нефтегазодобычи, промышленного производства. Наши продукты помогают им&nbsp;контролировать критическую инфраструктуру, обеспечивают аналитику для принятия управленческих решений, оптимизируют сложные технологические процессы. p.solutions__top-text.text Наши Заказчики&nbsp;&mdash; основные предприятия реального сектора экономики: энергетики, нефтегазодобычи, промышленного производства. Наши продукты помогают им&nbsp;контролировать критическую инфраструктуру, обеспечивают аналитику для принятия управленческих решений, оптимизируют сложные технологические процессы.
h2.solutions__title.h2 Решения h2.solutions__title.h2 Решения
ul.solutions__grid +solutions-grid()
li.solutions__item \ No newline at end of file
a(href="javascript:void(0);").solutions__body
h3.solutions__subtitle.subtitle Мониторинг технологических процессов и производств
li.solutions__item
a(href="javascript:void(0);").solutions__body
h3.solutions__subtitle.subtitle Энергоучёт и энергоэффективность
li.solutions__item
a(href="javascript:void(0);").solutions__body
h3.solutions__subtitle.subtitle Мониторинг технологических процессов и производств
li.solutions__item
a(href="javascript:void(0);").solutions__body
h3.solutions__subtitle.subtitle Мониторинг технологических процессов и производств
li.solutions__item
a(href="javascript:void(0);").solutions__body
h3.solutions__subtitle.subtitle Мониторинг технологических процессов и производств
li.solutions__item
a(href="javascript:void(0);").solutions__body
h3.solutions__subtitle.subtitle Мониторинг технологических процессов и производств
li.solutions__item
a(href="javascript:void(0);").solutions__body
h3.solutions__subtitle.subtitle Мониторинг технологических процессов и производств
li.solutions__item
a(href="javascript:void(0);").solutions__body
h3.solutions__subtitle.subtitle Мониторинг технологических процессов и производств
\ No newline at end of file
src/blocks/solutions/solutions.scss
View file @ 8f5d23b3
...@@ -6,66 +6,110 @@ ...@@ -6,66 +6,110 @@
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
z-index: 6; z-index: 6;
margin-top: 32px;
&__content{ @media (min-width: $screen-xl) {
transform: translateY(10%); margin-top: 0px;
} }
&__top-title { @media (min-width: $screen-lg) {
margin-bottom: 32px; margin-top: 22px;
} }
&__top-text { @media (min-width: $screen-md) {
margin-bottom: 28px; margin-top: 24px;
} }
&__title { @media (min-width: $screen-sm) {
color: $white; margin-top: 30px;
margin: 0;
} }
&__grid { &__content {
margin: 0; transform: translateY(6px);
list-style: none;
padding: 0;
display: grid; @media (min-width: $screen-xxl) {
grid-template-columns: repeat(12, 1fr); transform: translateY(80px);
gap: 40px; }
z-index: 7;
filter: drop-shadow(0px 8px 32px rgba(0, 0, 0, 0.24)); @media (min-width: $screen-lg) {
transform: translateY(20px); transform: translateY(60px);
}
@media (min-width: $screen-md) {
transform: translateY(24px);
}
@media (min-width: $screen-sm) {
transform: translateY(18px);
}
} }
&__item { &__top {
background-color: $black; @media (min-width: $screen-xxl) {
grid-column: 3 span; margin-bottom: 72px;
border-radius: 16px;
aspect-ratio: 1/1;
background-image: url("../img/a1.jpg");
background-repeat: no-repeat;
background-color: $black;
background-position: center center;
background-size: cover;
transition: all $transition-time;
&:hover {
background-image: url("../img/a2.jpg");
} }
} }
&__body { &__top-title {
display: block; margin-bottom: 16px;
cursor: pointer;
text-decoration: none; @media (min-width: $screen-lg) {
padding: 32px; margin-bottom: 24px;
width: 100%; }
height: 100%;
@media (min-width: $screen-md) {
margin-bottom: 20px;
}
@media (min-width: $screen-sm) {
margin-bottom: 20px;
}
} }
&__subtitle { &__top-descr {
margin: 0; margin-bottom: 40px;
}
&__top-text {
margin-bottom: 28px;
@media (min-width: $screen-xxl) {
margin-bottom: 28px;
}
@media (min-width: $screen-lg) {
margin-bottom: 24px;
}
@media (min-width: $screen-sm) {
margin-bottom: 18px;
}
}
&__title {
color: $white; color: $white;
margin: 0;
@media (min-width: $screen-lg) {
margin-bottom: 12px;
}
} }
} }
\ No newline at end of file
// .b2 {
// position: relative;
// &:after {
// position: absolute;
// content: "";
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// background-color: $main-dark;
// opacity: 0.5;
// }
// }
\ No newline at end of file
src/blocks/task/task.pug 0 → 100644
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (task)
mixin task(text, mods)
//- Принимает:
//- text {string} - текст
//- mods {string} - список модификаторов
//- Вызов:
+task('Текст', 'some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' task--' + modsList[i].trim();
}
}
.task(class=allMods)&attributes(attributes)
.task__inner.container
h2.task__title.h2-inner Решаемые задачи
ul.task__list
li.task__item
p.text Управление допусками, государственной сертификацией и аттестацией персонала опасных производств;
li.task__item
p.text Оперативные обходы с использованием мобильных устройств и систем дополненной реальности;
li.task__item
p.text Автоматизация процессов взаимодействия G2B и G2G при осуществлении государственного контроля товаров и морского и речного транспорта при международной перевозке;
li.task__item
p.text Создание алгоритмов оптимизации управления основными фондами нефтяных месторождений с использованием гибридных моделей на базе гидродинамики и исторических данных;
li.task__item
p.text Управление допусками, государственной сертификацией и аттестацией персонала опасных производств;
li.task__item
p.text Оперативные обходы с использованием мобильных устройств и систем дополненной реальности;
li.task__item
p.text Автоматизация процессов взаимодействия G2B и G2G при осуществлении государственного контроля товаров и морского и речного транспорта при международной перевозке;
li.task__item
p.text Создание алгоритмов оптимизации управления основными фондами нефтяных месторождений с использованием гибридных моделей на базе гидродинамики и исторических данных.
src/blocks/task/task.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока task, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.task {
$block-name: &;
margin-bottom: 40px;
@media (min-width: $screen-lg) {
margin-bottom: 64px;
}
&__title {
margin: 0;
margin-bottom: 30px;
@media (min-width: $screen-lg) {
margin-bottom: 56px;
}
}
&__list {
list-style: none;
padding-left: 20px;
@media (min-width: $screen-lg) {
padding-left: 26px;
}
}
&__item {
position: relative;
margin-bottom: 8px;
font-size: 18px;
color: $black;
p{
margin: 0;
}
&::before {
position: absolute;
content: "";
top: 6px;
left: -20px;
width: 10px;
height: 10px;
background-color: $color-accent;
@media (min-width: $screen-lg) {
left: -26px;
}
}
@media (min-width: $screen-lg) {
margin-bottom: 26px;
}
}
}
\ No newline at end of file
src/blocks/text-block/text-block.pug 0 → 100644
View file @ 8f5d23b3
//- Все примеси в этом файле должны начинаться c имени блока (text-block)
mixin text-block(text, mods)
//- Принимает:
//- text {string} - текст
//- mods {string} - список модификаторов
//- Вызов:
+text-block('Текст', 'some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' text-block--' + modsList[i].trim();
}
}
.text-block(class=allMods)&attributes(attributes)
.text-block__inner.container
p.text-block__text.text Команда профессионалов высокой квалификации проводит обследование, консалтинг, выбор оптимальных параметров проектного решения, реализацию, внедрение, сопровождение и&nbsp;поддержку.
p.text-block__text.text-bold Сбор данных по потреблению энергоресурсов
p.text-block__text.text-bold Коммерческий учет
p.text-block__text.text-bold Диспетчеризация и технический учет
p.text-block__text.text-bold Управление жизненным циклов средств измерения и приборов учета
p.text-block__text.text Наши Заказчики&nbsp;&mdash; основные предприятия реального сектора экономики: энергетики, нефтегазодобычи, промышленного производства. Наши продукты помогают им&nbsp;контролировать критическую инфраструктуру, обеспечивают аналитику для принятия управленческих решений, оптимизируют сложные технологические процессы.
block
src/blocks/text-block/text-block.scss 0 → 100644
View file @ 8f5d23b3
// В этом файле должны быть стили для БЭМ-блока text-block, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.text-block {
$block-name: &;
margin-bottom: 40px;
@media (min-width: $screen-lg) {
margin-bottom: 64px;
}
&__text {
margin-bottom: 16px;
@media (min-width: $screen-xl) {}
@media (min-width: $screen-lg) {
margin-bottom: 24px;
}
@media (min-width: $screen-md) {}
@media (min-width: $screen-sm) {}
}
&__h2 {
margin-bottom: 36px;
@media (min-width: $screen-xl) {
margin-bottom: 56px;
}
}
}
\ No newline at end of file
src/blocks/top-slider/top-slider.pug
View file @ 8f5d23b3
...@@ -19,7 +19,6 @@ mixin top-slider(text, mods) ...@@ -19,7 +19,6 @@ mixin top-slider(text, mods)
} }
section.swiper.top-slider section.swiper.top-slider
.swiper-pagination.top-slider__pagination
.swiper-wrapper .swiper-wrapper
.swiper-slide.top-slider__slide .swiper-slide.top-slider__slide
.top-slider__img(style="background-image: url(img/slider1.jpg);") .top-slider__img(style="background-image: url(img/slider1.jpg);")
...@@ -42,13 +41,15 @@ mixin top-slider(text, mods) ...@@ -42,13 +41,15 @@ mixin top-slider(text, mods)
h2.top-slider__title Advanced Digital Solutions h2.top-slider__title Advanced Digital Solutions
.top-slider__descr .top-slider__descr
p Разработка комплексных программных продуктов на&nbsp;заказ, реализация решений в&nbsp;области цифровизации производства и&nbsp;снижения импортозависимости. p Разработка комплексных программных продуктов на&nbsp;заказ, реализация решений в&nbsp;области цифровизации производства и&nbsp;снижения импортозависимости.
.top-slider__nav.container .top-slider__wrapper.container
button.top-slider__prev.btn-reset .top-slider__nav
svg(width='46' height='39' viewBox='0 0 46 39' fill='none' xmlns='http://www.w3.org/2000/svg') button.top-slider__prev.btn-reset
path(d='M21.7504 2.70097C22.3363 2.11535 22.3366 1.16561 21.751 0.579654C21.1653 -0.00629759 20.2156 -0.00656617 19.6296 0.579055L21.7504 2.70097ZM3 19.32L1.93964 18.2591L0.87808 19.32L1.93964 20.381L3 19.32ZM19.6296 38.061C20.2156 38.6466 21.1653 38.6463 21.751 38.0604C22.3366 37.4744 22.3363 36.5247 21.7504 35.9391L19.6296 38.061ZM19.6296 0.579055L1.93964 18.2591L4.06036 20.381L21.7504 2.70097L19.6296 0.579055ZM1.93964 20.381L19.6296 38.061L21.7504 35.9391L4.06036 18.2591L1.93964 20.381Z' fill='white') svg(width='46' height='39' viewBox='0 0 46 39' fill='none' xmlns='http://www.w3.org/2000/svg')
path(d='M3.42969 17.82C2.60126 17.82 1.92969 18.4916 1.92969 19.32C1.92969 20.1484 2.60126 20.82 3.42969 20.82V17.82ZM44.0197 20.82C44.8481 20.82 45.5197 20.1484 45.5197 19.32C45.5197 18.4916 44.8481 17.82 44.0197 17.82V20.82ZM3.42969 20.82H44.0197V17.82H3.42969V20.82Z' fill='white') path(d='M21.7504 2.70097C22.3363 2.11535 22.3366 1.16561 21.751 0.579654C21.1653 -0.00629759 20.2156 -0.00656617 19.6296 0.579055L21.7504 2.70097ZM3 19.32L1.93964 18.2591L0.87808 19.32L1.93964 20.381L3 19.32ZM19.6296 38.061C20.2156 38.6466 21.1653 38.6463 21.751 38.0604C22.3366 37.4744 22.3363 36.5247 21.7504 35.9391L19.6296 38.061ZM19.6296 0.579055L1.93964 18.2591L4.06036 20.381L21.7504 2.70097L19.6296 0.579055ZM1.93964 20.381L19.6296 38.061L21.7504 35.9391L4.06036 18.2591L1.93964 20.381Z' fill='white')
button.top-slider__next.btn-reset path(d='M3.42969 17.82C2.60126 17.82 1.92969 18.4916 1.92969 19.32C1.92969 20.1484 2.60126 20.82 3.42969 20.82V17.82ZM44.0197 20.82C44.8481 20.82 45.5197 20.1484 45.5197 19.32C45.5197 18.4916 44.8481 17.82 44.0197 17.82V20.82ZM3.42969 20.82H44.0197V17.82H3.42969V20.82Z' fill='white')
svg(width='46' height='39' viewBox='0 0 46 39' fill='none' xmlns='http://www.w3.org/2000/svg') button.top-slider__next.btn-reset
path(d='M24.2496 2.70097C23.6637 2.11535 23.6634 1.16561 24.249 0.579654C24.8347 -0.00629759 25.7844 -0.00656617 26.3704 0.579055L24.2496 2.70097ZM43 19.32L44.0604 18.2591L45.1219 19.32L44.0604 20.381L43 19.32ZM26.3704 38.061C25.7844 38.6466 24.8347 38.6463 24.249 38.0604C23.6634 37.4744 23.6637 36.5247 24.2496 35.9391L26.3704 38.061ZM26.3704 0.579055L44.0604 18.2591L41.9396 20.381L24.2496 2.70097L26.3704 0.579055ZM44.0604 20.381L26.3704 38.061L24.2496 35.9391L41.9396 18.2591L44.0604 20.381Z' fill='white') svg(width='46' height='39' viewBox='0 0 46 39' fill='none' xmlns='http://www.w3.org/2000/svg')
path(d='M42.5703 17.82C43.3987 17.82 44.0703 18.4916 44.0703 19.32C44.0703 20.1484 43.3987 20.82 42.5703 20.82V17.82ZM1.98031 20.82C1.15189 20.82 0.480312 20.1484 0.480312 19.32C0.480312 18.4916 1.15189 17.82 1.98031 17.82V20.82ZM42.5703 20.82H1.98031V17.82H42.5703V20.82Z' fill='white') path(d='M24.2496 2.70097C23.6637 2.11535 23.6634 1.16561 24.249 0.579654C24.8347 -0.00629759 25.7844 -0.00656617 26.3704 0.579055L24.2496 2.70097ZM43 19.32L44.0604 18.2591L45.1219 19.32L44.0604 20.381L43 19.32ZM26.3704 38.061C25.7844 38.6466 24.8347 38.6463 24.249 38.0604C23.6634 37.4744 23.6637 36.5247 24.2496 35.9391L26.3704 38.061ZM26.3704 0.579055L44.0604 18.2591L41.9396 20.381L24.2496 2.70097L26.3704 0.579055ZM44.0604 20.381L26.3704 38.061L24.2496 35.9391L41.9396 18.2591L44.0604 20.381Z' fill='white')
path(d='M42.5703 17.82C43.3987 17.82 44.0703 18.4916 44.0703 19.32C44.0703 20.1484 43.3987 20.82 42.5703 20.82V17.82ZM1.98031 20.82C1.15189 20.82 0.480312 20.1484 0.480312 19.32C0.480312 18.4916 1.15189 17.82 1.98031 17.82V20.82ZM42.5703 20.82H1.98031V17.82H42.5703V20.82Z' fill='white')
\ No newline at end of file .top-slider__pagination-wrapper.container
.swiper-pagination.top-slider__pagination
\ No newline at end of file
src/blocks/top-slider/top-slider.scss
View file @ 8f5d23b3
...@@ -10,14 +10,34 @@ ...@@ -10,14 +10,34 @@
position: relative; position: relative;
@media (max-width: ($screen-md - 1)) {
display: none;
}
&__body { &__body {
max-width: 960px; max-width: 540px;
padding: 11% 0 19%; padding: 10% 0 19%;
padding-left: 10%;
@media (min-width: $screen-xxl) {
max-width: 960px;
padding: 154px 136px 272px;
}
@media (min-width: $screen-xl) {
max-width: 670px;
padding: 6% 0 17% 10%;
}
@media (min-width: $screen-lg) {
padding: 8% 0 17% 10%;
max-width: 540px;
}
@media (min-width: $screen-md) {
padding: 5% 0 11% 0%;
max-width: 547px;
}
@media (min-width: $screen-sm) {
padding: 5% 0 10%;
max-width: 547px;
}
} }
&__img { &__img {
...@@ -29,23 +49,59 @@ ...@@ -29,23 +49,59 @@
} }
&__title { &__title {
font: 80px $ff-i-sb; font: 32px $ff-i-sb;
font-weight: 600; font-weight: 600;
color: $white; color: $white;
margin: 0 0 24px; margin: 0 0 14px;
@media (min-width: $screen-xxl) {
font-size: 80px;
}
@media (min-width: $screen-lg) {
font-size: 56px;
margin: 0 0 24px;
}
@media (min-width: $screen-md) {
margin: 0 0 30px;
}
@media (min-width: $screen-sm) {
margin: 0 0 24px;
}
} }
&__descr { &__descr {
font: 24px/1.5 $ff-i-sb; font: 18px/1.5 $ff-i-sb;
font-weight: 600; font-weight: 600;
color: $black; color: $black;
margin: 0; margin: 0;
@media (min-width: $screen-xxl) {
font-size: 24px;
}
}
&__nav {
position: relative;
} }
&__prev { &__prev {
position: absolute; position: absolute;
bottom: 100px; bottom: 20px;
width: 24px;
z-index: 5; z-index: 5;
padding: 0;
@media (min-width: $screen-lg) {
bottom: 100px;
width: 40px;
}
svg {
width: 100%;
}
svg path { svg path {
opacity: 1; opacity: 1;
...@@ -54,21 +110,58 @@ ...@@ -54,21 +110,58 @@
&__next { &__next {
position: absolute; position: absolute;
bottom: 100px; width: 24px;
bottom: 20px;
z-index: 5; z-index: 5;
right: 13%; right: 0%;
padding: 0;
@media (min-width: $screen-lg) {
right: 0;
bottom: 100px;
width: 40px;
}
svg {
width: 100%;
}
svg path { svg path {
opacity: 1; opacity: 1;
} }
} }
&__pagination-wrapper {
position: relative;
}
&__pagination { &__pagination {
display: flex; display: flex;
bottom: 100px !important; justify-content: center;
left: 21% !important; bottom: 20px !important;
width: var(--container-width) !important; width: var(--container-width) !important;
max-width: 960px; max-width: 960px;
@media (min-width: $screen-xxl) {
bottom: 118px !important;
left: 10% !important;
}
@media (min-width: $screen-xl) {
bottom: 100px !important;
left: 14% !important;
justify-content: flex-start;
}
@media (min-width: $screen-lg) {
bottom: 100px !important;
left: 17% !important;
justify-content: flex-start;
}
@media (min-width: $screen-sm) {
bottom: 32px !important;
}
} }
.swiper-button-disabled { .swiper-button-disabled {
......
src/img/blum.svg 0 → 100644
View file @ 8f5d23b3
This source diff could not be displayed because it is too large. You can view the blob instead.
src/img/logo-sq.svg 0 → 100644
View file @ 8f5d23b3
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" rx="8" fill="url(#paint0_linear_189_10685)"/>
<path d="M25.328 26.3964C22.7831 31.0366 17.7842 40.1446 17.7842 40.1446C17.7842 40.1446 29.3607 40.1494 29.3511 40.1446C30.26 40.1637 30.7336 40.3312 31.2167 41.2305C31.2167 41.2353 32.9627 44.4164 32.9627 44.4164C32.9627 44.4164 14.5409 44.4164 14.5361 44.4164C12.307 44.4068 11.3789 42.7804 12.4361 40.8861C14.6701 36.8965 23.3763 20.9957 23.3763 20.9861C23.8212 20.1681 24.51 19.6371 25.4189 19.6467C26.3278 19.6611 27.0215 20.2064 27.4663 21.01C27.4663 21.0196 37.5646 39.3936 37.5598 39.3888C37.8947 40.0011 38.3443 40.1207 38.9853 40.1255C43.769 40.1877 47.5385 36.6238 47.5624 31.9789C47.5863 27.5971 43.8694 23.9568 39.3106 23.9137C39.3154 23.9137 32.2643 23.9089 32.2643 23.9137C31.6664 23.8659 31.3363 23.6171 31.1067 23.2057C31.1162 23.2057 29.1597 19.618 29.1597 19.618C29.1597 19.618 36.3543 19.5415 39.2054 19.618C44.5583 19.7567 48.5383 22.139 50.8344 26.937C54.1686 33.9067 50.0403 42.2972 42.3865 44.0098C40.5639 44.4212 36.7322 44.4164 36.7275 44.4164C35.7755 44.4451 35.0915 43.9428 34.6131 43.0626C31.8051 37.8963 25.6725 26.8987 25.328 26.3964Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_189_10685" x1="64" y1="-2.26883e-06" x2="-6.08353e-06" y2="64" gradientUnits="userSpaceOnUse">
<stop stop-color="#00BFFF"/>
<stop offset="1" stop-color="#00E68A"/>
</linearGradient>
</defs>
</svg>
src/img/romb.svg 0 → 100644
View file @ 8f5d23b3
This diff is collapsed.
src/js/script.js
View file @ 8f5d23b3
...@@ -55,23 +55,27 @@ window.addEventListener("load", () => { ...@@ -55,23 +55,27 @@ window.addEventListener("load", () => {
/*-- Partners Slider --*/ /*-- Partners Slider --*/
const partnersSlider = document.querySelector(".partners-slider"); const partnersSlider = document.querySelector(".partners");
if (partnersSlider) { if (partnersSlider) {
let partnersSwiper; let partnersSwiper;
partnersSwiper = new Swiper(".partners-slider__swiper.swiper", { partnersSwiper = new Swiper(".partners__swiper.swiper", {
slidesPerView: 2, slidesPerView: 1,
spaceBetween: 0, spaceBetween: 0,
loop: true, loop: true,
// autoplay: true, // autoplay: true,
// delay: 3500, // delay: 3500,
speed: 1000, speed: 1000,
navigation: { navigation: {
prevEl: ".partners-slider__prev", prevEl: ".partners__prev",
nextEl: ".partners-slider__next", nextEl: ".partners__next",
}, },
breakpoints: { breakpoints: {
// when window width is >= 640px // when window width is >= 640px
576: {
slidesPerView: 2,
spaceBetween: 0
},
992: { 992: {
slidesPerView: 3, slidesPerView: 3,
spaceBetween: 0 spaceBetween: 0
......
src/pages/404.pug
View file @ 8f5d23b3
...@@ -10,9 +10,21 @@ block meta ...@@ -10,9 +10,21 @@ block meta
block content block content
h1 Error 404 +inner-wrapper()
p Page not found. +inner-wrapper-top(style="background-image: url(img/bgrd_error.jpg);")
+breadcrumbs()
+breadcrumbs-item('Главная', '/')
+breadcrumbs-item('404')
+main-title('404')
section.error.plain-content
.error__inner.container
.error__wrapper
.error__title
img(src="img/404.png", alt="404")
.error__descr
span.error__error.h3 Ошибка!
p.error__text.text К сожалению, запрашиваемая Вами страница не найдена...
a.error__btn.btn(href="javascript:void(0)") на главную
//- block footer //- block footer
//- p footer //- p footer
......
src/pages/about.pug 0 → 100644
View file @ 8f5d23b3
This diff is collapsed.
src/pages/all-pages.pug
View file @ 8f5d23b3
...@@ -10,12 +10,18 @@ block meta ...@@ -10,12 +10,18 @@ block meta
block content block content
section.section(class=allMods)&attributes(attributes) section.section.plain-content(class=allMods)&attributes(attributes)
.container .container
h2.title-h2.plus__title.h2 Все страницы h2.title-h2.plus__title.h2 Все страницы
.all-pages__inner .all-pages__inner
p #[a.h5(href="index.html", target="_blank").link Главная] p #[a.h5(href="index.html", target="_blank").link Главная]
p #[a.h5(href="about.html", target="_blank").link Кто мы]
p #[a.h5(href="solutions.html", target="_blank").link Решения]
p #[a.h5(href="monitoring.html", target="_blank").link Мониторинг технологических процессов и производств]
p #[a.h5(href="planning.html", target="_blank").link Планирование и оптимизация производственных процессов]
p #[a.h5(href="industries.html", target="_blank").link Отрасли]
p #[a.h5(href="contacts.html", target="_blank").link Контакты]
p #[a.h5(href="404.html", target="_blank").link 404]
//- block footer //- block footer
//- p footer //- p footer
......
src/pages/contacts.pug 0 → 100644
View file @ 8f5d23b3
extends ../pug/layout.pug
block meta
title Контакты
meta(name='description', content='')
//- block append head
//- link(rel='stylesheet', href='css/some.css')
block content
+inner-wrapper()
+inner-wrapper-top(style="background-image: url(img/bgrd_contacts.jpg);")
+breadcrumbs()
+breadcrumbs-item('Главная', '/')
+breadcrumbs-item('Контакты')
+main-title('Контакты')
+map()
//- block footer
//- p footer
//- block append page-bottom
//- script(src='js/some.js')
src/pages/index.pug
View file @ 8f5d23b3
...@@ -9,10 +9,13 @@ block meta ...@@ -9,10 +9,13 @@ block meta
block content block content
+top-slider() +top-slider()
//- +solutions() +solutions()
//- +plus() +plus()
//- +branch() +branch()
//- +partners-slider() section.partners-slider(class=allMods)&attributes(attributes)
.partners-slider__inner.container
h2.partners-slider__title.h2 Нам доверяют
+partners()
//- block footer //- block footer
......
src/pages/industries.pug 0 → 100644
View file @ 8f5d23b3
extends ../pug/layout.pug
block meta
title Отрасли
meta(name='description', content='')
//- block append head
//- link(rel='stylesheet', href='css/some.css')
block content
+inner-wrapper()
+inner-wrapper-top(style="background-image: url(img/bgrd_industries.jpg);")
+breadcrumbs()
+breadcrumbs-item('Главная', '/')
+breadcrumbs-item('Отрасли')
+main-title('Отрасли')
+main-descr('Разработка комплексных программных продуктов на заказ, реализация решений в области цифровизации производства и снижения импортозависимости.')
section.plain-content.bgrd(style="background-image: url(img/romb.svg);")
.plain-content__inner.container
.plain-content__text
p.text Advanced Digital Solutions предлагает своим заказчикам широкий спектр решений и&nbsp;услуг&nbsp;&mdash; от&nbsp;автоматизации деятельности предприятий до&nbsp;сопровождения и&nbsp;поддержки&nbsp;ИТ и&nbsp;инженерной инфраструктуры. Наши опыт и&nbsp;экспертиза помогут вам достичь целей и&nbsp;повысить эффективность бизнеса. Предлагает своим заказчикам широкий спектр решений и&nbsp;услуг&nbsp;&mdash; от&nbsp;автоматизации деятельности предприятий до&nbsp;сопровождения и&nbsp;поддержки&nbsp;ИТ и&nbsp;инженерной инфраструктуры. Наши опыт и&nbsp;экспертиза помогут вам достичь целей и&nbsp;повысить эффективность бизнеса.
p.text Наши опыт и&nbsp;экспертиза помогут вам достичь целей и&nbsp;повысить эффективность бизнеса. Предлагает своим заказчикам широкий спектр решений и&nbsp;услуг&nbsp;&mdash; от&nbsp;автоматизации еятельности предприятий до&nbsp;сопровождения и&nbsp;поддержки&nbsp;ИТ и&nbsp;инженерной инфраструктуры. Наши опыт и&nbsp;экспертиза помогут вам достичь целей и&nbsp;повысить эффективность бизнеса.
section.num-solutions.section--angled.mb-section-angled
.num-solutions__inner.container
h2.num-solutions__title.h2 Отрасли
.branch__block
.branch__top(style="background-image: url(img/branch1.jpg);")
a(href="javascript:void(0);").branch__link
.branch__item-body
h3.branch__item-title Цифровизация производства
ul.branch__item-bottom
li.branch__item-item
span.branch__item-subtitle.h5 Цифровые двойники
li.branch__item-item
span.branch__item-subtitle.h5 Достоверность данных
li.branch__item-item
span.branch__item-subtitle.h5 Проактивные приложения
li.branch__item-item
span.branch__item-subtitle.h5 Распределённая командная работа и цифровой рабочий
ul.branch__grid
.branch__item(style="background-image: url(img/branch2.jpg);")
a(href="javascript:void(0);").branch__link
.branch__body
h3.branch__title-h3 Нефть и газ
ul.branch__bottom
li.branch__subtitle.h5 Цифровые двойники
li.branch__subtitle.h5 Цифровое бурение
li.branch__subtitle.h5 Интегрированное планирование и оптимизация
li.branch__subtitle.h5 Переработка и сбыт
li.branch__subtitle.h5 Корпоративные сервисы
.branch__item(style="background-image: url(img/branch3.jpg);")
a(href="javascript:void(0);").branch__link
.branch__body
h3.branch__title-h3 Энергетика
ul.branch__bottom
li.branch__subtitle.h5 Генерация
li.branch__subtitle.h5 Ресурсоснабжающие организации и сбыт
li.branch__subtitle.h5 Корпоративные сервисы
.branch__item(style="background-image: url(img/branch4.png);")
a(href="javascript:void(0);").branch__link
.branch__body
h3.branch__title-h3 Промышленное производство
ul.branch__bottom
li.branch__subtitle.h5 Цифровые двойники
li.branch__subtitle.h5 Достоверность данных
li.branch__subtitle.h5 Проактивные приложения
li.branch__subtitle.h5 Распределённая командная работа и цифровой рабочий
//- block footer
//- p footer
//- block append page-bottom
//- script(src='js/some.js')
src/pages/monitoring.pug 0 → 100644
View file @ 8f5d23b3
extends ../pug/layout.pug
block meta
title Мониторинг технологических процессов и производств
meta(name='description', content='')
//- block append head
//- link(rel='stylesheet', href='css/some.css')
block content
+inner-wrapper()
+inner-wrapper-top(style="background-image: url(img/slider2.jpg);")
+breadcrumbs()
+breadcrumbs-item('Главная', '/')
+breadcrumbs-item('Решения', '/')
+breadcrumbs-item('Мониторинг технологических процессов и производств')
+main-title('Мониторинг технологических процессов и производств')
+main-descr('Разработка комплексных программных продуктов на заказ, реализация решений в области цифровизации производства и снижения импортозависимости.')
+about-solutions()
//- block footer
//- p footer
//- block append page-bottom
//- script(src='js/some.js')
src/pages/planning.pug 0 → 100644
View file @ 8f5d23b3
extends ../pug/layout.pug
block meta
title Планирование и оптимизация производственных процессов
meta(name='description', content='')
//- block append head
//- link(rel='stylesheet', href='css/some.css')
block content
+inner-wrapper()
+inner-wrapper-top(style="background-image: url(img/slider2.jpg);")
+breadcrumbs()
+breadcrumbs-item('Главная', '/')
+breadcrumbs-item('Решения', '/')
+breadcrumbs-item('Планирование и оптимизация производственных процессов')
+main-title('Планирование и оптимизация производственных процессов')
+main-descr('Разработка комплексных программных продуктов на заказ, реализация решений в области цифровизации производства и снижения импортозависимости.')
+about-solutions()
//- block footer
//- p footer
//- block append page-bottom
//- script(src='js/some.js')
src/pages/solutions.pug 0 → 100644
View file @ 8f5d23b3
extends ../pug/layout.pug
block meta
title Решения
meta(name='description', content='')
//- block append head
//- link(rel='stylesheet', href='css/some.css')
block content
+inner-wrapper()
+inner-wrapper-top(style="background-image: url(img/bgrd_solutions.jpg);")
+breadcrumbs()
+breadcrumbs-item('Главная', '/')
+breadcrumbs-item('Решения')
+main-title('Решения')
+main-descr('Разработка комплексных программных продуктов на заказ, реализация решений в области цифровизации производства и снижения импортозависимости.')
section.plain-content
.plain-content__inner.container
.plain-content__text
p.text Advanced Digital Solutions предлагает своим заказчикам широкий спектр решений и&nbsp;услуг&nbsp;&mdash; от&nbsp;автоматизации деятельности предприятий до&nbsp;сопровождения и&nbsp;поддержки&nbsp;ИТ и&nbsp;инженерной инфраструктуры. Наши опыт и&nbsp;экспертиза помогут вам достичь целей и&nbsp;повысить эффективность бизнеса. Предлагает своим заказчикам широкий спектр решений и&nbsp;услуг&nbsp;&mdash; от&nbsp;автоматизации деятельности предприятий до&nbsp;сопровождения и&nbsp;поддержки&nbsp;ИТ и&nbsp;инженерной инфраструктуры. Наши опыт и&nbsp;экспертиза помогут вам достичь целей и&nbsp;повысить эффективность бизнеса.
p.text Наши опыт и&nbsp;экспертиза помогут вам достичь целей и&nbsp;повысить эффективность бизнеса. Предлагает своим заказчикам широкий спектр решений и&nbsp;услуг&nbsp;&mdash; от&nbsp;автоматизации еятельности предприятий до&nbsp;сопровождения и&nbsp;поддержки&nbsp;ИТ и&nbsp;инженерной инфраструктуры. Наши опыт и&nbsp;экспертиза помогут вам достичь целей и&nbsp;повысить эффективность бизнеса.
+num-solutions()
//- block footer
//- p footer
//- block append page-bottom
//- script(src='js/some.js')
src/pug/layout.pug
View file @ 8f5d23b3
...@@ -16,6 +16,7 @@ html(class='page no-js', lang='ru') ...@@ -16,6 +16,7 @@ html(class='page no-js', lang='ru')
meta(name='format-detection', content='email=no') meta(name='format-detection', content='email=no')
meta(content='notranslate', name='google') meta(content='notranslate', name='google')
//- Предзагрузка шрифтов или иных ресурсов //- Предзагрузка шрифтов или иных ресурсов
//- link(rel='preload', href='fonts/Bloggersans.woff2', as='font', type='font/woff2', crossorigin='anonymous') //- link(rel='preload', href='fonts/Bloggersans.woff2', as='font', type='font/woff2', crossorigin='anonymous')
......
src/scss/global.scss
View file @ 8f5d23b3
...@@ -14,14 +14,121 @@ ...@@ -14,14 +14,121 @@
.section--angled { .section--angled {
z-index: 10; z-index: 10;
--section-padding: 80px; --section-padding: 12px;
--clip-point: calc(100% - var(--section-padding)); --clip-point: calc(100% - var(--section-padding));
clip-path: polygon(0 0, 100% var(--section-padding), 100% 100%, 0% var(--clip-point)); clip-path: polygon(0 0, 100% var(--section-padding), 100% 100%, 0% var(--clip-point));
background: linear-gradient(0deg, #00BFFF 0%, #00E68A 100%); background: linear-gradient(0deg, #00BFFF 0%, #00E68A 100%);
@media (min-width: $screen-xxl) {
--section-padding: 80px;
}
@media (min-width: $screen-xl) {
--section-padding: 52px;
}
@media (min-width: $screen-lg) {
--section-padding: 46px;
}
@media (min-width: $screen-md) {
--section-padding: 30px;
}
@media (min-width: $screen-sm) {
--section-padding: 20px;
}
}
.footer--angled {
z-index: 10;
--section-padding: 12px;
--clip-point: calc(100% - var(--section-padding));
clip-path: polygon(0 0, 100% var(--section-padding), 100% 100%, 0% 100%);
background: $main-dark;
@media (min-width: $screen-xxl) {
--section-padding: 80px;
}
@media (min-width: $screen-xl) {
--section-padding: 52px;
}
@media (min-width: $screen-lg) {
--section-padding: 46px;
}
@media (min-width: $screen-md) {
--section-padding: 30px;
}
@media (min-width: $screen-sm) {
--section-padding: 20px;
}
}
.bottom--angled {
z-index: 10;
--section-padding: 12px;
--section-padding-minus: -12px;
--clip-point: calc(100% - var(--section-padding));
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% var(--clip-point));
background: $main-dark;
@media (min-width: $screen-xxl) {
--section-padding: 80px;
}
@media (min-width: $screen-xl) {
--section-padding: 52px;
}
@media (min-width: $screen-lg) {
--section-padding: 46px;
}
@media (min-width: $screen-md) {
--section-padding: 30px;
}
@media (min-width: $screen-sm) {
--section-padding: 20px;
}
} }
.mb-section-angled {
margin-bottom: -12px;
@media (min-width: $screen-xxl) {
margin-bottom: -80px;
}
@media (min-width: $screen-xl) {
margin-bottom: -52px;
}
@media (min-width: $screen-lg) {
margin-bottom: -46px;
}
@media (min-width: $screen-md) {
margin-bottom: -30px;
}
@media (min-width: $screen-sm) {
margin-bottom: -20px;
}
}
.decor { .decor {
...@@ -33,20 +140,43 @@ ...@@ -33,20 +140,43 @@
&:after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
left: 50%; left: 0;
transform: translateX(-50%) rotate(2deg); transform: skewY(2.5deg);
width: 100vw; width: 100vw;
height: 100px; height: 100px;
} }
&:before { &:before {
top: -40px; background-color: $main-light; transform-origin: 100% 0;
height: 53px;
top: -31px;
background-color: $main-light;
@media (min-width: $screen-xl) {
top: 0;
}
@media (min-width: $screen-md) {
top: -24px;
}
@media (min-width: $screen-sm) {
height: 100px;
}
} }
&:after { &:after {
bottom: -40px; transform-origin: 100%;
bottom: -32px;
background-color: $color-accent; background-color: $color-accent;
z-index: -1; z-index: -1;
@media (min-width: $screen-sm) {
bottom: -80px;
}
} }
} }
...@@ -79,7 +209,7 @@ ...@@ -79,7 +209,7 @@
} }
&:focus { &:focus {
border: 2px solid #64D8FF; outline: 2px solid #64D8FF;
} }
&:active { &:active {
...@@ -93,14 +223,15 @@ ...@@ -93,14 +223,15 @@
} }
@media (min-width: $screen-md) { @media (min-width: $screen-md) {
font-size: 13px; font-size: 12px;
} }
} }
/*--- Text---*/ /*--- Text---*/
.h2 { .h2 {
font: 36px/1.5 $ff-i-sb; margin: 0;
font: 28px/1.2 $ff-i-sb;
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
...@@ -108,15 +239,38 @@ ...@@ -108,15 +239,38 @@
font-size: 72px; font-size: 72px;
} }
@media (min-width: $screen-xl) { @media (min-width: $screen-lg) {
font-size: 60px; font-size: 60px;
} }
} }
.h2-inner {
margin: 0;
font: 28px/1.2 $ff-i-sb;
font-weight: 600;
letter-spacing: 0.02em;
@media (min-width: $screen-xxl) {
font-size: 48px;
}
@media (min-width: $screen-lg) {
font-size: 40px;
}
}
.h3 { .h3 {
font: 36px $ff-i-b; font: 25px $ff-i-b;
font-weight: 700; font-weight: 700;
letter-spacing: 0.02em; letter-spacing: 0.02em;
@media (min-width: $screen-xxl) {
font-size: 36px;
}
@media (min-width: $screen-lg) {
font-size: 30px;
}
} }
.h4 { .h4 {
...@@ -132,16 +286,18 @@ ...@@ -132,16 +286,18 @@
font-size: 22px; font-size: 22px;
} }
} }
.h5 { .h5 {
font: 15px/1.3 $ff-i-sb; font: 15px/1.3 $ff-i-sb;
font-weight: 600; font-weight: 600;
letter-spacing: 0.05em; letter-spacing: 0.05em;
margin: 0;
@media (min-width: $screen-xxl) { @media (min-width: $screen-xxl) {
font-size: 20px; font-size: 20px;
} }
@media (min-width: $screen-xl) { @media (min-width: $screen-lg) {
font-size: 17px; font-size: 17px;
} }
} }
...@@ -149,7 +305,7 @@ ...@@ -149,7 +305,7 @@
.text { .text {
font: 13px/1.5 $ff-i-r; font: 14px/1.5 $ff-i-r;
font-weight: 400; font-weight: 400;
letter-spacing: 0.05em; letter-spacing: 0.05em;
...@@ -157,7 +313,21 @@ ...@@ -157,7 +313,21 @@
font-size: 18px; font-size: 18px;
} }
@media (min-width: $screen-xl) { @media (min-width: $screen-lg) {
font-size: 15px;
}
}
.text-bold {
font: 14px/1.5 $ff-i-b;
letter-spacing: 0.05em;
@media (min-width: $screen-xxl) {
font-size: 18px;
}
@media (min-width: $screen-lg) {
font-size: 15px; font-size: 15px;
} }
} }
...@@ -171,4 +341,19 @@ ...@@ -171,4 +341,19 @@
@media (min-width: $screen-md) { @media (min-width: $screen-md) {
font-size: 20px; font-size: 20px;
} }
}
.slider-text {
font: 18px/1.5 $ff-i-sb;
font-weight: 600;
letter-spacing: 0.05em;
@media (min-width: $screen-xxl) {
font-size: 24px;
}
}
.pt-16 {
padding-top: 16px;
} }
\ No newline at end of file
src/scss/variables.scss
View file @ 8f5d23b3
...@@ -13,6 +13,7 @@ $gray-lightest: hsl(0, 0%, 90%); ...@@ -13,6 +13,7 @@ $gray-lightest: hsl(0, 0%, 90%);
$white: hsl(0, 0%, 100%); $white: hsl(0, 0%, 100%);
$color-accent: #00BFFF; $color-accent: #00BFFF;
$light-blue: #64D8FF;
$color-main: #014945; $color-main: #014945;
$color-success: hsl(120, 39%, 54%); $color-success: hsl(120, 39%, 54%);
$color-danger: #F02020; $color-danger: #F02020;
...@@ -93,7 +94,7 @@ $ff-i-sb: 'Inter-SemiBold', sans-serif; ...@@ -93,7 +94,7 @@ $ff-i-sb: 'Inter-SemiBold', sans-serif;
// Ширины // Ширины
$screen-xs: 0; $screen-xs: 360px;
$screen-sm: 576px; $screen-sm: 576px;
$screen-md: 768px; $screen-md: 768px;
$screen-lg: 992px; $screen-lg: 992px;
......
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