Загрузка данных

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя визитка</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
    <nav>
        <a href="#about">О нас</a>
        <a href="#photos">Наши фотографии</a>
        <a href="#descriptions">Описание фотографий</a>
    </nav>
</header>

<main>
    <section class="about" id="about">
        <h1>О нас</h1>
        <div class="row">
            <div class="card"><h3>Квадрат 1</h3><p>Текст описания...</p></div>
            <div class="card"><h3>Квадрат 2</h3><p>Текст описания...</p></div>
            <div class="card"><h3>Квадрат 3</h3><p>Текст описания...</p></div>
            <div class="card"><h3>Квадрат 4</h3><p>Текст описания...</p></div>
        </div>
    </section>

    <section class="photos" id="photos">
        <h1>Наши фотографии</h1>
        <div class="row">
            <img src="photo1.jpg" alt="Фото 1">
            <img src="photo2.jpg" alt="Фото 2">
            <img src="photo3.jpg" alt="Фото 3">
            <img src="photo4.jpg" alt="Фото 4">
            <img src="photo5.jpg" alt="Фото 5">
            <img src="photo6.jpg" alt="Фото 6">
        </div>
    </section>

    <section class="descriptions" id="descriptions">
        <h1>Описание фотографий</h1>
        <div class="row">
            <div class="desc"><p>Описание 1</p></div>
            <div class="desc"><p>Описание 2</p></div>
            <div class="desc"><p>Описание 3</p></div>
            <div class="desc"><p>Описание 4</p></div>
            <div class="desc"><p>Описание 5</p></div>
            <div class="desc"><p>Описание 6</p></div>
        </div>
    </section>
</main>

<footer>
    <div><h3>Контакты</h3><p>+7 (999) 123-45-67</p></div>
    <div><h3>Адрес</h3><p>г. Москва, ул. Пушкина, д. 1</p></div>
    <div><h3>Соцсети</h3><a href="#">ВКонтакте</a></div>
</footer>

</body>
</html>

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

header, footer {
    background-color: #333;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

header nav {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
}

header a, footer a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    margin: 10px 20px;
}

section {
    min-height: 100vh;
    padding: 40px 20px;
    text-align: center;
    box-sizing: border-box;
}

h1 {
    font-size: 28px;
}

.about { background-color: red; }
.photos { background-color: blue; }
.descriptions { background-color: pink; }

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.card {
    width: 40%;
    height: 200px;
    background-color: white;
    border: 2px solid #333;
    margin: 10px;
    padding: 15px;
    box-sizing: border-box;
}

.photos img {
    width: 14%;
    height: 200px;
    margin: 5px;
    border-radius: 8px;
}

.desc {
    width: 30%;
    height: 150px;
    background-color: white;
    border: 2px solid #333;
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
}