Jump to content

Search the Community

Showing results for tags 'вёрстка'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Development
    • HTML Coding
    • JavaScript
    • PHP
    • CMS
    • Database
    • Web Server
    • Web-site Development
    • Internet Marketing, SEO
  • Library
    • Tricks and solutions
    • Books
  • Commercial services
    • Freelance
    • Job
    • Goods and Services
  • Our Forum
    • Flame
    • Contests
    • Feedback and Ideas

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Web site


Telegram


Signal


Viber


Skype


From


Interests

  1. Ребят всем привет! Я только начал изучать верстку по видео урокам на ютубе. У меня есть свой макет который я купил у дизайнера. Решил с него поучиться верстать. Подскажите как правильно сделать шапку сайта. У меня все выравнивания происходят с помощь отрицательных "margin". Судя по урокам, везде делают это с помощью flex и тому подобное. Дизайн очень оказался сложным и там много проблем с фонами. Дайте пару советов и подсказок как продолжать дальше. Заранее спасибо ? Вот: макет: Мой сайт
  2. Ребят, помогите сверстать эту карточку, никак не получается поместить иконку и текст в центр и сделать бирюзовый прямоугольник фоном) Буду очень благодарен. Картинки и итоговый результат прикрепил внизу
  3. Доброе время суток! Я верстальщик,который таки наверстает Вам упущенное. Моё портфолио https://verino.github.io Пишу валидный,ручной,логически-продуманный,читабельный код. Делаю на совесть, которая не даёт мне спать по ночам спокойно. Заинтересована в результате, так как работы планирую размещать в портфолио. Срочные пректы не беру, что бы не страдало качество, не портились нервы и не седели волосы. Ценю взаимную честность и ответственность. Знания и навыки: HTML5,CSS3,SCSS,Gulp,Git,jQuery,Bower,Bootstrap3,Adaptive вручную или на cетке Bootstrap,БЭМ. Внедрение js-плагинов, подключение нестандартных шрифтов, сss3-анимации, прелоадер, сжатие, минификация и.т.д. Cроки: Адекватные. От 3-x дней. Порядок работы: Оценка psd,тз с Вашей стороны будет большим плюсом, список работ, сроки и оплата, если всё устраивает работаем. Работаю по предоплате.Возможна поэтапная сдача. Все свои косяки исправляю бесплатно.Ваши хотелки: небольшие(30%), одним пакетом в конце-бесплатно, все остальные Ваши изменения, ранее не оговариваемые - дополнительная оплата. Время работы: с 10:00-20:00 Расценки:от 35$ (2100р., 950грн.) Статический лендинг-экран - 10$ (300грн., 600р.), т.е 5 экранов-50$ (1500грн., 3000р.). Адаптивный лэндинг-экран- от 20$ (600грн.,1200р.), т.е 5 экранов-(3000грн, 6000р.). Главная страница: статика от 20$ (600грн.,1200р.), от 25$ адаптив от (700грн,1500р.). Внутренняя страница: статика от 5$ (150грн,300р.),адаптив от 10$ (300грн., 600р.). Цены пересчитываются по актуальному курсы, обговариваются. Оплата: WebMoney, Карта ПриватБанка. Контакты: Skype: v.b.171017 Email: v.b.171017@gmail.com VK: https://vk.com/id164016461 Оставляю за собой право отказаться от проведения работ до начала сотрудничества в связи с нехваткой времени или любой другой непредвиденной ситуацией. Об этом естественно сообщаю заранее.
  4. Здравствуйте господа. Макеты вёрстки прикрепляю в формате JPG. Исходников PSD нет. Никакой предоплаты, только по факту выполнения. Макеты: https://yadi.sk/d/G9Nq2cpQJr4lOQ Хотелось бы уложиться не дороже 5000 рублей.
  5. В сети есть интенсивы от HTML Academy. В них есть лекции где рассказываются всяческие хитрости, правила, принципы верстки. Например, скрипт надо подключать в конце страницы что б он не блокировал загрузку кода, что теги label и input можно группировать с помощью р и тд. Но эти лекции длятся просто невыносимо долгое количество времени, много разговоров, отвлечения на чат, между полезной информацией, как например вышеописанная, и нет просто времени все это просматривать несколько часов видео в поиске этих вещей. Есть ли такая информация в текстовом виде или в более коротком видеоформате. Пытался гуглить, но ничего не нашел, так как, скорее всего, я не правильно описывал и формулировал запросы. Помогите, пожалуйста. Если можно то ссылкой или как это все правильно называть.
  6. Здравствуйте. Я начинающий верстальщик сайтов, столкнулся с проблемой при вёрстке карточек товара. Код карточки: HTML <div class="product-wrap"> <div class="product-item"> <img src="source/img/test.png"> <div class="product-buttons"> <a href="#" class="button">Купить</a> </div> </div> <div class="product-title"> <a href="">Test</a> <span class="product-price">₽ 100</span> </div> </div> ——————————————————————————- CSS * {box-sizing: border-box;} .product-wrap { position: absolute; width: 300px; margin: 0 auto; background: white; padding: 0 0 20px; text-align: center; font-size: 14px; font-family: Lora; text-transform: uppercase; } .product-item { position: relative; overflow: hidden; } .product-wrap img { display: block; width: 100%; } .product-buttons { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); opacity: 0; transition: .3s ease-in-out; } .button { text-decoration: none; color: #c0a97a; font-size: 12px; width: 140px; height: 40px; line-height: 40px; position: absolute; top: 50%; left: 50%; border: 2px solid #c0a97a; transform: translate(-50%, -50%) scale(0); transition: .3s ease-in-out; } .button:before { font-family: FontAwesome; margin-right: 10px; } .product-item:hover .product-buttons {opacity: 1;} .product-item:hover .button {transform: translate(-50%, -50%) scale(1);} .button:hover {background: black;} .product-title {color: #5e5e5e;} .product-title a { text-decoration: none; color: #2e2e2e; font-weight: 600; margin: 15px 0 5px; padding-bottom: 7px; display: block; position: relative; transition: .3s ease-in-out; } .product-title a:after{ content: ""; position: absolute; width: 40px; height: 2px; background: #2e2e2e; left: 50%; margin-left: -20px; bottom: 0; transition: .3s ease-in-out; } .product-title a:hover {color: #c0a97a;} .product-title:hover a:after {background: #c0a97a;} .product-price { font-size: 20px; color: #c0a97a; font-weight: 700; } ————————————————— У меня получается карточка. (скриншот прикреплён) Хотелось бы узнать как мне сделать так, чтобы следующая шла с право от неё. Если просто скопировать HTML код, то она остаётся на месте. И как мне сделать так, чтобы когда место справа не осталось, карточка переместилась на следующий ряд. ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО!
  7. Здравствуйте. Я начинающий верстальщик сайтов, столкнулся с проблемой при вёрстке карточек товара. Код карточки: HTML ——————————————————————————- CSS ————————————————— У меня получается карточка. (скриншот прикреплён) Хотелось бы узнать как мне сделать так, чтобы следующая шла с право от неё. Если просто скопировать HTML код, то она остаётся на месте. И как мне сделать так, чтобы когда место справа не осталось, карточка переместилась на следующий ряд. ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО!
  8. Добрый день, сверстал страницу с блоком новостей которые идут под меню колонкой, по одному блоку в ширину контейнера. В хроме все нормально и в файрфокс на моем ноутбуке с разрешением 1366х768 тоже, но с другого компа верстка сьезжает именно в firefox. Немного полазил в браузере и блок становится на место если убрать overflow: hidden, но тогда текст соотвественно вылезает за пределы блока. Скинул весь css на всякий случай. body { margin: 0; padding: 0; background: url(/img/casfon.jpg); } .frame { width: 1200px; background-color: white; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } .box { width: 1100px; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } header { background: url(/img/casino.jpg) no-repeat center; height: 300px; } /* БЛОК НОВОСТЕЙ ГЛАВНОЙ СТРАНИЦЫ*/ .news { margin-left: 100px; margin-bottom: 100px; } .news-block { width: 800px; padding: 10px; margin: 0 0 40px 0; height: 310px; overflow: hidden; text-overflow: clip; font-size: 15px; text-align: justify; line-height: 1.3; } .news-block h2 { font-size: 22px; } .news-block h2 a { text-decoration: none; } .news-image { float: left; width: 300px; height: 280px; padding: 10px; } /* СТИЛИ ЦЕНТРАЛЬНОГО МЕНЮ */ .menu { float: left; border-bottom: solid red 2px; width: 100%; margin-bottom: 50px; } .menu li { list-style-type: none; font-size: 25px; float: left; margin: 0px 0 auto 50px; padding: 20px; } .menu li a { text-decoration: none; } .menu li:hover { background-color: red; } /* СТАТЬЯ КОНТЕНТ ОСНОВНОЙ */ .title { text-align: center; font-size: 25px; } .content { font-size: 18px; text-align: justify; float: left; margin: 30px auto 50px auto; } .content p { overflow: hidden; } .image { width: 330px; height: 300px; margin: 0 auto 20px 20px; clear: both; } .icon { width: 25px; height: 25px; float: left; margin-right: 25px; } /* СТИЛИ ДЛЯ ФОРАМТИРОВАНИЯ ТЕКСТА */ .red { color: red; } /* ПОДВАЛ */ footer { font-size: 13px; text-align: center; padding-top: 40px; display: block; height: 30px; margin-top: -60px; clear: both; border-top: 2px solid red; }
  9. Всем привет! В первый раз сверстанный макет натянул на Wordpress. Хотелось бы услышать ваши комменты о качестве верстки. Вот сам блог на хостинге PROFKATALOG.RU Обязательно пишите все недочеты которые увидите, рад буду замечаниям и советам. Заранее всем спасибо!
  10. Ребята кто практикует верстку или дизайн адаптивный рисует. Верстаю сайт и мне не дали PSD адаптивной верстки. Подскажите, как бы вы сверстали слайдер и блоки в нем для телефонов? Смотреть на компьютере. http://taxiautopa.temp.swtest.ru/
  11. https://ibb.co/fTNKL9 Здравствуйте, подскажите варианты реализации, на данный момент сделано псевдо элементами и при изменении разрешении разъезжается стык, как можно сделать что бы при любом разрешении стык был ровный.Прикрепляю весь сайт. Desktop.zip
  12. Новый крупный проект. Приглашаем в наш не большой, но дружный коллектив. Рассмотрим кандидатов с опытом и навыками - верстка и интеграция (в одном лице). Готовность быстро вникнуть в HostCMS. Требования: - знание HTML и CSS; - кроссбраузерная верстка (все: экраны, ОС, девайсы); - адаптивная, отзывчивая и резиновая верстка; - умение тестировать верстку; - web / mobile; - аккуратность и внимательность к деталям; - способность быстро учиться; - работа в команде Веб-студии; - желания познавать новое, развиваться в области программирования. Условия. Работа: - в офисе (возможно удаленно) в пешей доступности от метро Шелепиха (3 минуты); - по согласованию: почасовая, полный рабочий день; на 1/2 ставки; работа день через день (1х1); - оплата по договоренности (почасовая / таймтрекинг). - офис оснащен кондиционерами‚ бесплатные напитки (кофе‚ чай‚ молоко‚ вода); - отсутствие дресс-кода. Интересные проекты: интернет-магазины, корпоративные порталы, iOS / Android приложения. Стабильная зарплата, возможность карьерного роста. Москва, Международная, Шелепиха, Шмитовский проезд, 34с10. контакты: ash@wmgrus.ru
  13. Здравствуйте! Меня зовут Андрей и я верстальщик адаптивных сайтов на самых оптимальных условиях для наших клиентов.При покупке моих услуг вы получаете высокоуровневый сервис и оптимальное соотношение между качеством и ценой. С удовольствием возьмусь за исправление уже существующего кода. Могу написать на javascript с применением jquery. Контакты В Skype пишите andrushsa123@gmail.com. Надеюсь на дальнейшее сотрудничество!
  14. Здравствуйте! Меня зовут Андрей и я front-end разработчик. Знаю HTML, CSS, JavaScript и Jquery. Я уже сверстал 13 psd макетов и уже имею опыт в этой сфере. Но, для того чтобы сделать еще больший опыт я предоставляю вёрстку бесплатно. Чтобы заказать пишите снизу. Надеюсь на дальнейшее сотрудничество!
  15. Имею в наличие багаж знаний верстки а точнее в Html5 Css3 и Javascript и для успешного дебюта в карьере необходим опыт, поэтому я готов верстать Landing cтраницы за дешево либо же за хороший отзыв на сайте Freelancer. Для связи со мной пишите в телеграмм или же в скайп Telegram - @glacius74 Skype - snowman3533
  16. Объясните пожалуйста, что входит в работу html, css верстальщика. Также интересует вопрос: нужно ли делать формы или popUp окна, а если и делать, то каким функционалом мне их наделять будучи html, css верстальщиком?
  17. Ищу работу. Или заказы. Делаю сайты. Такие как эти: http://kapital-trans.ru/ - разветвленная структура, калькулятор подвоза стройматериалов (или аренды техники). https://www.ynafani.com.ua/ - магазин на 10 тыс. товаров, фасетные фильтры, поиск с подстановкой, вариативное меню (в зависимости от экрана и положения на странице) Верстаю из PSD в Drupal, заимствую дизайны с Templatemonster. Jquery, анимация — по мелочи. Вам не будет от меня толка, если: Вам нужен просто сайт визитка. Для этого есть масса сервисов и программ, которые позволяют сделать простой сайт человеку умеющему набрать текст в Word-е. Вам нужен просто интернет-магазин. Опять же — масса сервисов, предоставляющих готовое решение. Я не могу перебить цену готового продукта. Вам может быть от меня толк, если: Вас не устраивают готовые решения. Нужны не стандартные структура, дизайн, сеонистические требования — это ко мне. Еще, как вариант, вы дизайнер, вам говорят: «ну рисуешь может и сайт нам сделаешь», тоже можем скооперироваться. email: spamer35@gmail.com скайп: webmasterzp
  18. Здравствуйте, вопрос к уважаемым специалистам. Только приступил к изучению html+css. Знаю что можно реализовать такой слайдер на чистом html+css, но мне интересно, как сделать такой слайдер с помощью OWL Carousel 2? В частности, как правильно для данной секции написать html код и как правильно прописать стили для слайдера? По одному ролику на YouTube получилось сделать так, дальше моих знаний уже не хватает. Отмечу, что делаю разметку страницы, до написания стилей еще не доходил. Вот мой код данной разметки, а тут макет. Буду благодарен за помощь, так как застрял именно со слайдером, во всей остальной разметке вроде разобрался.
  19. Всем привет! Расскажите пожалуйста про адаптивную сетку. Просто для меня сетка - это обязательно 12 колонок и т.д. Но а если контент расположен не по сетки или начиная с промежуточных колонок или в каждой секции по разному расположен контент. Откройте мне пожалуйста всю истину адаптивных сеток, а то не понимаю. Или может использовать сетку только тогда, когда она есть в макете?
  20. Долго ломаю голову по поводу одной темы: когда использовать сетку при адаптивной верстке? Смотрел чувака web design master, он говорит, что в каждом прокте должна использоваться сетка. Просто бывают макеты не по сетке и вот не понятно становится после его слов.
  21. Заранее прошу прощения если этот вопрос уже задавался, но, несмотря на обширное кол-во информации по теме, найти ответа на свой вопрос я не смогла. Суть в следующем: Например, у меня есть два отдельных scss файла - header.scss и footer.scss. Стили футера почти полностью совпадают со стилями хедера, за исключением пары свойств. Но если я прописываю в файле footer.scss @extend header - стили хедера не могут использоваться, т.к. это другой файл. Подскажите, как идеологически вернее делать в данной ситуации? Чтобы новый класс/элемент получал стили существующего класса из другого файла + добавлял свои или менял некоторые стили на свои.
  22. Добрый день, форумчане! Необходимо сверстать данную страничку. Нужно, чтобы некоторые колонки были обвернуты рамкой + логотип. Есть мысля делать это все при помощи fieldset+legend. Но, как видно по картинке, блоки должны располагаться непосредственно от рамки и лого, не внутри филдсета. Также еще нужно, чтобы при наведении на блоки применялся hover-эффект (по дефолту на них стоит фильтр размывания, при наведении этот фильтр должен исчезать). Собсна, в чем вопрос: как реализовать подобную рамку и лого, чтобы еще и до колонок смог достучаться ?
  23. Всем привет! Узнал о существовании плагинов js и появился такой вопрос: является ли использование плагинов и других вспомогательных вещей(типо галереи, слайдеры, карусели) на js хорошей практикой или лучше писать всё вручную?
  24. Возник такой вопрос, пока учился верстать, все всегда говорили что высоту блока либо обертки для всей секции лучше не задавать (типо пусть блок отталкивается от контента, и потом уже задать падинги), так как при адаптиве есть шанс что все попадает, но недавно на одной забугорном ролике по бутстрапу увидел что верстальщик внаглую прописывает всем блокам высоту в rem (не важно, обертка ли это для сексии, кнопка, обертка картинки и тд), отталкиваясь от body который прописан в пикселях. Rem как-то более толератнее относится к адаптиву? Или есть какая то фишка?
  25. Господа, требуется ваша помощь! Я просто запутался, голова идет кругом! Суть проблемы такова, я посмотрел уже достаточно много курсов и до сих пор не могу понять как правильно верстать! Вроде неплохо знаю теорию, различные инструменты, пишу на js небольшие приложения, но вот основы верстки никак не могу понять! Саму базу. В принципе, я могу взять любой макет и сверстать по нему сайт, но разве какой-нибудь margin-top: -3px и right: 7px являются правильным подходом? Это ведь говнокод! Но зато я сделаю как на макете. Но ведь так верстать полюбому неправильно! Я не могу понять именно как ПРАВИЛЬНО верстать! Попробую структурировать вопросы: 1. С чего начинается верстка? Допустим с макета psd. Я сажусь рисовать макет, какой размер холста мне выбрать? Где можно посмотреть, найти эти стандарты? Вообще не знаю размеры макетов. 2. В чем задаются все размеры в 2018г? Неужели еще в пикселях? Rem или em? 3. Допустим я нарисовал макет, сверстал его, дальше просто media-queries добавляю и под каждый брейкпоинт изменяю верстку? 4. Какие делать брейкпоинты? Есть ли «золотой набор»? Можно своровать от бутстрапа? 5. Как добиться чтобы сайт смотрелся на всех экранах одинаково? Как быть с разным pixel ratio? 6. Как тестировать вид сайта на разных учтройствах? Достаточно в панели разработчика в хроме? Есть ли какие-нибудь сервисы для этого? 7. Если на каком-то экране смотрится коряво, то создавать новый брейкпоинт под это устройство? 8. Насколько критично добавлять бутстрап к проекту и jquery? В инете столько негатива на этот счет, что сильно увеличивает размер странички и т.п. Есть ли смысл менять бутстрап на что-нибудь легковесное только из-за его размера? 9. По поводу бэма – насколько он популярен, стоит ли его использовать и не избыточно ли добавление класса к каждому элементу? 10. Можно ли использовать в 2018г большую вложенность в css div > ul > li > a? Мне так удобно. 11. Вот на этом пункте мне немного стыдно, но я до сих пор не знаю как правильно оформлять main css, чтобы подключать его к нескольким страницам. Как вообще с этим в обычной практике, для каждой страницы своя стилизация используется или подключаются несколько стилей вкупе с главной? 12. Дайте пример видоса(курса) эталонной верстки?! Язык не важен. Смотрел базовый курс от htmlacademy – крайне не понравился, там нет ответов на мои вопросы. Ребята, буду крайне вам благодарен если поможете расставить все по полочкам!!! Спасибо!
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy