Мини-проект: одностраничный сайт-визитка с формой и ссылками

Подготовка и структура проекта 🛠️

Создайте новую папку для проекта и добавьте три базовых файла: - index.html — главная страница - style.css — стили - script.js — логика (если нужна)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя визитка</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Здесь будет контент -->
</body>
</html>

Разметка основных блоков 🧩

Разделим страницу на логические секции с семантическими тегами HTML5:

<header>
    <h1>Иван Петров</h1>
    <p>Frontend разработчик</p>
</header>

<section class="about">
    <h2>Обо мне</h2>
    <img src="photo.jpg" alt="Мое фото" class="avatar">
    <p>Привет! Я занимаюсь веб-разработкой 3 года...</p>
</section>

<section class="skills">
    <h2>Навыки</h2>
    <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</section>

Добавляем стилизацию 🎨

В файле style.css зададим базовое оформление:

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    color: #333;
}

header {
    text-align: center;
    margin-bottom: 40px;
}

.avatar {
    width: 150px;
    border-radius: 50%;
    margin: 20px auto;
    display: block;
}

.skills ul {
    display: flex;
    gap: 15px;
    list-style: none;
    padding: 0;
}

Создаем форму обратной связи 📝

Добавим интерактивный элемент для связи:

<section class="contact">
    <h2>Свяжитесь со мной</h2>
    <form>
        <label for="name">Ваше имя:</label>
        <input type="text" id="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" required>

        <label for="message">Сообщение:</label>
        <textarea id="message" rows="4" required></textarea>

        <button type="submit">Отправить</button>
    </form>
</section>

Стилизуем форму:

form {
    display: grid;
    gap: 15px;
}

input, textarea {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    background: #2c3e50;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
}

Добавляем социальные ссылки 🔗

В футере разместим ссылки на соцсети:

<footer>
    <div class="social-links">
        <a href="https://github.com" target="_blank">GitHub</a>
        <a href="https://linkedin.com" target="_blank">LinkedIn</a>
        <a href="https://twitter.com" target="_blank">Twitter</a>
    </div>
    <p>© 2023 Моя визитка</p>
</footer>

Стилизация ссылок:

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.social-links a {
    color: #3498db;
    text-decoration: none;
}

.social-links a:hover {
    text-decoration: underline;
}

Адаптивность и финальные штрихи 📱

Добавим медиа-запросы для мобильных устройств:

@media (max-width: 600px) {
    body {
        padding: 10px;
    }

    .skills ul {
        flex-direction: column;
    }

    .social-links {
        flex-direction: column;
        align-items: center;
    }
}

Дополнительно можно добавить: - Плавные переходы (transition) - Эффекты при наведении (hover) - Простую анимацию (@keyframes)