/projectCompany

3 макет

Primary LanguageHTML

Отчет по третьему макету

Этот макет дался мне намного легче предыдущих. Наверное потому, что здесь не было как таковых сложных фоновых изображений и контента, выходящего за основной контейнер.

Что не получилось(не успел):

  • Перенести все стили в несколько файлов. Сначала я хотел создать отдельный файл под каждую секцию, и потом слить их в один style.css, но после минут 20 стараний, ничего не получилось, и я бросил это дело, чтобы не сгореть.

  • Бургер-меню, которое открывается при клике. Я даже не пытался его сделать, потому что не хватило времени, а доделывать под конец дня не хочется. К тому же я никогда его не делал. Да и в макете он не прописал (найс отговорки, думаю хватит).

  • Адаптив для маленьких экранов (хотя потенциал у этого сайта для адаптива есть).

    Что получилось

  • Одинаковые имена классов для заголовков секций. Права, я не задал отступы сверху и снизу для этого заголовка. Насчет отступа снизу я не уверен, но отступа сверху можно было избежать, применив его для класса-обертки для большей гибкости.

  • Использовал контейнеры по назначению. На этом макете все было очевидно по поводу контейнеров, они были в каждой секции по середине.

  • Опробовал стабильную конструкцию section> .container.> .section__wrapper. section нужен для заднего фона. .container нужен для выравнивания по центру и ограничения всего контента по ширине .section__wrapper нужен для задания направления контента (чаще всего с помощью flex). Теперь весь контент не разъезжается, если увеличить размер экрана.

  • Сделал отзывчивый размер шрифта с помощью специальной формулы calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth})) mobSize - желаемый размер шрифта для мобилок (320px). maxWidth - ширина самого большого контейнера со шрифтом. addSize - разница между максимальным и минимальным шрифтами.

  • Хоть я и не сделал отзывчивые margin, padding & line-height, но я хотя бы понял, как это сделать. С помощью em|remможно задать величины этих свойств, а размер шрифта автоматически будет меняться по этой формуле. Получится своего рода отзывчивый текст с отступами.

  • Изучил новую анимацию приближения transform: scale(#{coeff}). Она прикольно подходит при наведении на какую-то карточку. Благодаря ей сайт становится еще более интерактивным.

До завтра нужно разузнать, как раскидать стили по файлам и конкретнее обдумать адаптивный шрифт и отступы (я пока не понял, чем лучше пользоваться em | rem).

До завтра!