ёлочка 2

Код:
<!--HTML-->
<div class="cyberpunk-display">
   <div class="cyberpunk-container">

    <!-- Cyber Toys Section -->
    <div class="cyber-section">
      <div class="cyber-button i_active">Киберигрушки <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: block;">
         <div class="cyber-description">Первую вешаем бесплатно, каждую следующую за столько снежинок, сколько подписано. Осторожно — игрушки хрупкие!</div>
        <div class="cyber-grid">
            <!-- Card 1 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/629438.webp" alt="cyber-toy-1">
               </div>
               <div class="cyber-card-title">1: Militech</div>
            </div>

            <!-- Card 2 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/21322.webp" alt="cyber-toy-2">
               </div>
               <div class="cyber-card-title">2: Taste Japan</div>
            </div>

            <!-- Card 3 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/793443.webp" alt="cyber-toy-3">
               </div>
               <div class="cyber-card-title">3: Santa Muerte</div>
            </div>

            <!-- Card 4 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/880561.webp" alt="cyber-toy-4">
               </div>
               <div class="cyber-card-title">4: Arasaka Light</div>
            </div>

            <!-- Card 5 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/406707.webp" alt="cyber-toy-5">
               </div>
               <div class="cyber-card-title">5: Welcome to NC</div>
            </div>

            <!-- Card 6 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/754796.webp" alt="cyber-toy-6">
               </div>
               <div class="cyber-card-title">6: Glitter, Beach!</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/529505.webp" alt="cyber-toy-7">
               </div>
               <div class="cyber-card-title">7: Burning Success</div>
            </div>

            <!-- Card 8 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/40022.webp" alt="cyber-toy-8">
               </div>
               <div class="cyber-card-title">8: Kerry On</div>
            </div>

            <!-- Card 9 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/955053.webp" alt="cyber-toy-9">
               </div>
               <div class="cyber-card-title">9: Don’t Cry Tygers</div>
            </div>

            <!-- Card 10 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/636071.webp" alt="cyber-toy-10">
               </div>
               <div class="cyber-card-title">10: DeLuze</div>
            </div>

            <!-- Card 11 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/640147.webp" alt="cyber-toy-11">
               </div>
               <div class="cyber-card-title">11: Trauma 2 UR ❤️</div>
            </div>

            <!-- Card 12 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/27745.webp" alt="cyber-toy-12">
               </div>
               <div class="cyber-card-title">12: Splash of Love</div>
            </div>

            <!-- Card 13 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/958430.webp" alt="cyber-toy-13">
               </div>
               <div class="cyber-card-title">13: Stick It In</div>
            </div>

            <!-- Card 14 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-reg">5❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/467899.webp" alt="cyber-toy-14">
               </div>
               <div class="cyber-card-title">14: Foreign Beauty</div>
            </div>

            <!-- Card 15 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/389246.webp" alt="cyber-toy-15">
               </div>
               <div class="cyber-card-title">15: Friend Like Me</div>
            </div>

            <!-- Card 16 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/745679.webp" alt="cyber-toy-16">
               </div>
               <div class="cyber-card-title">16: One shot, One kill</div>
            </div>

            <!-- Card 17 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/119644.webp" alt="cyber-toy-17">
               </div>
               <div class="cyber-card-title">17: Ready to Rrrumble!</div>
            </div>

            <!-- Card 18 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/13807.webp" alt="cyber-toy-18">
               </div>
               <div class="cyber-card-title">18: Knobby Spine</div>
            </div>

            <!-- Card 19 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/95737.webp" alt="cyber-toy-19">
               </div>
               <div class="cyber-card-title">19: Glistens</div>
            </div>

            <!-- Card 20 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/972087.webp" alt="cyber-toy-20">
               </div>
               <div class="cyber-card-title">20: Spirit of America</div>
            </div>

            <!-- Card 21 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/907558.webp" alt="cyber-toy-21">
               </div>
               <div class="cyber-card-title">21: Naughty U!</div>

            </div>
           
            <!-- Card 22 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/634609.webp" alt="cyber-toy-22">
               </div>
               <div class="cyber-card-title">22: Cardinally Awesome</div>
            </div>
    	
            <!-- Card 23 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper is-placed">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/900682.webp" alt="cyber-toy-23">
               </div>
               <div class="cyber-card-title">23: Black Dog</div>
            </div>
    	
            <!-- Card 24 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/358340.webp" alt="cyber-toy-24">
               </div>
               <div class="cyber-card-title">24: Maneki Neko</div>
            </div>

            <!-- Card 25 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/298794.webp" alt="cyber-toy-25">
               </div>
               <div class="cyber-card-title">25: Little Outsider</div>
            </div>
    	
            <!-- Card 26 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/308712.webp" alt="cyber-toy-26">
               </div>
               <div class="cyber-card-title">26: Letz Danz @ Totentanz</div>
            </div>

            <!-- Card 27 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/410212.webp" alt="cyber-toy-27">
               </div>
               <div class="cyber-card-title">27: Nice Axe</div>
            </div>
    	
            <!-- Card 28 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/676596.webp" alt="cyber-toy-28">
               </div>
               <div class="cyber-card-title">28: BEFOREDEATH</div>
            </div>
    	
            <!-- Card 29 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/471549.webp" alt="cyber-toy-29">
               </div>
               <div class="cyber-card-title">29: North Pole</div>
            </div>
    	
            <!-- Card 30 -->
            <div class="cyber-card toy-card">
               <div class="price-tag price-iconic">10❄️</div> <!-- Ценник -->
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/612345.webp" alt="cyber-toy-23">
               </div>
               <div class="cyber-card-title">30: David: goes brrrr</div>
            </div>

          <!-- More cards go here -->
        </div>
      </div>


    <!-- Cyber Decorations Section -->
    <div class="cyber-section">
      <div class="cyber-button">Наряд для Нибблз <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: none;">
                  <div class="cyber-description">Наряди ещё этих мягких кошачьих булок, да выпей же шампарадайса. Голосуем, во что наряжаем Нибблз!<br>
