View in Telegram
zaycevstudy
Шаг 1. Основы HTML HTML — это основа любого сайта. Вот структура нашего лендинга: 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zaycevstudy</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="header-content">
            <h1>Добро пожаловать в zaycevstudy</h1>
            <p>Мы превращаем обучение IT в любимое хобби</p>
            <button>Записаться на курс</button>
        </div>
    </header>
    <section class="about">
        <h2>О нас</h2>
        <p>zaycevstudy — это современная образовательная платформа, где каждый может развивать свои навыки в дизайне, программировании и создании игр.</p>
        <img src="сюда вставляем ссылку на картинку" alt="zaycevstudy">
    </section>
</body>
</html>
Шаг 2. Добавляем стили с CSS Создаём файл style.css (или вкладку CSS в CodePen) и добавляем: 
/* Общие стили */
body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    color: #333;
}

/* Шапка сайта */
header {
    background: linear-gradient(to right, #563a2a, #533728);
    color: white;
    text-align: center;
    padding: 60px 20px;
}

header .header-content {
    max-width: 800px;
    margin: 0 auto;
}

header h1 {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 10px;
}

header p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

header button {
    background-color: #ff6584;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

header button:hover {
    background-color: #ff3366;
}

/* Раздел "О нас" */
.about {
    padding: 40px 20px;
    text-align: center;
    background-color: #ffffff;
}

.about h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.about p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.about img {
    width: 100%;
    max-width: 500px;
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
Почему это важно? - Лёгкий старт. Вы не только учитесь основам, но и сразу видите результат. - Доступность. CodePen работает прямо в браузере, без установки дополнительных программ. - Уверенность. Вы создаёте что-то реальное, что может вдохновить на дальнейшее обучение. А что дальше? Попробуйте добавить больше разделов, заменить цвета или шрифты, или создать форму обратной связи. Если хотите научиться большему, присоединяйтесь к нам! 💻 Кстати! Сейчас в блоге выходит серия обучающих постов — не пропустите следующие выпуски! 😎
codepen.io
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
https://t.center/zaycevstudy/93
48 viewsДаниил Зайцев, 
Love Center - Dating, Friends & Matches, NY, LA, Dubai, Global
Love Center - Dating, Friends & Matches, NY, LA, Dubai, Global
Find friends or serious relationships easily