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

<!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>
  <div class="page">
    <header class="header">
      <h1>Сайт-визитка</h1>
      <p class="subtitle">студента</p>
      <p class="college">ГБПОУ РМ "Саранский техникум энергетики и электронной техники имени А. И. Полежаева"</p>
    </header>

    <nav class="nav">
      <ul>
        <li><a href="#about">Обо мне</a></li>
        <li><a href="#study">Учёба</a></li>
        <li><a href="#contacts">Контакты</a></li>
      </ul>
    </nav>

    <main class="main">
      <section class="top-block">
        <h2>Иванова Ивана</h2>
        <div class="line"></div>
      </section>

      <section class="content">
        <p><span>Дата рождения:</span> 02.01.2000 г.</p>
        <p><span>Специальность:</span> 09.02.03 "Программирование в компьютерных системах"</p>
        <p><span>Курс:</span> 2</p>

        <h3 id="about">Краткая информация о себе</h3>
        <div class="info-box">
          <p>
            Я студент и изучаю основы <b>HTML</b> и <i>CSS</i>.
            Мне интересно создавать сайты, оформлять страницы и использовать
            <u>логические</u> и <u>физические</u> теги.
          </p>
        </div>

        <p id="contacts"><span>Мой адрес:</span> г. Саранск, пр. Ленина, д. 10</p>
      </section>
    </main>

    <footer class="footer">
      <p>Рисунок 2 - Пример страницы</p>
    </footer>
  </div>
</body>
</html>


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

body {
  font-family: "Times New Roman", serif;
  background: #f2f2f2;
  color: #222;
  padding: 20px;
}

.page {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #c9c9c9;
  padding: 25px 40px;
}

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

.header h1 {
  font-size: 34px;
  font-weight: bold;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 18px;
  margin-bottom: 6px;
}

.college {
  font-size: 18px;
  line-height: 1.35;
}

.nav {
  margin: 18px 0 28px;
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
  padding: 10px 0;
}

.nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.nav a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}

.nav a:hover {
  text-decoration: underline;
}

.main {
  min-height: 350px;
}

.top-block {
  text-align: center;
  margin-bottom: 28px;
}

.top-block h2 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 14px;
}

.line {
  width: 100%;
  border-top: 1px solid #777;
}

.content p {
  font-size: 18px;
  margin: 12px 0;
}

.content span {
  font-weight: bold;
}

.content h3 {
  text-align: left;
  font-size: 20px;
  margin: 22px 0 12px;
  font-weight: normal;
}

.info-box {
  border: 1px solid #ddd;
  padding: 15px 18px;
  margin: 10px 0 16px;
  background: #fafafa;
}

.footer {
  text-align: center;
  margin-top: 30px;
  padding-top: 12px;
  border-top: 1px solid #777;
  font-size: 16px;
}