Итак, мы построили сайт, узнали как создать ссылки, и добавить фото, а теперь о том, как сделать сайт красивее. Вкратце: HTML — это скелет сайта, а стиль придаёт CSS. Вот пример:
продукты
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="styles.css"><title>Магазин Продуктов</title></head><body><header><h1>Д…
одностатичный сайт на тему машинки
body {font-family: Arial, sans-serif;margin: 0;padding: 0;}header {background-color: #333;color: white;text-align: center;padding: 10px0;}section {margin: 20px;}form {display: grid;gap: 10px;}button {padding: 5px10px;background-color: #333;color: white;border: none;cursor: pointer;}/* Стили для шапки сайта */header {background-color: #333;color: wh…
одностичный сайтик на тему авибилеты
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="styles.css"><title>Продажа авиабилетов</title></head><body><header><h1>Путешествуй по всему миру с нами!</h1><nav>&…
одностатичный сайтик на тему аренда домов
/* Reset default margin and padding for typography */body, h1, h2, h3, p, ul {margin: 0;padding: 0;font-family: Arial, sans-serif;line-height: 1.6;}/* Global container styles */.container {max-width: 1200px;margin: 0auto;padding: 20px;}/* Header styles */header {background-color: #333;color: white;padding: 15px0;text-align: center;}headerh1 {margin…
React Custom Hook: useDarkMode
The "useDarkMode" hook dynamically updates the HTML body class to apply the "dark-mode" styling whenever dark mode is enabled. This approach ensures consistency across all components without the need for manual class manipulation.