Секция для тарифов на CSS

Изначально секция рассчитана на три тарифных плана.

Пример:

Для более наглядного примера дана информация по установке этой секции на Ваш сайт.

0₽

Базовый

Самостоятельная установка
Возможность задавать вопросы в комментариях

1 000₽

Стандарт

Статичная установка на любую CMC
Оформление секции под стиль вашего сайта
Назначение кнопки "Заказать" под функционал сайта
Помощь при последюущих самостоятельных манипуляциях

3 000₽

Премиум

Все из тарифа "Стандарт"
Создание дополнительных колонок для тарифов
Переключение цены на разные валюты
Дополнительные функции

HTML

<section class="apr">
    <div class="apr-item apr-item-left">
		<div class="apr-deco">
			<svg class="apr-deco-svg" enable-background="new 0 0 300 100" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
				<path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729&#x000A; c48.654-4.056,69.94,16.218,69.94,16.218v54.396H-35.913V43.944z" opacity="0.6"></path>
				<path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729&#x000A; c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.6"></path>
				<path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716&#x000A; H42.401L43.415,98.342z" opacity="0.7"></path>
				<path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428&#x000A; c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z"></path>
			</svg>
			<div class="apr-price">0<span class="apr-currency">&#8381;</span></div>
			<div class="apr-title">Базовый</div>
		</div>
		<ul class="apr-feature-list">
			<li>Пункт</li>
			<li>Пункт</li>
			<li>Пункт</li>
		</ul>
		<button class="apr-action">Заказать</button>
	</div>
	
    <div class="apr-item apr-item-center">
		<div class="apr-deco">
			<svg class="apr-deco-svg" enable-background="new 0 0 300 100" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
				<path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729&#x000A; c48.654-4.056,69.94,16.218,69.94,16.218v54.396H-35.913V43.944z" opacity="0.6"></path>
				<path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729&#x000A; c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.6"></path>
				<path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716&#x000A; H42.401L43.415,98.342z" opacity="0.7"></path>
				<path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428&#x000A; c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z"></path>
			</svg>
			<div class="apr-price">1 <span>000</span><span class="apr-currency">&#8381;</span></div>
			<div class="apr-title">Стандарт</div>
		</div>
		<ul class="apr-feature-list">
			<li>Пункт</li>
			<li>Пункт</li>
			<li>Пункт</li>
		</ul>
		<button class="apr-action">Заказать</button>
	</div>
    <div class="apr-item apr-item-right">
		<div class="apr-deco">
			<svg class="apr-deco-svg" enable-background="new 0 0 300 100" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
				<path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729&#x000A; c48.654-4.056,69.94,16.218,69.94,16.218v54.396H-35.913V43.944z" opacity="0.6"></path>
				<path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729&#x000A; c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.6"></path>
				<path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716&#x000A; H42.401L43.415,98.342z" opacity="0.7"></path>
				<path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428&#x000A; c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z"></path>
			</svg>
			<div class="apr-price">3 <span>000</span><span class="apr-currency">&#8381;</span></div>
			<div class="apr-title">Премиум</div>
		</div>
		<ul class="apr-feature-list">
			<li>Пункт</li>
			<li>Пункт</li>
			<li>Пункт</li>
		</ul>
		<button class="apr-action">Заказать</button>
	</div>	
</section>

</svg>

<div class="apr-title">Базовый</div>

</div>

<li>Пункт</li>

</ul>

<button class="apr-action">Заказать</button>

</div>

</svg>

<div class="apr-title">Стандарт</div>

</div>

<li>Пункт</li>

</ul>

<button class="apr-action">Заказать</button>

</div>

</svg>

<div class="apr-title">Премиум</div>

</div>

<li>Пункт</li>

</ul>

<button class="apr-action">Заказать</button>

</div>

</section>

CSS

