Привет, всем будущим фронтенд разработчикам! В этой статье мы разберем как удобно верстать различные карточки. Любая карточка состоит из изображения и контента: Красным выделена верхушка карточки (изображение), а оранжевым контент. Исходя из этого мы можем создать два контейнера: Зачем нам создавать отдельный див для изображения, почему не вставить ее фоном в .card? - Если вставлять ее фоном в .card, мы должны будем вручную высчитывать отступы контента от изображения и решать остальные мелкие проблемы по ходу адаптива наших карточек, а зачем, если можно сделать намного проще...

Эта статья разделена на две части,  первая – про реализацию визуальную на сайте, т.е. сама поисковая строка, какие блоки необходимы и вариант ее стилизации. Вторая – как организовать непосредственно поиск по товарам из своего каталога. 1. Строка поиска для сайта HTML и CSS Для начала нам необходим div-блок для всего содержимого: <div class="header-search-block"> Далее создадим форму с необходимыми данными: <form id="search_form" action="/search" method="get"> Теперь непосредственно сама строка...