[html]<style>@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
.anders_wrapper {
--bg: transparent; /* общий фон, можно ставить цветом*/
--card-bg: #9ea0b2; /* фон под текстом карточек */
--text: #292929; /* цвет текста */
--accent: #babfdd; /* акцентный цвет */
--shadow: 4px 4px 15px rgba(0, 0, 0, 0.08); /* тень карточки */
--radius: 40px; /* радиус скругления */
--padding: 25px 30px; /* осттупы */
--font: 400 12px/150% 'Noto Sans Display'; /* шрифт */
--overlay: linear-gradient(180deg, transparent 0%, #d5d6d7 70%); /* градиент на тексте, ставить цвет фона под текстом */
--w: 250px; /* ширина карточки */
--h: 350px; /* высота карточки */
--h-container: 250px; /* высота контейнера с текстом */
}
.anders_wrapper {
width: 100%;
height: auto;
padding: 30px;
background: var(--bg);
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
box-sizing: border-box
}
.anders_card-wrap {
background: var(--card-bg);
border-radius: var(--radius);
width: var(--w);
overflow: hidden;
height: var(--h);
position: relative;
font: var(--font);
}
.andres_img img {
width: var(--w);
height: calc(var(--h) - 110px);
object-fit: cover;
}
.anders_container {
background: var(--card-bg);
position: absolute;
bottom: -100px;
border-radius: var(--radius) 0 0 0;
width: 100%;
height: var(--h-container);
padding: var(--padding);
box-sizing: border-box;
transition: all .3s cubic-bezier(0.78, 0.01, 0.47, 0.99) 0s !important;
}
.anders_angle {
position: absolute;
top: -45px;
right: 0px;
width: 50px;
height: 45px;
}
.anders_angle path {
fill: var(--card-bg);
d: path("M0.0979309 44.9119L0 45H3H50V0L49.9566 0.039093C48.8889 25.0505 28.2742 45 3 45C2.02544 45 1.05779 44.9703 0.0979309 44.9119Z");
}
.anders_container span {
color: var(--accent);
font-size: 15px;
font-weight: 800;
display: flex;
flex-direction: column;
gap: 3px;
margin-bottom: 10px;
}
.anders_container em {
font-style: normal;
display: block;
opacity: .75;
color: var(--text);
font-size: 11px;
font-weight: 400;
}
.anders_desc {
text-align: justify;
margin-bottom: 25px;
height: calc(var(--h-container) - 100px);
overflow-y: auto;
padding-right: 10px;
position: relative;
}
.anders_desc p {
padding: 0 !important;
margin: 0 !important;
font: var(--font) !important;
}
.anders_desc p + p {
margin-top: 15px !important;
}
.anders_card-wrap:after {
content: "";
background: var(--overlay);
display: block;
width: 100%;
height: 100px;
z-index: 5;
bottom: 0px;
left: 0;
position: absolute;
transition: all .3s cubic-bezier(0.78, 0.01, 0.47, 0.99) 0s !important;
}
.anders_card-wrap:hover .anders_container {
bottom: 0;
}
.anders_card-wrap:hover:after {
height: 0px
}
</style>
<div class="anders_wrapper">
<div class="anders_card-wrap">
<div class="andres_img">
<img src="https://i.pinimg.com/564x/48/d7/e9/48d7e9154aaf3551a6ecc781933b336b.jpg">
</div>
<div class="anders_container">
<svg class="anders_angle" xmlns="http://www.w3.org/2000/svg"><path></path></svg>
<span>Оливия Файрболт, 40
<em>Rebecca Ferguson</em>
</span>
<div class="anders_desc">
<p>
•Сирота, потеряла родителей, убитых Пожирателями Смерти во время их владычества.
<br>•Долгое время после падения Волдеморта была одержима идей мести тем, кто лишил жизни её родителей.
<br>•Придерживается исключительно радикальных взглядов, всё ещё ненавидит бывших Пожирателей Смерти.
<br> •Ощущает сильнейшую усталость от магии, в последнее время всё чаще задумывается, а так ли необходимо в жизни волшебство?
</p>
</div>
</div>
</div>
<div class="anders_card-wrap">
<div class="andres_img">
<img src="https://i.pinimg.com/564x/ba/f2/87/baf2871c0465d8e28fe0b6d1bf87c7d7.jpg">
</div>
<div class="anders_container">
<svg class="anders_angle" xmlns="http://www.w3.org/2000/svg"><path></path></svg>
<span>Айзек Уолш, 50
<em>Vincent Cassel</em>
</span>
<div class="anders_desc">
<p> •Маггл обыкновенный, при этом отец дочери-волшебницы.
<br>•Впервые услышал о магии и волшебниках после того, как дочь на его глазах превратила агрессивного бродячего пса в жабу.
<br>•Сдал дочь в приют после этого случая, до сих пор уверен, что магия в человеке - синоним проклятья, готов общаться и иметь дело только с магами, готовыми искупить свой дар.
<br> • До фанатичности религиозен, завсегдатай храмов, соблюдает все церковные традиции.
</p>
</div>
</div>
</div>
<div class="anders_card-wrap">
<div class="andres_img">
<img src="https://i.pinimg.com/564x/0d/b2/ed/0db2ed4cb8e8415d3de3a678d04bbeac.jpg">
</div>
<div class="anders_container">
<svg class="anders_angle" xmlns="http://www.w3.org/2000/svg"><path></path></svg>
<span>Гарри Поттер, 39
<em>Daniel Radcliffe</em>
</span>
<div class="anders_desc">
<p> •Знаменитый герой волшебного мира, дважды победитель Тёмного Лорда.
<br>•Устал от собственной славы и необходимости всегда поддерживать имидж героя и символа победы.
<br>•Возглавляет аврорат, яростно ненавидит Пожирателей смерти и прочих тёмных магов.
<br> • Считает, что навести порядок в стране можно только строго следуя букве закона, не понимает и не приемлет идей и методов Веритаса.
</p>
</div>
</div>
</div>
<div class="anders_card-wrap">
<div class="andres_img">
<img src="https://i.pinimg.com/enabled_lo/564x/f3/b8/89/f3b889796a162e679788a4a555df0c06.jpg">
</div>
<div class="anders_container">
<svg class="anders_angle" xmlns="http://www.w3.org/2000/svg"><path></path></svg>
<span>Гермиона Грейнджер, 39
<em>Emma Watson</em>
</span>
<div class="anders_desc">
<p>
•Самая умная волшебница своего времени.
<br>•Занимает пост Министра Магии, стареется объективно и мудро управлять магической Британией.
<br>•Идеалистка, всё ещё верит в то, что в мире всё делится на чёрное и белое, хорошее и плохое.
<br> •Делает всё, чтобы скоординировать работу разрозненного Министерства в нынешних непростых условиях и навести порядок в стране.
</p>
</div>
</div>
</div>
<div class="anders_card-wrap">
<div class="andres_img">
<img src="https://i.pinimg.com/564x/a2/27/b8/a227b84688b1e67c355204307c4b683f.jpg">
</div>
<div class="anders_container">
<svg class="anders_angle" xmlns="http://www.w3.org/2000/svg"><path></path></svg>
<span>Теодор Нотт, 39
<em>Keanu Reeves</em>
</span>
<div class="anders_desc">
<p> •Экс-глава Отдела Тайн, фанатичный идей сторонник Тёмного Лорда .
<br>• В 2007 организовал массовый побег товарищей.
<br>•Беглый преступник вне закона, которого разыскивают официальные власти.
<br> •Умён насколько, что мог бы учиться на Рейвенкло, но в итоге амбиции перевесили, поэтому был отправлен Распределяющей Шляпой на Слизерин.
</p>
</div>
</div>
</div>
<div class="anders_card-wrap">
<div class="andres_img">
<img src="https://i.pinimg.com/564x/69/f4/57/69f457a9764695b39dfa983a8f870a9f.jpg">
</div>
<div class="anders_container">
<svg class="anders_angle" xmlns="http://www.w3.org/2000/svg"><path></path></svg>
<span>Кристал Скитер, 25
<em>Samara Weaving</em>
</span>
<div class="anders_desc">
<p>
•Родная племянница Риты Скитер, имя которой у каждого на слуху.
<br>•Дитя улиц, сбежала в раннем детстве от асоциальных родителей.
<br>•Владелица магазина MSAW AETARE в Лютном Переулке, который превратила в небольшой приют для детей-сирот
<br> • Заботится о таких же, как она сама когда-то, детях улиц, организовала при приюте столовую, , где каждый несовершеннолетний бездомный может получить еду.
</p>
</div>
</div>
</div>
<div class="anders_card-wrap">
<div class="andres_img">
<img src="https://i.pinimg.com/564x/c6/12/c0/c612c09ee21fc11009201c132b2cb246.jpg">
</div>
<div class="anders_container">
<svg class="anders_angle" xmlns="http://www.w3.org/2000/svg"><path></path></svg>
<span>Джонатан Шадоу, 35
<em>Freddy Carter</em>
</span>
<div class="anders_desc">
<p> •Всё образование – пять курсов Хогварса.
<br>•С детства вращается в среде криминалитета, её от и до.
<br>•Король Лютного переулка, держит в железном кулаке всех его обитателей и преступный мир, перспективе подумывает о том, чтобы приторговывать имеющейся у него информацией, сливая её властям и журналистам.
<br> •Жестокий, властный мужчина с железной силой воли и огромными амбициями.
</p>
</div>
</div>
</div>
<div class="anders_card-wrap">
<div class="andres_img">
<img src="https://i.pinimg.com/564x/a2/6d/fb/a26dfbb1210f9bbaf0e446f35d47a083.jpg">
</div>
<div class="anders_container">
<svg class="anders_angle" xmlns="http://www.w3.org/2000/svg"><path></path></svg>
<span>Мари Голдштейн, 35
<em>Florence Pugh</em>
</span>
<div class="anders_desc">
<p>
•Дальний потомок тех самых сестёр Голдштейн.
<br>•Журналистка с острым пером - WonderFox, статьи которой пользуются большой популярностью.
<br>•Панически боится магглов, считает, что от них лучше держаться подальше.
<br> •Ненавидит маггловскую одежду, опасается любых маггловских технических новинок.
</p>
</div>
</div>
</div>
</div>[/html]
автор скрипта Frenchie
