<header>
  <p><img src="https://cdn.logo.com/hotlink-ok/logo-social.png" alt="Логотип" width="100px"> <h1 class="my_p">Блог</h1></p>
  <nav>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>День первый. Как я забыл покормить кота</h1>

    <p>Кто бы мог подумать, что семантика это так важно, мне срочно нужно было об этом поговорить.</p>

    <p>Взгляд упал на кота. Кот издал настойчивое «Мяу». И я понял — пришло время для первой записи в блог. И покормить кота.</p>
        <button onclick="window.location.href = 'https://w3docs.com';">Click Here</button>

  </article>
  <aside>
    😎Здесь могла быть ваша реклама.
  </aside>
  
  <table align="center">
    <thead>
      <tr>
        <th>Время</th>
        <th>Трек 1</th>
        <th>Трек 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>9:00 AM</td>
        <td>Сессия 1А</td>
        <td>Сессия 1B</td>
      </tr>
      <tr>
        <td>10:00 AM</td>
        <td>Сессия 2А</td>
        <td>Сессия 2B</td>
      </tr>
    </tbody>
  </table>
  
</main>
<footer>
  Подвал сайта <a href="https://mlabs.space/" target="_blank">ссылка</a>
</footer>
body {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 1.8em, rgba(135, 206, 235, .5) 2em)
      4em 0 repeat-y,
    linear-gradient(
      rgba(255,255,255, 0) 1.9em, rgba(0, 0, 0, .15) 2em)
    0 0;
  background-size: 2em 2em;
  background-color: ivory;
  font: 16px/2 'Trebuchet MS', Verdana, sans-serif;
  }

.my_p {
  width: 100%;
  text-align: center;
  margin-top: -80px;
}

main {
  background-color: rgba(255, 0, 0, 0.2); /* Здесь '0.5' задает уровень прозрачности, где 1.0 полностью непрозрачный, а 0.0 полностью прозрачный. */
  width: 100%;
  border-radius: 10px;
/*   padding: 100px 30px; */
  padding-top: 10px;
  padding-left: 50px;
  margin-left: 50px;
  border: 5px dashed blue;
  border-right-style: dotted;
}

img {
  border: 1px solid red;
}

table {
  border-collapse: collapse; /* Это свойство устанавливает стиль границы и объединяет границы, чтобы они не перекрывались. */
}

td, th {
  border: 1px solid black; /* Устанавливаем границу для ячеек таблицы. В данном случае, 1 пиксельная черная граница. Вы можете настроить ее цвет и толщину по своему усмотрению. */
  padding: 8px; /* Добавляем немного внутреннего отступа для ячеек, чтобы текст не прилипал к границам. */
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.