Framework
Theme
All
689
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
General
6
Features
25
Cards Section
38
Teams Section
11
Faq
9
Headers
47
Blogs
15
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Authentication
15
Call To Actions
21
Http Codes
6
Teams
16
Pricing
13
UI Components Library
Discover 689 components available in Loopple’s library! Create modern templates without creativity of a designer
Pricing With 3 Plans Wrapped In Cards
Feature 3
Blog 2
Cards Section Courses
Blog 4
Testimonial 4
Header 2
Component from
Soft UI Design System
Builder
<header class="draggable mt-4">
<div class="page-header min-vh-75">
<div class="container">
<div class="row">
<div class="col-lg-4 my-auto">
<h1 class="text-gradient text-warning mb-0">Your Desired</h1>
<h1 class="mb-4">Experiences</h1>
<p class="lead">The time is now for it to be okay to be great. For being a bright color. For standing out.</p>
<div class="buttons">
<button type="button" class="btn bg-gradient-warning mt-4">Discover</button>
<button type="button" class="btn text-warning shadow-none mt-4">Read more</button>
</div>
</div>
<div class="col-lg-8 ps-5 pe-0">
<div class="row">
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow mt-0 mt-lg-7" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/desire.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/chair.jpg" alt="">
<img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/facade.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow mt-0 mt-lg-5" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/architecture.jpg" alt="">
<img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/baloon.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow mt-3" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/seaside.jpg" alt="">
<img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/medusa.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</header>Testimmonial 1
Component from
Soft UI Design System
Builder
<section class="py-5 draggable">
<div class="container">
<div class="row">
<div class="col-lg-6 mx-auto text-center">
<h2 class="text-gradient text-primary mb-0">What random people</h2>
<h2 class="mb-3">Think about us</h2>
<p>That’s the main thing people are controlled by! Thoughts- their perception of themselves! </p>
</div>
</div>
<div class="row mt-6">
<div class="col-lg-4 col-md-8">
<div class="card card-plain">
<div class="card-body">
<div class="author">
<img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/team-3.jpg" alt="..." class="avatar shadow">
<div class="name ps-2">
<span>Mathew Glock</span>
<div class="stats">
<small><i class="far fa-clock"></i> 5 min read</small>
</div>
</div>
</div>
<p class="mt-4">"If you have the opportunity to play this game of life you need to appreciate every moment."</p>
<div class="rating mt-3">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8 ms-md-auto">
<div class="card bg-gradient-primary">
<div class="card-body">
<div class="author align-items-center">
<img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/marie.jpg" alt="..." class="avatar shadow">
<div class="name ps-2">
<span class="text-white">Mathew Glock</span>
<div class="stats">
<small class="text-white">Posted on 28 February</small>
</div>
</div>
</div>
<p class="mt-4 text-white">"If you have the opportunity to play this game of life you need to appreciate every moment."</p>
<div class="rating mt-3">
<i class="fas fa-star text-white"></i>
<i class="fas fa-star text-white"></i>
<i class="fas fa-star text-white"></i>
<i class="far fa-star text-white"></i>
<i class="far fa-star text-white"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8">
<div class="card card-plain">
<div class="card-body">
<div class="author">
<img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/team-2.jpg" alt="..." class="avatar shadow">
<div class="name ps-2">
<span>Mathew Glock</span>
<div class="stats">
<small><i class="far fa-clock"></i> 5 min read</small>
</div>
</div>
</div>
<p class="mt-4">"If you have the opportunity to play this game of life you need to appreciate every moment."</p>
<div class="rating mt-3">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
</div>
<hr class="horizontal dark my-5">
<div class="row">
<div class="col-lg-2 col-6">
<img class="w-100 opacity-6" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-apple.svg" alt="Logo">
</div>
<div class="col-lg-2 col-6">
<img class="w-100 opacity-6" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-facebook.svg" alt="Logo">
</div>
<div class="col-lg-2 col-6">
<img class="w-100 opacity-6" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-behance.svg" alt="Logo">
</div>
<div class="col-lg-2 col-6">
<img class="w-100 opacity-6" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-spotify.svg" alt="Logo">
</div>
<div class="col-lg-2 col-6">
<img class="w-100 opacity-6" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-coinbase.svg" alt="Logo">
</div>
<div class="col-lg-2 col-6">
<img class="w-100 opacity-6" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-pinterest.svg" alt="Logo">
</div>
</div>
</div>
</section>
