Dev #11
@@ -1,18 +1,24 @@
|
|||||||
.Contacts {
|
.Contacts {
|
||||||
background: $color-lightgray;
|
background: $color-lightgray;
|
||||||
border-radius: rem(28px);
|
border-radius: rem(28px);
|
||||||
padding: rem(160px);
|
padding: rem(160px) 0;
|
||||||
|
}
|
||||||
|
|
||||||
.Header {
|
.InnerContainer {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: rem(1340px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Header {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-semi-bold;
|
font-weight: $font-semi-bold;
|
||||||
font-size: rem(60px);
|
font-size: rem(60px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
margin-bottom: rem(80px);
|
margin-bottom: rem(80px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.Clients {
|
.Clients {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@@ -30,9 +36,9 @@
|
|||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Form {
|
.Form {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #292E3D;
|
background: #292E3D;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -99,9 +105,9 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: rem(20px);
|
gap: rem(20px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Map {
|
.Map {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
iframe {
|
iframe {
|
||||||
@@ -161,5 +167,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -16,6 +16,7 @@ import email from '@public/svg/email.svg';
|
|||||||
export default function Contacts() {
|
export default function Contacts() {
|
||||||
return (
|
return (
|
||||||
<section className={s.Contacts}>
|
<section className={s.Contacts}>
|
||||||
|
<div className={s.InnerContainer}>
|
||||||
<h2 className={s.Header}>
|
<h2 className={s.Header}>
|
||||||
Клиенты, которые <Mark>нам доверяют</Mark>
|
Клиенты, которые <Mark>нам доверяют</Mark>
|
||||||
</h2>
|
</h2>
|
||||||
@@ -40,8 +41,8 @@ export default function Contacts() {
|
|||||||
<div className={s.Offer}>
|
<div className={s.Offer}>
|
||||||
<h3 className={s.Title}>Остались вопросы?</h3>
|
<h3 className={s.Title}>Остались вопросы?</h3>
|
||||||
<p className={s.SubTitle}>
|
<p className={s.SubTitle}>
|
||||||
Наш эксперт свяжется с вами для уточнения подробностей и определения
|
Наш эксперт свяжется с вами для уточнения подробностей и
|
||||||
точной стоимости работ
|
определения точной стоимости работ
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className={s.Inputs}>
|
<div className={s.Inputs}>
|
||||||
@@ -84,6 +85,7 @@ export default function Contacts() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,34 +1,43 @@
|
|||||||
.Footer {
|
.Footer {
|
||||||
|
position: relative;
|
||||||
background-color: #1B1B25;
|
background-color: #1B1B25;
|
||||||
padding: rem(80px) rem(160px);
|
padding: rem(120px) 0 rem(40px);
|
||||||
|
margin-top: rem(-24px);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.InnerContainer {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: rem(1340px);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: rem(20px);
|
gap: rem(20px);
|
||||||
|
}
|
||||||
|
|
||||||
.Block {
|
.Block {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: rem(20px);
|
gap: rem(20px);
|
||||||
max-width: 40vw;
|
max-width: 40vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.SendBtn {
|
.SendBtn {
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
max-width: 33%;
|
max-width: 33%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Header {
|
.Header {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-semi-bold;
|
font-weight: $font-semi-bold;
|
||||||
font-size: rem(60px);
|
font-size: rem(60px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
margin-bottom: rem(40px);
|
margin-bottom: rem(40px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.Bottom {
|
.Bottom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: rem(80px);
|
height: rem(80px);
|
||||||
border-top: 1px solid $color-white;
|
border-top: 1px solid $color-white;
|
||||||
@@ -45,5 +54,4 @@
|
|||||||
color: $color-white;
|
color: $color-white;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -5,6 +5,7 @@ import Link from 'next/link';
|
|||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<section className={s.Footer}>
|
<section className={s.Footer}>
|
||||||
|
<div className={s.InnerContainer}>
|
||||||
<div className={s.Block}>
|
<div className={s.Block}>
|
||||||
<h2 className={s.Header}>
|
<h2 className={s.Header}>
|
||||||
Давайте <Mark>обсудим</Mark> ваши задачи
|
Давайте <Mark>обсудим</Mark> ваши задачи
|
||||||
@@ -31,6 +32,7 @@ export default function Footer() {
|
|||||||
<Link href='#'>Политика конфиденциальности</Link>
|
<Link href='#'>Политика конфиденциальности</Link>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
.License {
|
.License {
|
||||||
padding: rem(160px);
|
margin: 0 auto;
|
||||||
|
width: rem(1340px);
|
||||||
|
padding: rem(120px) 0 rem(160px);
|
||||||
|
|
||||||
.Header {
|
.Header {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
|
|||||||
@@ -30,11 +30,11 @@ export default function License() {
|
|||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
<h3 className={s.Title}>
|
<h3 className={s.Title}>
|
||||||
Заключите договор до 1 июня и получите скидку на проведение пожарной
|
Заключите договор до 1 июля и получите скидку на проведение пожарной
|
||||||
экспертизы 15 %
|
экспертизы 15 %
|
||||||
</h3>
|
</h3>
|
||||||
<p className={s.SubTitle}>
|
<p className={s.SubTitle}>
|
||||||
Оставьте свои контактные данные и мы закрепим скидку до 1 июня за
|
Оставьте свои контактные данные и мы закрепим скидку до 1 июля за
|
||||||
вами
|
вами
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
.Main {
|
.Main {
|
||||||
padding: 0 rem(160px) 0;
|
margin: 0 auto;
|
||||||
|
width: rem(1340px);
|
||||||
|
//padding: 0 rem(160px) 0;
|
||||||
|
|
||||||
&_BgWrapper {
|
&_BgWrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -1,9 +1,15 @@
|
|||||||
.Offer {
|
.Offer {
|
||||||
background: $color-lightgray;
|
background: $color-lightgray;
|
||||||
border-radius: rem(28px);
|
border-radius: rem(28px);
|
||||||
padding: rem(160px);
|
padding: rem(160px) 0;
|
||||||
|
}
|
||||||
|
|
||||||
.Title {
|
.InnerContainer {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: rem(1340px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Title {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-semi-bold;
|
font-weight: $font-semi-bold;
|
||||||
font-size: rem(60px);
|
font-size: rem(60px);
|
||||||
@@ -11,18 +17,18 @@
|
|||||||
color: $color-text;
|
color: $color-text;
|
||||||
max-width: rem(1330px);
|
max-width: rem(1330px);
|
||||||
margin-bottom: rem(80px);
|
margin-bottom: rem(80px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.Text {
|
.Text {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-regular;
|
font-weight: $font-regular;
|
||||||
font-size: rem(32px);
|
font-size: rem(32px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
margin-bottom: rem(20px);
|
margin-bottom: rem(20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.List {
|
.List {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@@ -38,17 +44,17 @@
|
|||||||
list-style-type: decimal;
|
list-style-type: decimal;
|
||||||
margin-left: rem(40px);
|
margin-left: rem(40px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.RowForm {
|
.RowForm {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: rem(40px);
|
gap: rem(40px);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: rem(80px);
|
margin-bottom: rem(80px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.Inner {
|
.Inner {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@@ -148,9 +154,9 @@
|
|||||||
transition: transform 250ms ease-in-out;
|
transition: transform 250ms ease-in-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Form {
|
.Form {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: rem(40px) rem(60px);
|
padding: rem(40px) rem(60px);
|
||||||
background: #292E3D;
|
background: #292E3D;
|
||||||
@@ -210,5 +216,4 @@
|
|||||||
max-width: rem(660px);
|
max-width: rem(660px);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -19,6 +19,7 @@ export default function Offer() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={s.Offer}>
|
<section className={s.Offer}>
|
||||||
|
<div className={s.InnerContainer}>
|
||||||
<h2 className={s.Title}>
|
<h2 className={s.Title}>
|
||||||
Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
|
Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
|
||||||
систему Охранно-Пожарной <br />
|
систему Охранно-Пожарной <br />
|
||||||
@@ -33,7 +34,8 @@ export default function Offer() {
|
|||||||
На основании экспертизы оформляется заключение
|
На основании экспертизы оформляется заключение
|
||||||
</li>
|
</li>
|
||||||
<li className={s.ListItem}>
|
<li className={s.ListItem}>
|
||||||
На основании выявленных нарушений производится устранение недостатков
|
На основании выявленных нарушений производится устранение
|
||||||
|
недостатков
|
||||||
</li>
|
</li>
|
||||||
<li className={s.ListItem}>
|
<li className={s.ListItem}>
|
||||||
Производится проверка проекта по замене старых пожарных систем на
|
Производится проверка проекта по замене старых пожарных систем на
|
||||||
@@ -96,6 +98,7 @@ export default function Offer() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
.Result {
|
.Result {
|
||||||
padding: rem(160px);
|
margin: 0 auto;
|
||||||
|
width: rem(1340px);
|
||||||
|
padding: rem(160px) 0 rem(80px);
|
||||||
|
|
||||||
.Header {
|
.Header {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
@@ -15,7 +17,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 10vw;
|
gap: rem(48px);
|
||||||
margin-bottom: rem(80px);
|
margin-bottom: rem(80px);
|
||||||
|
|
||||||
&:nth-child(odd) {
|
&:nth-child(odd) {
|
||||||
|
|||||||
Reference in New Issue
Block a user