diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 0000000..27d3308
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,13 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Compile SCSS to CSS",
+            "type": "shell",
+            "command": "sass scss/styles.scss css/styles.css",
+            "group": "build"
+        }
+    ]
+}
diff --git a/css/style.css b/css/style.css
deleted file mode 100644
index e69de29..0000000
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..13cbe2f
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,72 @@
+body {
+  margin: 0;
+}
+
+header {
+  background-color: blue;
+}
+header .row {
+  display: flex;
+  margin: 0 auto;
+  max-width: 600px;
+  justify-content: space-around;
+}
+header ul {
+  display: flex;
+  margin: 0;
+  align-content: baseline;
+}
+header ul li {
+  padding: 10px 15px;
+  list-style: none;
+}
+header ul li a {
+  text-decoration: none;
+  color: #fff;
+  padding: 5px;
+}
+header ul li a:hover {
+  text-decoration: underline;
+  background-color: darkblue;
+}
+header .logo {
+  color: #fff;
+  padding: 5px;
+  margin: 5px;
+}
+
+main {
+  margin: 0 auto;
+  max-width: 600px;
+}
+main div.row {
+  display: flex;
+  gap: 20px;
+}
+
+pre {
+  background-color: black;
+  color: #fff;
+  padding: 10px;
+}
+
+footer {
+  color: #fff;
+  background-color: gray;
+}
+footer .row {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+  margin: 0 auto;
+  justify-content: space-around;
+}
+footer a {
+  color: #fff;
+}
+footer img {
+  width: 200px;
+  height: auto;
+}
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/css/styles.css.map b/css/styles.css.map
new file mode 100644
index 0000000..10fcd1f
--- /dev/null
+++ b/css/styles.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/styles.scss"],"names":[],"mappings":"AAAA;EAAM;;;AAEN;EAEI;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAMhB;EACI;EACA;EACA;;;AAKR;EACI;EACA;;AAEA;EACI;EACA;;;AAIR;EACI;EACA;EACA;;;AAIJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAAG;;AAEH;EACI;EACA","file":"styles.css"}
\ No newline at end of file
diff --git a/img/rsschool-logo.svg b/img/rsschool-logo.svg
new file mode 100644
index 0000000..3b80540
--- /dev/null
+++ b/img/rsschool-logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 552.8 205.3"><style>.st0{fill:#fff}.st1{clip-path:url(#SVGID_2_)}.st2{clip-path:url(#SVGID_4_)}.st3{clip-path:url(#SVGID_6_)}.st4{clip-path:url(#SVGID_8_)}.st5{fill:#fff;stroke:#000;stroke-width:4;stroke-miterlimit:10}.st6{clip-path:url(#SVGID_8_)}.st6,.st7{fill:none;stroke:#000;stroke-width:4;stroke-miterlimit:10}.st8,.st9{clip-path:url(#SVGID_10_)}.st9{fill:none;stroke:#000;stroke-width:4;stroke-miterlimit:10}</style><title>rs_school_js</title><path d="M285.4 68l26.3-1.7c.6 4.3 1.7 7.5 3.5 9.8 2.9 3.6 6.9 5.4 12.2 5.4 3.9 0 7-.9 9.1-2.8 2-1.5 3.2-3.9 3.2-6.4 0-2.4-1.1-4.7-3-6.2-2-1.8-6.7-3.6-14.1-5.2-12.1-2.7-20.8-6.3-25.9-10.9-5.1-4.3-8-10.6-7.8-17.3 0-4.6 1.4-9.2 4-13 3-4.3 7.1-7.7 12-9.6 5.3-2.3 12.7-3.5 22-3.5 11.4 0 20.1 2.1 26.1 6.4 6 4.2 9.6 11 10.7 20.3l-26 1.5c-.7-4-2.1-6.9-4.4-8.8s-5.3-2.8-9.2-2.8c-3.2 0-5.6.7-7.2 2-1.5 1.2-2.5 3-2.4 5 0 1.5.8 2.9 2 3.8 1.3 1.2 4.4 2.3 9.3 3.3 12.1 2.6 20.7 5.2 26 7.9 5.3 2.7 9.1 6 11.4 9.9 2.4 4 3.6 8.6 3.5 13.3 0 5.6-1.6 11.2-4.8 15.9-3.3 4.9-7.9 8.7-13.3 11-5.7 2.5-12.9 3.8-21.5 3.8-15.2 0-25.7-2.9-31.6-8.8S286.1 77 285.4 68zM6.3 97.6V8.2h46.1c8.5 0 15.1.7 19.6 2.2 4.4 1.4 8.3 4.3 10.9 8.2 2.9 4.3 4.3 9.3 4.2 14.5.3 8.8-4.2 17.2-11.9 21.6-3 1.7-6.3 2.9-9.7 3.5 2.5.7 5 1.9 7.2 3.3 1.7 1.4 3.1 3 4.4 4.7 1.5 1.7 2.8 3.6 3.9 5.6l13.4 25.9H63L48.2 70.2c-1.9-3.5-3.5-5.8-5-6.9-2-1.4-4.4-2.1-6.8-2.1H34v36.3H6.3zM34 44.4h11.7c2.5-.2 4.9-.6 7.3-1.2 1.8-.3 3.4-1.3 4.5-2.8 2.7-3.6 2.3-8.7-1-11.8-1.8-1.5-5.3-2.3-10.3-2.3H34v18.1zM0 174.2l26.3-1.7c.6 4.3 1.7 7.5 3.5 9.8 2.8 3.6 6.9 5.5 12.2 5.5 3.9 0 7-.9 9.1-2.8 2-1.6 3.2-3.9 3.2-6.4 0-2.4-1.1-4.7-3-6.2-2-1.8-6.7-3.6-14.2-5.2-12.1-2.7-20.8-6.3-25.9-10.9-5.1-4.3-8-10.6-7.8-17.3 0-4.6 1.4-9.2 4-13 3-4.3 7.1-7.7 12-9.6 5.3-2.3 12.7-3.5 22-3.5 11.4 0 20.1 2.1 26.1 6.4s9.5 11 10.6 20.3l-26 1.5c-.7-4-2.1-6.9-4.4-8.8-2.2-1.9-5.3-2.8-9.2-2.7-3.2 0-5.6.7-7.2 2.1-1.6 1.2-2.5 3-2.4 5 0 1.5.8 2.9 2 3.8 1.3 1.2 4.4 2.3 9.3 3.3 12.1 2.6 20.7 5.2 26 7.9 5.3 2.7 9.1 6 11.4 9.9 2.4 4 3.6 8.6 3.6 13.2 0 5.6-1.7 11.1-4.8 15.8-3.3 4.9-7.9 8.7-13.3 11-5.7 2.5-12.9 3.8-21.5 3.8-15.2 0-25.7-2.9-31.6-8.8-5.9-6-9.2-13.4-10-22.4z"/><path d="M133 167.2l24.2 7.3c-1.3 6.1-4 11.9-7.7 17-3.4 4.5-7.9 8-13 10.3-5.2 2.3-11.8 3.5-19.8 3.5-9.7 0-17.7-1.4-23.8-4.2-6.2-2.8-11.5-7.8-16-14.9-4.5-7.1-6.7-16.2-6.7-27.3 0-14.8 3.9-26.2 11.8-34.1s19-11.9 33.4-11.9c11.3 0 20.1 2.3 26.6 6.8 6.4 4.6 11.2 11.6 14.4 21l-24.4 5.4c-.6-2.1-1.5-4.2-2.7-6-1.5-2.1-3.4-3.7-5.7-4.9-2.3-1.2-4.9-1.7-7.5-1.7-6.3 0-11.1 2.5-14.4 7.6-2.5 3.7-3.8 9.6-3.8 17.6 0 9.9 1.5 16.7 4.5 20.4 3 3.7 7.2 5.5 12.7 5.5 5.3 0 9.3-1.5 12-4.4 2.7-3.1 4.7-7.4 5.9-13zm56.5-52.8h27.6v31.3h30.2v-31.3h27.8v89.4h-27.8v-36.2h-30.2v36.2h-27.6v-89.4z"/><path d="M271.3 159.1c0-14.6 4.1-26 12.2-34.1 8.1-8.1 19.5-12.2 34-12.2 14.9 0 26.3 4 34.4 12S364 144 364 158.4c0 10.5-1.8 19-5.3 25.7-3.4 6.6-8.7 12-15.2 15.6-6.7 3.7-15 5.6-24.9 5.6-10.1 0-18.4-1.6-25-4.8-6.8-3.4-12.4-8.7-16.1-15.2-4.1-7-6.2-15.7-6.2-26.2zm27.6.1c0 9 1.7 15.5 5 19.5 3.3 3.9 7.9 5.9 13.7 5.9 5.9 0 10.5-1.9 13.8-5.8s4.9-10.8 4.9-20.8c0-8.4-1.7-14.6-5.1-18.4-3.4-3.9-8-5.8-13.8-5.8-5.1-.2-10 2-13.4 5.9-3.4 3.9-5.1 10.4-5.1 19.5zm93.4-.1c0-14.6 4.1-26 12.2-34.1 8.1-8.1 19.5-12.2 34-12.2 14.9 0 26.4 4 34.4 12S485 144 485 158.4c0 10.5-1.8 19-5.3 25.7-3.4 6.6-8.7 12-15.2 15.6-6.7 3.7-15 5.6-24.9 5.6-10.1 0-18.4-1.6-25-4.8-6.8-3.4-12.4-8.7-16.1-15.2-4.1-7-6.2-15.7-6.2-26.2zm27.6.1c0 9 1.7 15.5 5 19.5 3.3 3.9 7.9 5.9 13.7 5.9 5.9 0 10.5-1.9 13.8-5.8 3.3-3.9 4.9-10.8 4.9-20.8 0-8.4-1.7-14.6-5.1-18.4-3.4-3.9-8-5.8-13.8-5.8-5.1-.2-10.1 2-13.4 5.9-3.4 3.9-5.1 10.4-5.1 19.5z"/><path d="M482.1 114.4h27.6v67.4h43.1v22H482v-89.4z"/><ellipse transform="rotate(-37.001 420.46 67.88)" class="st0" cx="420.5" cy="67.9" rx="63" ry="51.8"/><defs><ellipse id="SVGID_1_" transform="rotate(-37.001 420.46 67.88)" cx="420.5" cy="67.9" rx="63" ry="51.8"/></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" overflow="visible"/></clipPath><g class="st1"><path transform="rotate(-37.001 420.82 68.353)" class="st0" d="M330.9-14.2h179.8v165.1H330.9z"/><g id="Layer_2_1_"><defs><path id="SVGID_3_" transform="rotate(-37.001 420.82 68.353)" d="M330.9-14.2h179.8v165.1H330.9z"/></defs><clipPath id="SVGID_4_"><use xlink:href="#SVGID_3_" overflow="visible"/></clipPath><g id="Layer_1-2" class="st2"><ellipse transform="rotate(-37.001 420.46 67.88)" class="st0" cx="420.5" cy="67.9" rx="63" ry="51.8"/><defs><ellipse id="SVGID_5_" transform="rotate(-37.001 420.46 67.88)" cx="420.5" cy="67.9" rx="63" ry="51.8"/></defs><clipPath id="SVGID_6_"><use xlink:href="#SVGID_5_" overflow="visible"/></clipPath><g class="st3"><path transform="rotate(-37 420.799 68.802)" class="st0" d="M357.8 17h125.9v103.7H357.8z"/><defs><path id="SVGID_7_" transform="rotate(-37 420.799 68.802)" d="M357.8 17h125.9v103.7H357.8z"/></defs><clipPath id="SVGID_8_"><use xlink:href="#SVGID_7_" overflow="visible"/></clipPath><g class="st4"><ellipse transform="rotate(-37.001 420.46 67.88)" class="st5" cx="420.5" cy="67.9" rx="63" ry="51.8"/></g><path transform="rotate(-37 420.799 68.802)" class="st6" d="M357.8 17h125.9v103.7H357.8z"/><ellipse transform="rotate(-37.001 420.46 67.88)" class="st7" cx="420.5" cy="67.9" rx="63" ry="51.8"/><path transform="rotate(-37 420.799 68.802)" class="st0" d="M357.8 17h125.9v103.7H357.8z"/><defs><path id="SVGID_9_" transform="rotate(-37 420.799 68.802)" d="M357.8 17h125.9v103.7H357.8z"/></defs><clipPath id="SVGID_10_"><use xlink:href="#SVGID_9_" overflow="visible"/></clipPath><g class="st8"><ellipse transform="rotate(-37.001 420.46 67.88)" class="st5" cx="420.5" cy="67.9" rx="63" ry="51.8"/></g><path transform="rotate(-37 420.799 68.802)" class="st9" d="M357.8 17h125.9v103.7H357.8z"/><path transform="rotate(-37.001 420.82 68.353)" class="st7" d="M330.9-14.2h179.8v165.1H330.9z"/></g><ellipse transform="rotate(-37.001 420.46 67.88)" class="st7" cx="420.5" cy="67.9" rx="63" ry="51.8"/><path d="M392.4 61.3l10-7 12.3 17.5c2.1 2.8 3.7 5.8 4.9 9.1.7 2.5.5 5.2-.5 7.6-1.3 3-3.4 5.5-6.2 7.3-3.3 2.3-6.1 3.6-8.5 4-2.3.4-4.7 0-6.9-1-2.4-1.2-4.5-2.9-6.1-5.1l8.6-8c.7 1.1 1.6 2.1 2.6 2.9.7.5 1.5.8 2.4.8.7 0 1.4-.3 1.9-.7 1-.6 1.7-1.8 1.6-3-.3-1.7-1-3.4-2.1-4.7l-14-19.7zm30 11.1l9.1-7.2c1 1.2 2.3 2.1 3.7 2.6 2 .6 4.1.2 5.8-1.1 1.2-.8 2.2-1.9 2.6-3.3.6-1.8-.4-3.8-2.2-4.4-.3-.1-.6-.2-.9-.2-1.2-.1-3.3.4-6.4 1.7-5.1 2.1-9.1 2.9-12.1 2.6-2.9-.3-5.6-1.8-7.2-4.3-1.2-1.7-1.8-3.7-1.9-5.7 0-2.3.6-4.6 1.9-6.5 1.9-2.7 4.2-5 7-6.8 4.2-2.9 7.9-4.3 11.1-4.3 3.2 0 6.2 1.5 9 4.6l-9 7.1c-1.8-2.3-5.2-2.8-7.5-1l-.3.3c-1 .6-1.7 1.5-2.1 2.6-.3.8-.1 1.7.4 2.4.4.5 1 .9 1.7.9.8.1 2.2-.3 4.2-1.2 5-2.1 8.8-3.3 11.4-3.7 2.2-.4 4.5-.2 6.6.7 1.9.8 3.5 2.2 4.6 3.9 1.4 2 2.2 4.4 2.3 6.9.1 2.6-.6 5.1-2 7.3-1.8 2.7-4.1 5-6.8 6.8-5.5 3.8-10 5.4-13.6 4.8-3.9-.6-7.1-2.6-9.4-5.5z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 0a5c79b..1233631 100644
--- a/index.html
+++ b/index.html
@@ -4,38 +4,42 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Petr Selfin - CV#2. HTML, CSS and Git Basics</title>
-    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
     <header>
-        <div class="logo">Petr Selfin - CV#2</div>
-        <nav>
-            <ul>
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-            </ul>
-        </nav>
+<div class="row">
+            <div class="logo">Petr Selfin - CV#2</div>
+            <nav>
+                <ul>
+                    <li><a href="#name">Me</a></li>
+                    <li><a href="#about">About</a></li>
+                    <li><a href="#code">Code</a></li>
+                    <li><a href="#edu">Education</a></li>
+                    <li><a href="#eng">English</a></li>
+                </ul>
+            </nav>
+</div>
     </header>
-    <main>
+    <main id="name">
         <h1>Petr Selfin - CV#2. HTML, CSS &amp; Git Basics</h1>
 
-        <div class="col-2">
-            <img src="img/avatar.png" alt="Avatar">
-        </div>
-        <div class="col-2">
-            <b>Name:</b> Petr Selfin <br>
-            <b>Contact:</b>
-            <ul>
-                <li>Telegram: <a href="https://t.me/pselfin">@pselfin</a></li>
-                <li>GitHub: <a href="https://github.com/pselfin/">@pselfin</a></li>
-                <li>Discord: Petr Selfin (@pselfin)</li>
-            </ul>
-        </div>
+     <div class="row">
+            <div class="col-2">
+                <img src="img/avatar.png" alt="Avatar">
+            </div>
+            <div class="col-2">
+                <b>Name:</b> Petr Selfin <br>
+                <b>Contact:</b>
+                <ul>
+                    <li>Telegram: <a href="https://t.me/pselfin">@pselfin</a></li>
+                    <li>GitHub: <a href="https://github.com/pselfin/">@pselfin</a></li>
+                    <li>Discord: Petr Selfin (@pselfin)</li>
+                </ul>
+            </div>
+     </div>
 
-        <h2>About me</h2>
+        <h2 id="about">About me</h2>
 
         <p>I play bass guitar, develop and promote websites</p>
         <h2>Skills</h2>
@@ -45,7 +49,7 @@ <h2>Skills</h2>
             <li>PPC</li>
         </ul>
 
-        <h2>Code example</h2>
+        <h2 id="code">Code example</h2>
 
         <pre>
             function multiply(a, b){
@@ -53,16 +57,21 @@ <h2>Code example</h2>
             }
         </pre>
 
-        <h2>Job</h2>
+        <h2 id="job">Job</h2>
         <p>Portfolio me and my small company: <a href="https://pro-self.ru">pro-self.ru</a></p>
 
-        <h2>Education</h2>
+        <h2 id="edu">Education</h2>
         <p>Htmlbook.ru, some cource and book, forums, blogs))</p>
 
-        <h2>English</h2>
+        <h2 id="eng">English</h2>
         <p>Very very bad</p>
     </main>
     <footer>
+        <div class="row">
+            <div class="copy">2024 <a href="https://github.com/pselfin" target="_blank">Petr Selfin</a></div>
+            <a href="https://rs.school/courses/javascript-ru" target="_blank"><img src="img/rsschool-logo.svg" alt=""></a>
+    
+        </div>
     </footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/scss/styles.scss b/scss/styles.scss
new file mode 100644
index 0000000..f709515
--- /dev/null
+++ b/scss/styles.scss
@@ -0,0 +1,85 @@
+body {
+    margin: 0;
+    scroll-behavior: smooth;
+}
+
+header {
+
+    background-color: blue;
+
+    .row {
+        display: flex;
+        margin: 0 auto;
+        max-width: 600px;
+        justify-content: space-around;
+    }
+
+    ul {
+        display: flex;
+        margin: 0;
+        align-content: baseline;
+
+        li {
+            padding: 10px 15px;
+            list-style: none;
+
+            a {
+                text-decoration: none;
+                color: #fff;
+                padding: 5px;
+
+
+                &:hover {
+                    text-decoration: underline;
+                    background-color: darkblue;
+                }
+            }
+        }
+    }
+
+    .logo {
+        color: #fff;
+        padding: 5px;
+        margin: 5px;
+
+    }
+}
+
+main {
+    margin: 0 auto;
+    max-width: 600px;
+
+    div.row {
+        display: flex;
+        gap: 20px;
+    }
+}
+
+pre {
+    background-color: black;
+    color: #fff;
+    padding: 10px;
+
+}
+
+footer {
+    color: #fff;
+    background-color: gray;
+    padding: 15px 0;
+
+    .row {
+        display: flex;
+        align-items: center;  
+        max-width: 600px;
+        margin: 0 auto;
+        justify-content: space-around;
+    }
+    
+    a {color: #fff;}
+
+    img {
+        width: 200px;
+        height: auto;
+
+    }
+}
\ No newline at end of file