Создание простого сайта-визитки
Создаем простую сайт-визитку для своих целей!
Статья носит образовательный характер, мы ни к чему не призываем и не обязываем. Информация представлена исключительно в ознакомительных целях.
Введение
Мы будем использовать язык гипертекстовой разметки HTML и язык стилей CSS. В рамках статьи стоит запомнить следующее:
- Содержимое HTML-блоков, которые выглядят как <div></div> пишется МЕЖДУ тегами, например <div>Ваш текст</div>.
- У тегов могут быть классы, например <div class="title"></div>. Классы нужны, чтобы задать стили нужному блоку в CSS. Название класса соответствует содержимому блока.
- Я приложу к статье код всех документов в двух видах: без комментариев и с подробными комментариями, чтобы желающие могли разобраться в нём, т.к. в статье описать всё просто невозможно
Рекомендуемое ПО:
Обычно для написания кода используют IDE или хороший текстовый редактор.
От себя рекомендую VS Code, который я буду использовать, или хотя бы Sublime Text.
Создание файловой структуры проекта
Для удобства создаём папку и заполняем её необходимыми файлами путём создания текстового файла и изменения его расширения на .html или .css.
В папке assets у нас будут находиться все иконки и лого сайта. Где же найти иконки? Пишем в поисковике "telegram logo svg", заходим на разные сайты и ищём подходящую иконку. Повторяем это со всеми соц. сетями, которые будут указаны на вашем сайте.
В папке css будет файл со стилями для сайта с названием style.css.
В итоге имеем такую файловую структуру:
HTML-Разметка
Создаём базовую HTML-разметку, подключаем иконку и файл со стилями в <head>.
Подключаем шрифт. Ближе к концу статьи я расскажу о том, как заменить шрифт на свой.
Создаём секцию <body>, содержащую раздел <main>, который будет содержать в себе основную часть сайта, и блок <div> с классом "content". Классы нужны элементам для присваивания им стилей через CSS.
В блоке с классом "content" создаём для блока, которые будут содержать ваше имя или никнейм и слоган/статус. Присваиваем им классы для более удобного обращения через CSS.
Создаём блок для основной части нашего сайта - ссылок, и присваиваем ему класс.
Далее для удобства я буду называть div'ы по их классу. В блоке content__links создаём блок links__item, в котором будет иконка и ссылка на вашу соц. сеть. Иконку добавляем через <object>, в котором параметр data равен пути к файлу, в моём примере это "assets/icon.svg". Добавляем ссылку в теге <a>. В параметре href указываем саму ссылку. Параметр target="_blank" нужен для того, чтобы при клике на ссылку она открывалась в новой вкладке, а не в текущей.
По аналогии повторяем это с остальными ссылками. Вы можете повторять блок links__item множество раз, главное не менять основную структуру.
Убеждаемся в том, что мы закрыли все теги, и сохраняем файл. Теперь можно переходить в написанию стилей.
CSS стили Не вижу смысла подробно рассказывать про CSS, поэтому затрону лишь моменты, которые вы можете изменить под себя без потери работоспособности сайта.
В 23-26ой строках вы можете изменить фоновый градиент сайта путём добавления или изменения цветов.
"background-size: 200% 200%;" задаёт масштаб фону страницы. Если вы хотите, чтобы градиент точно передавал все цвета от начального до конечного, то ставьте значение "100% 100%".
В 37ой и 38ой строке вы можете изменить шрифт и цвет текста соответственно. Думаю про цвет пояснять ничего не нужно, а вот про замену шрифта стоит рассказать. Для изменения шрифта переходим на сайт https://fonts.google.com/ и ищем шрифт, который вам подходит.
Выбираем нужную толщину и открываем боковую панель справа сверху для экспорта шрифта.
Выбираем <link> для того, чтобы подключить шрифты через HTML.
Копируем содержимое первого блока и вставляем его вместо 11-ой - 13-ой строки в вашем index.html файле.
Затем копируем содержимое второго блока и заменяем им 37-ую строку в style.css файле. В таком случае весь текст на странице будет иметь этот шрифт. Если вы хотите сделать имя/никнейм или слоган/статус отдельным шрифтом, то вставляйте это в класс content__title или content__subtitle (предварительно подключив нужные шрифты через <link>).
Далее расскажу про простую замену некоторых цветов.
В 57-ой строке можно изменить цвет кнопок.
В 69-ой строке можно изменить цвет текста ссылок.
В 87-ой и 88-ой строке можно изменить цвета, на которые будет меняться цвет кнопок и цвет текста ссылок при наведении на них.
Готовый код
Для проверки вашего сайта откройте index.html через браузер.
HTML-код без комментариев: https://pastebin.com/40bYPu6V
HTML-код с подробными комментариями: https://pastebin.com/rkHzU73U
CSS-код без комментариев: https://pastebin.com/ACBr8WA0
CSS-код с подробными комментариями: https://pastebin.com/y3EQKkSV
Иконки можете скачать из этого же проекта в GitHub: https://github.com/ikywatam/card