Skip to content

Instantly share code, notes, and snippets.

@kianurivzzz

kianurivzzz/README.md

Last active August 29, 2024 09:43
Show Gist options
  • Save kianurivzzz/ab8e41516722dd8b5774f042e2e2a5b5 to your computer and use it in GitHub Desktop.
Save kianurivzzz/ab8e41516722dd8b5774f042e2e2a5b5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Задание по вёрстке #1

Календари — это очень распространённый элемент веб-страниц. Они могут быть реализованы самыми разными способами.

В этом задании нужно будет создать календарь, используя все доступные инструменты и средства.

Часть стилей и HTML-разметка уже готовы, осталось дописать стили.

Стили для body:

Цвет текста: белый / #fff;

Размер шрифта: 16 пикселей;

Межстрочный интервал: одинарный;

Цвет фона: светло-серый – #e5e5e5.

Стили для контейнера .calendar

Ширина: 250 пикселей;

Отступы внутри элемента: 60 пикселей сверху, справа и слева, 30 пикселей снизу;

Фон: #1e1f25;

Закругление: 12 пикселей.

Заголовок второго уровня .calendar-header:

Отступ снизу: 30 пикселей, остальные отступы: 0 пикселей;

Жирное начертание;

Размер шрифта: 16 пикселей;

Выравнивание текста по центру.

Календарь / таблица:

Ширина: 100%;

Внешний отступ снизу: 30 пикселей;

Внутренний отступ снизу: 20 пикселей;

Размер шрифта: 14 пикселей с межстрочным интервалом 2;

Граница снизу: 1 пиксель, цвет #313131.

Ячейки с числами:

Цвет чисел: #ccc, по центру;

Внутренний отступ: 0;

Межстрочный интервал: 2.3.

Список дел / Todo:

Отступы сверху и снизу у названия должны быть равны 5px и 20px соответственно;

Размер шрифта названия дела — 14px;

Цвет времени — #ccc;

Размер шрифта времени — 10px;

Убери внешние и внутренние отступы у списка.

Raw
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Календарь и задачи</title>
</head>
<body>
<section class="calendar">
<h2 class="calendar-header">Июль 2024</h2>
<table class="calendar-date">
<thead>
<tr>
<th>Пн</th>
<th>Вт</th>
<th>Ср</th>
<th>Чт</th>
<th>Пт</th>
<th>Сб</th>
<th>Вс</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td class="rounded-green">15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
</tr>
</tbody>
</table>
<ul class="todo-calendar">
<li>
<small class="todo-time">8:15</small>
<p class="todo-name">Погладить кота</p>
</li>
<li>
<small class="todo-time">10:00</small>
<p class="todo-name">Сходить на урок</p>
</li>
<li>
<small class="todo-time">17:30</small>
<p class="todo-name">Сделать самый крутой проект</p>
</li>
</ul>
</section>
</body>
</html>
Raw
style.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
/* Ниже нужно написать код */
/* Выше нужно написать код */
}
/* Ниже нужно написать код */
/* Выше нужно написать код */
.rounded-green {
color: #fff;
background-color: #589c5f;
border-radius: 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment