сделал space с адаптивностью

fitness
Kirill Pet 8 months ago
parent bf2dd875e0
commit cd23fb02ae
  1. 20
      assets/css/gp-style-core.css
  2. 82
      assets/css/gp-style-desktop.css
  3. 84
      assets/css/gp-style-tablet.css
  4. BIN
      assets/img/photo/space.png
  5. 42
      index.html

@ -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) {}

@ -6,7 +6,29 @@
.phone--hone{ .phone--hone{
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;
@ -202,4 +224,60 @@
margin-top: 20px; margin-top: 20px;
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 */

Binary file not shown.

After

Width:  |  Height:  |  Size: 791 KiB

@ -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">

Loading…
Cancel
Save