task 17075 | переделал h-article-cta
This commit is contained in:
web_103.2 committed
1 parent
b9ad461abe
commit
7276d6af44
5 files changed
+156
-101
No files matched your search
@@ -6384,103 +6384,156 @@ h4 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.h-article-cta {
|
.h-article-cta {
|
||||||
display: flex;
|
overflow: hidden;
|
||||||
align-items: center;
|
position: relative;
|
||||||
justify-content: space-between;
|
|
||||||
gap: 40px;
|
margin: 60px 0;
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
padding: 40px 64px 40px 40px;
|
||||||
padding: 30px 40px;
|
|
||||||
margin: 30px 0;
|
border-radius: 40px;
|
||||||
background: var(--color-dark);
|
|
||||||
border-radius: 22px;
|
display: flex;
|
||||||
color: var(--color-light);
|
justify-content: space-between;
|
||||||
font-family: inherit;
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.h-article-cta::after{
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
z-index: -10;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
background: linear-gradient(135deg, #DF2935 0%, #C80E1B 56.25%, #B00012 102.27%);
|
||||||
|
}
|
||||||
|
.h-article-cta__vec{
|
||||||
|
z-index: -4;
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
left: 90px;
|
||||||
|
|
||||||
|
width: 121.215px;
|
||||||
|
height: 318.519px;
|
||||||
|
|
||||||
|
opacity: 0.1;
|
||||||
|
filter: blur(10px);
|
||||||
|
}
|
||||||
|
.h-article-cta__c{
|
||||||
|
z-index: -5;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 190px;
|
||||||
|
|
||||||
|
opacity: 0.1;
|
||||||
|
filter: blur(10px);
|
||||||
|
}
|
||||||
|
.h-article-cta__content{
|
||||||
|
max-width: 300px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
.h-article-cta__title{
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 110%; /* 33px */
|
||||||
|
letter-spacing: -0.3px;
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
.h-article-cta__description{
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 150%; /* 30px */
|
||||||
|
letter-spacing: -0.2px;
|
||||||
|
color: var(--color-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-article-cta .h-article-cta__content {
|
.h-article-cta__img{
|
||||||
flex: 1;
|
flex-shrink: 0;
|
||||||
min-width: 0;
|
|
||||||
|
margin-bottom: -142px;
|
||||||
|
|
||||||
|
width: 113px;
|
||||||
|
height: 240px;
|
||||||
|
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: top;
|
||||||
|
}
|
||||||
|
.h-article-cta__link{
|
||||||
|
padding: 20px 24px;
|
||||||
|
|
||||||
|
border-radius: 60px;
|
||||||
|
background: var(--color-white);
|
||||||
|
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 120%;
|
||||||
|
color: var(--color-dark);
|
||||||
|
|
||||||
|
transition: all .2s ease-out;
|
||||||
|
}
|
||||||
|
.h-article-cta__link:hover{
|
||||||
|
background: var(--color-dark);
|
||||||
|
color: var(--color-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-article-cta .h-article-cta__title {
|
@media (min-width: 1024px) and (max-width: 1204px) {
|
||||||
margin: 0 0 12px;
|
.h-article-cta__img{
|
||||||
padding: 0;
|
width: 40%;
|
||||||
font-size: 26px;
|
}
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.25;
|
|
||||||
color: var(--color-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-article-cta .h-article-cta__description {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
max-width: 520px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: var(--color-grey);
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-article-cta .h-article-cta__actions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 0 0 245px;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-article-cta .h-article-cta__btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 48px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 12px 20px;
|
|
||||||
border-radius: 50px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.3;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: background 0.2s, color 0.2s, border-color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-article-cta .h-article-cta__btn--outline {
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid var(--color-grey-light);
|
|
||||||
color: var(--color-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-article-cta .h-article-cta__btn--outline:hover {
|
|
||||||
background: var(--color-light);
|
|
||||||
border-color: var(--color-light);
|
|
||||||
color: var(--color-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-article-cta .h-article-cta__btn--white {
|
|
||||||
background: var(--color-light);
|
|
||||||
border: 1px solid var(--color-light);
|
|
||||||
color: var(--color-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-article-cta .h-article-cta__btn--white:hover {
|
|
||||||
background: var(--color-grey);
|
|
||||||
border-color: var(--color-grey);
|
|
||||||
color: var(--color-dark);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 767.98px) {
|
@media (max-width: 767.98px) {
|
||||||
.h-article-app-cta,
|
|
||||||
.h-article-cta{
|
.h-article-cta{
|
||||||
flex-direction: column;
|
margin: 30px 0;
|
||||||
|
|
||||||
|
padding: 24px 26px 32px 24px;
|
||||||
|
|
||||||
|
border-radius: 20px;
|
||||||
|
|
||||||
|
gap: 24px;
|
||||||
}
|
}
|
||||||
.h-article-cta .h-article-cta__content{
|
.h-article-cta__content{
|
||||||
width: 100%;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
.h-article-cta .h-article-cta__actions{
|
.h-article-cta__title{
|
||||||
width: 100%;
|
font-size: 18px;
|
||||||
flex: auto;
|
font-weight: 600;
|
||||||
|
line-height: 110%; /* 19.8px */
|
||||||
|
letter-spacing: -0.18px;
|
||||||
|
}
|
||||||
|
.h-article-cta__description{
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 150%; /* 21px */
|
||||||
|
letter-spacing: -0.14px;
|
||||||
|
}
|
||||||
|
.h-article-cta__c{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.h-article-cta__vec{
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.h-article-cta__img{
|
||||||
|
position: absolute;
|
||||||
|
right: 12px;
|
||||||
|
bottom: -40px;
|
||||||
|
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
width: 30vw;
|
||||||
|
height: 146px;
|
||||||
|
}
|
||||||
|
.h-article-cta__link{
|
||||||
|
padding: 14px 18px;
|
||||||
|
|
||||||
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="564" height="172" viewBox="0 0 564 172" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M13.8677 -8.83967C50.9356 -34.2577 96.8031 -44.4029 141.967 -37.1733C137.152 -46.6619 133.367 -56.609 130.676 -66.8452C124.516 -88.1061 122.659 -110.269 125.212 -132.053C127.765 -153.837 134.677 -174.811 145.55 -193.761C155.4 -212.8 169.037 -229.627 185.665 -243.259C202.293 -256.892 221.578 -267.057 242.395 -273.161C262.356 -278.591 283.34 -279.811 303.998 -276.742C324.655 -273.673 344.528 -266.383 362.34 -255.341C380.861 -245.381 397.166 -231.773 410.223 -215.382C423.279 -198.99 432.801 -180.172 438.184 -160.122C443.601 -138.994 444.675 -117.098 441.342 -95.742C438.009 -74.3856 430.337 -54.0061 418.784 -35.8193C395.266 2.50293 357.141 29.7488 312.731 39.9725C303.243 42.5243 293.503 44.1475 283.653 44.8189C312.144 80.9979 326.829 125.754 325.063 171.018L401.734 139.373C410.409 135.808 418.86 131.753 427.045 127.227C469.03 103.304 503.451 68.4976 526.68 26.4743C551.42 -14.5016 564.274 -61.5892 563.87 -109.761C562.994 -156.366 548.932 -202.086 523.274 -241.753C495.28 -283.54 457.857 -318.447 414.034 -343.649C370.212 -368.851 321.221 -383.64 271.028 -386.819C223.845 -389.214 177.217 -378.531 136.421 -355.98C94.5968 -332.381 60.2844 -297.886 37.1338 -256.165C12.4847 -215.07 -0.340884 -167.929 0.00684545 -119.703C0.33585 -109.983 1.23218 -100.278 2.69137 -90.6351L13.8677 -8.83967Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 304 KiB |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="179" height="174" viewBox="0 0 179 174" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M159.26 -4.57764e-05L73.2438 26.2509L-2.28876e-05 275.846L178.219 86.8585L159.26 -4.57764e-05Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 227 B |
@@ -2,8 +2,7 @@
|
|||||||
$fields = $args['fields'] ?? [];
|
$fields = $args['fields'] ?? [];
|
||||||
$title = $fields['title'] ?? '';
|
$title = $fields['title'] ?? '';
|
||||||
$text = $fields['text'] ?? '';
|
$text = $fields['text'] ?? '';
|
||||||
$link_1 = $fields['link_1'] ?? [];
|
$link = $fields['link'] ?? '';
|
||||||
$link_2 = $fields['link_2'] ?? [];
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="h-article-cta">
|
<div class="h-article-cta">
|
||||||
@@ -17,17 +16,14 @@ $link_2 = $fields['link_2'] ?? [];
|
|||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="h-article-cta__actions">
|
<img src="<?php echo get_theme_file_uri('assets/img/bg/cta-c.svg'); ?>" alt="приложение на телефоне" class="h-article-cta__c">
|
||||||
<?php if (!empty($link_1['link'])): ?>
|
<img src="<?php echo get_theme_file_uri('assets/img/bg/cta-vec.svg'); ?>" alt="приложение на телефоне" class="h-article-cta__vec">
|
||||||
<a href="<?php echo esc_url($link_1['link']); ?>" class="h-article-cta__btn h-article-cta__btn--outline">
|
|
||||||
<?php echo esc_html($link_1['text'] ?? ''); ?>
|
|
||||||
</a>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
<?php if (!empty($link_2['link'])): ?>
|
<img src="<?php echo get_theme_file_uri('assets/img/bg/cta-img.webp'); ?>" alt="приложение на телефоне" class="h-article-cta__img">
|
||||||
<a href="<?php echo esc_url($link_2['link']); ?>" class="h-article-cta__btn h-article-cta__btn--white">
|
|
||||||
<?php echo esc_html($link_2['text'] ?? ''); ?>
|
<?php if (empty($link['link'])): ?>
|
||||||
</a>
|
<a href="<?php echo esc_url($link['urk']); ?>" class="h-article-cta__link">
|
||||||
<?php endif; ?>
|
<?php echo esc_html($link['text'] ?? ''); ?>
|
||||||
</div>
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
Reference in new issue
Block a user