Мы рады приветствовать всех путников, заглянувших к нам на огонек. Если у вас возникли вопросы - смело задавайте. Знающие ответят в меру своих сил и знаний
[html]<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Cuprum&display=swap" rel="stylesheet"><style>
<style>.chr2, .chr2 * {box-sizing:border-box;}
.chr2 {
--chrw: 600px; /* ширина блока */
--chrbg: #DEDCC5; /* цвет фона */
--chrd: #ffffff; /* активный эпизод */
--chrc: #6a8972; /* закрытый эпизод */
--chbs: rgba(0,0,0,0.3); /* цвет границы */
}
.chr2 {width:var(--chrw); background:var(--chrbg); border-radius:16px; border:1px solid var(--chbs);
margin:10px auto 10px 10px; padding:26px 20px 24px 10px; position:relative;}
.chr2 p {padding:0px !important; margin:0px !important;}
.chr2 h7 {display:block; text-align:center; font-family:Cuprum, Tahoma, sans-serif; font-size:24px;}
.ch1 {position:relative; padding: 15px 0px; display:grid; grid-template-columns: 180px 1fr; grid-template-rows:auto; align-items:stretch;}
.ch1:first-of-type {/*shipovnik*/ padding-top:0px;}
.ch1:last-of-type {padding-bottom:0px;}
.ch2 {display:block; grid-column:1 / 2; grid-row:1 / -1; text-align:center; padding-right:10px; border-right:1px solid var(--chbs);}
.ch3 {display:block; grid-column:-2 / -1; grid-row:1 / -1; padding-left:14px; text-align:justify;}
.ch2 em {display:block; font-style:normal !important; font-weight:600; font-family:Cuprum, Tahoma, sans-serif; font-size:16px; padding-bottom:4px;}
.ch4 {text-transform:uppercase; font-family:Oswald, Tahoma, sans-serif; font-size:14px; letter-spacing:0.03em;}
.ch1:before {content:''; display:block; width:12px; height:12px; border-radius:50%; position:absolute; top:15px; left:-10px; transform:translateX(-50%);
background: var(--chrd); border:1px solid var(--chbs);}
.close.ch1:before {background:var(--chrc);}
.ch7 {display:block; font-family: Yeseva One, Georgia, serif; font-size: 22px; padding:0 0 8px 80px;}
</style>
<div class="chr2">
<!----- START3 ----->
<div class="ch1">
<div class="ch2"><em> роль забронирована </em>
</div>
<div class="ch3"><a href="#" class="ch4"></a>
</div>
</div>
<!----- END 3----->
</div>[/html]
