Даже в выходной день нужно строго соблюдать график, чтобы не расслабляться. Проснулся в 9 утра, помылся, умылся, зарядка. И снова в бой, первые часы дня были уделены чтению и написанию статьи про первое впечатление о книге и мысли, которые появились. Я настолько сильно был погружен в произведение, что забыл о времени, читал и наслаждался выходным.
После я занялся домашними делами и вечером приступил к разработке сайта. Нужно было избавиться от рамок для мобильной версии. Далее от рамок я отказался вовсе. Мной были изучены медиа-запросы CSS. Это оказалось очень просто. Вы задаете размеры максимума или минимума для определённого стиля и когда экран сужается, браузер меняет его на тот который будет указан в @media.
Сам дизайн сайта мне не очень нравился и я решил поискать шаблон. Так как с дизайном у меня всё очень плохо. Найдя простенький пример, который был мне симпатичен, я продолжил изменения. Снова принялся за изменение шапки. Только теперь добавил туда меню, которое было реализовано как таблица <ul class="menu-main">. С вложенными внутрь ссылками <a>. Конечно, снова всё рассыпалось, но это меня уже нисколько не испугало. Выделив заголовку отдельную область(контейнер), я также выделил свой контейнер и меню. В дальнейшем при прокрутке сайта меню будет оставаться в заголовке всегда.
Меню мной было тоже подсмотрено и чтобы его реализовать, нужно было ознакомиться с псевдоэлементами и псевдоклассами CSS. Псевдоэлементы генерируют HTML код с нужными стилями, не изменяя структуру HTML. Псевдоклассы применяют стили при определённом событии, например наведение мыши. Разделители которые представлены в меню являются псевдоэлементами.
Также я научился вставлять иконки, они тоже были реализованы как таблица, в контейнеры <a> которых были вставлены псевдоэлементы. Для этого в CSS файл их нужно подключить. Реализуется подключение через @import url(). После прописываем в свойство псевдоэлемента content юникод нашей иконки f189 (это иконка vk). Существует и другой способ размещения иконок, через тег <i>. Для этого мной был скачан набор шрифтов(иконок) FontAwesome. Его нужно подключить в наш HTML через тег <link> (Пример: <link rel="stylesheet" href="/fonts/font-awesome-4.7.0/css/font-awesome.min.css">). Далее просто прописываем класс нужной иконки нашему тегу <i class="fa fa-vk"></i> (также иконка vk). Готово, иконки созданы. И снова проблема с позиционированием, но это мы проходили)
Выше представлен текущий вид сайта, уже вечер, нужно соблюдать режим. Мне очень нравится как сейчас выглядит шапка сайта. Особенно уголок справа вверху страницы. День был плодотворным, завтра много планов, время на разработку и чтение строго по графику, но как поётся в песне "Москва не сразу строилась".
Спасибо большое тем кто следит за моими продвижениями. Это очень приятно, что Вам интересно то чем я занимаюсь. Если у Вас есть какой-то совет, буду рад его выслушать.
P.S. Новый день, новый кот