<!-- =====>> Header <<===== --> <header class="header"> <!-- container --> <div class="container mobile"> <!-- logo --> <a href="index.html" class="logo"> <img src="#" alt="Real Estate Logo" /> </a> <!-- /logo --> <!-- main nav --> <nav class="main-nav"> <ul class="nav-list"> <li><a href="#home" class="nav-link active">Home</a></li> <li><a href="#agents" class="nav-link">Agents</a></li> <li><a href="#features" class="nav-link">About us</a></li> <li><a href="#property" class="nav-link">Listings</a></li> <li><a href="#" class="nav-link">Blog</a></li> </ul> </nav> <!-- /main nav --> <!-- nav cta --> <div class="nav-btns"> <a href="" class="btn btn--link">Sign in</a> <a href="" class="btn btn--primary">Sign up</a> <a href="#" class="mobile-btn"> <ion-icon name="lock-open-outline" class="mobile-icon signin-icon" ></ion-icon> </a> <a href="#" class="mobile-btn"> <ion-icon name="log-in-outline" class="mobile-icon signup-icon" ></ion-icon> </a> </div> <!-- /nav cta --> <!-- hamburger --> <div class="hamburger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> <!-- /hamburger --> </div> <!-- /container --> </header> <!-- =====>> /Header <<===== -->
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