@Kulyk-Volodymyr
Posted
Nice solution, congrats!
I have two independent ideas to make this page a little different)
-
For
header,mainand.third-sectionapplymax-width: 1150px; margin:auto. -
Add
justify-content: space-betweento.third-sectionand change item's styling.
In terms of semantics, .third-section must be inside main. Also, you don't need to use article to make a burger menu. You can reuse ul of header.
@udayagupta
Posted
@Kulyk-Volodymyr I will surely make the required changes but about the burger menu I have used aside not article tag. Here's the code for it
<aside class="side-bar-section hidden">
<nav>
<div class="menu-close-div">
<button class="menu-close" onclick="closeSideBar()">
<img src="assets/images/icon-menu-close.svg" alt="">
</button>
</div>
<ul class="side-bar clr-dark-grayish-blue ">
<li class="item transition hover-clr-soft-red">Home</li>
<li class="item transition hover-clr-soft-red">New</li>
<li class="item transition hover-clr-soft-red">Popular</li>
<li class="item transition hover-clr-soft-red">Trending</li>
<li class="item transition hover-clr-soft-red">Categories</li>
</ul>
</nav>
</aside>
If you believe it needs changes, let me know
Thank you!
@Kulyk-Volodymyr
Posted
I saw that it was aside but typed article)
I suggest to reuse nav in header and don't make aside. On large screen are hidden burger button and nav with position: relative. On small screen nav has position: absolute and is controlled by button. There are different ways to control nav: with CSS or JS. In CSS burger button is label of hidden input type="checkbox". In JS this button can be button or div.
Marked as helpful
