Wavy

Button


                    <button class="btn">Button</button>

                    <div class="btn">Button</div>

                    <a href="#" class="btn">Button</a>

                    <input type="submit" value="Button" class="btn" />


                    <div class="search-box rounded">

                      <input type="search" />

                      <input type="submit" value="search" />

                    </div>

col


                            <div class="row">

                                   <div class="col">col</div>

                            </div>


        
                            <div class="row">

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                            </div>


        
                            <div class="row">

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                            </div>


        
                            <div class="row">

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                            </div>


        
                            <div class="row">

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                            </div>


        
                            <div class="row">

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                                    <div class="col">col</div>

                            </div>


        
                            <div class="row">

                                    <div class="col">col</div>

                            </div>

Topic One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ante velit, tristique ut tincidunt non, vestibulum quis erat. Sed eget pulvinar tellus, et sodales urna. Aenean pretium, orci sit amet.

Topic Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ante velit, tristique ut tincidunt non, vestibulum quis erat. Sed eget pulvinar tellus, et sodales urna. Aenean pretium, orci sit amet.


                    <div class="accordion">

                            <!-- Item 1 -->

                            <div class="accordion-tab">

                                    <input type="checkbox" id="topic-1" name="toggle" />

                                    <label class="topic" for="topic-1">Topic One</label>

                                    <div class="accordion-content">

                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ante velit, tristique ut tincidunt non, vestibulum quis erat. Sed eget pulvinar tellus, et sodales urna. Aenean pretium, orci sit amet.</p>

                                    </div>

                            </div>


                
                            <!-- Item 2 -->

                            <div class="accordion-tab">

                                    <input type="checkbox" id="topic-2" name="toggle" />

                                    <label class="topic" for="topic-2">Topic Two</label>

                                    <div class="accordion-content">

                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ante velit, tristique ut tincidunt non, vestibulum quis erat. Sed eget pulvinar tellus, et sodales urna. Aenean pretium, orci sit amet.</p>

                                    </div>

                            </div>

                    </div>

Back face

Front face

Back face

Front face


                    <div class="flipcard">

                            <div class="back">

                                    Back face

                            </div>

                            <div class="front">

                                    Front face

                            </div>

                    </div>


                    
                    <div class="flipcard">

                            <div class="back">

                                    Back face

                            </div>

                            <div class="front">

                                    Front face

                            </div>

                    </div>

Home Decor

Browse through our list of Home Decor Items

Furniture

Flash Sale on Living Room and Bedroom Furniture

Kitchen

Bring the best out of the masterchef in you!!


                    <div class="tab-component">

                            <div class="tab">

                                    <input type="radio" id="tab-1" name="tabs" checked/>

                                    <label for="tab-1">Home Decor</label>

                                    <div class="content">

                                            <p>Browse through our list of Home Decor Items</p>

                                    </div>

                            </div>


                
                            <div class="tab">

                                    <input type="radio" id="tab-2" name="tabs" />

                                    <label for="tab-2">Furniture</label>

                                    <div class="content">

                                            <p>Flash Sale on Living Room and Bedroom Furniture</p>

                                    </div>

                            </div>


                
                            <div class="tab">

                                    <input type="radio" id="tab-3" name="tabs" />

                                    <label for="tab-3">Kitchen</label>

                                    <div class="content">

                                            <p>Bring the best out of the masterchef in you!!</p>

                                    </div>

                            </div>

                    </div>


                    <header class="navbar row">

                            <div class="col">

                                    <a href="#" id="logo">logo</a>

                            </div>

                            <div class="col">

                                    <nav>

                                            <a href="#menu-list" id="menu-icon"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></a>

                                
                                            <ul id="menu-list">

                                                    <li><a href="#">Home</a></li>

                                                    <li class="drop-down">

                                                            <a href="#">Articles</a>

                                                            <ul class="sub-list">

                                                                    <li><a href="#">Item 1</a></li>

                                                                    <li><a href="#">Item 2</a></li>

                                                                    <li><a href="#">Item 3</a></li>

                                                            </ul>

                                                    </li>

                                                    <li class="drop-down">

                                                            <a href="#">Projects</a>

                                                            <ul class="sub-list">

                                                                    <li><a href="#">Item 1</a></li>

                                                                    <li><a href="#">Item 2</a></li>

                                                                    <li><a href="#">Item 3</a></li>

                                                                    <li><a href="#">Item 4</a></li>

                                                            </ul>

                                                    </li>

                                                    <li><a href="#">About Me</a></li>

                                                    <li><a href="#">Contact</a></li>

                                            </ul>

                                    </nav>

                            </div>

                    </header>


                    <footer class="bottom-footer">

                            <div class="row">

                                    <div class="col">

                                            <ul>

                                                    <li>

                                                            <h3>Links</h3>

                                                    </li>

                                                    <li><a href="#">FAQ's</a></li>

                                                    <li><a href="#">Feedback</a></li>

                                                    <li><a href="#">Terms of Use</a></li>

                                                    <li><a href="#">Bitcoin</a></li>

                                            </ul>

                                            <hr>

                                    </div>


                
                                    <div class="col">

                                            <ul>

                                                    <li>

                                                            <h3>Stay Tuned</h3>

                                                    </li>

                                                    <li>Connect with us and stay in the loop.</li>

                                                    <li>

                                                            <a href="#"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a>

                                                            <a href="#"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a>

                                                    </li>

                                           </ul>

                                           <hr>

                                    </div>


                
                                    <div class="col">

                                            <ul>

                                                    <li>

                                                            <h3>Email Updates</h3>

                                                    </li>

                                                    <li>Be the first to hear about our announcements.</li>

                                                    <li>

                                                            <div class="submit-email">

                                                                    <input type="email" />

                                                                    <button>

                                                                <i class="fa fa-envelope-o" aria-hidden="true"></i>

                                                            </button>

                                                            </div>

                                                    </li>

                                            </ul>

                                            <hr>

                                    </div>


                
                                    <div class="col">

                                            <ul>

                                                    <li>

                                                            <h3>Contact Us</h3>

                                                    </li>

                                                    <li>Questions? We've got answers. Try us.</li>

                                                    <li><a href="#" class="btn">Email Us</a></li>

                                            </ul>

                                    </div>

                            </div>


                            <div class="row">

                                    <div class="col">

                                            <p>Copyright &copy; Ralph Angel 2017</p>

                                    </div>

                            </div>

                    </footer>

WAVY

Components