акция: cool kids of the month

Страница: 1

Тема закрыта

Сообщений 1 страница 2 из 2

Поделиться12024-10-05 01:47:01

serving
Автор: cake
candy corn
been serving cakes since before you were born
Сообщений: 3124
Уважение: +3109
баллов:
∞
I am the standout, you just my stand-in

promo: cool kids of the month

- категория/тема акции меняется каждый месяц;
- акция распространяется на все новые профили, подходящие под условия*, включая твинков;
- призы по акции суммируются с другими позициями банка, связанными с твинками и принятием анкет;
- для информации о призах, наведите на картинку в сообщении с акцией.

*если у вас есть сомнения, подходит ли интересующая вас роль под акцию, ответ всегда "да".

Код:

<!--HTML--><style>
.cake__promo {
  width: 400px;
  height: 400px;
  border-radius: 25px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: var(--main-shadow);
  background-color: var(--pun-color);
}

.promo_header {
  text-align: center;
  padding-top: 25px;
}

.header_date {
  background-color: var(--font-color);
  color: var(--pun-color-light);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 10px;
}

.header_tags {
  margin: 15px 0;
  color: var(--font-light-color);
  font-size: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.cake__promo_img {
  width: 80%;
  border-radius: 15px;
}

.promo_body {
  width: 80%;
  margin: 0 auto;
  color: var(--font-color);
  transition: .5s;
  opacity: 1;
}
.cake__promo:hover .promo_body {opacity: 0;}

.promo_body_head {
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1px;
  margin: 15px 0 10px;
}

.promo_body_descr {
  text-align: left;
  font-size: 10px;
  letter-spacing: .3px;
  line-height: 15px;
}

.cake__promo_descr {
  position: absolute;
  bottom: -135px;
  left: 50%;
  transform: translate(-50%);
  background-color: var(--font-color);
  width: 80%;
  height: 160px;
  border-radius: 15px 15px 0 0;
  padding: 3px;
  box-sizing: border-box;
  transition: 1s ease-in-out;
}
.cake__promo:hover .cake__promo_descr {bottom: 0;}

.promo_descr-header {
  text-align: center;
  font-size: 16px;
  color: var(--pun-color-light);
}

.promo_body_head.promo_info {
  color: var(--pun-color-light);
  margin: 5px 0;
  font-size: 14px;
}

.promo_descr-info {
  text-align: left;
  color: var(--pun-color-light);
  padding: 5px 15px;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.promo_disabled * {opacity: .7;}
.cake__promo.promo_disabled:hover .cake__promo_descr {bottom: -135px;}
.cake__promo.promo_disabled:hover .promo_body {opacity: .7;}
.promo_disabled .header_date, .promo_disabled .cake__promo_descr {background-color: #d5d5d5;}
</style>

Поделиться22024-10-05 01:47:13

serving
Автор: cake
candy corn
been serving cakes since before you were born
Сообщений: 3124
Уважение: +3109
баллов:
∞
I am the standout, you just my stand-in

Код:

<!--HTML-->
<div class="cake__promo">
  <div class="promo_header">
    <span class="header_date">05.10 — 01.11</span>
    <div class="header_tags">
      <span class="promo_tag">#horror</span>
      <span class="promo_tag">#scarymovie</span>
      <span class="promo_tag">#halloween</span>
    </div>
    <img class="cake__promo_img" src="https://i.imgur.com/OA4gBtc.png">
  </div>
  
  <div class="promo_body">
    <div class="promo_body_head">horror movie month</div>
    <div class="promo_body_descr">
      по акции проходят актеры/актрисы, которые снимались в фильмах жанра хоррор, триллер, или в фильмах с хеллоуиской тематикой
    </div>
  </div>
  
  <div class="cake__promo_descr">
    <div class="promo_descr-header">
      <i class="fa-solid fa-circle-info"></i>
    </div>
    <div class="promo_body_head promo_info">вы получаете:</div>
    <div class="promo_descr-info">
      <span class="promo_descr-item">
      <i class="fa-solid fa-angles-right fa-2xs"></i> 100 стартовых баллов (забирать в банке);</span>
      <span class="promo_descr-item">
      <i class="fa-solid fa-angles-right fa-2xs"></i> бесплатное оформление профиля (любая иконка/ лайн/ футер из коллекций в магазинах) с промокодом <b>COOLKID</b> перед шаблоном заказа</span>
    </div>
  </div>
</div>

+13

Тема закрыта

Страница: 1