iotcat
/
cp-acc
mirror of https://github.com/IoTcat/cp-acc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
25 Commits
1 Branch
0 Tags
1.5 MiB
 
 
 
 
Tag: Branch: Tree: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
cp-acc/src/accordion.html

324 lines
12 KiB
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title>Crypto Mobile Template</title>
<!-- Google font file. If you want you can change. -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,900" rel="stylesheet">
<!-- Fontawesome font file css -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<!-- Template global css file. Requared all pages -->
<link rel="stylesheet" type="text/css" href="css/global.style.css">
</head>
<body>
<div class="wrapper">
<div class="nav-menu">
<nav class="menu">
<!-- Menu navigation start -->
<div class="nav-container">
<ul class="main-menu">
<li class="">
<a href="index.html"><img src="img/content/icons/1.png" alt=""><strong>Dashboard</strong> </a>
</li>
<li class="">
<a href="wallet.html"><img src="img/content/icons/2.png" alt=""><strong>My Walet</strong> </a>
</li>
<li class="">
<a href="trading.html"><img src="img/content/icons/3.png" alt=""><strong>Crypto Trade</strong> </a>
</li>
<li class="">
<a href="buy-sell.html"><img src="img/content/icons/6.png" alt=""><strong>Buy & sell</strong> </a>
</li>
<li class="">
<a href="profile.html"><img src="img/content/icons/5.png" alt=""><strong>Trader Profile</strong> </a>
</li>
<li class="">
<a href="affiliate.html"><img src="img/content/icons/4.png" alt=""><strong>Affiliate System</strong> </a>
</li>
<li class="">
<a href="setting.html"><img src="img/content/icons/11.png" alt=""><strong>Settings</strong> </a>
</li>
<li>
<a href="javascript:void(0);"><img src="img/content/icons/9.png" alt=""><strong>Login/Register</strong> <span class="fa fa-angle-down"></span></a>
<ul>
<li><a href="login.html" data-loader="show">Login</a></li>
<li><a href="signup.html" data-loader="show">Register</a></li>
<li><a href="forgot-password.html" data-loader="show">Forgot Password</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);"><img src="img/content/icons/8.png" alt=""> <strong>Wizards</strong> <span class="fa fa-angle-down"></span></a>
<ul>
<li><a href="wizard-default.html" data-loader="show">Wizard Default</a></li>
<li><a href="wizard-fullscreen.html" data-loader="show">Wizard Fullscreen</a></li>
</ul>
</li>
<li class="">
<a href="charts.html"><img src="img/content/icons/14.png" alt=""><strong>Charts</strong> </a>
</li>
<li>
<a href="forms.html" data-loader="show"><img src="img/content/icons/7.png" alt=""><strong>Form Elements</strong></a>
</li>
<li class="active">
<a href="#"><img src="img/content/icons/10.png" alt=""><strong> Components</strong> <span class="fa fa-angle-down"></span></a>
<ul>
<li><a href="tab-bottom.html" data-loader="show">Tab (Bottom)</a></li>
<li><a href="tab-top.html" data-loader="show">Tab (Top)</a></li>
<li class="active"><a href="accordion.html" data-loader="show">Accordion</a></li>
<li><a href="popup.html" data-loader="show">Popup Modal</a></li>
<li><a href="checkbox-list.html" data-loader="show">Check List</a></li>
<li><a href="link-list.html" data-loader="show">Link List</a></li>
<li><a href="link-list-two-column.html" data-loader="show">Two Column Links</a></li>
</ul>
</li>
<li>
<a href="#"><img src="img/content/icons/15.png" alt=""><strong> Pages</strong> <span class="fa fa-angle-down"></span></a>
<ul>
<li><a href="profile.html" data-loader="show">User Profile</a></li>
<li><a href="search-result.html" data-loader="show">Search Results</a></li>
<li><a href="contact.html" data-loader="show">Contact</a></li>
<li><a href="blank.html" data-loader="show">Blank Page</a></li>
</ul>
</li>
</ul>
</div>
<!-- Menu navigation end -->
</nav>
</div>
<div class="wrapper-inline">
<!-- Header area start -->
<header> <!-- extra class no-background -->
<a class="go-back-link" href="javascript:history.back();"><i class="fa fa-arrow-left"></i></a>
<h1 class="page-title">ACCORDION</h1>
<div class="navi-menu-button">
<em></em>
<em></em>
<em></em>
</div>
</header>
<!-- Header area end -->
<!-- Page content start -->
<main>
<section class="container">
<div class="form-divider"></div>
<div class="form-label-divider"><span>ACCORDION (No margin)</span></div>
<div class="form-divider"></div>
<!--expendable list item -->
<div class="expandable-item accordion" data-group="accordion2">
<div class="expandable-header">
<i class="list-icon fa fa-adjust"></i>
<h3 class="list-title">Question one</h3>
<i class="list-arrow fa fa-angle-down"></i>
</div>
<div class="expandable-content">
<div class="padding-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
</div>
<!--expendable list item -->
<!--expendable list item -->
<div class="expandable-item accordion" data-group="accordion2">
<div class="expandable-header">
<i class="list-icon fa fa-book"></i>
<h3 class="list-title">Question two</h3>
<i class="list-arrow fa fa-angle-down"></i>
</div>
<div class="expandable-content">
<div class="padding-content">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
</div>
<!--expendable list item -->
<!--expendable list item -->
<div class="expandable-item accordion" data-group="accordion2">
<div class="expandable-header">
<i class="list-icon fa fa-cog"></i>
<h3 class="list-title">Question three</h3>
<i class="list-arrow fa fa-angle-down"></i>
</div>
<div class="expandable-content">
<div class="padding-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since type specimen book. It has survived not only five centuries
</div>
</div>
</div>
<!--expendable list item -->
<div class="form-divider"></div>
<div class="form-label-divider"><span>ACCORDION (Single)</span></div>
<div class="form-divider"></div>
<!--expendable list item -->
<div class="expandable-item accordion active" data-group="accordion1">
<div class="expandable-header">
<i class="list-icon fa fa-adjust"></i>
<h3 class="list-title">Question one (Opened)</h3>
<i class="list-arrow fa fa-angle-down"></i>
</div>
<div class="expandable-content">
<div class="padding-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
</div>
<!--expendable list item -->
<div class="form-mini-divider"></div>
<!--expendable list item -->
<div class="expandable-item accordion" data-group="accordion1">
<div class="expandable-header">
<i class="list-icon fa fa-book"></i>
<h3 class="list-title">Question two</h3>
<i class="list-arrow fa fa-angle-down"></i>
</div>
<div class="expandable-content">
<div class="padding-content">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
</div>
<!--expendable list item -->
<div class="form-mini-divider"></div>
<!--expendable list item -->
<div class="expandable-item accordion" data-group="accordion1">
<div class="expandable-header">
<i class="list-icon fa fa-cog"></i>
<h3 class="list-title">Question three</h3>
<i class="list-arrow fa fa-angle-down"></i>
</div>
<div class="expandable-content">
<div class="padding-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since type specimen book. It has survived not only five centuries
</div>
</div>
</div>
<!--expendable list item -->
<div class="form-divider"></div>
<div class="form-label-divider"><span>ACCORDION (Multiple)</span></div>
<div class="form-divider"></div>
<!--expendable list item -->
<div class="expandable-item">
<div class="expandable-header">
<i class="list-icon fa fa-adjust"></i>
<h3 class="list-title">What is your favorite color?</h3>
<i class="list-arrow fa fa-angle-down"></i>
</div>
<div class="expandable-content">
<div class="padding-content">
<div class="form-row no-padding">
<label class="form-element"><input type="checkbox" name="lang" /> Red</label>
<label class="form-element"><input type="checkbox" name="lang" /> Green</label>
<label class="form-element"><input type="checkbox" name="lang" /> Blue</label>
<label class="form-element"><input type="checkbox" name="lang" /> Yellow</label>
</div>
</div>
</div>
</div>
<!--expendable list item -->
<div class="form-mini-divider"></div>
<!--expendable list item -->
<div class="expandable-item">
<div class="expandable-header">
<i class="list-icon fa fa-book"></i>
<h3 class="list-title">Favorite TV show?</h3>
<i class="list-arrow fa fa-angle-down"></i>
</div>
<div class="expandable-content">
<div class="padding-content">
<div class="form-row no-padding">
<select class="form-element">
<option value="" selected>Big Bang Theory</option>
<option value="1">Game Of Thrones</option>
<option value="1">Vikinks</option>
<option value="1">Westworld</option>
</select>
</div>
</div>
</div>
</div>
<!--expendable list item -->
<div class="form-mini-divider"></div>
<!--expendable list item -->
<div class="expandable-item mb-30">
<div class="expandable-header">
<i class="list-icon fa fa-cog"></i>
<h3 class="list-title">About you?</h3>
<i class="list-arrow fa fa-angle-down"></i>
</div>
<div class="expandable-content">
<div class="padding-content">
<div class="form-row no-padding">
<textarea class="form-element" placeholder="Textarea" rows="6"></textarea>
</div>
</div>
</div>
</div>
<!--expendable list item -->
</section>
<footer>
<div class="container">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
<p>Copyright © All Right Reserved</p>
</div>
</footer>
</main>
<!-- Page content end -->
</div>
</div>
<!--Page loader DOM Elements. Requared all pages-->
<div class="sweet-loader">
<div class="box">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
</div>
</div>
<!-- JQuery library file. requared all pages -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Template global script file. requared all pages -->
<script src="js/global.script.js"></script>
</body>
</html>