Good-Production/triumf-landing
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added how-it-work

Browse Source
This commit is contained in:
Aliaksei Karzhou
2024-07-03 00:27:41 +03:00
parent 3c128049bd
commit 2f088b3071
4 changed files with 414 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
assets/css/index.css
View File

@@ -1779,3 +1779,152 @@ h3 {
font-size: 19px;
}
}
.how-it-work {
margin: 114px 0 110px;
}
@media (max-width: 768px) {
.how-it-work {
margin: 90px 0 80px;
}
}
.how-it-work .container {
position: relative;
}
.how-it-work__title {
margin: 18px 0;
}
@media (max-width: 768px) {
.how-it-work__title {
margin: 21px 0 25px;
}
}
.how-it-work__schedule {
display: flex;
align-items: flex-start;
gap: 50px;
padding: 45px 50px;
border-radius: 70px 22px;
background-color: #ffffff;
}
@media (max-width: 1240px) {
.how-it-work__schedule {
padding: 40px 24px;
gap: 24px;
}
}
@media (max-width: 768px) {
.how-it-work__schedule {
align-items: center;
padding: 0 0 10px;
overflow-x: auto;
overflow-y: hidden;
border-radius: 0;
background: rgba(255, 255, 255, 0);
}
}
.how-it-work__schedule-block {
flex: 0 0 calc(50% - 25px);
position: relative;
display: flex;
flex-direction: column;
gap: 38px;
}
@media (max-width: 1240px) {
.how-it-work__schedule-block {
flex: 0 0 calc(50% - 12px);
gap: 16px;
}
}
@media (max-width: 768px) {
.how-it-work__schedule-block {
flex: 0 0 auto;
flex-direction: row;
}
}
.how-it-work__schedule-block::before {
content: "";
position: absolute;
top: 2px;
bottom: 2px;
z-index: 1;
left: 80px;
width: 1px;
height: 100%;
transform: translateX(-50%);
background-color: #2d2d2d;
opacity: 0.1;
}
@media (max-width: 992px) {
.how-it-work__schedule-block::before {
left: 64px;
}
}
@media (max-width: 768px) {
.how-it-work__schedule-block::before {
display: none;
}
}
.how-it-work__schedule-item {
position: relative;
z-index: 5;
display: flex;
align-items: center;
gap: 30px;
}
@media (max-width: 992px) {
.how-it-work__schedule-item {
gap: 16px;
}
}
@media (max-width: 768px) {
.how-it-work__schedule-item {
flex: 0 0 auto;
align-items: flex-start;
flex-direction: column;
}
}
.how-it-work__schedule-item-time {
display: flex;
justify-content: center;
width: 160px;
flex: 0 0 auto;
}
@media (max-width: 992px) {
.how-it-work__schedule-item-time {
width: 128px;
}
}
@media (max-width: 768px) {
.how-it-work__schedule-item-time {
width: auto;
}
}
.how-it-work__schedule-item-time-value {
width: -moz-fit-content;
width: fit-content;
padding: 8px 11px;
font-weight: 700;
font-size: 21px;
line-height: 100%;
text-align: center;
color: #ffffff;
border-radius: 64px;
background-color: #609eff;
}
@media (max-width: 992px) {
.how-it-work__schedule-item-time-value {
font-size: 14px;
}
}
.how-it-work__schedule-item-text {
font-weight: 500;
font-size: 22px;
line-height: 110%;
color: #616161;
}
@media (max-width: 992px) {
.how-it-work__schedule-item-text {
font-size: 18px;
}
}

142
assets/scss/_l-how-it-work.scss Normal file
View File

