Задать вопрос
@fristik

Почему у меня не отображаются кнопки?

Вот HTML:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
        rel="stylesheet">
</head>

<body>


    <header>

        <div class="container">
            <nav class="header__nav">
                <a href="../../index.html"> <img src="./logo.jpg" alt="logo" class="header__logo"> </a>
                <ul class="header__menu">
                    <li class="menu__link"> <a class="link__second" href="../../index.html"> Главная </a></li>
                    <li class="menu__link"> <a class="link__now" href=""> Тренажеры </a></li>
                    <li class="menu__link"> <a class="link__second" href=""> Упражнения </a></li>
                    <li class="menu__link"> <a class="link__second" href=""> Спортивные добавки </a></li>
                </ul>
            </nav>
        </div>

    </header>





</body>

</html>


Вот CSS:

html {
    scroll-behavior: smooth;
}



* {
    margin: 0;
    padding: 0;
}


a {
    text-decoration: none;
    color: white;
}


body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;

}

.container {
    width: 1250px;
    margin: auto;
    /* border: 1px solid red; */
}

.sticky__button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    position: fixed;
    right: 5px;
    bottom: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(27, 23, 247);
}

.sticky__button img {
    width: 23px;
}


:root {
    --p-text: 17px;


    --h2-title: 28px;


    --title-color: blue;
    --title-background: -webkit-linear-gradient(80deg, blue, rgb(0, 0, 0));
}


header {
    /* margin-bottom: 100px; */
    box-shadow: 0 8px 16px rgb(0, 0, 0);
    margin-bottom: 5px;
    align-items: center;
    margin-bottom: 50px;
}

.header__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin: 10px; */
}

.header__logo {
    width: 100px;
}

.header__menu {
    display: flex;
    gap: 30px;
}



.menu__link {
    /* z-index: 0;
    position: relative; */
    font-weight: 500;
    list-style: none;
    font-size: 18px;
    color: blue;
    background: -webkit-linear-gradient(80deg, blue, rgb(0, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.link__second:after {
    display: block;
    position: absolute;
    right: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background-color: black;
    content: "";
    transition: width 0.5s;
}

.link__second:hover:after {
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 2px;
    background-color: rgb(255, 0, 0);
    content: "";
    transition: width 0.5s;
}

.link__second {
    transition: all ease .4s;
    position: relative;
    z-index: 1;
    cursor: pointer;
    font-size: 24px;
    text-decoration: none;
}

.link__now {
    background-color: rgba(0, 13, 192, 0.16);
    padding: 4px 14px;
    border-radius: 5px;
}

.header__effect {}
  • Вопрос задан
  • 122 просмотра
Подписаться 1 Средний 3 комментария
Пригласить эксперта
Ответы на вопрос 2
alexprime96
@alexprime96
уберите свойства у элемента .menu__link
-webkit-background-clip: text; 
 -webkit-text-fill-color: transparent;
Ответ написан
Комментировать
Tishaa
@Tishaa
у списка position: relative надо мб
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы