From 2981ab87b0dc63899ac46930acb5341689f8a411 Mon Sep 17 00:00:00 2001
From: Sergey Hovakimyan <sergey_hovakimyan@epam.com>
Date: Sat, 9 Jul 2022 11:27:54 -0700
Subject: [PATCH 1/9] feat: task 1

---
 css/styles.css |   65 ++
 index.html     | 2248 +++++++++++++++++++++++++++---------------------
 2 files changed, 1334 insertions(+), 979 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 2c89671..ed3e7d2 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -175,4 +175,69 @@ li {
   width: 40px;
   height: 40px;
   background-size: contain;
+}
+
+.visually-hidden {
+  position: absolute;
+  clip: rect(0,0,0,0);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+}
+
+.visually-hidden:focus {
+  clip: auto;
+  height: auto;
+  width: auto;
+}
+
+.control button:focus,
+.control input:focus,
+.control select:focus,
+.control textarea:focus {
+  box-shadow: none !important;
+  border: 2px solid #007eff;
+}
+.button.is-info {
+  background-color: rgb(27, 91, 131);
+}
+.title:not(.is-spaced)+.subtitle {
+  color: #262626;
+}
+
+.hero.is-info .title {
+  color: #000000;
+}
+
+.tabs.is-boxed.is-centered.main-menu .is-active span {
+  color: #595959;
+}
+
+.tag:not(body).is-danger {
+  background-color: #FF6685;
+  color: #000000;
+}
+
+.tag.is-primary.is-medium {
+  color: #000000;
+}
+.tag.is-success.is-medium {
+  color: #1C1C1C;
+}
+.has-text-grey-light {
+  color: #383838!important;
+}
+.help.is-success {
+  color: #0C5526;
+}
+.help.is-danger {
+  color: #99001F;
+}
+.footer ul li a  {
+  color: #1A4A99;
+}
+.footer .soc + p a {
+  color: #1A4A99;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index fa627dd..7f2c5ce 100644
--- a/index.html
+++ b/index.html
@@ -1,1176 +1,1466 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Web Accessibility 2019 Q1 BY</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=1.0"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
+    />
+    <link rel="stylesheet" href="css/styles.css" />
+  </head>
 
-<head>
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Web Accessibility 2019 Q1 BY</title>
-  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css'>
-  <link rel='stylesheet prefetch' href='https://use.fontawesome.com/releases/v5.0.10/css/all.css'>
-  <link rel="stylesheet prefetch" href="css/styles.css">
-</head>
-
-<body>
-  <div class="hero hero-bg is-fullheight">
-    <div class="hero-head">
-      <div class="navbar">
-        <div class="container">
-          <div class="navbar-brand">
-            <a class="navbar-item logo-link">
-              <img src="https://www.epam.com/content/dam/epam/global/logo_white-blue.svg">
-            </a>
-            <span class="navbar-burger burger" data-target="navbarMenu">
-              <span></span>
-              <span></span>
-              <span></span>
-            </span>
-          </div>
-
-          <div id="navbarMenu" class="navbar-menu">
-            <div class="navbar-end">
-              <span class="navbar-item">
-                <a class="button is-white is-outlined">
-                  <span class="icon">
-                    <i class="fa fa-home"></i>
-                  </span>
-                  <span>Home</span>
-                </a>
-              </span>
-              <span class="navbar-item">
-                <a class="button is-white is-outlined">
-                  <span class="icon">
-                    <i class="fab fa-superpowers"></i>
-                  </span>
-                  <span>Examples</span>
-                </a>
-              </span>
-              <span class="navbar-item">
-                <a class="button is-white is-outlined">
-                  <span class="icon">
-                    <i class="fa fa-book"></i>
-                  </span>
-                  <span>Documentation</span>
-                </a>
-              </span>
-              <span class="navbar-item">
-                <a class="button is-white is-outlined">
-                  <span class="icon">
-                    <i class="fab fa-github"></i>
-                  </span>
-                  <span>View Source</span>
-                </a>
+  <body>
+    <header class="hero hero-bg is-fullheight">
+      <div class="hero-head">
+        <div class="navbar">
+          <div class="container">
+            <div class="navbar-brand">
+              <a class="navbar-item logo-link">
+                <img
+                  src="https://www.epam.com/content/dam/epam/global/logo_white-blue.svg"
+                  alt="Logo"
+                />
+              </a>
+              <span class="navbar-burger burger" data-target="navbarMenu">
+                <span></span>
+                <span></span>
+                <span></span>
               </span>
             </div>
+            <a href="#about" class="visually-hidden" tabindex="0">
+              Skip navigation Link
+            </a>
+            <nav id="navbarMenu" class="navbar-menu">
+              <ul class="navbar-end">
+                <li class="navbar-item">
+                  <button class="button is-white is-outlined">
+                    <span class="icon">
+                      <i class="fa fa-home"></i>
+                    </span>
+                    <span>Home</span>
+                  </button>
+                </li>
+                <li class="navbar-item">
+                  <button class="button is-white is-outlined">
+                    <span class="icon">
+                      <i class="fab fa-superpowers"></i>
+                    </span>
+                    <span>Examples</span>
+                  </button>
+                </li>
+                <li class="navbar-item">
+                  <button class="button is-white is-outlined">
+                    <span class="icon">
+                      <i class="fa fa-book"></i>
+                    </span>
+                    <span>Documentation</span>
+                  </button>
+                </li>
+                <li class="navbar-item">
+                  <button class="button is-white is-outlined">
+                    <span class="icon">
+                      <i class="fab fa-github"></i>
+                    </span>
+                    <span>View Source</span>
+                  </button>
+                </li>
+              </ul>
+            </nav>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="hero-body">
-      <div class="container has-text-centered">
-        <div class="column is-6 is-offset-3">
-          <div class="title has-text-white">We have web accessibility in mind</div>
-          <div class="subtitle has-text-white">
-            Would you like to get the latest news?
-          </div>
-          <div class="box">
-            <div class="field is-grouped">
-              <p class="control is-expanded">
-                <input class="input">
-              </p>
-              <p class="control">
-                <a class="button is-info">Notify Me</a>
-              </p>
+      <div class="hero-body">
+        <div class="container has-text-centered">
+          <div class="column is-6 is-offset-3">
+            <div class="title has-text-white">
+              We have web accessibility in mind
             </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="section" id="about">
-    <div class="section-heading has-text-centered">
-      <div class="title is-2">About Us</div>
-      <div class="subtitle is-5">We of all trades, master of "some"</div>
-      <div class="container">
-        <p>Web developers with more than <b>4 years</b> of well-rounded experience with a degree in the
-          field of
-          <b>Computer Science</b>, extensive knowledge of modern Web techniques and love for <b>Coffee</b>.
-          Looking for an opportunity to work and upgrade, as well as being involved in an organization that
-          believes
-          in gaining a competitive edge and giving back to the community.</p>
-      </div>
-    </div>
-
-    <div class="content container">
-      <div class="is-1 title">Hello World</div>
-      <p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
-      <div class="is-2 title">Second level</div>
-      <p>Curabitur accumsan turpis pharetra <b>augue tincidunt</b> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
-      <ul>
-        <li>- In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
-        <li>- Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
-        <li>- Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
-        <li>- Ut non enim metus.</li>
-      </ul>
-      <div class="is-3 title">Third level</div>
-      <p>Quisque ante lacus, malesuada ac auctor vitae, congue <a>non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
-      <ol class="ol-list">
-        <li>Donec blandit a lorem id convallis.</li>
-        <li>Cras gravida arcu at diam gravida gravida.</li>
-        <li>Integer in volutpat libero.</li>
-        <li>Donec a diam tellus.</li>
-        <li>Aenean nec tortor orci.</li>
-        <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
-        <li>Vivamus maximus ultricies pulvinar.</li>
-      </ol>
-      <div class="blockquote">Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</div>
-      <p>Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.</p>
-      <p>Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.</p>
-      <dl>
-        <dt>Web</dt>
-        <dd>The part of the Internet that contains websites and web pages</dd>
-        <dt>HTML</dt>
-        <dd>A markup language for creating web pages</dd>
-        <dt>CSS</dt>
-        <dd>A technology to make HTML look better</dd>
-      </dl>
-      <p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
-      <div class="is-4 title">Fourth level</div>
-      <p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
-      <pre>
-          &lt;!DOCTYPE html&gt;
-          &lt;html&gt;
-              &lt;head&gt;
-              &lt;title&gt;Hello World&lt;/title&gt;
-              &lt;/head&gt;
-              &lt;body&gt;
-              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-              Donec viverra nec nulla vitae mollis.&lt;/p&gt;
-              &lt;/body&gt;
-          &lt;/html&gt;
-          </pre>
-      <p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
-      <table>
-        <tr>
-          <td>Header</td>
-          <td>Header</td>
-        </tr>
-        <tr>
-          <td>cell</td>
-          <td>cell</td>
-        </tr>
-        <tr>
-          <td>cell</td>
-          <td>cell</td>
-        </tr>
-        <tr>
-          <td>cell</td>
-          <td>cell</td>
-        </tr>
-        <tr>
-          <td>cell</td>
-          <td>cell</td>
-        </tr>
-        <tr>
-          <td>cell</td>
-          <td>cell</td>
-        </tr>
-      </table>
-      <p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
-      <div class="is-5 title">Fifth level</div>
-      <p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
-      <figure>
-        <img src="./img/photo-1572958731731-2b7fdb0a9818.jpg">
-        <img src="./img/photo-1574281852611-b2f04c86a520.jpg">
-        <img src="./img/photo-1575023615386-1554d895d09d.jpg">
-        <figcaption>
-          Figure 1: Some beautiful placeholders
-        </figcaption>
-      </figure>
-      <div class="is-6 title">Sixth level</div>
-      <p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
-    </div>
-  </div>
-
-  <div class="hero has-background-grey-light">
-    <div class="container features">
-      <div class="section-heading has-text-centered">
-        <div class="title is-2">Three key features</div>
-        <div class="subtitle is-5">We don't hide what we do</div>
-      </div>
-
-      <div class="columns">
-        <div class="column is-4">
-          <div class="card is-shady">
-            <div class="card-image has-text-centered">
-              <i class="fa fa-paw"></i>
+            <div class="subtitle has-text-white">
+              Would you like to get the latest news?
             </div>
-            <div class="card-content">
-              <div class="content">
-                <div>Tristique senectus et netus et.</div>
-                <p>Purus semper eget duis at tellus at urna condimentum mattis. Non blandit massa enim nec. Integer enim neque volutpat ac tincidunt vitae semper quis. Accumsan tortor posuere ac ut consequat semper viverra nam.</p>
-                <p><a>Learn more</a></p>
-              </div>
+            <div class="box">
+              <form class="field is-grouped">
+                <p class="control is-expanded">
+                  <label for="notify-email" class="visually-hidden"
+                    >Enter Email
+                  </label>
+                  <input
+                    id="notify-email"
+                    name="email"
+                    type="text"
+                    class="input"
+                  />
+                </p>
+                <p class="control">
+                  <button type="submit" class="button is-info">
+                    Notify Me
+                  </button>
+                </p>
+              </form>
             </div>
           </div>
         </div>
+      </div>
+    </header>
 
-        <div class="column is-4">
-          <div class="card is-shady">
-            <div class="card-image has-text-centered">
-              <i class="fab fa-empire"></i>
-            </div>
-            <div class="card-content">
-              <div class="content">
-                <div>Tempor orci dapibus ultrices in.</div>
-                <p>Ut venenatis tellus in metus vulputate. Amet consectetur adipiscing elit pellentesque. Sed arcu non odio euismod lacinia at quis risus. Faucibus turpis in eu mi bibendum neque egestas cmonsu songue. Phasellus vestibulum lorem
-                  sed risus.</p>
-                <p><a>Learn more</a></p>
-              </div>
-            </div>
-          </div>
+    <main class="section" id="about">
+      <a href="#keyFeatures" class="visually-hidden" tabindex="0">
+        Skip Section About
+      </a>
+      <div class="section-heading has-text-centered">
+        <h2 class="title is-2">About Us</h2>
+        <h5 class="subtitle is-5">We of all trades, master of "some"</h5>
+        <div class="container">
+          <p>
+            Web developers with more than <strong>4 years</strong> of
+            well-rounded experience with a degree in the field of
+            <strong>Computer Science</strong>, extensive knowledge of modern Web
+            techniques and love for <strong>Coffee</strong>. Looking for an
+            opportunity to work and upgrade, as well as being involved in an
+            organization that believes in gaining a competitive edge and giving
+            back to the community.
+          </p>
         </div>
+      </div>
 
-        <div class="column is-4">
-          <div class="card is-shady">
-            <div class="card-image has-text-centered">
-              <i class="fab fa-apple"></i>
-            </div>
-            <div class="card-content">
-              <div class="content">
-                <div> Leo integer malesuada nunc vel risus. </div>
-                <p>Imperdiet dui accumsan sit amet nulla facilisi morbi. Fusce ut placerat orci nulla pellentesque dignissim enim. Libero id faucibus nisl tincidunt eget nullam. Commodo viverra maecenas accumsan lacus vel facilisis.</p>
-                <p><a>Learn more</a></p>
-              </div>
-            </div>
-          </div>
+      <div class="content container">
+        <h1 class="is-1 title">Hello World</h1>
+        <p>
+          Lorem ipsum<sup><a href="#" tabindex="0">[1]</a></sup> dolor sit amet,
+          consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend
+          gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut
+          vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel,
+          interdum mattis neque. Sub<sub>script</sub> works as well!
+        </p>
+        <h2 class="is-2 title">Second level</h2>
+        <p>
+          Curabitur accumsan turpis pharetra
+          <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus
+          mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus
+          venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus
+          facilisis. Donec at dignissim dui. Ut et neque nisl.
+        </p>
+        <ul>
+          <li>- In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+          <li>- Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+          <li>
+            - Aliquam nec felis in sapien venenatis viverra fermentum nec
+            lectus.
+          </li>
+          <li>- Ut non enim metus.</li>
+        </ul>
+        <h3 class="is-3 title">Third level</h3>
+        <p>
+          Quisque ante lacus, malesuada ac auctor vitae, congue
+          <a href="#" tabindex="0">non ante</a>. Phasellus lacus ex, semper ac
+          tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
+        </p>
+        <ol class="ol-list">
+          <li>Donec blandit a lorem id convallis.</li>
+          <li>Cras gravida arcu at diam gravida gravida.</li>
+          <li>Integer in volutpat libero.</li>
+          <li>Donec a diam tellus.</li>
+          <li>Aenean nec tortor orci.</li>
+          <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
+          <li>Vivamus maximus ultricies pulvinar.</li>
+        </ol>
+        <div class="blockquote">
+          Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero
+          hendrerit ipsum, ut blandit est tellus sit amet turpis.
         </div>
+        <p>
+          Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
+          <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque
+          consectetur, et lobortis nisi molestie.
+        </p>
+        <p>
+          Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec
+          mattis vulputate risus in luctus. Maecenas vestibulum interdum
+          commodo.
+        </p>
+        <dl>
+          <dt>Web</dt>
+          <dd>The part of the Internet that contains websites and web pages</dd>
+          <dt>HTML</dt>
+          <dd>A markup language for creating web pages</dd>
+          <dt>CSS</dt>
+          <dd>A technology to make HTML look better</dd>
+        </dl>
+        <p>
+          Suspendisse egestas sapien non felis placerat elementum. Morbi tortor
+          nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla
+          facilisi. Nullam ac erat ante.
+        </p>
+        <h4 class="is-4 title">Fourth level</h4>
+        <p>
+          Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac.
+          Mauris euismod metus a tellus laoreet, at elementum ex efficitur.
+        </p>
+        <pre>
+		              &lt;!DOCTYPE html&gt;
+		              &lt;html&gt;
+		                  &lt;head&gt;
+		                  &lt;title&gt;Hello World&lt;/title&gt;
+		                  &lt;/head&gt;
+		                  &lt;body&gt;
+		                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+		                  Donec viverra nec nulla vitae mollis.&lt;/p&gt;
+		                  &lt;/body&gt;
+		              &lt;/html&gt;
+		              </pre
+        >
+        <p>
+          Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus
+          non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est
+          porta condimentum in eu justo. Nulla id iaculis sapien.
+        </p>
+        <table>
+          <thead>
+            <tr>
+              <th>Header</th>
+              <th>Header</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>cell</td>
+              <td>cell</td>
+            </tr>
+            <tr>
+              <td>cell</td>
+              <td>cell</td>
+            </tr>
+            <tr>
+              <td>cell</td>
+              <td>cell</td>
+            </tr>
+            <tr>
+              <td>cell</td>
+              <td>cell</td>
+            </tr>
+            <tr>
+              <td>cell</td>
+              <td>cell</td>
+            </tr>
+          </tbody>
+        </table>
+        <p>
+          Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc,
+          blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac
+          nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet
+          ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus
+          laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc
+          ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh
+          in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus
+          vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam
+          pharetra varius metus non pellentesque.
+        </p>
+        <h5 class="is-5 title">Fifth level</h5>
+        <p>
+          Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt
+          ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus
+          elit volutpat porta. Phasellus molestie diam vel nisi sodales, a
+          eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin
+          odio.
+        </p>
+        <figure>
+          <img
+            src="./img/photo-1572958731731-2b7fdb0a9818.jpg"
+            alt="beautiful forest"
+          />
+          <img
+            src="./img/photo-1574281852611-b2f04c86a520.jpg"
+            alt="beautiful rings"
+          />
+          <img
+            src="./img/photo-1575023615386-1554d895d09d.jpg"
+            alt="Christmas balls"
+          />
+          <figcaption>Figure 1: Some beautiful placeholders</figcaption>
+        </figure>
+        <h6 class="is-6 title">Sixth level</h6>
+        <p>
+          Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar
+          lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non
+          tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis
+          enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec
+          consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum
+          tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus
+          metus.
+        </p>
       </div>
-    </div>
-  </div>
+    </main>
 
-  <div class="hero is-info">
-    <div class="hero-body">
-      <div class="container">
-        <div class="title">List of topics</div>
-        <div class="subtitle">We are always in touch we the outside world</div>
-      </div>
-    </div>
-    <div class="tabs is-boxed is-centered main-menu" id="nav">
-      <ul>
-        <li data-target="pane-1" id="1" class="is-active">
-          <a>
-            <span class="icon is-small"><i class="fa fa-image"></i></span>
-            <span>Pictures</span>
-          </a>
-        </li>
-        <li data-target="pane-3" id="3">
-          <a>
-            <span class="icon is-small"><i class="fab fa-superpowers"></i></span>
-            <span>Team</span>
-          </a>
-        </li>
-        <li data-target="pane-4" id="4">
-          <a>
-            <span class="icon is-small"><i class="fa fa-film"></i></span>
-            <span>Video</span>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
+    <section class="hero has-background-grey-light" id="keyFeatures">
+      <a href="#topics" class="visually-hidden" tabindex="0">
+        Skip Section Key Features
+      </a>
+      <div class="container features">
+        <div class="section-heading has-text-centered">
+          <h2 class="title is-2">Three key features</h2>
+          <h5 class="subtitle is-5">We don't hide what we do</h5>
+        </div>
 
-  <div class="tab-content container">
-    <div class="tab-pane is-active" id="pane-1" class="level">
-      <div class="container">
-        <div class="columns features">
+        <div class="columns">
           <div class="column is-4">
-            <div class="card">
-              <div class="card-image">
-                <div class="image is-4by3">
-                  <img src="./img/tab-1.jpg" class="modal-button" data-target="modal-image1">
-                </div>
+            <div class="card is-shady">
+              <div class="card-image has-text-centered">
+                <i class="fa fa-paw"></i>
               </div>
               <div class="card-content">
                 <div class="content">
-                  <div>Click on image above</div>
-                  <p>Purus semper eget duis at tellus at urna condimentum mattis. Non blandit massa enim nec. Integer enim neque volutpat ac tincidunt vitae semper quis. Accumsan tortor posuere ac ut consequat semper viverra nam.</p>
-                  <span class="button is-link modal-button" data-target="modal-image1">Image modal</span>
+                  <div>Tristique senectus et netus et.</div>
+                  <p>
+                    Purus semper eget duis at tellus at urna condimentum mattis.
+                    Non blandit massa enim nec. Integer enim neque volutpat ac
+                    tincidunt vitae semper quis. Accumsan tortor posuere ac ut
+                    consequat semper viverra nam.
+                  </p>
+                  <p><a href="#" tabindex="0">Learn more</a></p>
                 </div>
               </div>
             </div>
           </div>
+
           <div class="column is-4">
-            <div class="card">
-              <div class="card-image">
-                <div class="image is-4by3">
-                  <img src="./img/tab-2.jpg">
-                </div>
+            <div class="card is-shady">
+              <div class="card-image has-text-centered">
+                <i class="fab fa-empire"></i>
               </div>
               <div class="card-content">
                 <div class="content">
                   <div>Tempor orci dapibus ultrices in.</div>
-                  <p>Ut venenatis tellus in metus vulputate. Amet consectetur adipiscing elit pellentesque. Sed arcu non odio euismod lacinia at quis risus. Faucibus turpis in eu mi bibendum neque egestas cmonsu songue. Phasellus vestibulum lorem
-                    sed risus.</p>
-                  <span class="button is-link modal-button" data-target="modal-card">Modal Card</span>
+                  <p>
+                    Ut venenatis tellus in metus vulputate. Amet consectetur
+                    adipiscing elit pellentesque. Sed arcu non odio euismod
+                    lacinia at quis risus. Faucibus turpis in eu mi bibendum
+                    neque egestas cmonsu songue. Phasellus vestibulum lorem sed
+                    risus.
+                  </p>
+                  <p><a href="#" tabindex="0">Learn more</a></p>
                 </div>
               </div>
             </div>
           </div>
-          <div class="column is-4 modal-button" data-target="modal-image">
-            <div class="card">
-              <div class="card-image">
-                <div class="image is-4by3">
-                  <img src="./img/tab-3.jpg" class="modal-button" data-target="modal-image2">
-                </div>
+
+          <div class="column is-4">
+            <div class="card is-shady">
+              <div class="card-image has-text-centered">
+                <i class="fab fa-apple"></i>
               </div>
               <div class="card-content">
                 <div class="content">
-                  <div>Click anywhere on card</div>
-                  <p>Imperdiet dui accumsan sit amet nulla facilisi morbi. Fusce ut placerat orci nulla pellentesque dignissim enim. Libero id faucibus nisl tincidunt eget nullam. Commodo viverra maecenas accumsan lacus vel facilisis.</p>
-                  <span class="button is-link modal-button" data-target="modal-image2">Image modal</span>
+                  <div>Leo integer malesuada nunc vel risus.</div>
+                  <p>
+                    Imperdiet dui accumsan sit amet nulla facilisi morbi. Fusce
+                    ut placerat orci nulla pellentesque dignissim enim. Libero
+                    id faucibus nisl tincidunt eget nullam. Commodo viverra
+                    maecenas accumsan lacus vel facilisis.
+                  </p>
+                  <p><a href="#" tabindex="0">Learn more</a></p>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </section>
 
-    <div class="tab-pane" id="pane-3">
-      <div class="columns medias">
-        <div class="column">
-          <div class="media">
-            <div class="media-left">
-              <i class="fab fa-github-square fa-4x"></i>
-            </div>
-            <div class="media-content">
-              <div class="content">
-                <p>
-                  <a><b>Dominic Ipsum</b></a>
-                  <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
-                </p>
+    <section class="hero is-info" id="topics">
+      <div class="hero-body">
+        <div class="container">
+          <h2 class="title">List of topics</h2>
+          <h5 class="subtitle">We are always in touch we the outside world</h5>
+        </div>
+      </div>
+      <div class="tabs is-boxed is-centered main-menu" id="nav">
+        <ul>
+          <li data-target="pane-1" id="1" class="is-active">
+            <a href="#1" tabindex="0">
+              <span class="icon is-small"><i class="fa fa-image"></i></span>
+              <span>Pictures</span>
+            </a>
+          </li>
+          <li data-target="pane-2" id="2">
+            <a href="#2" tabindex="0">
+              <span class="icon is-small"
+                ><i class="fab fa-superpowers"></i
+              ></span>
+              <span>Team</span>
+            </a>
+          </li>
+          <li data-target="pane-3" id="3">
+            <a href="#3" tabindex="0">
+              <span class="icon is-small"><i class="fa fa-film"></i></span>
+              <span>Video</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="tab-content container">
+      <div class="level tab-pane is-active" id="pane-1">
+        <div class="container">
+          <div class="columns features">
+            <div class="column is-4">
+              <div class="card">
+                <div class="card-image">
+                  <div class="image is-4by3">
+                    <img
+                      src="./img/tab-1.jpg"
+                      class="modal-button"
+                      data-target="modal-image1"
+                      alt="Drone controller"
+                    />
+                  </div>
+                </div>
+                <div class="card-content">
+                  <div class="content">
+                    <div>Click on image above</div>
+                    <p>
+                      Purus semper eget duis at tellus at urna condimentum
+                      mattis. Non blandit massa enim nec. Integer enim neque
+                      volutpat ac tincidunt vitae semper quis. Accumsan tortor
+                      posuere ac ut consequat semper viverra nam.
+                    </p>
+                    <span
+                      class="button is-link modal-button"
+                      data-target="modal-image1"
+                      >Image modal</span
+                    >
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="media">
-            <div class="media-left">
-              <i class="fab fa-empire fa-4x"></i>
+            <div class="column is-4">
+              <div class="card">
+                <div class="card-image">
+                  <div class="image is-4by3">
+                    <img src="./img/tab-2.jpg" alt="Beach" />
+                  </div>
+                </div>
+                <div class="card-content">
+                  <div class="content">
+                    <div>Tempor orci dapibus ultrices in.</div>
+                    <p>
+                      Ut venenatis tellus in metus vulputate. Amet consectetur
+                      adipiscing elit pellentesque. Sed arcu non odio euismod
+                      lacinia at quis risus. Faucibus turpis in eu mi bibendum
+                      neque egestas cmonsu songue. Phasellus vestibulum lorem
+                      sed risus.
+                    </p>
+                    <span
+                      class="button is-link modal-button"
+                      data-target="modal-card"
+                      >Modal Card</span
+                    >
+                  </div>
+                </div>
+              </div>
             </div>
-            <div class="media-content">
-              <div class="content">
-                <p>
-                  <a><b>Cassie Ipsum</b></a>
-                  <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
-                </p>
+            <div class="column is-4 modal-button" data-target="modal-image">
+              <div class="card">
+                <div class="card-image">
+                  <div class="image is-4by3">
+                    <img
+                      src="./img/tab-3.jpg"
+                      class="modal-button"
+                      data-target="modal-image2"
+                      alt="Rainbow"
+                    />
+                  </div>
+                </div>
+                <div class="card-content">
+                  <div class="content">
+                    <div>Click anywhere on card</div>
+                    <p>
+                      Imperdiet dui accumsan sit amet nulla facilisi morbi.
+                      Fusce ut placerat orci nulla pellentesque dignissim enim.
+                      Libero id faucibus nisl tincidunt eget nullam. Commodo
+                      viverra maecenas accumsan lacus vel facilisis.
+                    </p>
+                    <span
+                      class="button is-link modal-button"
+                      data-target="modal-image2"
+                      >Image modal</span
+                    >
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="column">
-          <div class="media">
-            <div class="media-left">
-              <i class="fab fa-ravelry fa-4x"></i>
+      </div>
+
+      <div class="tab-pane" id="pane-2">
+        <div class="columns medias">
+          <div class="column">
+            <div class="media">
+              <div class="media-left">
+                <i class="fab fa-github-square fa-4x"></i>
+              </div>
+              <div class="media-content">
+                <div class="content">
+                  <p>
+                    <a href="#" tabindex="0"><strong>Dominic Ipsum</strong></a>
+                    <br />
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Aenean efficitur sit amet massa fringilla egestas. Nullam
+                    condimentum luctus turpis.
+                  </p>
+                </div>
+              </div>
             </div>
-            <div class="media-content">
-              <div class="content">
-                <p>
-                  <a><b>Avery Ipsum</b></a>
-                  <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
-                </p>
+            <div class="media">
+              <div class="media-left">
+                <i class="fab fa-empire fa-4x"></i>
+              </div>
+              <div class="media-content">
+                <div class="content">
+                  <p>
+                    <a href="#" tabindex="0"><strong>Cassie Ipsum</strong></a>
+                    <br />
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Aenean efficitur sit amet massa fringilla egestas. Nullam
+                    condimentum luctus turpis.
+                  </p>
+                </div>
               </div>
             </div>
           </div>
-          <div class="media">
-            <div class="media-left">
-              <i class="fab fa-github-alt fa-4x"></i>
+          <div class="column">
+            <div class="media">
+              <div class="media-left">
+                <i class="fab fa-ravelry fa-4x"></i>
+              </div>
+              <div class="media-content">
+                <div class="content">
+                  <p>
+                    <a href="#" tabindex="0"><strong>Avery Ipsum</strong></a>
+                    <br />
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Aenean efficitur sit amet massa fringilla egestas. Nullam
+                    condimentum luctus turpis.
+                  </p>
+                </div>
+              </div>
             </div>
-            <div class="media-content">
-              <div class="content">
-                <p>
-                  <a><b>io Ipsum</b></a>
-                  <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
-                </p>
+            <div class="media">
+              <div class="media-left">
+                <i class="fab fa-github-alt fa-4x"></i>
+              </div>
+              <div class="media-content">
+                <div class="content">
+                  <p>
+                    <a href="#" tabindex="0"><strong>io Ipsum</strong></a>
+                    <br />
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Aenean efficitur sit amet massa fringilla egestas. Nullam
+                    condimentum luctus turpis.
+                  </p>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="tab-pane" id="pane-4">
-      <div class="columns is-centered">
-        <div class="column is-three-quarters">
-          <div class="title has-text-centered">Inspired video</div>
-          <div class="embed-container image">
-            <iframe src="https://player.vimeo.com/video/261794608" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
+      <div class="tab-pane" id="pane-3">
+        <div class="columns is-centered">
+          <div class="column is-three-quarters">
+            <h2 class="title has-text-centered">Inspired video</h2>
+            <div class="embed-container image">
+              <iframe
+                src="https://player.vimeo.com/video/261794608"
+                allowfullscreen
+              ></iframe>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </div>
+    </section>
 
-  <div class="section has-background-grey-lighter">
-    <div class="container has-text-centered">
+    <section class="section has-background-grey-lighter">
+      <div class="container has-text-centered">
         <div class="section-heading has-text-centered">
-          <div class="title is-2">Upcoming events</div>
-          <div class="subtitle is-5">Outcoming dates for the best options</div>
+          <h2 class="title is-2">Upcoming events</h2>
+          <h5 class="subtitle is-5">Outcoming dates for the best options</h5>
         </div>
 
-      <div class="tile is-ancestor">
-        <div class="tile is-parent">
-          <div class="tile is-child box">
-            <div class="image">
-              <img src="./img/web-access-summit-eventbrite.jpg">
+        <div class="tile is-ancestor">
+          <div class="tile is-parent">
+            <div class="tile is-child box">
+              <div class="image">
+                <img
+                  src="./img/web-access-summit-eventbrite.jpg"
+                  alt="New York Event"
+                />
+              </div>
+              <h2 class="title">New York</h2>
+              <h5 class="subtitle">Fri 27 Nov 2016</h5>
+              <button class="button">Buy Tickets</button>
             </div>
-            <p class="title">New York</p>
-            <p class="subtitle">Fri 27 Nov 2016</p>
-            <a class="button">Buy Tickets</a>
           </div>
-        </div>
-        <div class="tile is-parent">
-          <div class="tile is-child box">
-            <div class="image">
-              <img src="./img/access.jpg">
+          <div class="tile is-parent">
+            <div class="tile is-child box">
+              <div class="image">
+                <img src="./img/access.jpg" alt="Los Angeles Event" />
+              </div>
+              <h2 class="title">Los Angeles</h2>
+              <h5 class="subtitle">Fri 27 Nov 2016</h5>
+              <button class="button">Buy Tickets</button>
             </div>
-            <p class="title">Los Angeles</p>
-            <p class="subtitle">Fri 27 Nov 2016</p>
-            <a class="button">Buy Tickets</a>
           </div>
-        </div>
-        <div class="tile is-parent">
-          <div class="tile is-child box">
-            <div class="image">
-              <img src="./img/dotcss-2019.jpg">
+          <div class="tile is-parent">
+            <div class="tile is-child box">
+              <div class="image">
+                <img src="./img/dotcss-2019.jpg" alt="Mexico event" />
+              </div>
+              <h2 class="title">Mexico</h2>
+              <h5 class="subtitle">Fri 27 Nov 2016</h5>
+              <button class="button">Buy Tickets</button>
             </div>
-            <p class="title">Mexico</p>
-            <p class="subtitle">Fri 27 Nov 2016</p>
-            <a class="button">Buy Tickets</a>
           </div>
         </div>
-      </div>
 
-      <div class="tile is-ancestor">
-        <div class="tile is-parent">
-          <div class="tile is-child box">
-            <div class="image">
-              <img src="./img/images.jpg">
+        <div class="tile is-ancestor">
+          <div class="tile is-parent">
+            <div class="tile is-child box">
+              <div class="image">
+                <img src="./img/images.jpg" alt="Paris Event" />
+              </div>
+              <h2 class="title">Paris</h2>
+              <h5 class="subtitle">Fri 27 Nov 2016</h5>
+              <button class="button">Buy Tickets</button>
             </div>
-            <p class="title">Paris</p>
-            <p class="subtitle">Fri 27 Nov 2016</p>
-            <a class="button">Buy Tickets</a>
           </div>
-        </div>
-        <div class="tile is-parent">
-          <div class="tile is-child box">
-            <div class="image">
-              <img src="./img/mid_300_33455472_313632022502906_5761920685983137792_n.png">
+          <div class="tile is-parent">
+            <div class="tile is-child box">
+              <div class="image">
+                <img
+                  src="./img/mid_300_33455472_313632022502906_5761920685983137792_n.png"
+                  alt="Minsk event"
+                />
+              </div>
+              <h2 class="title">Minsk</h2>
+              <h5 class="subtitle">Fri 27 Nov 2016</h5>
+              <button class="button">Buy Tickets</button>
             </div>
-            <p class="title">Minsk</p>
-            <p class="subtitle">Fri 27 Nov 2016</p>
-            <a class="button">Buy Tickets</a>
           </div>
-        </div>
-        <div class="tile is-parent">
-          <div class="tile is-child box">
-            <div class="image">
-              <img src="./img/access.jpg">
+          <div class="tile is-parent">
+            <div class="tile is-child box">
+              <div class="image">
+                <img src="./img/access.jpg" alt="London event" />
+              </div>
+              <h2 class="title">London</h2>
+              <h5 class="subtitle">Fri 27 Nov 2016</h5>
+              <button class="button">Buy Tickets</button>
             </div>
-            <p class="title">London</p>
-            <p class="subtitle">Fri 27 Nov 2016</p>
-            <a class="button">Buy Tickets</a>
           </div>
         </div>
       </div>
-    </div>
-  </div>
+    </section>
 
-  <div class="section">
-    <div class="section-heading has-text-centered">
-      <div class="title is-2">Services</div>
-      <div class="subtitle is-5">What can I do for you?</div>
-    </div>
-    <div class="container">
-      <div class="columns">
-        <div class="column">
-          <a class="box">
-            <div class="content">
-              <div class="title is-5">Front End Web Development</div>
-              Develop Front End using latest standards with HTML5/CSS3 with added funtionality using JavaScript and
-              Vue.js.
-            </div>
-          </a>
-        </div>
-        <div class="column">
-          <a class="box">
-            <div class="content">
-              <div class="title is-5">Back End Web Development</div>
-              Develop Back End application/service using Node.js or ASP .NET and SQL server or Mongo DB databases.
-            </div>
-          </a>
-        </div>
-      </div>
-
-      <div class="columns">
-        <div class="column">
-          <a class="box">
-            <div class="content">
-              <div class="title is-5">Front End Web Development</div>
-              Develop Front End using latest standards with HTML5/CSS3 with added funtionality using JavaScript and
-              Vue.js.
-            </div>
-          </a>
-        </div>
-        <div class="column">
-          <a class="box">
-            <div class="content">
-              <div class="title is-5">Back End Web Development</div>
-              Develop Back End application/service using Node.js or ASP .NET and SQL server or Mongo DB databases.
-            </div>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="section has-background-grey-lighter">
-    <div class="container">
+    <section class="section" id="services">
       <div class="section-heading has-text-centered">
-        <div class="title is-2">Photos from past events</div>
+        <h2 class="title is-2">Services</h2>
+        <h5 class="subtitle is-5">What can I do for you?</h5>
       </div>
-
-      <div class="container portfolio-container">
+      <div class="container">
         <div class="columns">
-          <div class="column is-4">
-            <div class="card">
-              <div class="card-header">
-                <p class="card-header-title">
-                  <span>Admin <small>(Light)</small></span>
-                  <span class="is-pulled-right">
-                    <a>
-                      <span class="tag is-default">v0.7.2</span>
-                    </a>
-                    <span class="tag is-default">Desktop</span>
-                    <span class="tag is-danger">WIP</span>
-                  </span>
-                </p>
-              </div>
-              <div class="card-content">
-                <div class="image">
-                  <img src="./img/ev-1.jpeg">
-                </div>
-              </div>
-              <div class="card-footer">
-                <a class="card-footer-item">Preview</a>
-                <a class="card-footer-item">Source Code</a>
-              </div>
-            </div>
-          </div>
-          <div class="column is-4">
-            <div class="card">
-              <div class="card-header">
-                <p class="card-header-title">
-                  <span>Cards</span>
-                  <span class="is-pulled-right">
-                    <a>
-                      <span class="tag is-default">v0.7.2</span>
-                    </a>
-                    <span class="tag is-default">Desktop</span>
-                    <span class="tag is-default">?</span>
-                  </span>
-                </p>
-              </div>
-              <div class="card-content">
-                <div class="image">
-                  <img src="./img/ev-2.jpeg">
-                </div>
+          <div class="column">
+            <a target="_blank" class="box" href="#services" tabindex="0">
+              <span class="visually-hidden"> opens in a new window </span>
+              <div class="content">
+                <h5 class="title is-5">Front End Web Development</h5>
+                Develop Front End using latest standards with HTML5/CSS3 with
+                added funtionality using JavaScript and Vue.js.
               </div>
-              <div class="card-footer">
-                <a class="card-footer-item">Preview</a>
-                <a class="card-footer-item">Source Code</a>
-                </div>
-            </div>
+            </a>
           </div>
-          <div class="column is-4">
-            <div class="card">
-              <div class="card-header">
-                <p class="card-header-title">
-                  <span>Forum</span>
-                  <span class="is-pulled-right">
-                    <a>
-                      <span class="tag is-default">v0.7.2</span>
-                    </a>
-                    <span class="tag is-default">Desktop</span>
-                    <span class="tag is-default">Mobile</span>
-                  </span>
-                </p>
-              </div>
-              <div class="card-content">
-                <div class="image">
-                  <img src="./img/ev-3.jpeg">
-                </div>
-              </div>
-              <div class="card-footer">
-                <a class="card-footer-item">Preview</a>
-                <a class="card-footer-item">Source Code</a>
+          <div class="column">
+            <a target="_blank" class="box" href="#services" tabindex="0">
+              <span class="visually-hidden"> opens in a new window </span>
+              <div class="content">
+                <h5 class="title is-5">Back End Web Development</h5>
+                Develop Back End application/service using Node.js or ASP .NET
+                and SQL server or Mongo DB databases.
               </div>
-            </div>
+            </a>
           </div>
         </div>
+
         <div class="columns">
-          <div class="column is-4">
-            <div class="card">
-              <div class="card-header">
-                <p class="card-header-title">
-                  <span>InstaAlbum</span>
-                  <span class="is-pulled-right">
-                    <a>
-                      <span class="tag is-default">v0.7.2</span>
-                    </a>
-                    <span class="tag is-default">Desktop</span>
-                    <span class="tag is-default">Mobile</span>
-                  </span>
-                </p>
-              </div>
-              <div class="card-content">
-                <div class="image">
-                  <img src="./img/ev-4.jpeg">
-                </div>
-              </div>
-              <div class="card-footer">
-                <a class="card-footer-item">Preview</a>
-                <a class="card-footer-item">Source Code</a>
-              </div>
-            </div>
-          </div>
-          <div class="column is-4">
-            <div class="card">
-              <div class="card-header">
-                <p class="card-header-title">
-                  <span>Landing</span>
-                  <span class="is-pulled-right">
-                    <a>
-                      <span class="tag is-default">v0.7.2</span>
-                    </a>
-                    <span class="tag is-default">Desktop</span>
-                    <span class="tag is-default">Mobile</span>
-                  </span>
-                </p>
-              </div>
-              <div class="card-content">
-                <div class="image">
-                  <img src="./img/ev-5.jpeg">
-                </div>
-              </div>
-              <div class="card-footer">
-                <a class="card-footer-item">Preview</a>
-                <a class="card-footer-item">Source Code</a>
+          <div class="column">
+            <a target="_blank" class="box" href="#services" tabindex="0">
+              <span class="visually-hidden"> opens in a new window </span>
+              <div class="content">
+                <h5 class="title is-5">Front End Web Development</h5>
+                Develop Front End using latest standards with HTML5/CSS3 with
+                added funtionality using JavaScript and Vue.js.
               </div>
-            </div>
+            </a>
           </div>
-          <div class="column is-4">
-            <div class="card">
-              <div class="card-header">
-                <p class="card-header-title">
-                  <span>Marketing</span>
-                  <span class="is-pulled-right">
-                    <a>
-                      <span class="tag is-default">v0.7.2</span>
-                    </a>
-                    <span class="tag is-default">Desktop</span>
-                    <span class="tag is-default">Mobile</span>
-                  </span>
-                </p>
-              </div>
-              <div class="card-content">
-                <div class="image">
-                  <img src="./img/ev-6.jpeg">
-                </div>
-              </div>
-              <div class="card-footer">
-                <a class="card-footer-item">Preview</a>
-                <a class="card-footer-item">Source Code</a>
+          <div class="column">
+            <a target="_blank" class="box" href="#services" tabindex="0">
+              <span class="visually-hidden"> opens in a new window </span>
+              <div class="content">
+                <h5 class="title is-5">Back End Web Development</h5>
+                Develop Back End application/service using Node.js or ASP .NET
+                and SQL server or Mongo DB databases.
               </div>
-            </div>
+            </a>
           </div>
         </div>
       </div>
-    </div>
-    </div>
-  </div>
-
-  <div class="section">
-    <div class="container">
-      <div class="section-heading has-text-centered">
-        <div class="title is-2">Forum</div>
-        <div class="subtitle is-5">Discuss any topic with no leaving this page</div>
-      </div>
+    </section>
 
-      <div class="columns">
-        <div class="column is-3">
-          <a class="button is-primary is-block is-alt is-large">New Post</a>
-          <div class="menu">
-            <ul class="menu-list forum-list">
-              <li><span class="tag is-primary is-medium">Dashboard</span></li>
-              <li><span class="tag is-link is-medium">Customers</span></li>
-              <li><span class="tag is-light is-danger is-medium">Authentication</span></li>
-              <li><span class="tag is-dark is-medium">Payments</span></li>
-              <li><span class="tag is-success is-medium">Transfers</span></li>
-              <li><span class="tag is-warning is-medium">Balance</span></li>
-              <li><span class="tag is-medium ">Question</span></li>
-            </ul>
-          </div>
+    <section class="section has-background-grey-lighter">
+      <div class="container">
+        <div class="section-heading has-text-centered">
+          <h2 class="title is-2">Photos from past events</h2>
         </div>
-        <div class="column is-9">
-          <div class="box content">
-            <div class="post">
-              <h4>How do you center a button in a box?</h4>
-              <div class="media">
-                <div class="media-left">
-                  <p class="image is-32x32">
-                    <img src="https://source.unsplash.com/random/64x64/?sig=300">
-                  </p>
+
+        <div class="container portfolio-container">
+          <div class="columns">
+            <div class="column is-4">
+              <div class="card">
+                <div class="card-header">
+                  <h4 class="card-header-title">
+                    <span>Admin <small>(Light)</small></span>
+                    <span class="is-pulled-right">
+                      <a href="#" tabindex="0">
+                        <span class="tag is-default">v0.7.2</span>
+                      </a>
+                      <span class="tag is-default">Desktop</span>
+                      <span class="tag is-danger">WIP</span>
+                    </span>
+                  </h4>
                 </div>
-                <div class="media-content">
-                  <div class="content">
-                    <p>
-                      <a>@jsmith</a> replied 34 minutes ago &nbsp;
-                      <span class="tag">Question</span>
-                    </p>
+                <div class="card-content">
+                  <div class="image">
+                    <img src="./img/ev-1.jpeg" alt="Admin" />
                   </div>
                 </div>
-                <div class="media-right">
-                  <span class="has-text-grey-light"><i class="fa fa-comments"></i> 1</span>
+                <div class="card-footer">
+                  <a class="card-footer-item">Preview</a>
+                  <a class="card-footer-item">Source Code</a>
                 </div>
               </div>
             </div>
-
-            <div class="post">
-              <h4>How can I make a button go full width?</h4>
-              <div class="media">
-                <div class="media-left">
-                  <p class="image is-32x32">
-                    <img src="https://source.unsplash.com/random/64x64/?sig=301">
-                  </p>
+            <div class="column is-4">
+              <div class="card">
+                <div class="card-header">
+                  <h4 class="card-header-title">
+                    <span>Cards</span>
+                    <span class="is-pulled-right">
+                      <a href="#" tabindex="0">
+                        <span class="tag is-default">v0.7.2</span>
+                      </a>
+                      <span class="tag is-default">Desktop</span>
+                      <span class="tag is-default">?</span>
+                    </span>
+                  </h4>
                 </div>
-                <div class="media-content">
-                  <div class="content">
-                    <p>
-                      <a>@red</a> replied 40 minutes ago &nbsp;
-                      <span class="tag">Question</span>
-                    </p>
+                <div class="card-content">
+                  <div class="image">
+                    <img src="./img/ev-2.jpeg" alt="Cards" />
                   </div>
                 </div>
-                <div class="media-right">
-                  <span class="has-text-grey-light"><i class="fa fa-comments"></i> 0</span>
+                <div class="card-footer">
+                  <a class="card-footer-item">Preview</a>
+                  <a class="card-footer-item">Source Code</a>
                 </div>
               </div>
             </div>
-
-            <div class="post">
-              <h4>TypeError: Data must be a string or a buffer when trying touse tabs</h4>
-              <div class="media">
-                <div class="media-left">
-                  <p class="image is-32x32">
-                    <img src="https://source.unsplash.com/random/64x64/?sig=302">
-                  </p>
+            <div class="column is-4">
+              <div class="card">
+                <div class="card-header">
+                  <h4 class="card-header-title">
+                    <span>Forum</span>
+                    <span class="is-pulled-right">
+                      <a href="#" tabindex="0">
+                        <span class="tag is-default">v0.7.2</span>
+                      </a>
+                      <span class="tag is-default">Desktop</span>
+                      <span class="tag is-default">Mobile</span>
+                    </span>
+                  </h4>
                 </div>
-                <div class="media-content">
-                  <div class="content">
-                    <p>
-                      <a>@jsmith</a> replied 53 minutes ago &nbsp;
-                      <span class="tag">Question</span>
-                    </p>
+                <div class="card-content">
+                  <div class="image">
+                    <img src="./img/ev-3.jpeg" alt="Forum" />
                   </div>
                 </div>
-                <div class="media-right">
-                  <span class="has-text-grey-light"><i class="fa fa-comments"></i> 13</span>
+                <div class="card-footer">
+                  <a class="card-footer-item">Preview</a>
+                  <a class="card-footer-item">Source Code</a>
                 </div>
               </div>
             </div>
-
-            <div class="post">
-              <h4>How to vertically center elements?</h4>
-              <div class="media">
-                <div class="media-left">
-                  <p class="image is-32x32">
-                    <img src="https://source.unsplash.com/random/64x64/?sig=303">
-                  </p>
+          </div>
+          <div class="columns">
+            <div class="column is-4">
+              <div class="card">
+                <div class="card-header">
+                  <h4 class="card-header-title">
+                    <span>InstaAlbum</span>
+                    <span class="is-pulled-right">
+                      <a href="#" tabindex="0">
+                        <span class="tag is-default">v0.7.2</span>
+                      </a>
+                      <span class="tag is-default">Desktop</span>
+                      <span class="tag is-default">Mobile</span>
+                    </span>
+                  </h4>
                 </div>
-                <div class="media-content">
-                  <div class="content">
-                    <p>
-                      <a>@brown</a> replied 3 hours ago &nbsp;
-                      <span class="tag">Question</span>
-                    </p>
+                <div class="card-content">
+                  <div class="image">
+                    <img src="./img/ev-4.jpeg" alt="InstaAlbum" />
                   </div>
                 </div>
-                <div class="media-right">
-                  <span class="has-text-grey-light"><i class="fa fa-comments"></i> 2</span>
+                <div class="card-footer">
+                  <a class="card-footer-item">Preview</a>
+                  <a class="card-footer-item">Source Code</a>
                 </div>
               </div>
             </div>
-
-            <div class="post">
-              <h4>I'm trying to use hamburger menu on css, but it doesn't work. What is wrong?</h4>
-              <div class="media">
-                <div class="media-left">
-                  <p class="image is-32x32">
-                    <img src="https://source.unsplash.com/random/64x64/?sig=304">
-                  </p>
+            <div class="column is-4">
+              <div class="card">
+                <div class="card-header">
+                  <h4 class="card-header-title">
+                    <span>Landing</span>
+                    <span class="is-pulled-right">
+                      <a href="#" tabindex="0">
+                        <span class="tag is-default">v0.7.2</span>
+                      </a>
+                      <span class="tag is-default">Desktop</span>
+                      <span class="tag is-default">Mobile</span>
+                    </span>
+                  </h4>
                 </div>
-                <div class="media-content">
-                  <div class="content">
-                    <p>
-                      <a>@hamburgler</a> replied 5 hours ago &nbsp;
-                      <span class="tag">Question</span>
-                    </p>
+                <div class="card-content">
+                  <div class="image">
+                    <img src="./img/ev-5.jpeg" alt="Landing" />
                   </div>
                 </div>
-                <div class="media-right">
-                  <span class="has-text-grey-light"><i class="fa fa-comments"></i> 2</span>
+                <div class="card-footer">
+                  <a class="card-footer-item">Preview</a>
+                  <a class="card-footer-item">Source Code</a>
                 </div>
               </div>
             </div>
-
-            <div class="post">
-              <h4>How to make tiles wrap with CSS?</h4>
-              <div class="media">
-                <div class="media-left">
-                  <p class="image is-32x32">
-                    <img src="https://source.unsplash.com/random/64x64/?sig=305">
-                  </p>
+            <div class="column is-4">
+              <div class="card">
+                <div class="card-header">
+                  <h4 class="card-header-title">
+                    <span>Marketing</span>
+                    <span class="is-pulled-right">
+                      <a href="#" tabindex="0">
+                        <span class="tag is-default">v0.7.2</span>
+                      </a>
+                      <span class="tag is-default">Desktop</span>
+                      <span class="tag is-default">Mobile</span>
+                    </span>
+                  </h4>
                 </div>
-                <div class="media-content">
-                  <div class="content">
-                    <p>
-                      <a>@rapper</a> replied 3 hours ago &nbsp;
-                      <span class="tag">Question</span>
-                    </p>
+                <div class="card-content">
+                  <div class="image">
+                    <img src="./img/ev-6.jpeg" alt="Marketing" />
                   </div>
                 </div>
-                <div class="media-right">
-                  <span class="has-text-grey-light"><i class="fa fa-comments"></i> 2</span>
+                <div class="card-footer">
+                  <a class="card-footer-item">Preview</a>
+                  <a class="card-footer-item">Source Code</a>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </div>
-
-  <div class="section has-background-light">
-    <div class="container">
-      <div class="section-heading has-text-centered">
-        <div class="title is-2">Contact us</div>
-        <div class="subtitle is-5">Don't hesitate, ask anything</div>
-      </div>
+    </section>
 
-      <form class="column is-half is-offset-one-quarter box">
-        <div class="field">
-          <label class="label">Name</label>
-          <div class="control">
-            <input class="input" type="text" placeholder="Text input">
-          </div>
+    <section class="section">
+      <div class="container">
+        <div class="section-heading has-text-centered">
+          <h2 class="title is-2">Forum</h2>
+          <h5 class="subtitle is-5">
+            Discuss any topic with no leaving this page
+          </h5>
         </div>
 
-        <div class="field">
-          <label class="label">Username</label>
-          <div class="control has-icons-left has-icons-right">
-            <input class="input is-success" type="text">
-            <span class="icon is-small is-left">
-              <i class="fas fa-user"></i>
-            </span>
-            <span class="icon is-small is-right">
-              <i class="fas fa-check"></i>
-            </span>
+        <div class="columns">
+          <div class="column is-3">
+            <a class="button is-primary is-block is-alt is-large">New Post</a>
+            <div class="menu">
+              <ul class="menu-list forum-list">
+                <li><span class="tag is-primary is-medium">Dashboard</span></li>
+                <li><span class="tag is-link is-medium">Customers</span></li>
+                <li>
+                  <span class="tag is-light is-danger is-medium"
+                    >Authentication</span
+                  >
+                </li>
+                <li><span class="tag is-dark is-medium">Payments</span></li>
+                <li><span class="tag is-success is-medium">Transfers</span></li>
+                <li><span class="tag is-warning is-medium">Balance</span></li>
+                <li><span class="tag is-medium">Question</span></li>
+              </ul>
+            </div>
           </div>
-          <p class="help is-success">This username is available</p>
-        </div>
+          <div class="column is-9">
+            <div class="box content">
+              <div class="post">
+                <h4>How do you center a button in a box?</h4>
+                <div class="media">
+                  <div class="media-left">
+                    <p class="image is-32x32">
+                      <img
+                        src="https://source.unsplash.com/random/64x64/?sig=300"
+                        alt="jsmith"
+                      />
+                    </p>
+                  </div>
+                  <div class="media-content">
+                    <div class="content">
+                      <p>
+                        <a href="#" tabindex="0">@jsmith</a> replied 34 minutes
+                        ago &nbsp;
+                        <span class="tag">Question</span>
+                      </p>
+                    </div>
+                  </div>
+                  <div class="media-right">
+                    <span class="has-text-grey-light"
+                      ><i class="fa fa-comments"></i> 1</span
+                    >
+                  </div>
+                </div>
+              </div>
 
-        <div class="field">
-          <label class="label">Email</label>
-          <div class="control has-icons-left has-icons-right">
-            <input class="input is-danger" type="email" placeholder="Email input" value="hello@">
-            <span class="icon is-small is-left">
-              <i class="fas fa-envelope"></i>
-            </span>
-            <span class="icon is-small is-right">
-              <i class="fas fa-exclamation-triangle"></i>
-            </span>
-          </div>
-          <p class="help is-danger">This email is invalid</p>
-        </div>
+              <div class="post">
+                <h4>How can I make a button go full width?</h4>
+                <div class="media">
+                  <div class="media-left">
+                    <p class="image is-32x32">
+                      <img
+                        src="https://source.unsplash.com/random/64x64/?sig=301"
+                        alt="red"
+                      />
+                    </p>
+                  </div>
+                  <div class="media-content">
+                    <div class="content">
+                      <p>
+                        <a href="#" tabindex="0">@red</a> replied 40 minutes ago
+                        &nbsp;
+                        <span class="tag">Question</span>
+                      </p>
+                    </div>
+                  </div>
+                  <div class="media-right">
+                    <span class="has-text-grey-light"
+                      ><i class="fa fa-comments"></i> 0</span
+                    >
+                  </div>
+                </div>
+              </div>
 
-        <div class="field">
-          <label class="label">Subject</label>
-          <div class="control">
-            <div class="select">
-              <select>
-                <option>Select dropdown</option>
-                <option>With options</option>
-              </select>
-            </div>
-          </div>
-        </div>
+              <div class="post">
+                <h4>
+                  TypeError: Data must be a string or a buffer when trying touse
+                  tabs
+                </h4>
+                <div class="media">
+                  <div class="media-left">
+                    <p class="image is-32x32">
+                      <img
+                        src="https://source.unsplash.com/random/64x64/?sig=302"
+                        alt="jsmith"
+                      />
+                    </p>
+                  </div>
+                  <div class="media-content">
+                    <div class="content">
+                      <p>
+                        <a href="#" tabindex="0">@jsmith</a> replied 53 minutes
+                        ago &nbsp;
+                        <span class="tag">Question</span>
+                      </p>
+                    </div>
+                  </div>
+                  <div class="media-right">
+                    <span class="has-text-grey-light"
+                      ><i class="fa fa-comments"></i> 13</span
+                    >
+                  </div>
+                </div>
+              </div>
 
-        <div class="field">
-          <label class="label">Message</label>
-          <div class="control">
-            <textarea class="textarea" placeholder="Textarea"></textarea>
-          </div>
-        </div>
+              <div class="post">
+                <h4>How to vertically center elements?</h4>
+                <div class="media">
+                  <div class="media-left">
+                    <p class="image is-32x32">
+                      <img
+                        src="https://source.unsplash.com/random/64x64/?sig=303"
+                        alt="brown"
+                      />
+                    </p>
+                  </div>
+                  <div class="media-content">
+                    <div class="content">
+                      <p>
+                        <a href="#" tabindex="0">@brown</a> replied 3 hours ago
+                        &nbsp;
+                        <span class="tag">Question</span>
+                      </p>
+                    </div>
+                  </div>
+                  <div class="media-right">
+                    <span class="has-text-grey-light"
+                      ><i class="fa fa-comments"></i> 2</span
+                    >
+                  </div>
+                </div>
+              </div>
 
-        <div class="field">
-          <div class="control">
-            <label class="checkbox">
-              <input type="checkbox">
-              I agree to the <a>terms and conditions</a>
-            </label>
-          </div>
-        </div>
+              <div class="post">
+                <h4>
+                  I'm trying to use hamburger menu on css, but it doesn't work.
+                  What is wrong?
+                </h4>
+                <div class="media">
+                  <div class="media-left">
+                    <p class="image is-32x32">
+                      <img
+                        src="https://source.unsplash.com/random/64x64/?sig=304"
+                        alt="hamburgler"
+                      />
+                    </p>
+                  </div>
+                  <div class="media-content">
+                    <div class="content">
+                      <p>
+                        <a href="#" tabindex="0">@hamburgler</a> replied 5 hours
+                        ago &nbsp;
+                        <span class="tag">Question</span>
+                      </p>
+                    </div>
+                  </div>
+                  <div class="media-right">
+                    <span class="has-text-grey-light"
+                      ><i class="fa fa-comments"></i> 2</span
+                    >
+                  </div>
+                </div>
+              </div>
 
-        <div class="field">
-          <div class="control">
-            <label class="radio">
-              <input type="radio" name="question">
-              Yes
-            </label>
-            <label class="radio">
-              <input type="radio" name="question">
-              No
-            </label>
+              <div class="post">
+                <h4>How to make tiles wrap with CSS?</h4>
+                <div class="media">
+                  <div class="media-left">
+                    <p class="image is-32x32">
+                      <img
+                        src="https://source.unsplash.com/random/64x64/?sig=305"
+                        alt="rapper"
+                      />
+                    </p>
+                  </div>
+                  <div class="media-content">
+                    <div class="content">
+                      <p>
+                        <a href="#" tabindex="0">@rapper</a> replied 3 hours ago
+                        &nbsp;
+                        <span class="tag">Question</span>
+                      </p>
+                    </div>
+                  </div>
+                  <div class="media-right">
+                    <span class="has-text-grey-light"
+                      ><i class="fa fa-comments"></i> 2</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
+      </div>
+    </section>
 
-        <div class="field is-grouped">
-          <div class="control">
-            <button class="button is-link">Submit</button>
-          </div>
-          <div class="control">
-            <button class="button is-text">Cancel</button>
-          </div>
+    <section class="section has-background-light">
+      <div class="container">
+        <div class="section-heading has-text-centered">
+          <h2 class="title is-2">Contact us</h2>
+          <h5 class="subtitle is-5">Don't hesitate, ask anything</h5>
         </div>
-      </form>
-    </div>
-  </div>
 
-  <!-- <div class="section">
-    <div class="container">
-      <div class="columns is-multiline">
-        <div class="column is-one-third">
-          <div class="notification media has-background-white">
-            <div class="media-left">
-              <span class="icon">
-                <i class="has-text-warning fas fa-columns fa-lg"></i>
-              </span>
-            </div>
-            <div class="media-content">
-              <div class="content">
-                <div class="title is-size-4">Columns</div>
-                <p class="is-size-5 subtitle">
-                  The power of <b>Flexbox</b> in a simple interface
-                </p>
-              </div>
+        <form class="column is-half is-offset-one-quarter box">
+          <div class="field">
+            <label for="name" class="label">Name</label>
+            <div class="control">
+              <input
+                id="name"
+                name="name"
+                class="input"
+                type="text"
+                placeholder="Text input"
+              />
             </div>
           </div>
-        </div>
-        <div class="column is-one-third">
-          <div class="notification has-background-white media">
-            <div class="media-left">
-              <span class="icon has-text-info">
-                <i class="fab fa-lg fa-wpforms"></i>
+
+          <div class="field">
+            <label for="username" class="label">Username</label>
+            <div class="control has-icons-left has-icons-right">
+              <input
+                name="username"
+                id="username"
+                class="input is-success"
+                type="text"
+              />
+              <span class="icon is-small is-left">
+                <i class="fas fa-user"></i>
+              </span>
+              <span class="icon is-small is-right">
+                <i class="fas fa-check"></i>
               </span>
             </div>
-            <div class="media-content">
-              <div class="content">
-                <div class="title is-size-4">Form</div>
-                <p class="is-size-5 subtitle">
-                  The indispensable <b>form controls</b>, designed for maximum clarity
-                </p>
-              </div>
-            </div>
+            <p class="help is-success">This username is available</p>
           </div>
-        </div>
-        <div class="column is-one-third">
-          <div class="notification has-background-white media">
-            <div class="media-left">
-              <span class="icon has-text-danger">
-                <i class="fas fa-lg fa-cubes"></i>
+
+          <div class="field">
+            <label for="email" class="label">Email</label>
+            <div class="control has-icons-left has-icons-right">
+              <input
+                id="email"
+                name="email"
+                class="input is-danger"
+                type="email"
+                placeholder="Email input"
+                value="hello@"
+              />
+              <span class="icon is-small is-left">
+                <i class="fas fa-envelope"></i>
+              </span>
+              <span class="icon is-small is-right">
+                <i class="fas fa-exclamation-triangle"></i>
               </span>
             </div>
-            <div class="media-content">
-              <div class="content">
-                <h1 class="title is-size-4">Components</h1>
-                <p class="is-size-5 subtitle">
-                  Advanced multi-part components with lots of possibilities
-                </p>
+            <p class="help is-danger">This email is invalid</p>
+          </div>
+
+          <div class="field">
+            <label for="subject" class="label">Subject</label>
+            <div class="control">
+              <div class="select">
+                <select id="subject" name="subject">
+                  <option value="Select dropdown">Select dropdown</option>
+                  <option value="With options">With options</option>
+                </select>
               </div>
             </div>
           </div>
-        </div>
-        <div class="column is-one-third">
-          <div class="notification has-background-white media">
-            <div class="media-left">
-              <span class="icon has-text-grey">
-                <i class="fas fa-lg fa-cogs"></i>
-              </span>
-            </div>
-            <div class="media-content">
-              <div class="content">
-                <div class="title is-size-4">Modifiers</div>
-                <p class="is-size-5 subtitle">
-                  An <b>easy-to-read</b> naming system designed for humans
-                </p>
-              </div>
+
+          <div class="field">
+            <label for="message" class="label">Message</label>
+            <div class="control">
+              <textarea
+                id="message"
+                name="message"
+                class="textarea"
+                placeholder="Textarea"
+              ></textarea>
             </div>
           </div>
-        </div>
-        <div class="column is-one-third">
-          <div class="notification has-background-white media">
-            <div class="media-left">
-              <span class="icon has-text-primary">
-                <i class="fas fa-lg fa-warehouse"></i>
-              </span>
+
+          <div class="field">
+            <div class="control">
+              <label class="checkbox">
+                <input name="checkbox" type="checkbox" />
+                I agree to the <a href="#" tabindex="0">terms and conditions</a>
+              </label>
             </div>
-            <div class="media-content">
-              <div class="content">
-                <div class="title is-size-4">Layout</div>
-                <p class="is-size-5 subtitle">
-                  Design the <b>structure</b> of your webpage with these CSS classes
-                </p>
-              </div>
+          </div>
+
+          <div class="field">
+            <div class="control">
+              <label class="radio">
+                <input type="radio" name="question" value="Yes" />
+                Yes
+              </label>
+              <label class="radio">
+                <input type="radio" name="question" value="No" />
+                No
+              </label>
             </div>
           </div>
-        </div>
-        <div class="column is-one-third">
-          <div class="notification has-background-white media">
-            <div class="media-left">
-              <span class="icon has-text-danger">
-                <i class="fas fa-lg fa-cube"></i>
-              </span>
+
+          <div class="field is-grouped">
+            <div class="control">
+              <button class="button is-link">Submit</button>
             </div>
-            <div class="media-content">
-              <div class="content">
-                <div class="title is-size-4">Elements</div>
-                <p class="is-size-5 subtitle">
-                  Essential interface elements that only require a <b>single CSS class</b>
-                </p>
-              </div>
+            <div class="control">
+              <button class="button is-text">Cancel</button>
             </div>
           </div>
-        </div>
+        </form>
       </div>
-    </div>
-  </div> -->
+    </section>
 
-  <div class="footer">
-    <div class="container">
-      <div class="columns">
-        <div class="column is-3 is-offset-2">
-          <div class="is-3 title"><b>Lessons</b></div>
-          <ul>
-            <li><a>Lorem ipsum dolor sit amet</a></li>
-            <li><a>Vestibulum errato isse</a></li>
-            <li><a>Lorem ipsum dolor sit amet</a></li>
-            <li><a>Aisia caisia</a></li>
-            <li><a>Murphy's law</a></li>
-            <li><a>Flimsy Lavenrock</a></li>
-            <li><a>Maven Mousie Lavender</a></li>
-          </ul>
-        </div>
-        <div class="column is-3">
-          <div class="is-3 title"><b>News</b></div>
-          <ul>
-            <li><a>Labore et dolore magna aliqua</a></li>
-            <li><a>Kanban airis sum eschelor</a></li>
-            <li><a>Modular modern free</a></li>
-            <li><a>The king of clubs</a></li>
-            <li><a>The Discovery Dissipation</a></li>
-            <li><a>Course Correction</a></li>
-            <li><a>Better Angels</a></li>
-          </ul>
-        </div>
-        <div class="column is-4">
-          <div class="is-3 title"><b>Help</b></div>
-          <ul>
-            <li><a>Objects in space</a></li>
-            <li><a>Playing cards with coyote</a></li>
-            <li><a>Goodbye Yellow Brick Road</a></li>
-            <li><a>The Garden of Forking Paths</a></li>
-            <li><a>Future Shock</a></li>
-          </ul>
+    <!-- <div class="section">
+		  <div class="container">
+		    <div class="columns is-multiline">
+		      <div class="column is-one-third">
+		        <div class="notification media has-background-white">
+		          <div class="media-left">
+		            <span class="icon">
+		              <i class="has-text-warning fas fa-columns fa-lg"></i>
+		            </span>
+		          </div>
+		          <div class="media-content">
+		            <div class="content">
+		              <h4 class="title is-size-4">Columns</div>
+		              <h5 class="is-size-5 subtitle">
+		                The power of <strong>Flexbox</strong> in a simple interface
+		              </p>
+		            </div>
+		          </div>
+		        </div>
+		      </div>
+		      <div class="column is-one-third">
+		        <div class="notification has-background-white media">
+		          <div class="media-left">
+		            <span class="icon has-text-info">
+		              <i class="fab fa-lg fa-wpforms"></i>
+		            </span>
+		          </div>
+		          <div class="media-content">
+		            <div class="content">
+		              <h4 class="title is-size-4">Form</div>
+		              <h5 class="is-size-5 subtitle">
+		                The indispensable <strong>form controls</strong>, designed for maximum clarity
+		              </p>
+		            </div>
+		          </div>
+		        </div>
+		      </div>
+		      <div class="column is-one-third">
+		        <div class="notification has-background-white media">
+		          <div class="media-left">
+		            <span class="icon has-text-danger">
+		              <i class="fas fa-lg fa-cubes"></i>
+		            </span>
+		          </div>
+		          <div class="media-content">
+		            <div class="content">
+		              <h4 class="title is-size-4">Components</h1>
+		              <h5 class="is-size-5 subtitle">
+		                Advanced multi-part components with lots of possibilities
+		              </p>
+		            </div>
+		          </div>
+		        </div>
+		      </div>
+		      <div class="column is-one-third">
+		        <div class="notification has-background-white media">
+		          <div class="media-left">
+		            <span class="icon has-text-grey">
+		              <i class="fas fa-lg fa-cogs"></i>
+		            </span>
+		          </div>
+		          <div class="media-content">
+		            <div class="content">
+		              <h5 class="title is-size-4">Modifiers</div>
+		              <h5 class="is-size-5 subtitle">
+		                An <strong>easy-to-read</strong> naming system designed for humans
+		              </p>
+		            </div>
+		          </div>
+		        </div>
+		      </div>
+		      <div class="column is-one-third">
+		        <div class="notification has-background-white media">
+		          <div class="media-left">
+		            <span class="icon has-text-primary">
+		              <i class="fas fa-lg fa-warehouse"></i>
+		            </span>
+		          </div>
+		          <div class="media-content">
+		            <div class="content">
+		              <h4 class="title is-size-4">Layout</div>
+		              <h5 class="is-size-5 subtitle">
+		                Design the <strong>structure</strong> of your webpage with these CSS classes
+		              </p>
+		            </div>
+		          </div>
+		        </div>
+		      </div>
+		      <div class="column is-one-third">
+		        <div class="notification has-background-white media">
+		          <div class="media-left">
+		            <span class="icon has-text-danger">
+		              <i class="fas fa-lg fa-cube"></i>
+		            </span>
+		          </div>
+		          <div class="media-content">
+		            <div class="content">
+		              <h4 class="title is-size-4">Elements</div>
+		              <h5 class="is-size-5 subtitle">
+		                Essential interface elements that only require a <strong>single CSS class</strong>
+		              </p>
+		            </div>
+		          </div>
+		        </div>
+		      </div>
+		    </div>
+		  </div>
+		</div> -->
+
+    <footer class="footer">
+      <div class="container">
+        <div class="columns">
+          <div class="column is-3 is-offset-2">
+            <h3 class="is-3 title"><strong>Lessons</strong></h3>
+            <ul>
+              <li><a href="#" tabindex="0">Lorem ipsum dolor sit amet</a></li>
+              <li><a href="#" tabindex="0">Vestibulum errato isse</a></li>
+              <li><a href="#" tabindex="0">Lorem ipsum dolor sit amet</a></li>
+              <li><a href="#" tabindex="0">Aisia caisia</a></li>
+              <li><a href="#" tabindex="0">Murphy's law</a></li>
+              <li><a href="#" tabindex="0">Flimsy Lavenrock</a></li>
+              <li><a href="#" tabindex="0">Maven Mousie Lavender</a></li>
+            </ul>
+          </div>
+          <div class="column is-3">
+            <h3 class="is-3 title"><strong>News</strong></h3>
+            <ul>
+              <li>
+                <a href="#" tabindex="0">Labore et dolore magna aliqua</a>
+              </li>
+              <li><a href="#" tabindex="0">Kanban airis sum eschelor</a></li>
+              <li><a href="#" tabindex="0">Modular modern free</a></li>
+              <li><a href="#" tabindex="0">The king of clubs</a></li>
+              <li><a href="#" tabindex="0">The Discovery Dissipation</a></li>
+              <li><a href="#" tabindex="0">Course Correction</a></li>
+              <li><a href="#" tabindex="0">Better Angels</a></li>
+            </ul>
+          </div>
+          <div class="column is-4">
+            <h3 class="is-3 title"><strong>Help</strong></h3>
+            <ul>
+              <li><a href="#" tabindex="0">Objects in space</a></li>
+              <li><a href="#" tabindex="0">Playing cards with coyote</a></li>
+              <li><a href="#" tabindex="0">Goodbye Yellow Brick Road</a></li>
+              <li><a href="#" tabindex="0">The Garden of Forking Paths</a></li>
+              <li><a href="#" tabindex="0">Future Shock</a></li>
+            </ul>
+          </div>
         </div>
-      </div>
 
-      <div class="content has-text-centered">
-        <div class="soc">
-          <a><i class="fab fa-github-alt fa-2x"></i></a>
-          <a><i class="fab fa-youtube fa-2x"></i></a>
-          <a><i class="fab fa-facebook fa-2x"></i></a>
-          <a><i class="fab fa-twitter fa-2x"></i></a>
+        <div class="content has-text-centered">
+          <div class="soc">
+            <a href="#" tabindex="0"><i class="fab fa-github-alt fa-2x"></i></a>
+            <a href="#" tabindex="0"><i class="fab fa-youtube fa-2x"></i></a>
+            <a href="#" tabindex="0"><i class="fab fa-facebook fa-2x"></i></a>
+            <a href="#" tabindex="0"><i class="fab fa-twitter fa-2x"></i></a>
+          </div>
+          <p>
+            The source code is licensed
+            <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
+          </p>
         </div>
-        <p>The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.</p>
       </div>
-    </div>
-  </div>
+    </footer>
 
-  <div id="modal-card" class="modal modal-fx-3dSlit">
-    <div class="modal-background"></div>
-    <div class="modal-content is-tiny">
-      <div class="card">
-        <div class="card-image">
-          <div class="image is-4by3">
-            <img src="https://source.unsplash.com/random/?sig=2">
+    <div id="modal-card" class="modal modal-fx-3dSlit">
+      <div class="modal-background"></div>
+      <div class="modal-content is-tiny">
+        <div class="card">
+          <div class="card-image">
+            <div class="image is-4by3">
+              <img
+                src="https://source.unsplash.com/random/?sig=2"
+                alt="card content"
+              />
+            </div>
           </div>
-        </div>
-        <div class="card-content">
-          <div class="media">
-            <div class="media-left">
-              <div class="image is-48x48">
-                <img src="http://www.radfaces.com/images/avatars/linda-barret.jpg">
+          <div class="card-content">
+            <div class="media">
+              <div class="media-left">
+                <div class="image is-48x48">
+                  <img
+                    src="http://www.radfaces.com/images/avatars/linda-barret.jpg"
+                    alt="Jane Doe"
+                  />
+                </div>
+              </div>
+              <div class="media-content">
+                <h4 class="title is-4">Jane Doe</h4>
+                <h6 class="subtitle is-6">@jane_doe</h6>
               </div>
             </div>
-            <div class="media-content">
-              <div class="title is-4">Jane Doe</div>
-              <div class="subtitle is-6">@jane_doe</div>
+            <div class="content">
+              Laum Ipsum junkah potatoes bookin' it. Moosetown rig up I'm
+              tellin' you way up north bookin' it can't get theyah from heeyah
+              native bean suppah whawf Powrtland Museum of Aht, back woods
+              hawsun around the pit mummah Yessah, mummah muckle riyht on'ta her
+              Bean's dinnahbucket bub geez bud sumpin' fierce ayuhpawt Bangah
+              naw, Powrtland Museum of Aht down cellah sumpin' fierce hoppa bub
+              If you can't stand the wintah you don't deserve the summah slower
+              than molasses going uphill in January. Sgn'wahl shoggor hrii uaaah
+              R'lyeh uh'e k'yarnak Hastur hupadgh li'hee, hai f'nilgh'ri
+              nilgh'ri n'ghftor ngftaghu vulgtlagln h'hrii throd Nyarlathotep
+              lloig, naflsll'ha nnnsll'ha athg y-ebunma goka chtenff ehyeog
+              cehye. Zhro y'hah nogoth phlegeth stell'bsna orr'e ph'Hastur
+              gnaiih throd, uln ya lw'nafh mg nar'luh li'hee wgah'n, sgn'wahl mg
+              nakadishtu chlirgh hupadgh tharanak h'gnaiih.
+              <a href="#" tabindex="0">@testio</a>.
+              <a href="#" tabindex="0">#css</a>
+              <a href="#" tabindex="0">#responsive</a>
+              <br />
+              <time datetime="2018-02-02">12:45 AM - 20 June 2018</time>
             </div>
           </div>
-          <div class="content">
-            Laum Ipsum junkah potatoes bookin' it. Moosetown rig up I'm tellin' you way up north bookin' it can't get theyah from heeyah native bean suppah whawf Powrtland Museum of Aht, back woods hawsun around the pit mummah Yessah, mummah muckle riyht on'ta her
-            Bean's dinnahbucket bub geez bud sumpin' fierce ayuhpawt Bangah naw, Powrtland Museum of Aht down cellah sumpin' fierce hoppa bub If you can't stand the wintah you don't deserve the summah slower than molasses going uphill in January.
-            Sgn'wahl shoggor hrii uaaah R'lyeh uh'e k'yarnak Hastur hupadgh li'hee, hai f'nilgh'ri nilgh'ri n'ghftor ngftaghu vulgtlagln h'hrii throd Nyarlathotep lloig, naflsll'ha nnnsll'ha athg y-ebunma goka chtenff ehyeog cehye. Zhro y'hah
-            nogoth phlegeth stell'bsna orr'e ph'Hastur gnaiih throd, uln ya lw'nafh mg nar'luh li'hee wgah'n, sgn'wahl mg nakadishtu chlirgh hupadgh tharanak h'gnaiih.
-            <a>@testio</a>.
-            <a>#css</a>
-            <a>#responsive</a>
-            <br>
-            <time datetime="2018-02-02">12:45 AM - 20 June 2018</time>
-          </div>
         </div>
       </div>
+      <button class="modal-close is-large">X</button>
     </div>
-    <button class="modal-close is-large"></button>
-  </div>
 
-  <div id="modal-image1" class="modal modal-fx-3dSlit">
-    <div class="modal-background"></div>
-    <div class="modal-content is-huge is-image">
-      <img src="https://source.unsplash.com/random/?sig=1">
+    <div id="modal-image1" class="modal modal-fx-3dSlit">
+      <div class="modal-background"></div>
+      <div class="modal-content is-huge is-image">
+        <img
+          src="https://source.unsplash.com/random/?sig=1"
+          alt="random image"
+        />
+      </div>
+      <button class="modal-close is-large">X</button>
     </div>
-    <button class="modal-close is-large"></button>
-  </div>
 
-  <div id="modal-image2" class="modal modal-fx-superScaled">
-    <div class="modal-background"></div>
-    <div class="modal-content  is-image">
-      <img src="https://source.unsplash.com/random/?sig=3">
+    <div id="modal-image2" class="modal modal-fx-superScaled">
+      <div class="modal-background"></div>
+      <div class="modal-content is-image">
+        <img
+          src="https://source.unsplash.com/random/?sig=3"
+          alt="random image"
+        />
+      </div>
+      <button class="modal-close is-large">X</button>
     </div>
-    <button class="modal-close is-large"></button>
-  </div>
 
-  <script src="https://unpkg.com/bulma-modal-fx/dist/js/modal-fx.min.js"></script>
-  <script async src="js/custom.js"></script>
-</body>
-</html>
\ No newline at end of file
+    <script src="https://unpkg.com/bulma-modal-fx/dist/js/modal-fx.min.js"></script>
+    <script async src="js/custom.js"></script>
+  </body>
+</html>

From d6674fefa967a623a6ee9f46fef33ec14e1d2cc2 Mon Sep 17 00:00:00 2001
From: Sergey Hovakimyan <sergey_hovakimyan@epam.com>
Date: Sat, 9 Jul 2022 11:38:02 -0700
Subject: [PATCH 2/9] feat: add breadcrumbs

---
 css/styles.css | 6 ++++++
 index.html     | 8 ++++++++
 2 files changed, 14 insertions(+)

diff --git a/css/styles.css b/css/styles.css
index ed3e7d2..868f60c 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -240,4 +240,10 @@ li {
 }
 .footer .soc + p a {
   color: #1A4A99;
+}
+
+.breadcrumb {
+  max-width: 1344px;
+  margin: 0 auto;
+  display: flex;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 7f2c5ce..1719abe 100644
--- a/index.html
+++ b/index.html
@@ -114,6 +114,14 @@
     </header>
 
     <main class="section" id="about">
+      <nav class="breadcrumb" aria-label="breadcrumbs">
+        <ul>
+          <li><a href="#">Home</a></li>
+          <li class="is-active">
+            <a href="#" aria-current="page">About us</a>
+          </li>
+        </ul>
+      </nav>
       <a href="#keyFeatures" class="visually-hidden" tabindex="0">
         Skip Section About
       </a>

From 1ab40f2a77276adce805795775d4d05ea1e6e1b8 Mon Sep 17 00:00:00 2001
From: Sergey Hovakimyan <sergey_hovakimyan@epam.com>
Date: Sat, 9 Jul 2022 11:53:20 -0700
Subject: [PATCH 3/9] fix: fix issues in siteimprove

---
 css/styles.css | 13 ++++++++++
 index.html     | 68 ++++++++++++++++++++++++++++----------------------
 2 files changed, 51 insertions(+), 30 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 868f60c..e162f92 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -139,6 +139,7 @@
 .logo-link {
   height: 70px;
   width: 250px;
+  background: transparent;
 }
 
 .logo-link img {
@@ -246,4 +247,16 @@ li {
   max-width: 1344px;
   margin: 0 auto;
   display: flex;
+}
+a {
+  text-decoration: none;
+  color: hsl(232, 50%, 25%);
+  background-color: white;
+}
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+.button.is-primary.is-block.is-alt.is-large {
+  color: black;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 1719abe..8d852e9 100644
--- a/index.html
+++ b/index.html
@@ -127,7 +127,7 @@
       </a>
       <div class="section-heading has-text-centered">
         <h2 class="title is-2">About Us</h2>
-        <h5 class="subtitle is-5">We of all trades, master of "some"</h5>
+        <h3 class="subtitle is-5">We of all trades, master of "some"</h3>
         <div class="container">
           <p>
             Web developers with more than <strong>4 years</strong> of
@@ -316,7 +316,7 @@ <h6 class="is-6 title">Sixth level</h6>
       <div class="container features">
         <div class="section-heading has-text-centered">
           <h2 class="title is-2">Three key features</h2>
-          <h5 class="subtitle is-5">We don't hide what we do</h5>
+          <h3 class="subtitle is-5">We don't hide what we do</h3>
         </div>
 
         <div class="columns">
@@ -388,7 +388,7 @@ <h5 class="subtitle is-5">We don't hide what we do</h5>
       <div class="hero-body">
         <div class="container">
           <h2 class="title">List of topics</h2>
-          <h5 class="subtitle">We are always in touch we the outside world</h5>
+          <h3 class="subtitle">We are always in touch we the outside world</h3>
         </div>
       </div>
       <div class="tabs is-boxed is-centered main-menu" id="nav">
@@ -603,7 +603,7 @@ <h2 class="title has-text-centered">Inspired video</h2>
       <div class="container has-text-centered">
         <div class="section-heading has-text-centered">
           <h2 class="title is-2">Upcoming events</h2>
-          <h5 class="subtitle is-5">Outcoming dates for the best options</h5>
+          <h3 class="subtitle is-5">Outcoming dates for the best options</h3>
         </div>
 
         <div class="tile is-ancestor">
@@ -616,7 +616,7 @@ <h5 class="subtitle is-5">Outcoming dates for the best options</h5>
                 />
               </div>
               <h2 class="title">New York</h2>
-              <h5 class="subtitle">Fri 27 Nov 2016</h5>
+              <h3 class="subtitle">Fri 27 Nov 2016</h3>
               <button class="button">Buy Tickets</button>
             </div>
           </div>
@@ -626,7 +626,7 @@ <h5 class="subtitle">Fri 27 Nov 2016</h5>
                 <img src="./img/access.jpg" alt="Los Angeles Event" />
               </div>
               <h2 class="title">Los Angeles</h2>
-              <h5 class="subtitle">Fri 27 Nov 2016</h5>
+              <h3 class="subtitle">Fri 27 Nov 2016</h3>
               <button class="button">Buy Tickets</button>
             </div>
           </div>
@@ -636,7 +636,7 @@ <h5 class="subtitle">Fri 27 Nov 2016</h5>
                 <img src="./img/dotcss-2019.jpg" alt="Mexico event" />
               </div>
               <h2 class="title">Mexico</h2>
-              <h5 class="subtitle">Fri 27 Nov 2016</h5>
+              <h3 class="subtitle">Fri 27 Nov 2016</h3>
               <button class="button">Buy Tickets</button>
             </div>
           </div>
@@ -649,7 +649,7 @@ <h5 class="subtitle">Fri 27 Nov 2016</h5>
                 <img src="./img/images.jpg" alt="Paris Event" />
               </div>
               <h2 class="title">Paris</h2>
-              <h5 class="subtitle">Fri 27 Nov 2016</h5>
+              <h3 class="subtitle">Fri 27 Nov 2016</h3>
               <button class="button">Buy Tickets</button>
             </div>
           </div>
@@ -662,7 +662,7 @@ <h5 class="subtitle">Fri 27 Nov 2016</h5>
                 />
               </div>
               <h2 class="title">Minsk</h2>
-              <h5 class="subtitle">Fri 27 Nov 2016</h5>
+              <h3 class="subtitle">Fri 27 Nov 2016</h3>
               <button class="button">Buy Tickets</button>
             </div>
           </div>
@@ -672,7 +672,7 @@ <h5 class="subtitle">Fri 27 Nov 2016</h5>
                 <img src="./img/access.jpg" alt="London event" />
               </div>
               <h2 class="title">London</h2>
-              <h5 class="subtitle">Fri 27 Nov 2016</h5>
+              <h3 class="subtitle">Fri 27 Nov 2016</h3>
               <button class="button">Buy Tickets</button>
             </div>
           </div>
@@ -683,7 +683,7 @@ <h5 class="subtitle">Fri 27 Nov 2016</h5>
     <section class="section" id="services">
       <div class="section-heading has-text-centered">
         <h2 class="title is-2">Services</h2>
-        <h5 class="subtitle is-5">What can I do for you?</h5>
+        <h3 class="subtitle is-5">What can I do for you?</h3>
       </div>
       <div class="container">
         <div class="columns">
@@ -691,7 +691,7 @@ <h5 class="subtitle is-5">What can I do for you?</h5>
             <a target="_blank" class="box" href="#services" tabindex="0">
               <span class="visually-hidden"> opens in a new window </span>
               <div class="content">
-                <h5 class="title is-5">Front End Web Development</h5>
+                <h4 class="title is-5">Front End Web Development</h4>
                 Develop Front End using latest standards with HTML5/CSS3 with
                 added funtionality using JavaScript and Vue.js.
               </div>
@@ -701,7 +701,7 @@ <h5 class="title is-5">Front End Web Development</h5>
             <a target="_blank" class="box" href="#services" tabindex="0">
               <span class="visually-hidden"> opens in a new window </span>
               <div class="content">
-                <h5 class="title is-5">Back End Web Development</h5>
+                <h4 class="title is-5">Back End Web Development</h4>
                 Develop Back End application/service using Node.js or ASP .NET
                 and SQL server or Mongo DB databases.
               </div>
@@ -714,7 +714,7 @@ <h5 class="title is-5">Back End Web Development</h5>
             <a target="_blank" class="box" href="#services" tabindex="0">
               <span class="visually-hidden"> opens in a new window </span>
               <div class="content">
-                <h5 class="title is-5">Front End Web Development</h5>
+                <h4 class="title is-5">Front End Web Development</h4>
                 Develop Front End using latest standards with HTML5/CSS3 with
                 added funtionality using JavaScript and Vue.js.
               </div>
@@ -724,7 +724,7 @@ <h5 class="title is-5">Front End Web Development</h5>
             <a target="_blank" class="box" href="#services" tabindex="0">
               <span class="visually-hidden"> opens in a new window </span>
               <div class="content">
-                <h5 class="title is-5">Back End Web Development</h5>
+                <h4 class="title is-5">Back End Web Development</h4>
                 Develop Back End application/service using Node.js or ASP .NET
                 and SQL server or Mongo DB databases.
               </div>
@@ -745,7 +745,7 @@ <h2 class="title is-2">Photos from past events</h2>
             <div class="column is-4">
               <div class="card">
                 <div class="card-header">
-                  <h4 class="card-header-title">
+                  <h3 class="card-header-title">
                     <span>Admin <small>(Light)</small></span>
                     <span class="is-pulled-right">
                       <a href="#" tabindex="0">
@@ -754,7 +754,7 @@ <h4 class="card-header-title">
                       <span class="tag is-default">Desktop</span>
                       <span class="tag is-danger">WIP</span>
                     </span>
-                  </h4>
+                  </h3>
                 </div>
                 <div class="card-content">
                   <div class="image">
@@ -770,7 +770,7 @@ <h4 class="card-header-title">
             <div class="column is-4">
               <div class="card">
                 <div class="card-header">
-                  <h4 class="card-header-title">
+                  <h3 class="card-header-title">
                     <span>Cards</span>
                     <span class="is-pulled-right">
                       <a href="#" tabindex="0">
@@ -779,7 +779,7 @@ <h4 class="card-header-title">
                       <span class="tag is-default">Desktop</span>
                       <span class="tag is-default">?</span>
                     </span>
-                  </h4>
+                  </h3>
                 </div>
                 <div class="card-content">
                   <div class="image">
@@ -795,7 +795,7 @@ <h4 class="card-header-title">
             <div class="column is-4">
               <div class="card">
                 <div class="card-header">
-                  <h4 class="card-header-title">
+                  <h3 class="card-header-title">
                     <span>Forum</span>
                     <span class="is-pulled-right">
                       <a href="#" tabindex="0">
@@ -804,7 +804,7 @@ <h4 class="card-header-title">
                       <span class="tag is-default">Desktop</span>
                       <span class="tag is-default">Mobile</span>
                     </span>
-                  </h4>
+                  </h3>
                 </div>
                 <div class="card-content">
                   <div class="image">
@@ -822,7 +822,7 @@ <h4 class="card-header-title">
             <div class="column is-4">
               <div class="card">
                 <div class="card-header">
-                  <h4 class="card-header-title">
+                  <h3 class="card-header-title">
                     <span>InstaAlbum</span>
                     <span class="is-pulled-right">
                       <a href="#" tabindex="0">
@@ -831,7 +831,7 @@ <h4 class="card-header-title">
                       <span class="tag is-default">Desktop</span>
                       <span class="tag is-default">Mobile</span>
                     </span>
-                  </h4>
+                  </h3>
                 </div>
                 <div class="card-content">
                   <div class="image">
@@ -903,9 +903,9 @@ <h4 class="card-header-title">
       <div class="container">
         <div class="section-heading has-text-centered">
           <h2 class="title is-2">Forum</h2>
-          <h5 class="subtitle is-5">
+          <h3 class="subtitle is-5">
             Discuss any topic with no leaving this page
-          </h5>
+          </h3>
         </div>
 
         <div class="columns">
@@ -1112,7 +1112,7 @@ <h4>How to make tiles wrap with CSS?</h4>
       <div class="container">
         <div class="section-heading has-text-centered">
           <h2 class="title is-2">Contact us</h2>
-          <h5 class="subtitle is-5">Don't hesitate, ask anything</h5>
+          <h3 class="subtitle is-5">Don't hesitate, ask anything</h3>
         </div>
 
         <form class="column is-half is-offset-one-quarter box">
@@ -1379,10 +1379,18 @@ <h3 class="is-3 title"><strong>Help</strong></h3>
 
         <div class="content has-text-centered">
           <div class="soc">
-            <a href="#" tabindex="0"><i class="fab fa-github-alt fa-2x"></i></a>
-            <a href="#" tabindex="0"><i class="fab fa-youtube fa-2x"></i></a>
-            <a href="#" tabindex="0"><i class="fab fa-facebook fa-2x"></i></a>
-            <a href="#" tabindex="0"><i class="fab fa-twitter fa-2x"></i></a>
+            <a href="#" tabindex="0" aria-label="Github">
+              <i class="fab fa-github-alt fa-2x"></i>
+            </a>
+            <a href="#" tabindex="0" aria-label="Youtube">
+              <i class="fab fa-youtube fa-2x"></i>
+            </a>
+            <a href="#" tabindex="0" aria-label="Facebook">
+              <i class="fab fa-facebook fa-2x"></i>
+            </a>
+            <a href="#" tabindex="0" aria-label="Twitter">
+              <i class="fab fa-twitter fa-2x"></i>
+            </a>
           </div>
           <p>
             The source code is licensed

From 60def6e9fbee84e33199ca9e4b6ebccffe8c20f9 Mon Sep 17 00:00:00 2001
From: Sergey Hovakimyan <sergey_hovakimyan@epam.com>
Date: Sat, 9 Jul 2022 12:26:20 -0700
Subject: [PATCH 4/9] feat: add task 2 requirements

---
 css/styles.css |   3 +-
 index.html     | 187 +++++++++++++++++++++++++++++++------------------
 2 files changed, 121 insertions(+), 69 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index e162f92..d5fd255 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -139,7 +139,6 @@
 .logo-link {
   height: 70px;
   width: 250px;
-  background: transparent;
 }
 
 .logo-link img {
@@ -248,7 +247,7 @@ li {
   margin: 0 auto;
   display: flex;
 }
-a {
+p a {
   text-decoration: none;
   color: hsl(232, 50%, 25%);
   background-color: white;
diff --git a/index.html b/index.html
index 8d852e9..54f07d7 100644
--- a/index.html
+++ b/index.html
@@ -39,11 +39,11 @@
             <a href="#about" class="visually-hidden" tabindex="0">
               Skip navigation Link
             </a>
-            <nav id="navbarMenu" class="navbar-menu">
+            <nav id="navbarMenu" class="navbar-menu" role="navigation">
               <ul class="navbar-end">
                 <li class="navbar-item">
                   <button class="button is-white is-outlined">
-                    <span class="icon">
+                    <span class="icon" aria-hidden="true">
                       <i class="fa fa-home"></i>
                     </span>
                     <span>Home</span>
@@ -51,7 +51,7 @@
                 </li>
                 <li class="navbar-item">
                   <button class="button is-white is-outlined">
-                    <span class="icon">
+                    <span class="icon" aria-hidden="true">
                       <i class="fab fa-superpowers"></i>
                     </span>
                     <span>Examples</span>
@@ -59,7 +59,7 @@
                 </li>
                 <li class="navbar-item">
                   <button class="button is-white is-outlined">
-                    <span class="icon">
+                    <span class="icon" aria-hidden="true">
                       <i class="fa fa-book"></i>
                     </span>
                     <span>Documentation</span>
@@ -67,7 +67,7 @@
                 </li>
                 <li class="navbar-item">
                   <button class="button is-white is-outlined">
-                    <span class="icon">
+                    <span class="icon" aria-hidden="true">
                       <i class="fab fa-github"></i>
                     </span>
                     <span>View Source</span>
@@ -112,8 +112,7 @@
         </div>
       </div>
     </header>
-
-    <main class="section" id="about">
+    <section aria-label="BreadCrumbs">
       <nav class="breadcrumb" aria-label="breadcrumbs">
         <ul>
           <li><a href="#">Home</a></li>
@@ -122,11 +121,19 @@
           </li>
         </ul>
       </nav>
+    </section>
+
+    <main
+      role="main"
+      class="section"
+      id="about"
+      aria-labelledby="section-1-title"
+    >
       <a href="#keyFeatures" class="visually-hidden" tabindex="0">
         Skip Section About
       </a>
       <div class="section-heading has-text-centered">
-        <h2 class="title is-2">About Us</h2>
+        <h2 id="section-1-title" class="title is-2">About Us</h2>
         <h3 class="subtitle is-5">We of all trades, master of "some"</h3>
         <div class="container">
           <p>
@@ -309,13 +316,17 @@ <h6 class="is-6 title">Sixth level</h6>
       </div>
     </main>
 
-    <section class="hero has-background-grey-light" id="keyFeatures">
+    <section
+      class="hero has-background-grey-light"
+      id="keyFeatures"
+      aria-labelledby="section-2-title"
+    >
       <a href="#topics" class="visually-hidden" tabindex="0">
         Skip Section Key Features
       </a>
       <div class="container features">
         <div class="section-heading has-text-centered">
-          <h2 class="title is-2">Three key features</h2>
+          <h2 id="section-2-title" class="title is-2">Three key features</h2>
           <h3 class="subtitle is-5">We don't hide what we do</h3>
         </div>
 
@@ -384,40 +395,63 @@ <h3 class="subtitle is-5">We don't hide what we do</h3>
       </div>
     </section>
 
-    <section class="hero is-info" id="topics">
+    <section class="hero is-info" id="topics" aria-labelledby="section-3-title">
       <div class="hero-body">
         <div class="container">
-          <h2 class="title">List of topics</h2>
+          <h2 class="title" id="section-3-title">List of topics</h2>
           <h3 class="subtitle">We are always in touch we the outside world</h3>
         </div>
       </div>
       <div class="tabs is-boxed is-centered main-menu" id="nav">
-        <ul>
-          <li data-target="pane-1" id="1" class="is-active">
-            <a href="#1" tabindex="0">
-              <span class="icon is-small"><i class="fa fa-image"></i></span>
-              <span>Pictures</span>
+        <ul role="tablist">
+          <li data-target="pane-1" id="1" class="is-active" role="tab">
+            <a
+              href="#1"
+              tabindex="0"
+              aria-controls="pane-1"
+              aria-labelledby="pane-id-1"
+            >
+              <span aria-hidden="true" class="icon is-small">
+                <i class="fa fa-image"></i>
+              </span>
+              <span id="pane-id-1">Pictures</span>
             </a>
           </li>
-          <li data-target="pane-2" id="2">
-            <a href="#2" tabindex="0">
-              <span class="icon is-small"
-                ><i class="fab fa-superpowers"></i
-              ></span>
-              <span>Team</span>
+          <li data-target="pane-2" id="2" role="tab">
+            <a
+              href="#2"
+              tabindex="0"
+              aria-controls="pane-2"
+              aria-labelledby="pane-id-2"
+            >
+              <span aria-hidden="true" class="icon is-small">
+                <i class="fab fa-superpowers"> </i>
+              </span>
+              <span id="pane-id-2">Team</span>
             </a>
           </li>
-          <li data-target="pane-3" id="3">
-            <a href="#3" tabindex="0">
-              <span class="icon is-small"><i class="fa fa-film"></i></span>
-              <span>Video</span>
+          <li data-target="pane-3" id="3" role="tab">
+            <a
+              href="#3"
+              tabindex="0"
+              aria-controls="pane-2"
+              aria-labelledby="pane-id-3"
+            >
+              <span aria-hidden="true" class="icon is-small">
+                <i class="fa fa-film"></i>
+              </span>
+              <span id="pane-id-3">Video</span>
             </a>
           </li>
         </ul>
       </div>
     </section>
 
-    <section class="tab-content container">
+    <section
+      class="tab-content container"
+      role="tabpanel"
+      aria-label="Topics tab panel"
+    >
       <div class="level tab-pane is-active" id="pane-1">
         <div class="container">
           <div class="columns features">
@@ -442,11 +476,13 @@ <h3 class="subtitle">We are always in touch we the outside world</h3>
                       volutpat ac tincidunt vitae semper quis. Accumsan tortor
                       posuere ac ut consequat semper viverra nam.
                     </p>
-                    <span
+                    <button
+                      aria-haspopup="true"
                       class="button is-link modal-button"
                       data-target="modal-image1"
-                      >Image modal</span
                     >
+                      Image modal
+                    </button>
                   </div>
                 </div>
               </div>
@@ -468,11 +504,13 @@ <h3 class="subtitle">We are always in touch we the outside world</h3>
                       neque egestas cmonsu songue. Phasellus vestibulum lorem
                       sed risus.
                     </p>
-                    <span
+                    <button
+                      aria-haspopup="true"
                       class="button is-link modal-button"
                       data-target="modal-card"
-                      >Modal Card</span
                     >
+                      Modal Card
+                    </button>
                   </div>
                 </div>
               </div>
@@ -498,11 +536,13 @@ <h3 class="subtitle">We are always in touch we the outside world</h3>
                       Libero id faucibus nisl tincidunt eget nullam. Commodo
                       viverra maecenas accumsan lacus vel facilisis.
                     </p>
-                    <span
+                    <button
+                      aria-haspopup="true"
                       class="button is-link modal-button"
                       data-target="modal-image2"
-                      >Image modal</span
                     >
+                      Image modal
+                    </button>
                   </div>
                 </div>
               </div>
@@ -599,10 +639,13 @@ <h2 class="title has-text-centered">Inspired video</h2>
       </div>
     </section>
 
-    <section class="section has-background-grey-lighter">
+    <section
+      class="section has-background-grey-lighter"
+      aria-labelledby="section-4-title"
+    >
       <div class="container has-text-centered">
         <div class="section-heading has-text-centered">
-          <h2 class="title is-2">Upcoming events</h2>
+          <h2 id="section-4-title" class="title is-2">Upcoming events</h2>
           <h3 class="subtitle is-5">Outcoming dates for the best options</h3>
         </div>
 
@@ -680,9 +723,9 @@ <h3 class="subtitle">Fri 27 Nov 2016</h3>
       </div>
     </section>
 
-    <section class="section" id="services">
+    <section class="section" id="services" aria-labelledby="section-5-title">
       <div class="section-heading has-text-centered">
-        <h2 class="title is-2">Services</h2>
+        <h2 id="section-5-title" class="title is-2">Services</h2>
         <h3 class="subtitle is-5">What can I do for you?</h3>
       </div>
       <div class="container">
@@ -734,10 +777,15 @@ <h4 class="title is-5">Back End Web Development</h4>
       </div>
     </section>
 
-    <section class="section has-background-grey-lighter">
+    <section
+      class="section has-background-grey-lighter"
+      aria-labelledby="section-6-title"
+    >
       <div class="container">
         <div class="section-heading has-text-centered">
-          <h2 class="title is-2">Photos from past events</h2>
+          <h2 id="section-6-title" class="title is-2">
+            Photos from past events
+          </h2>
         </div>
 
         <div class="container portfolio-container">
@@ -899,10 +947,10 @@ <h4 class="card-header-title">
       </div>
     </section>
 
-    <section class="section">
+    <section class="section" aria-labelledby="section-7-title">
       <div class="container">
         <div class="section-heading has-text-centered">
-          <h2 class="title is-2">Forum</h2>
+          <h2 id="section-7-title" class="title is-2">Forum</h2>
           <h3 class="subtitle is-5">
             Discuss any topic with no leaving this page
           </h3>
@@ -1108,10 +1156,13 @@ <h4>How to make tiles wrap with CSS?</h4>
       </div>
     </section>
 
-    <section class="section has-background-light">
+    <section
+      class="section has-background-light"
+      aria-labelledby="section-8-title"
+    >
       <div class="container">
         <div class="section-heading has-text-centered">
-          <h2 class="title is-2">Contact us</h2>
+          <h2 id="section-8-title" class="title is-2">Contact us</h2>
           <h3 class="subtitle is-5">Don't hesitate, ask anything</h3>
         </div>
 
@@ -1138,10 +1189,10 @@ <h3 class="subtitle is-5">Don't hesitate, ask anything</h3>
                 class="input is-success"
                 type="text"
               />
-              <span class="icon is-small is-left">
+              <span aria-hidden="true" class="icon is-small is-left">
                 <i class="fas fa-user"></i>
               </span>
-              <span class="icon is-small is-right">
+              <span aria-hidden="true" class="icon is-small is-right">
                 <i class="fas fa-check"></i>
               </span>
             </div>
@@ -1159,10 +1210,10 @@ <h3 class="subtitle is-5">Don't hesitate, ask anything</h3>
                 placeholder="Email input"
                 value="hello@"
               />
-              <span class="icon is-small is-left">
+              <span aria-hidden="true" class="icon is-small is-left">
                 <i class="fas fa-envelope"></i>
               </span>
-              <span class="icon is-small is-right">
+              <span aria-hidden="true" class="icon is-small is-right">
                 <i class="fas fa-exclamation-triangle"></i>
               </span>
             </div>
@@ -1203,24 +1254,26 @@ <h3 class="subtitle is-5">Don't hesitate, ask anything</h3>
           </div>
 
           <div class="field">
-            <div class="control">
-              <label class="radio">
-                <input type="radio" name="question" value="Yes" />
-                Yes
-              </label>
-              <label class="radio">
-                <input type="radio" name="question" value="No" />
-                No
-              </label>
-            </div>
+            <fieldset>
+              <div class="control">
+                <label class="radio">
+                  <input type="radio" name="question" value="Yes" />
+                  Yes
+                </label>
+                <label class="radio">
+                  <input type="radio" name="question" value="No" />
+                  No
+                </label>
+              </div>
+            </fieldset>
           </div>
 
           <div class="field is-grouped">
             <div class="control">
-              <button class="button is-link">Submit</button>
+              <button type="submit" class="button is-link">Submit</button>
             </div>
             <div class="control">
-              <button class="button is-text">Cancel</button>
+              <button type="reset" class="button is-text">Cancel</button>
             </div>
           </div>
         </form>
@@ -1380,16 +1433,16 @@ <h3 class="is-3 title"><strong>Help</strong></h3>
         <div class="content has-text-centered">
           <div class="soc">
             <a href="#" tabindex="0" aria-label="Github">
-              <i class="fab fa-github-alt fa-2x"></i>
+              <i aria-hidden="true" class="fab fa-github-alt fa-2x"></i>
             </a>
             <a href="#" tabindex="0" aria-label="Youtube">
-              <i class="fab fa-youtube fa-2x"></i>
+              <i aria-hidden="true" class="fab fa-youtube fa-2x"></i>
             </a>
             <a href="#" tabindex="0" aria-label="Facebook">
-              <i class="fab fa-facebook fa-2x"></i>
+              <i aria-hidden="true" class="fab fa-facebook fa-2x"></i>
             </a>
             <a href="#" tabindex="0" aria-label="Twitter">
-              <i class="fab fa-twitter fa-2x"></i>
+              <i aria-hidden="true" class="fab fa-twitter fa-2x"></i>
             </a>
           </div>
           <p>
@@ -1400,7 +1453,7 @@ <h3 class="is-3 title"><strong>Help</strong></h3>
       </div>
     </footer>
 
-    <div id="modal-card" class="modal modal-fx-3dSlit">
+    <div role="dialog" id="modal-card" class="modal modal-fx-3dSlit">
       <div class="modal-background"></div>
       <div class="modal-content is-tiny">
         <div class="card">
@@ -1454,7 +1507,7 @@ <h6 class="subtitle is-6">@jane_doe</h6>
       <button class="modal-close is-large">X</button>
     </div>
 
-    <div id="modal-image1" class="modal modal-fx-3dSlit">
+    <div role="dialog" id="modal-image1" class="modal modal-fx-3dSlit">
       <div class="modal-background"></div>
       <div class="modal-content is-huge is-image">
         <img
@@ -1465,7 +1518,7 @@ <h6 class="subtitle is-6">@jane_doe</h6>
       <button class="modal-close is-large">X</button>
     </div>
 
-    <div id="modal-image2" class="modal modal-fx-superScaled">
+    <div role="dialog" id="modal-image2" class="modal modal-fx-superScaled">
       <div class="modal-background"></div>
       <div class="modal-content is-image">
         <img

From 4da4e61633b8137fa2e2288aa0521750902d965f Mon Sep 17 00:00:00 2001
From: Sergey Hovakimyan <sergey_hovakimyan@epam.com>
Date: Sat, 9 Jul 2022 12:47:44 -0700
Subject: [PATCH 5/9] feat: add JS changes

---
 css/styles.css | 11 +++++++++++
 index.html     | 16 +++++++++++++---
 js/custom.js   | 19 +++++++++++++------
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index d5fd255..212f849 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -258,4 +258,15 @@ a:focus {
 }
 .button.is-primary.is-block.is-alt.is-large {
   color: black;
+}
+#notification {
+  margin: 10px;
+  background: rgb(22, 87, 0);
+  padding: 5px 20px;
+  border-radius: 10px;
+  z-index: 31;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 54f07d7..e135304 100644
--- a/index.html
+++ b/index.html
@@ -88,6 +88,14 @@
             <div class="subtitle has-text-white">
               Would you like to get the latest news?
             </div>
+            <div
+              id="notification"
+              aria-label="Notifications"
+              role="region"
+              aria-live="polite"
+            >
+              Notification count 0
+            </div>
             <div class="box">
               <form class="field is-grouped">
                 <p class="control is-expanded">
@@ -469,7 +477,7 @@ <h3 class="subtitle">We are always in touch we the outside world</h3>
                 </div>
                 <div class="card-content">
                   <div class="content">
-                    <div>Click on image above</div>
+                    <div class="visually-hidden">Click on image above</div>
                     <p>
                       Purus semper eget duis at tellus at urna condimentum
                       mattis. Non blandit massa enim nec. Integer enim neque
@@ -496,7 +504,9 @@ <h3 class="subtitle">We are always in touch we the outside world</h3>
                 </div>
                 <div class="card-content">
                   <div class="content">
-                    <div>Tempor orci dapibus ultrices in.</div>
+                    <div class="visually-hidden">
+                      Tempor orci dapibus ultrices in.
+                    </div>
                     <p>
                       Ut venenatis tellus in metus vulputate. Amet consectetur
                       adipiscing elit pellentesque. Sed arcu non odio euismod
@@ -529,7 +539,7 @@ <h3 class="subtitle">We are always in touch we the outside world</h3>
                 </div>
                 <div class="card-content">
                   <div class="content">
-                    <div>Click anywhere on card</div>
+                    <div class="visually-hidden">Click anywhere on card</div>
                     <p>
                       Imperdiet dui accumsan sit amet nulla facilisi morbi.
                       Fusce ut placerat orci nulla pellentesque dignissim enim.
diff --git a/js/custom.js b/js/custom.js
index 36a050e..a5f67a4 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -1,14 +1,21 @@
-(function() {
+(function () {
   var burger = document.querySelector(".burger");
   var menu = document.querySelector("#" + burger.dataset.target);
-  burger.addEventListener("click", function() {
+  burger.addEventListener("click", function () {
     burger.classList.toggle("is-active");
     menu.classList.toggle("is-active");
   });
+
+  let notificationCount = 0;
+  const region = document.getElementById("notification");
+  setInterval(() => {
+    notificationCount += 1;
+    region.innerText = `Notification count ${notificationCount}`;
+  }, 60000);
 })();
 
-document.querySelectorAll("#nav li").forEach(function(navEl) {
-  navEl.onclick = function() {
+document.querySelectorAll("#nav li").forEach(function (navEl) {
+  navEl.onclick = function () {
     toggleTab(this.id, this.dataset.target);
   };
 });
@@ -16,7 +23,7 @@ document.querySelectorAll("#nav li").forEach(function(navEl) {
 function toggleTab(selectedNav, targetId) {
   var navEls = document.querySelectorAll("#nav li");
 
-  navEls.forEach(function(navEl) {
+  navEls.forEach(function (navEl) {
     if (navEl.id == selectedNav) {
       navEl.classList.add("is-active");
     } else {
@@ -28,7 +35,7 @@ function toggleTab(selectedNav, targetId) {
 
   var tabs = document.querySelectorAll(".tab-pane");
 
-  tabs.forEach(function(tab) {
+  tabs.forEach(function (tab) {
     if (tab.id == targetId) {
       tab.style.display = "block";
     } else {

From 37a9aabaf03368d5610db9635626d9da8edfa438 Mon Sep 17 00:00:00 2001
From: Sergey Hovakimyan <sergey_hovakimyan@epam.com>
Date: Sat, 9 Jul 2022 14:21:15 -0700
Subject: [PATCH 6/9] fix: add arrows, enter and space handlers

---
 index.html   | 23 +++++++++++-----
 js/custom.js | 77 ++++++++++++++++++++++++++++++++--------------------
 2 files changed, 64 insertions(+), 36 deletions(-)

diff --git a/index.html b/index.html
index e135304..f8629c6 100644
--- a/index.html
+++ b/index.html
@@ -410,12 +410,15 @@ <h2 class="title" id="section-3-title">List of topics</h2>
           <h3 class="subtitle">We are always in touch we the outside world</h3>
         </div>
       </div>
-      <div class="tabs is-boxed is-centered main-menu" id="nav">
+      <div id="nav" class="tabs is-boxed is-centered main-menu">
         <ul role="tablist">
-          <li data-target="pane-1" id="1" class="is-active" role="tab">
+          <li id="tab1" class="is-active" role="tab">
             <a
-              href="#1"
+              data-id="1"
+              data-target="pane-1"
+              href="#tab1"
               tabindex="0"
+              aria-selected="true"
               aria-controls="pane-1"
               aria-labelledby="pane-id-1"
             >
@@ -425,10 +428,13 @@ <h3 class="subtitle">We are always in touch we the outside world</h3>
               <span id="pane-id-1">Pictures</span>
             </a>
           </li>
-          <li data-target="pane-2" id="2" role="tab">
+          <li id="tab2" role="tab">
             <a
-              href="#2"
+              data-target="pane-2"
+              data-id="2"
+              href="#tab2"
               tabindex="0"
+              aria-selected="false"
               aria-controls="pane-2"
               aria-labelledby="pane-id-2"
             >
@@ -438,10 +444,13 @@ <h3 class="subtitle">We are always in touch we the outside world</h3>
               <span id="pane-id-2">Team</span>
             </a>
           </li>
-          <li data-target="pane-3" id="3" role="tab">
+          <li id="tab3" role="tab">
             <a
-              href="#3"
+              data-target="pane-3"
+              data-id="3"
+              href="#tab3"
               tabindex="0"
+              aria-selected="false"
               aria-controls="pane-2"
               aria-labelledby="pane-id-3"
             >
diff --git a/js/custom.js b/js/custom.js
index a5f67a4..71576a5 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -1,6 +1,27 @@
+function toggleTab(selectedNav, targetId) {
+  const navEls = document.querySelectorAll("#nav li a");
+  navEls.forEach(function (navEl) {
+    const id = navEl.dataset.id;
+    if (id === selectedNav) {
+      navEl.parentElement.classList.add("is-active");
+      navEl.setAttribute("aria-selected", "true");
+    } else {
+      if (navEl.parentElement.classList.contains("is-active")) {
+        navEl.parentElement.classList.remove("is-active");
+        navEl.setAttribute("aria-selected", "false");
+      }
+    }
+  });
+
+  const tabs = document.querySelectorAll(".tab-pane");
+  tabs.forEach(function (tab) {
+    tab.style.display = tab.id === targetId ? "block" : "none";
+  });
+}
+
 (function () {
-  var burger = document.querySelector(".burger");
-  var menu = document.querySelector("#" + burger.dataset.target);
+  const burger = document.querySelector(".burger");
+  const menu = document.querySelector("#" + burger.dataset.target);
   burger.addEventListener("click", function () {
     burger.classList.toggle("is-active");
     menu.classList.toggle("is-active");
@@ -12,34 +33,32 @@
     notificationCount += 1;
     region.innerText = `Notification count ${notificationCount}`;
   }, 60000);
-})();
-
-document.querySelectorAll("#nav li").forEach(function (navEl) {
-  navEl.onclick = function () {
-    toggleTab(this.id, this.dataset.target);
-  };
-});
 
-function toggleTab(selectedNav, targetId) {
-  var navEls = document.querySelectorAll("#nav li");
-
-  navEls.forEach(function (navEl) {
-    if (navEl.id == selectedNav) {
-      navEl.classList.add("is-active");
-    } else {
-      if (navEl.classList.contains("is-active")) {
-        navEl.classList.remove("is-active");
-      }
-    }
+  document.querySelectorAll("#nav li a").forEach(function (navEl) {
+    navEl.onclick = function () {
+      toggleTab(this.dataset.id, this.dataset.target);
+    };
   });
 
-  var tabs = document.querySelectorAll(".tab-pane");
-
-  tabs.forEach(function (tab) {
-    if (tab.id == targetId) {
-      tab.style.display = "block";
-    } else {
-      tab.style.display = "none";
-    }
+  const items = document.querySelectorAll("#nav li a");
+  items.forEach(function (navEl) {
+    navEl.addEventListener("keydown", function (event) {
+      const num = Number(event.target.dataset.id);
+      if (event.keyCode === 39) {
+        event.preventDefault();
+        console.log(num);
+        if (items[num]) {
+          items[num].click();
+        }
+      } else if (event.keyCode === 37) {
+        event.preventDefault();
+        if (items[num - 2]) {
+          items[num - 2].click();
+        }
+      } else if (event.keyCode === 13 || event.keyCode === 32) {
+        event.preventDefault();
+        items[num - 1].click();
+      }
+    });
   });
-}
+})();

From e8eba2e66925b618549a40826dd60b559ce05e48 Mon Sep 17 00:00:00 2001
From: Sergey Hovakimyan <sergey_hovakimyan@epam.com>
Date: Sat, 9 Jul 2022 19:58:33 -0700
Subject: [PATCH 7/9] feat: add a11y for tabs panel

---
 index.html   | 75 +++++++++++++++++++++++++---------------------------
 js/custom.js | 70 ++++++++++++++++++++++++------------------------
 2 files changed, 71 insertions(+), 74 deletions(-)

diff --git a/index.html b/index.html
index f8629c6..68d3d11 100644
--- a/index.html
+++ b/index.html
@@ -411,49 +411,50 @@ <h3 class="subtitle">We are always in touch we the outside world</h3>
         </div>
       </div>
       <div id="nav" class="tabs is-boxed is-centered main-menu">
-        <ul role="tablist">
-          <li id="tab1" class="is-active" role="tab">
-            <a
-              data-id="1"
-              data-target="pane-1"
-              href="#tab1"
-              tabindex="0"
-              aria-selected="true"
-              aria-controls="pane-1"
-              aria-labelledby="pane-id-1"
-            >
+        <ul role="tablist" aria-label="Tabs">
+          <li
+            id="tab1"
+            class="is-active"
+            role="tab"
+            aria-selected="true"
+            aria-controls="pane-1"
+            aria-labelledby="pane-id-1"
+            data-target="pane-1"
+            tabindex="0"
+          >
+            <a href="#tab1">
               <span aria-hidden="true" class="icon is-small">
                 <i class="fa fa-image"></i>
               </span>
               <span id="pane-id-1">Pictures</span>
             </a>
           </li>
-          <li id="tab2" role="tab">
-            <a
-              data-target="pane-2"
-              data-id="2"
-              href="#tab2"
-              tabindex="0"
-              aria-selected="false"
-              aria-controls="pane-2"
-              aria-labelledby="pane-id-2"
-            >
+          <li
+            id="tab2"
+            role="tab"
+            aria-selected="false"
+            aria-controls="pane-2"
+            aria-labelledby="pane-id-2"
+            data-target="pane-2"
+            tabindex="-1"
+          >
+            <a href="#tab2">
               <span aria-hidden="true" class="icon is-small">
                 <i class="fab fa-superpowers"> </i>
               </span>
               <span id="pane-id-2">Team</span>
             </a>
           </li>
-          <li id="tab3" role="tab">
-            <a
-              data-target="pane-3"
-              data-id="3"
-              href="#tab3"
-              tabindex="0"
-              aria-selected="false"
-              aria-controls="pane-2"
-              aria-labelledby="pane-id-3"
-            >
+          <li
+            id="tab3"
+            role="tab"
+            aria-selected="false"
+            aria-controls="pane-2"
+            aria-labelledby="pane-id-3"
+            data-target="pane-3"
+            tabindex="-1"
+          >
+            <a href="#tab3">
               <span aria-hidden="true" class="icon is-small">
                 <i class="fa fa-film"></i>
               </span>
@@ -464,12 +465,8 @@ <h3 class="subtitle">We are always in touch we the outside world</h3>
       </div>
     </section>
 
-    <section
-      class="tab-content container"
-      role="tabpanel"
-      aria-label="Topics tab panel"
-    >
-      <div class="level tab-pane is-active" id="pane-1">
+    <section class="tab-content container" aria-label="Topics tab panel">
+      <div role="tabpanel" class="level tab-pane is-active" id="pane-1">
         <div class="container">
           <div class="columns features">
             <div class="column is-4">
@@ -570,7 +567,7 @@ <h3 class="subtitle">We are always in touch we the outside world</h3>
         </div>
       </div>
 
-      <div class="tab-pane" id="pane-2">
+      <div role="tabpanel" class="tab-pane" id="pane-2">
         <div class="columns medias">
           <div class="column">
             <div class="media">
@@ -643,7 +640,7 @@ <h3 class="subtitle">We are always in touch we the outside world</h3>
         </div>
       </div>
 
-      <div class="tab-pane" id="pane-3">
+      <div role="tabpanel" class="tab-pane" id="pane-3">
         <div class="columns is-centered">
           <div class="column is-three-quarters">
             <h2 class="title has-text-centered">Inspired video</h2>
diff --git a/js/custom.js b/js/custom.js
index 71576a5..ec31ac7 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -1,21 +1,21 @@
-function toggleTab(selectedNav, targetId) {
-  const navEls = document.querySelectorAll("#nav li a");
-  navEls.forEach(function (navEl) {
-    const id = navEl.dataset.id;
-    if (id === selectedNav) {
-      navEl.parentElement.classList.add("is-active");
-      navEl.setAttribute("aria-selected", "true");
-    } else {
-      if (navEl.parentElement.classList.contains("is-active")) {
-        navEl.parentElement.classList.remove("is-active");
-        navEl.setAttribute("aria-selected", "false");
-      }
-    }
+function changeTabs(e) {
+  e.stopPropagation();
+  const target = e.currentTarget;
+  const parent = target.parentNode;
+  const grandparent = parent.parentNode;
+  grandparent.querySelectorAll('[aria-selected="true"]').forEach((t) => {
+    t.setAttribute("aria-selected", false);
+    t.classList.remove("is-active");
   });
 
+  // Set this tab as selected
+  target.setAttribute("aria-selected", true);
+  target.classList.add("is-active");
+
   const tabs = document.querySelectorAll(".tab-pane");
   tabs.forEach(function (tab) {
-    tab.style.display = tab.id === targetId ? "block" : "none";
+    tab.style.display =
+      tab.id === e.currentTarget.dataset.target ? "block" : "none";
   });
 }
 
@@ -34,31 +34,31 @@ function toggleTab(selectedNav, targetId) {
     region.innerText = `Notification count ${notificationCount}`;
   }, 60000);
 
-  document.querySelectorAll("#nav li a").forEach(function (navEl) {
-    navEl.onclick = function () {
-      toggleTab(this.dataset.id, this.dataset.target);
-    };
+  const tabs = document.querySelectorAll('[role="tab"]');
+  const tabList = document.querySelector('[role="tablist"]');
+
+  tabs.forEach((tab) => {
+    tab.addEventListener("click", changeTabs);
   });
+  let tabFocus = 0;
 
-  const items = document.querySelectorAll("#nav li a");
-  items.forEach(function (navEl) {
-    navEl.addEventListener("keydown", function (event) {
-      const num = Number(event.target.dataset.id);
-      if (event.keyCode === 39) {
-        event.preventDefault();
-        console.log(num);
-        if (items[num]) {
-          items[num].click();
+  tabList.addEventListener("keydown", (e) => {
+    if (e.keyCode === 39 || e.keyCode === 37) {
+      tabs[tabFocus].setAttribute("tabindex", -1);
+      if (e.keyCode === 39) {
+        tabFocus++;
+        if (tabFocus >= tabs.length) {
+          tabFocus = 0;
         }
-      } else if (event.keyCode === 37) {
-        event.preventDefault();
-        if (items[num - 2]) {
-          items[num - 2].click();
+      } else if (e.keyCode === 37) {
+        tabFocus--;
+        if (tabFocus < 0) {
+          tabFocus = tabs.length - 1;
         }
-      } else if (event.keyCode === 13 || event.keyCode === 32) {
-        event.preventDefault();
-        items[num - 1].click();
       }
-    });
+      tabs[tabFocus].setAttribute("tabindex", 0);
+      tabs[tabFocus].focus();
+      tabs[tabFocus].click();
+    }
   });
 })();

From 4f3c7077495193343ffb6107ef119e2b9acd811b Mon Sep 17 00:00:00 2001
From: Sergey Hovakimyan <sergey_hovakimyan@epam.com>
Date: Sat, 9 Jul 2022 20:25:17 -0700
Subject: [PATCH 8/9] feat: add menu items

---
 css/styles.css | 37 +++++++++++++++++++++++++++
 index.html     | 69 +++++++++++++++++++++++++++++++++++++++++++++-----
 js/custom.js   | 28 ++++++++++++++++++++
 3 files changed, 127 insertions(+), 7 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 212f849..10e9dc6 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -269,4 +269,41 @@ a:focus {
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+
+
+#navbarMenu.navbar-menu {
+  position: relative;
+}
+
+.navbar-item .sub-menu{
+  position: absolute;
+  display: none;
+  background-color: #fff;
+  padding: 0.7rem;
+  top: 3.5rem;
+  border-radius: 0.2rem;
+  line-height: 1.7;
+  white-space: nowrap;
+}
+
+.navbar-item .sub-menu li {
+  width: 100%;
+}
+
+.navbar-item .sub-menu [role="separator"] {
+  width: 100%;
+  height: 2px;
+  background-color: #0000003a;
+  margin-top: 3px;
+  margin-bottom: 3px;
+}
+
+.navbar-item .sub-menu a {
+  padding: 5px;
+}
+
+.navbar-item .sub-menu li:hover {
+  background-color: #f3f3f3;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 68d3d11..50bd25f 100644
--- a/index.html
+++ b/index.html
@@ -40,8 +40,8 @@
               Skip navigation Link
             </a>
             <nav id="navbarMenu" class="navbar-menu" role="navigation">
-              <ul class="navbar-end">
-                <li class="navbar-item">
+              <ul class="navbar-end" role="menu">
+                <li class="navbar-item" role="menuitem">
                   <button class="button is-white is-outlined">
                     <span class="icon" aria-hidden="true">
                       <i class="fa fa-home"></i>
@@ -49,23 +49,78 @@
                     <span>Home</span>
                   </button>
                 </li>
-                <li class="navbar-item">
-                  <button class="button is-white is-outlined">
+                <li class="navbar-item with-menu" role="menuitem">
+                  <button
+                    class="button is-white is-outlined"
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                  >
                     <span class="icon" aria-hidden="true">
                       <i class="fab fa-superpowers"></i>
                     </span>
-                    <span>Examples</span>
+                    <span>Administration</span>
+                    <span class="icon angle" aria-hidden="true">
+                      <i class="fas fa-angle-down"></i>
+                    </span>
                   </button>
+                  <ul
+                    class="sub-menu"
+                    title="Style"
+                    tabindex="-1"
+                    role="menu"
+                    aria-label="Administration"
+                  >
+                    <li role="menuitem" tabindex="-1">
+                      <a href="#">Administration</a>
+                    </li>
+                    <li role="menuitem" tabindex="-1">
+                      <a href="#">Team Settings</a>
+                    </li>
+                    <li role="menuitem" tabindex="-1">
+                      <a href="#">Manage Your Team</a>
+                    </li>
+                    <li role="menuitem" tabindex="-1">
+                      <a href="#">Invitations</a>
+                    </li>
+                    <li role="separator"></li>
+                    <li role="menuitem" tabindex="-1">
+                      <a href="#">Authentication</a>
+                    </li>
+                  </ul>
                 </li>
-                <li class="navbar-item">
+                <li class="navbar-item with-menu" role="menuitem">
                   <button class="button is-white is-outlined">
                     <span class="icon" aria-hidden="true">
                       <i class="fa fa-book"></i>
                     </span>
                     <span>Documentation</span>
+                    <span class="icon angle" aria-hidden="true">
+                      <i class="fas fa-angle-down"></i>
+                    </span>
                   </button>
+                  <ul
+                    class="sub-menu"
+                    title="Style"
+                    tabindex="-1"
+                    role="menu"
+                    aria-label="Documentation"
+                  >
+                    <li role="menuitem" tabindex="-1">
+                      <a href="#">Documentation</a>
+                    </li>
+                    <li role="menuitem" tabindex="-1">
+                      <a href="#">Team Settings</a>
+                    </li>
+                    <li role="menuitem" tabindex="-1">
+                      <a href="#">Invitations</a>
+                    </li>
+                    <li role="separator"></li>
+                    <li role="menuitem" tabindex="-1">
+                      <a href="#">Authentication</a>
+                    </li>
+                  </ul>
                 </li>
-                <li class="navbar-item">
+                <li class="navbar-item" role="menuitem">
                   <button class="button is-white is-outlined">
                     <span class="icon" aria-hidden="true">
                       <i class="fab fa-github"></i>
diff --git a/js/custom.js b/js/custom.js
index ec31ac7..d318a1c 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -19,6 +19,23 @@ function changeTabs(e) {
   });
 }
 
+function menuItemHandler(e) {
+  const current = e.currentTarget;
+  const menuItems = document.querySelectorAll(
+    "#navbarMenu .navbar-item.with-menu"
+  );
+  menuItems.forEach((item) => {
+    item.children[0].setAttribute("aria-expanded", false);
+    const classes = item.querySelector(".fas").classList;
+    classes.remove("fa-angle-up");
+    classes.add("fa-angle-down");
+    item.querySelector(".sub-menu").style.display = "none";
+  });
+  current.children[0].setAttribute("aria-expanded", true);
+  current.querySelector(".fas").classList.add("fa-angle-up");
+  current.querySelector(".sub-menu").style.display = "block";
+}
+
 (function () {
   const burger = document.querySelector(".burger");
   const menu = document.querySelector("#" + burger.dataset.target);
@@ -61,4 +78,15 @@ function changeTabs(e) {
       tabs[tabFocus].click();
     }
   });
+
+  // MENU
+
+  const menuItems = document.querySelectorAll(
+    "#navbarMenu .navbar-item.with-menu"
+  );
+  menuItems.forEach((item) => {
+    if (item.children.length > 1) {
+      item.addEventListener("click", menuItemHandler);
+    }
+  });
 })();

From c2b4399f341a33473d31b07568d787cc520a3932 Mon Sep 17 00:00:00 2001
From: Sergey Hovakimyan <sergey_hovakimyan@epam.com>
Date: Sat, 9 Jul 2022 20:51:24 -0700
Subject: [PATCH 9/9] feat: add a11y for menu items

---
 index.html   | 17 +++++++----------
 js/custom.js | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 50bd25f..bc77ac5 100644
--- a/index.html
+++ b/index.html
@@ -74,17 +74,14 @@
                       <a href="#">Administration</a>
                     </li>
                     <li role="menuitem" tabindex="-1">
-                      <a href="#">Team Settings</a>
+                      <a href="#about">About</a>
                     </li>
                     <li role="menuitem" tabindex="-1">
-                      <a href="#">Manage Your Team</a>
-                    </li>
-                    <li role="menuitem" tabindex="-1">
-                      <a href="#">Invitations</a>
+                      <a href="#keyFeatures">Key Features</a>
                     </li>
                     <li role="separator"></li>
                     <li role="menuitem" tabindex="-1">
-                      <a href="#">Authentication</a>
+                      <a href="#topics">Topics</a>
                     </li>
                   </ul>
                 </li>
@@ -106,17 +103,17 @@
                     aria-label="Documentation"
                   >
                     <li role="menuitem" tabindex="-1">
-                      <a href="#">Documentation</a>
+                      <a href="#services">Services</a>
                     </li>
                     <li role="menuitem" tabindex="-1">
-                      <a href="#">Team Settings</a>
+                      <a href="#about">About</a>
                     </li>
                     <li role="menuitem" tabindex="-1">
-                      <a href="#">Invitations</a>
+                      <a href="#keyFeatures">Key Features</a>
                     </li>
                     <li role="separator"></li>
                     <li role="menuitem" tabindex="-1">
-                      <a href="#">Authentication</a>
+                      <a href="#topics">Topics</a>
                     </li>
                   </ul>
                 </li>
diff --git a/js/custom.js b/js/custom.js
index d318a1c..bf2d607 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -89,4 +89,37 @@ function menuItemHandler(e) {
       item.addEventListener("click", menuItemHandler);
     }
   });
+
+  document.querySelectorAll("#navbarMenu .sub-menu").forEach((item) => {
+    const validChildren = Object.values(item.children).filter(
+      (ch) => ch.role !== "separator"
+    );
+
+    let menuItemFocus = 0;
+
+    item.addEventListener("keydown", (e) => {
+      if (e.keyCode === 38 || e.keyCode === 40) {
+        e.preventDefault();
+        validChildren[menuItemFocus].setAttribute("tabindex", -1);
+        if (e.keyCode === 40) {
+          menuItemFocus++;
+          if (menuItemFocus >= validChildren.length) {
+            menuItemFocus = 0;
+          }
+        } else if (e.keyCode === 38) {
+          menuItemFocus--;
+          if (menuItemFocus < 0) {
+            menuItemFocus = validChildren.length - 1;
+          }
+        }
+        validChildren[menuItemFocus].setAttribute("tabindex", 0);
+        validChildren[menuItemFocus].focus();
+      }
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        e.preventDefault();
+        console.log(validChildren[menuItemFocus].firstElementChild);
+        validChildren[menuItemFocus].firstElementChild.click();
+      }
+    });
+  });
 })();
