123
Лотерея
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться2Вчера 20:21:38
[html]
<style>
.raffle-event {
background: url(https://forumstatic.ru/files/001c/be/3c/59590.png) no-repeat center / cover;
width: 844px;
height: 600px;
display: flex;
flex-direction: column;
gap: 23px;
margin: auto !important;
box-sizing: border-box;
padding: 53px 40px;
border-radius: 6px;
position: relative;
--block-bg-main: 219, 219, 219;
--block-bg-inner: 232, 232, 232;
--border-thin: 1px solid rgba(196, 196, 196, 1);
--text-color: 55, 55, 55;
}
.raffle-event * {
box-sizing: border-box;
}
.raffle-header {
width: 100%;
height: auto;
border-radius: 10px;
position: relative;
color: white;
display: block;
}
.raffle-header > div > span:first-of-type {
text-transform: lowercase;
text-align: left;
display: block;
color: white;
box-shadow: none !important;
font: var(--fw600) 15px var(--font-cat-title);
font-style: italic;
padding: 1px 0px 10px !important;
transition: color var(--anim-hover) !important;
}
.raffle-header > div {
font-size: 10px;
color: white;
position: relative;
}
.raffle-header > div:first-of-type > div {
max-height: 43px;
overflow: auto;
padding-right: 5px;
line-height: 1.4;
width: 520px;
}
.raffle-header .raffle-cont {
margin-top: 20px;
width: 724px;
}
.raffle-cont > div {
display: flex;
flex-wrap: wrap;
gap: 15px;
height: 333px;
overflow: auto;
justify-content: flex-start;
padding-right: 3px;
}
.raffle-cont .ticket {
width: 88px;
height: 100px;
background-color: rgb(var(--block-bg-inner));
color: rgb(var(--text-color));
position: relative;
border-radius: 10px;
border: var(--border-thin);
display: flex;
padding-top: 10px;
justify-content: flex-start;
align-items: center;
flex-direction: column;
}
.raffle-cont .ticket img {
width: 62px;
height: 62px;
object-fit: contain;
}
.raffle-cont .ticket_1 {
background-position: center;
background-repeat: no-repeat;
}
.raffle-cont .ticket_0 {
background-position: 13px -5px;
background-repeat: no-repeat;
}
.raffle-cont .ticket span {
position: absolute;
bottom: 6px;
font-family: 'Moisette';
font-size: 11px;
}
</style>
<section class='raffle-event'>
<!----------------- ВЕРХНИЙ БЛОК ----------------------------------->
<div class='raffle-header'>
<div>
<span> лотерея </span>
<div>
I can't be canceled, there's no way that you can stop meI'm fully independent, there's no label who can drop me. I can't be canceled, there's no way that you can stop meI'm fully independent, there's no label who can drop me I can't be canceled, there's no way that you can stop meI'm fully independent, there's no label who can drop meI can't be canceled, there's no way that you can stop meI'm fully independent, there's no label who can drop me. I can't be canceled, there's no way that you can stop meI'm fully independent, there's no label who can drop me I can't be canceled, there's no way that you can stop meI'm fully independent, there's no label who can drop me
</div>
</div>
<!----------------- НИЖНИЙ БЛОК (ПРАВИЛА) ----------------------------------->
<div class='raffle-cont' data-title='лоты'>
<div>
<!----------------- _1 - непрозрачный, _0 - прозрачный чёрно-белый ---------------------------------------->
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 1 </span>
</div>
<div class='ticket ticket_0'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 2 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 3 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 4 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 5 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 6 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 7 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 8 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 9 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 10 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 11 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 12 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 13 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 14 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 15 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 16 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 17 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 18 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 19 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 20 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 21 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 22 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 23 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 24 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 25 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 26 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 27 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 28 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 29 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 30 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 31 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 32 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 33 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 34 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 35 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 36 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 37 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 38 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 39 </span>
</div>
<div class='ticket ticket_1'>
<img src='https://forumstatic.ru/files/001c/be/3c/36911.png'>
<span> 40 </span>
</div>
</div>
</div>
</div>
</section>
[/html][hideprofile]
Страница: 1
