** NEW ** Updated for Bootstrap 4.x
FAQ example with tabs and accordions in vertical navigation.
Notice: It's very important that you get the ID's right. The Bootstrap JS is matching up the accordion/collapse with data-target, and if you get them wrong, it won't work as intended.
| <div id="app"> | |
| <password-reset></password-reset> | |
| </div> | |
| <div class="pricing-container"> | |
| <div class="pricing-switcher"> | |
| <p class="fieldset"> | |
| <input type="radio" name="duration-1" value="monthly" id="monthly-1" checked> | |
| <label for="monthly-1">Monthly</label> | |
| <input type="radio" name="duration-1" value="yearly" id="yearly-1"> | |
| <label for="yearly-1">Yearly</label> | |
| <span class="switch"></span> | |
| </p> | |
| </div> |
A Pen by Nunaram Hembram on CodePen.
#freecodecamp Product Landing Page
A Pen by Neel Patel on CodePen.
| <div class="main-container"> | |
| <section class="section"> | |
| <h2 class="title">Effect 1</h2> | |
| <ul class="menu"> | |
| <li class="menu__item"> | |
| <a href="#0" class="menu__link hover1"><span class="menu__label hover1__label">Home</span></a> | |
| </li> | |
| <li class="menu__item"> | |
| <a href="#0" class="menu__link hover1"><span class="menu__label hover1__label">About</span></a> | |
| </li> |
This is a landing page that was made for the non-technical web user in mind. Full code available in github and easily customizable. This template also provides SASS files for the technical developer that wants to tink around with it. Enjoy!
A Pen by Jesus Rodriguez on CodePen.