Searcher

• Posted: January 15, 2016
• / By: Magda
• / In:

HTML markup

CSS

<div class="ct-menu-searcher"> <div class="ct-menu-searcher__content"> <button type="button" class="ct-menu-searcher__button ct-js-close-button ct-js-menu-searcher__button morph-button-close"> close <i class="fa fa-times"></i> </button> <p> <i class="fa fa-search"></i> Search Anytime By Typing... <i class="fa fa-question-circle"></i> </p> <form id="main-searcher" method="#" action="#"> <label for="main-searcher-input" class="sr-only">Search</label> <input type="search" id="main-searcher-input" placeholder="Search"> <button type="submit" class="ct-menu-searcher__find-button"><i class="fa fa-search"></i></button> </form> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<div class="ct-menu-searcher">     <div class="ct-menu-searcher__content">       <button type="button" class="ct-menu-searcher__button ct-js-close-button ct-js-menu-searcher__button morph-button-close">         close         <i class="fa fa-times"></i>       </button>       <p>         <i class="fa fa-search"></i>         Search Anytime By Typing...         <i class="fa fa-question-circle"></i>       </p>       <form id="main-searcher" method="#" action="#">         <label for="main-searcher-input" class="sr-only">Search</label>         <input type="search" id="main-searcher-input" placeholder="Search">         <button type="submit" class="ct-menu-searcher__find-button"><i class="fa fa-search"></i></button>       </form>     </div>   </div>

Screenshot

Searcher example