const skillsLink = document.querySelector(".page-header li:nth-child(1) a");
const skillsClose = document.querySelector(".skills-close");
const windowOpened = "window-opened";
skillsLink.addEventListener("click", (e) => {
e.preventDefault();
document.body.classList.toggle(windowOpened);
});
skillsClose.addEventListener("click", () => {
document.body.classList.toggle(windowOpened);
});.title {
text-align: center;
margin: 10px;
font-family: 'Mansalva', cursive;
}
/* Define color variables */
:root {
--black: #1a1a1a;
--white: rgb(255, 255, 255) ;
--red: #e93451;
--transition-delay: 0.85s;
--transition-delay-step: 0.3s;
}
/* Reset CSS Styles */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
button {
background: none;
border: none;
cursor: pointer;
outline: none;
}
.d-flex {
display: flex;
}
...
...
<small class="position-absolute creator">Made with <span>❤</span> by <a href="http://georgemartsoukos.com/" target="_blank">George Martsoukos</a>
</small>
</section>
</body>
<script src="script.js"></script>
</body>
</html>Seeking advice from experienced web developers as I explore the creation of a portfolio app. When clicking on the 'Skills' tab on mobile devices, it only moves instead of disappearing. How can I make the tab completely disappear when the X is clicked?--------------------------------------------------------------------------------------------------------------------------------------------