kottans · oleksii-anoshkin · Mar 2, 2023
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/dodge-1.jpg b/submissions/OleksiiAnoshkin/js-dom/images/dodge-1.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/dodge-2.jpg b/submissions/OleksiiAnoshkin/js-dom/images/dodge-2.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/dodge-3.jpg b/submissions/OleksiiAnoshkin/js-dom/images/dodge-3.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/dodge-4.jpg b/submissions/OleksiiAnoshkin/js-dom/images/dodge-4.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/dodge.webp b/submissions/OleksiiAnoshkin/js-dom/images/dodge.webp
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/favicon.png b/submissions/OleksiiAnoshkin/js-dom/images/favicon.png
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/ferrari-1.jpg b/submissions/OleksiiAnoshkin/js-dom/images/ferrari-1.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/ferrari-2.jpg b/submissions/OleksiiAnoshkin/js-dom/images/ferrari-2.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/ferrari-3.jpg b/submissions/OleksiiAnoshkin/js-dom/images/ferrari-3.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/ferrari-4.jpg b/submissions/OleksiiAnoshkin/js-dom/images/ferrari-4.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/ferrari.webp b/submissions/OleksiiAnoshkin/js-dom/images/ferrari.webp
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/kottans-bg.svg b/submissions/OleksiiAnoshkin/js-dom/images/kottans-bg.svg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/kottans-logo.png b/submissions/OleksiiAnoshkin/js-dom/images/kottans-logo.png
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/lamborghini-1.jpg b/submissions/OleksiiAnoshkin/js-dom/images/lamborghini-1.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/lamborghini-2.jpg b/submissions/OleksiiAnoshkin/js-dom/images/lamborghini-2.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/lamborghini-3.jpg b/submissions/OleksiiAnoshkin/js-dom/images/lamborghini-3.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/lamborghini-4.jpg b/submissions/OleksiiAnoshkin/js-dom/images/lamborghini-4.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/lamborghini.webp b/submissions/OleksiiAnoshkin/js-dom/images/lamborghini.webp
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/lotus-1.jpg b/submissions/OleksiiAnoshkin/js-dom/images/lotus-1.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/lotus-2.jpg b/submissions/OleksiiAnoshkin/js-dom/images/lotus-2.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/lotus-3.jpg b/submissions/OleksiiAnoshkin/js-dom/images/lotus-3.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/lotus-4.jpg b/submissions/OleksiiAnoshkin/js-dom/images/lotus-4.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/lotus.webp b/submissions/OleksiiAnoshkin/js-dom/images/lotus.webp
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/mercedes-1.jpg b/submissions/OleksiiAnoshkin/js-dom/images/mercedes-1.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/mercedes-2.jpg b/submissions/OleksiiAnoshkin/js-dom/images/mercedes-2.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/mercedes-3.jpg b/submissions/OleksiiAnoshkin/js-dom/images/mercedes-3.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/mercedes-4.jpg b/submissions/OleksiiAnoshkin/js-dom/images/mercedes-4.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/mercedes.webp b/submissions/OleksiiAnoshkin/js-dom/images/mercedes.webp
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/porsche-1.jpg b/submissions/OleksiiAnoshkin/js-dom/images/porsche-1.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/porsche-2.jpg b/submissions/OleksiiAnoshkin/js-dom/images/porsche-2.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/porsche-3.jpg b/submissions/OleksiiAnoshkin/js-dom/images/porsche-3.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/porsche-4.jpg b/submissions/OleksiiAnoshkin/js-dom/images/porsche-4.jpg
diff --git a/submissions/OleksiiAnoshkin/js-dom/images/porsche.webp b/submissions/OleksiiAnoshkin/js-dom/images/porsche.webp
diff --git a/submissions/OleksiiAnoshkin/js-dom/index.html b/submissions/OleksiiAnoshkin/js-dom/index.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- about author -->
+    <meta name="Author" content="Oleksii Anoshkin" />
+    <meta name="Copyright" content="Oleksii Anoshkin" />
+    <meta name="Address" content="Ukraine, Kharkiv" />
+    <!-- general -->
+    <meta name="description" content="Create side menu" />
+    <meta
+      name="keywords"
+      content="DOM, BOM, JS, JavaScript, Kottans, BEM, SCSS, SASS" />
+    <meta name="robots" content="all" />
+    <!-- facebook -->
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="site" />
+    <meta property="og:title" content="Create side menu" />
+    <meta
+      property="og:image"
+      content="https://task-js-dom.netlify.app/images/kottans-bg.svg" />
+    <meta property="og:url" content="https://task-js-dom.netlify.app/" />
+    <meta property="og:site_name" content="Create side menu" />
+    <!-- styles -->
+    <link rel="stylesheet" href="./style.css" />
+    <!-- images -->
+    <link rel="shortcut icon" type="image/x-icon" href="./images/favicon.png" />
+    <!-- title -->
+    <title>Create side menu</title>
+  </head>
+  <body class="wrap">
+    <aside class="sidebar">
+      <header class="sidebar__header">
+        <div class="sidebar__arrow" tabindex="1"></div>
+      </header>
+      <ul class="sidebar__menu">
+        <li class="sidebar__item ferrari" tabindex="2">
+          <img
+            class="sidebar__img ferrari"
+            src="./images/ferrari.webp"
+            alt="ferrari logo"
+            width="28"
+            height="28" />
+          <span class="sidebar__text ferrari">Ferrari</span>
+        </li>
+        <li class="sidebar__item lamborghini" tabindex="3">
+          <img
+            class="sidebar__img lamborghini"
+            src="./images/lamborghini.webp"
+            alt="lamborghini logo"
+            width="28"
+            height="28" />
+          <span class="sidebar__text lamborghini">Lamborghini</span>
+        </li>
+        <li class="sidebar__item mercedes" tabindex="4">
+          <img
+            class="sidebar__img mercedes"
+            src="./images/mercedes.webp"
+            alt="mercedes logo"
+            width="28"
+            height="28" />
+          <span class="sidebar__text mercedes">Mercedes</span>
+        </li>
+        <li class="sidebar__item porsche" tabindex="5">
+          <img
+            class="sidebar__img porsche"
+            src="./images/porsche.webp"
+            alt="porsche logo"
+            width="28"
+            height="28" />
+          <span class="sidebar__text porsche">Porsche</span>
+        </li>
+        <li class="sidebar__item dodge" tabindex="6">
+          <img
+            class="sidebar__img dodge"
+            src="./images/dodge.webp"
+            alt="dodge logo"
+            width="28"
+            height="28" />
+          <span class="sidebar__text dodge">Dodge</span>
+        </li>
+        <li class="sidebar__item lotus" tabindex="7">
+          <img
+            class="sidebar__img lotus"
+            src="./images/lotus.webp"
+            alt="lotus logo"
+            width="28"
+            height="28" />
+          <span class="sidebar__text lotus">Lotus</span>
+        </li>
+      </ul>
+      <footer class="sidebar__footer">
+        <a
+          class="sidebar__link"
+          tabindex="8"
+          href="https://kottans.org/"
+          target="_blank"
+          rel="noopener noreferrer nofollow">
+          <img
+            class="sidebar__img"
+            src="./images/kottans-logo.png"
+            alt="kottans logo"
+            width="32"
+            height="32" />
+          <span class="sidebar__text">Kottans</span>
+        </a>
+      </footer>
+    </aside>
+    <main class="content">
+      <section class="content__container"></section>
+    </main>
+    <!-- scripts -->
+    <script src="./script.js"></script>
+  </body>
+</html>