Features 1
<!-- -------- START Features w/ icons and text on left & gradient title and text on right -------- -->
<section class="py-9">
<div class="container">
<div class="row">
<div class="col-lg-6 my-auto">
<h3>Read More About Us</h3>
<p class="pe-5">Pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.</p>
<a href="javascript:;" class="text-primary icon-move-right">More about us
<i class="fas fa-arrow-right text-sm ms-1"></i>
</a>
</div>
<div class="col-lg-6 mt-lg-0 mt-5 ps-lg-0 ps-0">
<div class="p-3 info-horizontal">
<div class="icon icon-shape bg-gradient-dark shadow-dark text-center">
<i class="fas fa-ship opacity-10"></i>
</div>
<div class="description ps-3">
<p class="mb-0">It becomes harder for us to give others a hand. <br> We get our heart broken by people we love.</p>
</div>
</div>
<div class="p-3 info-horizontal">
<div class="icon icon-shape bg-gradient-dark shadow-dark text-center">
<i class="fas fa-handshake opacity-10"></i>
</div>
<div class="description ps-3">
<p class="mb-0">As we live, our hearts turn colder. <br>Cause pain is what we go through as we become older.</p>
</div>
</div>
<div class="p-3 info-horizontal">
<div class="icon icon-shape bg-gradient-dark shadow-dark text-center">
<i class="fas fa-hourglass opacity-10"></i>
</div>
<div class="description ps-3">
<p class="mb-0">When we lose family over time. <br> What else could rust the heart more over time? Blackgold.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- -------- END Features w/ icons and text on left & gradient title and text on right -------- -->Features 2
<!-- Section with four info areas left & one card right with image and waves -->
<section class="py-6">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="row justify-content-start">
<div class="col-md-6">
<div class="info">
<i class="material-symbols-rounded text-3xl text-gradient text-info mb-3">public</i>
<h5>Fully integrated</h5>
<p>We get insulted by others, lose trust for those We get back freezes</p>
</div>
</div>
<div class="col-md-6">
<div class="info">
<i class="material-symbols-rounded text-3xl text-gradient text-info mb-3">payments</i>
<h5>Payments functionality</h5>
<p>We get insulted by others, lose trust for those We get back freezes</p>
</div>
</div>
</div>
<div class="row justify-content-start mt-4">
<div class="col-md-6">
<div class="info">
<i class="material-symbols-rounded text-3xl text-gradient text-info mb-3">apps</i>
<h5>Prebuilt components</h5>
<p>We get insulted by others, lose trust for those We get back freezes</p>
</div>
</div>
<div class="col-md-6">
<div class="info">
<i class="material-symbols-rounded text-3xl text-gradient text-info mb-3">3p</i>
<h5>Improved platform</h5>
<p>We get insulted by others, lose trust for those We get back freezes</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 ms-auto mt-lg-0 mt-4">
<div class="card">
<div class="card-header p-0 position-relative mt-2 mx-2 z-index-2">
<a class="d-block blur-shadow-image">
<img src="https://images.unsplash.com/photo-1544717302-de2939b7ef71?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="img-colored-shadow" class="img-fluid border-radius-lg">
</a>
</div>
<div class="card-body text-center">
<h5 class="font-weight-normal">
<a href="javascript:;">Get insights on Search</a>
</h5>
<p class="mb-0">
Website visitors today demand a frictionless user expericence — especially when using search. Because of the hight standards.
</p>
<button type="button" class="btn bg-gradient-info btn-sm mb-0 mt-3">Find out more</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- END Section with four info areas left & one card right with image and waves -->Features 3
<!-- -------- START Features w/ title and 3 infos -------- -->
<section class="py-6">
<div class="container">
<div class="row">
<div class="col-lg-6 mx-auto text-center pb-4">
<h2>Turn your idea into a startup</h2>
<p class="lead">We’re constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play </p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="p-3 text-center">
<div class="icon icon-shape icon-md bg-gradient-dark shadow mx-auto">
<i class="material-symbols-rounded opacity-10">person</i>
</div>
<h5 class="mt-4">Check our team</h5>
<p>People in this world shun people for being great. For being a bright color. For standing out.</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="p-3 text-center">
<div class="icon icon-shape icon-md bg-gradient-info shadow mx-auto">
<i class="material-symbols-rounded opacity-10">support_agent</i>
</div>
<h5 class="mt-4">Support 24/7</h5>
<p>We get insulted by others, lose trust for those others. We get back here to follow my dreams</p>
</div>
</div>
<div class="col-lg-4 col-md-6 mx-md-auto">
<div class="p-3 text-center">
<div class="icon icon-shape icon-md bg-gradient-warning shadow mx-auto">
<i class="material-symbols-rounded opacity-10">update</i>
</div>
<h5 class="mt-4">Unlimited revisions</h5>
<p>The time is now to be okay to be the greatest you. Would you believe in what you believe in?</p>
</div>
</div>
</div>
</div>
</section>
<!-- -------- END Features w/ title and 3 infos -------- -->Features 4
<!-- -------- START Features w/ 3 cols w/ company text logos & text & link -------- -->
<section class="py-10">
<div class="container">
<div class="row">
<div class="col-md-4 col-10 mx-auto">
<div class="p-3 text-center">
<img class="w-50 mb-3" src="../../assets/img/logos/gray-logos/logo-nasa.svg">
<p>We get insulted by others, lose trust for those others. We get back here to follow my dreams</p>
<a href="javascript:;" class="icon-move-right text-dark text-sm">Read more
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
<div class="col-md-4 col-10 mx-auto">
<div class="p-3 text-center">
<img class="w-50 mb-3" src="../../assets/img/logos/gray-logos/logo-behance.svg">
<p>We get insulted by others, lose trust for those others. We get back here to follow my dreams</p>
<a href="javascript:;" class="icon-move-right text-dark text-sm">Read more
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
<div class="col-md-4 col-10 mx-auto">
<div class="p-3 text-center">
<img class="w-50 mb-3" src="../../assets/img/logos/gray-logos/logo-apple.svg">
<p>We get insulted by others, lose trust for those others. We get back here to follow my dreams</p>
<a href="javascript:;" class="icon-move-right text-dark text-sm">Read more
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- -------- END Features w/ 3 cols w/ company text logos & text & link -------- -->Features 5
<section class="bg-gradient-dark">
<div class="container py-7">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="row justify-content-start">
<div class="col-md-6">
<div class="info">
<i class="material-symbols-rounded text-3xl text-white mb-3">view_in_ar</i>
<h5 class="text-white">Fully integrated</h5>
<p class="text-white opacity-8">We get insulted by others, lose trust for those We get back freezes</p>
</div>
</div>
<div class="col-md-6">
<div class="info">
<i class="material-symbols-rounded text-3xl text-white mb-3">credit_card</i>
<h5 class="text-white">Payments functionality</h5>
<p class="text-white opacity-8">We get insulted by others, lose trust for those We get back freezes</p>
</div>
</div>
</div>
<div class="row justify-content-start mt-4">
<div class="col-md-6">
<div class="info">
<i class="material-symbols-rounded text-3xl text-white mb-3">dashboard</i>
<h5 class="text-white">Prebuilt components</h5>
<p class="text-white opacity-8">We get insulted by others, lose trust for those We get back freezes</p>
</div>
</div>
<div class="col-md-6">
<div class="info">
<i class="material-symbols-rounded text-3xl text-white mb-3">call_to_action</i>
<h5 class="text-white">Improved platform</h5>
<p class="text-white opacity-8">We get insulted by others, lose trust for those We get back freezes</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 ms-auto">
<div class="card mb-lg-5">
<div class="card-header p-0 position-relative mt-2 mx-2 z-index-2">
<a class="d-block blur-shadow-image">
<img src="../../assets/img/examples/color2.jpg" alt="img-colored-shadow" class="img-fluid border-radius-lg">
</a>
</div>
<div class="card-body">
<h4>
Material Kit
</h4>
<p>
One of the most beautiful and complex UI Kits built by the team behind Creative Tim. That's pretty impressive.
</p>
<a href="javascript:;" class="text-primary icon-move-right">More about us
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>Features 6
<!-- -------- START Features w/ title, device and stats -------- -->
<section class="py-3">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-4 mx-auto">
<div class="position-relative">
<img class="w-100 mt-5" src="../../assets/img/examples/iphone.png">
</div>
</div>
<div class="col-lg-6 mx-auto mt-5">
<h3>Free Material Design Resources</h3>
<p class="lead mb-5">We’re constantly trying to express ourselves and actualize our dreams.</p>
<div class="row">
<div class="col-lg-6 col-6 mb-lg-3">
<h2 class="text-gradient text-primary">323</h2>
<p>Of “high-performing” level are led by a certified project manager</p>
</div>
<div class="col-lg-6 col-6 mb-lg-3">
<h2 class="text-gradient text-primary">500+</h2>
<p>That meets quality standards required by our users</p>
</div>
<div class="col-lg-6 col-6">
<h2 class="text-gradient text-primary">24/7</h2>
<p>Actively engage team members that finishes on time</p>
</div>
<div class="col-lg-6 col-6">
<h2 class="text-gradient text-primary">73</h2>
<p>Team members that finishes on time every project</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- -------- END Features w/ title, device and stats -------- -->Features 7
<!-- -------- START Features w/ 6 cols w/ company logos & title & text -------- -->
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>Get your own app</h2>
<p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.</p>
</div>
<div class="col-lg-6 text-end d-flex flex-column justify-content-center">
<button type="button" class="btn bg-gradient-info mb-0 ms-lg-auto me-lg-0 me-auto mt-lg-0 mt-2">Contact Us</button>
</div>
</div>
<div class="row mt-5">
<div class="col-sm-6 col-lg-4 mt-lg-0 mt-4">
<img class="width-32-px mb-3" src="../../assets/img/logos/small-logos/logo-google-cloud.svg">
<h5>Payment vendor</h5>
<p class="text-sm">Check out our proven methods, guides, and exercises that help make work better, and people happier.</p>
</div>
<div class="col-sm-6 col-lg-4 mt-lg-0 mt-4">
<img class="width-32-px mb-3" src="../../assets/img/logos/small-logos/logo-github.svg">
<h5>Organize your team</h5>
<p class="text-sm">Check out our proven methods, guides, and exercises that help make work better, and people happier.</p>
</div>
<div class="col-sm-6 col-lg-4 mt-lg-0 mt-4">
<img class="width-32-px mb-3" src="../../assets/img/logos/small-logos/logo-amazon.svg">
<h5>E-commerce</h5>
<p class="text-sm">Check out our proven methods, guides, and exercises that help make work better, and people happier.</p>
</div>
<div class="col-sm-6 col-lg-4 mt-lg-5 mt-4">
<img class="width-32-px mb-3" src="../../assets/img/logos/small-logos/logo-dribbble.svg">
<h5>Digital Product Design</h5>
<p class="text-sm">Check out our proven methods, guides, and exercises that help make work better, and people happier.</p>
</div>
<div class="col-sm-6 col-lg-4 mt-lg-5 mt-4">
<img class="width-32-px mb-3" src="../../assets/img/logos/small-logos/logo-zoom.svg">
<h5>Better Communication</h5>
<p class="text-sm">Check out our proven methods, guides, and exercises that help make work better, and people happier.</p>
</div>
<div class="col-sm-6 col-lg-4 mt-lg-5 mt-4">
<img class="width-32-px mb-3" src="../../assets/img/logos/small-logos/logo-twitter.svg">
<h5>Logo design</h5>
<p class="text-sm">Check out our proven methods, guides, and exercises that help make work better, and people happier.</p>
</div>
</div>
</div>
</section>
<!-- -------- END Features w/ 6 cols w/ company logos & title & text -------- -->Features 8
<!-- -------- START Features w/ image on left & title & text & 3 cols on soft background -------- -->
<section class="py-5">
<div class="container-fluid">
<div class="row">
<div class="col-3 position-relative max-width-300 ms-auto">
<div class="blur-shadow-image">
<img class="w-100 h-100 border-radius-xl position-absolute d-xl-block d-none"
src="../../assets/img/examples/clem-onojeghuou.jpg" alt="image">
</div>
</div>
<div class="col-lg-8 ms-auto">
<div class="row">
<div class="col-7">
<div class="p-3 text-start border-radius-lg">
<h2 class="mt-5">Material Design Values</h2>
<p class="text-dark text-lg mt-3">
<span class="font-weight-bold">The time</span>
is now for it to be okay to be great. People in this world shun people for being great.
For being a bright color.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-3 col-md-4 py-3">
<div class="p-3 text-start">
<i class="material-symbols-rounded text-4xl text-gradient text-info">spa</i>
<h5 class="mt-3">Give your best</h5>
<p>Creativity starts with an empty calendar and ends with a full one.</p>
</div>
</div>
<div class="col-xl-3 col-md-4 py-3">
<div class="p-3 text-start">
<i class="material-symbols-rounded text-4xl text-gradient text-info">school</i>
<h5 class="mt-3">Learn new things</h5>
<p>We get insulted by others, lose trust for those We get back.</p>
</div>
</div>
<div class="col-xl-3 col-md-4 py-3">
<div class="p-3 text-start">
<i class="material-symbols-rounded text-4xl text-gradient text-info">emoji_people</i>
<h5 class="mt-3">Never give up</h5>
<p>When playing, surround yourself with people happier than you.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- -------- END Features w/ image on left & title & text & 3 cols on soft background -------- -->Features 9
<section class="">
<div class="container py-5">
<div class="row align-items-center">
<div class="col-md-6 mb-md-0 mb-4">
<h3>Very nice subtitle</h3>
<p class="lead mb-md-5 mb-4">
Change the color to match your brand or vision, add your logo, choose the perfect thumbnail, remove the playbar, add controls and more.
</p>
<p><span class="me-2">●</span> Showcase and embed your work with</p>
<p><span class="me-2">●</span> Publish across social channels in a click</p>
<p><span class="me-2">●</span> Sell your videos worldwide</p>
<p><span class="me-2">●</span> Make more profit</p>
</div>
<div class="col-md-6">
<div class="blur-shadow-image text-center">
<img src="../../assets/img/examples/blog2.jpg" alt="img-shadow" class="img-fluid shadow-xl border-radius-lg max-height-500">
</div>
</div>
</div>
</div>
</section>Features 10
<!-- -------- START Features w/ 4 infos - just colored icons -------- -->
<section class="py-10">
<div class="container">
<div class="row text-center">
<div class="col-lg-3 col-md-6">
<div class="info">
<i class="material-symbols-rounded text-gradient text-info text-3xl">grid_view</i>
<h5 class="mt-3">Components</h5>
<p>We get insulted by others, lose trust for those We get back.</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="info">
<i class="material-symbols-rounded text-gradient text-info text-3xl">forum</i>
<h5 class="mt-3">Mix & Match</h5>
<p>We get insulted by others, lose trust for those We get back.</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="info">
<i class="material-symbols-rounded text-gradient text-info text-3xl">brush</i>
<h5 class="mt-3">Design</h5>
<p>We get insulted by others, lose trust for those We get back.</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="info">
<i class="material-symbols-rounded text-gradient text-info text-3xl">account_balance</i>
<h5 class="mt-3">Payment</h5>
<p>We get insulted by others, lose trust for those We get back.</p>
</div>
</div>
</div>
</div>
</section>
<!-- -------- END Features w/ 4 infos - just colored icons -------- -->Features 11
<!-- -------- START Features w/ 4 cols w/ title & text & link -------- -->
<section class="py-11">
<div class="container">
<div class="row justify-content-start">
<div class="col-lg-3 col-sm-6 mt-lg-0 mt-4">
<h6 class="mb-2">Components</h6>
<p class="mb-2 me-4 text-sm">Choose the best design system to build your next product.</p>
<a href="javascript:;" class="text-info icon-move-right text-sm">Learn More
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
<div class="col-lg-3 col-sm-6 mt-lg-0 mt-4">
<h6 class="mb-2">Design</h6>
<p class="mb-2 me-4 text-sm">Get the latest design ideas and turn it into reality.</p>
<a href="javascript:;" class="text-info icon-move-right text-sm">Learn More
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
<div class="col-lg-3 col-sm-6 mt-lg-0 mt-4">
<h6 class="mb-2">Less Code</h6>
<p class="mb-2 me-4 text-sm">Make your code easier to maintain using variables.</p>
<a href="javascript:;" class="text-info icon-move-right text-sm">Learn More
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
<div class="col-lg-3 col-sm-6 mt-lg-0 mt-4">
<h6 class="mb-2">Fully Responsive</h6>
<p class="mb-2 me-4 text-sm">This design system is fully supported on any device.</p>
<a href="javascript:;" class="text-info icon-move-right text-sm">Learn More
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
</div>
</section>
<!-- -------- END Features w/ 4 cols w/ title & text & link -------- -->Features 12
<!-- -------- START Features w/ 4 cols w/ colored icon & title & text -------- -->
<section class="py-7">
<div class="container">
<div class="row justify-content-start">
<div class="col-md-6">
<div class="p-3 text-start border-radius-lg">
<i class="material-symbols-rounded text-gradient text-primary text-3xl">qr_code</i>
<h5 class="mt-3">Modular Components</h5>
<p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.</p>
</div>
<div class="p-3 text-start border-radius-lg mt-3">
<i class="material-symbols-rounded text-gradient text-primary text-3xl">local_library</i>
<h5 class="mt-3">Great Features</h5>
<p>People are so scared to lose that they don't even try. Like, one thing people can't say is that I'm not trying, and I'm not trying my hardest.</p>
</div>
</div>
<div class="col-md-6">
<div class="p-3 text-start border-radius-lg">
<i class="material-symbols-rounded text-gradient text-primary text-3xl">verified_user</i>
<h5 class="mt-3">Awesome Support</h5>
<p>The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color.</p>
</div>
<div class="p-3 text-start border-radius-lg mt-3">
<i class="material-symbols-rounded text-gradient text-primary text-3xl">computer</i>
<h5 class="mt-3">Modern Interface</h5>
<p>If everything I did failed - which it doesn't, it actually succeeds - just the fact that I'm willing to fail is an inspiration.</p>
</div>
</div>
</div>
</div>
</section>
<!-- -------- END Features w/ 4 cols w/ colored icon & title & text -------- -->Features 13
<!-- Section with icon, title and description -->
<section class="py-8">
<div class="container py-5">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="p-3 text-center">
<div class="icon icon-shape icon-md bg-gradient-danger shadow-danger mx-auto">
<i class="material-symbols-rounded opacity-10">inbox</i>
</div>
<h5 class="mt-4">Field Groups</h5>
<p>The document management piece enables HR to write.</p>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="p-3 text-center">
<div class="icon icon-shape icon-md bg-gradient-danger shadow-danger mx-auto">
<i class="material-symbols-rounded opacity-10">person_search</i>
</div>
<h5 class="mt-4">Record Selectors</h5>
<p>In a classic all exhibitors will be able to pitch.</p>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="p-3 text-center">
<div class="icon icon-shape icon-md bg-gradient-danger shadow-danger mx-auto">
<i class="material-symbols-rounded opacity-10">stream</i>
</div>
<h5 class="mt-4">Expand Configuration</h5>
<p>The $360 exhibitor pass includes a digital exhibition.</p>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="p-3 text-center">
<div class="icon icon-shape icon-md bg-gradient-danger shadow-danger mx-auto">
<i class="material-symbols-rounded opacity-10">vrpano</i>
</div>
<h5 class="mt-4">Virtual Info Areas</h5>
<p>Speaking of a stellar, this one lets you navigate.</p>
</div>
</div>
</div>
</div>
</section>
<!-- END Section with icon, title and description -->Features 14
<!-- -------- START Features w/ 4 cols w/ white icon on colored background & title & text -------- -->
<section class="py-6">
<div class="container">
<div class="row justify-content-start">
<div class="col-md-6">
<div class="p-3 text-start border-radius-lg">
<div class="icon icon-shape icon-md bg-gradient-info shadow-info text-center">
<i class="material-symbols-rounded opacity-10">view_in_ar</i>
</div>
<h5 class="mt-3">Modular Components</h5>
<p class="w-75">The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.</p>
</div>
<div class="p-3 text-start border-radius-lg">
<div class="icon icon-shape icon-md bg-gradient-info shadow-info text-center">
<i class="material-symbols-rounded opacity-10">dvr</i>
</div>
<h5 class="mt-3">Great Features</h5>
<p class="w-75">People are so scared to lose that they don't even try. Like, one thing people can't say is that I'm not trying, and I'm not trying my hardest.</p>
</div>
</div>
<div class="col-md-6">
<div class="p-3 text-start border-radius-lg">
<div class="icon icon-shape icon-md bg-gradient-info shadow-info text-center">
<i class="material-symbols-rounded opacity-10">access_alarms</i>
</div>
<h5 class="mt-3">Awesome Support</h5>
<p class="w-75">The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color.</p>
</div>
<div class="p-3 text-start border-radius-lg">
<div class="icon icon-shape icon-md bg-gradient-info shadow-info text-center">
<i class="material-symbols-rounded opacity-10">settings_system_daydream</i>
</div>
<h5 class="mt-3">Modern Interface</h5>
<p class="w-75">If everything I did failed - which it doesn't, it actually succeeds - just the fact that I'm willing to fail is an inspiration.</p>
</div>
</div>
</div>
</div>
</section>
<!-- -------- END Features w/ 4 cols w/ white icon on colored background & title & text -------- -->