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

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

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

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

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


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

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

Календари

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

Блоги

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

Группы меток

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



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

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

  1. Решил анимировать иконки, нашел пример в интернете, скопировал в Safari Версия 11.0.2 (13604.4.7.1.3), в мобильных Safari и Chrome все отображается отлично но почему-то иконки неправильно отображаются в Chrome Mac (Версия 63.0.3239.132 (Официальная сборка), (64 бит), Chrmoe Windows и Edge - на переднем плане анимированный градиент, а на заднем иконка пример кода пример того как должна выглядеть анимированная иконка во вложении Screen Capture 2018-01-10 06.49.14.mov
  2. Итак ... Проблема заключается в неопытности в вёрстке . Есть меню , обычное . При нажатии на главное меню кидает на главную , при нажатии на "Фото" кидает на фото . "Фото" состоит из тех же элементов что и "Характеристики" кроме текста , и пары других незначительных вещей . Как сделать переход на "Фото" или "Характеристики" , "Отзывы".Нужно ли создавать по 20 страниц , или можно сделать так чтобы просто менялась часть сайта ? в любом случае если что-то понадобится то пишите , я скину код или скриншот .
  3. Есть готовые PSD файлы. Вопросы можно задать тут или в скайп. skype: viktor_skype_go zakaz.zip
  4. Добрый день! Оцените, пож-ста, верстку. По адаптивности, качеству кода. https://milana999.github.io/startup/index.html
  5. Добрый день! Оцените, пож-ста, верстку. По адаптивности, качеству кода. https://milana999.github.io/shopno-site/index.html
  6. Ребята кто практикует верстку или дизайн адаптивный рисует. Верстаю сайт и мне не дали PSD адаптивной верстки. Подскажите, как бы вы сверстали слайдер и блоки в нем для телефонов? Смотреть на компьютере. http://taxiautopa.temp.swtest.ru/
  7. Добрый день! Помогите теорией. Немного запутался в процессе сравнения макета и готовой страницы: если макет у меня в ширину 1200px, а в высоту, к примеру, 2000, то, опять же, если у меня разрешение 1920х1080, то мне и мою страницу для сравнения нужно загнать в такие габариты, как на макете? Просто, вроде, все размеры строго "по ГоСТу", с макета, а не совпадает...
  8. Здравствуйте, у меня такая проблема. Я хотел сделать скролируемое меню с ссылками на ресурс. Написал команду, и т.д. Выучил только теги html, к CSS (или как там) даже не прикасался. Так как сделать скролируемое меню с ссылками, если это вообще возможно. Объясните пожалуйста.
  9. Всплывающие окна

    Здравствуйте, буду признателен, если сможете помочь решить проблему с сайтом. Проблема заключается в том, что на сайте существует кнопка "Получить консультацию" которая вызывает всплывающее окно с формой. Однако при создании такого же окна при клике на изображение(пока есть только при клике на левое верхнее) окно не появляется, а встраивается в готовый блок сайта. Можете подсказать как решить эту проблему?(По поводу оформления и изображения знаю, меня интересуют только окна) Ссылка на архив с сайтом https://github.com/Mat-CauThon/-
  10. Доброго дня Прошу всех специалистов верстающих под iPad, iPhone оценить вёрстку и сказать что не так. Вводная - делал тестовое задание по вёрстке для одной компании. Задание такое: 1) Необходимо сверстать страничку по предложенному макету 2) Требования: - отображение на устройствах iPad, iPhone от 4 до 6+ - Только HTML + CSS ( без Javascript) - Как бонус — учёт разрешения экрана (2 файла для каждого изображения - для ретины и без) Результаты работы: Исходники: https://github.com/alexey-pod/awem-layout Макеты: https://github.com/alexey-pod/awem-layout/tree/master/mockups Результат работы: http://awem-layout.likeuse.ru/ Для поддержки ретины использовал вот эту штуку: https://github.com/alexey-pod/awem-layout/blob/master/css/retina.less Тестирование: iPad, iPhone устройств к сожалению нет - поэтому тестировал вот здесь: 1) https://www.google.by/webmasters/tools/mobile-friendly/ 2) http://quirktools.com/screenfly/ 3) http://lab.maltewassermann.com/viewport-resizer/ Ответ от компании: Некоторые мои соображения: В папке с шаблонами намешано много макетов с разными названиями, которые имеют незначительные отличия. В частности это панель с кнопками "News Support Letter". Панель располагается: Внизу https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Portrait.png https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Album%232.png https://github.com/alexey-pod/awem-layout/blob/master/mockups/Awem_More_Games_iPhone_v04.psd Вверху https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_Portrait.png https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_Album.png https://github.com/alexey-pod/awem-layout/blob/master/mockups/Awem_More_Games_iPad_v01.psd Есть вариант где нет панели вообще https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Portrait%231.png https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Album%231.png Из-за того что я не понял как именно отличать ситуации в которых панель должна быть вверху, быть внизу, панели не должно быть - был выбран универсальный вариант панель вверху и он был свёрстан. Может быть именно в этом была моя ошибка. Также хочу обратить внимание - компания ничего не сказала про ретину. И я не знаю правильно сделал "ретинизацию" или нет. Может кто-то протестит на реальном девайсе и кинет скрин - буде благодарен. Заранее благодарен всем кто сможет подсказать мои косяки. Если бы мы работали через стол то я мог бы задать эти вопросы своему руководителю и переделать задание столько - сколько потребуется. Сейчас же - я не имею такой возможности поэтому надеюсь на помощь сообщества.
  11. https://uzinouzi.github.io/Revelation/ Учебный PSD макет, что можете сказать по поводу верстки? Буду очень благодарен за конструктивную критику
  12. Изначально айтемы стояли на своих местах, но когда я добавил больше текста, то получилась вот такая картина. На втором скриншоте показано то, как должны стоять айтемы.
  13. Добрый день! Есть меню, приведенное на изображении(часть макета PSD. Весь, к сожалению, не удалось пока заполучить). Возникли трудности с пониманием: как на чистом css, html реализовать его. А именно две трудности: как сделать левую часть меню с датами, с точками и вертикальной полосой ,и как при :focus выделить сразу два блока(как это показано на изображении)? Есть еще третий вопрос: при нажатии на пункт меню в соседнем блоке , где располагается основной контент, автоматически отображается информация касательно выбранного пункта(для более подробного и внятного объяснения-информация о человеке, его карьере за указанный промежуток времени). То есть, это не ссылка-якорь... в соседнем блоке не происходит скачок по тексту, а именно подгружает, что-ли, другой файл... мне так показалось. Этот нюанс реализуется без использования js? Извиняюсь, если невнятно смог истолковать свой третий вопрос.
  14. Всем привет, помогите, пожалуйста, с идеями верстки следующего :
  15. Сейчас я стараюсь верстать без сетки но сомневаюсь в этом сильно. Куда не смотрю везде сайты с сетками устроены (если адаптив присутствует на сайте). И такой вопрос появился: Понадобится в работе верстка без сетки, или я зря время трачу стараясь верстать без сетки, так как говорят что с сеткой адаптивные сайты можно быстро сверстать нежели без сетки. В компаниях делают сайты без сетки, и не стоит ли мне начать верстать уже с сетками ? ps: не совсем понял, можно ли здесь такие вопросы задавать, если нет перенесите пожалуйста тему, и на меня громко не кричите.... =)
  16. Люди, помогите пожалуйста с оптимизацией загрузки сайта. Дали заказ на верстку посадочной страницы , я только учусь верстать и знаю что код мой очень баговый но как говориться на ошибках и учатся я перелапатил весь интернет но толком никакой информации не нашел. Проблема в чем , сайт крупной строительной компании ,и у этих ребят ну очень много работ, все они предоставлены в картинках, их там наверное под тысячу , я все сделал но сайт очень долго теперь открывается и это не удивительно учитывая такое количество картинок , как мне так сделать что бы сайт открывался быстро ? я решил сделать прелоудер но это не выход конечно же . Помогите , вот ссылка на сайт http://makhovitskii.ru/works/n-design
  17. Всем привет! Вопрос по #svg ! Нужно поделить екран на 4 треугольника(как на картинке, ссылка на гугл диск с картинками и сами картинки снизу). В этих треугольниках должна быть картинка и пару строк контента, ну и наведение работать должно. Пробовал крутить блоки, но посмотрев, что адаптивность умирает — решил пойти через свг, но так как не шарю в viewBox и point`ах застрял((. Если у вас есть другие варианты решения, с радостью жду! Заранее спасибо! ССЫЛКА НА ПАПКУ С КАРТИНКОЙ: drive.google.com/...OB17Nn6PExYTluN0lVcm1xOW8 а также ФАЙЛЫ САЙТА: drive.google.com/...OB17Nn6PExTUdFODNXYzRNOTA ——————————————HTML————————————————— <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="svg_1"> <svg version="1.1" width="100%" height="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" > <polygon fill="#9E2929" points="0,100 50,0 100,100"/> </svg> <p class="ffggtt">ывмвыывп<p> <svg class="svgshka_2" version="1.1" width="50%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" > <polygon fill="#492121" points="0,100 50,0 100,100"/> </svg> <svg class="svgshka" version="1.1" width="50%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" > <polygon fill="#492121" points="0,100 50,0 100,100"/> </svg> <svg version="1.1" width="100%" height="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" > <polygon fill="#9E2929" points="0,100 50,0 100,100"/> </svg> </div> </body> </html> —————————————-CSS——————————————— * { height: 100%; margin: 0; padding: 0; } .svg_1 { width: 100%; height: 100%; box-sizing: content-box; } .svg_1 svg:first-child { width: 100%; height: 50%; display: block; transform: rotate(180deg); } .svg_1 polygon:hover { fill: #C53737; } .svg_1 svg { width: 100%; height: 50%; display: block; } .ffggtt { position: absolute; z-index: 9999; left: 50%; }
  18. https://proverka1.000webhostapp.com/ На пк сайт отлично работает, а на сервере не запускает css файлы : wp-content/plugins/fullpage172/fullpage/nav/section/filled-circles.css@ver=2.9.2 ; Перерыл весь интернет и не нашел ответа.Помогите )
  19. Меня зовут Абдулов, я Front-End разработчик. Цену и сроки обсудим после просмотра макета. Вот одна из моих версток - tokmaganbet.github.io/blacksea Могу сверстать/сделать : Landing page Натянуть на WP Сайт-визитки Корпоративные сайты Адаптивные и отзывчивые сайты Навыки: HTML 5 CSS3 Javascript(jQuery) Умею пользоваться : Pixel Perfect Gulp Sass(Scss) Bootstrap GitHub FlexBox Email : tokmaganbeta@gmail.com Skype : abdulov_96
  20. Здравствуйте. Оцените пожалуйста данную верстку. Судить строго! https://alex2033.github.io/ Использовал: сетку с поддержкой флексов (Flexbox Grid) На данный момент пока самый сложный макет, который верстал. Реализованы: - слайдеры - плавные переходы по ссылкам на якори - адаптивное меню Toggle(специально верхнюю часть хедера делал через флоаты, т.к. с флексами Toggle несколько конфликтует) - табы - scroll up - всплывающие окна и прочее
  21. Добрый день. Кто верстает на ноутбуке, подскажите пожалуйста, как обстоит дело с удобством. Возникла необходимость поработать удаленно, но еще ни разу не сталкивался с вёрсткой на ноутбуке. Планирую покупать ноут с самым большим разрешением и самым большим экраном. Как верстаются сайты с разрешением в 1920px и более? Насколько вообще большая разница со стационарным компом с хорошим монитором? Не уверен, что правильно выбрал раздел. Если ошибся, перекиньте тему пожалуйста в нужный раздел.
  22. Оцените сайт

    Помогите пожалуйста) Оцените мой первый сайт) Сойдет ли для новичка ? Я только учусь. Решил сверстать с PSD шаблона. Начал изучать недавно ! Ссылочка на мой сайт (Это мой первый сайт)
  23. Оцените вёрстку

    Всем привет. Недавно я самостоятельно сверстал макет и хотелось бы услышать мнение опытных верстальщиков. Приму и учту любой совет и критику. Ссылка на скачивание файлов: 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; }
  24. Подскажите как правильно такое нарисовать? Может быть canvas? Пробовал на нем, но линия какая-то размытая получается и не знаю как в произвольных точках этой кривой рисовать круги Возможно за это отвечает какой-нибудь jquery плагин? Вот скриншот http://www.fotolink.su/v.php?id=03b5a0c45dd734ab866094f13307e8a5
  25. Добрый день всем! Я с довольно элементарным вопросом, но я в замешательстве. На определенном этапе обучения перешел с ознакомлением Photoshop для нарезки макета. Почти все нюансы и тонкости понял. Но столкнулся с одной элементарщиной, которую не уловил из видеоуроков, а именно - как мне добыть фоновое изображение(к примеру, не повторяющиеся узоры, а фото... пейзаж) из макета, к примеру, из Header? Просто убрать все наложенные поверх слои и сделать экспорт изображения? Как-то этот нюанс я сам не понял до конца, а в видео, которые я смотрел, работа с фоном заключалась в вырезке как раз куска фона для цвета, или с узором.