Dmitry
167 lines
6.2 KiB
HTML
167 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Демонстрация HTML и CSS</title>
|
||
<link rel="stylesheet" href="css/main.css">
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Навигация -->
|
||
<nav class="navbar">
|
||
<h1 class="logo">MyWebsite</h1>
|
||
<ul class="nav-links">
|
||
<li><a href="#home">Главная</a></li>
|
||
<li><a href="#about">О нас</a></li>
|
||
<li><a href="#features">Возможности</a></li>
|
||
<li><a href="#contact">Контакт</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- Главная секция -->
|
||
<section id="home" class="hero">
|
||
<div class="hero-content">
|
||
<h1>Добро пожаловать!</h1>
|
||
<p>Это демонстрация различных HTML элементов и CSS свойств</p>
|
||
<button class="btn btn-primary">Узнать больше</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- О нас -->
|
||
<section id="about" class="about">
|
||
<h2>О сайте</h2>
|
||
<div class="about-content">
|
||
<div class="about-card">
|
||
<h3>📝 Текст</h3>
|
||
<p>Это обычный параграф демонстрирует стиль текста с использованием CSS свойств как color, font-size и
|
||
line-height.</p>
|
||
</div>
|
||
<div class="about-card">
|
||
<h3>🎨 Дизайн</h3>
|
||
<p>Рассказывает о использовании цветов, отступов, границ и других стилей для создания интересного
|
||
визуального оформления.</p>
|
||
</div>
|
||
<div class="about-card">
|
||
<h3>📦 Макет</h3>
|
||
<p>Демонстрирует Flexbox layout для создания гибкого и адаптивного дизайна страницы на различных
|
||
экранах.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Возможности -->
|
||
<section id="features" class="features">
|
||
<h2>Возможности</h2>
|
||
|
||
<h3>Типы списков</h3>
|
||
<div class="list-container">
|
||
<div class="list-column">
|
||
<h4>Неупорядоченный список:</h4>
|
||
<ul>
|
||
<li>Первый элемент</li>
|
||
<li>Второй элемент</li>
|
||
<li>Третий элемент</li>
|
||
</ul>
|
||
</div>
|
||
<div class="list-column">
|
||
<h4>Упорядоченный список:</h4>
|
||
<ol>
|
||
<li>Шаг первый</li>
|
||
<li>Шаг второй</li>
|
||
<li>Шаг третий</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Таблица -->
|
||
<h3>Таблица данных</h3>
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Имя</th>
|
||
<th>Возраст</th>
|
||
<th>Город</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Иван</td>
|
||
<td>25</td>
|
||
<td>Москва</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Мария</td>
|
||
<td>30</td>
|
||
<td>Санкт-Петербург</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Петр</td>
|
||
<td>28</td>
|
||
<td>Казань</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<!-- Цветовая палитра -->
|
||
<h3>Цветовая палитра</h3>
|
||
<div class="color-palette">
|
||
<div class="color-box primary"></div>
|
||
<div class="color-box secondary"></div>
|
||
<div class="color-box success"></div>
|
||
<div class="color-box warning"></div>
|
||
<div class="color-box danger"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Форма -->
|
||
<section id="contact" class="contact">
|
||
<h2>Контактная форма</h2>
|
||
<form class="form">
|
||
<div class="form-group">
|
||
<label for="name">Имя:</label>
|
||
<input type="text" id="name" name="name" placeholder="Введите ваше имя" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="email">Email:</label>
|
||
<input type="email" id="email" name="email" placeholder="Введите вашу почту" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="message">Сообщение:</label>
|
||
<textarea id="message" name="message" rows="5" placeholder="Напишите ваше сообщение"></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="country">Страна:</label>
|
||
<select id="country" name="country">
|
||
<option>Россия</option>
|
||
<option>Беларусь</option>
|
||
<option>Казахстан</option>
|
||
<option>Украина</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group checkbox">
|
||
<input type="checkbox" id="agree" name="agree">
|
||
<label for="agree">Я согласен с условиями</label>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-success">Отправить</button>
|
||
<button type="reset" class="btn btn-secondary">Очистить</button>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- Подвал -->
|
||
<footer class="footer">
|
||
<p>© 2026 MyWebsite. Все права защищены.</p>
|
||
</footer>
|
||
</body>
|
||
|
||
</html>
|