Collapse / Accordion
Component #1
Frequently Asked Questions
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
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
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
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
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
<!-- Collapse -->
<div class="container">
<h5 class="font-size-18 font-weight-medium mb-4">Frequently Asked Questions</h5>
<div class="mb-5 mb-lg-8">
<!-- Basics Accordion -->
<div id="basicsAccordion">
<!-- Card -->
<div class="mb-2">
<div class="card-collapse v1" id="basicsHeadingOne">
<button type="button" class="d-flex align-items-center btn btn-link btn-block card-btn p-0 collapsed"
data-toggle="collapse"
data-target="#basicsCollapseOne"
aria-expanded="false"
aria-controls="basicsCollapseOne">
<span class="card-btn-toggle">
<span class="card-btn-toggle-default">+</span>
<span class="card-btn-toggle-active">−</span>
</span>
<div class="text-primary font-size-1 font-secondary font-weight-medium ml-1">On how many devices can i watch at the same time?</div>
</button>
</div>
<div id="basicsCollapseOne" class="collapse"
aria-labelledby="basicsHeadingOne"
data-parent="#basicsAccordion">
<div class="card-body pl-4 pt-2 mt-1 pb-2">
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
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="mb-2">
<div class="card-collapse v1" id="basicsHeadingTwo">
<button type="button" class="d-flex align-items-center btn btn-link btn-block card-btn p-0 collapsed"
data-toggle="collapse"
data-target="#basicsCollapseTwo"
aria-expanded="false"
aria-controls="basicsCollapseTwo">
<span class="card-btn-toggle">
<span class="card-btn-toggle-default">+</span>
<span class="card-btn-toggle-active">−</span>
</span>
<div class="text-primary font-size-1 font-secondary font-weight-medium ml-1">First launch of Vodi</div>
</button>
</div>
<div id="basicsCollapseTwo" class="collapse"
aria-labelledby="basicsHeadingTwo"
data-parent="#basicsAccordion">
<div class="card-body pl-4 pt-2 mt-1 pb-2">
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
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="mb-2">
<div class="card-collapse v1" id="basicsHeadingThree">
<button type="button" class="d-flex align-items-center btn btn-link btn-block card-btn p-0 collapsed"
data-toggle="collapse"
data-target="#basicsCollapseThree"
aria-expanded="false"
aria-controls="basicsCollapseThree">
<span class="card-btn-toggle">
<span class="card-btn-toggle-default">+</span>
<span class="card-btn-toggle-active">−</span>
</span>
<div class="text-primary font-size-1 font-secondary font-weight-medium ml-1">What is a Vodi?</div>
</button>
</div>
<div id="basicsCollapseThree" class="collapse"
aria-labelledby="basicsHeadingThree"
data-parent="#basicsAccordion">
<div class="card-body pl-4 pt-2 mt-1 pb-2">
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
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="mb-2">
<div class="card-collapse v1" id="basicsHeadingFour">
<button type="button" class="d-flex align-items-center btn btn-link btn-block card-btn p-0 collapsed"
data-toggle="collapse"
data-target="#basicsCollapseFour"
aria-expanded="false"
aria-controls="basicsCollapseFour">
<span class="card-btn-toggle">
<span class="card-btn-toggle-default">+</span>
<span class="card-btn-toggle-active">−</span>
</span>
<div class="text-primary font-size-1 font-secondary font-weight-medium ml-1">Failure to login Vodi on Mobile</div>
</button>
</div>
<div id="basicsCollapseFour" class="collapse"
aria-labelledby="basicsHeadingFour"
data-parent="#basicsAccordion">
<div class="card-body pl-4 pt-2 mt-1 pb-2">
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
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="mb-0">
<div class="card-collapse v1" id="basicsHeadingFive">
<button type="button" class="d-flex align-items-center btn btn-link btn-block card-btn p-0 collapsed"
data-toggle="collapse"
data-target="#basicsCollapseFive"
aria-expanded="false"
aria-controls="basicsCollapseFive">
<span class="card-btn-toggle">
<span class="card-btn-toggle-default">+</span>
<span class="card-btn-toggle-active">−</span>
</span>
<div class="text-primary font-size-1 font-secondary font-weight-medium ml-1">Access to Vodi + packages in European Union Countries</div>
</button>
</div>
<div id="basicsCollapseFive" class="collapse"
aria-labelledby="basicsHeadingFive"
data-parent="#basicsAccordion">
<div class="card-body pl-4 pt-2 mt-1 pb-2">
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
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Basics Accordion -->
</div>
</div>
<!-- End Collapse -->
Component #2
Popular Movies to Watch Now
Most watched movies by days
<!-- movie aside header -->
<section class="bg-gray-1100 dark">
<div class="container px-md-4">
<div class="row mb-xl-5">
<div class="col-xl-auto d-flex">
<header class="max-w-370 mt-auto mb-8 title-dash">
<h1 class="display-7 text-white mb-3 pr-xl-12 font-weight-semi-bold">Popular Movies to Watch Now</h1>
<p class="text-gray-1300 font-secondary font-weight-medium">Most watched movies by days</p>
<div class="border-top border-g-1200-op mr-xl-7">
<a href="#" class="h-w-primary text-gray-1300 font-size-13 d-inline-flex align-items-center pt-2 font-secondary font-weight-medium">VIEW ALL
<svg class="ml-2" xmlns="http://www.w3.org/2000/svg" width="4" height="7"><path d="M3.979,3.703 C3.987,3.785 3.966,3.869 3.903,3.934 L1.038,6.901 C0.921,7.023 0.724,7.029 0.598,6.916 L0.143,6.506 C0.017,6.393 0.011,6.203 0.128,6.082 L2.190,3.946 C2.276,3.829 2.356,3.691 2.356,3.548 C2.356,3.214 1.947,2.885 1.947,2.885 L1.963,2.877 L0.080,0.905 C-0.036,0.784 -0.029,0.592 0.095,0.479 L0.547,0.068 C0.671,-0.045 0.867,-0.039 0.983,0.083 L3.823,3.057 C3.867,3.102 3.876,3.161 3.885,3.218 C3.945,3.267 3.988,3.334 3.988,3.416 L3.988,3.681 C3.988,3.690 3.979,3.694 3.979,3.703 Z" fill="rgb(148, 156, 176)"/></svg>
</a>
</div>
</header>
</div>
<div class="col">
<div class="row row-cols-2 row-cols-md-5">
<div class="col mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img1.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Delta Bravo</a></div>
</div>
</div>
<div class="col mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img2.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Mad</a></div>
</div>
</div>
<div class="col mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img3.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Oh Lucy</a></div>
</div>
</div>
<div class="col mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img4.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Euphoria</a></div>
</div>
</div>
<div class="col mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img5.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Black Mirror</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-cols-md-5 row-cols-xl">
<div class="col-6 col-xl mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/174x260/img10.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Convenient Groom</a></div>
</div>
</div>
<div class="col-6 col-xl mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/174x260/img11.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Paradigm Lost</a></div>
</div>
</div>
<div class="col-6 col-xl mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/174x260/img12.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Pacific Rim: Uprising</a></div>
</div>
</div>
<div class="col-6 col-xl mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img6.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Dirt</a></div>
</div>
</div>
<div class="col-6 col-xl mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/174x260/img7.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Fantastic Beasts and Where to Find Them</a></div>
</div>
</div>
<div class="col-6 col-xl mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img8.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Sunday</a></div>
</div>
</div>
<div class="col-6 col-xl mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img9.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Bpm</a></div>
</div>
</div>
</div>
</div>
<div class="collapse mt-6" id="collapseExample">
<div class="container px-md-4">
<div class="row row-cols-md-5 row-cols-xl">
<div class="col-6 col-xl mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img1.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Convenient Groom</a></div>
</div>
</div>
<div class="col-6 col-xl mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img2.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Paradigm Lost</a></div>
</div>
</div>
<div class="col-6 col-xl mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img3.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Pacific Rim: Uprising</a></div>
</div>
</div>
<div class="col-6 col-xl mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img4.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Dirt</a></div>
</div>
</div>
<div class="col-6 col-xl mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img5.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Fantastic Beasts and Where to Find Them</a></div>
</div>
</div>
<div class="col-6 col-xl mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img6.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Sunday</a></div>
</div>
</div>
<div class="col-6 col-xl mb-5 mb-xl-0">
<div class="product">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/174x260/img7.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Bpm</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="space-1 position-relative d-flex">
<button class="btn btn-outline-dark-primary mx-auto px-7 py-3 font-size-1 z-index-2 font-weight-medium font-secondary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+ View more
</button>
<div class="border-top content-centered w-100 border-gray-1400"></div>
</div>
</section>
<!-- End movie aside header -->