task 17075 | переделал h-article-quote
This commit is contained in:
web_103.2 committed
1 parent
b86e5a7c55
commit
ee73d51a36
3 files changed
+117
-47
No files matched your search
@@ -32,6 +32,7 @@
|
||||
--color-red: #ae001b;
|
||||
--color-red-dark: #9a081e;
|
||||
--gradient-grey: linear-gradient(180deg, #f5f5f9 0%, #f9f9f9 100%);
|
||||
--color-white: #fff;
|
||||
}
|
||||
|
||||
:root {
|
||||
@@ -6247,65 +6248,114 @@ h4 {
|
||||
}
|
||||
|
||||
.h-article-quote {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 30px 0;
|
||||
padding: 28px 16px;
|
||||
border-radius: 14px;
|
||||
background: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
font-family: inherit;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
margin: 60px 0;
|
||||
|
||||
min-height: 216px;
|
||||
padding: 40px 40px 40px 240px;
|
||||
|
||||
border-radius: 40px;
|
||||
background: linear-gradient(148deg, #29292D 19.01%, #083743 100.4%)
|
||||
}
|
||||
.h-article-quote::before{
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
top: -36px;
|
||||
right: 40px;
|
||||
|
||||
width: 174px;
|
||||
height: 128px;
|
||||
|
||||
background-image: url(../img/bg/arrow-q.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__avatar {
|
||||
display: block;
|
||||
flex: 0 0 90px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
.h-article-quote__avatar {
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
left: -38px;
|
||||
|
||||
max-width: 250px;
|
||||
max-height: 250px;
|
||||
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
.h-article-quote__body {
|
||||
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__author {
|
||||
margin: 0 0 6px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: var(--color-light);
|
||||
.h-article-quote__author {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
line-height: 110%; /* 28.6px */
|
||||
letter-spacing: -0.26px;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__text {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 1.3;
|
||||
color: var(--color-light);
|
||||
.h-article-quote__job{
|
||||
margin-top: 8px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 110%; /* 15.4px */
|
||||
letter-spacing: -0.14px;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.h-article-quote__text {
|
||||
margin-top: 24px;
|
||||
|
||||
font-size: 20px;
|
||||
line-height: 150%; /* 30px */
|
||||
letter-spacing: -0.2px;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-article-quote{
|
||||
padding: 12px 14px;
|
||||
min-height: auto;
|
||||
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
padding: 180px 24px 20px 24px;
|
||||
}
|
||||
.h-article-quote::before{
|
||||
top: 52px;
|
||||
right: -22px;
|
||||
}
|
||||
.h-article-quote__avatar{
|
||||
top: -25px;
|
||||
left: -20px;
|
||||
|
||||
width: 189px;
|
||||
height: 189px;
|
||||
}
|
||||
.h-article-quote__author {
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.16px;
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__text{
|
||||
.h-article-quote__job{
|
||||
margin-top: 6px;
|
||||
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.13px;
|
||||
}
|
||||
|
||||
.h-article-quote__text {
|
||||
margin-top: 16px;
|
||||
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.14px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6338,6 +6388,8 @@ h4 {
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-article-cards{
|
||||
margin: 30px 0;
|
||||
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
<svg width="174" height="128" viewBox="0 0 174 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.2">
|
||||
<path d="M113.859 128L98.374 104.773C102.928 102.344 107.483 99.004 112.037 94.7532C116.895 90.1989 121.298 85.3409 125.245 80.1793C129.192 75.0177 131.924 70.3116 133.443 66.0608C124.637 65.4536 117.199 62.2655 111.126 56.4967C105.357 50.7279 102.473 42.9855 102.473 33.2695C102.473 22.3391 105.965 13.9894 112.948 8.2206C119.931 2.45176 128.281 -0.280848 137.997 0.0227712C150.445 0.0227712 159.402 4.57713 164.868 13.6858C170.636 22.7945 173.521 33.1177 173.521 44.6554C173.521 57.4076 170.636 69.5525 164.868 81.0902C159.099 92.3243 151.66 102.04 142.551 110.238C133.746 118.436 124.182 124.357 113.859 128ZM15.4849 128L0.00012207 104.773C4.25085 102.344 8.80519 99.004 13.6632 94.7532C18.5211 90.1989 22.9237 85.3409 26.8708 80.1793C30.8179 75.0177 33.5505 70.3116 35.0686 66.0608C26.2635 65.4536 18.8248 62.2655 12.7523 56.4967C6.98345 50.7279 4.09902 42.9855 4.09902 33.2695C4.09902 22.3391 7.5907 13.9894 14.574 8.2206C21.5574 2.45176 29.907 -0.280848 39.6229 0.0227712C51.7679 0.0227712 60.573 4.57713 66.0382 13.6858C71.807 22.7945 74.6914 33.1177 74.6914 44.6554C74.6914 57.4076 71.807 69.5525 66.0382 81.0902C60.573 92.3243 53.286 102.04 44.1773 110.238C35.0686 118.436 25.5045 124.357 15.4849 128Z" fill="url(#paint0_linear_4_4288)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_4_4288" x1="86.7605" y1="0" x2="86.7605" y2="128" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.25"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -2,6 +2,7 @@
|
||||
$fields = $args['fields'] ?? [];
|
||||
$image = $fields['img'] ?? [];
|
||||
$name = $fields['name'] ?? '';
|
||||
$job = $fields['job'] ?? '';
|
||||
$text = $fields['text'] ?? '';
|
||||
?>
|
||||
|
||||
@@ -11,16 +12,22 @@ $text = $fields['text'] ?? '';
|
||||
class="h-article-quote__avatar"
|
||||
src="<?php echo esc_url($image['url']); ?>"
|
||||
alt="<?php echo esc_attr($image['alt'] ?? ''); ?>"
|
||||
width="90"
|
||||
height="90"
|
||||
width="250"
|
||||
height="250"
|
||||
>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="h-article-quote__body">
|
||||
<?php if ($name): ?>
|
||||
<div class="h-article-quote__author">
|
||||
<p class="h-article-quote__author">
|
||||
<?php echo esc_html($name); ?>
|
||||
</div>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($job): ?>
|
||||
<p class="h-article-quote__job">
|
||||
<?php echo esc_html($job); ?>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($text): ?>
|
||||
|
||||
Reference in new issue
Block a user