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

feat: added price

Browse Source
gh-pages
Aliaksei Karzhou 1 year ago
parent 0694320596
commit 506831a2a0
5 changed files with 386 additions and 7 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 161
      assets/css/index.css
  2. 164
      assets/scss/_l-price.scss
  3. 4
      assets/scss/_l-socialization.scss
  4. 1
      assets/scss/index.scss
  5. 63
      index.html

161
assets/css/index.css
Unescape View File

@ -1937,9 +1937,6 @@ h3 {
margin: 90px 0 90px;
}
}
.socialization .container {
position: relative;
}
.socialization__title {
margin: 18px 0 22px;
}
@ -2082,3 +2079,161 @@ h3 {
display: flex;
}
}
.price {
margin: 100px 0;
}
@media (max-width: 768px) {
.price {
margin: 90px 0;
}
}
.price__title {
margin: 21px 0 24px;
}
@media (max-width: 768px) {
.price__title {
margin: 18px 0 37px;
}
}
.price__list {
display: flex;
flex-wrap: wrap;
gap: 40px 46px;
}
@media (max-width: 992px) {
.price__list {
gap: 30px 24px;
}
}
.price__list-item {
flex: 0 0 calc(50% - 23px);
display: flex;
flex-direction: column;
align-items: center;
padding: 35px 35px 40px;
box-sizing: border-box;
color: #2d2d2d;
border-radius: 8px 30px;
background-color: #ffffff;
}
@media (max-width: 992px) {
.price__list-item {
flex: 0 0 calc(50% - 12px);
border-radius: 8px 30px;
}
}
@media (max-width: 768px) {
.price__list-item {
flex: 1 1 100%;
}
}
.price__list-item--active {
color: #ffffff;
background-color: #609eff;
}
.price__list-item--active > * {
border-color: rgba(255, 255, 255, 0.1);
}
.price__list-item > * {
max-width: 410px;
width: 100%;
box-sizing: border-box;
}
.price__list-item-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin: 0 0 12px;
font-weight: 400;
font-size: 17px;
line-height: 122%;
text-align: center;
}
@media (max-width: 768px) {
.price__list-item-info {
font-size: 16px;
}
}
.price__list-item-info::before {
content: "";
display: block;
border-radius: 100px;
width: 12px;
height: 12px;
background-color: #609eff;
}
.price__list-item--active .price__list-item-info::before {
background-color: #ffffff;
}
.price__list-item-title {
padding: 0 0 23px;
margin: 0;
font-weight: 600;
font-size: 33px;
line-height: 129%;
letter-spacing: 0.01em;
text-align: center;
border-bottom: 1px solid rgba(45, 45, 45, 0.2);
}
@media (max-width: 768px) {
.price__list-item-title {
padding: 0 0 19px;
font-size: 26px;
}
}
.price__list-item-time {
padding: 21px 0;
font-weight: 500;
font-size: 25px;
line-height: 129%;
letter-spacing: 0.01em;
text-align: center;
border-bottom: 1px solid rgba(45, 45, 45, 0.2);
}
@media (max-width: 768px) {
.price__list-item-time {
padding: 19px 0;
font-size: 23px;
}
}
.price__list-item-description {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 0;
font-weight: 500;
font-size: 17px;
line-height: 132%;
text-align: center;
border-bottom: 1px solid rgba(45, 45, 45, 0.2);
}
@media (max-width: 768px) {
.price__list-item-description {
padding: 19px 0;
font-size: 16px;
}
}
.price__list-item-price {
padding: 24px 0 31px;
font-weight: 600;
font-size: 33px;
line-height: 129%;
letter-spacing: 0.01em;
text-align: center;
}
@media (max-width: 768px) {
.price__list-item-price {
padding: 18px 0 22px;
font-size: 28px;
}
}
.price__list-item-buttons {
display: flex;
justify-content: center;
}
.price__list-item--active .price__list-item-title, .price__list-item--active .price__list-item-time, .price__list-item--active .price__list-item-description {
border-color: rgba(255, 255, 255, 0.2);
}

164
assets/scss/_l-price.scss
Unescape View File

