This is a solution to the News homepage challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Vanilla Javascript
- Font Family - For fonts
<div class="mobile-nav-bar transition" id="mobile-nav">
<div class="mobile-container">
<button id="close-menu" class="close-menu"><img src="images/icon-menu-close.svg" alt=""></button>
<nav class="mobile-nav">
<ul>
<li class="nav-links"><a href="#">Home</a></li>
<li class="nav-links"><a href="#">New</a></li>
<li class="nav-links"><a href="#">Popular</a></li>
<li class="nav-links"><a href="#">Trending</a></li>
<li class="nav-links"><a href="#">Categories</a></li>
</ul>
</nav>
</div>
</div>
.mobile-nav-bar {
display: block;
height: 100vh;
width: 255px;
background-color: var(--body-color);
position: fixed;
top: 0;
right: -255px;
transition: all 550ms ease-in-out;
}
- Frontend Mentor - @Trayshmhirk
- Twitter - @TrayShmhirk01