Секция для тарифов на 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;

}

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

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

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

Алексей: 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

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

Капли воды на CSS

Секция с овалом

Разделители для разноцветных секций

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

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