1 голос = 5 снежинок, можно повторять пока не кончатся силы (или снежинки — смотря что раньше).</div>
        <div class="cyber-grid">

      <!-- Card 1 -->
      <div class="cyber-card gift-card">
        <div class="cyber-image-wrapper">
          <img src="https://upforme.ru/uploads/001c/98/42/2/122949.webp" alt="Nibbles-1">
        </div>
        <div class="cyber-card-title">Мягкая шерсть</div>
      </div>

      <!-- Card 2 -->
      <div class="cyber-card gift-card">
        <div class="cyber-image-wrapper">
          <img src="https://upforme.ru/uploads/001c/98/42/2/889641.webp" alt="Nibbles-2">
        </div>
        <div class="cyber-card-title">Крутая кожа</div>
      </div>

      <!-- Card 3 -->
      <div class="cyber-card gift-card">
        <div class="cyber-image-wrapper">
          <img src="https://upforme.ru/uploads/001c/98/42/2/534598.webp" alt="Nibbles-3">
        </div>
        <div class="cyber-card-title">Леопардовый глэм</div>
      </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>

    <!-- Cyber Decorations Section -->
    <div class="cyber-section">
      <div class="cyber-button">Украшения для стола<i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: none;">
                  <div class="cyber-description">Наряди ещё этих мягких кошачьих булок, да выпей же шампарадайса. Голосуем, что пьем и чем украшаем дом!<br>
