diff --git a/assets/css/main.css b/assets/css/main.css
index f39b2eb..7dfa9cf 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,5 +1,13 @@
+
+@import url('../styles/normalise.css');
@import '../fonts/fonts.css';
+@import url('../../components/container/container.css');
+@import url('../../components/content/content.css');
+@import url('../../components/header/header.css');
+@import url('../../components/footer/footer.css');
+@import url('../../components/wrapper/wrapper.css');
+
:root {
--white: #ffffff;
--black: #212429;
@@ -19,6 +27,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);
}
diff --git a/assets/fonts/fonts.css b/assets/fonts/fonts.css
index 8424c7f..b22e569 100644
--- a/assets/fonts/fonts.css
+++ b/assets/fonts/fonts.css
@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
diff --git a/assets/styles/normalise.css b/assets/styles/normalise.css
new file mode 100644
index 0000000..edea560
--- /dev/null
+++ b/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;
+ }
+ }
\ No newline at end of file
diff --git a/components/container/container.css b/components/container/container.css
new file mode 100644
index 0000000..d1ca801
--- /dev/null
+++ b/components/container/container.css
@@ -0,0 +1,5 @@
+.container {
+ max-width: 1110px;
+ margin: 0 auto;
+ /* text-align: center; */
+}
\ No newline at end of file
diff --git a/components/content/content.css b/components/content/content.css
new file mode 100644
index 0000000..8b49cd2
--- /dev/null
+++ b/components/content/content.css
@@ -0,0 +1,5 @@
+.content {
+ background-color: var(--grey-1);
+ border-block: 1px solid var( --grey-2);
+ height: 1036px;
+}
\ No newline at end of file
diff --git a/components/footer/footer.css b/components/footer/footer.css
new file mode 100644
index 0000000..f0608e5
--- /dev/null
+++ b/components/footer/footer.css
@@ -0,0 +1,21 @@
+.footer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ padding: 72px 0 136px 0;
+}
+
+.footer__title {
+ font-size: 2.375rem;
+ margin-bottom: 32px;
+ font-weight: 500;
+ text-align: center;
+}
+
+.footer__text {
+ text-align: center;
+ max-width: 640px;
+ font-weight: 400;
+ line-height: 1.5;
+}
\ No newline at end of file
diff --git a/components/header/header.css b/components/header/header.css
new file mode 100644
index 0000000..cda3152
--- /dev/null
+++ b/components/header/header.css
@@ -0,0 +1,10 @@
+.header__title {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 96px;
+ margin-bottom: 77px;
+ font-size: 3.125rem;
+ font-weight: 500;
+ line-height: 1.28;
+}
\ No newline at end of file
diff --git a/components/wrapper/wrapper.css b/components/wrapper/wrapper.css
new file mode 100644
index 0000000..4d64e1b
--- /dev/null
+++ b/components/wrapper/wrapper.css
@@ -0,0 +1,3 @@
+.wrapper {
+
+ }
\ No newline at end of file
diff --git a/index.html b/index.html
index 39fa193..cbe433e 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,38 @@
-
-
-
-
-
-
+
+
+
+ Page
+
+
+
+
+
+
+