Это адвент, но не адвент. ц.
Соберём новогодний сладкий подарок, который был у всех нас в детстве?)
В течение 25 дней каждый день* будет открываться (при клике на сегодняшнюю дату) одно окошко не_адвент календаря, где вы можете увидеть одну сладость из мира ГП (конфета, десерт, и т.д.).
В большинстве случаев чтобы получить её, нужно в этот конкретный день* выполнить мини-задание (например, написать пост) и отметиться (со ссылкой) в этой теме.
*"День" календаря действует с момента открытия окошка в 8.00 мск до 8.00 мск следующего дня (т.е. открытия следующего окошка).Дополнительные правила- Участвует игрок, но выполнять задания и отмечаться вы можете от любого/всех своих персонажей.
- Присоединиться к конкурсу можно в любой момент, просто выполнив задание.
- В конце месяца вы получите много-много подарков — разные сладости приносят разные сюрпризы, плюс конечно приз за самое большое количество сладостей.
- Ваши сладости будут собираться в первом сообщении темы.
[html]<center>
<div style="position: relative; width: 650px; height: 650px; cursor: pointer;">
<!-- Общая картинка календаря -->
<img src="https://upforme.ru/uploads/001b/ff/2a/183/670739.png"
style="display:block; width:100%; height:100%; border-radius:10px;">
<!-- ===================== Окошко с заданием ===================== -->
<div style="
position: absolute;
top: 42%;
left: 2%;
width: 100px;
height: 100px;
cursor: pointer;
border-radius: 2px;
overflow: visible;
display: flex;
justify-content: center;
align-items: center;
"
onclick="
var layer=this.querySelector('.inner');
if(layer.style.transform=='scale(1)'){
layer.style.transform='scale(0)';
layer.style.opacity='0';
} else {
layer.style.transform='scale(1)';
layer.style.opacity='1';
}
"
>
<!-- Слой с заданием -->
<div class="inner" style="
position: absolute;
top: -20%;
left: -40%;
width: 180px;
height: 180px;
background: rgba(223, 221, 226, 0.92);
color: #000;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 11px;
font-weight: bold;
border-radius: 5px;
overflow: auto; /* чтобы всё влезало */
transition: transform 0.45s ease, opacity 0.45s ease;
transform: scale(0);
opacity: 0;
padding: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.4);
z-index: 10;
">
<!-- ВОТ СЮДА ВСТАВЛЯЕШЬ КОНТЕНТ -->
<div style="z-index:20; position:relative;">
<img src="https://upforme.ru/uploads/001b/ff/2a/183/593122.png" style="width:80px;">
<br> Нужно выложить любую графику - рисунок/фото/мемы/эстетику или фото персонажа и т.п на зимнюю/рождественскую тему.
</div>
<!-- Блестки внутри -->
<span style="position:absolute;width:3px;height:3px;background:gold;border-radius:50%;top:10%;left:20%;animation:sparkle 1s infinite alternate;"></span>
<span style="position:absolute;width:3px;height:3px;background:gold;border-radius:50%;top:50%;left:70%;animation:sparkle 1.2s infinite alternate;"></span>
<span style="position:absolute;width:2px;height:2px;background:gold;border-radius:50%;top:30%;left:50%;animation:sparkle 0.8s infinite alternate;"></span>
</div>
<!-- ❄️ Снежинки на закрытом окошке (расширенная версия) -->
<span style="position:absolute;width:4px;height:4px;background:white;border-radius:50%;top:-10%;left:20%;animation:snow 3s infinite linear;"></span>
<span style="position:absolute;width:3px;height:3px;background:white;border-radius:50%;top:-10%;left:50%;animation:snow 4s infinite linear;"></span>
<span style="position:absolute;width:2px;height:2px;background:white;border-radius:50%;top:-10%;left:75%;animation:snow 5s infinite linear;"></span>
<span style="position:absolute;width:5px;height:5px;background:white;border-radius:50%;top:-10%;left:10%;animation:snow 6s infinite linear;"></span>
<span style="position:absolute;width:3px;height:3px;background:white;border-radius:50%;top:-10%;left:35%;animation:snow 3.5s infinite linear;"></span>
<span style="position:absolute;width:4px;height:4px;background:white;border-radius:50%;top:-10%;left:60%;animation:snow 4.5s infinite linear;"></span>
<span style="position:absolute;width:2px;height:2px;background:white;border-radius:50%;top:-10%;left:85%;animation:snow 3.2s infinite linear;"></span>
<span style="position:absolute;width:4px;height:4px;background:white;border-radius:50%;top:-10%;left:95%;animation:snow 5.5s infinite linear;"></span>
</div>
</div>
<style>
@keyframes sparkle {
0% {opacity:0; transform: scale(0);}
50% {opacity:1; transform: scale(1);}
100% {opacity:0; transform: scale(0);}
}
@keyframes snow {
0% {top:-5%; opacity:0;}
10% {opacity:1;}
100% {top:105%; opacity:0;}
}
</style>
[/html]
Организатор: Luca Caruso
При поддержке картинки адвента, пинтереста и сайта pngtree и adobe photoshop.
