HTML/Semantic/time.html - master - webtheory/student

HTML/Semantic/time.html
119 строк2 KB
Jenya
Добавлен раздел CSS
10 июн 2026, 15:06
10 июн 2026, 15:061c049a6
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Time</title>

  <style>
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      color-scheme: dark;
      font-size: 24px;
    }

    body {
      min-height: 100vh;
      padding: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Roboto", sans-serif;
      background-color: #18191C;
      color: #000000;
    }

    .person {
      padding: 16px 24px;
      display: flex;
      align-items: center;
      background-color: #FF8630;
    }

    .profile-photo-section {
      flex-shrink: 0;
    }

    .profile-photo {
      width: 50px;
      height: 50px;
      border-radius: 9999px;
    }

    .profile-info {
      margin-left: 25px;
    }

    .profile-name {
      margin-bottom: 8px;
      font-size: 1.2rem;
      font-weight: 500;
    }

    .last-visit {
      display: flex;
      align-items: baseline;
      font-size: 1rem;
      line-height: 1.4;
    }

    .last-visit-datetime {
      text-decoration: underline;
    }

    .last-visit-label {
      margin-left: 5px;
      font-size: 1rem;
    }

    @media (max-width: 768px) {
      body {
        padding: 30px;
      }
    }
  </style>
</head>

<body>

  <article class="person">
    <div class="profile-photo-section">
      <img class="profile-photo" src="images/profile-photo.jpg" alt="">
    </div>
    <div class="profile-info">
      <header class="profile-name">
        Билл Джобс
      </header>
      <div class="last-visit">
        <time class="last-visit-datetime" datetime="2020-03-16T14:25">
          16 марта 2020
        </time>
        <span class="last-visit-label">последний визит</span>
      </div>
    </div>
  </article>

  <!--
Дока вышла в релиз <time datetime="2021-10-12">12 октября 2021</time>

Челябинский метеорит вошёл в земную атмосферу
<time datetime="2013-02-15T09:20+06:00">
  15 февраля 2013 около 09:20
</time>

Самый длинный клип Twenty One Pilots на песню Level of Concern длится
<time datetime="117d 16h 10m 25s">177 дней, 16 часов, 10 минут и 25 секунд</time>

-->

</body>

</html>