Components

These are the components that you can in your HTML page to make fast and responsive website without typing a bulk of CSS.

Navigation bar

---

Dark navigation bar

<div class="nav p-fi bc-black" id="navbar"> <!-- navbar heading and toggle button --> <div class="nav-heading p-ab c-white l-1 fw-bold fs-7">Navbar</div> <div class="nav-toggler p-ab r-1 bc-white" id="nav-toggler"></div> <!-- navbar links --> <div class="nav-links"> <a href="" class="bc-white c-black br-1">Home</a> <a href="" class="bc-white c-black br-1">Contact</a> <a href="" class="bc-white c-black br-1">Gallery</a> <a href="" class="bc-white c-black br-1">About</a> </div> <!-- navbar search box --> <div class="nav-form"> <form> <input type="search" placeholder="Search..." class="nav-search bc-white c-black" required> <input type="submit" class="nav-submit bc-transparent c-white b-1-white"> </form> </div> </div>

Light navigation bar

<div class="nav p-fi bc-ws-1" id="navbar"> <!-- navbar heading and toggle button --> <div class="nav-heading p-ab c-black l-1 fw-bold fs-7">Navbar</div> <div class="nav-toggler p-ab r-1 bc-white" id="nav-toggler"></div> <!-- navbar links --> <div class="nav-links"> <a href="" class="bc-black c-white br-1">Home</a> <a href="" class="bc-black c-white br-1">Contact</a> <a href="" class="bc-black c-white br-1">Gallery</a> <a href="" class="bc-black c-white br-1">About</a> </div> <!-- navbar search box --> <div class="nav-form"> <form> <input type="search" placeholder="Search..." class="nav-search bc-white c-black b-1-black" required> <input type="submit" class="nav-submit bc-transparent c-black b-1-black"> </form> </div> </div>

Cards

---

Dark card

<div class="card bc-black"> <div class="card-head bc-white"> <h2>Here will be the card's title or heading</h2> </div> <div class="card-body c-white"> <p class="p-1">Now time to write something on this note on this card body.It's your wish you can write anything here you want.</p> </div> <div class="card-button"> <a href="" class="bc-white c-black p-1 br-1">Go somewhere</a> </div> </div>

Light card

<div class="card bc-white c-black"> <div class="card-head bc-ws-1"> <h2>Here will be the card's title or heading</h2> </div> <div class="card-body"> <p class="p-1">Now time to write something on this note on this card body.It's your wish you can write anything here you want.</p> </div> <div class="card-button"> <a href="" class="bc-black c-white p-1 br-1">Go somewhere</a> </div> </div>