"Bootstrap Minimal FAQ Page"
Bootstrap 4.1.1 Snippet by kshiti06

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container faq-container"> <h2>Frequently Asked <br/>Questions</h2> <p class="note"><strong>Note: We have put together some commonly asked questionsto give you more information about us. If you have any questions that you cannot find the answers to please contact us on +1234567890.</p> <div class="accordian-container"> <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> What is HTML5? </a> </div> <div id="collapseOne" class="collapse" data-parent="#accordion"> <div class="card-body"> <p>HTML5 contains powerful capabilities for Web-based applications with more powerful interaction, video support, graphics, more styling effects, and a full set of APIs. HTML5 adapts to any device, whether desktop, mobile, tablet, or television. HTML5 is an open platform developed under royalty free licensing terms.<p> </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> Why is HTML5 so exciting? </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> <p>There is huge demand for open standards that allow the creation of rich internet applications. Watching videos, finding the nearest restaurant, accessing emails while being offline are just some of the powerful new capabilities enabled by the set of specifications in development at W3C.<p> </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> Which Web browsers support HTML5? </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> <p>W3C encourages implementation and testing long before a specification becomes a standard to ensure that two people can read a specification independently and write interoperable software. Early adopters provide implementers and W3C with tremendously valuable feedback because they help identify where interoperability issues exist. For a more detailed understanding of what is currently supported, please see the HTML5 Test Suite Conformance Results (a work in progress).<p> </div> </div> </div> </div> </div> </div>
body{ background: #9256b7; padding: 20%; } .faq-container{ margin-top: -23%; } .faq-container h2{ text-align: center; color: #e9ecef; } .faq-container .note{ margin-top: -3%; color: #adb5bd; text-align: center; padding: 5%; font-size: 12px; animation-name: example; animation-duration: 4s; animation-iteration-count: infinite } @keyframes example { from {color: #adb5bd;} to {color: #ffffff;} } .accordian-container{ position: absolute; top: 50%; left: 27%; margin-top: -50px; width: 650px; height: 100px; } .accordian-container .card{ margin-bottom: 10px; border-radius: 21px; box-shadow: 1px 0px 20px 1px #545658; } .accordian-container .card-link{ color: #343a40; } .accordian-container .card-header{ background: #ffffff; border-bottom: none; border-radius: 21px; } .accordian-container .card-body{ color: #6c757d; font-weight: 400; font-size: 15px; }

Related: See More

Questions / Comments:

Content is going to under collapse..

sunil8107 (-1) - 2 years ago - Reply 0