@ -0,0 +1,164 @@
.price {
margin: 100px 0;
@include tablet {
margin: 90px 0;
}
&__title {
margin: 21px 0 24px;
@include tablet {
margin: 18px 0 37px;
}
}
&__list {
display: flex;
flex-wrap: wrap;
gap: 40px 46px;
@include laptop {
gap: 30px 24px;
}
&-item {
flex: 0 0 calc(50% - 46px / 2);
display: flex;
flex-direction: column;
align-items: center;
padding: 35px 35px 40px;
box-sizing: border-box;
color: $black;
border-radius: 8px 30px;
background-color: $white;
@include laptop {
flex: 0 0 calc(50% - 24px / 2);
border-radius: 8px 30px;
}
@include tablet {
flex: 1 1 100%;
}
&--active {
color: $white;
background-color: $blue;
& > * {
border-color: rgba($color: $white, $alpha: 0.1);
}
}
& > * {
max-width: 410px;
width: 100%;
box-sizing: border-box;
}
&-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin: 0 0 12px;
font-weight: 400;
font-size: 17px;
line-height: 122%;
text-align: center;
@include tablet {
font-size: 16px;
}
&::before {
content: '';
display: block;
border-radius: 100px;
width: 12px;
height: 12px;
background-color: $blue;
}
}
&--active &-info::before {
background-color: $white;
}
&-title {
padding: 0 0 23px;
margin: 0;
font-weight: 600;
font-size: 33px;
line-height: 129%;
letter-spacing: 0.01em;
text-align: center;
border-bottom: 1px solid rgba($color: $black, $alpha: 0.2);
@include tablet {
padding: 0 0 19px;
font-size: 26px;
}
}
&-time {
padding: 21px 0;
font-weight: 500;
font-size: 25px;
line-height: 129%;
letter-spacing: 0.01em;
text-align: center;
border-bottom: 1px solid rgba($color: $black, $alpha: 0.2);
@include tablet {
padding: 19px 0;
font-size: 23px;
}
}
&-description {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 0;
font-weight: 500;
font-size: 17px;
line-height: 132%;
text-align: center;
border-bottom: 1px solid rgba($color: $black, $alpha: 0.2);
@include tablet {
padding: 19px 0;
font-size: 16px;
}
}
&-price {
padding: 24px 0 31px;
font-weight: 600;
font-size: 33px;
line-height: 129%;
letter-spacing: 0.01em;
text-align: center;
@include tablet {
padding: 18px 0 22px;
font-size: 28px;
}
}
&-buttons {
display: flex;
justify-content: center;
}
&--active &-title,
&--active &-time,
&--active &-description {
border-color: rgba($color: $white, $alpha: 0.2);
}
}
}
}

4
assets/scss/_l-socialization.scss
Unescape View File

@ -5,10 +5,6 @@
margin: 90px 0 90px;
}
& .container {
position: relative;
}
&__title {
margin: 18px 0 22px;

1
assets/scss/index.scss
Unescape View File

@ -27,3 +27,4 @@
@import './l-conditions';
@import './l-how-it-work';
@import './l-socialization';
@import './l-price';

63
index.html
Unescape View File

@ -1307,6 +1307,69 @@
</div>
</div>
</section>
<section class="price">
<div class="container">
<div class="tag">Cтоимость</div>
<h2 class="price__title">
Актуальная стоимость <br />
<span>программ реабилитации</span>
</h2>
<div class="price__list">
<div class="price__list-item price__list-item--active">
<div class="price__list-item-info">Для лечения сложных и длительных зависимостей</div>
<h4 class="price__list-item-title">Стандартная программа</h4>
<div class="price__list-item-time">9-12 месяцев</div>
<div class="price__list-item-description">Для получения стабильного результата</div>
<div class="price__list-item-price">от 25 000 ₽</div>
<div class="price__list-item-buttons">
<button class="button button--lg button--light">Оставить заявку</button>
</div>
</div>
<div class="price__list-item">
<div class="price__list-item-info">Для лечения алкоголизма и наркомании</div>
<h4 class="price__list-item-title">Ускоренная программа</h4>
<div class="price__list-item-time">3 месяца</div>
<div class="price__list-item-description">
Ускоренный курс реабилитации, позволяющий добиться результатов в сжатые сроки
</div>
<div class="price__list-item-price">от 35 000 ₽</div>
<div class="price__list-item-buttons">
<button class="button button--lg button--dark">Оставить заявку</button>
</div>
</div>
<div class="price__list-item">
<div class="price__list-item-info">Актуально для вывода человека из запоя</div>
<h4 class="price__list-item-title">Экспресс курс</h4>
<div class="price__list-item-time">28 дней</div>
<div class="price__list-item-description">
Для людей, не имеющих возможности длительного пребывания в центре
</div>
<div class="price__list-item-price">от 45 000 ₽</div>
<div class="price__list-item-buttons">
<button class="button button--lg button--dark">Оставить заявку</button>
</div>
</div>
<div class="price__list-item">
<div class="price__list-item-info"></div>
<h4 class="price__list-item-title">Социальная адаптация</h4>
<div class="price__list-item-time">Бессрочно</div>
<div class="price__list-item-description">
Программа для людей, которые прошли реабилитацию и учатся жить в трезвом обществе
</div>
<div class="price__list-item-price">от 15 000 ₽</div>
<div class="price__list-item-buttons">
<button class="button button--lg button--dark">Оставить заявку</button>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="./assets/js/swiper-bundle.min.js" defer></script>

Write Preview
Loading…
Cancel
Save