diff --git a/wp-content/themes/hantico/assets/css/style.css b/wp-content/themes/hantico/assets/css/style.css index 8039b4f..c83bd14 100644 --- a/wp-content/themes/hantico/assets/css/style.css +++ b/wp-content/themes/hantico/assets/css/style.css @@ -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; } diff --git a/wp-content/themes/hantico/assets/img/bg/arrow-q.svg b/wp-content/themes/hantico/assets/img/bg/arrow-q.svg new file mode 100644 index 0000000..bfdfee7 --- /dev/null +++ b/wp-content/themes/hantico/assets/img/bg/arrow-q.svg @@ -0,0 +1,11 @@ + diff --git a/wp-content/themes/hantico/template-parts/article-blocks/quote.php b/wp-content/themes/hantico/template-parts/article-blocks/quote.php index b15ee93..46e22c9 100644 --- a/wp-content/themes/hantico/template-parts/article-blocks/quote.php +++ b/wp-content/themes/hantico/template-parts/article-blocks/quote.php @@ -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="" alt="" - width="90" - height="90" + width="250" + height="250" >
+ +