1 голос = 5 снежинок, можно повторять пока не кончатся силы (или снежинки — смотря что раньше).</div>
        <div class="cyber-grid">
           
            <!-- Card 1 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/314586.webp" alt="champaradise">
               </div>
               <div class="cyber-card-title">Шампарадайс</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Глотни заряд блаженства.</div>
            </div>

            <!-- Card 2 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/191350.webp" alt="сentzon-еotochtin">
               </div>
               <div class="cyber-card-title">Сенцон Тоточтин</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Текила, которой нет равных.</div>
            </div>

            <!-- Card 3 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/857309.webp" alt="ab-synth">
               </div>
               <div class="cyber-card-title">Аб-Синт</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Будь богемой.</div>
            </div>

            <!-- Card 4 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/846521.webp" alt="sake-utagawa">
               </div>
               <div class="cyber-card-title">Сакэ Утагава</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Идеальный подарок себе.</div>
            </div>

            <!-- Card 5 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/149402.webp" alt="romvlvs-gin">
               </div>
               <div class="cyber-card-title">Ромулус Джин</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Сделай глоток престижа.</div>
            </div>

            <!-- Card 6 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/760926.webp" alt="paul-night">
               </div>
               <div class="cyber-card-title">Пол Найт</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Любимый напиток художников и мечтателей.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/875284.webp" alt="chateau-delen-2012">
               </div>
               <div class="cyber-card-title">Шато Делен 2012</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Всего 200 бутылок. Завладей своей.</div>
            </div>

            <!-- Card 8 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/368756.webp" alt="calavera-feliz">
               </div>
               <div class="cyber-card-title">Калавера Фелиз</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Фиеста? Калавера.</div>
            </div>

            <!-- Card 9 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/988568.webp" alt="baalbek-arak">
               </div>
               <div class="cyber-card-title">Баальбек Арак</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Мы запечатали жар пустынного солнца в бутылки.</div>
            </div>

            <!-- Card 10 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/716470.webp" alt="armagnac-massy">
               </div>
               <div class="cyber-card-title">Арманьяк Месси</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Не пей - наслаждайся им.</div>
            </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>

    <!-- Cyber Decorations Section -->
    <div class="cyber-section">
      <div class="cyber-button">Коробки из ИКЕА <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: none;">
        <div class="cyber-description">Вы можете упаковать в них все, что хотите. Даже головы врагов! Вы... вы же не восприняли это как руководство к действию?</div>
        <div class="cyber-grid">
            <!-- Card 1 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/882397.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">1: Aneboda</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Квадратная. Сбалансированная. Классика.</div>
            </div>

            <!-- Card 3 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/192237.webp" alt="gift-wrap-2">
               </div>
               <div class="cyber-card-title">2: Bergsbo</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Для любителей классики, распробовавших элегантность.</div>
            </div>

            <!-- Card 4 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/799466.webp" alt="gift-wrap-3">
               </div>
               <div class="cyber-card-title">3: Dave</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Когда выпендреж - ваше все.</div>
            </div>

            <!-- Card 5 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/718754.webp" alt="gift-wrap-4">
               </div>
               <div class="cyber-card-title">4: Elsfjord</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Форма и содержание - соответствуют друг другу.</div>
            </div>

            <!-- Card 6 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/760043.webp" alt="gift-wrap-5">
               </div>
               <div class="cyber-card-title">5: Cirkel</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Да, может быть, не самая аккуратная упаковка, зато от души!</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/977520.webp" alt="gift-wrap-6">
               </div>
               <div class="cyber-card-title">6: Capita</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Совсем не подходит для заворачивания голов, перестаньте пытаться</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/764287.webp" alt="gift-wrap-7">
               </div>
               <div class="cyber-card-title">7: Pinje</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Не голова. Или не та. Или не всему.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/788704.webp" alt="gift-wrap-8">
               </div>
               <div class="cyber-card-title">8: Bomull</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Для ценителей теплоты, уюта, хэндмейда и щепотки любви.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/596202.webp" alt="gift-wrap-9">
               </div>
               <div class="cyber-card-title">9: Skrin</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Классика, но другая.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/290411.webp" alt="gift-wrap-10">
               </div>
               <div class="cyber-card-title">10: Bladet</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Когда часы 12 бьют, а ты спешишь на праздник под тикающий таймер.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/178922.webp" alt="gift-wrap-11">
               </div>
               <div class="cyber-card-title">11: MLTH Attityd</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">А это точно подарок??</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/612284.webp" alt="gift-wrap-12">
               </div>
               <div class="cyber-card-title">12: Behandla</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Когда размер не имеет значения</div>
            </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>

    <!-- Cyber Gifts Section -->
    <div class="cyber-section">
      <div class="cyber-button">Обёртки <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: none;">
         <div class="cyber-description">Выбрали коробку? Теперь можно её красиво обернуть. Ну, или как получится.<br>
