Почему Свайпер js не работает?

УРЯ! Спасибо, помогло. Даже не знал, что так принципиально надо указывать имена классов.

Почему Свайпер js не работает?

А оно должно влиять? Попробовал все равно не работает. может проблема с родительскими блоками. он должен выглядеть так как на картинке изображено, т.е. не целиком один блок на весь экран а по несколько.

Почему Свайпер js не работает?

Ну это да, ошибку понял. Там по сути этот скрипт там и не нужен в моем случае. Но он все равно глючит. Не знаю в чем дело, раньше пробовал работало тут нет. Исправил.

Почему Свайпер js не работает?

Все равно тупит

Где искать макеты сайтов?

Ну зачем вы так.

Как адаптировать данный код под телефон?

Я поместил тест с буквами в ссылку. А стрелки сделал с помощью изображений, хотя наверно так не делается. Т.к. изображения загружать долго я загрузил картинки из инета с тем же расширением, что и изображения стрелок.

Как прижать блок к правому краю?

https://codepen.io/EdWrightwesr/pen/yLpazZG

Как выровнять блок или картинку по центру?

Да, вы правы. С марджином действительно работает. Спасибо.

Как выровнять блок или картинку по центру?

https://codepen.io/EdWrightwesr/pen/ExoKdry

Сделал, только у меня картинки непрозрачные однотонные можно добавить opacity. Но это навряд ли поможет, так как рисунки должны налегать друг на друга.

Как выровнять блок или картинку по центру?

Ankhena, Она есть просто здесь не добавил в общую поместил со звездочкой.

Как вытянуть фон во всю ширину при адаптиве?

Я бы с радостью. Вот только он не будет видеть моих картинок. Я делал сайт локально.

Как скрыть меню при нажатии на любую другую область?

А просто на js как будет выглядеть? Я с jq не дружу.

Как вытянуть фон во всю ширину при адаптиве?

Пробовал не выходит.

Как сделать переключатель страниц?

Beliyadm, А как сделать так, теперь при уменьшении картинок у нижнего блока остается пустое место. Как его убрать?

Как решить ошибку в браузере?

Разобрался вроде.

Как решить ошибку в браузере?

Это понятно. Но любые способы задать путь к файлу все равно приводят к ошибке.

Как сделать вывод картинки при нажатии кнопки?

Ankhena, извините, я совсем недавно начал изучать js и поэтому плохо разбираюсь в нем не могли бы подробнее расписать на примере решение?

Как сделать вывод картинки при нажатии кнопки?

Алгоритм я понимаю. Но вот саму запись не знаю как сделать. Новичок.

Как сделать рамку?

Ankhena, проблема в том, что рамка отталкивается от границ фона на 20px сверху.

Почему часть фона пропадает при уменьшении расширения?

HTML

<div class="header">
        <div class="container header-content">
            <div class="header-left">
                <a href="#" class="logo">
                    <img src="image/logo.png" class="logo-img" alt="logo">BRAN<pclass="pink">D</p>
                </a>
                <form action="" class="form">
                        <div class="form-menu">
                            <button class="form-browse"><p>Browse &#x25BE</p></button> 
                            <div class="drop">
                                <div class="drop-flex">
                                    <h3 class="drop-h3">Women</h3>
                                    <ul class="drop-menu">
                                        <li><a href="" class="drop-link">Dresses</a></li>
                                        <li><a href="" class="drop-link">Tops</a></li>
                                        <li><a href="" class="drop-link">Sweaters/Knits</a></li>
                                        <li><a href="" class="drop-link">Jacets/Coats</a></li>
                                        <li><a href="" class="drop-link">Blazers</a></li>
                                        <li><a href="" class="drop-link">Legings/Pants</a></li>
                                        <li><a href="" class="drop-link">Skirts/Shots</a></li>
                                        <li><a href="" class="drop-link">Accessories</a></li>
                                    </ul>
                                </div>
                            </div> 
                        </div>
                        <input type="text" class="word" placeholder="Search for item">
                        <button class="loop"></button>
                </form>
            </div>
            <div class="header-right">
                <img src="image/forma.png" class="cart" alt="forma">
                <div class="button"><a href=""><p>My Account</p></a></div>
            </div>
        </div>
    </div>

CSS

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: 'Lato', sans-serif;
}

.clearfix::after{
    content:"";
    display: table;
    clear: both;
}

.header{
   height: 100px;
    background-color: #FFFFFF;
    border: 1px solid #ececec;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
}

.container{
    max-width: 1140px;
    margin: 0 auto;
}

.header-content{
    width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.header-left{
    display: flex;
    align-items: center;
}

.header-left a{
    display: flex;
    align-items: center;
}

.form{
    display: flex;  
    align-items: center;
    margin-left: 37px;
}

.header-right{
   display: flex;
   align-items: center;
}

.logo-img{
    margin-right: 13px;
}


.logo{
    font-weight: 300;
    font-size: 27px;
    text-decoration: none;
    color: #222222;
}

.pink{
    color: #F16D7F;
    font-weight: 700;
}

.cart{
    margin-right: 26px;
    cursor: pointer;
}

.form-browse{
    width: 88px;
    height: 39px;
    background-color: #CDCDCC;
    text-align: center;
    border: 1px solid #CDCDCC;
    position: relative;
    cursor: pointer;
}

.form-browse:hover .drop{
    display: flex;
}

.form-browse p{
    line-height: 36px;
}

.word{
    width: 280px;
    height: 37px;
    border: 1px solid #CDCDCC;
    padding-left: 15px;
}

.loop{
    width: 39px;
    height: 39px;
    background: transparent url(image/loop.png) no-repeat center center;
    border: 1px solid #CDCDCC;
    cursor: pointer;
}

.button{
    width: 131px;
    height: 39px;
    background-color: #F16D7F;
    text-align: center;
    text-decoration: none;
}

.button a{
    text-decoration: none;
}

.header-right p{
    line-height: 36px;
    font-weight: 400;
    color: #FFFFFF;
    font-size: 15px;
}

Это у первого блока с вылезающей кнопкой MyAccount.