ᴀᴄᴛ#𝟣. ᴄᴀɴᴏɴ ᴘʀᴛᴄʟ

Поделиться12026-03-11 03:58:05

Автор: IRO
Администратор
Сообщений: 91
Уважение: [+0/-0]
Последний визит:
2026-04-09 15:46:46

Джемма Роген
Сайлас Доу
Кэл махелона
Норман Эшли
Киаран Блайт
Теодор Купер
Брайан Суини
Аарон Райс
Фелипе Перейра
Винсент Перейра
Лео Спилиотис

0

Поделиться22026-03-14 17:48:46

Автор: IRO
Администратор
Сообщений: 91
Уважение: [+0/-0]
Последний визит:
2026-04-09 15:46:46

[html]<style>
@font-face {
font-family: 'StaatlichesForum';
src: url('https://forumstatic.ru/files/001c/8f/61/11649.woff2?v=1') format('woff2');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'GothamBoldForum';
src: url('https://forumstatic.ru/files/001c/8f/61/40885.woff2?v=1') format('woff2');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'GothamLightForum';
src: url('https://forumstatic.ru/files/001c/8f/61/16078.woff2?v=1') format('woff2');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'GothamBook';
src: url('https://forumstatic.ru/files/001c/8f/61/70627.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

.iro-card-wrap {
width: 70%;
max-width: 900px;
margin: 8px auto 18px auto;
box-sizing: border-box;
}

.iro-frame {
position: relative;
width: calc(100% - 56px);
margin: 0 auto;
padding-top: 56px;
box-sizing: border-box;
}

/* ОСНОВНАЯ КАРТОЧКА */
.iro-card-main {
position: relative;
width: 100%;
background: #ececec;
border-radius: 38px;
box-sizing: border-box;
overflow: visible;
z-index: 1;
}

.iro-card-inner {
display: flex;
align-items: stretch;
gap: 4.2%;
padding: 0 5.2% 0 3.2%;
box-sizing: border-box;
}

/* ФОТО */
.iro-photo {
position: relative;
width: 38%;
max-width: 340px;
min-width: 220px;
aspect-ratio: 0.60 / 1;
margin-top: -62px;
margin-bottom: 22px;
border-radius: 28px;
overflow: hidden;
flex: 0 0 auto;
background: #8f8f8f;
background-image: url('https://64.media.tumblr.com/437707e1eb340be23c182753b055358d/049831fbd0c37e63-3e/s400x600/bc231d67cb33bc54562037969233ac61cb76213d.gifv');
background-size: cover;
background-position: center center;
z-index: 2;
}

.iro-photo::before {
content: "";
position: absolute;
inset: 0;
background-image: inherit;
background-size: cover;
background-position: center center;
filter: grayscale(100%);
transform: scale(1.02);
}

.iro-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(76,76,76,0) 0%, rgba(76,76,76,0.08) 45%, rgba(76,76,76,0.95) 100%);
z-index: 2;
}

.iro-photo-caption {
position: absolute;
left: 8%;
bottom: 6.5%;
z-index: 3;
width: 84%;
color: #ffffff;
font-family: 'GothamLightForum', Arial, sans-serif;
font-size: clamp(11px, 1.2vw, 14px);
line-height: 1.45;
letter-spacing: 1.7px;
text-transform: uppercase;
box-sizing: border-box;
}

/* ПРАВАЯ ЧАСТЬ */
.iro-content {
position: relative;
flex: 1 1 auto;
padding: 46px 0 46px 0;
box-sizing: border-box;
min-width: 0;
}

.iro-canon {
position: absolute;
top: -18px;
right: 9.5%;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 138px;
height: 38px;
padding: 0 22px;
background: #4c4c4c;
color: #ffffff;
border-radius: 14px;
font-family: 'GothamLightForum', Arial, sans-serif;
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
box-sizing: border-box;
z-index: 7;
}

.iro-label {
font-family: 'GothamBoldForum', Arial, sans-serif;
font-size: clamp(18px, 1.7vw, 27px);
line-height: 1.1;
color: #4c4c4c;
text-transform: uppercase;
margin-top: 30px;
margin-bottom: 3px;
}

.iro-name-en {
font-family: 'StaatlichesForum', Arial, sans-serif;
font-size: clamp(44px, 5.4vw, 78px);
line-height: 0.95;
color: #4c4c4c;
text-transform: uppercase;
margin-bottom: 3px;
word-break: break-word;
}

.iro-name-ru {
font-family: 'GothamLightForum', Arial, sans-serif;
font-size: clamp(16px, 2vw, 46px);
line-height: 1;
color: #666666;
text-transform: uppercase;
margin-bottom: 28px;
word-break: break-word;
}

.iro-text {
max-width: 520px;
font-family: 'GothamLightForum', Arial, sans-serif;
font-size: clamp(20px, 2.2vw, 32px);
line-height: 1.36;
color: #6b6b6b;
font-style: italic;
}

/* НИЖНИЕ ПЛАШКИ */
.iro-bottom-wrap {
position: relative;
width: 100%;
margin: 22px auto 0 auto;
}

.iro-bottom {
display: flex;
flex-wrap: wrap;
gap: 18px;
justify-content: center;
box-sizing: border-box;
}

