Made index.html page

assets/css/main.css

@@ -1,3 +1,5 @@
+
+@import url('/assets/styles/normalise.css');
 @import '../fonts/fonts.css';
 
 :root {
@@ -19,6 +21,12 @@
     --secondary: var(--purple);
 }
 
-* {
-    font-family: 'Roboto', sans-serif;
+html {
+    font-size: 16px;
+}
+
+body {
+    background-color: --white;
+    font-family: 'Inter', sans-serif;
+    color: var(--black);
 }

assets/styles/normalise.css

@@ -0,0 +1,182 @@
+/**
+  Нормализация блочной модели
+ */
+ *,
+ ::before,
+ ::after {
+   box-sizing: border-box;
+ }
+
+ /**
+   Убираем внутренние отступы слева тегам списков,
+   у которых есть атрибут class
+  */
+ :where(ul, ol):where([class]) {
+   padding-left: 0;
+ }
+
+ /**
+   Убираем внешние отступы body и двум другим тегам,
+   у которых есть атрибут class
+  */
+ body,
+ :where(blockquote, figure):where([class]) {
+   margin: 0;
+ }
+
+ /**
+   Убираем внешние отступы вертикали нужным тегам,
+   у которых есть атрибут class
+  */
+ :where(
+   h1,
+   h2,
+   h3,
+   h4,
+   h5,
+   h6,
+   p,
+   ul,
+   ol,
+   dl
+ ):where([class]) {
+   margin-block: 0;
+ }
+
+ :where(dd[class]) {
+   margin-left: 0;
+ }
+
+ :where(fieldset[class]) {
+   margin-left: 0;
+   padding: 0;
+   border: none;
+ }
+
+ /**
+   Убираем стандартный маркер маркированному списку,
+   у которого есть атрибут class
+  */
+ :where(ul[class]) {
+   list-style: none;
+ }
+
+ :where(address[class]) {
+   font-style: normal;
+ }
+
+ /**
+   Обнуляем вертикальные внешние отступы параграфа,
+   объявляем локальную переменную для внешнего отступа вниз,
+   чтобы избежать взаимодействие с более сложным селектором
+  */
+ p {
+   --paragraphMarginBottom: 24px;
+
+   margin-block: 0;
+ }
+
+ /**
+   Внешний отступ вниз для параграфа без атрибута class,
+   который расположен не последним среди своих соседних элементов
+  */
+ p:where(:not([class]):not(:last-child)) {
+   margin-bottom: var(--paragraphMarginBottom);
+ }
+
+
+ /**
+   Упрощаем работу с изображениями и видео
+  */
+ img,
+ video {
+   display: block;
+   max-width: 100%;
+   height: auto;
+ }
+
+ /**
+   Наследуем свойства шрифт для полей ввода
+  */
+ input,
+ textarea,
+ select,
+ button {
+   font: inherit;
+ }
+
+ html {
+   /**
+     Пригодится в большинстве ситуаций
+     (когда, например, нужно будет "прижать" футер к низу сайта)
+    */
+   height: 100%;
+   /**
+     Убираем скачок интерфейса по горизонтали
+     при появлении / исчезновении скроллбара
+    */
+   scrollbar-gutter: stable;
+ }
+
+ /**
+   Плавный скролл
+  */
+ html,
+ :has(:target) {
+   scroll-behavior: smooth;
+ }
+
+ body {
+   /**
+     Пригодится в большинстве ситуаций
+     (когда, например, нужно будет "прижать" футер к низу сайта)
+    */
+   min-height: 100%;
+   /**
+     Унифицированный интерлиньяж
+    */
+   line-height: 1.5;
+ }
+
+ /**
+   Нормализация высоты элемента ссылки при его инспектировании в DevTools
+  */
+ a:where([class]) {
+   display: inline-flex;
+ }
+
+ /**
+   Курсор-рука при наведении на элемент
+  */
+ button,
+ label {
+   cursor: pointer;
+ }
+
+ /**
+   Приводим к единому цвету svg-элементы
+  */
+ [fill] { fill: currentColor }
+ [stroke] { stroke: currentColor }
+
+ /**
+   Чиним баг задержки смены цвета при взаимодействии с svg-элементами
+  */
+ svg * {
+   transition-property: fill, stroke;
+ }
+
+ /**
+   Удаляем все анимации и переходы для людей,
+   которые предпочитают их не использовать
+  */
+ @media (prefers-reduced-motion: reduce) {
+   *,
+   ::before,
+   ::after {
+     animation-duration: 0.01ms !important;
+     animation-iteration-count: 1 !important;
+     transition-duration: 0.01ms !important;
+     scroll-behavior: auto !important;
+   }
+ }

components/page/container.css

@@ -0,0 +1,7 @@
+.container {
+    display: flex;
+    background-color: var(--grey-1);
+    border-block: 1px solid var( --grey-2);
+    height: 1036px;
+    width: 100%;
+}

components/page/footer.css

@@ -0,0 +1,23 @@
+.footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 72px 0 136px 0;
+}
+
+.footer__title {
+    font-size: 2.375rem;
+    padding-bottom: 32px;
+    font-weight: 500;
+}
+
+.footer__text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 640px;
+    font-weight: 400;
+    line-height: 1.5;
+}

components/page/header.css

@@ -0,0 +1,8 @@
+.header__title {
+    display: flex;
+    align-items: center;
+    padding: 96px 0 77px 160px;
+    font-size: 3.125rem;
+    font-weight: 500;
+    line-height: 1.28;
+}

index.html

@@ -3,8 +3,26 @@
 <html lang="ru">
     <head>
         <link rel="stylesheet" href="./assets/css/main.css">
+        <link rel="stylesheet" href="./components/page/header.css">
+        <link rel="stylesheet" href="./components/page/container.css">
+        <link rel="stylesheet" href="./components/page/footer.css">
+        <title>Page</title>
     </head>
     <body>
+        <header class="header">
+            <h1 class="header__title">Reusable component library</h1>
+        </header>
+
+        <main>
+            <div  class="container"></div>
+        </main>
+
+        <footer class="footer">
+            <h2 class="footer__title">About</h2>
+            <p class="footer__text">
+                This project is a collection of professionally designed, pre-built, fully responsive HTML snippets you can drop into your projects. Get started by checking out our free preview components, or browsing the PNG previews in the categories you're most curious about.
+            </p>
+        </footer>
 
     </body>
 </html>