Добрый день! Сегодня был выходной и я мог весь день посвятить изучению верстки, к сожалению я немного приболел и в обед, после вкусного обеда жены меня склонило в сон! В общей сложности у меня на верстку сегодня ушло 8 томатов по 30 минут, с перерывами на спортивную пятиминутку, ну или, что то в этом роде.
Итак, что же я сегодня делал?
В первую очередь свертал по уроку блок с преимуществами Норвежских морепродуктов
В этом блоке было сложным только svg элементы которые у меня почему то были белыми, вместо серого цвета.
Далее следует блок с картинками и текстом, который более подробнее рассказывает о преимуществах товара.
Здесь тоже не сложно в принципе было, но все равно я знаю, что сверстать такой лендинг самостоятельно у меня еще нет знаний и опыта. Ничего это лечится практикой!
Далее следует блок с цитатой или типо того!
В этом блоке тоже все довольно просто и знакомо.
Предпоследний блок в лендинге это контакты.
В этом блоке, я сделал немного не как у Вадима, потому что на своем мониторе увидел, что наша фоновая картинка уползает очень далеко к левому краю. Между картинкой и текстом остается большое пространство. Это мне не понравилось и повозившись 2 минуты, сделал как надо! В этот момент, я был очень горд за себя!
вот как было:
и вот как стало:
Это недочет заметен на главном мониторе, на втором мониторе при верстке, я сразу это не заметил. Потом уже исправлял, смотря на макет, и пришел к выводу, что у дизайнера делавшего этот макет, тоже монитор с таким соотношением сторон, потому что картинка стала как родная именно на ультрашироком мониторе! вот картинка с макета:
крайние красные линии это ширина контента всего ленднига, как видите картинка выходит за его пределы.
Ну и последний но не по значению блок это подвал сайта - footer.
В этом блоке есть уже два сверстанных элемента в шапке нашего сайта. Это меню навигации и логотип. Их мы просто скопировали. Единственное в меню навигации, цвет текста поменяли с синего на черный, а также поменяли цвет подчеркивания при наведении. Новеньким было вставка svg. Конечно, весной я уже делал подобное, но большинство таких специфических знаний, рассеялись за пол года безделья.
Также, были добавлены несколько строк в действие кнопок при наведении, помимо соц. сетей.
Остановил видео урок на интересной теме про адаптив! Теперь, в свойствах будем прописывать медиа запросы и менять некоторые параметры, в зависимости от ширины экрана устройств. Думаю будет как обычно: очень интересно, но нифига не понятно!) Будем, так сказать, посмотреть!)))