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. Всем привет, коллеги. Я - начинающий в этом деле, поэтому сильно не разносите) Если кому не сложно - оцените пожалуйста мою работу, укажите ошибки. Жду Вашу критику. Вот свёрстанный макет - https://cleaning-company-001.000webhostapp.com/
  2. Бесплатный VPN - FineVPN.org  |  Telegram бот c бесплатным VPN - @FineVPNbot
    Без ограничений по скорости, трафику и времени. Совершенно бесплатный и безлимитный.

  3. Всем привет! Меня зовут Павел. Я три года работаю Front-end разработчиком в IT-компании. За время работы посещал много семинаров и конференций, читал публикации западных коллег. На сегодняшний день, у меня есть желание поделится знаниями с начинающими верстальщиками, а может быть, обменяться опытом с профи по цеху. Сам я не претендую на звание супер-специалиста фронтенда, поэтому продолжаю дальше развиваться в данном направлении. Как показал мой опыт общения с начинающими и специалистами "фронта", очень быстрое развитие происходит тогда, когда ты что-либо объясняешь другому человеку. Поэтому я, с одной стороны, хочу помочь начинающим, так как в моей памяти ещё свежи воспоминания о муках самостоятельного освоения необходимых знаний, а с другой – продолжить собственное развитие через обучение и помощь другим (то есть, попробовать себя в качестве учителя по фронтенду). Теперь по существу Я достаточно загружен, однако в течении дня вполне могу выделить 1-2 часа на обучение и консультации для начинающих верстальщиков (может быть, даже совсем нулевых – не стесняйтесь). Кроме того, я могу ответить на отдельные вопросы, подсказать, что именно стоит почитать, куда развиваться и как в дальнейшем трудоустроиться верстальщиком. Главное, чтобы вы действительно хотели освоить профессию и понимали, что дело это не очень лёгкое и достаточно кропотливое, требующее усидчивости и работы над собой. Обращайтесь, всегда рад пообщаться Мои контакты: skype: live:frontendpavel email: frontendpavel@gmail.com
  4. Доброго тебе дня, друг. Данную тему написать меня сподвигло больше кол-во однотипных тем на тему "Ищу наставника", "Нужен учитель" и тому подобное. Одной из причин тому статья "Путь верстальщика" от автора Максима Усачева, в которой он делится своим безценным жизненным опытом. Я постараюсь пролить свет на некоторые важные (в рамках данной темы) моменты из статьи. Макс пришел на форум имея минимум знаний в сфере разработки и имея большое желание учится. Он упоминает про наставника, но большинство читателей, к сожалению, трактуют данную информацию извращенно. Это не путь к руководству, это всего лишь опыт который получил автор статьи. Нужто ты думаешь, что если и у тебя будет наставник, то ты выучишь все в 2, 3, 10 раз быстрее? Или больше? Или качественнее? Более того, наставник может научить тебя плохому. Наставник в разрезе данной статьи -- это специалист, который допустил огромное кол-во ошибок, который "кровью и потом" работал до глубокой ночи ведя жесткую борьбу с браузерами для достижения своей цели. И хотя результат боя не всегда был на стороне разработчика, войну он всегда выигрывает. Зачем тебе наставник? Что бы он говорил тебе где ты ошибся? Или как надо было сверстать тот или иной блок? Или что лучше использовать float или inline-block? И что это тебе даёт? Набор правил и готовых решений как надо делать и как не надо! Но ведь ты знаешь что каждый сайт уникален, и везде есть нюансы. И ты хочешь каждый раз обращаться к учителю что бы тот подсказал тебе как решить задачу?... Разве ты не хочешь научится думать и понимать чем живет вёрстка? Как она устроена, что из себя представляют слои, понимать и визуализировать и процесс разработки? Понимать "физику" работы блоков на страницы, как и почему они влияют на остальные? Предугадывать на будущее как потянется страница/блок в случае наполнении его контентом. Уметь за считанные секунды в голове разложить огромный сайт на слои? Достичь понимания вёрстки как некой сущности, которая является единым целым с тобой. Другими словами -- ты желаешь женится на прекрасной девушке, со своим темпераментом, безграничными возможностями, уникальным подходом. Она способна подстраиваться под тебя так как ты этого хочешь, когда только пожелаешь. Она согласна выполнять твои прихоти, она не переборчива и соглашаеться на любые твои даже самые безумны идеи. И не смотря на это у неё свой уникальный неповторимый характер. Она бывает упёртая и неприступная, но всегда можно найти с ней общий язык. Если ты знаешь как с ней общаться, понимаешь как она думает, чувствуешь её, чувствуешь то что чувствует она, видишь то что видит она. Если ты слышишь и понимаешь её, то невозможно будет представить цели, которую вы вместе не смогли бы достичь. Ты хочешь женится на самой прекрасной девушке, но спать с ней будет твой наставник! Я не говорю что ты не сможешь стать специалистом без него. Большинство разработчиков, которые поддерживают этот форум, не имели никаких учителей. Все чего они добивались -- все делали сами. Для того что бы достичь тех же высот тебе надо повторить успех людей которые это уже сделали! Это не просто, но это реально! Никто за тебя этого не сделает, никому кроме тебя это не надо. Далее по списку: 1. Перед тем как открыть свою тему в поисках Наставника, пройдись по темам которые создали раньше. 2. Ты ищешь классного специалиста, который будет тебе помогать тебе, обучать, давать советы, делится опытом и знаниями. Ты этого хочешь? А ты можешь ответить на вопрос - зачем вообще кому-то это делать? Зачем, для чего, почему кто-то должен согласится тратить на тебя время? Ведь тебе нужен не новичек как ты, а тот, у кого за плечами багаж опыта, ведь так? Так вот чем ты отличаешься от других таких же жаждущих что бы вкладывать в тебя время и делится нажитым опытом? Пойми правильно, дело то не в деньгах, тут важна идея. 3. Теперь по теме. 3.1. Зачем тебе вообще это направление? Что оно тебе даст? Что ты нашел в вёрстке? 3.2. Если ты считаешь что вместо тебя будет гуглить наставник -- ты ошибаешься. Гугл -- лучший твой помошник. Умеешь правильно составить запрос - умеешь решать задачи. Очень часто бывает так, что поиск решения намного приоритетнее, нежели знания. 3.3. Если ты считаешь что наставник будет тебе давать задания -- ты сильно ошибаешься. Тебе надо -- ты ищи макет, а наставник тебе может написать ТЗ, а потом сказать какая ты бестолочь, указав на твои ошибки в результате -- а это бесценно! 3.4. Любой опыт забирает много времени. Ты не станешь специалистом через год-два! Ты уверен что у тебя вообще хватит сил на то что бы потратить ~5 лет своей жизни в интенсиве и "выкарабкатся" на уровень, когда ты сможешь сверстать страницу (предположим сайта новостей с огромным кол-во блоков) в уме за считаные секунды? Ты уверен что ты хочешь потратить часть своей жизни на изучение вёрстки? ps: нет ничего невозможного, было бы желание
  5. Здравствуйте клиент хочет чтобы картинка была сверстанна полностью именно на html css, кто то сталкивался c такой проблемой? возможно есть советы по тому как это сделать правильно. Волна по центру и все остальные вещи должны быть заверстанны в том числе.Интересует как это сделать с минимумом костылей. И остро стоит вопрос чтобы это все дело было адаптивно. На данный момент все что смог сделать https://jsfiddle.net/RomanFF/jL9swq7h/37/ с border нормальный сделать смогу, не понимаю принцип по которому мне все сопоставить так чтобы не полетело все потом, мне хотябы общие принципы объяснить в каком направлении дальше двигаться
  6. Доброго всем суток! Попросили оптимизировать сайт (поменять дизайн, обновить контент, добавить языки интерфейса - сайт на корейском cerokorea.com), помогите, пожалуйста, какие шаги необходимо предпринять. Не являюсь "Сайтостроителем", но есть интерес разобраться самому. В следствии чего, я понимаю для начала необходимо зайти в админку поменять контент итп. Или же проще будет создать новый сайт на конструктарах и связать с доменом - какой конструктор выбрать и как связать с существующим доменом? Буду рад любой ссылке и информации. Спасибо!
  7. Подскажите пожалуйста как сделать такие блоки? Уже все перепробовал не могу понять почему не получается на плюсике сделать такой Bg. Буду очень благодарен вам)
  8. Здравствуйте. Попался мне в одном проекте этот конструктор шапок. Может кто работал с ним и может дать совет? Создаёт он стандартно шапку в три уровня(ряда), хотя любой из рядов можно отключить. С отключением ряда проблем-то нет, но мне понадобилось перед средним рядом и после него добавить пустые div-контейнеры. И вот тут появилась проблема. Код самой структуры этого конструктора я в файлах проекта найти не смог, как будто его там и нет. Все основные атрибуты и свойства созданной шапки хранятся в json формате и экспортируются/импортируются там же, в конструкторе. В json я не очень разбираюсь, но пытался добавить в него ещё одну строку (не уверен, что делал всё правильно), но конструктор как я понял больше трёх строк не принимает и просто пропускает их. Может кто знает как работает данный конструктор и может подсказать: можно ли как-то изменить код созданной шапки и добавить теги, или он работает только через конструктор в консоли?
  9. Добрый день! Столкнулась со странной проблемой, буду признательна, если вы объясните в чем дело. Подключила шрифт Gotham вместо OpenSans на страницу, после чего ссылки c font-weight: 500 перестали работать. Для начертаний bold и 300 все ок. Как вообще начертание шрифта может влиять на работу тега и почему это не происходит с OpenSans ? Шрифт подключаю так: <style> @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Medium.eot'}}"); src: url("{{asset 'Gotham-Medium.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Medium.woff2'}}") format('woff2'), url("{{asset 'Gotham-Medium.woff'}}") format('woff'), url("{{asset 'Gotham-Medium.ttf'}}") format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Bold.eot'}}"); src: url("{{asset 'Gotham-Bold.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Bold.woff2'}}") format('woff2'), url("{{asset 'Gotham-Bold.woff'}}") format('woff'), url("{{asset 'Gotham-Bold.ttf'}}") format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Light.eot'}}"); src: url("{{asset 'Gotham-Light.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Light.woff2'}}") format('woff2'), url("{{asset 'Gotham-Light.woff'}}") format('woff'), url("{{asset 'Gotham-Light.ttf'}}") format('truetype'); font-weight: 300; font-style: normal; } </style> Заранее спасибо!
  10. Ребята тем кому интересна тема веб разработки и основы html заходите на каналhttps://www.youtube.com/playlist?lis...O-kk6CcVLtYXYVтак же информация для новичков будет дополняться.Основы HTML это не предел. в дальнейшем будет уроки по css, js по web фреймворкам. bootstrap и в дальнейшем будет объясняться натяжка вёрстки на wordpress
  11. Привет, друзья и соратники. Наверняка подобные темы создавались не однократно здесь, поэтому заранее очень извиняюсь за плагиат =) Я занимаюсь дизайном сайтов (psd-фотошоп) уже несколько лет, всё устраивает, всё нравится. Очень давно хочу изучить верстку, но всё руки не доходили, то проекты, то еще какие-то дела, то лень =) Товарищ посоветовал начать изучение с видеокурса Петрова (Специалист по-моему называется). Что скажите? Насколько хороший курс? Просто хочется изначально получать грамотную информацию (я страшный перфикционист), чтобы потом не пришлось переучиваться. Посмотрел первые пару серий, вроде понравилось. Планирую после прохождения данных уроков, изучить Самоучитель Html и Css. Я иду правильным путем или возможно есть более информационные уроки? Заранее всем спасибо и хорошего дня.
  12. Всем привет. Слышал советы, что вместо пикселей желательно использовать rem для задания размеров. Решил, в качестве эксперимента, попробовать задать для html определённый размер в пикселях, а дальше везде использовать уже rem. И вроде всё нормально, даже очень удобно. Но под конец решил я уменьшить масштаб страницы и вот тут появились проблемы. Если использовать такой код: html { font-size: 10px; } .box { background: red; width: 100px; height: 400px; } То по итогу всё нормально, сколько масштаб не уменьшай, результат всё те же 400px. Но стоило изменить единицы измерения в высоте: html { font-size: 10px; } .box { background: red; width: 100px; height: 40rem; } И вот тут уже появляется проблема. При уменьшении масштаба страницы до 50% к размеру высоты: в Google Chrome и Yandex браузерах добавляется дополнительные 80px, в Opera итоговая высота элемента увеличивается до 960 px. А вот в Firefox всё нормально и по итогу выходят те же 400px. Подскажите в чём тут проблема? Это особенности rem или браузеров на основе WebKit? И вообще, я понимаю, что многие советуют явно высоту элементов не задавать, но если это необходимо, то какие единицы измерения посоветуете для этого использовать?
  13. Ребята, всем доброго времени суток) Помогите пожалуйста со слайдером! В javascript плохо разбираюсь(( Нашла подходящее мне решение, но никак не могу настроить под себя. Нашла здесь: http://lantana-studio.ru/howto/simpleslider/ У меня содержимое слайдера вылезло из контейнера, фото прикреплю Вот код HTML <div class="slider"> <div class="slider__block d-flex__row"> <div class=""> <img src="img/otziv-img.png" alt="Фото" class="slider__img"> </div> <div class="slider__block_text"> <div class="slider__block_text-row d-flex__widthHeight-center"> <p class="slider__block_fio"> 1Диана Апасова </p> <p class="slider__block_vk"> vk.com/apasova </p> <p class="slider__block_place"> Москва → София </p> </div> <div class="slider__block_text-description"> Lorem ipsum dolor sit amet, consectetur adipisicing 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 </div> </div> </div> <div class="slider__block d-flex__row"> <div class=""> <img src="img/otziv-img.png" alt="Фото" class="slider__img"> </div> <div class="slider__block_text"> <div class="slider__block_text-row d-flex__widthHeight-center"> <p class="slider__block_fio"> 2Диана Апасова </p> <p class="slider__block_vk"> vk.com/apasova </p> <p class="slider__block_place"> Москва → София </p> </div> <div class="slider__block_text-description"> Lorem ipsum dolor sit amet, consectetur adipisicing 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 </div> </div> </div> <div class="slider__block d-flex__row"> <div class=""> <img src="img/otziv-img.png" alt="Фото" class="slider__img"> </div> <div class="slider__block_text"> <div class="slider__block_text-row d-flex__widthHeight-center"> <p class="slider__block_fio"> 3Диана Апасова </p> <p class="slider__block_vk"> vk.com/apasova </p> <p class="slider__block_place"> Москва → София </p> </div> <div class="slider__block_text-description"> Lorem ipsum dolor sit amet, consectetur adipisicing 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 </div> </div> </div> <a class="prev" onclick="minusSlide()">◀</a> <a class="next" onclick="plusSlide()">▶</a> </div> <div class="slider-dots"> <span class="slider-dots_item" onclick="currentSlide(1)"></span> <span class="slider-dots_item" onclick="currentSlide(2)"></span> <span class="slider-dots_item" onclick="currentSlide(3)"></span> </div> CSS .slider { position: relative; } .slider__block { width: 840px; height: 200px; margin: 0px auto; padding: 10px 20px; box-shadow: 0 5px 8px -5px #000; } .slider__img { margin: 20px 20px 0px 0px; } .slider__block_text { margin-top: 15px; } .slider__block_fio { text-transform: uppercase; font-size: 1.067rem; font-family: 'MuseoSansCyrl-900'; margin-right: 33px; margin-left: -64px; } .slider__block_vk { text-transform: uppercase; font-size: 0.8rem; font-family: 'MuseoSansCyrl-900'; margin-right: 140px; color: #23aae2; border-bottom: 2px solid #cce6f6; } .slider__block_place { text-transform: uppercase; font-size: 0.8rem; font-family: 'MuseoSansCyrl-100'; color: #3eb0e4; } .slider__block_text-description { font-size: 0.933rem; font-family: 'MuseoSansCyrl-100Italic'; color: #363636; } /* Кнопки вперед и назад */ .slider .prev, .slider .next { cursor: pointer; position: absolute; top: 0; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: #000; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } .slider .next { right: 0; border-radius: 3px 0 0 3px; } /* При наведении на кнопки добавляем фон кнопок */ .slider .prev:hover, .slider .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Кружочки */ .slider-dots { text-align: center; margin-top: 20px; } .slider-dots_item{ cursor: pointer; height: 12px; width: 12px; margin: 0 2px; background-color: #ddd; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .slider-dots_item:hover { background-color: #aaa; } /* Анимация слайдов */ .slider .slider__block { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } JS /* Индекс слайда по умолчанию */ var slideIndex = 1; showSlides(slideIndex); /* Функция увеличивает индекс на 1, показывает следующй слайд*/ function plusSlide() { showSlides(slideIndex += 1); } /* Функция уменьшяет индекс на 1, показывает предыдущий слайд*/ function minusSlide() { showSlides(slideIndex -= 1); } /* Устанавливает текущий слайд */ function currentSlide(n) { showSlides(slideIndex = n); } /* Основная функция слайдера */ function showSlides(n) { var i; var slides = document.getElementsByClassName("slider__block"); var dots = document.getElementsByClassName("slider-dots_item"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace("active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += "active"; } Прошу не судить строго, я только в начале своего пути)) Буду очень благодарна, за помощь!!
  14. Доброго дня всем матерым верстальщикам. Есть задача сделать табличку графика на сайт. Технологии - понятно, что html и css. Табличка не большая, но с особенностями. А именно, в табличке есть группы объединенных ячеек, при чем не только внутри строк, но и между строками (объединяется несколько строк). Табличку прикрепил. Каркас table tr td без объединения ячеек могу сделать, но нужно объединить. Как правильнее всего сделать такое объединение? Было бы классно, чтобы ответ был сразу с примерами.
  15. Здравствуйте ! Имеется принципиальный вопрос о выравнивании внутри блока шрифтовой иконки . Вопрос трудно объяснить с помощью текста, поэтому прикрепляю видеовопрос для наглядности - (видео чуть более минуты). https://drive.google.com/open?id=1zHWLnroXsaO5TocvUt07Wv6DHauZdBqJ Заранее спасибо за ответ!
  16. Работаю верстальщиком за небольшую плату (100-300руб в зависимости от работы) Связь со мной : VK vk.com/artakagrand Telegram @artakagrand email fefsert@gmail.com Примеры работ: http://teslamodelx.epizy.com http://teslamodelx.epizy.com/infoblog/index.html http://teslamodelx.epizy.com/blog/index.php
  17. Приветствую, оцените пожалуйста вёрстку. Прошу не кидать в меня тапками. Недавно начал заниматься вёрсткой. https://codepen.io/Ranell/pen/VgVxPb
  18. Ребят всем привет! Я только начал изучать верстку по видео урокам на ютубе. У меня есть свой макет который я купил у дизайнера. Решил с него поучиться верстать. Подскажите как правильно сделать шапку сайта. У меня все выравнивания происходят с помощь отрицательных "margin". Судя по урокам, везде делают это с помощью flex и тому подобное. Дизайн очень оказался сложным и там много проблем с фонами. Дайте пару советов и подсказок как продолжать дальше. Заранее спасибо ? Вот: макет: Мой сайт
  19. Ребят, помогите сверстать эту карточку, никак не получается поместить иконку и текст в центр и сделать бирюзовый прямоугольник фоном) Буду очень благодарен. Картинки и итоговый результат прикрепил внизу
  20. Доброе время суток! Я верстальщик,который таки наверстает Вам упущенное. Моё портфолио 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 Оставляю за собой право отказаться от проведения работ до начала сотрудничества в связи с нехваткой времени или любой другой непредвиденной ситуацией. Об этом естественно сообщаю заранее.
  21. Здравствуйте господа. Макеты вёрстки прикрепляю в формате JPG. Исходников PSD нет. Никакой предоплаты, только по факту выполнения. Макеты: https://yadi.sk/d/G9Nq2cpQJr4lOQ Хотелось бы уложиться не дороже 5000 рублей.
  22. В сети есть интенсивы от HTML Academy. В них есть лекции где рассказываются всяческие хитрости, правила, принципы верстки. Например, скрипт надо подключать в конце страницы что б он не блокировал загрузку кода, что теги label и input можно группировать с помощью р и тд. Но эти лекции длятся просто невыносимо долгое количество времени, много разговоров, отвлечения на чат, между полезной информацией, как например вышеописанная, и нет просто времени все это просматривать несколько часов видео в поиске этих вещей. Есть ли такая информация в текстовом виде или в более коротком видеоформате. Пытался гуглить, но ничего не нашел, так как, скорее всего, я не правильно описывал и формулировал запросы. Помогите, пожалуйста. Если можно то ссылкой или как это все правильно называть.
  23. Здравствуйте. Я начинающий верстальщик сайтов, столкнулся с проблемой при вёрстке карточек товара. Код карточки: 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 код, то она остаётся на месте. И как мне сделать так, чтобы когда место справа не осталось, карточка переместилась на следующий ряд. ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО!
  24. Здравствуйте. Я начинающий верстальщик сайтов, столкнулся с проблемой при вёрстке карточек товара. Код карточки: HTML ——————————————————————————- CSS ————————————————— У меня получается карточка. (скриншот прикреплён) Хотелось бы узнать как мне сделать так, чтобы следующая шла с право от неё. Если просто скопировать HTML код, то она остаётся на месте. И как мне сделать так, чтобы когда место справа не осталось, карточка переместилась на следующий ряд. ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО!
×
×
  • 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