В преддверии праздника предлагаем создать новогодний сайт с помощью HTML и CSS. Сайт будет простым.
Результат
Сайт содержит три ёлки и надпись «Happy New Year».
HTML-код
HTML-код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Новогодний сайт</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="tree"></div>
<div class="tree"></div>
<div class="tree"></div>
<p>Happy New Year</p>
</div>
</body>
</html>Подключаются стили из папки css. Контент — контейнер с тремя блоками (ёлками) и надписью.
CSS-код: стилизация ёлок
Основная стилизация в CSS. Сначала удаляются стандартные отступы, затем устанавливается светло-желтовато-оранжевый фоновый цвет документа.
body {
margin: 0; /* Удаление отступов */
background-color: #f5f0e1; /* Фоновый цвет */
}
.container {
width: 40%;
margin: 20% auto; /* Центрирование контейнера */
padding: 30px; /* Отступы внутри контейнера */
position: relative;
left: 0;
float: left;
}
.tree {
width: 0;
height: 0;
border-bottom: 105px solid green; /* Нижняя граница - зелёная */
border-left: 50px solid transparent; /* Левая и правая границы - прозрачные */
border-right: 50px solid transparent;
position: relative;
left: 0;
margin-bottom: 60px;
background-color: #f5f0e1; /* Фон, как у страницы */
&:after {
content: "";
display: block;
width: 8px;
height: 40px;
background-color: brown; /* Коричневый ствол */
position: absolute;
top: 100px;
left: 46px;
}
}
p {
font-size: 20px;
letter-spacing: -1px;
margin-top: 5%;
}Для каждой ёлки задаётся нулевой размер, форма треугольника создаётся с помощью border. border-left и border-right прозрачны, видна только нижняя граница (border-bottom). Ствол — псевдоэлемент :after.
Урок демонстрирует простой способ создания новогодней странички с помощью CSS. Цель — создание праздничного настроения.