@@ -0,0 +1,142 @@
.how-it-work {
margin: 114px 0 110px;
@include tablet {
margin: 90px 0 80px;
}
& .container {
position: relative;
}
&__title {
margin: 18px 0;
@include tablet {
margin: 21px 0 25px;
}
}
&__schedule {
display: flex;
align-items: flex-start;
gap: 50px;
padding: 45px 50px;
border-radius: 70px 22px;
background-color: $white;
@include desktop {
padding: 40px 24px;
gap: 24px;
}
@include tablet {
align-items: center;
padding: 0 0 10px;
overflow-x: auto;
overflow-y: hidden;
border-radius: 0;
background: rgba($color: $white, $alpha: 0);
}
&-block {
flex: 0 0 calc(50% - 25px);
position: relative;
display: flex;
flex-direction: column;
gap: 38px;
@include desktop {
flex: 0 0 calc(50% - 12px);
gap: 16px;
}
@include tablet {
flex: 0 0 auto;
flex-direction: row;
}
&::before {
content: '';
position: absolute;
top: 2px;
bottom: 2px;
z-index: 1;
left: 80px;
width: 1px;
height: 100%;
transform: translateX(-50%);
background-color: $black;
opacity: 0.1;
@include laptop {
left: 64px;
}
@include tablet {
display: none;
}
}
}
&-item {
position: relative;
z-index: 5;
display: flex;
align-items: center;
gap: 30px;
@include laptop {
gap: 16px;
}
@include tablet {
flex: 0 0 auto;
align-items: flex-start;
flex-direction: column;
}
&-time {
display: flex;
justify-content: center;
width: 160px;
flex: 0 0 auto;
@include laptop {
width: 128px;
}
@include tablet {
width: auto;
}
&-value {
width: fit-content;
padding: 8px 11px;
font-weight: 700;
font-size: 21px;
line-height: 100%;
text-align: center;
color: $white;
border-radius: 64px;
background-color: $blue;
@include laptop {
font-size: 14px;
}
}
}
&-text {
font-weight: 500;
font-size: 22px;
line-height: 110%;
color: #616161;
@include laptop {
font-size: 18px;
}
}
}
}
}

1
assets/scss/index.scss
View File

@@ -25,3 +25,4 @@
@import './l-twelve-steps';
@import './l-why-program';
@import './l-conditions';
@import './l-how-it-work';

122
index.html
View File

@@ -1077,6 +1077,128 @@
</div>
</div>
</section>
<section class="how-it-work">
<div class="container">
<div class="tag">Распорядок дня</div>
<h2 class="how-it-work__title">
Как проходит <br />
<span>день на реабилитации</span>
</h2>
<div class="how-it-work__schedule">
<div class="how-it-work__schedule-block">
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">07:00</div>
</div>
<div class="how-it-work__schedule-item-text">Подъем</div>
</div>
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">07:30-08:30</div>
</div>
<div class="how-it-work__schedule-item-text">Утренняя медитация/молитва</div>
</div>
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">08:30-09:30</div>
</div>
<div class="how-it-work__schedule-item-text">Завтрак</div>
</div>
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">09:30-11:00</div>
</div>
<div class="how-it-work__schedule-item-text">Групповая терапия</div>
</div>
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">11:00-11:30</div>
</div>
<div class="how-it-work__schedule-item-text">Перерыв</div>
</div>
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">11:30-13:00</div>
</div>
<div class="how-it-work__schedule-item-text">Индивидуальная консультация</div>
</div>
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">13:00-14:00</div>
</div>
<div class="how-it-work__schedule-item-text">Обед</div>
</div>
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">14:00-15:30</div>
</div>
<div class="how-it-work__schedule-item-text">Трудотерапия/хобби-терапия</div>
</div>
</div>
<div class="how-it-work__schedule-block">
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">15:30-16:00</div>
</div>
<div class="how-it-work__schedule-item-text">Свободное время</div>
</div>
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">16:00-17:30</div>
</div>
<div class="how-it-work__schedule-item-text">Встреча группы поддержки</div>
</div>
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">17:30-19:00</div>
</div>
<div class="how-it-work__schedule-item-text">Личное время</div>
</div>
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">19:00-20:00</div>
</div>
<div class="how-it-work__schedule-item-text">Ужин</div>
</div>
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">20:00-21:30</div>
</div>
<div class="how-it-work__schedule-item-text">Групповое занятие</div>
</div>
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">21:30-22:30</div>
</div>
<div class="how-it-work__schedule-item-text">Личное время</div>
</div>
<div class="how-it-work__schedule-item">
<div class="how-it-work__schedule-item-time">
<div class="how-it-work__schedule-item-time-value">22:30</div>
</div>
<div class="how-it-work__schedule-item-text">Отбой</div>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="./assets/js/swiper-bundle.min.js" defer></script>