0

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <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=El+Messiri:wght@400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,900&display=swap" rel="stylesheet">
</head>
<body>

    <div class="container">
        <header class="header">
            <div class="header-logo">
                <img class="vector" src="Vector.png" alt="вектор">
                <img class="w" src="W.png" alt="w">
            </div>
            <nav class="header-nav">
                <a href="#" class="nav-items">Главная</a>
                <a href="#" class="nav-items">Сеансы</a>
                <a href="#" class="nav-items">Отзывы</a>
                <a href="#" class="nav-items">Контакты</a>
                <a href="#" class="nav-items">Новости</a>
                <a href="#" class="nav-items">Обо мне</a>
                <a href="#" class="nav-items"></a>
            </nav>
            <div class="header-button">Записатся на сеанс</div>
        </header>
        <div class="container-slider">
            <img src="unsplash_S-llxYh3GzI.png" alt="девочка" class="slider-photo">
            <img src="Rectangle%203.png" alt="прямоугольник1" class="slider-rectangle1">
            <div class="slider-smalltext">Укрепление здоровья</div>
            <img src="Rectangle%205.png" alt="прямоугольник1" class="slider-rectangle2">
            <h1 class="slider-bigtext">Акватерапия <br>
            RitmStyle
            </h1>
        </div>
        <div class="just">
            <img class="rectangle3" src="Rectangle%206.png" alt="sdaddq">
            <div class="just-text">Сеансы RitmStyle</div>
            <img class="rectangle4" src="Rectangle%207.png" alt="sdaddq">
        </div>

        <div class="grid-container">
            <img src="unsplash_TnOyyEtrKd0.png" alt="gc big" class="gc-small  gc-small--0"><div class="grid-text1">Стандартный RitmStyle</div>
            <img src="unsplash_TnOyyEtrKd0%20(1).png" alt="" class="gc-small  gc-small--1"><div class="grid-text">RitmStyle для пар</div>
            <img src="unsplash_TnOyyEtrKd0%20(1).png" alt="" class="gc-small  gc-small--2"><div class="grid-text">RitmStyle с полным погружением под воду</div>
            <img src="unsplash_TnOyyEtrKd0%20(1).png" alt="" class="gc-small  gc-small--3"><div class="grid-text">RitmStyle для беременных</div>
            <img src="unsplash_TnOyyEtrKd0%20(1).png" alt="" class="gc-small  gc-small--4"><div class="grid-text">RitmStyle + красочная подводная фотосессия</div>
        </div>
        <img src="Rectangle%2013.png" alt="" class="grid-rectangle">

    </div>

</body>
</html>

CSS:

body {
    background-color: #162831;
    margin: 0;
    font-family: 'El Messiri', sans-serif;
    color: #ffffff;
}

.container {
    display: block;
    margin: 0 auto;
    min-width: 1140px;
    width: 1140px;
    height: 1700px;
}

.header {
    margin: 40px;
}

.header-logo {
    position: relative;
    top: 0;
    left: -40px;
}

.w {
    position: absolute;
    top: 14px;
    left: 13px;
}

.header-nav {
    display: flex;
    margin-left: 174px;
    font-family: 'Roboto', sans-serif;
    margin-top: -43px;
    font-size: 13px;
}

.nav-items {
    padding-right: 54px;
    text-decoration: none;
    color: #ffffff;
}

.nav-items:hover {
    color: blue;
}

.nav-items:last-child {
    padding-right: 0;
}

.header-button {
    display: block;
    background-color: #018ABE;
    align-self: flex-end;
    font-family: 'Roboto', sans-serif;
    width: 150px;
    font-size: 13px;
    text-align: center;
    border-radius: 5px;
    padding: 9px 0;
    margin-left: 950px;
    margin-top: -26px;
    transition: .2s;
}

.header-button:hover {
    color: #018ABE;
    background-color: #ffffff;
    transition: .2s;
}

.container-slider {
    margin-top: 20px;
    position: absolute;
    max-width: 1140px;
    width: 1140px;
    height: 527.78px;
    min-height: 527.78px;
    margin-bottom: 140px;
}

.slider-photo {
    min-width: 1140px;
    width: 1140px;
}

.slider-smalltext {
    position: relative;
    top: -420px;
    left: 0;
    text-align: center;
    font-size: 24px;
}

.slider-bigtext {
    position: relative;
    top: -450px;
    left: 0;
    font-size: 64px;
    text-align: center;
    line-height: 140%;
    z-index: 5;
    font-weight: 500;
}

.slider-rectangle1 {
    position: relative;
    top: -387px;
    font-size: 64px;
    line-height: 140%;
    z-index: 5;
    font-weight: 500;
    left: 342px;
}

.slider-rectangle2 {
    position: relative;
    top: -449px;
    font-size: 64px;
    line-height: 140%;
    z-index: 5;
    font-weight: 500;
    left: 769px;
}


.just {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    margin-top: 720px;
}

.just-text {
    font-size: 42px;
    font-weight: bold;
    line-height: 89.6px;
}

.rectangle3 {
    margin-right: 42px;
}

.rectangle4 {
    margin-left: 42px;
}


.grid-container {
    height: 472.5px;
    min-height: 472.5px;
    max-height: 472.5px;
    max-width: 1140px;
    width: 1140px;
    min-width: 1140px;
    margin-top: 140px;

    display: grid;
    grid-template-rows: 225.75px 225.75px;
    grid-template-columns: 363.99px 363.99px 363.99px;
    gap: 20px;
}


.gc-small {
    max-width: 364px;
    position: relative;
}

.gc-small--1 {
    grid-column-start: 2;
    grid-row-start: 1;
}

.gc-small--2 {
    grid-column-start: 3;
    grid-row-start: 1;
}

.gc-small--3 {
    grid-column-start: 3;
    grid-row-start: 2;
}

.gc-small--4 {
    grid-column-start: 2;
    grid-row-start: 2;
}

.grid-text {
    position: absolute;
}

.grid-rectangle {
    position: absolute;
    z-index: 20;
    width: 364px;
    max-width: 364px;
    padding-bottom: 0;
    top: 1506px;
    display: none;
}

.gc-small--0:hover + .grid-rectangle {
    display: block;
}

Нужно: Чтоб блок rectangle-grid появлялся

1 ответ 1

0

Очевидно, потому, что не существует у вас элемента, соответствующего селектору .gc-small--0:hover + .grid-rectangle.

Более того, вы в принципе не сможете никак повлиять на элемент с классом grid-rectangle из элемента с классом gc-small--0, как бы вы ни старались - стиля не действуют на родителей элемента и их "младших братьев". Пока что.

А код вообще-то надо оформлять в виде нормального сниппета, где HTML отдельно, CSS отдельно. И вычищать от того, что к делу не относится. И ссылки на локальные картинки будут нерабочие при запуске сниппета, надо абсолютные урлы давать, или без картинок обходиться. Проявлять надо некоторое уважение, никто не будет копировать ваш код, запускать его у себя, да еще и картинки подставлять.

3
  • Ясно, Спасибо. А если опубликовать код в интернете, тогда ведь работают изображения с компьютера, и их будет видно тем, кто код копирует?
    – user503974
    16 июн 2022 в 10:31
  • Тогда работают изображения не с компьютера, а из интернета =) Вы можете сделать здесь сниппет с вашим кодом, указав в качестве src картинок абсолютные адреса. Но это в общем, для конкретно вашей задачи картинки как таковые роли не играют. 16 июн 2022 в 10:39
  • Понял, благодарю
    – user503974
    16 июн 2022 в 10:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.