Задать вопрос
moryachello

Юрий Матрос

Всего понемножку, много не бывает.
Ответы пользователя по тегу HTML

  • Объект вылетает из контейнера. Что делать?

    moryachello
    @moryachello
    Всего понемножку, много не бывает.
    Обратить внимание на .intro__slider{position:absolute;}
    Ответ написан
    Комментировать
    Комментировать

  • Почему не переключаются табы?

    moryachello
    @moryachello
    Всего понемножку, много не бывает. 
    // получаем массив всех вкладок
const tabs = document.querySelectorAll(".tab");
// получаем массив всех блоков с содержимым вкладок
const contents = document.querySelectorAll(".content");

// запускаем цикл для каждой вкладки и добавляем на неё событие
for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click", (event) => {

    // сначала нам нужно удалить активный класс именно с вкладок
    let tabsChildren = event.target.parentElement.children;
    for (let t = 0; t < tabsChildren.length; t++) {
      tabsChildren[t].classList.remove("tab--active");
    }
    // добавляем активный класс
    tabs[i].classList.add("tab--active");
    // теперь нужно удалить активный класс с блоков содержимого вкладок
    for (let c = 0; c < contents.length; c++) {
      contents[c].classList.remove("content--active");
    }
    // добавляем активный класс
    contents[i].classList.add("content--active");

  });
}
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать обратную анимацию при смене div?

    moryachello
    @moryachello
    Всего понемножку, много не бывает.
    Добавь
    .wrap_colum {transition:all 0.8s;}
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно сверстать блок?

    moryachello
    @moryachello
    Всего понемножку, много не бывает.
    немного наркомании 

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="section-main">
            <div class="main">
                <div class="main-left">
                    <h1>Тут твой длинный и красивый заголовок на пловину экран</h1>
                    <p>тут описание и все дела ут описание и все дела ут описание и все дела ут описание и все дела тут
                        описание и все дела ут описание и все дела ут описание и все дела ут описание и все дела</p>
                    <button>Кнопка без стилей</button>
                </div>
                <div class="main-right">

                </div>
            </div>
            <div class="bloks">
                <div class="blok1"></div>
                <div class="blok2">
                    <div class="inner1">
                        <div class="fill1"></div>
                        <div class="fill2"></div>
                        <div class="fill3"></div>
                    </div>
                    <div class="inner2"></div>

                </div>
            </div>
        </div>
    </div>
</body>

<style>
    .container {
        width: 90%;
        margin: 0 auto;
        max-width: 1200px;
    }

    .section-main {
        height: 100vh;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: space-evenly;
    }

    h1 {
        font-size: 50px;
        font-weight: 300;
    }

    h1,
    p {
        max-width: 450px;
    }

    .main,
    .bloks {
        display: flex;
        padding: 60px 0px;
    }

    .bloks {
        justify-content: space-between;
        gap: 50px;
    }


    .main-left,
    .main-right {
        width: 50%;
    }

    .blok1 {
        width: 200px;
        height: 300px;
        border-radius: 0 100% 100% 0 / 0 60% 60% 0;
        background: #f1f5f9;
    }


    .blok2 {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        width: 100%;

        height: 100%;
    }

    .inner1,
    .inner2 {
        display: flex;
        height: 130px;
        width: 100%;
        gap: 50px;
    }

    .inner2 {
        background: #ffdd58;
        border-radius: 10% 10% 10% 30% / 0% 100% 100% 200%;

    }

    .fill1 {
        background: #ffe3fb;
        width: 30%;
        border-radius: 100% 100% 0 0 / 140% 140% 0 0;
    }

    .fill2 {
        background: #15837b;
        width: 30%;
        border-radius: 5% 74% 55% 100% / 1% 100% 99% 170%;
    }

    .fill3 {
        background: #7df1e8;
        width: 60%;
        height: 450%;
        position: relative;
        top: -350%;
        border-radius: 100% 0 0 0% /65% 0 0 0;
    }
</style>

</html>
    Ответ написан
    2 комментария
    2 комментария

  • Есть ли сайт/утилита для проверки сайта на устройствах Iphone?

    moryachello
    @moryachello
    Всего понемножку, много не бывает.
    iloveadaptive.com
    Ответ написан
    1 комментарий
    1 комментарий