diff --git a/index.html b/index.html index 52e7778..13f197a 100644 --- a/index.html +++ b/index.html @@ -6,31 +6,46 @@ Пидис страничка - - -
+ + + + - -

Welcome to my website

+

Страничка для ПиДИС

- - +
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

-

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Как создать простую страницу на HTML

+
    +

  1. Откройте ваш любимый текстовый редактор и создайте новый файл с расширением .html.

    2. +

  2. Напишите в начале документа <!DOCTYPE html>, а затем – первый тег <html>.

    3. +

  3. Внутри тега <html> добавьте следующие теги в порядке: <head>, <title>, </title>, и </head>.

    4. +

  4. Внутри напишите название вашего сайта внутри тега <title>.

    5. +

  5. Далее, создайте тег <body> и начинайте добавлять контент к нему.

    6. +

  6. Чтобы структурировать страницу более организованно, используйте теги <div>, и <span> для группировки элементов, таких как заголовки, параграфы и списки.

    7. +

  7. Для заголовочных тегов используйте от <h1> до <h6>, в зависимости от их важности. Используйте тег <p> для создания абзацев текста.

    8. +

  8. Добавьте ссылки между страницами с помощью тега <a> вместе со свойством href, указывающим на другие файлы.

    9. +

  9. Создавайте списки с помощью <ol> (нумерованный) или <ul> (ненумерованный) и элементы списка через <li> (независимо от типа списка).

    10. +

  10. Для включения изображений используйте тег <img> с атрибутом src, указывающим путь к файлу изображения.

    11. +

  11. Для встраивания видео используйте тег <video> с атрибутом src, указывающим на видеофайл, и controls для того, чтобы пользователи могли проигрывать и ставить видео на паузу.

    12. +

  12. Всегда закрывайте открывающие теги соответствующими закрывающими тегами.

    13. +
+

Удачи!

- +
diff --git a/style.css b/style.css index e682534..cc1a687 100644 --- a/style.css +++ b/style.css @@ -1,128 +1,121 @@ -/* Header */ - -.header { - - background-color: #d6ab00; - - padding: 1rem; - - display: flex; - - justify-content: space-between; - - align-items: center; - - /* position: fixed; */ - - top: 0; - - left: 0; - - right: 0; - - z-index: 999; - - } - - - - .nav { - - list-style-type: none; - - margin: 0; - - padding: 0; - - overflow: hidden; - - background-color: transparent; - - } - - - - .nav li { - - float: left; - - } - - - - .nav a { - - color: white; - - text-align: center; - - padding: 14px 16px; - - text-decoration: none; - - transition: all 0.3s ease 0s; - - } - - - - .nav a:hover { - - color: black; - - font-weight: bold; - - } - - - - /* Title */ - - h1 { - - text-align: center; - - font-size: xx-large; - - font-family: Arial, sans-serif; - - } - - - - /* Main Text */ - - .container { - - max-width: 80%; - - margin: auto; - - padding: 2rem; - - line-height: 1.5; - - font-size: medium; - - } - - - - /* Footer */ - - footer { - - background-color: #3e3e3e; - - color: white; - - text-align: center; - - padding: 1rem; - - position: absolute; - - bottom: 0; - - width: 100%; +html { + scroll-behavior: smooth; +} + +body { + --cl-base: #363062; + --cl-text-main: #FCFAF9; + --cl-text-code: #CEA0AE; + --cl-text-code-bg: #181818; + --cl-accent: #F99417; + --cl-selector: #48E5C2; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + + background-color: var(--cl-base); +} + +/* Header */ +.header { + background-color: var(--cl-accent); + color: var(--cl-text-main); + + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; + + top: 0; + left: 0; + right: 0; + z-index: 999; +} + +.nav { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: transparent; +} + +.nav li { + float: left; +} + +.nav a { + color: var(--cl-text-main); + text-align: center; + + padding: 14px 16px; + text-decoration: none; + transition: all 0.3s ease 0s; +} + + +.nav a:hover { + color: var(--cl-selector); + font-weight: bold; +} + + +/* Title */ +h1 { + text-align: center; + font-size: 4em; + color: var(--cl-text-main); + /* background-color: var(--cl-selector); */ + + margin-top: 1em; + margin-bottom: 0; +} + +h2 { + text-align: center; + font-size: 2em; + color: var(--cl-text-main); + /* background-color: var(--cl-selector); */ + + margin-top: 1em; + margin-bottom: 0; +} + + +/* Main Text */ +.container { + max-width: 60%; + margin: auto; + margin-top: 0; + margin-bottom: 2em; + padding: 2rem; + + line-height: 1.5; + color: var(--cl-text-main); + font-size: 2em; + word-wrap: break-word; + + /* background-color: var(--cl-selector); */ +} + + +code { + color: var(--cl-text-code); + background-color: var(--cl-text-code-bg); + font-family: monospace; +} + + +/* Footer */ +footer { + display: block; + background-color: var(--cl-accent); + color: var(--cl-text-main); + text-align: center; + margin: auto; + padding-bottom: 0.2em; + padding-top: 0; + + /* position: absolute; + right:0; + bottom: 0; */ + width: 100%; }