road map

[html]
<title>Временная линия ролевой</title>
<style>
h1 {
text-align: center;
color: #4b2e2e;
margin-bottom: 40px;
}

.timeline {
position: relative;
max-width: 800px;
margin: auto;
}

.timeline::after {
content: '';
position: absolute;
width: 4px;
background-color: #c2a679;
top: 0;
bottom: 0;
left: 50%;
margin-left: -2px;
}

.event {
padding: 20px;
position: relative;
background-color: #fff8e6;
border-radius: 8px;
width: 45%;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.event::after {
content: '';
position: absolute;
top: 20px;
width: 20px;
height: 20px;
background-color: #c2a679;
border: 3px solid #fff8e6;
border-radius: 50%;
z-index: 1;
}

.left {
left: 0;
}

.left::after {
right: -10px;
}

.right {
left: 50%;
}

.right::after {
left: -10px;
}

.date {
font-weight: bold;
color: #6b4f3b;
margin-bottom: 8px;
}

.title {
font-size: 1.2em;
color: #3e2a1e;
margin-bottom: 6px;
}

.desc {
color: #5c4a3a;
}

@media screen and (max-width: 768px) {
.event {
width: 100%;
left: 0 !important;
}

.event::after {
left: calc(50% - 10px);
}

.timeline::after {
left: 50%;
}
}
</style>
</head>
<body>
<h1> Хроника ролевой: События и обновления</h1>
<div class="timeline">
<div class="event left">
<div class="date">22 сентября</div>
<div class="title">Набор в квесты, арка 1</div>
<div class="desc">Старт набора желающих в первые квесты</div>
</div>

<div class="event right">
<div class="date">26 сентября</div>
<div class="title">Старт арки 1</div>
<div class="desc">Открытие квестов и начальные квесты ГМа. Выдача персональных заданий при необходимости</div>
</div>

<div class="event left">
<div class="date">1 октября</div>
<div class="title">Конкурсы и акции. Радио</div>
<div class="desc">Окончание "В погоне за силой" <br>Старт конкурса для постописцев<br>Новые акции от АМС<br>При должном количестве игроков - старт набора заявок на проведение онлайн радио</div>
</div>

<div class="event right">
<div class="date">20 октября - 15 ноября</div>
<div class="title">Хэллоуин</div>
<div class="desc">Старт серии тематических ивентов
<br> 20.10 - киноманы и задроты
<br> 26-27.10 - лотерея "сладость или гадость" и празничное обновление магазина
<br> 30-31.10 - маскарад
<br> 9.11 - парный ивент
</div>
</div>

<div class="event left">
<div class="date">Ноябрь</div>
<div class="title">Арка 2</div>
<div class="desc">Набор в новые квесты (может сдвинуться, если затянется первая арка)</div>
</div>

<div class="event right">
<div class="date">Декабрь</div>
<div class="title">Зима близко</div>
<div class="desc">Большой новогодний ивент, обновление диза под более зимнюю тематику</div>
</div>

</div>
</html>[/html][hideprofile]