Не забудьте самое главное — написать под скрытым текстом, какое поздравление и кому вы в эту коробочку хотите положить. Пошлый Санта обещает передать все в лучшем виде.<br></div>
        <div class="cyber-grid cyber-gift-wrap">
           
                  <!-- Card 1 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/331657.png" alt="gift-wrap-1">
                     </div>
                     <div class="cyber-card-title">1: Thread of Thoughts</div>
                  </div>

                  <!-- Card 2 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/928253.png" alt="gift-wrap-2">
                     </div>
                     <div class="cyber-card-title">2: Mushroom is strong</div>
                  </div>

                  <!-- Card 3 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/277088.png" alt="gift-wrap-3">
                     </div>
                     <div class="cyber-card-title">3: I drew you a heart</div>
                  </div>

                  <!-- Card 4 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/231943.png" alt="gift-wrap-4">
                     </div>
                     <div class="cyber-card-title">4: Chooombatta!</div>
                  </div>

                  <!-- Card 5 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/725147.png" alt="gift-wrap-5">
                     </div>
                     <div class="cyber-card-title">5: Paper Spines</div>
                  </div>

                  <!-- Card 6 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/238980.png" alt="gift-wrap-6">
                     </div>
                     <div class="cyber-card-title">6: Africa Loco</div>
                  </div>

                  <!-- Card 7 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/10243.png" alt="gift-wrap-7">
                     </div>
                     <div class="cyber-card-title">7: I See Squares</div>
                  </div>

                  <!-- Card 8 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/906973.png" alt="gift-wrap-8">
                     </div>
                     <div class="cyber-card-title">8: Local Flavor</div>
                  </div>

                  <!-- Card 9 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/674472.png" alt="gift-wrap-9">
                     </div>
                     <div class="cyber-card-title">9: Trauma Postcard</div>
                  </div>

                  <!-- Card 10 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/203248.png" alt="gift-wrap-10">
                     </div>
                     <div class="cyber-card-title">10: Cyberspace Ocean</div>
                  </div>

                  <!-- Card 11 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/893306.png" alt="gift-wrap-11">
                     </div>
                     <div class="cyber-card-title">11: Nomad in Space</div>
                  </div>

                  <!-- Card 12 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/286136.png" alt="gift-wrap-12">
                     </div>
                     <div class="cyber-card-title">12: Night City Noir</div>
                  </div>

                  <!-- Card 13 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/614346.png" alt="gift-wrap-13">
                     </div>
                     <div class="cyber-card-title">13: It Will Work</div>
                  </div>

                  <!-- Card 14 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/374523.png" alt="gift-wrap-14">
                     </div>
                     <div class="cyber-card-title">14: Usual Monday</div>
                  </div>

                  <!-- Card 15 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/920551.png" alt="gift-wrap-15">
                     </div>
                     <div class="cyber-card-title">15: Wanna Be Pretty</div>
                  </div>

                  <!-- Card 16 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/142570.png" alt="gift-wrap-16">
                     </div>
                     <div class="cyber-card-title">16: One Shot Too Many</div>
                  </div>

                  <!-- Card 17 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/935133.png" alt="gift-wrap-17">
                     </div>
                     <div class="cyber-card-title">17: Migraine</div>
                  </div>

                  <!-- Card 18 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/226506.png" alt="gift-wrap-18">
                     </div>
                     <div class="cyber-card-title">18: Other’s Headache</div>
                  </div>

                  <!-- Card 19 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/46864.png" alt="gift-wrap-19">
                     </div>
                     <div class="cyber-card-title">19: Poke Your Noodles</div>
                  </div>

                  <!-- Card 20 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/501053.png" alt="gift-wrap-20">
                     </div>
                     <div class="cyber-card-title">20: I See Colours</div>
                  </div>

                  <!-- Card 21 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/742988.png" alt="gift-wrap-21">
                     </div>
                     <div class="cyber-card-title">21: Conspiracy Theory</div>
                  </div>

                  <!-- Card 22 -->
                  <div class="cyber-card gift-card">
