"accordian with fixed left grid"
Bootstrap 3.0.0 Snippet by Surya Varre

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>goDaddy</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel='stylesheet' href="css/bootstrap.min.css" type='text/css'/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/animate.css"> <link rel="stylesheet" type="text/css" href="css/custom.css"> <link rel="stylesheet" type="text/css" href="css/media-screen.css"> <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800" rel="stylesheet"> </head> <body> <div class="godaddy"> <nav class = "navbar navbar-default godaddy-default" role = "navigation"> <div class="container"> <div class = "navbar-header"> <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#example-navbar-collapse"> <span class = "sr-only">Toggle navigation</span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> </button> <a class = "navbar-brand logo" href = "#">website name</a> </div> <div class = "collapse navbar-collapse" id = "example-navbar-collapse"> <ul class = "nav navbar-nav godaddy-nav"> <li class = "active"><a href = "#">Domains</a></li> <li><a href = "#">Web sites</a></li> <li><a href = "#">Hosting</a></li> <li><a href = "#">Web Security</a></li> <li><a href = "#">Online Marketing</a></li> </ul> </div> </div> </nav> <section class="plan-section"> <div class="container"> <h2 class="plan-head">You've added Starter Hosting Plan</h2> <div class="col-md-8 col-sm-8 pl0 pr0"> <div class="plan-div"> <div class = "panel-group" id = "accordion"> <div class = " panel-default plan-default"> <div class = "panel-heading plan-heading"> <h4 class = "panel-title"> <a data-toggle = "collapse" data-parent = "#accordion" href = "#plan1" class="add"> <input type="radio" name="plan" class="plan-btn"><span class="plan-info "> Add site backup & restore</span><span class="cost">₹ 139.00/mo</span> </a> </h4> </div> <div id = "plan1" class = "panel-collapse collapse"> <div class = "panel-body plan-para"> Safeguard your entire website - files folders, databases - with automatic daily offsite backups. </div> </div> </div> </div> <div class = "panel-group" id = "accordion"> <div class = " panel-default plan-default"> <div class = "panel-heading plan-heading"> <h4 class = "panel-title"> <a data-toggle = "collapse" data-parent = "#accordion" href = "#plan2" class="add"> <input type="radio" name="plan" class="plan-btn"><span class="plan-info "> Add malware scan and removal</span><span class="cost">₹ 459.00/mo</span> </a> </h4> </div> <div id = "plan2" class = "panel-collapse collapse "> <div class = "panel-body plan-para"> Defend your site against hackers and malware with automatic daily scans and guaranteed cleanup. </div> </div> </div> </div> <div class = "panel-group" id = "accordion"> <div class = " panel-default plan-default"> <div class = "panel-heading plan-heading"> <h4 class = "panel-title"> <a data-toggle = "collapse" data-parent = "#accordion" href = "#plan3" class="add"> <input type="radio" name="plan" class="plan-btn"><span class="plan-info "> Add standard SSL Certificate</span><span class="cost">₹ 249.00/mo<br></span> </a> </h4> </div> <div id = "plan3" class = "panel-collapse collapse "> <div class = "panel-body plan-para"> Secure credit card numbers, passwords and other sensitive data your visitors submit through your site. </div> </div> </div> </div> <div class = "panel-group" id = "accordion"> <div class = " panel-default plan-default"> <div class = "panel-heading plan-heading"> <h4 class = "panel-title"> <a data-toggle = "collapse" data-parent = "#accordion" href = "#plan4" class="add"> <input type="radio" name="plan" class="plan-btn"><span class="plan-info "> Add standard SSL Certificate</span><span class="cost">₹ 249.00/mo<br></span> </a> </h4> </div> <div id = "plan4" class = "panel-collapse collapse "> <div class = "panel-body plan-para"> Secure credit card numbers, passwords and other sensitive data your visitors submit through your site. </div> </div> </div> </div> <div class = "panel-group" id = "accordion"> <div class = " panel-default plan-default"> <div class = "panel-heading plan-heading"> <h4 class = "panel-title"> <a data-toggle = "collapse" data-parent = "#accordion" href = "#plan5" class="add"> <input type="radio" name="plan" class="plan-btn"><span class="plan-info "> Add standard SSL Certificate</span><span class="cost">₹ 249.00/mo<br></span> </a> </h4> </div> <div id = "plan5" class = "panel-collapse collapse "> <div class = "panel-body plan-para"> Secure credit card numbers, passwords and other sensitive data your visitors submit through your site. </div> </div> </div> </div> <div class = "panel-group" id = "accordion"> <div class = " panel-default plan-default"> <div class = "panel-heading plan-heading"> <h4 class = "panel-title"> <a data-toggle = "collapse" data-parent = "#accordion" href = "#plan6" class="add"> <input type="radio" name="plan" class="plan-btn"><span class="plan-info "> Add standard SSL Certificate</span><span class="cost">₹ 249.00/mo<br></span> </a> </h4> </div> <div id = "plan6" class = "panel-collapse collapse "> <div class = "panel-body plan-para"> Secure credit card numbers, passwords and other sensitive data your visitors submit through your site. </div> </div> </div> </div> <div class = "panel-group" id = "accordion"> <div class = " panel-default plan-default"> <div class = "panel-heading plan-heading"> <h4 class = "panel-title"> <a data-toggle = "collapse" data-parent = "#accordion" href = "#plan7" class="add"> <input type="radio" name="plan" class="plan-btn"><span class="plan-info "> Add standard SSL Certificate</span><span class="cost">₹ 249.00/mo<br></span> </a> </h4> </div> <div id = "plan7" class = "panel-collapse collapse "> <div class = "panel-body plan-para"> Secure credit card numbers, passwords and other sensitive data your visitors submit through your site. </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-4"> <div class="summary-div affix"> <h2 class="plan-head">Order summary</h2> <table class="table"> <tr class="summary-line"> <td class="summary-tag">Starter Linux Hosting</td> <td class="sum">₹ 179.00</td> </tr> <tr class="summary-line"> <td class="summary-tag">with cPanel</td> <td>1 month</td> </tr> <tr> <td class="summary-tag">Total</td> <td class="sum">₹ 179.00</td> </tr> </table> </div> </div> </div> </section> <section class="footer-section"> <div class="container"> <div class="copyright"> <p>Copyright © 1999 - 2017 GoDaddy Operating Company, LLC. All Rights Reserved.</p> </div> </div> </section> </div> </body> </html>
body{ font-family: 'Raleway', sans-serif; } .godaddy .logo{ color: #000; font-weight: 700; font-size: 26px; } .godaddy .godaddy-default{ margin: 0px; background-color: #fff; padding: 15px 0px; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: #555; background-color: transparent; } .godaddy .godaddy-nav{ float: right; } .godaddy .godaddy-nav a{ color: #000 !important; font-weight: 600; } .godaddy .plan-section{ padding: 30px 0px; background: #e8e8e8; } .godaddy .pl0{ padding-left: 0px !important; } .godaddy .plan-head{ font-size: 24px; font-weight: 700; color:rgba(0, 0, 0, 0.81); margin-top: 0px; margin-bottom: 20px; } .godaddy .plan-div{ background-color: #fff; padding: 30px; border-top: #008933 solid 10px; box-shadow: 4px 4px 0 0 rgba(0,0,0,.1); } .godaddy .plan-para{ color: #000; } .godaddy .plan-heading{ background-color: transparent !important; border:none !important; } .godaddy .cost{ float: right; color:#f2812e; font-weight: 600; font-size: 22px; } .godaddy .sum{ color:#f2812e; font-weight: 600; } .godaddy .plan-info{ color:#000; font-weight: 800; font-size: 20px; padding-left: 10px; } .godaddy .plan-para{ border-top: none !important; margin-bottom: 10px; font-size: 15px; line-height: 24px; padding-top: 0px; } .godaddy .plan-default{ border-bottom: 1px solid rgba(0, 0, 0, 0.08) } .godaddy .add:hover{ text-decoration: none !important; } .godaddy .summary-tag{ font-weight: 700; font-size: 16px; } .godaddy .footer-section{ background-color: #2b2b2b; padding: 30px 0px; text-align: center; } .godaddy .copyright p{ color: #fff; } @media screen and (min-width:768px) and (max-width:768px){ .godaddy .plan-head { font-size: 20px; } .godaddy .plan-info { font-size: 16px; } .godaddy .cost { font-size: 15px; } .godaddy .plan-para { font-size: 14px; } .godaddy .summary-tag { font-size: 14px; } } @media screen and (min-width:768px) and (max-width:991px){ .godaddy .plan-head { font-size: 20px; } .godaddy .plan-info { font-size: 16px; } .godaddy .cost { font-size: 15px; } .godaddy .plan-para { font-size: 14px; } .godaddy .summary-tag { font-size: 14px; } } @media screen and (min-width:620px) and (max-width:767px){ .godaddy .plan-head { font-size: 18px; } .godaddy .godaddy-nav { float: none; } .godaddy .plan-div { width: 68%; float: left; } .godaddy .summary-div{ width: 30%; float: left; padding-left: 20px; } .affix { position: inherit; } .godaddy .plan-info { font-size: 13px; } .godaddy .cost { font-size: 12px; } .godaddy .plan-para { font-size: 11px; } .godaddy .summary-tag { font-size: 11px; } } @media screen and (min-width:481px) and (max-width:619px){ .affix { position: inherit; } .godaddy .godaddy-nav { float: none; } .godaddy .plan-info { font-size: 13px; } .godaddy .cost { font-size: 12px; } .godaddy .plan-para { font-size: 11px; } .godaddy .summary-tag { font-size: 11px; } .godaddy .summary-div{ margin-top: 30px; } } @media screen and (min-width:240px) and (max-width:480px){ .affix { position: inherit; } .godaddy .godaddy-nav { float: none; } .godaddy .plan-head { font-size: 18px; line-height: 28px; text-align: center; } .godaddy .plan-div { padding: 20px 0px; } .godaddy .plan-heading { padding: 10px; padding-bottom: 20px; } .godaddy .plan-info { font-size: 11px; } .godaddy .cost { font-size: 12px; } .godaddy .plan-para { font-size: 11px; } .godaddy .summary-tag { font-size: 11px; } .godaddy .summary-div{ margin-top: 30px; } .pr0{ padding-right: 0px !important; } .godaddy .copyright p { font-size: 13px; line-height: 25px; } }

Related: See More


Questions / Comments: