diff --git a/src/images/demo.jpg b/src/images/demo.jpg
deleted file mode 100644
index 3d26b41648f0609274bc12fa0a349600ec502d80..0000000000000000000000000000000000000000
Binary files a/src/images/demo.jpg and /dev/null differ
diff --git a/src/images/sprite.svg b/src/images/sprite.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c473fb3daa9928289e2d9789db40131bb2483832
--- /dev/null
+++ b/src/images/sprite.svg
@@ -0,0 +1,31 @@
+<svg width="0" height="0" class="hidden">
+ <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="arrow-left">
+ <path d="M12.6666 8H3.33325" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
+ <path d="M7.99992 12.6668L3.33325 8.00016L7.99992 3.3335" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
+ </symbol>
+ <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="arrow-right">
+ <path d="M3.33341 8H12.6667" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
+ <path d="M8.00008 12.6668L12.6667 8.00016L8.00008 3.3335" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
+ </symbol>
+ <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" id="close">
+ <path d="M8 8L22 22" stroke="black" stroke-width="2"></path>
+ <path d="M8 22L22 8" stroke="black" stroke-width="2"></path>
+ </symbol>
+ <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="logo">
+ <path d="M19.82 2H4.18C2.97602 2 2 2.97602 2 4.18V19.82C2 21.024 2.97602 22 4.18 22H19.82C21.024 22 22 21.024 22 19.82V4.18C22 2.97602 21.024 2 19.82 2Z" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+ <path d="M7 2V22" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+ <path d="M17 2V22" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+ <path d="M2 12H22" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+ <path d="M2 7H7" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+ <path d="M2 17H7" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+ <path d="M17 17H22" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+ <path d="M17 7H22" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+ </symbol>
+ <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 13" id="heart">
+ <path d="M7 12.88L6.02 11.9C2.38 8.68 0 6.51 0 3.85C0 1.68 1.68 0 3.85 0C5.04 0 6.23 0.56 7 1.47C7.77 0.56 8.96 0 10.15 0C12.32 0 14 1.68 14 3.85C14 6.51 11.62 8.68 7.98 11.9L7 12.88Z" fill="#FF6B08"></path>
+ </symbol>
+ <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" id="search">
+ <path d="M5.5 9.5C7.70914 9.5 9.5 7.70914 9.5 5.5C9.5 3.29086 7.70914 1.5 5.5 1.5C3.29086 1.5 1.5 3.29086 1.5 5.5C1.5 7.70914 3.29086 9.5 5.5 9.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
+ <path d="M10.5 10.5002L8.32495 8.3252" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
+ </symbol>
+</svg>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 68a9145713413f79b7a49a4e997af98a9883c9a4..2346fe39bcaeb57772dd14630232a8f06bf52469 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,11 +10,19 @@
integrity="sha512-ISS7cAi1PEhQ8jnbJpJZMd29NlhNj4AWYyLOSp2CE/CsHxTCu+r+t0D2yoJudVrd0/8fTVPUVDzY5Tvli75u/g=="
crossorigin="anonymous"
/>
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+ <link
+ href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
+ rel="stylesheet"
+ />
</head>
<body>
<!-- Так добавлÑÑŽÑ‚ÑÑ Ñ„Ñ€Ð°Ð³Ð¼ÐµÐ½Ñ‚Ñ‹ в главные HTML-файлы Ñтраниц. -->
- <include src="./partials/example.html"></include>
-
+ <!-- <include src="./partials/example.html"></include> -->
+ <div class="container">
+ <p>hello</p>
+ </div>
<!-- Скрипт идёт поÑледним в разметке. Ð’ нём уже подключен главный SASS-файл. -->
<script src="./index.js"></script>
</body>
diff --git a/src/partials/example.html b/src/partials/example.html
deleted file mode 100644
index feed923a74192fd1654c9a16e820090322423d05..0000000000000000000000000000000000000000
--- a/src/partials/example.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<article class="example">
- <h1>HTML-фрагменты</h1>
-
- <!-- Путь к изображениÑм из HTML-фрагмента такой, как из файла index.html -->
- <img src="images/demo.jpg" alt="" width="320" />
- <p>
- Плагин
- <a
- href="https://github.com/posthtml/posthtml-include"
- target="_blank"
- rel="noopener noreferrer"
- >
- posthtml-include
- </a>
- позволÑет добавлÑÑ‚ÑŒ в HTML-файлы Ñтраниц код из других HTML-файлов (фрагментов). Фрагменты
- хранÑÑ‚ÑÑ Ð² папке
- <code>src/partials</code>. Добавление проиÑходит при компилÑции файлов Ñтраниц, например
- <code>index.html</code>.
- </p>
-
- <p>
- Ðтот файл <code>example.html</code> — пример такого фрагмента, Ñ Ñ€Ð°Ð·Ð¼ÐµÑ‚ÐºÐ¾Ð¹ определённой
- чаÑти главной Ñтраницы. Ðто очень удобно при командной разработке на ÑтуденчеÑких проектах,
- когда в одном HTML-файле пишет неÑколько человек Ñразу.
- </p>
-
- <p>
- СинтакÑÐ¸Ñ Ð´Ð¾Ð±Ð°Ð²Ð»ÐµÐ½Ð¸Ðµ фрагмента в главный файл:
- <code> <include src="./partials/имÑ-файла.html"></include> </code>
- </p>
-
- <div class="background"></div>
-</article>
diff --git a/src/sass/_example.scss b/src/sass/_example.scss
deleted file mode 100644
index 7ccc632b7fb176c898fcea19d53660abc198187f..0000000000000000000000000000000000000000
--- a/src/sass/_example.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.example {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
- 'Open Sans', 'Helvetica Neue', sans-serif;
- line-height: 1.5;
- background-color: #fff;
- color: #424242;
- max-width: 960px;
- padding: 16px;
-}
-
-.example code {
- font-family: monospace;
- font-size: 16px;
- font-weight: 700;
- background-color: #009688;
- color: #fff;
- padding: 2px 6px;
- border-radius: 2px;
-}
-
-.example .background {
- height: 240px;
- // Путь к изображениÑм из SASS-файла вÑегда такой, как из папки css
- background-image: url('../images/demo.jpg');
- background-size: cover;
- background-position: center;
-}
diff --git a/src/sass/_utility-classes.scss b/src/sass/_utility-classes.scss
new file mode 100644
index 0000000000000000000000000000000000000000..71dcb48c8c0f28e1fb128985df07fad9304a5daa
--- /dev/null
+++ b/src/sass/_utility-classes.scss
@@ -0,0 +1,63 @@
+body {
+ background-color: $primary-white-color;
+ color: $primary-text-color;
+ font-family: Roboto, sans-serif;
+ font-weight: 500;
+}
+
+button {
+ font-family: inherit;
+}
+
+a {
+ color: inherit;
+}
+
+.container {
+ padding: 0 20px;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 0;
+ margin-bottom: 0;
+ min-width: 320px;
+ width: 100%;
+
+ @media screen and (min-width: 480px) {
+ width: 480px;
+ }
+
+ @media screen and (min-width: 768px) {
+ width: 768px;
+ padding: 0 76px;
+ }
+
+ @media screen and (min-width: 1024px) {
+ width: 1024px;
+ padding: 0 71px;
+
+ }
+}
+
+.list {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+.img {
+ display: block;
+ width: 100%;
+}
+
+.visually-hidden {
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ border: 0;
+ padding: 0;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ margin: -1px;
+}
\ No newline at end of file
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..369c47e73b2c77bad626ce99a5e8b07f9960bda6
--- /dev/null
+++ b/src/sass/_variables.scss
@@ -0,0 +1,7 @@
+$accent-color: #FF6B01;
+$primary-white-color: #ffffff;
+$secondary-white-color: #F7F7F7;
+$primary-text-color: #000000;
+$secondary-text-color: #8C8C8C;
+$footer-text-color: #545454;
+$alert-color: #FF001B;
\ No newline at end of file
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 269c79c220a767121139a76b961826ddf0aba61e..908047521c4d9e1353010cd7e928a2132b161f04 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -4,4 +4,5 @@
*/
// Стили Ð´Ð»Ñ Ñ„Ð°Ð¹Ð»Ð° Ñ Ð¿Ñ€Ð¸Ð¼ÐµÑ€Ð¾Ð¼ HTML-фрагмента
-@import './example';
+@import './variables';
+@import './utility-classes';