[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>