task 17075 | переделал h-article-app-cta
This commit is contained in:
web_103.2 committed
1 parent
7276d6af44
commit
a628f5ced7
4 files changed
+119
-81
No files matched your search
@@ -6537,86 +6537,123 @@ h4 {
|
||||
}
|
||||
}
|
||||
|
||||
.h-article-app-cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
box-sizing: border-box;
|
||||
margin: 30px 0;
|
||||
padding: 18px 32px;
|
||||
border-radius: 16px;
|
||||
background: var(--color-red);
|
||||
font-family: inherit;
|
||||
}
|
||||
.h-article-app-cta{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
padding: 40px;
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
border-radius: 40px;
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.h-article-app-cta::before{
|
||||
content: '';
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__title {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
color: var(--color-light);
|
||||
z-index: -10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: linear-gradient(180deg, #F5F5F9 0%, #F9F9F9 100%);
|
||||
}
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 145px;
|
||||
min-height: 40px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px;
|
||||
border: 0;
|
||||
border-radius: 50px;
|
||||
background: var(--color-light);
|
||||
color: var(--color-dark);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
.h-article-app-cta__content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
.h-article-app-cta__title{
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
line-height: 110%; /* 33px */
|
||||
letter-spacing: -0.3px;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
.h-article-app-cta__text{
|
||||
max-width: 349px;
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__button:hover {
|
||||
background: var(--color-grey);
|
||||
font-size: 20px;
|
||||
line-height: 150%; /* 30px */
|
||||
letter-spacing: -0.2px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.h-article-app-cta__img{
|
||||
z-index: -5;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.h-article-app-cta__link{
|
||||
padding: 20px 24px;
|
||||
|
||||
border-radius: 60px;
|
||||
background: #AE001B;
|
||||
box-shadow: 20px 24px 44px 0 rgba(217, 217, 217, 0.25);
|
||||
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 120%;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-article-app-cta .h-article-app-cta__title{
|
||||
font-size: 16px;
|
||||
.h-article-app-cta{
|
||||
padding: 24px 26px 40px 24px;
|
||||
}
|
||||
.h-article-app-cta__content{
|
||||
gap: 12px;
|
||||
}
|
||||
.h-article-app-cta__title{
|
||||
font-size: 18px;
|
||||
line-height: 110%; /* 19.8px */
|
||||
letter-spacing: -0.18px;
|
||||
}
|
||||
.h-article-app-cta__text{
|
||||
max-width: 100%;
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__button{
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 150%; /* 21px */
|
||||
letter-spacing: -0.14px;
|
||||
}
|
||||
.h-article-app-cta__img{
|
||||
z-index: -5;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
|
||||
flex:auto;
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to right,
|
||||
#000 60%,
|
||||
transparent 100%
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
#000 60%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
.h-article-app-cta__link{
|
||||
padding: 14px 18px;
|
||||
|
||||
border-radius: 60px;
|
||||
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 670.98px) {
|
||||
.h-article-app-cta{
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.h-article-author {
|
||||
display: flex;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
@@ -1,31 +1,32 @@
|
||||
<?php
|
||||
$fields = $args['fields'] ?? [];
|
||||
$image = $fields['img'] ?? [];
|
||||
$text = $fields['text'] ?? '';
|
||||
$title = $fields['title'] ?? '';
|
||||
$link = $fields['link'] ?? [];
|
||||
?>
|
||||
|
||||
<div class="h-article-app-cta">
|
||||
<?php if ($image): ?>
|
||||
<div class="h-article-app-cta__image">
|
||||
<img
|
||||
src="<?php echo esc_url($image['url']); ?>"
|
||||
alt="<?php echo esc_attr($image['alt'] ?? ''); ?>"
|
||||
width="90"
|
||||
height="90"
|
||||
>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="h-article-app-cta__content">
|
||||
<?php if ($title): ?>
|
||||
<p class="h-article-app-cta__title"><?php echo nl2br(esc_html($title)); ?></p>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($text): ?>
|
||||
<div class="h-article-app-cta__content">
|
||||
<p class="h-article-app-cta__title"><?php echo nl2br(esc_html($text)); ?></p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($text): ?>
|
||||
<p class="h-article-app-cta__text"><?php echo nl2br(esc_html($text)); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php if (!empty($link['link'])): ?>
|
||||
<a href="<?php echo esc_url($link['link']); ?>" class="h-article-app-cta__button">
|
||||
<a href="<?php echo esc_url($link['link']); ?>" class="h-article-app-cta__link">
|
||||
<?php echo esc_html($link['text'] ?? ''); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<picture class="h-article-app-cta__img">
|
||||
<source
|
||||
media="(max-width: 767.98px)"
|
||||
srcset="<?php echo get_theme_file_uri('assets/img/bg/app-cta-phone.webp'); ?>"
|
||||
>
|
||||
<img src="<?php echo get_theme_file_uri('assets/img/bg/app-cta.webp'); ?>" alt="Изображение">
|
||||
</picture>
|
||||
</div>
|
||||
Reference in new issue
Block a user