.iro-pill {
min-width: 120px;
padding: 0 26px;
height: 30px;
background: #4c4c4c;
color: #ffffff;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
font-family: 'GothamLightForum', Arial, sans-serif;
font-size: 11px;
line-height: 1;
letter-spacing: 3px;
text-transform: uppercase;
}

/* СТРЕЛКИ: ВСЕ ПРИВЯЗАНЫ К ОДНОЙ РАМКЕ */
.iro-corner {
position: absolute;
width: 38px;
height: 38px;
pointer-events: none;
z-index: 6;
}

.iro-corner.tr {
top: 45px;
right: -18px;
border-top: 6px solid #f2f2f2;
border-right: 6px solid #f2f2f2;
}

.iro-corner.bl {
left: -18px;
bottom: 0px;
border-bottom: 6px solid #f2f2f2;
border-left: 6px solid #f2f2f2;
}

.iro-corner.br {
right: -18px;
bottom: 0px;
border-bottom: 6px solid #f2f2f2;
border-right: 6px solid #f2f2f2;
}

/* ПЛАНШЕТ */
@media (max-width: 900px) {
.iro-frame {
width: calc(100% - 28px);
padding-top: 58px;
}

.iro-card-main {
border-radius: 30px;
}

.iro-card-inner {
gap: 24px;
padding: 0 22px 26px 22px;
}

.iro-photo {
width: 43%;
min-width: 220px;
margin-top: -52px;
border-radius: 24px;
}

.iro-content {
padding: 36px 0 24px 0;
}

.iro-canon {
min-width: 150px;
height: 42px;
margin-bottom: 28px;
font-size: 13px;
letter-spacing: 4px;
}

.iro-pill {
min-width: 145px;
height: 44px;
font-size: 13px;
letter-spacing: 2.5px;
}

.iro-corner {
width: 32px;
height: 32px;
}

.iro-corner.tl {
top: 108px;
left: -12px;
}

.iro-corner.tr {
top: 26px;
right: -12px;
}

.iro-corner.bl {
left: -12px;
bottom: 72px;
}

.iro-corner.br {
right: -12px;
bottom: 58px;
}
}

/* ТЕЛЕФОН */
@media (max-width: 680px) {
.iro-card-wrap {
margin: 18px auto;
}

.iro-frame {
width: calc(100% - 18px);
padding-top: 34px;
}

.iro-card-main {
border-radius: 24px;
}

.iro-card-inner {
display: block;
padding: 0 16px 22px 16px;
}

.iro-photo {
width: 100%;
max-width: none;
min-width: 0;
aspect-ratio: 0.9 / 1;
margin-top: -28px;
border-radius: 20px;
}

.iro-content {
padding: 22px 2px 4px 2px;
}

.iro-canon {
min-width: 135px;
height: 38px;
padding: 0 20px;
margin: 0 0 22px auto;
border-radius: 14px;
font-size: 12px;
letter-spacing: 3px;
}

.iro-name-en {
line-height: 0.98;
}

.iro-name-ru {
margin-bottom: 20px;
}

.iro-text {
max-width: 100%;
}

.iro-bottom-wrap {
margin-top: 16px;
}

.iro-bottom {
gap: 12px;
}

.iro-pill {
min-width: calc(50% - 6px);
width: calc(50% - 6px);
padding: 0 10px;
font-size: 11px;
letter-spacing: 2px;
}

.iro-corner {
width: 26px;
height: 26px;
border-width: 5px !important;
}

.iro-corner.tl {
top: 74px;
left: -6px;
}

.iro-corner.tr {
top: 14px;
right: -6px;
}

.iro-corner.bl {
left: -6px;
bottom: 56px;
}

.iro-corner.br {
right: -6px;
bottom: 46px;
}
}

.iro-body-text {
width: 100%;
margin: 22px auto 0 auto;
column-count: 2;
column-gap: 28px;
font-family: 'GothamBook', Arial, sans-serif;
font-size: 13px;
line-height: 1.32;
color: #4c4c4c;
text-align: left;
}

.iro-body-text p {
margin: 0 0 12px 0;
}

@media (max-width: 680px) {
.iro-body-text {
column-count: 1;
column-gap: 0;
margin-top: 18px;
font-size: 14px;
line-height: 1.38;
}
}

</style>

<div class="iro-card-main">
<div class="iro-card-inner">
<div class="iro-photo">
<div class="iro-photo-caption">
CANSU DERE<br>
ELZA GONZALEZ<br>
STEFFY ARGELICH И ДР.
</div>
</div>

<div class="iro-content">
<div class="iro-canon">СВОБОДНА</div>
<div class="iro-label">АГЕНТ IRO</div>
<div class="iro-name-en">GEMMA ROGEN</div>
<div class="iro-name-ru">ДЖЕММА РОГЕН, 29</div>
<div class="iro-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
</div>
</div>
</div>

<div class="iro-bottom-wrap">
<div class="iro-bottom">
<div class="iro-pill">ЛИКВИДАЦИЯ</div>
<div class="iro-pill">ЗАПАДНЫЙ ОФИС</div>
<div class="iro-pill">V РАНГ</div>
</div>
</div>

<div class="iro-body-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
</p>
</div>

</div>
</div>[/html]

0

Поделиться32026-03-14 23:42:40

Автор: IRO
Администратор
Сообщений: 91
Уважение: [+0/-0]
Последний визит:
2026-04-09 15:46:46