.apr *,
.apr *:before {
	line-height: 1.3;
}
.apr {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background: #FFF;
	padding: 20px 0;  
}
.apr .apr-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	flex: 0 1 330px;
	font-family: Verdana, sans-serif;   
	cursor: default;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	border-radius: 20px; 
	margin: 20px;
}
@media screen and (min-width: 1080px) {
	.apr .apr-item {
		margin: 20px 0;
	}
	.apr .apr-item-left {
		border-radius: 20px 0 0 20px;
	}  
	.apr .apr-item-center {
		margin: 0;
		z-index: 10;
		box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 20px 32px rgba(0,0,0,0.2);
	}
	.apr .apr-item-right {
		border-radius: 0 20px 20px 0;
	}   
}
.apr .apr-deco {
	background: #337AB7;
	padding: 50px 0 160px;
	position: relative;
}
.apr .apr-item-center .apr-deco {
	background: #1269b5;
} 
.apr .apr-price {
	font-size: 54px;
	font-family: 'Roboto', sans-serif;  
	font-weight: bold;
	padding: 0;
	color: #FFF;
}
.apr .apr-price > span {
	font-size: 48px;
}
.apr span.apr-currency {
	font-size: 42px;
    font-weight: normal;
	padding-left: 6px;
	vertical-align: top;
    color: #BFE2FF;
}
.apr .apr-title {
	font-size: 16px;
	font-weight: bold;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #BFE2FF;
}
.apr .apr-deco-svg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 160px;
}
.apr .deco-layer {
	transition: transform 0.5s;
	fill: #FFF;
}
.apr .apr-item:hover .deco-layer--1 {
	transform: translate3d(15px, 0, 0);
}
.apr .apr-item:hover .deco-layer--2 {
	transform: translate3d(-15px, 0, 0);
}
.apr .apr-feature-list {
	margin: -55px 0 0;
	display: flex;
	flex-direction: column;
    justify-content: center;
	height: 100%;
	padding: 0 0 35px;
	list-style: none;
	position: relative;
	z-index: 2;
}
.apr .apr-feature-list li {
	padding: 8px;
	padding-left: 34px;
	font-size: 15px;
	margin: 0 10px;
	border-bottom: 1px solid #BFE2FF;
	text-align: left;
	position: relative;
}
.apr .apr-feature-list li:before {
	position: absolute;
	left: 10px;
	content: "\2714";
	color: green;
	font-weight: bold;
}
.apr .apr-action {
	border: none;
	margin: auto 40px 20px 40px;
	padding: 10px;
	color: #fff;
	border-radius: 30px;
	background: #337AB7;
	transition: background 0.5s;
	outline: none;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2); 
	font-family: 'Roboto', sans-serif;  
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
}
.apr .apr-action:hover, 
.apr .apr-action:focus {
	background: #183a57;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

.apr *,

.apr *:before {

line-height: 1.3;

}

.apr {

display: flex;

flex-wrap: wrap;

justify-content: center;

background: #FFF;

padding: 20px 0;

}

.apr .apr-item {

position: relative;

display: flex;

flex-direction: column;

align-items: stretch;

text-align: center;

flex: 0 1 330px;

font-family: Verdana, sans-serif;

cursor: default;

background: #fff;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

border-radius: 20px;

margin: 20px;

}

@media screen and (min-width: 1080px) {

.apr .apr-item {

margin: 20px 0;

}

.apr .apr-item-left {

border-radius: 20px 0 0 20px;

}

.apr .apr-item-center {

margin: 0;

z-index: 10;

box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 20px 32px rgba(0,0,0,0.2);

}

.apr .apr-item-right {

border-radius: 0 20px 20px 0;

}

.apr .apr-deco {

background: #337AB7;

padding: 50px 0 160px;

position: relative;

}

.apr .apr-item-center .apr-deco {

background: #1269b5;

}

.apr .apr-price {

font-size: 54px;

font-family: 'Roboto', sans-serif;

font-weight: bold;

padding: 0;

color: #FFF;

}

.apr .apr-price > span {

font-size: 48px;

}

.apr span.apr-currency {

font-size: 42px;

font-weight: normal;

padding-left: 6px;

vertical-align: top;

color: #BFE2FF;

}

.apr .apr-title {

font-size: 16px;

font-weight: bold;

margin: 0;

text-transform: uppercase;

letter-spacing: 2px;

color: #BFE2FF;

}

.apr .apr-deco-svg {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 160px;

}

.apr .deco-layer {

transition: transform 0.5s;

fill: #FFF;

}

.apr .apr-item:hover .deco-layer--1 {

transform: translate3d(15px, 0, 0);

}

.apr .apr-item:hover .deco-layer--2 {

transform: translate3d(-15px, 0, 0);

}

.apr .apr-feature-list {

margin: -55px 0 0;

display: flex;

flex-direction: column;

justify-content: center;

height: 100%;

padding: 0 0 35px;

list-style: none;

position: relative;

z-index: 2;

}

.apr .apr-feature-list li {

padding: 8px;

padding-left: 34px;

font-size: 15px;

margin: 0 10px;

border-bottom: 1px solid #BFE2FF;

text-align: left;

position: relative;

}

.apr .apr-feature-list li:before {

position: absolute;

left: 10px;

content: "\2714";

color: green;

font-weight: bold;

}

.apr .apr-action {

border: none;

margin: auto 40px 20px 40px;

padding: 10px;

color: #fff;

border-radius: 30px;

background: #337AB7;

transition: background 0.5s;

outline: none;

cursor: pointer;

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);

font-family: 'Roboto', sans-serif;

font-size: 20px;

font-weight: bold;

text-transform: uppercase;

}

.apr .apr-action:hover,

.apr .apr-action:focus {

background: #183a57;

}

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

Опубликовано: 29.08.2021 / Обновлено: 19.09.2021
Рубрики: Секции
Метки: CSS
7426 просмотров

Смотрите также:

Новогодняя открытка

Блок-секция с поздравительной открыткой к Новому Году.

Креативный эффект для секции с текстом

Двигающаяся по секции окружность, в которой меняется цвет текста

Блок-секция с мороженным

Анимированный фон для блока или секций с размахивающим руками мороженным

Добавить комментарий:

Ваш комментарий отправлен!

Алексей: 18.09.2021 в 17:17

Консоль ошибку пишет:Error: <path> attribute d: Expected path command, "…94,16.218v54.396div0.913V43.944z". Как можно исправить?

Ответить
- Alexander: 19.09.2021 в 17:18
  
  Поправил
  
  Ответить

Пример:

HTML

CSS

Смотрите также:

Добавить комментарий:

Комментарии: