Css stopped working in codepen.io!!!

#codepen #css #webdev #programming

Hi folks, I am a noob in css and try to create a dynamic navigation bar from youtube refrence. But after [.navigation ul li a] this line of css it stopeed rendering. No effects so far. Please help me out. . Here's my pen.

HTML code
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>


<div class="navigation">
  <ul>
    <li class="list activate">
      <a href="#">
        <span class="icon"></span>
        <ion-icon name="home-outline"></ion-icon>
        <span class="text">Home</span>
      </a>
    </li>
    <li class="list">
      <a href="#">
        <span class="icon"></span>
        <ion-icon name="person-outline"></ion-icon>
        <span class="text">Profile</span>
      </a>
    </li>
    <li class="list">
      <a href="#">
        <span class="icon"></span>
        <ion-icon name="chatbubble-outline"></ion-icon>
        <span class="text">Massage</span>
      </a>
    </li>
    <li class="list">
      <a href="#">
        <span class="icon"></span>
        <ion-icon name="image-outline"></ion-icon>
        <span class="text">Photo</span>
      </a>
    </li>

    <li class="list">
      <a href="#">
        <span class="icon"></span>
        <ion-icon name="settings-outline"></ion-icon>
        <span class="text">Setting</span>
      </a>
    </li>
    <div class="indecator">
    </div>
  </ul>
</div>

CSS Code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "popins", sans-serif;
}

:root  /* :root is a CSS pseudo-class selector used to select the element that represents the root of the document. In HTML, this is always the <html> element, since it is the highest-level ancestor of all other elements on the page */ {
  --clr: #222327; /*  variable in css starts with -- */
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--clr);
}

.navigation {
  position: relative;
  width: 400px;
  height: 70px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.navigation ul {
  display: flex;
  width: 350px;
}

.navigation ul li {
  position: relative;
  list-style: none;
  width: 70px;
  height: 70px;
  z-index: 1;
}

.navigation ul li a  /*not responding from here till end */
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or5vnvsaowd5jpeb6302.png)
 {   
  position: relative;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  font-weight: 500;
}

.navigation ul li a .icon {
  position: relative;
  display: block;
  line-height: 75px;
  font-size: 1.5em;
  text-align: center;
  transition: 0.5s;
  color: var(--clr);
}

.navigation ul li:active a .icon
{
  tranform: translateY(-50px);
}

.navigation ul li a .text{
  position: relative;
  color: var(--clr);
  font-weight: 400;
  font-size: 1.75em;
  latter-spacing: 0.5em;
  transition: 0.5s;
  opacity: 0;
}

.navigation ul li:active a .text
{
  opacity: 1;
  transform: translateY(-10px);
}

.indicator
{
  position: absolute;
  width: 70px;
  height: 70px;
  background: #29fd53;
  border-radius: 50%;
  border: 2px solid var(--clr);
  transition: 0.5s;
}

.indicator::before
{
  content: '';
  position: absolute;
  top: 50%;
  ledt: -20px;
  width: 20px;
  height: 20px;
  background: red;
}

Top comments (3)

IroncladDev • Dec 9 '21

.navigation ul li a  /*not responding from here till end */
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or5vnvsaowd5jpeb6302.png)
 {   
  position: relative;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  font-weight: 500;
}