- Совместимость с XenForo
- 2.0.x
- 2.1.x
- 2.2.x
Переходим admin.php?widgets/ нажимаем добавить виджет HTML и вставляем код:
Соответственно путь для скриптов js/hal/ny/ вы можете их разместить в свои места. Получаем следующий результат:
HTML:
<div class="content-wrapper">
<p class="header">С наступающим новым годом</p>
<h1 class="year" id="new-year">0000</h1>
<div class="timer">
<div class="timer-box">
<div class="timer-box__count">
<span id="days">0</span>
</div>
<div class="timer-box__text">Дни</div>
</div>
<div class="timer-box">
<div class="timer-box__count">
<span id="hours">0</span>
</div>
<div class="timer-box__text">Часы</div>
</div>
<div class="timer-box">
<div class="timer-box__count">
<span id="minutes">0</span>
</div>
<div class="timer-box__text">Минуты</div>
</div>
<div class="timer-box">
<div class="timer-box__count">
<span id="seconds">0</span>
</div>
<div class="timer-box__text">Секунды</div>
</div>
</div>
</div>
<div class="fireworks-container" style="background-image: url(./js/hal/ny/sai-gon-by-night-3914364_1280.jpg);"></div>
<script src="./js/hal/ny/fireworks.js"></script>
<script src="./js/hal/ny/app.js"></script>
<style>
.fireworks-container {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-position: bottom left;
background-size: cover;
background-repeat: no-repeat;
}
.content-wrapper {
z-index: 99;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content-wrapper .header,
.content-wrapper .year,
.content-wrapper .timer-box {
color: #fff;
}
.header {
font-size: 3rem;
font-weight: 300;
}
.year {
font-size: 9rem;
font-weight: 900;
line-height: 1.5;
}
.timer {
display: flex;
align-items: center;
justify-content: center;
}
.timer > * ~ * {
margin-left: 4rem;
}
.timer-box {
background-color: #1c2451;
}
.timer-box__count {
width: 10rem;
height: 10rem;
display: grid;
place-items: center;
}
.timer-box__count > span {
font-size: 5rem;
font-weight: 500;
}
.timer-box__text {
display: grid;
place-items: center;
background-color: #085391;
padding: 1rem 0;
font-size: 1.5rem;
font-weight: 500;
}
@media only screen and (max-width: 1200px) {
html {
font-size: 60%;
}
}
@media only screen and (max-width: 700px) {
html {
font-size: 40%;
}
}
</style>