Сева-H1

Портфолио

YouTube

Ресурсы

Поиск

Помощь студентам Университет Синергия в написании тестов, а также курсовых, дипломных, практических и научно-исследовательских работ

Для заголовка нужно задать класс custom-h1
Всё обращение к ссылка идёт в атрибуте, который в квадратных скобках, его менять на свои ссылки
В примере для первого слова сделал иконку и ховер, у остальных элементов можно сделать также по аналогии, нужно вставлять только свои ссылки на картинку
+ адаптив отрабатывает плюс-минус нормально

<style>

    /* Ссылка 1 */
/* пример с иконкой рядом с текстом */
.custom-h1 [href="/link-1"] {
    display: inline-flex;
    padding: 5px 15px;
    background-color: #f00950;
    border-radius: 16px;
    color:  white !important;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    transition: all 0.3s ease-in;
}
/* настройки иконки */
.custom-h1 [href="/link-1"]:before {
    content: "";
    display: block;
    height: 30px;
    width: 30px;
    border-radius: 8px;
    background-color: white;
    background-image: url(https://static.tildacdn.com/tild6166-3566-4136-b661-356463376265/ip.svg);
    background-position: center;
    background-repeat: no-repeat;
}
/* стили при наведении */
.custom-h1 [href="/link-1"]:hover {
    background-color: #000000;
}
/* ------------------- */


/* Ссылка 2 */
.custom-h1 [href="/link-2"] {
    display: inline-flex;
    padding: 1px 15px 5px 15px;
    background-color: #0963f0;
    border-radius: 16px;
    color:  white !important;
}

/* Ссылка 3 */
.custom-h1 [href="/link-3"] {
    display: inline-flex;
    padding: 1px 15px 5px 15px;
    background-color: #06ac5f;
    border-radius: 16px;
    color:  white !important;
}

/* Ссылка 4 */
.custom-h1 [href="/link-4"] {
    display: inline-flex;
    padding: 1px 15px 5px 15px;
    background-color: #b126fd;
    border-radius: 16px;
    color:  white !important;
}

/* Ссылка 5 */
.custom-h1 [href="/link-5"] {
    display: inline-flex;
    padding: 1px 15px 5px 15px;
    background-color: #fd890f;
    border-radius: 16px;
    color:  white !important;
}




</style>