Что то я в себя поверил и не рассчитал силы. Думал этот код заверстаю под нужный дизайн. Не получается. А можно все таки блоку придать день и время. Вот в этот дизайн и там проще сделать блок
Вот как я понимаю блоки с классом class="sobranie_sreda" class="sobranie_vtornik" и т.д. будут выводится в определенный день а блоки с классом <div class="nachalo_20_00"></div> или <div class="nachalo_21_00"></div> нужно выводить надпись сколько до собрание а если идет то надпись идет собрание. Но это мне так видится может это не оптимально. Просто есть дизайн блока и нужно что бы просто присваивать блоку нужны класс с днем и временем.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="shortcut icon" href="izobrazhenie/favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="index">
<meta name="Keywords" content="index">
<style>
.sobranie_blok {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto auto auto auto;
grid-template-areas:
"sobranie_nazvanie sobranie_cherez_ckolko granitsa_right"
"sobranie_den_nedeli_vremya sobranie_cherez_ckolko granitsa_right"
"sobranie_adres sobranie_adres granitsa_right"
"sobranie_opisanie sobranie_opisanie granitsa_right"
"sobranie_karta sobranie_karta granitsa_right"
"sobranie_kak_proiti sobranie_kak_proiti granitsa_right";
row-gap: 0px;
column-gap: 0px;
justify-content: center;
}
.granitsa_right{
grid-area:granitsa_right;
width: 1px;
margin: -20px 0px -20px 0px;
}
.sobranie_nazvanie {
width: 360px;
grid-area: sobranie_nazvanie;
font-size: 2.0rem;
font-weight: 700;
color: var(--tset_osnovnoi);
padding: 0px 0px 5px 0px;
}
.sobranie_den_nedeli_vremya {
grid-area: sobranie_den_nedeli_vremya;
padding: 0px 0px 0px 0px;
}
.den_nedeli_vremya{
font-size: .8rem;
}
.sobranie_cherez_ckolko {
grid-area: sobranie_cherez_ckolko;
padding: 0px 20px 0px 20px;
align-self: center;
border-left: 1px solid var(--tset_osnovnoi);
}
.cherez_ckolko{
text-align: center;
font-size: .8rem;
}
.cherez_ckolko_vremya{
display: flex;
align-items:center;
justify-content: center;
}
#dot{
margin: -3px 2px 0px 2px;
}
.sobranie_opisanie {
grid-area: sobranie_opisanie;
padding: 5px 0px 20px 0px;
}
.sobranie_adres {
grid-area: sobranie_adres;
padding: 20px 0px 0px 0px;
}
.sobranie_karta {
grid-area: sobranie_karta;
padding: 0px 0px 10px 0px;
width: 100%;
}
.ikonka_tekst {
display:flex;
align-items: center;
}
.ikonka {
width: 48px;
}
.tekst {
padding: 0px 0px 0px 15px;
}
.ssilka_karta_proiti{
color: var(--tset_dopolnitelnyi);
}
.ssilka_karta_proiti:hover{
color: var(--tset_dopolnitelnyi);
text-decoration: none;
}
.karta{
display: block;
}
.sobranie_kak_proiti{
grid-area: sobranie_kak_proiti;
padding: 0px 0px 0px 0px;
width: 100%;
}
.blok_kak_proiti_kartinka{
display: block;
max-width: 520px;
}
.kak_proiti_kartinka{
width: 100%;
}
</style>
</head>
<body>
<main>
<div class="sobranie_blok" class="sobranie_sreda">
<div class="granitsa_right">
</div>
<div class="sobranie_nazvanie">
Калитка
</div>
<div class="sobranie_den_nedeli_vremya">
<div class="den_nedeli_vremya">
Среда /
20:00
</div>
</div>
<div class="sobranie_cherez_ckolko">
<div class="cherez_ckolko">
Собрание Начнется через:<br>
<div class="nachalo_20_00"></div>
</div>
</div>
<div class="sobranie_opisanie">
Описание собрание: <br>
<span class="malenkii_chrift">Ежедневник</span>
</div>
<div class="sobranie_adres">
ул. Декабристов 27<br>
<span class="malenkii_chrift">Во дворе, домофон 2222, цокольный этаж</span>
</div>
<div class="sobranie_karta">
<a href="#">Карта</a>
</div>
<div class="sobranie_kak_proiti">
<a href="#">Как пройти</a>
</div>
</div>
<br><br>
<div class="sobranie_blok" class="sobranie_vtornik">
<div class="granitsa_right">
</div>
<div class="sobranie_nazvanie">
Единство
</div>
<div class="sobranie_den_nedeli_vremya">
<div class="den_nedeli_vremya">
Вторник /
21:00
</div>
</div>
<div class="sobranie_cherez_ckolko">
<div class="cherez_ckolko">
Собрание Начнется через:<br>
<div class="nachalo_21_00"></div>
</div>
</div>
<div class="sobranie_opisanie">
Описание собрание: <br>
<span class="malenkii_chrift">Ежедневник</span>
</div>
<div class="sobranie_adres">
ул. Декабристов 27<br>
<span class="malenkii_chrift">Во дворе, домофон 2222, цокольный этаж</span>
</div>
<div class="sobranie_karta">
<a href="#">Карта</a>
</div>
<div class="sobranie_kak_proiti">
<a href="#">Как пройти</a>
</div>
</div>
</main>
</body>
</html>