сделал space с адаптивностью
This commit is contained in:
@@ -68,6 +68,26 @@ body{
|
|||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* text */
|
||||||
|
.title-1{
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-white);
|
||||||
|
}
|
||||||
|
.title-3{
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-white);
|
||||||
|
}
|
||||||
|
.text-1{
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--text-white);
|
||||||
|
}
|
||||||
|
.text-2{
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--text-white);
|
||||||
|
}
|
||||||
|
/* text */
|
||||||
|
|
||||||
/* components */
|
/* components */
|
||||||
.btn-social{
|
.btn-social{
|
||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
|
|||||||
@@ -4,6 +4,20 @@
|
|||||||
width: 1440px;
|
width: 1440px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* text */
|
||||||
|
.title-1{
|
||||||
|
font-size: 88px;
|
||||||
|
}
|
||||||
|
.title-3{
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
.text-1{
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.text-2{
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
/* text */
|
||||||
|
|
||||||
/* header */
|
/* header */
|
||||||
.header__phone{
|
.header__phone{
|
||||||
@@ -191,7 +205,9 @@
|
|||||||
/* footer */
|
/* footer */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media only screen and (min-width: 992px) and (max-width: 1032px) {
|
@media only screen and (min-width: 992px) and (max-width: 1032px) {
|
||||||
|
/* header */
|
||||||
.header__main{
|
.header__main{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@@ -202,5 +218,69 @@
|
|||||||
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
/* header */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* space */
|
||||||
|
.space{
|
||||||
|
margin-top: 56px;
|
||||||
|
}
|
||||||
|
.space__content{
|
||||||
|
margin-top: 56px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
.space__statistics{
|
||||||
|
width: 947px;
|
||||||
|
height: 480px;
|
||||||
|
|
||||||
|
padding: 24px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: end;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.space-statistics__img{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.space-statistics__item{
|
||||||
|
margin-left: 24px;
|
||||||
|
|
||||||
|
width: 216px;
|
||||||
|
height: 173px;
|
||||||
|
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
background: rgba(42, 42, 45, 0.7);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.space-statistics__item:nth-child(2){
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.space__consultation{
|
||||||
|
margin-left: 40px;
|
||||||
|
|
||||||
|
max-width: 453px;
|
||||||
|
}
|
||||||
|
.space__consultation .btn-big{
|
||||||
|
margin-top: 64px;
|
||||||
|
}
|
||||||
|
/* space */
|
||||||
|
|
||||||
|
@media only screen and (min-width: 992px) and (max-width: 1400px) {}
|
||||||
|
@media only screen and (min-width: 992px) and (max-width: 1032px) {}
|
||||||
@@ -7,6 +7,28 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* text */
|
||||||
|
.title-1{
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.title-3{
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.text-1{
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.text-2{
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
/* text */
|
||||||
|
|
||||||
|
/* component */
|
||||||
|
.btn-big{
|
||||||
|
padding: 23.5px 19.5px;
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
/* component */
|
||||||
|
|
||||||
/* header */
|
/* header */
|
||||||
.header{
|
.header{
|
||||||
@@ -183,7 +205,7 @@
|
|||||||
}
|
}
|
||||||
/* footer */
|
/* footer */
|
||||||
}
|
}
|
||||||
|
/* footer */
|
||||||
@media only screen and (max-width: 829px) {
|
@media only screen and (max-width: 829px) {
|
||||||
.footer__about{
|
.footer__about{
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -203,3 +225,59 @@
|
|||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/* footer */
|
||||||
|
|
||||||
|
main{
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* space */
|
||||||
|
@media only screen and (max-width: 992px) {
|
||||||
|
.space{
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
.space__content{
|
||||||
|
margin-top: 24px;
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.space__consultation{
|
||||||
|
order: 1;
|
||||||
|
|
||||||
|
margin-left: 0;
|
||||||
|
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.space__consultation .btn-big{
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
.space__statistics{
|
||||||
|
order: 2;
|
||||||
|
|
||||||
|
margin-top: 40px;
|
||||||
|
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.space-statistics__img{
|
||||||
|
position: static;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
.space-statistics__item{
|
||||||
|
margin-top: 16px;
|
||||||
|
margin-left: 0;
|
||||||
|
|
||||||
|
width: calc(50% - 8px);
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* space */
|
||||||
BIN
assets/img/photo/space.png
Normal file
BIN
assets/img/photo/space.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 791 KiB |
42
index.html
42
index.html
@@ -183,6 +183,48 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<main class="wrapper">
|
||||||
|
<article class="space">
|
||||||
|
<p class="title-1">
|
||||||
|
Создаем пространства, которые работают
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="space__content">
|
||||||
|
<div class="space__statistics">
|
||||||
|
<img src="/assets/img/photo/space.png" alt="" class="space-statistics__img">
|
||||||
|
|
||||||
|
<div class="space-statistics__item">
|
||||||
|
<p class="title-3">
|
||||||
|
>20 лет
|
||||||
|
</p>
|
||||||
|
<p class="text-2">
|
||||||
|
опыт работы
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-statistics__item">
|
||||||
|
<p class="title-3">
|
||||||
|
140
|
||||||
|
</p>
|
||||||
|
<p class="text-2">
|
||||||
|
успешно запущенных проектов
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space__consultation">
|
||||||
|
<p class="text-1">
|
||||||
|
Увеличиваем посещаемость клубов на 18% за счет оптимального зонирования и подбора оборудования
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a href="" class="btn-big btn-big--blood">
|
||||||
|
Получить бесплатную консультацию
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="wrapper footer__wrapper">
|
<div class="wrapper footer__wrapper">
|
||||||
<img src="/assets/img/main/logo.svg" alt="" class="footer__logo">
|
<img src="/assets/img/main/logo.svg" alt="" class="footer__logo">
|
||||||
|
|||||||
Reference in New Issue
Block a user