В этом уроке мы добавим блок "О себе" и карточки с проектами. Это поможет сделать страницу более информативной и привлекательной для ваших посетителей.
Этот блок будет располагаться сразу под заголовком и социальными иконками. В нём вы сможете рассказать немного о себе. Это важная часть, так как она даёт посетителям сайта представление о вас и вашей работе.
Откройте файл index.html и добавьте следующий код:
<section class="about">
<h2>О себе</h2>
<p>Меня зовут Александр Иванов, я занимаюсь веб-дизайном и разработкой цифровых продуктов. Люблю создавать удобные интерфейсы, упрощать сложные процессы и обучать людей.</p>
</section>
Что здесь происходит:
<section class="about"> — тег section используется для разделения разных блоков контента на странице. В данном случае, это блок "О себе". Мы добавили класс about, чтобы можно было легко стилизовать этот раздел через CSS.
<h2> — этот тег используется для заголовков второго уровня. Мы добавили заголовок "О себе", который сообщит пользователям, о чём этот раздел.
<p> — параграф текста, где вы коротко рассказываете о себе. Здесь вы можете указать информацию о своих навыках, работе и интересах.
Теперь давайте добавим стили, чтобы блок "О себе" выглядел аккуратно. Для этого откройте файл styles.css и добавьте следующие стили:
/* Стили для блока "О себе" */
.about {
margin-top: 30px;
}
.about h2 {
font-size: 20px;
margin-bottom: 10px;
}
.about p {
font-size: 16px;
color: #555;
line-height: 1.8;
}
Что здесь происходит:
.about — это класс, который мы добавили к блоку section. Мы установили отступ сверху (margin-top), чтобы создать пространство между блоком "О себе" и предыдущими элементами на странице.
.about h2 — здесь мы настраиваем стиль для заголовка второго уровня в блоке "О себе". Мы увеличили размер шрифта до 20 пикселей и добавили отступ снизу (margin-bottom) для разделения заголовка и текста.
.about p — здесь мы стилизуем текст параграфа. Установили размер шрифта в 16 пикселей, изменили цвет текста на тёмно-серый для лучшей читабельности, и увеличили line-height (межстрочный интервал) до 1.8, чтобы текст был более читаемым.
Карточки проектов позволят вашим посетителям быстро увидеть, чем вы занимаетесь и какие проекты вы уже реализовали. Они добавят интерактивности и покажут, что вы уже делали в своей профессиональной деятельности.
Добавьте следующий HTML-код под блоком "О себе" в index.html:
<section class="projects">
<h2>Проекты и ссылки</h2>
<div class="project-links">
<a href="https://coursme.com/" target="_blank" class="project-link">
<div class="project-content">
<span class="project-title">Worknight Studio</span>
<span class="project-description">Студия дизайна и разработки на Webflow</span>
</div>
<div class="arrow">→</div>
</a>
<a href="https://coursme.com/" target="_blank" class="project-link">
<div class="project-content">
<span class="project-title">Курс по системам дизайна Figma</span>
<span class="project-description">Станьте мастером систем дизайна в Figma</span>
</div>
<div class="arrow">→</div>
</a>
<a href="https://coursme.com/" target="_blank" class="project-link">
<div class="project-content">
<span class="project-title">Новостная рассылка</span>
<span class="project-description">Ежемесячный сборник ресурсов и вдохновения</span>
</div>
<div class="arrow">→</div>
</a>
<a href="https://coursme.com/" target="_blank" class="project-link">
<div class="project-content">
<span class="project-title">Консультации</span>
<span class="project-description">1-на-1 видеозвонки по вопросам дизайна и разработки</span>
</div>
<div class="arrow">→</div>
</a>
</div>
</section>
Что здесь происходит:
<section class="projects"> — блок, который содержит список всех ваших проектов.
<div class="project-links"> — контейнер для всех карточек проектов.
<a href="#" class="project-link"> — каждая карточка представлена ссылкой, которая ведёт на страницу вашего проекта. Мы добавили класс project-link для стилизации.
<div class="project-content"> — этот блок содержит название и описание проекта.
<span class="project-title"> — название проекта.
<span class="project-description"> — краткое описание проекта.
<div class="arrow">→</div> — стрелка, которая визуально указывает, что карточка является ссылкой.
Теперь добавим стили для карточек, чтобы они выглядели аккуратно и современно. Откройте файл styles.css и добавьте следующий код:
/* Стили для проектов */
.projects {
margin-top: 30px;
}
.projects h2 {
font-size: 20px;
margin-bottom: 20px;
}
.project-links {
display: flex;
flex-direction: column;
gap: 15px;
}
.project-link {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f7f7f7;
padding: 20px;
border-radius: 10px;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.project-link:hover {
background-color: #eaeaea;
transform: translateY(-3px);
}
.project-content {
display: flex;
flex-direction: column;
}
.project-title {
font-size: 18px;
font-weight: bold;
color: #333;
}
.project-description {
font-size: 14px;
color: #777;
margin-top: 5px;
}
.arrow {
font-size: 24px;
color: #777;
}
Что здесь происходит:
.projects — создаёт отступ сверху между блоком проектов и блоком "О себе".
.projects h2 — стилизует заголовок "Проекты и ссылки". Установили размер шрифта в 20 пикселей и добавили отступ снизу.
.project-links — задаёт контейнер для всех карточек проектов. Мы используем flexbox для того, чтобы карточки легко располагались друг под другом, а также добавили gap для пространства между карточками.
.project-link — стилизуем карточки проектов. Каждая карточка представлена как ссылка, выровненная по центру с двумя блоками: контент (название и описание проекта) и стрелка. Мы добавили фон, закруглили углы и добавили эффект при наведении.
.project-content — отвечает за размещение названия и описания проекта вертикально друг под другом.
.project-title — стилизует название проекта. Мы сделали его жирным и увеличили размер шрифта.
.project-description — стилизует описание проекта. Сделали его чуть меньше по размеру и серого цвета для лучшей читабельности.
.arrow — стилизует стрелку, которая указывает, что карточка кликабельна. Мы увеличили её размер до 24 пикселей.
Теперь на странице появилось описание о вас, а также карточки с проектами. При наведении на карточки появляется лёгкий эффект, а сами карточки выглядят аккуратно и стильно. Это поможет посетителям лучше понять, чем вы занимаетесь и какие проекты уже реализованы.
В следующем уроке мы займёмся созданием адаптивного дизайна, чтобы наша страница отлично смотрелась на разных устройствах.