<nav class="saiyan-navbar"> <div class="navbar__brand-container"> <a class="navbar__brand__name navbar__links" href="#">Saiyan Merch</a> </div> <div class="navbar__search"> <input class="navbar__searchbar" type="text" placeholder="Search Items" /> </div> <div class="navbar__list-container"> <ul class="navbar__list"> <li class="navbar__items"> <a href="#"> <div class="navbar__icon-badge"> <span class="navbar__badge__icon" ><i class="fa-solid fa-user"></i ></span> </div> </a> </li> <li class="navbar__items"> <a href="#"> <div class="navbar__icon-badge"> <span class="navbar__badge__icon" ><i class="fa-solid fa-heart"></i ><span class="navbar__badge__icon-badge">3</span></span > </div> </a> </li> <li class="navbar__items"> <a href="#"> <div class="navbar__icon-badge"> <span class="navbar__badge__icon" ><i class="fas fa-shopping-cart"></i ><span class="navbar__badge__icon-badge">2</span></span > </div> </a> </li> </ul> </div> </nav>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter