Leaderboard

Точно-точно, не заметил даже как-то. Я думал мол, чем меньше классов, тем лучше, но после приведенного примера понял, что можно было все намного проще сделать. Учту всё вышеприведенное. Спасибо

Можно избавиться от .wrapper. Он у тебя, по сути, ничего не ограничивает. На первом этапе, все что обвязано на .wrapper, можно смело перенести на body. Вообще, строго говоря, прменение на этом участке flexbox, не обязательно. А в режиме flex-direction: row; flex-wrap: wrap; вообще не много странно. Окей, если на флексах, то тогда, для начала, стоит переключиться в режим flex-direction: column;, у тебя ведь корневые секции колонкой идут, вот и выстраивай их по колонке. flex-wrap оставить в состоянии по умолчанию nowrap. Так это будет более складно. В твоем случае это бесполезно, но есть задача, когда нужно прижимать футер к полу, если недостаточно контента при этом футер должен быть способным растягиваться по контенту, то есть нефиксированной высоты. Вот так, например https://jsfiddle.net/alexriz/kdcjo2oo/ Качать макет, честно, лень. В браузере выглядит все прилично, особо вопросов не вызывает. Кроме, пожалуй, этих логотипов брендов, они там фоном сделаны, скорее всего это должны быть отдельные элементы Вцелом все очень неплохо, код чистый, именования понятные, читабельные. Стилистика указания классов понятная. Для основных header и footer, стоит тоже прописать классы и стилизировать по ним, а не по селектору тега. Так как, технически теги header и footer, могут быть не единственными на странице. В ситуации появления на странице какого-то article, например, со своим header и footer, при стилизации у тебя гарантированно возникнет коллизия стилей с твоими основными хедером и футером. Это, так или иначе, повлечет переписывание кода, по этому, стоит избегать подобных ситуаций. Это сэкономит, в итоге, тебе общее время, нервы и избавит от лишней отладки страницы. Еще у тебя в начале css есть такой код: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } На эту тему, на форуме, уже было немеряно споров. Но мое лично имхо - это абсолютно бесполезный кусок кода. Все эти обнуляторы/reset.css/normalize.css и прочий хлам скорее всё сломает, чем реально поможет. Я понимаю, это по началу может показаться непонятным. Понимание этого факта приходит с опытом, сам проходил через это. Но мой тебе совет, избавляйся от подобного, это ни к чему, серьезно. Рано или поздно ты дойдешь к тому, что напишешь для себя очень не большой начальный снипет, который ты будешь только минимально подстраивать под конкретный проект. Вот это будет эффективно. Вот это вот: * { -moz-box-sizing: border-box; box-sizing: border-box; } Во-первых префикс уже давно не нужен. Во-вторых, зачем изменять глобально боксовую модель? Я согласен, в некоторых ситуациях это полезно, поменять для элемента боксовую модель, но это только в некоторых ситуациях. Глобально это делать незачем. Еще по поводу классов. Стоит все же не много больше применять классов, заодно избавляться в css от излишней вложенности селекторов. Например, взять блок .client. У тебя внутри этого блока есть элементы: фото, заголовок, должность и краткое описание. Это можно было оформить вот так: <div class="client"> <img src="img/client-logo.png" alt="" class="client-photo"> <h3 class="client-name">Jonathan Doe</h3> <span class="client-role">Co Founder</span> <p class="client-description">“Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id gravida at eget metus. Etiasem malesuada magn”</p> </div> css .client { width: 340px; height: 300px; display: flex; flex-flow: column wrap; align-items: center; } .client-photo { border: 2px solid #1d1e24; width: 80px; height: 80px; } .client-name { margin-top: 25px; color: white; font-family: Exo; font-size: 22px; font-weight: 500; font-style: normal; } .client-role { color: #ff6d6d; font-size: 16px; font-weight: 500; font-family: Exo; margin-top: 8px; font-style: normal; } .client-description { opacity: 0.66; color: white; font-family: Exo; font-size: 16px; font-weight: 400; font-style: italic; text-align: center; letter-spacing: 0.64px; margin-top: 20px; line-height: 26px; } Тем самым ты отвязываешься от конкретных тегов и лишней вложенности в css. Ты можешь вместо h3, span и p, хоть просто div'ы натыкать и это будет работать. Но есть ситуации, когда стоит стилизировать именно через теги от контекста, в местах где контент добавляется с какого-то wysiwyg, например. Тогда стоит создавать какой-то контейнер в который будет вставляться подобный неуправляемый контент, без классов и прочего (может и с классами, тем не менее). И уже от контекста этого контейнера стилизировать контент. В общем для всего свое место.

Например: http://htmlbook.ru/samhtml http://htmlbook.ru/samcss В интернете информации много

Чтобы ссылка заполнила ширину, ей достаточно display: block назначить.

Если я не ошибаюсь, в flex контейнере верхние и нижние поля (процентные значения) отсчитываются относительно высоты, а не ширины родителя. upd. Да, точно.

Не получается, потому что подпись позиционирована относительно блока .models-item, а не .models-item-wrapper. Можно исправить так .models-item-wrapper { overflow: hidden; position: relative; }

position: relative; ещё добавьте