<div class="price-tag price-iconic">15❄️</div>
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/751637.jpg" alt="gift-wrap-21">
                     </div>
                     <div class="cyber-card-title">22: Custom Service</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Кастомная обёртка по вашему заказу.</div>
                  </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* ================================================
   [1] Global Variables
=============================================== */
.cyberpunk-display {
  --bg-card: #121214; /* Глубокий матовый черный/серый */
  --bg-hover: #1a1a1f; 
  --bg-element: #1c1c21; /* Фон для кнопок и тайтлов */
   
  --color-text: #e0e0e0; /* Не чистый белый, а чуть мягче */
  --color-text-dim: #909090;
   
  --accent-yellow: #F2E600; /* Cyberpunk yellow */
  --accent-hot: #ff0055; /*hot red*/
  --accent-magenta: #FF06B5; /* Magenta */
  --accent-cyan: #00f0ff; /* Turq */
  --accent-border: rgba(255, 248, 31, 0.5); /* Faint yellow border */
  --accent-bordergrey: #3d3d45;
   
  --color-dark: #050505;
  --color-bglight: #1a1a1a;
  --color-bglighter: #2b2b2b;
   
/* --- Rarity Colors --- */
  --common: #f9f9f9;
  --uncommon: #00806f;
  --rare: #174fa3;
  --epic: #7d0fae;
  --legendary: var(--accent-yellow);

/* --- Typography --- */
  --font-stack: 'Rajdhani', 'Orbitron', 'Raleway', 'Roboto', monospace;
   
/* --- Spacing & Layout --- */
  --space-xs: 0.25rem;  /* ~4px */
  --space-sm: 0.5rem;   /* ~8px */
  --space-md: 1rem;     /* ~16px */
  --space-lg: 1.5rem;   /* ~24px */
   
/* --- Effects --- */
  --cp-clip-price: polygon(
    0 0, 
    100% 0, 
    100% calc(100% - 7px), 
    calc(100% - 7px) 100%, 
    0 100%
  );
  --cp-clip: polygon(
    0 0, 
    100% 0, 
    100% calc(100% - 15px), 
    calc(100% - 15px) 100%, 
    0 100%
  );
  --transition-std: 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); /*0.3s ease;*/
}

/* ================================================
   [2] Reset and Base
=============================================== */
.cyberpunk-display * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cyberpunk-display {
  font-family: var(--font-stack);
  color: var(--color-text);
  line-height: 1.1;
}

/* ================================================
   [3] Layout & Container
=============================================== */
.cyberpunk-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cyber-section {
  margin-bottom: var(--space-xs);
}

/* ================================================
   [4] Typography & Titles
=============================================== */
.cyber-title {
font-size: 1.125rem; /* 18px */
  color: var(--accent-magenta);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--accent-magenta);
  padding-bottom: var(--space-xs);
}

/* ================================================
   [5] Grid
=============================================== */
.cyber-grid {
  display: grid;
  /* Автоматическое заполнение: карточки не меньше 120px, но растягиваются если есть место */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-xs);
}

/* ================================================
   [6] Components: Card
=============================================== */
.cyber-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  transition: transform var(--transition-std);
  padding: 1px;
  clip-path: var(--cp-clip);
}

