[html]<div class="shop-wrapper">
<!-- ИНСТРУКЦИЯ -->
<div class="shop-info">
<div class="shop-title">магазин</div>
<div class="shop-info-text">
чтобы примерить элемент оформления, необходимо кликнуть по нему.
примеряйте градиенты, цвета и картинки на плашке.
вы можете изменить цвет градиента, если он не подходит
[можете использовать пипетку для определения нужного цвета].
<br>
• свои фоны и иконки вы также можете подобрать и примерить.
а поискать можете тут pinterest — wallpaper aesthetic.<br>
• чтобы посмотреть фон для личной страницы целиком —
откройте картинку в новой вкладке.<br>
• вы можете вставить ссылку фона в плашку — и будет такая же плашка!<br>
<b>ВАЖНО!</b> в профиле в разделе «дополнительно»
вы можете сами поменять оформление профиля
(там будут фоны/плашки/иконки, которые уже есть в вашем лс).
<u>обратите внимание</u>, личная страница — одна для всех ваших профилей.
</div>
</div>
<div class="shop-content">
<!-- ЛЕВАЯ КОЛОНКА -->
<aside class="shop-preview">
<div class="preview-card">
<div class="preview-cover"></div>
<div class="preview-name">
mason blackwood
</div>
<div class="preview-status">
тестовый статус
</div>
<img class="preview-avatar"
src="https://i.imgur.com/7ZQ7Z9P.jpeg">
<div class="preview-realname">
имя фамилия
</div>
<div class="preview-description">
краткое описание где-то глубоко внутри
киберпространства, среди бесконечных
световых границ, он чувствовал себя
одним.
</div>
<div class="preview-icon">☕</div>
<div class="preview-footer">
ДАЖЕ ТЬМА ОСТАВЛЯЕТ СЛЕД
</div>
</div>
<!-- НАСТРОЙКИ -->
<div class="preview-settings">
<div class="settings-title">
настройки плашки
</div>
<input type="text"
id="plateText"
value="Даже тьма оставляет след">
<input type="text"
id="plateText2"
placeholder="Строка 2">
<button onclick="applyGradient()">
использовать градиент
</button>
<div class="color-row">
<span>Цвет 1:</span>
<input type="color" id="color1" value="#8b8f86">
</div>
<div class="color-row">
<span>Цвет текста:</span>
<input type="color" id="textColor" value="#666666">
</div>
<div class="settings-buttons">
<button onclick="copyDesign()">
копировать оформление
</button>
<button onclick="clearDesign()">
очистить
</button>
</div>
</div>
</aside>
<!-- ПРАВАЯ КОЛОНКА -->
<main class="shop-items">
<!-- ИКОНКИ -->
<section class="shop-section">
<div class="section-title">
иконки: 200 баксов
</div>
<div class="shop-input">
<input type="text"
id="iconUrl"
placeholder="вставьте ссылку на изображение">
<button onclick="addIcon()">
применить
</button>
</div>
<div class="icons-grid">
<span>🦊</span>
<span>💙</span>
<span>💛</span>
<span>🥤</span>
<span>💿</span>
<span>💌</span>
<span>🌑</span>
<span>🌸</span>
<span>🐸</span>
<span>🐊</span>
<span>🐺</span>
<span>💗</span>
<span>🦄</span>
<span>🍸</span>
<span>💣</span>
<span>📚</span>
<span>💗</span>
<span>✨</span>
<span>⚡</span>
<span>🔥</span>
<span>💎</span>
<span>🌹</span>
<span>📕</span>
<span>⭐</span>
<span>🐙</span>
<span>🧁</span>
<span>🐱</span>
<span>👑</span>
<span>♥️</span>
<span>🖤</span>
<span>☕</span>
<span>🍕</span>
<span>💋</span>
<span>🪽</span>
<span>🌙</span>
<span>💎</span>
<span>☁️</span>
</div>
</section>
<!-- ФОНЫ -->
<section class="shop-section">
<div class="section-title">
фоны: 400 баксов
</div>
<div class="shop-input">
<input type="text"
placeholder="вставьте ссылку на изображение">
<button>применить</button>
</div>
<div class="backgrounds-grid">
<div class="background-item"
style="background-image:url('https://i.imgur.com/placeholder1.jpg')">
</div>
<div class="background-item"
style="background-image:url('https://i.imgur.com/placeholder2.jpg')">
</div>
<div class="background-item"
style="background-image:url('https://i.imgur.com/placeholder3.jpg')">
</div>
</div>
</section>
<!-- НИЖНЯЯ ЧАСТЬ -->
<div class="shop-bottom">
<!-- ГРАДИЕНТЫ -->
<section class="shop-section gradients-section">
<div class="section-title">
фоны плашек: 200 баксов
</div>
<div class="gradient-list">
<div class="gradient gradient-1"
onclick="selectGradient(this)">
</div>
<div class="gradient gradient-2"
onclick="selectGradient(this)">
</div>
<div class="gradient gradient-3"
onclick="selectGradient(this)">
</div>
<div class="gradient gradient-4"
onclick="selectGradient(this)">
</div>
</div>
</section>
<!-- КАРТИНКИ -->
<section class="shop-section plates-section">
<div class="section-title">
картинки для плашек: 200 баксов
</div>
<div class="shop-input">
<input type="text"
placeholder="вставьте ссылку на изображение">
<button>применить</button>
</div>
<div class="plate-images">
<div style="
background-image:url('https://i.imgur.com/plate1.jpg');
"></div>
<div style="
background-image:url('https://i.imgur.com/plate2.jpg');
"></div>
<div style="
background-image:url('https://i.imgur.com/plate3.jpg');
"></div>
</div>
</section>
</div>
</main>
</div>
</div>[/html] [hideprofile]
