[hideprofile]

Код:
<!--HTML-->
<link rel="stylesheet" type="text/css" href="/files/001b/70/52/18462.css">
<section class="maintheme">
	<div class="maintext__subtitle">я календарь...</div>
	<div class="maintheme__block event__about">


<div><b>вы и сами знаете, какой там дальше текст.</b></div>

<div>все равно этот мем жизни помянётся за день не раз, так что мы решили, что поминайте с пользой – шутки ради и бонусов. </div>

<ul>
<li>да, это рандомная рулетка, но не просто лот-подарок.</li>
<li>за каждым номером скрывается мини-задание – перевернули календарь на новый день, а значит к подвигам денёчка! не знаем, уж какие у вас планы, но ведь когда их выполнишь к вечеру так приятно становится, все успел, ты молодец, все как запланировал. а это приятное послевкусие с дополнительной наградкой еще лучше <img src="https://vk.com/emoji/e/e29ca8.png"> </li>
<li>черно-белая иконка = лот занят.</li>
<li>когда задание будет выполнено, отписывайтесь в этой теме со всеми ссылочками на выполненное задание.</li>
<li>по одному лоту в одни руки! принимать участие твинками можно.</li>
</ul>



<div class="maintheme__block event__about" style="letter-spacing: 0.2px; padding: 0!important; margin: 40px 0;">
<div class="event__shop" id="shop">

    	<div class="event__shop-left">

        <div class="event__shop-item plashki">
        	<img src="https://i.imgur.com/Tr92yym.png">
        	<img src="https://i.imgur.com/xBXKPSn.png">
        </div>
</div>
</div>
</div>

<div class="maintheme__block event__about" style="letter-spacing: 0.2px; padding: 0!important; margin-top: 0;">
<div class="event__shop-item event__shop">
<div class="roulete">

<div class="svob"><div class="txx">1</div></div>
<div class="svob"><div class="txx">2</div></div>
<div class="svob"><div class="txx">3</div></div>
<div class="svob"><div class="txx">4</div></div>
<div class="svob"><div class="txx">5</div></div>
<div class="svob"><div class="txx">6</div></div>
<div class="svob"><div class="txx">7</div></div>
<div class="svob"><div class="txx">8</div></div>
<div class="svob"><div class="txx">9</div></div>
<div class="svob"><div class="txx">10</div></div>
<div class="svob"><div class="txx">11</div></div>
<div class="svob"><div class="txx">12</div></div>
<div class="svob"><div class="txx">13</div></div>
<div class="svob"><div class="txx">14</div></div>
<div class="svob"><div class="txx">15</div></div>
<div class="svob"><div class="txx">16</div></div>
<div class="svob"><div class="txx">17</div></div>
<div class="svob"><div class="txx">18</div></div>
<div class="svob"><div class="txx">19</div></div>
<div class="svob"><div class="txx">20</div></div>

</div>
</div>
</div>

	</div>
</section>

<style>
.prin {width: 550px; border:7px #c7c7c7 solid; background-image: url(https://previews.123rf.com/images/jenemilia/jenemilia1307/jenemilia130700059/20697710-Stylized-daisy-seamless-pattern-Emerald-green-color-variant-Stock-Vector.jpg)}
.nmpr {font-family: arial; font-size: 21px; text-transform: uppercase; text-align: center; color: #ededed; padding-top: 10px; letter-spacing: 3px}
.zagpr {font-family: arial; font-size: 13px; color: #ededed; padding: 12px; line-height:14px; letter-spacing: 1px; text-align: justify}

.fn {width: 450px; background-color: #ededed; border: 3px #000 double;}
.tx {font-family: trebuchet ms; font-size: 10px; color: #000; padding: 12px; line-height:14px; letter-spacing: 1px; text-align: justify}
.svob {position: relative; width:64px; height:64px; background-image: url(https://i.imgur.com/xkTfK7P.png); background-size: contain; }
.txx {position: relative;
    top: 7px;
    font-family: 'Geologica';
    font-weight: bold;
    font-size: 29px;
    /* padding: 15px; */
    color: #efefef;
    text-shadow: 2px 2px 0 #000000, -2px -2px 0 #000000;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;}
.svob1 {position: relative; width:64px; height:64px; background-image: url(https://i.imgur.com/rzqgrw6.png);-webkit-filter: grayscale(100%); filter: brightness(1) grayscale(100%); background-size: contain;}
.roulete {display: grid;
    grid-template-columns: repeat(5, 90px);
    grid-template-rows: repeat(4, 80px);
    justify-content: center;
    align-items: center;
    justify-items: center; margin-top: 0px;}


 .event__shop {
  width: 600px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr ;
      grid-template-columns: 1fr ;
  gap: 30px 30px;
margin: 0 auto;
}

.event__shop-right {
  margin-top: 20px;
}

.event__shop-item {
  background-color: var(--main-bg);
  border-radius: 30px;
  padding: 30px;
  margin-bottom: 30px;
}

.event__shop-item:last-child {
  margin-bottom: 0;
}

.event__shop-item.plashki {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (180px)[2];
      grid-template-columns: repeat(2, 180px);
  gap: 5px 20px;
justify-content: center;
position: relative; border: 1px dashed #bbbbbb;
}

.event__shop-item.plashki::before {
position: absolute;
content: "";
background-image: url(https://i.imgur.com/8QZownW.png);
width: 148px;
height: 142px;
left: -23px;
    top: -20px;
}

.event__shop-item.plashki::after {
position: absolute;
content: "";
background-image: url(https://i.imgur.com/gwky7nW.png);
width: 148px;
height: 150px;
right: -34px;
    top: -20px;
}



</style>