Слава Україні!
Красивые price-таблицы
"Стеклянные" price-таблицы
HTML-разметка
<div class="price-table-wrapper">
<div class="pricing-table">
<h2 class="pricing-table__header">- BASIC -</h2>
<h3 class="pricing-table__price">£50</h3>
<a target="_blank" class="pricing-table__button" href="#">
Join Now!
</a>
<ul class="pricing-table__list">
<li>30 day free trial</li>
<li>50gb storage space</li>
<li>20% discount</li>
<li>24 hour support</li>
</ul>
</div>
<div class="pricing-table featured-table">
<h2 class="pricing-table__header">- BUSINESS -</h2>
<h3 class="pricing-table__price">£80</h3>
<a target="_blank" class="pricing-table__button" href="#">
Join Now!
</a>
<ul class="pricing-table__list">
<li>40 day free trial</li>
<li>100gb storage space</li>
<li>25% discount</li>
<li>24 hour support</li>
</ul>
</div>
<div class="pricing-table">
<h2 class="pricing-table__header">- PREMIUM -</h2>
<h3 class="pricing-table__price">£130</h3>
<a target="_blank" class="pricing-table__button" href="#">
Join Now!
</a>
<ul class="pricing-table__list">
<li>50 day free trial</li>
<li>200gb storage space</li>
<li>40% discount</li>
<li>24 hour support</li>
</ul>
</div>
</div>
CSS-стили
.price-table-wrapper {
font-family: "Lato", sans-serif;
text-align: center;
margin-top: 30px;
}
.price-table-wrapper .featured-table {
box-shadow: 0px 0px 19px -3px rgba(0, 0, 0, 0.36);
}
.price-table-wrapper .pricing-table {
display: inline-block;
border: 1px solid #c8c8c8;
border-radius: 10px;
background: white;
margin: 20px;
transition: all 0.3s ease-in-out;
}
.price-table-wrapper .pricing-table__header {
padding: 20px;
font-size: 20px;
color: #909090;
background: #e0e0e0;
}
.price-table-wrapper .pricing-table__price {
color: #66cccc;
padding: 20px;
margin: auto;
font-size: 40px;
font-weight: 500;
}
.price-table-wrapper .pricing-table__button {
display: block;
background: #66cccc;
text-decoration: none;
padding: 20px;
color: white;
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.price-table-wrapper .pricing-table__button:before {
position: absolute;
left: -20%;
top: -10%;
content: "";
width: 60%;
height: 220%;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
background: white;
opacity: 0.3;
transition: all 0.3s ease-in-out;
}
.price-table-wrapper .pricing-table__button:after {
position: absolute;
content: ">";
top: 0;
right: 0;
font-size: 25px;
padding: 15px;
padding-right: 40px;
color: white;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.price-table-wrapper .pricing-table__button:hover {
background: black;
}
.price-table-wrapper .pricing-table__list {
padding: 20px;
color: #a0a0a0;
list-style: none;
}
.price-table-wrapper .pricing-table__list li {
padding: 15px;
border-bottom: 1px solid #c8c8c8;
}
.price-table-wrapper .pricing-table__list li:last-child {
border: none;
}
.price-table-wrapper .pricing-table:hover {
box-shadow: 0px 0px 19px -3px rgba(0, 0, 0, 0.36);
}
.price-table-wrapper .pricing-table:hover .pricing-table__button {
padding-left: 0;
padding-right: 35px;
}
.price-table-wrapper .pricing-table:hover .pricing-table__button:before {
top: -80%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
width: 100%;
}
.price-table-wrapper .pricing-table:hover .pricing-table__button:after {
opacity: 1;
padding-right: 15px;
}
Важлива інформація
Міністерство оборони
України
України
з 24.02 по 07.02
втрати противника
орієнтовно склали:
втрати противника
орієнтовно склали:
846650 ( +1340 )
особового складу
9975 ( +10 )
танків
20755 ( +18 )
бойових бронемашин
22785 ( +32 )
артилерійських систем
1271 ( +0 )
РСЗВ
1056 ( +1 )
засоби ППО
369 ( +0 )
літаків
331 ( +0 )
гелікоптерів
36307 ( +96 )
автомобільної техніки
28 ( +0 )
кораблі / катери
3054 ( +0 )
крилаті ракети
24301 ( +116 )
БПЛА
3738 ( +1 )
спец. техніки
4 ( +0 )
установок ОТРК/ТРК
1 ( +0 )
підводні човни