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 */  { 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)
Remove the line that says
Sorry, Can't find the attachment.
he mean's the line that says:
