bleach
[html]
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card with Split Effect</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.card {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
border-radius: 140px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background-image: url('https://i.pinimg.com/736x/7a/2a/54/7a2a54337c416b8ccc41de01aae741e9.jpg'); /* Задняя картинка */
background-size: cover;
background-position: center;
}
.card .back-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
font-weight: bold;
text-align: center;
z-index: 1;
}
.card .split-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
z-index: 2;
}
.split-left,
.split-right {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform 0.5s ease;
}
.split-left {
left: 0;
background-image: url('https://forumupload.ru/uploads/001a/0e/b9/2/290417.png'); /* Левое изображение */
transform: translateX(0);
}
.split-right {
right: 0;
background-image: url('https://forumupload.ru/uploads/001a/0e/b9/2/221691.png'); /* Правое изображение */
transform: translateX(0);
}
.card:hover .split-left {
transform: translateX(-100%);
}
.card:hover .split-right {
transform: translateX(100%);
}
</style>
</head>
<body>
<div class="container">
<div class="card" id="card">
<div class="back-text"></div>
<div class="split-image">
<div class="split-left"></div>
<div class="split-right"></div>
</div>
</div>
</div>
<!-- Музыкальное сопровождение -->
<audio id="audio">
<source src="https://zvukipro.com/uploads/files/2021-03/1616136708_e983b685457ea20.mp3" type="audio/mpeg">
Ваш браузер не поддерживает элемент <code>audio</code>.
</audio>
<script>
const card = document.getElementById('card');
const audio = document.getElementById('audio');
card.addEventListener('mouseenter', () => {
audio.play().catch(err => console.error('Ошибка воспроизведения:', err));
});
card.addEventListener('mouseleave', () => {
audio.pause();
audio.currentTime = 0; // Сброс воспроизведения
});
</script>
</body>
[/html]
Лиза и Нанао…
Как же часто, размышляя в одиночестве, я возвращаюсь мыслями к ним обеим, к этим двум удивительным женщинам, таким разным и в то же время до глубины души схожим, словно два зеркала, отражающие одно и то же, но под разным углом. Лиза, та, что всегда несла в себе бурю, была для меня воплощением непримиримой свободы, силы, которая приходит внезапно, как ветер, сменяющий направление без предупреждения, но при этом приносит свежесть, пробуждающую жизнь. А Нанао, столь же сильная, но иная, будто тихая, глубокая река, чьи воды никогда не покажут всей своей глубины с первого взгляда, — она всегда была рядом, ее присутствие обволакивало, придавало уверенности и покоя, какой-то странной устойчивости посреди хаоса.
И всё же, несмотря на их явные различия, я не могу не видеть, как много общего в том, какими они были для меня, какими остались в моих мыслях. Лиза, со своим дерзким взглядом и словами, что словно меч, могли ранить, но при этом всегда несли истину, была для меня напоминанием о том, что жизнь не терпит слабости, что нужно быть готовым встретить любой вызов. Нанао же, со своей тихой настойчивостью и способностью мягко, но уверенно подталкивать меня к правильным решениям, казалась воплощением мудрости, которая всегда знала, когда лучше промолчать, а когда сказать всего пару слов, но таких, что они оставались в голове надолго.
Как удивительно, что обе они, каждая по-своему, сумели стать для меня чем-то большим, чем просто лейтенанты или спутницы. Лиза была яркой вспышкой, огнем, что согревал, но при этом мог обжечь, если подойти слишком близко. Её энергия, её непокорность, её умение жить здесь и сейчас — всё это напоминало мне о временах, когда я сам был моложе, дерзновеннее, когда мир казался местом, где нужно сражаться за каждое мгновение.
А Нанао… Ах, Нанао! Её спокойная строгость, её способность молча выдерживать все мои странности и при этом оставаться верной самой себе, была для меня как камень, на который можно опереться, когда всё вокруг рушится. Она никогда не пыталась быть в центре внимания, но её тишина, её спокойная уверенность были тем, что часто удерживало меня от того, чтобы потеряться в собственных мыслях, в сомнениях или в страхах.
И всё же, несмотря на их различия, я вижу, как они схожи в самом главном: в их способности заботиться, даже тогда, когда им самим, возможно, было тяжело. Лиза прятала эту заботу за резкими словами и демонстративной независимостью, словно пыталась доказать всем, что ей ничего и никто не нужен. Но я всегда знал, что под этой броней скрывается нежное и ранимое сердце, готовое отдать всё ради тех, кого она любит. Нанао же, напротив, открыто несла эту заботу, но делала это так ненавязчиво, так естественно, что иногда мне казалось, будто её преданность — это часть самой вселенной, такая же постоянная, как свет солнца или смена времён года.
Когда я думаю о них, о том, как каждая из них дополнила мою жизнь, я не могу не испытывать благодарности. Лиза научила меня не бояться жить, рисковать, даже если этот риск кажется безрассудным. Нанао же научила меня видеть красоту в повседневности, в том, чтобы ценить тишину, ценить те моменты, когда не нужно ничего говорить, чтобы понять друг друга.
И, наверное, именно поэтому, думая о них, я не могу представить их иначе, как две противоположные, но взаимодополняющие силы, две части одного целого. Лиза и Нанао… Словно день и ночь, как солнце и луна — они каждая по-своему освещают этот мир, и, несмотря на их различия, я знаю, что без одной из них этот мир был бы неполным.
Как мне повезло, что я знал их обеих.
дополнительная информация: хочется поиграть отцовские взаимоотношения, как в рамках канона, так и в аушках , поесть стекла, поплакать, посмеяться, все, что захотите, только не брейте мою грудь...
