Парный анимированный блок

Инструкция:

• добавь на страницу html блок;
• вставь скопированный код в блок html;
• внеси необходимые правки и нажми кнопку "сохранить";
• проверь как код отображается на странице сайта;
• при необходимости повтори действия 3 и 4;

<script src="https://unpkg.com/@phosphor-icons/web">try {} catch (e) { console.log('ERROR:', e); }</script>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet">

<div class="cdmsu-double-block">

<div class="cdmsu-tab-block">

<label for="cdmsu-tab-block-first">Блок № 1</label>

<input id="cdmsu-tab-block-first" name="cdmsu-double-block-two" type="radio" checked="checked">

<div>

<h4>Заголовок блока 1</h4>

<p>Канбан-доска, которую можно использовать онлайн: узнайте, какие приложения доступны бесплатно, начните организовывать свои задачи уже сегодня</p>

</div>

</div>

<div class="cdmsu-tab-block">

<label for="cdmsu-tab-block-second">Блок № 2</label>

<input id="cdmsu-tab-block-second" name="cdmsu-double-block-two" type="radio">

<div>

<h4>Заголовок блока 2</h4>

<p>Канбан-доска, которую можно использовать онлайн: узнайте, какие приложения доступны бесплатно, начните организовывать свои задачи уже сегодня Канбан-доска, которую можно использовать онлайн: узнайте, какие приложения доступны бесплатно, начните организовывать свои задачи уже сегодня Канбан-доска, которую можно использовать онлайн: узнайте, какие приложения доступны бесплатно, начните организовывать свои задачи уже сегодня</p>

</div>

</div>

</div>

<style>

/* Основной блок стилей для редактирования */

:root {

--cdmsu-2-1: transparent; /* фон блока */

--cdmsu-2-2: #333; /* цвет названия блока */

--cdmsu-2-3: 18px; /* размер шрифта названия блока */

--cdmsu-2-4: 300; /* жирность текста названия блока */

--cdmsu-2-5: 1px solid #ddd; /* линия не активного блока */

--cdmsu-2-6: 1px solid #333; /* линия активного блока */

--cdmsu-2-7: Manrope; /* шрифт названия блока */

--cdmsu-2-8: Manrope; /* шрифт заголовка блока */

--cdmsu-2-9: Manrope; /* шрифт текста блока */

--cdmsu-2-10: 25px; /* размер шрифта заголовка блока */

--cdmsu-2-11: 16px; /* размер шрифта текста блока */

--cdmsu-2-12: 300; /* жирность шрифта заголовка блока */

--cdmsu-2-13: 300; /* жирность шрифта текста блока */

--cdmsu-2-14: #333; /* цвет шрифта заголовка блока */

--cdmsu-2-15: #333; /* цвет шрифта текста блока */

--cdmsu-2-16: 90%; /* ширина блока */

--cdmsu-2-17: 20px; /* отступ текста от заголовка */

}

/* Конец основного блока редактирования стилей */

body {

background: var(--cdmsu-2-1);

}

button:focus, input:focus, textarea:focus, select:focus {

outline: none;

}

.cdmsu-double-block {

display: block;

display: -moz-flex;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

margin: 0;

overflow: hidden;

width: var(--cdmsu-2-16);

margin: 0 auto;

}

.cdmsu-double-block [class^="cdmsu-tab"] label, .cdmsu-double-block [class*=" cdmsu-tab"] label {

color: var(--cdmsu-2-2);

cursor: none!important;

display: block;

font-size: var(--cdmsu-2-3);

font-weight: var(--cdmsu-2-4);

line-height: 1em;

padding: 20px 0;

text-align: center;

font-family: var(--cdmsu-2-7);

}

h4 {

font-size: var(--cdmsu-2-10)!important;

font-weight: var(--cdmsu-2-12)!important;

margin-bottom: 10px;

color: var(--cdmsu-2-14);

font-family: var(--cdmsu-2-8);

}

p {

font-size: var(--cdmsu-2-11);

font-weight: var(--cdmsu-2-13);

font-family: var(--cdmsu-2-9);

color: var(--cdmsu-2-15);

padding-top: var(--cdmsu-2-17);

}

.cdmsu-double-block [class^="cdmsu-tab"] [type="radio"],

.cdmsu-double-block [class*=" cdmsu-tab"] [type="radio"] {

border-bottom: var(--cdmsu-2-5)!important;

cursor: none!important;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

display: block;

width: 100%;

-webkit-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.cdmsu-double-block [class^="cdmsu-tab"] [type="radio"]:hover, .cdmsu-double-block [class^="cdmsu-tab"] [type="radio"]:focus, .cdmsu-double-block [class*=" cdmsu-tab"] [type="radio"]:hover,

.cdmsu-double-block [class*=" cdmsu-tab"] [type="radio"]:focus {

border-bottom: 1px solid #efedef80;

}

.cdmsu-double-block [class^="cdmsu-tab"] [type="radio"]:checked, .cdmsu-double-block [class*=" cdmsu-tab"] [type="radio"]:checked {

border-bottom: var(--cdmsu-2-6)!important;

}

.cdmsu-double-block [class^="cdmsu-tab"] [type="radio"]:checked + div, .cdmsu-double-block [class*=" cdmsu-tab"] [type="radio"]:checked + div {

opacity: 1;

}

.cdmsu-double-block [class^="cdmsu-tab"] [type="radio"] + div, .cdmsu-double-block [class*=" cdmsu-tab"] [type="radio"] + div {

display: block;

opacity: 0;

padding: 2rem 0;

width: 90%;

-webkit-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.cdmsu-double-block .cdmsu-tab-block {

width: 50%;

}

.cdmsu-double-block .cdmsu-tab-block [type="radio"] + div {

width: 200%;

margin-left: 200%;

}

.cdmsu-double-block .cdmsu-tab-block [type="radio"]:checked + div {

margin-left: 0;

}

.cdmsu-double-block .cdmsu-tab-block:last-child [type="radio"] + div {

margin-left: 100%;

}

.cdmsu-double-block .cdmsu-tab-block:last-child [type="radio"]:checked + div {

margin-left: -100%;

}

</style>