Search the Community
Showing results for tags 'html'.
-
Сколько не пытался все это сделать, ничего не получалось Добавление кнопки меню на сайт с dark mode, изменение бекграунда, высоты, размеров текста для удобного чтения. Находил много кодов для этого, но никак не мог разобраться что и куда вставить, так как большинство кодов html,js,css были добавлены веб-конструктором Пытался разобраться, обучаясь на разных сайтах, но так и не смог понять что к чему. Возможно, у кого-то есть статья на эту тему или кто-то сможет обьяснить что и куда Зарание спасибо.
-
Здравствуйте, столкнулся с такой проблемой, что в десктопной версии сайта все работает нормально, однако при переходе на мобильную, блок становится пустым и занимает гораздо меньше места, в чем проблема?
-
Есть несколько страниц, которые нужно перенести в свой блог, а точнее часть кода страницы. Перенести их простым копированием html возможно, но интересует именно перенос с обновлением контента из копируемой страницы. Существует ли простое решение этой задачи, или нужен комплексный подход?
-
Всем приветик, начинающий фрилансер. Ищу первые заказы в данной сфере. Занимаюсь: • На малом уровне версткой; • Хорошо разбираюсь в таких CMS: как Wordpress и Tilta - легко и быстро разработаю одно страничные, многостраничные сайты, интернет-магазины (могу как дорабатывать, так и создания с нуля, так же занимаюсь переносом одного сервера на другой); • Увлекаюсь разработкой логотипов (логотипы с нуля, доработка логотипа, рисование логотипа по эскизу). Готов заниматься работой за любую плату. Так же присутствует портфолио, но за частую людям интересно когда о тебе есть отзывы. Поэтому пришел сюда за практическим опытом, и поиском постоянной работы. Использую: - Верстка: (HTML5/CSS3), верстаю из Figma, Photoshop, illustrator. - Разработка сайта: (CMS WordPress, Tilta). - Разработка логотипа: (Photoshop, illustrator) Если не знаю чего-то необходимого для Вашего проекта\работы -- обязательно разберусь (все-таки начинающий фрилансер).Если вы разработчик и вам некому спихнуть рутинную работу - я с радостью возьму её на себя;телеграмм: HinnWork;почта: balistic.baty@gmail.com Открыт для любых предложений.
-
Указываю в css: .intro { width: 100%; height: 100vh; background: url(/image/intro.jpg) center no-repeat; background-size: cover; } Нажимаю на url картинку показывает, а в html ее нету...
-
Я сделал таблицу(верхнее изображение) из неё мне надо сделать другую таблицу(нижнее изображение). Три часа голову ломаю. Не могу это сделать. Вот имеющийся код: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Таблица</title> </head> <body> <table border="1"> <tr> <th width="100px" rowspan="2"></th> <th width="400px" colspan="2" height="25px"></th> <th width="100px" rowspan="2"></th> </tr> <tr> <td width="200px" height="25px"></td> <td width="200px" height="25px"></td> </tr> <tr> <td width="100px" height="60px" rowspan="2"></td> <td width="200px" height="30px"></td> <td width="200px" height="30px"></td> <td width="100px" height="60px" rowspan="2"></td> </tr> <tr> <td width="100px" height="30px"></td> <td width="100px" height="30px"></td> </tr> <tr> <td width="100px" height="85px" rowspan="2"></td> <td width="100px" height="60px"></td> <td width="100px" height="60px"></td> <td width="100px" height="85px" rowspan="2"></td> </tr> <tr> <td width="400px" height="25px" colspan="2"></td> </tr> </table> </body> </html>
-
Всем привет! Хотела бы представить свою работу новичка на обсуждение для получения конструктивной критики и/или советов, взглядов что можно улучшить или изменить, общее впечатление, конечно, тоже интересует. https://alesia-k.github.io/Tajam-template/ Обратите, пожалуйста, внимание на: - блок "MEET OUR AMAZING TEAM". Немного не нравится как смещаются item при наведении мыши, как будто немного дергаются. Так ли по-вашему это должно работать или такое поведение блока нужно изменить? - инпут "subscribe" в футторе. При клике на инпут, немного смещается и сам инпут, и рядом стоящая кнопка. Было бы классно, если бы подкинули идею как сделать, чтобы такого не было. - и почему-то при клике на <a href="tel:(+62)2122243333">(+62)21-2224 3333</a> не идет процесса соединения. Заранее спасибо! -
Всем привет! Помогите, пожалуйста, найти ошибку в js. Почему-то не срабатывает display: none когда задумано скрыть первую картинку. btn_next.onclick = function () { images[i].style.display = 'none'; } Весь код здесь https://jsfiddle.net/Lx3qagdp/1/ Заранее спасибо!
-
Ребята, без вас никуда! Подскажите, пожалуйста, первый раз адаптирую и стилизую слайдер splide. Сам он работает, но как его стилизовать? В dev tools стилизация тех же стрелок отражается, но когда вношу их в css - не работает. Почему так? Как, например, тогда опустить ниже стрелки? Где устанавливать брейкпоинты и задавать им свойства? На сайте splide такая инфа по адаптиву. https://splidejs.com/guides/options/#breakpoints Вот типа того что-то пробую... https://jsfiddle.net/aqmuyhwd/
-
Моих знаний недостаточно для решение этой проблемы, надеюсь на вашу помощью. Как можно было нагуглить, какие еще недочеты в моём коде ? index.html style.css -
Доброго всем дня! Подскажите, пожалуйста, начинающему верстальщику. Как сделать подобное в строку и что бы крайние изображение растягивались на всю ширину экрана, в зависимости от того, какое разрешение у пользователя. К слову, может есть способы не картинками, а блоками сделать подобное? Скриншот прилагаю.
-
Публикация последних видео с нескольких каналов на сайт
qqruz posted a question in Web-site Development
Мне нужен код для автоматической публикация последних видео с нескольких каналов ютюб, что бы они шли последовательно. Я перерыл весь интернет и нечего не нашел, сам тоже пытался написать, но из-за слабого знания языка и малого количества видео не могу. Надеюсь на чью-то поддержку. -
Здравствуйте дорогие специалисты програмирования. Взываю вас о помощи!? Прощу Вас уделите мне своё безценное время. Я который раз выполняю тестовое задание для трудоустройства, а мне постоянно отказывают. Я уже в замешательстве, что же я делаю не так. Я просил их, дать мне хоть какую-то критику, единственное что мне отвечают СЛАБО. Но что именно слабо не говорят! Прошу Вас рассмотреть мою из последних тестовую работу и укозать мне ВСЕ мои прогрехи, по полной строгости. Единственная надежда на Вашу благосклонность и доброту. Вот ссылка на гитхаб - https:/github.com/ShusevA/ARI-AJAX-Application Требоватие к этой работе https://docs.google.com/document/d/10gLPHDqGNMDSeSQbYfG8RVtXR3XQOrchSBmd50OzJ_s/edit С уважением к Вам, за ранее спасибо.
-
Добрый день ! Есть проблема при адаптаций экрана 595x740 размер контейнера bootstrap col-md не меняется. Мне нужно чтобы при адаптаций экрана 595х740 показывало по 2 слайда.Как это сделать? main.html <!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> <link href="main.css" rel="stylesheet"> <link rel="stylesheet" href="css/font-awesome.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="wrapper"> <header>Номер и почта</header> <main> <nav> <ul class="topmenu"> <li><a href="" class="active">Главная</a> </li> <li><a href="" class="">Вниз<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню второго уровня 0<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="" class="">Вниз тритий уровень<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">Вправо 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 3<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="">Блог<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">Вправо 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 3<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="">О нас</a></li> <li><a href="">Блог</a></li> <li><a href="">О нас</a></li> </ul> </nav> <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active" data-bs-interval="10000"> <img src="image/australia.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h1 style="font-size: 60px;">First slide label йцйцуйу уйуйуйуйуйу фыфыфуу</h1> <p>Some representative placeholder content for the first slide.</p> </div> </div> <div class="carousel-item" data-bs-interval="2000"> <img src="image/parks.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </div> <div class="carousel-item"> <img src="image/skyfoll.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </main> <content class="tab"> <div class="container-prim"> <div class="element-1">Пункт 1</div> <div class="element-2">Пункт 2</div> <div class="element-3">Пункт 3</div> <div class="element-4">Пункт 4</div> </div> <!-- <ul class="zebra"> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 3</li> </ul> --> </content> <content class="zero"> <div class="row slider"> <div class="col-md-2"> <div class="details"> <h2>Заголовок 1</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 2</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 3</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 4</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 5</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 6</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 7</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> </div> </content> <footer>Адреса и контактсы</footer> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="main.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> <script> $('.slider').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 4, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 1, arrows: false } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }); </script> </body> </html> main.css .wrapper { height: 100%; display: flex; flex-direction: column; } header { height: 30px; width:1200px; margin: 0 auto; padding: 1px; } footer { height: 300px; width:1200px; margin: 0 auto; padding:10px; } main { } body { margin: 0; } header { background-color: #daf0b3f6; } main { background-color:#ecf0f1; height: 600px; width: 1200px; margin: 0 auto; } content.tab { background-color:#66c3ee; height: 300px; width:1200px; margin: 0 auto; padding:10px; box-shadow: 0 -5px 5px 0 rgba(50, 50, 50, 0.5); } content.zero { background-color:#b7e9b5; height: 350px; width:1200px; margin: 0 auto; padding:10px; box-shadow: 0 -5px 5px 0 rgba(50, 50, 50, 0.5); } footer { background-color:#000000; color:white; box-shadow: 0 -5px 5px 0 rgba(65, 62, 99, 0.596); } @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic); *{box-sizing: border-box;} body { margin: 0; font-family: 'Open Sans', sans-serif; } nav {background: #2fa4e7 ;} nav ul { margin: 0; padding: 0; list-style: none; } nav ul:after { content: ""; display: table; clear: both; } nav a { text-decoration: none; display: block; transition: .3s linear; } .topmenu > li { float: left; position: relative; border-left: 1px solid black; } .topmenu > li:first-child {border-left: 0;} .topmenu > li > a { padding: 7px 30px; font-size: 14px; text-transform: uppercase; color: #FEFDFD; letter-spacing: 2px; } .topmenu > li > a.active { color: rgb(0, 0, 0); } .submenu a:hover {color: #0037cf;} .topmenu .fa, .submenu .fa { margin-left: 5px; color: inherit; } .submenu { position: absolute; z-index: 5; min-width: 200px; background: white; border-top: 1px solid #CBCBCC; border-left: 1px solid #CBCBCC; border-right: 1px solid #CBCBCC; visibility: hidden; opacity: 0; transform-origin: 0% 0%; transform: rotateX(-90deg); transition: .3s linear; } .submenu li {position: relative;} .submenu li a { color: #282828; padding: 10px 20px; font-size: 13px; border-bottom: 1px solid #CBCBCC; } .submenu .submenu { position: absolute; left: 100%; top: -1px; transition: .3s linear; } nav li:hover > .submenu { transform: rotateX(0deg); visibility: visible; opacity: 1; } .container-prim { font-size: 0; padding: 10px 50px 15px; text-align: center; } .element-1, .element-2, .element-3, .element-4 { display: inline-block; width: 250px; height: 265px; font-size: 20px; font-weight: 500; text-align: center; padding-top: 10px; vertical-align: bottom; box-shadow: 5px -5px 5px 0 rgb(0, 0, 0); border-radius: 8px; } .element-1 { background-color: #fbfdfd; } .element-2 { color: rgb(0, 0, 0); background-color: #fbfdfd; margin-left: 20px; } .element-3 { color: rgb(0, 0, 0); background-color: #fbfdfd; margin-left: 20px; } .element-4 { color: #000000; background-color: #fbfdfd; margin-left: 20px; } .element-relative { position: relative; top: -20px; left: -20px; } /* .zebra { font: 14px Verdana, Geneva, sans-serif; text-align: center; } .zebra li { display : inline-block; width : 250px; height: 280px; margin-bottom: 10px; background: #ffffff; vertical-align: top; text-align: center; line-height: normal; box-shadow: 5px -5px 5px 0 rgb(0, 0, 0); /* эмуляция inline-block для IE6-7*/ /* //display : inline; //zoom : 1; } */ .carousel-caption { transform: translateY(-50%); bottom: initial; top: 50%; } .details { margin: 20px 20px; background-color: #fff; padding: 30px 20px; position: relative; z-index: 1; height: 260px; } .details h2 { font-size: 22px; text-transform: uppercase; transition: 0.6s all; } .details p { font-size: 14px; transition: 0.6s all; } .details a { text-decoration: none; text-transform: capitalize; color: #fff; background-color: #2c3e50; padding: 6px 12px; display: inline-block; font-size: 14px; border: 1px solid #2c3e50; transition: 0.6s all; } .details::before { content: ""; width: 5px; height: 100%; background-color: #ff5722; position: absolute; left: 0; top: 0; z-index: -1; transition: 0.6s all; } .details:hover::before { width: 100%; } .details:hover h2,.details:hover p { color: #fff; } .details:hover a { background-color: transparent; border: 1px solid #fff; }
-
Всем привет) Самостоятельно обучаюсь верстке. Сейчас изучаю Bootstrap и столкнулась с такой проблемой: <header> <nav> <div class="container"> <ul class="menu"> <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li> ... <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li> </ul> </div> </nav> </header> Использую в верстке стандартный контейнер из Bootstrap'а. Его стили не трогаю. Сейчас корплю над адаптивностью сайта и при изменении размера устройства (в консоли разработчика) на 768px шапка вылезает за пределы экрана. Как удалось выяснить header принимает требуемое значение width: 768px, а вот nav упорно занимает 993px и они тянутся от container'а (он согласно стилям Bootstrap'а имеет max-width: 720px, но его margin-left и margin-right почему-то принимают значение 136,50px. Дополнение: тегу nav в стилях задан width: 100%. Вопрос: 1. Правильно ли я понимаю, что cтандартный контейнер из Bootstrap'а должен был в данном примере рассчитаться так: width=max-width=720px, margin-left=margin-right=(768px-720px-12pxpadding-left-12pxpadding-right)/2=12px? 2. Почему margin'ы работают не так как я ожидаю?) Если я что-то неясно или не совсем корректно изложила прошу понять и простить :))) Спасибо за ответы.
-
Всем привет, коллеги. Я - начинающий в этом деле, поэтому сильно не разносите) Если кому не сложно - оцените пожалуйста мою работу, укажите ошибки. Жду Вашу критику. Вот свёрстанный макет - https://cleaning-company-001.000webhostapp.com/
-
Может кто-то оценить уже готовый сайт? Заранее спасибо.
-
Добрый день! Есть небольшой вопрос связанный с импортом данных в html форму. Постановка задачи такова: есть html форма которая в дальнейшем отправляется на печать, в определенные пункты этой форму нужно импортировать данные из внешнего файла (excel например). Каким образом можно производить передачу данных? Как сделать это по тегово? Какие есть бесплатные библиотеки по js для формирования отчетов?
-
Доброго вечера! Подскажите, пожалуйста, в чем проблема неотображения скаченного шрифта? Путь к файлу, если что, проверила. Заранее спасибо! @font-face { font-family:"Lato-Italic"; src: url('./fonts/Lato-Italic.ttf'); } Его использование: .three-columns__item-radius p { text-align: justify; margin: 26px 20px 0 20px; font-family:"Lato-Italic"; }
-
Подскажите, пожалуйста, как можно исправить не работающий клик, в данном случае, по меню-бургеру. Срабатывает вместо этого hover. Заранее спасибо! <nav class="burger-menu mobile-open"> <button class="burger-menu__btn-mobile"> <i class="fas fa-bars"></i> <span>Menu</span> </button> <ul class="burger-menu__list"> <li class="burger-menu__item"> @@include('./partials/menu/_menu.html', { "item": "contacts" }) </li> <li class="burger-menu__item"> @@include('./partials/menu/_menu.html', { "item": "e-shop" }) </li> <li class="burger-menu__item"> @@include('./partials/menu/_menu.html', { "item": "faq" }) </li> <li class="burger-menu__item"> @@include('./partials/menu/_menu.html', { "item": "home" }) </li> </ul> </nav> var menuEl = document.querySelector('.burger-menu'); var btnEl = document.querySelector('.burger-menu__btn-mobile'); function toggleMenu() { menuEl.classList.toggle('open'); } btnEl.onclick = toggleMenu;
-
Подскажите, пожалуйста, что можно прописать, чтобы при уменьшении разрешения экрана колонки справа смещались вниз? Весь код в песочнице https://jsfiddle.net/fzbkeLyt/ Пробовала: Но не сработало. @media (max-width: 1200px) { .container { max-width: 970px; } } @media (max-width: 992px) { .container { max-width: 750px; } } @media (max-width: 767px) { .container { max-width: none; } }
-
Я столкнулся с проблемой, мне нужно сделать враппер но и нужно разместить див в не враппера, как это исправить?
-
Ребят, подскажите, в чем может быть ошибка. На странице два слайдера от splide. Один с классом splide (работающий), другой c классом splid (не работает). Выглядит так, будто не работают стили. Отображается как не маркированный список текста и картинок. Стили добавила единожды: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.21/dist/css/splide.min.css" integrity="sha256-EqzwzekQXKNbB5EE4nNBQT+2gWQIWRZQXAd89YdIq8M=" crossorigin="anonymous"> Который не работает: Заранее спасибо!! <div class="foo_columns"> <div class="splid"> <div class="splid__track"> <ul class="splid__list"> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Знакомства", "downPicturePath": "img/foo1.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Знакомства", "downPicturePath": "img/foo2.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Знакомства", "downPicturePath": "img/foo3.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Приколы", "downPicturePath": "img/foo4.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Авто", "downPicturePath": "img/foo5.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> </ul> </div> </div> <div class="foo__line"></div> <script> new Splid( '.splid', { type : 'loop', perPage: 1, speed: 2000, autoplay: true, interval: '3000', arrows: true, } ).mount(); </script> </div>
-
Подскажите, пожалуйста, как можно увеличить символ мнемоники в css? Font-size не работает. Спасибо! <div class="sign_left"></div> .sign_left::before { content: "\003C"; display: inline-block; color: rgb(192, 34, 34); }
-
Верстка за отзыв\работу в портфолио\символическую плату
Хромихин Дмитрий posted a topic in Freelance
Здравствуйте. Начинающий верстальщик. Ищу первые заказы. Готов верстать что угодно за любую плату (в том числе и бесплатно). Есть 5-7 учебных работ, но этим никого не впечатлить -- очень хочу практического опыта. Использую HTML5/CSS3, JS, JQuery, BEM. Так же разные инструменты, вроде Git, GitHub, SASS/SCSS, Gulp. Если не знаю чего-то необходимого для Вашего проекта\работы -- обязательно разберусь. Если вы разработчик и вам некому спихнуть рутинную работу - я с радостью возьму её на себя; Верстаю из Figma, Photoshop, Illustrator. Могу в адаптивность, отзывчивость, кроссбраузерность, несложную анимацию. телеграмм: туц ; почта: dmitriq.khromikhin@gmail.com Точно на связи с 9:00 до 22:00. Открыт для любых предложений.
