Поиск по сайту

Результаты поиска по тегам 'html'.

  • Поиск по тегам

    Введите теги через запятую.
  • Поиск по автору

Тип публикаций


Категории и разделы

  • Основной форум
    • Для начинающих
    • Проблемы верстки
    • Обсуждение работ
    • Работа форума
    • Флейм
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Веб-программирование
    • Javascript
    • Серверные технологии
    • СУБД
    • CMS
  • Работа: спрос, предложение, вакансии
    • Коммерческие услуги

Календари

  • IT events in Ukraine
  • IT events in Russia
  • События форума

Блоги

  • CMS (Системы управления контентом)

Группы меток

  • Разработчики
  • Front-end
  • Back-end
  • Обучение
  • Ищу работу
  • Предлагаю работу



Фильтр по количеству...

Найдено 659 результатов

  1. Добрый день. Есть необходимость свертсать слайдер на главной странице: 1) пролистывание на 1 страницу осуществляется по наведению мыши на текущий слайд т.е. 1 наведение 1 слайд; 2) пролистывания с эффектом fade (один тухнет другой появляется) Все остальное время слайдер стоит просто. Попробовал написать использую bootstrap4 carousel, но столкнулся с тем что я не знаю как сделать эффект fade на нем, а если и получалось то текущий слайд резко исчезает, а новый появляется медленно и еще почему то при наведении на последний слайд курсора пролистывание идет через первый слайд (он показывается, но только на короткий промежуток времени) на jsfiddle код работает почему то как часы, но не у меня хотя мой же. Решил использовать swiper так как пользовался ранее, все замечательно работает, но косяк с позиционированием элементов. текст на слайдах заходит за контейнер в котором он находится и просто исчезает (в мобилках в основном). Ссылки на jsfiddle соответственно на карусель, второй на свипер. https://jsfiddle.net/AShukilovich/aqyrj8xz/2/ https://jsfiddle.net/AShukilovich/8kvo4qwm/1/ (почему то не хочет свипер подгружаться, на локалке все корректно)
  2. # здравствуйте. каким образом отображение сайта при загрузке установить в указанный масштаб 90%. Без "вид-масштаб изображения". так чтобы страница хтмл отображалась в заданном ей масштабе. # помогите пожалуйста.
  3. Ошибка на сайте

    Когда открываешь сайт на iphone, размер окошко инстаграм отображается с ошибкой, окошко больше экрана, появляется прокрутка вправо, на остальных устройствах все хорошо, помогите плиз
  4. Ведущее интернет агентство в СПб - Альтера, объявляет вакансию младшего специалиста по контекстной рекламе. Мы ищем молодых специалистов с базовыми знаниями о контекстной рекламе и желании развиваться в сфере интернет маркетинга. Штатный сотрудник с гибким графиком (начало рабочего дня варьируется) Обязанности: Ведение рекламных кампаний в интернет (в системах контекстной рекламы Яндекс.Директ, Google.AdWords и т.д.) под руководством опытного специалиста Подготовка медиа-планов Составление объявлений Размещение РК на площадках, настройка и запуск Мониторинг, анализ, доработка РК клиентов Подготовка отчетности Требования: Коммуникативность (умение слушать коллег и аргументированно продвигать свою точку зрения) Умение работать стабильно, усидчиво, систематично, внимательно. Понимание необходимости выполнять не только интересную работу, но и работу, которую просто необходимо сделать Желание настойчиво и методично достигать поставленных результатов допустимыми методами Готовность к постоянному изучению новых материалов и систем. Поддержание актуальности имеющихся знаний Условия: Заработная плата от 20 000 до 30 000 рублей Работа в стабильной развивающейся компании (на рынке с 2004 года) Возможность стать сертифицированным специалистом Одна из лучших SEO команд в городе по результатам Рейтинга Рунета Возможность профессионального роста Молодой, позитивный, интересный коллектив Для подкрепления - чай, кофе и печеньки Офис в бизнес-центре класса B+ Заработная плата - в зависимости от опыта работы и квалификации Трудоустройство по ТК, 5 дневная рабочая неделя Полный рабочий день (гибкий график)
  5. Добрый день. Написал сайт и встречается такая проблема на устройствах от apple (конкретно Iphone 5). В форму заявки в поля input не вводятся никакие символы. Посоветуйте пожалуйста. Спасибо.
  6. Порекомендуйте пожалуйста статьи или видеоуроки по bootstrap.
  7. Оцените вёрстку

    Всем привет. Недавно я самостоятельно сверстал макет и хотелось бы услышать мнение опытных верстальщиков. Приму и учту любой совет и критику. Ссылка на скачивание файлов: https://drive.google.com/drive/folders/0B4tKSvnDdweseFpjbERpUnVJcHM?usp=sharing <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> </head> <body> <header> <div class="container"> <div class="heading clearfix"> <div class="icon_menu"> <i class="fa fa-align-left " aria-hidden="true"></i> </div> <ul class="menu"> <li> <a href="#">Main</a> </li> <li> <a href="#">Demos</a> </li> <li> <a href="#">Portfolio</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Shortcodes</a> </li> </ul> <div class="search"> <i class="fa fa-search" aria-hidden="true"></i> </div> </div> </div> <hr class="line"> </header> <section> <div class="container"> <div class="content clearfix"> <div class="social_network"> <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i> <i class="fa fa-instagram" aria-hidden="true"></i> <i class="fa fa-pinterest-p" aria-hidden="true"></i> <i class="fa fa-google-plus" aria-hidden="true"></i> <i class="fa fa-tumblr" aria-hidden="true"></i> <i class="fa fa-rss" aria-hidden="true"></i> </div> <div class="tagline"> <hr class="line_titles"> <h5>your tagline will go right here</h5> <hr class="line_titles"> </div> <div class="logo"></div> <div class="photo"></div> <div class="text_content"> <h2>This is a headline just right here</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum <br> <br> <br> <span class="left_quotation">&#8220;</span> <span class="quote"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip mollit anim id est laborum. </span> <span class="right_quotation">&#8221;</span> <br> <br> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> </div> </div> </div> </section> <section> <hr class="line"> <div class="container"> <div class="mail clearfix"> <div class="logo_mail"></div> <div class="to_top"> <i class="fa fa-chevron-up fa-2x" aria-hidden="true"></i> <p>TO TOP</p> </div> <div class="subscription"> <label for="#">Subscribe now to receive our daily updates.. <br> <input type="email" placeholder="Enter your e-mail here..." > <input type="submit" value="SUBSCRIBE"> </label> </div> </div> </div> </section> <section> <div class="container"> <div class="instagram"> <a href="#">MY INSTAGRAM</a> </div> </div> </section> <footer> <div class="container"> <p class="copy">@2015 - Copyright All Right Reserved. Designed and Developed by Whoever.</p> </div> </footer> </body> </html> @import url('https://fonts.googleapis.com/css?family=Droid+Serif:400,400i|Montserrat:400,700|Permanent+Marker|Playfair+Display:400,400i'); *, *::after, *::before { margin:0; padding:0; } .clearfix:after { content:''; display: table; width: 100%; clear: both; } div{ box-sizing: border-box; } section:last-of-type{ background-color: #808080; } section:first-of-type{ background: url(img/bg.png); } .container{ width: 1170px; margin: 0 auto; } .heading{ position: relative; overflow:hidden; height:70px; } .icon_menu{ margin-top: 25px; color: #c4c4c4; float: left; border-right: 1px dotted #c4c4c4; padding-right: 30px; margin-left: 20px; } .icon_menu i{ margin-top: 1px; } .icon_menu:hover{ color: #22bb66; } .menu{ list-style:none; position: relative; top: 38%; left:40%; float:left; } .menu li{ position:relative; left:-39%; float:left; border-right: 1px dotted #c4c4c4; padding:0 30px; } .menu a{ color: #4d4d4d; display:block; text-decoration:none; text-transform:uppercase; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; } li:last-child{ border: none; } .menu a:hover{ color: #22bb66; } .menu a:active{ position: relative; top: 3px; } .search{ float: right; margin-top: 25px; color: #c4c4c4; border-left: 1px dotted #c4c4c4; padding-left: 30px; margin-right: 20px; } .search:hover{ color: #22bb66; } .line{ border: none; background-color:#eaeaea; color: #eaeaea; height: 2px; } .content{ text-align: center; } .social_network{ padding-top: 67px; color: #c7c7c7; } .social_network i{ padding-right: 11px; } .social_network i:hover{ color: #000000; } .tagline h5{ font-size: 12px; font-weight: 400; font-family: 'Permanent Marker' , sans-serif; } .line_titles{ border: none; height: 2px; width: 102px; background-color:#22bb66; color: #22bb66; position: relative; margin-top: 20px; } .line_titles:first-child{ left: 380px; top: 10px; } .line_titles:last-child{ float: right; right: 380px; bottom: 28px; } .logo{ background: url(img/logo.png); width: 333px; height: 112px; position: relative; left: 414px; margin-top: 20px; } .photo{ margin-top: 100px; height: 566px; background: #595959; } .text_content{ background: #ffffff; margin-top: 67px; margin-bottom: 57px; padding: 62px 30px; border: 2px #eaeaea solid; } .text_content h2{ font-family: 'Montserrat', sans-serif; font-size: 30px; color: #262626; } .text_content p{ margin-top: 44px; font-family: 'Droid Serif', serif; font-size: 14px; line-height: 24px; color: #4a4a4a; } .quote { font-size: 18px; font-style: italic; padding: 0 144px; display: block; } .left_quotation{ font-size: 92px; color: #dcdcdc; font-style: italic; padding-right: 82px; float: left; } .right_quotation{ font-size: 92px; color: #dcdcdc; font-style: italic; float: right; position: relative; top: 22px; } .mail{ padding: 54px 0; } .logo_mail{ background: url(img/logo.png); width: 333px; height: 112px; float: left; margin-right: 35px; } .subscription { font-family: 'Montserrat', sans-serif; color: #666666; font-size: 15px; float: right; border-right: 1px dotted #c4c4c4; border-left: 1px dotted #c4c4c4; padding: 5px 80px; margin-right: 67px; margin-top: 5px; } input[type="email"]{ border: 1px solid #eaeaea; background-color: #f8f8f8; width: 347px; height: 42px; font-family: 'Montserrat', sans-serif; font-size: 20px; padding: 17px; margin-top: 15px; box-sizing: border-box; outline: none; } input[type="submit"]{ background-color: #22bb66; width: 103px; height: 42px; border: none; border-radius: 0 5px 5px 0; color: #ffffff; font-family: 'Montserrat', sans-serif; font-size: 12px; text-align: center; box-sizing: border-box; position: relative; bottom: 3px; right: 3px; outline: none; } input[type="email"]:focus{ border: 1px solid #22bb66; } input[type="submit"]:hover{ color: #22bb66; background-color: #ffffff; border: 1px solid #22bb66; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #bdbdbd; font-family: 'Montserrat', sans-serif; font-size: 12px; padding-top: 5px; } ::-moz-placeholder { /* Firefox 19+ */ color: #bdbdbd; font-family: 'Montserrat', sans-serif; font-size: 12px; } :-ms-input-placeholder { /* IE 10+ */ color: #bdbdbd; font-family: 'Montserrat', sans-serif; font-size: 12px; } :-moz-placeholder { /* Firefox 18- */ color: #bdbdbd; font-family: 'Montserrat', sans-serif; font-size: 12px; } .to_top{ border-radius: 50%; background-color: #f1f1f1; width: 109px; height: 109px; float: right; text-align: center; font-family: 'Montserrat', sans-serif; color: #262626; font-size: 13px; font-weight: 700; padding: 30px 0; } .instagram{ text-align: center; height: 341px; padding: 170px 0; } .instagram a{ background-color: #22bb66; width: 167px; padding: 20px 25px; border-radius: 5px; font-family: 'Montserrat', sans-serif; color: #ffffff; font-size: 14px; font-weight: 700; text-decoration: none; } .instagram a:hover{ color: #22bb66; background-color: #ffffff; border: 2px solid #22bb66; } .instagram a:active{ position: relative; top: 3px; } .copy{ font-family: 'Playfair Display'; color: #262626; font-size: 14px; font-style: italic; text-align: center; padding: 22px 0; }
  8. Всем привет! Пытался сверстать данный макет. Я прописал для центрирования div.contanier { width: 1150px; margin: 0 auto } И вместе с этим моя картинка сузилась до 1150px(красной обводки) , как установить ширину картинки на полный экран?
  9. Коллеги, добрый день! В компанию ES-Studio на постоянную работу требуется Frontend-разработчик. Полный рабочий день. Можно удаленно, либо в офис. Территориально: Москва, м.Цветной Бульвар. Интересные проекты. Клиентские и свои. Занимаемся продвижением сайтов, лидогенерацией, контекстной рекламой. Отличная вакансия с перспективой дальнейшего роста. Все зависит от вашего опыта и целей. Обязанности: Адаптивная верстка новых сайтов, обновление верстки на уже существующих сайтов. Требования: Адаптивная вёрстка, responsive, jQuery, Bootstrap, LESS, SASS, Stylus, BEM, HTML5, pixel perfect, svg sprite Адаптивная вёрстка под все браузеры и устройства. Дополнительным плюсом будет: Angular, Node.js, React.JS, Backbone. Заработная плата от 40.000 руб. Ждем ваши отклики на почту [email protected]
  10. Помогите новичку

    Моя проблема такова я хочу сверсать свой первый сайт, я сделал меню, но оно странно отображается, необходимо чтобы все пункты отображались одной строкой <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Новости обо всем</title> <link href="css/style2.css" rel="stylesheet" type="text/css"> </head> <body> <header> <div id"logo"> Имя </div> <div id="menuHead"> О нас </div> <div id"regAuth"> Войти Зарегистрироваться </div> </header> </body> </html> @charset "UTF-8"; * { margin: 0; padding: 0; outline: none; } html { height: 100%; } body { width: 100%; height: 100%; background-color: #fff; color: #333; font-family: "Segoe UI", Arial, sans-serif; font-size: 1em; line-height: 135%; } a, a:hover { color: #d90fff; text-decoration: none; -webkit-transition: all.6s ease; -moz-transition: all.6s ease; -o-transition: all.6s ease; transition: all.6s ease; } a:hover { color: #00ffff; } .clear { clear: both; } /* styles for header*/ header { width: 98%; float: left; padding: 1%; background-color: #fafafa; border-bottom: 2px solid silver; } header #logo { width: 40%; float: left; } header #menuHead { width: 30%; float: left; } header #auth { width: 30%; float: left; }
  11. Подскажите как правильно такое нарисовать? Может быть canvas? Пробовал на нем, но линия какая-то размытая получается и не знаю как в произвольных точках этой кривой рисовать круги Возможно за это отвечает какой-нибудь jquery плагин? Вот скриншот http://www.fotolink.su/v.php?id=03b5a0c45dd734ab866094f13307e8a5
  12. Привет! Подскажите пожалуйста, есть мобильное меню работающее по клику, хочу использовать свойство transition чтобы изменить скорость отображения меню но не получается Демо 1 Демо онлайн там используется jquery для отображения меню $(".mob-menu").click(function(){ $(this).toggleClass("open"); // transform mobile menu icon to X $(".nav-left,.wrapper,.header").toggleClass("openleft"); }); я пробую добавить css эффект transition но не работает, в чем может быть проблема? .nav-left.openleft,.wrapper.openleft,.openleft{ -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition:all 2s; }
  13. На связи Z Wolves Development! Наш постоянный заказчик из Франции любит багеты, береты и классных фронт-эндов! Формат работы: только ремоут, только хардкор Занятость: полная (40-часовая рабочая неделя) Зарплатная вилка: почасовой рейт 8-9$ Описание : ищем человека с 1,5+лет HTML/CSS, опыт с ReactJS, AngularJS (либо другими современными фреймворками) Также знания jQuery, Sass/Less; Grunt/Gulp; Node.js, опыт с VCS (SVN/Git и т.п.) графические редакторы Английский — не ниже Intermediate, с разговорным Контакты для связи: Telegram @abelausavaZ skype:live:a.belousova_2
  14. В компании Кварта открыта вакансия: Верстальщик/Web-дизайнер Компетенции: * Уверенное владение Photoshop, знание HTML, CSS, LESS, jQuery, Bootstrap, навыки кроссбраузерной верстки. * Опыт разработки пользовательских интерфейсов веб-приложений. Очень желательно понимать, что такое GIT, иметь представление об ASP.net. Чем предстоит заниматься: * Отрисовка макетов страниц. * Вверстка HTML-страниц и шаблонов. * Аудит соответствия страниц руководству по корпоративному дизайну. Мы предлагаем: * Офис в пешеходной доступности от м. Китай-город. * ДМС * "Белая" заработная плата * Размер заработной платы обсуждается и зависит от квалификации. Инна Савельева Зам. Начальника Отдела профессионального развития персонала Компания "КВАРТА" +7-926-294-20-10 8 (495) 926-54-23 [email protected] www.quarta.su
  15. Надеюсь, смогу объяснить, чтобы меня поняли: Наткнулся на один сайт (http://sheltertheanimation.com/), на нём есть тег <section>, что используется на сайте. И вот при прокрутке страницы фон этой секции не подвижен, а сами элементы, типо: <h1>, <p> подвижны. У меня просьба и вопрос: Дайте мне ссылку на статью по подобной ситуации, ибо очень заинтересовала, и объясните мне предназначение тега <section>, ведь я мог вместо него использовать тот же самый <div>.
  16. То о чем я говорю представлено на скриншоте. Через padding-top по пикселям делал, как-то неудобно получается. Есть ли еще варианты?
  17. Данный вариант —> var i = parseInt($("#sli").css('margin-left')); Индентичен варианту —> var i = parseInt(document.getElementById('sli').style.marginLeft). Но, по какой-то причине, второй вариант не работает. То есть, я не могу стиль вложить в переменную в JavaScript, а в JQuery такое возможно. И при изменении стиля типо left в javascript, мне нужно указывать что-то вроде 100 + 'px', а такой момент отсутствует в JQuery, сойдут обычные числа. Был бы благодарен, если бы на мои вопросы были ответы, потому что мне не понятна такая работа кода.
  18. В этом коде: https://jsfiddle.net/Lgjy2c8w/ у меня блок запоминает положение другого, и на 100 пикселей уходит дальше, хотя глобальная функция задана tor = 0, и изменяться они уже в своих функциях. Как исправить неправильное смещение?
  19. Всем привет! Я, некоторым образом, нуб в верстке. Сделал пару сайтов, чисто на html и css, пользуясь руководствами, как направляющими. Сайты работают вполне приемлемо, однако, я столкнулся с одним неудобством: каждый раз, для загрузки изображения, мне требуется залезать в панель управления Джумла и, либо создавать там новую категорию и макеты, либо менять изображения и текст в тех, что уже существуют. Это не очень удобно, тем более, что я, каждый раз, успеваю забыть, какой порядок действий мне нужно совершить. В связи с этим, возник вопрос: можно ли как-то сделать так, чтобы загрузка изображений происходила, как, к примеру, вКонтакте, когда можно создать альбом - и закинуть в него фотографии, быстро и без лишних телодвижений? Заранее спасибо за ваши комментарии.
  20. Нужна критика

    Приветствую всех. Пожалуйста, дайте критику на эту верстку. Я новичок, и это моя первая попытка что-то сверстать. Большое спасибо. maquette1.rar
  21. Добрый вечер. Вот только закончил верстать свой второй адаптивный дизайн. Первый делал на бустрапе. Здесь же я решил использовать flexbox причем сразу же с сеткой. Вот что получилось: https://alex2033.github.io/ Оцените пожалуйста и покритикуйте, если есть что) P.s. Вот действительно практика - лучший инструмент обучения. Когда только начинал этот макет верстать, о флексах ничего не знал и не понимал как они работают. А щас чувствую себя этаким специалистом:DD
  22. Код CSS не работает

    Написал код точно как в учебнике, но он не работает. В чем причина? Скриншоты прилагаются.
  23. В бустрапе контейнер создает свою стандартную ширину 1140 вроде, я ставлю свою 1024 и у меня слетает nav меню для мобильного разрешения HTML <header> <div class="container"> <div class="row hidden-xs"> <div class=" col-lg-3 header-logo"> <p>Burgers<span>.co</span></p> </div> <div class="col-lg-7 col-lg-offset-2 header-menu"> <ul class="nav nav-pills "> <li class="active"><a href="#">Home</a></li> <li><a href="#">Our Burgers</a></li> <li><a href="#">What Else?</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <nav class="navbar navbar-default hidden-md hidden-sm hidden-lg"> <div class="container-fluid"> <div class="navbar-header"> <div class="col-xs-2 header-logo"> <p>Burgers<span>.co</span></p> </div> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Our Burgers</a></li> <li><a href="#">What Else?</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav> </header> CSS html, body { font-family: 'Rubik', sans-serif; font-family: 'Martel', serif; } .header-logo p { display: block; font-family: 'Martel', serif; font-size: 26px; color: #0e1d2b; text-transform: uppercase; padding: 30px 50px; font-weight: bold; } .header-logo p span{ color: #ffa326; } .header-menu ul { list-style-type: none; } .header-menu a{ display: block; text-decoration: none; color: #3e4a55; } .nav-pills > li > a:hover{ color: #3e4a55; opacity: .8; background: #fff; } .nav-pills > li > a:focus{ color: #3e4a55; background: #fff; } .nav-pills > li.active > a { background: #fff; color: #3e4a55; border-bottom: 4px solid #ffa326; border-radius:0; } .nav-pills > li.active > a:hover { background: #fff; color: #3e4a55; opacity: .8; } .nav-pills > li.active > a:active { background: #fff; color: #3e4a55; } .nav-pills > li.active > a:focus { background: #fff; color: #3e4a55; } .header-menu { margin-top:25px; } .navbar-header .header-logo p{ padding: 0; margin-top: 7px; } .nav > li > a { text-transform: uppercase; }
  24. Добрый день, нужно сделать слайдер в шапке сайта. Причем меняется только выделенная красной зоной область, то есть не вся шапка. Как сделать так, чтобы у слайдера не было фона? Должен быть прозрачным как на скриншоте.
  25. Html <header> <div class="container services"> <div class="row"> <div class="col-md-2 col-xs-2 service"> <a href="#"> <img src="img/Shape 108.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> <div class="col-md-offset-1 col-xs-offset-1 col-md-2 col-xs-2 service"> <a href="#"> <img src="img/Shape 127.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> <div class="col-md-offset-1 col-xs-offset-1 col-md-2 col-xs-2 service "> <a href="#"> <img src="img/Shape 106.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> <div class="col-md-offset-1 col-xs-offset-1 col-md-2 col-xs-2 service"> <a href="#"> <img src="img/Shape 97.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> </div> </div> </header> CSS .service { text-align: center; margin-right: 32px; position: relative; padding:0; } .service:last-child{ margin-right: 0; } .service-item { } .service img { max-width: 100%; display: block; margin: 0 auto; } .service a { display: block; } .service a p { display: block; text-decoration: none; font-size: 16px; font-weight: bold; color: #2a2a2a; }