Здравствуйте! сегодня я сидел думал что бы такого сделать ну и тыкал на кнопки и методом тыка получился данный материал, так что сильно строго не судите!
О материале
В первую очередь наверное нужно написать что у него нет прямого назначения и он не относится конкретно к uCoz так как в нём нет операторов и его можно использовать под что угодно например оформить вывод пользователей типа топ 5 или 10 ну или вывести список команды своего сайта. Так же наверное нужно указать что адаптации нет так как количество блоков индивидуально для каждого то я её и не стал делать по умолчанию ну да и не зачем наверное её делать было мне так как в данном материале представлен просто один блок и некоторые стили к нему для примера! В качестве примера я написал два варианта стилей для данного блока для того что бы показать как можно использовать его так что смотрите скриншоты
Скриншоты
Первый вариант четыре вряд
Второй вариант четыре в два столбика
Естественно вариантов гораздо больше можно придумать но писать тогда пришлось бы мне дольше да и кучу скриншотов делать!!!
Вообщем кому интересен данный материал или просто захотелось поиграться с ним предлагаю приступить к его установки!
Установка
Ну установка довольно проста, Копируем код ниже и размещаем в нужное место после чего изменяем картинку и текст на то что вам нужно так же я там указал ссылку пустую мало ли кому то нужно будет сделать переход по клику на данный блок на другую страницу так что тоже не забываем её указать ну или удалить если она вам не нужна в коде
Код
Код
<div class="waakbc">
<div class="waakuserbc">
<a href="ССЫЛКА НА ДРУГУЮ СТРАНИЦУ">
<div class="waakimguserbc"><img src="ССЫЛКА НВ КАРТИНКУ" alt=""></div>
<div class="waakusernamebc">WAAK <p>talantlev.ucoz.ru</p></div>
</a>
</div>
</div>
<div class="waakbc">
<div class="waakuserbc wa1">
<a href="ССЫЛКА НА ДРУГУЮ СТРАНИЦУ">
<div class="waakimguserbc"><img src="ССЫЛКА НВ КАРТИНКУ" alt=""></div>
<div class="waakusernamebc">WAAK <p>talantlev.ucoz.ru</p></div>
</a>
</div>
</div>
Отлично не забывайте сохранить!
Если вы внимательно посмотрите на код выше то заметите там два одинаковых блока с небольшой той разницей что в одном из них есть дополнительный класс а именно
wa1 так вот его я добавил для того что бы изменить цвет фона а также цвет обводки картинки и округлить другие углы второго блока тем самым я хотел показать вам то что вы можете так же придумать новые классы для других блоков со своими стилями
Ну и конечно же стили которые нам понадобятся копируем их ниже и добавляем в свою таблицу стилей в самый её конец
Таблица стилей
Код
.waakbc {
display: inline-block;
}
.waakuserbc {
margin: 10px;
padding: 24px 0;
overflow: hidden;
width: 200px;
background:linear-gradient(45deg, rgb(1 0 12) 50%, rgb(255 0 56) 100%);
border-radius: 0 100px 0 100px;
}
.waakuserbc.wa1 {
background:linear-gradient(45deg, rgb(40 26 197) 50%, rgb(0 255 231) 100%);
border-radius: 100px 0 100px 0;
}
.waakuserbc, .waakuserbc a {
text-decoration: none;
display: block;
text-align: center;
}
.waakimguserbc {
width: 120px;
height: 120px;
border-radius: 100%;
overflow: hidden;
margin: 10px auto;
border-width: 5px 5px;
border-style: solid;
border-color: #020016 #020016 #8c0122 #8c0122;
}
.waakuserbc.wa1 .waakimguserbc {
border-color: #281ac5 #281ac5 #129ad8 #129ad8;
}
.waakimguserbc img {
width: 120px;
height: 120px;
object-fit: cover;
}
.waakusernamebc {
font-size: 11px;
padding: 10px 5px;
color: rgba(255,255,255, .90);
}
.waakusernamebc p {
font-size: 10px;
color: rgba(255,255,255, .50);
}
Отлично не забывайте сохранить!
Последним шагом нам осталось очистим кеш у браузера а в этом нам поможет комбинация клавиш
Ctrl+F5 и на этом установка завершена! Все вопросы пожелания предложения ну или замечания прошу оставлять в комментариях.
