http://gs-permakultura-v-ukran.mozello.com/ux-2/ Пермакультура - UX http://gs-permakultura-v-ukran.mozello.com/ux-2/params/post/5253949/2 Sat, 16 May 2026 10:43:00 +0000 22222222222222222222222<hr class="moze-more-divider"><p>2</p><p><br></p><!-- Контейнер справжньої сітки стільників --> <div class="honeycomb-wrapper"> <div class="honeycomb-grid"> <!-- Стільник 1 --> <div class="hex-cell" onclick="openHoneycomb(this)"> <div class="hex-shape"> <div class="hex-inner-content"> <div class="hex-front"> <span class="hex-icon">🐝</span> <h3>Про нас</h3> </div> <div class="hex-back"> <p>Ми — команда креаторів, що створює нестандартні рішення для брендів.</p> </div> </div> </div> </div> <!-- Стільник 2 --> <div class="hex-cell" onclick="openHoneycomb(this)"> <div class="hex-shape"> <div class="hex-inner-content"> <div class="hex-front"> <span class="hex-icon">🍯</span> <h3>Послуги</h3> </div> <div class="hex-back"> <p>Дизайн, розробка, копірайтинг та повна підтримка вашого сайту.</p> </div> </div> </div> </div> <!-- Стільник 3 (зміщений вниз по центру завдяки CSS) --> <div class="hex-cell" onclick="openHoneycomb(this)"> <div class="hex-shape"> <div class="hex-inner-content"> <div class="hex-front"> <span class="hex-icon">📞</span> <h3>Контакти</h3> </div> <div class="hex-back"> <p>Пишіть нам у будь-який час на пошту або телефонуйте прямо зараз!</p> </div> </div> </div> </div> </div> </div> <!-- Стилі для побудови геометрії вулика --> <style> .honeycomb-wrapper { display: flex; justify-content: center; align-items: center; padding: 60px 20px; background: #1a1a1a; /* Темне тло підкреслює золоті стільники */ overflow: hidden; } .honeycomb-grid { display: grid; grid-template-columns: repeat(2, 160px); grid-gap: 15px; justify-content: center; } /* Магія зміщення третього стільника для створення форми вулика */ .hex-cell:nth-child(3) { grid-column: span 2; justify-self: center; margin-top: -50px; /* Наїзд вгору між двома першими стільниками */ } .hex-cell { width: 160px; height: 185px; cursor: pointer; position: relative; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; } /* Ефект маски-шестигранника */ .hex-shape { width: 100%; height: 100%; background: linear-gradient(135deg, #ffcc00, #ff9900); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; } .hex-inner-content { width: 90%; height: 90%; background: #222; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; position: relative; padding: 15px; box-sizing: border-box; } /* Контент всередині */ .hex-front, .hex-back { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 15px; box-sizing: border-box; transition: all 0.4s ease; } .hex-front { opacity: 1; transform: scale(1); } .hex-icon { font-size: 28px; margin-bottom: 5px; } .hex-front h3 { color: #fff; margin: 0; font-size: 16px; font-family: sans-serif; } .hex-back { opacity: 0; transform: scale(0.6); color: #ffcc00; font-size: 13px; font-family: sans-serif; line-height: 1.4; } /* ⚡️ СТАН ПРИ КЛІКУ (АКОРДЕОННИЙ ЕФЕКТ) */ .hex-cell.active { z-index: 10; transform: scale(1.4); /* Стільник збільшується */ } .hex-cell.active .hex-shape { background: #ffcc00; clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0); /* Перетворюється на квадрат/коло */ border-radius: 20px; } .hex-cell.active .hex-inner-content { background: #111; clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0); border-radius: 18px; } .hex-cell.active .hex-front { opacity: 0; transform: scale(0.5); } .hex-cell.active .hex-back { opacity: 1; transform: scale(1); } </style> <!-- Скрипт для активації елементів --> <script> function openHoneycomb(element) { const allCells = document.querySelectorAll('.hex-cell'); if (element.classList.contains('active')) { element.classList.remove('active'); } else { allCells.forEach(cell => cell.classList.remove('active')); element.classList.add('active'); } } </script> <p> Чудово, що цей вектор руху підійшов краще! Тепер, коли основа структури вулика працює правильно, ви можете самостійно розвивати цей дизайн під ваші фірмові кольори та тексти у Mozello. Ось кілька простих ідей, як можна покращити або кастомізувати цей код у майбутньому: * Зміна кольорів: Якщо яскраво-жовтий колір не підходить до вашого сайту, знайдіть у CSS-стилях рядок background: linear-gradient(...) і замініть шістнадцяткові коди (наприклад, #ffcc00) на корпоративні кольори вашого бренду. * Додавання нових стільників: Щоб розширити вулик, ви можете копіювати блоки </p><div class="hex-cell">. Якщо захочете зробити велику горизонтальну сітку (наприклад, 3 або 4 стільники в ряд), потрібно буде змінити параметр grid-template-columns: repeat(2, 160px) у стилях, збільшивши цифру 2 до потрібної кількості колонок. * Заміна іконок: Замість стандартних емодзі (🐝, 🍯, 📞) всередину тегів <span class="hex-icon"> можна вставити скопійовані SVG-іконки або звичайні картинки-логотипи через тег <img>. Якщо під час тестування у Mozello виникнуть питання щодо адаптації під мобільні телефони або ви захочете додати посилання всередині тексту, які мають відкриватися після кліку, напишіть — я скоригую код. Вам допомогти налаштувати конкретну кількість елементів під вашу структуру сайту, чи поки що тестуєте цей варіант? </span></div>