Создайте страницу «Мой личный блог», которая будет содержать сведения о вас, как об авторе блога. Добавьте в нее фото, данные о себе и блоге. программа codepen

Конечно! Ниже я предоставлю пошаговое решение для создания страницы «Мой личный блог» с использованием HTML и CSS, которое можно реализовать на CodePen. В этом примере я создам простую, красивую страницу с фотографией, информацией о себе и разделе о блоге.

Шаг 1. Структура HTML

Создайте базовую структуру страницы:

<!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="styles.css" />
</head>
<body>
    <div class="container">
        <header>
            <h1>Мой личный блог</h1>
        </header>
        <section class="about-me">
            <img src="https://via.placeholder.com/150" alt="Мои фото" class="profile-photo" />
            <h2>Об авторе</h2>
            <p>Меня зовут Иван Иванов, я люблю писать о своих увлечениях, путешествиях и жизни. Этот блог — место для моих идей и мыслей.</p>
        </section>
        <section class="blog-info">
            <h2>О моем блоге</h2>
            <p>Этот блог посвящен моим путешествиям, хобби и размышлениям. Я делюсь своими мыслями и фотографиями со всеми желающими.</p>
        </section>
        <footer>
            <p>Контакт: email@example.com</p>
        </footer>
    </div>
</body>
</html>

Шаг 2. Стиль CSS

Добавьте стили для красивого оформления. Введите их в раздел CSS.

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    max-width: 900px;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

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

h1 {
    color: #2c3e50;
}

.about-me {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.profile-photo {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 2px solid #2980b9;
}

h2 {
    color: #34495e;
    margin-bottom: 10px;
}

section {
    margin-bottom: 20px;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #ecf0f1;
    border-top: 1px solid #bdc3c7;
    font-size: 14px;
}

Итог

Теперь у вас есть простая, стильная страница «Мой личный блог». Вы можете заменить текст, изображение и добавить дополнительные разделы по вашему желанию.

Как реализовать на CodePen:

1. Перейдите на CodePen.
2. Создайте новый проект (New Pen).
3. Вставьте HTML-код в раздел HTML.
4. Вставьте CSS-код в раздел CSS.
5. По желанию добавьте свои изображения, измените текст.

Если нужно, я могу дополнительно помочь с адаптацией или добавлением новых элементов!