diff --git a/css/styles.css b/css/styles.css
index 2c89671..10e9dc6 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -175,4 +175,135 @@ 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;
+}
+
+.breadcrumb {
+  max-width: 1344px;
+  margin: 0 auto;
+  display: flex;
+}
+p 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;
+}
+#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;
+}
+
+
+
+#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 fa627dd..bc77ac5 100644
--- a/index.html
+++ b/index.html
@@ -1,1176 +1,1603 @@
 <!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" role="navigation">
+              <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>
+                    </span>
+                    <span>Home</span>
+                  </button>
+                </li>
+                <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>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="#about">About</a>
+                    </li>
+                    <li role="menuitem" tabindex="-1">
+                      <a href="#keyFeatures">Key Features</a>
+                    </li>
+                    <li role="separator"></li>
+                    <li role="menuitem" tabindex="-1">
+                      <a href="#topics">Topics</a>
+                    </li>
+                  </ul>
+                </li>
+                <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="#services">Services</a>
+                    </li>
+                    <li role="menuitem" tabindex="-1">
+                      <a href="#about">About</a>
+                    </li>
+                    <li role="menuitem" tabindex="-1">
+                      <a href="#keyFeatures">Key Features</a>
+                    </li>
+                    <li role="separator"></li>
+                    <li role="menuitem" tabindex="-1">
+                      <a href="#topics">Topics</a>
+                    </li>
+                  </ul>
+                </li>
+                <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>
+                    </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>
-            <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="subtitle has-text-white">
+              Would you like to get the latest news?
             </div>
-          </div>
-        </div>
-
-        <div class="column is-4">
-          <div class="card is-shady">
-            <div class="card-image has-text-centered">
-              <i class="fab fa-empire"></i>
+            <div
+              id="notification"
+              aria-label="Notifications"
+              role="region"
+              aria-live="polite"
+            >
+              Notification count 0
             </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 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>
+    <section aria-label="BreadCrumbs">
+      <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>
+    </section>
 
-        <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>
+    <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 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>
+            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>
-  </div>
 
-  <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 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 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>
+    </main>
 
-  <div class="tab-content container">
-    <div class="tab-pane is-active" id="pane-1" class="level">
-      <div class="container">
-        <div class="columns features">
+    <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 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>
+
+        <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" aria-labelledby="section-3-title">
+      <div class="hero-body">
+        <div class="container">
+          <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 id="nav" class="tabs is-boxed is-centered main-menu">
+        <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"
+            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"
+            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>
+              <span id="pane-id-3">Video</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </section>
+
+    <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">
+              <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 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
+                      volutpat ac tincidunt vitae semper quis. Accumsan tortor
+                      posuere ac ut consequat semper viverra nam.
+                    </p>
+                    <button
+                      aria-haspopup="true"
+                      class="button is-link modal-button"
+                      data-target="modal-image1"
+                    >
+                      Image modal
+                    </button>
+                  </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 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
+                      lacinia at quis risus. Faucibus turpis in eu mi bibendum
+                      neque egestas cmonsu songue. Phasellus vestibulum lorem
+                      sed risus.
+                    </p>
+                    <button
+                      aria-haspopup="true"
+                      class="button is-link modal-button"
+                      data-target="modal-card"
+                    >
+                      Modal Card
+                    </button>
+                  </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 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.
+                      Libero id faucibus nisl tincidunt eget nullam. Commodo
+                      viverra maecenas accumsan lacus vel facilisis.
+                    </p>
+                    <button
+                      aria-haspopup="true"
+                      class="button is-link modal-button"
+                      data-target="modal-image2"
+                    >
+                      Image modal
+                    </button>
+                  </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 role="tabpanel" 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 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>
+            <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"
+      aria-labelledby="section-4-title"
+    >
+      <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 id="section-4-title" class="title is-2">Upcoming events</h2>
+          <h3 class="subtitle is-5">Outcoming dates for the best options</h3>
         </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>
+              <h3 class="subtitle">Fri 27 Nov 2016</h3>
+              <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>
+              <h3 class="subtitle">Fri 27 Nov 2016</h3>
+              <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>
+              <h3 class="subtitle">Fri 27 Nov 2016</h3>
+              <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>
+              <h3 class="subtitle">Fri 27 Nov 2016</h3>
+              <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>
+              <h3 class="subtitle">Fri 27 Nov 2016</h3>
+              <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>
+              <h3 class="subtitle">Fri 27 Nov 2016</h3>
+              <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" aria-labelledby="section-5-title">
       <div class="section-heading has-text-centered">
-        <div class="title is-2">Photos from past events</div>
+        <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 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">
+                <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>
-              <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">
+                <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>
-            </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">
+                <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>
-            </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">
+                <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>
-            </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"
+      aria-labelledby="section-6-title"
+    >
+      <div class="container">
+        <div class="section-heading has-text-centered">
+          <h2 id="section-6-title" 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">
+                  <h3 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>
+                  </h3>
                 </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">
+                  <h3 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>
+                  </h3>
                 </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">
+                  <h3 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>
+                  </h3>
                 </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">
+                  <h3 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>
+                  </h3>
                 </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" aria-labelledby="section-7-title">
+      <div class="container">
+        <div class="section-heading has-text-centered">
+          <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>
         </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"
+      aria-labelledby="section-8-title"
+    >
+      <div class="container">
+        <div class="section-heading has-text-centered">
+          <h2 id="section-8-title" class="title is-2">Contact us</h2>
+          <h3 class="subtitle is-5">Don't hesitate, ask anything</h3>
         </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 aria-hidden="true" class="icon is-small is-left">
+                <i class="fas fa-user"></i>
+              </span>
+              <span aria-hidden="true" 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 aria-hidden="true" class="icon is-small is-left">
+                <i class="fas fa-envelope"></i>
+              </span>
+              <span aria-hidden="true" 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 class="field">
+            <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>
-            </div>
+            </fieldset>
           </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 type="submit" 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 type="reset" 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" aria-label="Github">
+              <i aria-hidden="true" class="fab fa-github-alt fa-2x"></i>
+            </a>
+            <a href="#" tabindex="0" aria-label="Youtube">
+              <i aria-hidden="true" class="fab fa-youtube fa-2x"></i>
+            </a>
+            <a href="#" tabindex="0" aria-label="Facebook">
+              <i aria-hidden="true" class="fab fa-facebook fa-2x"></i>
+            </a>
+            <a href="#" tabindex="0" aria-label="Twitter">
+              <i aria-hidden="true" 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 role="dialog" 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 role="dialog" 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 role="dialog" 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>
diff --git a/js/custom.js b/js/custom.js
index 36a050e..bf2d607 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -1,38 +1,125 @@
-(function() {
-  var burger = document.querySelector(".burger");
-  var menu = document.querySelector("#" + burger.dataset.target);
-  burger.addEventListener("click", function() {
+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 === e.currentTarget.dataset.target ? "block" : "none";
+  });
+}
+
+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);
+  burger.addEventListener("click", function () {
     burger.classList.toggle("is-active");
     menu.classList.toggle("is-active");
   });
-})();
 
-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");
+  let notificationCount = 0;
+  const region = document.getElementById("notification");
+  setInterval(() => {
+    notificationCount += 1;
+    region.innerText = `Notification count ${notificationCount}`;
+  }, 60000);
+
+  const tabs = document.querySelectorAll('[role="tab"]');
+  const tabList = document.querySelector('[role="tablist"]');
+
+  tabs.forEach((tab) => {
+    tab.addEventListener("click", changeTabs);
+  });
+  let tabFocus = 0;
+
+  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 (e.keyCode === 37) {
+        tabFocus--;
+        if (tabFocus < 0) {
+          tabFocus = tabs.length - 1;
+        }
       }
+      tabs[tabFocus].setAttribute("tabindex", 0);
+      tabs[tabFocus].focus();
+      tabs[tabFocus].click();
     }
   });
 
-  var tabs = document.querySelectorAll(".tab-pane");
+  // MENU
 
-  tabs.forEach(function(tab) {
-    if (tab.id == targetId) {
-      tab.style.display = "block";
-    } else {
-      tab.style.display = "none";
+  const menuItems = document.querySelectorAll(
+    "#navbarMenu .navbar-item.with-menu"
+  );
+  menuItems.forEach((item) => {
+    if (item.children.length > 1) {
+      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();
+      }
+    });
+  });
+})();