.cyber-card:hover {
  transform: translateY(-4px);
  background: var(--bg-hover);
  border-color: var(--accent-yellow);
  z-index: 5;
}

/* Ценник */
.price-tag {
  position: absolute; 
  top: 5px;
  left: 5px; 
  color: var(--color-dark);
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 4px;
  clip-path: var(--cp-clip-price);
  z-index: 10;
  transition: opacity var(--transition-std), transform var(--transition-std);
}

.cyber-card:hover .price-tag {
  opacity: 0;
  transform: translateY(-10px);
}

/* Rarity Colors for Price Tags */
.price-tag.price-common { background: #e0e0e0; }
.price-tag.price-reg { background: #26d1a5; }
.price-tag.price-med { background: #3d8bfd; color: #fff; }
.price-tag.price-rare { background: #9d4cf0; color: #fff; }
.price-tag.price-iconic { background: var(--accent-yellow); }

/* --- Card Content --- */

.cyber-card-title {
  font-size: 0.7rem;
  font-weight: 600; 
  color: white;
  background: var(--bg-element); 
  
  width: 100%;
  flex-grow: 0;
  margin-top: auto;
  
  /* Отступы: Сверху | Справа (больше из-за среза) | Снизу | Слева */
  padding: 5px 15px 5px 5px; 
   
  border-bottom: 1px solid var(--accent-border, 0.5); 
  border-top: 1px solid rgba(255,255,255,0.05);
  
  position: relative;
  z-index: 2;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  clip-path: var(--cp-clip);
}

/* При наведении меняем цвета на инверсию (Черный фон, Желтый/Розовый текст) */
.cyber-card:hover .cyber-card-title {
  background: var(--bg-hover);
  color: var(--accent-cyan);
  border-bottom-color: var(--accent-cyan);
}

.cyber-card-description {
  position: absolute; 
  bottom: 15%; /* Позиционируем прямо над тайтлом */
  left: 0;
  width: 100%;
  height: 45%;
  
  background: rgba(19, 19, 22, 0.95);
  padding: 10px;
  font-size: 0.65rem;
  color: var(--color-text-dim);
  text-align: left;
   
  opacity: 0;
  backdrop-filter: blur(10px);
  transform: translateY(10px); /* Легкий выезд снизу */
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1; 
}

/* 1. Показываем, если навели на Тайтл */
.cyber-card-title:hover ~ .cyber-card-description,
/* 2. Показываем, если навели на Индикатор (треугольник) */
.cyber-expand-indicator:hover ~ .cyber-card-description,
/* 3. Оставляем видимым, если навели на само Описание */
.cyber-card-description:hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* Включаем мышку, чтобы можно было выделить текст */
  user-select: text;
  cursor: text;
}

/* Цвет выделения текста на всём сайте */
::selection {
  background: var(--accent-magenta); /* Твой розовый цвет */
  color: #fff;
}

/* Expand indicator */
.cyber-expand-indicator {
  width: 0; 
  height: 0;
  margin: 3px auto;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--accent-yellow);
  transition: transform var(--transition-std);
}

.cyber-card:hover .cyber-expand-indicator {
  transform: rotate(180deg);
  border-top-color: var(--accent-cyan);
}

/* ================================================
   [7] Components: Images
=============================================== */

.cyber-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  flex: 1;      /* Растягивайся на всё свободное пространство */
  min-height: 0; /* чтобы картинка не выталкивала границы квадрата */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0; /* Убираем отступ снизу, чтобы плотнее сидело */
}

.cyber-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
  padding: 2px;
  transition: transform var(--transition-std);

}

.cyber-image-wrapper:hover img {
  transform: scale(1.1);
  filter: saturate(150%) brightness(110%);
  z-index: 3;
}

.cyber-gift-wrap .cyber-image-wrapper img {
  object-fit: cover;
}

/* ================================================
   [New] Состояние "Размещено" (is-placed)
=============================================== */

.cyber-image-wrapper.is-placed {
  border: 1px solid rgba(85, 233, 235, 0.3); 
  box-shadow: inset 0 0 15px rgba(85, 233, 235, 0.1); 
}

.cyber-image-wrapper.is-placed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(85, 233, 235, 0.05);
  z-index: 2;
  pointer-events: none;
}

.cyber-image-wrapper.is-placed img {
  filter: sepia(100%) hue-rotate(130deg) saturate(150%) brightness(110%);
  opacity: 0.7;
}

/* Убираем зум */
.cyber-image-wrapper.is-placed:hover img {
  transform: none;
  /* При наведении можно чуть подсветить сильнее */
  filter: sepia(100%) hue-rotate(130deg) saturate(160%) brightness(120%);
  opacity: 0.8;
}

/* ================================================
   Сворачиваем разворачиваем
=============================================== */

.cyber-section {
   margin-bottom: 0px; /* Расстояние между секциями */
}

.cyber-button {
  width: 100%;
  cursor: pointer;
  background: var(--bg-element);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  
  padding: var(--space-sm);
  
  border-left: 4px solid var(--accent-yellow); /* Желтая полоска слева всегда */
  border-bottom: 1px solid var(--accent-bordergrey);
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition-std);
  
  /* Срез угла кнопки */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  margin-bottom: 0px;
}

.cyber-button:hover {
  background: var(--color-bglight);
  color: var(--accent-magenta);
  border-color: var(--accent-magenta);
  padding-left: 25px; /* Эффект сдвига при наведении */
  letter-spacing: 3px;
}

.cyber-button.i_active {
  background: #181f22;
  color: var(--accent-cyan);
  border-bottom: 1px solid currentColor;
  border-left-color: var(--accent-cyan);
}

/* Индикатор разворота */
.cyber-button .select-mark {
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--accent-yellow);
  transition: transform var(--transition-std);
}

.cyber-button:hover .select-mark {
  border-top: 6px solid var(--accent-magenta);
}

.cyber-button.i_active .select-mark {
  transform: rotate(-180deg); 
  border-top: 6px solid var(--accent-cyan);
}

/* Текст под кнопкой */
.cyber-description {
  font-size: 0.625rem; /* 10px */
  color: var(--color-text-dim);
  text-align: right;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xs);
  background: var(--color-dark);
}

.cyber-content-wrap {
  display: none;
  background: var(--color-bglighter);
  padding: var(--space-sm);
}

.cyber-content-wrap.active {
    display: block; /* Класс для JS переключения */
}

/* ================================================
   [9] Responsive Styles
=============================================== */
@media (max-width: 768px) {
  .cyber-grid {
    /* На мобильных уменьшаем минимальный размер карточки */
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--space-xs);
  }

.cyber-card-title {
  font-size: 0.5rem;
}

.cyber-card-description{
  font-size: 0.4rem;
}
  
  .price-tag {
    font-size: 0.5rem;
    padding: 2px 4px;
  }
}
</style>

<script>

  document.querySelectorAll('.cyber-button').forEach(button => {
    button.addEventListener('click', () => {
      const content = button.nextElementSibling;

      // Сворачиваем все открытые секции
      document.querySelectorAll('.cyber-content-wrap').forEach(otherContent => {
        if (otherContent !== content) {
          otherContent.style.display = 'none';
          otherContent.previousElementSibling.classList.remove('i_active');
        }
      });

      // Переключаем текущую секцию
      if (content.style.display === 'block') {
        content.style.display = 'none';
        button.classList.remove('i_active');
      } else {
        content.style.display = 'block';
        button.classList.add('i_active');
      }
    });
  });

</script>
datasprawl

Меню навигации

Пользовательские ссылки

Информация о пользователе

ёлочка 2

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

Поделиться12025-12-15 22:10:51

Поделиться22025-12-16 01:02:18

Поделиться32025-12-25 22:07:26
