Feature component - 18
COPY
<section class="feature py-5">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="sectioner-header text-center mb-5">
<h3>Features</h3>
<span class="line"></span>
<p>Sed quis nisi nisi. Proin consectetur porttitor dui sit amet viverra. Fusce sit amet lorem
faucibus, vestibulum ante in, pharetra ante.</p>
</div>
<div class="section-content text-center">
<div class="row">
<div class="col-md-4 col-sm-12 pt-5">
<div class="d-flex media single-feature">
<div class="media-body text-end media-right-margin">
<h5>Fast Processing</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididugnt ut labore</p>
</div>
<div class="media-right icon-border">
<span class="fa fa-bolt mt-2" aria-hidden="true"><i class="bi bi-lightning-charge-fill"></i></span>
</div>
</div>
<div class="d-flex media single-feature">
<div class="media-body text-end media-right-margin">
<h5>Low Power Consuming</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididugnt ut labore</p>
</div>
<div class="media-right icon-border">
<span class="fa fa-battery-full" aria-hidden="true"><i class="bi bi-battery-half"></i></span>
</div>
</div>
<div class="d-flex media single-feature">
<div class="media-body text-end media-right-margin">
<h5>Wifi Compatibility</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididugnt ut labore</p>
</div>
<div class="media-right icon-border">
<span class="fa fa-wifi" aria-hidden="true"><i class="bi bi-wifi"></i></span>
</div>
</div>
</div>
<div class="col-md-4 d-none d-md-block d-lg-block">
<div class="feature-mobile">
<img src="/html-component/images/mobile/two-girls-iphone.png" class="w-75 img-fluid">
</div>
</div>
<div class="col-md-4 col-sm-12 pt-5">
<div class="d-flex media single-feature">
<div class="media-left icon-border media-right-margin">
<span class="fa fa-check-double" aria-hidden="true"><i class="bi bi-check-all"></i></span>
</div>
<div class="media-body text-start">
<h5>Regular Updates</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididugnt ut labore</p>
</div>
</div>
<div class="d-flex media single-feature">
<div class="media-left icon-border media-right-margin">
<span class="fa fa-dollar-sign" aria-hidden="true"><i class="bi bi-cash-coin"></i></span>
</div>
<div class="media-body text-start">
<h5>Save Money</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididugnt ut labore</p>
</div>
</div>
<div class="d-flex media single-feature">
<div class="media-left icon-border media-right-margin">
<span class="fa fa-hdd" aria-hidden="true"><i class="bi bi-database-check"></i></span>
</div>
<div class="media-body text-start">
<h5>Unlimited Storage</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididugnt ut labore</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-blue: #1e39fc;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.single-feature {
margin-bottom: 80px;
margin-top: 40px;
}
.single-feature h5 {
font-size: 16px;
}
.media-right-margin {
margin-right: 25px;
}
.single-feature p {
font-size: 13px;
}
.icon-border span {
display: block;
position: relative;
width: 50px;
height: 50px;
border-radius: 100px;
color:var(--bs-blue);
font-size: 18px;
line-height: 50px;
border: 2px solid #1e39fcab;
}
.line {
height: 1px;
width: 50px;
background: var(--bs-blue);
display: block;
margin: 5px auto 15px;
}
.sectioner-header p {
color: #818992;
font-size: 17px;
}
Feature component - 17
COPY
<section class="content py-5 pt-md-11">
<div class="container-lg">
<div class="row justify-content-center mb-5">
<div class="col-md-10 col-lg-8 text-center">
<h6 class="text-uppercase text-primary mb-2">
Follow initial
</h6>
<h2 class="display-5 fw-medium mb-9">
Visit <span class="text-underline-warning">loyal
evangelist</span>.
</h2>
<p class="text-muted mt-3">Modern features that will make your project easier. Lorem Ipsum available, but the
majority have suffered alteration in some form, by injected humour, or randomised words.</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-12">
<ol class="timeline g-5 timeline-expand-lg timeline-warning mb-0">
<li class="timeline-item active mb-4">
<h4>
Consectetur amet
</h4>
<p class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In urna lectus, mattis non
accumsan in, tempor dictum neque.
</p>
<a href="#" class="link-more me-2 mb-2 p-2 px-3 rounded-5">More <i class="bi bi-arrow-right"></i> </a>
</li>
<li class="timeline-item active mb-4">
<h4>
Mattis accumsan
</h4>
<p class="text-muted">
In urna lectus, mattis non accumsan in, tempor dictum neque. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
<a href="#" class="link-more me-2 mb-2 p-2 px-3 rounded-5">More <i class="bi bi-arrow-right"></i> </a>
</li>
<li class="timeline-item active mb-4">
<h4>
In urna lectus
</h4>
<p class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In urna lectus, mattis non
accumsan in, tempor dictum neque.
</p>
<a href="#" class="link-more me-2 mb-2 p-2 px-3 rounded-5">More <i class="bi bi-arrow-right"></i> </a>
</li>
</ol>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1264ff;
--bs-primary-rgb: 18, 100, 255;
--bs-secondary: #1c1a28;
--bs-secondary-rgb: 28, 26, 40;
--bs-text-primary: var(--bs-primary);
--bs-text-secondary: var(--bs-secondary);
}
body {
font-family: 'Inter', sans-serif;
}
.text-primary {
color: var(--bs-text-primary) !important;
}
a {
text-decoration: none;
color: var(--bs-text-primary);
}
[class*=text-underline-] {
background: repeat-x left 1em/1em 0.15em;
}
.text-underline-warning {
background-image: linear-gradient(90deg, hsl(219deg 100% 50% / 25%), hsl(219deg 100% 50% / 25%));
}
@media (min-width: 992px) {
.timeline-expand-lg {
display: flex;
}
}
.timeline {
--bs-timeline-counter-size: 3rem;
list-style-type: none;
padding-left: 0;
}
.timeline-expand-lg .timeline-item {
flex: 1;
}
.timeline-item {
counter-increment: timeline-counter;
display: block;
position: relative;
text-align: center;
}
.timeline-warning .timeline-item.active:before {
background-color: var(--bs-text-primary);
}
.timeline-warning .timeline-item:before {
background-color: color-level(var(--bs-text-primary), -7);
color: #fff;
border: 2px solid #c1d7ff;
}
.timeline-item:before {
align-items: center;
border-radius: 50%;
content: counter(timeline-counter);
display: flex;
height: var(--bs-timeline-counter-size);
justify-content: center;
margin: 0 auto 1rem;
position: relative;
width: var(--bs-timeline-counter-size);
z-index: 2;
font-size: 1.3rem;
}
.timeline-warning .timeline-item.active:after {
border-color: #c1d7ff;
}
@media (min-width: 992px) {
.timeline-expand-lg .timeline-item:after {
display: block;
}
}
.timeline-warning .timeline-item:after {
border-color: color-level(var(--bs-text-primary), -7);
}
.timeline-item:first-child:after {
left: 50%;
width: 50%;
}
.timeline-item:last-child:after {
right: 50%;
width: 50%;
}
.timeline-item:after {
border-top: calc(var(--bs-border-width)*2) solid;
content: "";
display: none;
left: 0;
position: absolute;
right: 0;
top: calc(var(--bs-timeline-counter-size)*.5);
}
.g-5 li {
padding: 0 30px 0;
}
.link-more .bi {
transition: margin-left .2s;
}
.link-more {
transition: background-color .2s;
background-color: #e7efff;
}
.link-more:hover {
background-color: #eee;
color: #1c1a28;
}
.link-more:hover .bi {
margin-left: 5px;
}
Feature component - 16
COPY
<div id="service" class="section py-5">
<div class="container">
<header class="mb-5 w-75">
<h2 class="display-5 fw-semibold">Stay on top of the <span class="text-primary">Customer Support</span>
</h2>
<p class="text-muted">Modern features that will make your project easier. Lorem Ipsum available, but the
majority have suffered alteration in some form, by injected humour, or randomised words. Lorem Ipsum
available.</p>
</header>
<!-- row -->
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<!-- features block -->
<div class="four-service p-2 mb-4">
<div class="four-service-icon text-primary mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 512 512">
<rect stroke="currentColor" x="48" y="96" width="416" height="320" rx="56" ry="56" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</rect>
<line stroke="currentColor" x1="48" y1="192" x2="464" y2="192" style="fill:none;stroke-linejoin:round;stroke-width:60px"></line>
<rect stroke="currentColor" x="128" y="300" width="48" height="20" style="fill:none;;stroke-linejoin:round;stroke-width:60px"></rect>
</svg>
<!-- <i class="fas fa-credit-card text-primary"></i> -->
</div>
<div class="four-service-content">
<h3 class="h5 mb-2">Payment Gateways</h3>
<p class="text-muted">Lorem Ipsum available, but the majority have suffered alteration in
some form, by
injected humour, or randomised words.</p>
<p>
<a href="#" class="text-decoration-none hover-underline-animation">Learn more <span aria-hidden="true">→</span></a>
</p>
</div>
</div><!-- end features block -->
</div>
<div class="col-12 col-md-6 col-lg-4">
<!-- features block -->
<div class="four-service p-2 mb-4">
<div class="four-service-icon text-primary mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 512 512">
<path stroke="currentColor" d="M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z" style="fill:none;stroke-miterlimit:10;stroke-width:32px"></path>
<line stroke="currentColor" x1="338.29" y1="338.29" x2="448" y2="448" style="fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px">
</line>
</svg>
<!-- <i class="fas fa-shipping-fast text-primary"></i> -->
</div>
<div class="four-service-content">
<h3 class="h5 mb-2">Shipment Tracking</h3>
<p class="text-muted">Lorem Ipsum available, but the majority have suffered alteration in
some form, by
injected humour, or randomised words.</p>
<p>
<a href="#" class="text-decoration-none hover-underline-animation">Learn more <span aria-hidden="true">→</span></a>
</p>
</div>
</div><!-- end features block -->
</div>
<div class="col-12 col-md-6 col-lg-4">
<!-- features block -->
<div class="four-service p-2 mb-4">
<div class="four-service-icon text-primary mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 512 512">
<path stroke="currentColor" d="M256.05,80.65Q263.94,80,272,80c106,0,192,86,192,192S378,464,272,464A192.09,192.09,0,0,1,89.12,330.65" style="fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px">
</path>
<path stroke="currentColor" d="M256,48C141.12,48,48,141.12,48,256a207.29,207.29,0,0,0,18.09,85L256,256Z" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</path>
</svg>
</div>
<div class="four-service-content">
<h3 class="h5 mb-2">Sales Report</h3>
<p class="text-muted">Lorem Ipsum available, but the majority have suffered alteration in
some form, by
injected humour, or randomised words.</p>
<p>
<a href="#" class="text-decoration-none hover-underline-animation">Learn more <span aria-hidden="true">→</span></a>
</p>
</div>
</div><!-- end features block -->
</div>
<div class="col-12 col-md-6 col-lg-4">
<!-- features block -->
<div class="four-service p-2 mb-4">
<div class="four-service-icon text-primary mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 512 512">
<rect stroke="currentColor" x="32" y="64" width="448" height="320" rx="32" ry="32" style="fill:none;stroke-linejoin:round;stroke-width:32px"></rect>
<polygon fill="currentColor" points="304 448 296 384 216 384 208 448 304 448" style="stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></polygon>
<line stroke="currentColor" x1="368" y1="448" x2="144" y2="448" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</line>
<path fill="currentColor" d="M32,304v48a32.09,32.09,0,0,0,32,32H448a32.09,32.09,0,0,0,32-32V304Zm224,64a16,16,0,1,1,16-16A16,16,0,0,1,256,368Z">
</path>
</svg>
</div>
<div class="four-service-content">
<h3 class="h5 mb-2">Professional Design</h3>
<p class="text-muted">Lorem Ipsum available, but the majority have suffered alteration in
some form, by
injected humour, or randomised words.</p>
<p>
<a href="#" class="text-decoration-none hover-underline-animation">Learn more <span aria-hidden="true">→</span></a>
</p>
</div>
<div class="line"></div>
</div><!-- end features block -->
</div>
<div class="col-12 col-md-6 col-lg-4">
<!-- features block -->
<div class="four-service p-2 mb-4">
<div class="four-service-icon text-primary mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 512 512">
<path stroke="currentColor" d="M448,341.37V170.61A32,32,0,0,0,432.11,143l-152-88.46a47.94,47.94,0,0,0-48.24,0L79.89,143A32,32,0,0,0,64,170.61V341.37A32,32,0,0,0,79.89,369l152,88.46a48,48,0,0,0,48.24,0l152-88.46A32,32,0,0,0,448,341.37Z" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</path>
<polyline stroke="currentColor" points="69 153.99 256 263.99 443 153.99" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</polyline>
<line stroke="currentColor" x1="256" y1="463.99" x2="256" y2="263.99" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</line>
</svg>
</div>
<div class="four-service-content">
<h3 class="h5 mb-2">Unlimited Products</h3>
<p class="text-muted">Lorem Ipsum available, but the majority have suffered alteration in
some form, by
injected humour, or randomised words.</p>
<p>
<a href="#" class="text-decoration-none hover-underline-animation">Learn more <span aria-hidden="true">→</span></a>
</p>
</div>
<div class="line"></div>
</div><!-- end features block -->
</div>
<div class="col-12 col-md-6 col-lg-4">
<!-- features block -->
<div class="four-service p-2 mb-4">
<div class="four-service-icon text-primary mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 512 512">
<path stroke="currentColor" d="M416,221.25V416a48,48,0,0,1-48,48H144a48,48,0,0,1-48-48V96a48,48,0,0,1,48-48h98.75a32,32,0,0,1,22.62,9.37L406.63,198.63A32,32,0,0,1,416,221.25Z" style="fill:none;stroke-linejoin:round;stroke-width:32px"></path>
<path stroke="currentColor" d="M256,56V176a32,32,0,0,0,32,32H408" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</path>
<line stroke="currentColor" x1="176" y1="288" x2="336" y2="288" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</line>
<line stroke="currentColor" x1="176" y1="368" x2="336" y2="368" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</line>
</svg>
<!-- <i class="fas fa-file-invoice text-primary"></i> -->
</div>
<div class="four-service-content">
<h3 class="h5 mb-2">Invoice Generator</h3>
<p class="text-muted">Lorem Ipsum available, but the majority have suffered alteration in
some form, by
injected humour, or randomised words.</p>
<p>
<a href="#" class="text-decoration-none hover-underline-animation">Learn more <span aria-hidden="true">→</span></a>
</p>
</div>
<div class="line"></div>
</div><!-- end features block -->
</div>
</div><!-- end row -->
</div>
</div>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #4f46e5;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
Feature component - 15
COPY
<section class="hero bg-light">
<div class="container-fluid p-0 m-0">
<div class="row g-0 d-lg-flex align-items-center justify-content-center">
<div class="col-md-8 col-12 text-center" style="margin-bottom: 100px;">
<div class="p-5">
<h5 class="text-uppercase fs-6">Features</h5>
<h2 class="text-white display-5 hero-title mt-2 fw-semibold text-gradient">
Simplify Design, Elevate Experiences
</h2>
<p class="w-75 ms-auto me-auto">
Components are beautiful, responsive and cross-browser compatible. HTML, CSS & JavaScript
codes are clean,
reusable and easy to use. It's FREE, try it now..
</p>
</div>
<div class="container text-center my-3">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="row">
<div class="col-12 col-md-6">
<!-- Item -->
<div class="d-flex mb-4">
<div class="">
<div class="badge badge-lg badge-rounded-circle bg-primary">
<span>1</span>
</div>
<h4 class="fs-6 mb-2 mt-4">
Can I use webui for my clients?
</h4>
<p class="text-black-50">
Absolutely. The webui component Themes license allows you to build a website
for personal use
or for a client.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<!-- Item -->
<div class="d-flex mb-4">
<div>
<div class="badge badge-lg badge-rounded-circle bg-success">
<span>2</span>
</div>
<h4 class="fs-6 mb-2 mt-4">
Do I get free updates?
</h4>
<p class="text-black-50">
Yes. We update all of our themes with each webui component update, plus are
constantly and features.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<!-- Item -->
<div class="d-flex mb-4">
<div>
<div class="badge badge-lg badge-rounded-circle bg-danger">
<span>3</span>
</div>
<h4 class="fs-6 mb-2 mt-4">
Is there a money back guarantee?
</h4>
<p class="text-black-50">
Yup! webui component Themes come with a satisfaction guarantee. Submit a
return and get your
money back.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<!-- Item -->
<div class="d-flex mb-4">
<div>
<div class="badge badge-lg badge-rounded-circle bg-info">
<span>4</span>
</div>
<h4 class="fs-6 mb-2 mt-4">
Does it work with Rails? React? Laravel?
</h4>
<p class="text-black-50">
webui has basic CSS/JS files you can include. If you want to
enable deeper customization.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-dark">
<div class="row g-0 justify-content-center">
<div class="col-12 col-md-6 text-center mb-5 video-container">
<a href="#" class="d-block">
<img src="/html-component/images/youtube-banner.jpg" alt="" class="img-fluid rounded-2" style="margin-top: -100px;">
</a>
</div>
</div>
</div>
</div></section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1264ff;
--bs-primary-dark: #004bd6;
--bs-primary-rgb: 18, 100, 255;
--bs-secondary: #b7d0ff;
--bs-secondary-rgb: 28, 26, 40;
}
body {
font-family: 'Inter', sans-serif;
font-size: 1rem;
}
.hero .hero-title {
font-weight: 400;
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.text-gradient {
background: linear-gradient(90deg, #1264ff 16%, #004bd6 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.video-container img {
border: 1px solid #212529;
transition: box-shadow .3s;
}
.video-container img:hover {
box-shadow: 0px 1px 2px 0px rgb(254 0 2 / 70%), 1px 2px 4px 0px rgb(254 0 2 / 60%), 2px 4px 8px 0px rgb(254 0 2 / 50%), 2px 4px 16px 0px rgb(254 0 2 / 56%) !important;
}
.badge-rounded-circle {
border-radius: 50%;
display: initial;
padding: 10px 14px;
height: fit-content;
}
Feature component - 14
COPY
<div id="service" class="section bg-light py-5">
<div class="container">
<header class="text-center mx-auto mb-5">
<h2 class="h1 fw-semibold text-primary">Our Features</h2>
<p class="text-muted">Modern features that will make your project easier. Lorem Ipsum available, but the
majority have suffered alteration in some form, by injected humour, or randomised words.</p>
</header>
<!-- row -->
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<!-- features block -->
<div class="four-service p-5 mb-4 rounded-3 shadow-sm border">
<div class="four-service-icon text-primary mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 512 512">
<rect stroke="currentColor" x="48" y="96" width="416" height="320" rx="56" ry="56" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</rect>
<line stroke="currentColor" x1="48" y1="192" x2="464" y2="192" style="fill:none;stroke-linejoin:round;stroke-width:60px"></line>
<rect stroke="currentColor" x="128" y="300" width="48" height="20" style="fill:none;;stroke-linejoin:round;stroke-width:60px"></rect>
</svg>
<!-- <i class="fas fa-credit-card text-primary"></i> -->
</div>
<div class="four-service-content">
<h3 class="h5 mb-2">Payment Gateways</h3>
<p class="text-muted">Lorem Ipsum available, but the majority have suffered alteration in
some form, by
injected humour, or randomised words.</p>
</div>
</div><!-- end features block -->
</div>
<div class="col-12 col-md-6 col-lg-4">
<!-- features block -->
<div class="four-service p-5 mb-4 rounded-3 shadow-sm border">
<div class="four-service-icon text-primary mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 512 512">
<path stroke="currentColor" d="M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z" style="fill:none;stroke-miterlimit:10;stroke-width:32px"></path>
<line stroke="currentColor" x1="338.29" y1="338.29" x2="448" y2="448" style="fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px">
</line>
</svg>
<!-- <i class="fas fa-shipping-fast text-primary"></i> -->
</div>
<div class="four-service-content">
<h3 class="h5 mb-2">Shipment Tracking</h3>
<p class="text-muted">Lorem Ipsum available, but the majority have suffered alteration in
some form, by
injected humour, or randomised words.</p>
</div>
</div><!-- end features block -->
</div>
<div class="col-12 col-md-6 col-lg-4">
<!-- features block -->
<div class="four-service p-5 mb-4 rounded-3 shadow-sm border">
<div class="four-service-icon text-primary mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 512 512">
<path stroke="currentColor" d="M256.05,80.65Q263.94,80,272,80c106,0,192,86,192,192S378,464,272,464A192.09,192.09,0,0,1,89.12,330.65" style="fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px">
</path>
<path stroke="currentColor" d="M256,48C141.12,48,48,141.12,48,256a207.29,207.29,0,0,0,18.09,85L256,256Z" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</path>
</svg>
</div>
<div class="four-service-content">
<h3 class="h5 mb-2">Sales Report</h3>
<p class="text-muted">Lorem Ipsum available, but the majority have suffered alteration in
some form, by
injected humour, or randomised words.</p>
</div>
</div><!-- end features block -->
</div>
<div class="col-12 col-md-6 col-lg-4">
<!-- features block -->
<div class="four-service p-5 mb-4 rounded-3 shadow-sm border">
<div class="four-service-icon text-primary mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 512 512">
<rect stroke="currentColor" x="32" y="64" width="448" height="320" rx="32" ry="32" style="fill:none;stroke-linejoin:round;stroke-width:32px"></rect>
<polygon fill="currentColor" points="304 448 296 384 216 384 208 448 304 448" style="stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></polygon>
<line stroke="currentColor" x1="368" y1="448" x2="144" y2="448" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</line>
<path fill="currentColor" d="M32,304v48a32.09,32.09,0,0,0,32,32H448a32.09,32.09,0,0,0,32-32V304Zm224,64a16,16,0,1,1,16-16A16,16,0,0,1,256,368Z">
</path>
</svg>
</div>
<div class="four-service-content">
<h3 class="h5 mb-2">Professional Design</h3>
<p class="text-muted">Lorem Ipsum available, but the majority have suffered alteration in
some form, by
injected humour, or randomised words.</p>
</div>
<div class="line"></div>
</div><!-- end features block -->
</div>
<div class="col-12 col-md-6 col-lg-4">
<!-- features block -->
<div class="four-service p-5 mb-4 rounded-3 shadow-sm border">
<div class="four-service-icon text-primary mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 512 512">
<path stroke="currentColor" d="M448,341.37V170.61A32,32,0,0,0,432.11,143l-152-88.46a47.94,47.94,0,0,0-48.24,0L79.89,143A32,32,0,0,0,64,170.61V341.37A32,32,0,0,0,79.89,369l152,88.46a48,48,0,0,0,48.24,0l152-88.46A32,32,0,0,0,448,341.37Z" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</path>
<polyline stroke="currentColor" points="69 153.99 256 263.99 443 153.99" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</polyline>
<line stroke="currentColor" x1="256" y1="463.99" x2="256" y2="263.99" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</line>
</svg>
</div>
<div class="four-service-content">
<h3 class="h5 mb-2">Unlimited Products</h3>
<p class="text-muted">Lorem Ipsum available, but the majority have suffered alteration in
some form, by
injected humour, or randomised words.</p>
</div>
<div class="line"></div>
</div><!-- end features block -->
</div>
<div class="col-12 col-md-6 col-lg-4">
<!-- features block -->
<div class="four-service p-5 mb-4 rounded-3 shadow-sm border">
<div class="four-service-icon text-primary mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 512 512">
<path stroke="currentColor" d="M416,221.25V416a48,48,0,0,1-48,48H144a48,48,0,0,1-48-48V96a48,48,0,0,1,48-48h98.75a32,32,0,0,1,22.62,9.37L406.63,198.63A32,32,0,0,1,416,221.25Z" style="fill:none;stroke-linejoin:round;stroke-width:32px"></path>
<path stroke="currentColor" d="M256,56V176a32,32,0,0,0,32,32H408" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</path>
<line stroke="currentColor" x1="176" y1="288" x2="336" y2="288" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</line>
<line stroke="currentColor" x1="176" y1="368" x2="336" y2="368" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
</line>
</svg>
<!-- <i class="fas fa-file-invoice text-primary"></i> -->
</div>
<div class="four-service-content">
<h3 class="h5 mb-2">Invoice Generator</h3>
<p class="text-muted">Lorem Ipsum available, but the majority have suffered alteration in
some form, by
injected humour, or randomised words.</p>
</div>
<div class="line"></div>
</div><!-- end features block -->
</div>
</div><!-- end row -->
</div>
</div>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #4f46e5;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.four-service:hover {
box-shadow: none !important;
border: 1px solid var(--bs-primary);
background: var(--bs-primary);
color: #ffffff;
}
.four-service:hover p {
color: #ffffff !important;
}
Feature component - 13
COPY
<section class="py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-6">
<div class="bg-primary bg-opacity-10 rounded-3 p-4 me-5">
<img src="/html-component/images/app/Portfolio.jpg" alt="..." class="img-fluid rounded-3 shadow-sm">
</div>
</div>
<div class="col-12 col-md-6">
<div class="pe-3">
<div class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-command text-primary" viewbox="0 0 16 16">
<path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3zM6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5H6zm4 1v4H6V6h4zm1-1V3.5A1.5 1.5 0 1 1 12.5 5H11zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5V11zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11H5z"></path>
</svg>
</div>
<h4 class="fs-5">We maximize your earnings.</h4>
<h2 class="fs-1 text-primary">Management made <i class="text-dark">EASY</i></h2>
<p class="fs-lg text-gray mb-4 mt-3">
Instead of constantly worrying about when your home will be in demand, just share your
availability and we will price based on popularity of your listing, seasonal factors, nearby
events, and more.
</p>
<!-- List -->
<div class="row mb-4">
<div class="col-12 col-lg-6">
<div class="d-flex mb-3">
<div class="badge badge-rounded-circle bg-primary-soft me-4">
<i class="bi bi-chevron-right"></i>
</div>
<p class="mb-0 mt-1">
35% more earned
</p>
</div>
<div class="d-flex">
<div class="badge badge-rounded-circle bg-primary-soft me-4">
<i class="bi bi-chevron-right"></i>
</div>
<p class="mb-0 mt-1">
No wasted time
</p>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="d-flex mb-3">
<span class="badge badge-rounded-circle bg-primary-soft me-4">
<i class="bi bi-chevron-right"></i>
</span>
<p class="mb-0 mt-1">
60% less vacancy
</p>
</div>
<div class="d-flex">
<div class="badge badge-rounded-circle bg-primary-soft me-1 me-4">
<i class="bi bi-chevron-right"></i>
</div>
<p class="mb-0 mt-1">
Data driven
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1264ff;
--bs-primary-rgb: 18, 100, 255;
--bs-secondary: #1c1a28;
--bs-secondary-rgb: 28, 26, 40;
}
body {
font-family: 'Inter', sans-serif;
}
.badge-rounded-circle {
border-radius: 50%;
display: initial;
padding: 10px 10px;
height: fit-content;
}
.fs-6 {
font-size: .8rem !important;
}
.text-gray {
color: #6b6b6b;
}
.badge.bg-primary-soft {
background: rgb(var(--bs-primary-rgb), 0.15);
color: var(--bs-primary);
}
.text-spcing-1 {
letter-spacing: .08em;
}
Feature component - 12
COPY
<section class="feature">
<div class="container py-5">
<div class="text-center pb-4">
<h4 class="fs-6 fw-normal rounded-1 bg-primary bg-opacity-100 py-1 px-2 text-white d-inline">PROFESSIONAL MEDICAL CENTER
</h4>
<h2 class="display-5 fw-medium mt-2">We Take Care of Your Health</h2>
<p class="text-muted">Mollis consectetur congue egestas egestas. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi.</p>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="feather-item p-4 p-md-5 rounded-3 bg-primary text-white">
<div class="mb-3 opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-command" viewbox="0 0 16 16">
<path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3zM6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5H6zm4 1v4H6V6h4zm1-1V3.5A1.5 1.5 0 1 1 12.5 5H11zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5V11zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11H5z"></path>
</svg>
</div>
<h3 class="h5">Cardiology</h3>
<p class="fs-7 opacity-75">Mollis consectetur congue egestas egestas. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. </p>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="feather-item p-4 p-md-5 rounded-3 bg-primary text-white">
<div class="mb-3 opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-gift" viewbox="0 0 16 16">
<path d="M3 2.5a2.5 2.5 0 0 1 5 0 2.5 2.5 0 0 1 5 0v.006c0 .07 0 .27-.038.494H15a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 14.5V7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2.038A2.968 2.968 0 0 1 3 2.506V2.5zm1.068.5H7v-.5a1.5 1.5 0 1 0-3 0c0 .085.002.274.045.43a.522.522 0 0 0 .023.07zM9 3h2.932a.56.56 0 0 0 .023-.07c.043-.156.045-.345.045-.43a1.5 1.5 0 0 0-3 0V3zM1 4v2h6V4H1zm8 0v2h6V4H9zm5 3H9v8h4.5a.5.5 0 0 0 .5-.5V7zm-7 8V7H2v7.5a.5.5 0 0 0 .5.5H7z"></path>
</svg>
</div>
<h3 class="h5">Surgery</h3>
<p class="fs-7 opacity-75">Id mollis consectetur congue egestas egestas. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. </p>
</div>
</div>
<div class="col-md-6">
<div class="feather-item p-4 p-md-5 rounded-3 bg-primary text-white">
<div class="mb-3 opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-layer-forward" viewbox="0 0 16 16">
<path d="M8.354.146a.5.5 0 0 0-.708 0l-3 3a.5.5 0 0 0 0 .708l1 1a.5.5 0 0 0 .708 0L7 4.207V12H1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H9V4.207l.646.647a.5.5 0 0 0 .708 0l1-1a.5.5 0 0 0 0-.708l-3-3z"></path>
<path d="M1 7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h4.5a.5.5 0 0 0 0-1H1V8h4.5a.5.5 0 0 0 0-1H1zm9.5 0a.5.5 0 0 0 0 1H15v2h-4.5a.5.5 0 0 0 0 1H15a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-4.5z"></path>
</svg>
</div>
<h3 class="h5">Family Medicine</h3>
<p class="fs-7 opacity-75">Congue fames odio tincidunt mus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. </p>
</div>
</div>
<div class="col-md-6">
<div class="feather-item p-4 p-md-5 rounded-3 bg-primary text-white">
<div class="mb-3 opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-box-fill" viewbox="0 0 16 16">
<path fill-rule="evenodd" d="M15.528 2.973a.75.75 0 0 1 .472.696v8.662a.75.75 0 0 1-.472.696l-7.25 2.9a.75.75 0 0 1-.557 0l-7.25-2.9A.75.75 0 0 1 0 12.331V3.669a.75.75 0 0 1 .471-.696L7.443.184l.004-.001.274-.11a.75.75 0 0 1 .558 0l.274.11.004.001 6.971 2.789Zm-1.374.527L8 5.962 1.846 3.5 1 3.839v.4l6.5 2.6v7.922l.5.2.5-.2V6.84l6.5-2.6v-.4l-.846-.339Z"></path>
</svg>
</div>
<h3 class="h5">Radiology</h3>
<p class="fs-7 opacity-75">Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. </p>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #4f46e5;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.feather-item:hover {
box-shadow: 0 0px 8px #66666694;
}
Feature component - 11
COPY
<section class="hero bg-light">
<div class="container-fluid p-0 m-0">
<div class="row g-0 d-lg-flex align-items-center justify-content-center">
<div class="col-md-8 col-12 text-center">
<div class="p-5">
<!-- content -->
<h2 class="text-white display-4 hero-title mt-2 fw-semibold text-gradient">
Beautifully designed
</h2>
<p class="mb-5">
Components are beautiful, responsive and cross-browser compatible. HTML, CSS & JavaScript codes are clean,
reusable and easy to use. It's FREE, try it now..
</p>
<!-- button -->
<div class="text-center" style="margin-bottom: 160px;">
<a href="#" class="btn btn-dark btn-lg me-md-2 shadow mb-2">Contact Us</a>
<a href="#" class="btn btn-lg btn-dark shadow mb-2">Our Services</a>
</div>
</div>
</div>
</div>
<div class="bg-primary">
<div class="row g-0 justify-content-center">
<div class="col-12 col-md-6 text-center">
<img src="/html-component/images/app/outcrowd-web-app.webp" alt="" class="img-fluid rounded-1" style="margin-top: -150px;">
</div>
</div>
</div>
</div></section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1264ff;
--bs-primary-dark: #004bd6;
--bs-primary-rgb: 18, 100, 255;
--bs-secondary: #b7d0ff;
--bs-secondary-rgb: 28, 26, 40;
}
body {
font-family: 'Inter', sans-serif;
font-size: 1rem;
}
.hero .hero-title {
font-weight: 400;
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.text-gradient {
background: linear-gradient(90deg, #1264ff 16%, #4f00aa 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Content component - 10
COPY
<section class="py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-6">
<!-- Badge -->
<span class="badge rounded-pill bg-primary-soft mb-3 px-4 py-2">
<span class="fs-8 fw-medium text-uppercase text-spcing-1">Pricing</span>
</span>
<!-- Heading -->
<h2 class="fs-1 text-primary">Worry about pricing?</h2>
<h4 class="mb-3">We maximize your earnings.</h4>
<!-- Text -->
<p class="fs-lg text-gray mb-5">
Instead of constantly worrying about when your home will be in demand, just share your
availability and we will price based on popularity of your listing, seasonal factors, nearby
events, and more.
</p>
<!-- List -->
<div class="row mb-4">
<div class="col-12 col-lg-6">
<div class="d-flex mb-3">
<div class="badge badge-rounded-circle bg-primary-soft me-4">
<i class="bi bi-chevron-right"></i>
</div>
<p class="mb-0 mt-1">
35% more earned
</p>
</div>
<div class="d-flex">
<div class="badge badge-rounded-circle bg-primary-soft me-4">
<i class="bi bi-chevron-right"></i>
</div>
<p class="mb-0 mt-1">
No wasted time
</p>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="d-flex mb-3">
<span class="badge badge-rounded-circle bg-primary-soft me-4">
<i class="bi bi-chevron-right"></i>
</span>
<p class="mb-0 mt-1">
60% less vacancy
</p>
</div>
<div class="d-flex">
<div class="badge badge-rounded-circle bg-primary-soft me-1 me-4">
<i class="bi bi-chevron-right"></i>
</div>
<p class="mb-0 mt-1">
Data driven
</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 order-1">
<img src="/html-component/images/product/product.jpg" alt="..." class="img-fluid rounded-1">
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1264ff;
--bs-primary-rgb: 18, 100, 255;
--bs-secondary: #1c1a28;
--bs-secondary-rgb: 28, 26, 40;
}
body {
font-family: 'Inter', sans-serif;
}
.badge-rounded-circle {
border-radius: 50%;
display: initial;
padding: 10px 10px;
height: fit-content;
}
.fs-6 {
font-size: .8rem !important;
}
.text-gray {
color: #6b6b6b;
}
.badge.bg-primary-soft {
background: rgb(var(--bs-primary-rgb), 0.15);
color: var(--bs-primary);
}
.text-spcing-1 {
letter-spacing: .08em;
}
Feature component - 9
COPY
<section class="feature">
<div class="container py-5">
<div class="row align-items-center justify-content-around">
<div class="col-md-5">
<div class="row g-2">
<div class="col-md-6">
<a href="#" class="card-metro">
<img src="/html-component/images/portrait/portrait-011.jpg" class="img-fluid" alt="card image">
</a>
<a href="#" class="card-metro">
<img src="/html-component/images/portrait/portrait-022s.jpg" class="img-fluid" alt="card image">
</a>
</div>
<div class="col-md-6">
<a href="#" class="card-metro">
<img src="/html-component/images/portrait/portrait-044s.jpg" class="img-fluid" alt="card image">
</a>
<a href="#" class="card-metro">
<img src="/html-component/images/portrait/portrait-033.jpg" class="img-fluid" alt="card image">
</a>
</div>
</div>
</div>
<div class="col-md-6">
<h2 class="display-5 fw-medium">
Mobility Aliquip
</h2>
<h5 class="display-7 fw-medium text-danger">
Massa maecenas vulputate elit non nullage
</h5>
<p class="fs-6 mt-3">Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis
tortor mi massa pharetra. Massa maecenas vulputate elit non nullage a duis tortor.
</p>
<a href="#" class="btn btn-danger rounded-pill mb-0 px-4">Services</a>
<a href="#" class="btn btn-dark rounded-pill mb-0 px-4">Contact</a>
</div>
</div>
<!-- Load more END -->
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
font-weight: normal;
}
.feature {
background: url(/html-component/images/bg/abstract-lines.svg);
background-repeat: no-repeat;
background-size: cover;
}
.card-metro:hover img {
opacity: 0.7;
}
.card-metro img {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-bottom: 10px;
border-radius: 10px;
}
Feature component - 8
COPY
<section class="py-5 case-study">
<div class="container py-5">
<div class="row justify-content-center text-center pb-3 mb-sm-2 mb-lg-3">
<h6 class="text-primary">Our Work Process</h6>
<h2 class="display-5 fw-medium pb-3 mb-3">Work Process</h2>
</div>
<div class="row gy-5 lightbox-gallery">
<div class="col-lg-6">
<div class="row">
<div class="col-md-5">
<img src="/html-component/images/service/ux-research.jpg" class="img-fluid" title="" alt="">
</div>
<div class="col-md-7 px-3">
<h6 class="text-primary">Requirement</h6>
<h4 class="fs-4">
Collect requirement
</h4>
<p class="text-muted">Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis tortor mi massa
pharetra</p>
<div class="btn-bar py-1">
<a class="" href="#"><i class="bi-arrow-up-right fs-5"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-md-5">
<img src="/html-component/images/service/ux-research-3.jpg" class="img-fluid" title="" alt="">
</div>
<div class="col-md-7 px-3">
<h6 class="text-primary">Requirement</h6>
<h4 class="fs-4">
Requirement analysis
</h4>
<p class="text-muted">Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis tortor mi massa
pharetra</p>
<div class="btn-bar py-1">
<a class="" href="#"><i class="bi-arrow-up-right fs-5"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-md-5">
<img src="/html-component/images/service/work2.jpg" class="img-fluid" title="" alt="">
</div>
<div class="col-md-7 px-3">
<h6 class="text-primary">Document</h6>
<h4 class="fs-4">
Prepare documentation
</h4>
<p class="text-muted">Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis tortor mi massa
pharetra</p>
<div class="btn-bar py-1">
<a class="" href="#"><i class="bi-arrow-up-right fs-5"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-md-5">
<img src="/html-component/images/service/code-2.jpg" class="img-fluid " title="" alt="">
</div>
<div class="col-md-7 px-3">
<h6 class="text-primary">Development</h6>
<h4 class="fs-4">
Start developing
</h4>
<p class="text-muted">Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis tortor mi massa
pharetra</p>
<div class="btn-bar py-1">
<a class="" href="#"><i class="bi-arrow-up-right fs-5"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #4f46e5;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: 79, 70, 229;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.case-study {
background: url(/html-component/images/bg/abstract-dots-lines.svg) left top;
background-repeat: no-repeat;
background-size: cover;
}
.btn-bar {
display: inline-block;
padding: 5px 10px;
background: #000000;
}
.btn-bar a {
color: #ffffff;
}
.btn-bar:hover {
background: var(--bs-primary);
}
Feature component - 7
COPY
<section class="feature">
<div class="container py-5 my-5">
<div class="d-flex align-items-end align-items-lg-center justify-content-between mb-4 pb-md-2">
<div class="d-flex w-100 align-items-center justify-content-between justify-content-lg-start">
<h2 class="h3 mb-0 me-md-4">Added today</h2>
<ul class="nav d-none d-md-flex ps-lg-2 mb-0">
<li class="nav-item"><a class="nav-link fs-sm mb-2 mb-md-0 bg-light rounded-1 me-2 active" href="#">Apartments</a></li>
<li class="nav-item"><a class="nav-link fs-sm mb-2 mb-md-0 bg-light rounded-1 me-2" href="#">Houses</a></li>
<li class="nav-item"><a class="nav-link fs-sm mb-2 mb-md-0 bg-light rounded-1 me-2" href="#">Rooms</a></li>
<li class="nav-item"><a class="nav-link fs-sm mb-2 mb-md-0 bg-light rounded-1 me-2" href="#">Commercial</a>
</li>
</ul>
</div>
<!-- <a class="btn btn-link fw-normal d-none d-lg-block p-0" href="#">View all <i
class="bi bi-arrow-right ms-2"></i></a> -->
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card bg-size-cover bg-position-center border-0 overflow-hidden h-100" style="background-image: url(/html-component/images/resort/resort-01.jpg); background-size: 100%;">
<div class="card-body pb-0">
<div class="d-flex">
<span class="badge bg-success fs-sm fw-medium py-2 me-1 px-2 rounded-1 text-uppercase">Verified</span>
<span class="badge bg-danger fs-sm fw-medium py-2 px-2 rounded-1 text-uppercase">New</span>
</div>
</div>
<div class="card-footer content-overlay border-0 pt-0 pb-4">
<div class="cfs d-sm-flex justify-content-between align-items-end pt-5 mt-2 mt-sm-5">
<a class="text-decoration-none text-light pe-2" href="#">
<div class="fs-sm text-uppercase pt-2 mb-1 text-warning">For rental</div>
<h3 class="h5 text-light mb-1">Luxury Rental Villa</h3>
<div class="fs-sm"><i class="bi bi-geo-alt me-1"></i> 111-101 Blvd Jamaica, NY 11004</div>
</a>
<div class="btn-group ms-n2 ms-sm-0 mt-3">
<a class="fs-4 text-warning" href="#" style="height: 2.75rem;">From $1,250</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card bg-size-cover bg-position-center border-0 overflow-hidden mb-4" style="background-image: url(/html-component/images/resort/resort-02.jpg); background-position: center left; background-size: 100%;">
<div class="card-body pb-0">
<span class="badge bg-danger fs-sm fw-medium py-2 px-2 rounded-1 text-uppercase">New</span>
<span class="badge bg-info fs-sm fw-medium py-2 px-2 rounded-1 text-uppercase">Offer</span>
</div>
<div class="card-footer content-overlay border-0 pt-0 pb-4">
<div class="d-sm-flex justify-content-between align-items-end pt-5 mt-2 mt-sm-5">
<a class="text-decoration-none text-light pe-2" href="#">
<div class="fs-sm text-uppercase pt-2 mb-1 text-warning">For sale</div>
<h3 class="h5 text-light mb-1">Duplex with Garage</h3>
<div class="fs-sm"><i class="bi bi-geo-alt me-1"></i>111-101 Blvd Jamaica, NY 11004</div>
</a>
<div class="btn-group ms-n2 ms-sm-0 mt-3">
<a class="fs-4 text-warning" href="#" style="height: 2.75rem;">From $25,150</a>
</div>
</div>
</div>
</div>
<div class="card bg-size-cover bg-position-center border-0 overflow-hidden" style="background-image: url(/html-component/images/resort/resort-03.jpg); background-position: center left; background-size: 100%;">
<div class="card-body pb-0">
<span class="badge bg-danger fs-sm fw-medium py-2 px-2 rounded-1 text-uppercase">New</span>
<span class="badge bg-warning fs-sm fw-medium py-2 px-2 rounded-1 text-uppercase">Discouted</span>
</div>
<div class="card-footer content-overlay border-0 pt-0 pb-4">
<div class="d-sm-flex justify-content-between align-items-end pt-5 mt-2 mt-sm-5">
<a class="text-decoration-none text-light pe-2" href="#">
<div class="fs-sm text-uppercase pt-2 mb-1 text-warning">For sale</div>
<h3 class="h5 text-light mb-1">Duplex with Garage</h3>
<div class="fs-sm"><i class="bi bi-geo-alt me-1"></i>111-101 Blvd Jamaica, NY 11004</div>
</a>
<div class="btn-group ms-n2 ms-sm-0 mt-3">
<a class="fs-4 text-warning" href="#" style="height: 2.75rem;">From $25,150</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #4f46e5;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.feature a {
text-decoration: none;
color: var(--bs-primary);
}
.feature .content-section svg {
vertical-align: middle;
fill: var(--bs-primary);
}
.feature .content-section p {
color: #666;
}
.feature .nav-link {
border: 1px solid #ffffff;
}
.feature .nav-link:hover {
border: 1px solid var(--bs-primary);
color: var(--bs-primary) !important;
}
.feature .nav-link.active {
background: var(--bs-primary) !important;
color: #ffffff !important;
}
.feature .content-overlay {
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(34, 34, 34));
}
.feature .card:hover {
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}
.feature .card:hover .content-overlay {
background-image: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0));
}
Used photos we collected from https://unsplash.com which are free to use
Feature component - 6
COPY
<section class="feature py-5">
<div class="container py-5">
<div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
<div class="col-lg-6 col-xl-4 order-lg-2">
<div class="card me-lg-5 shadow-lg bg-danger bg-opacity-75 text-white rounded-4">
<div class="card-body p-3">
<div class="d-flex flex-row align-items-center">
<div>
<div class="bg-dark-subtle rounded-circle me-4 px-2 opacity-75">
<i class="bi bi-check fs-3 text-danger"></i>
</div>
</div>
<div>
<p class="mb-0 text-white text-opacity-75">Nulla vitae elit libero pharetra dapibus.</p>
</div>
</div>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
<div class="card ms-lg-5 mt-4 shadow-lg bg-success bg-opacity-75 text-white rounded-4">
<div class="card-body p-3">
<div class="d-flex flex-row align-items-center">
<div>
<div class="bg-dark-subtle rounded-circle me-4 px-2 opacity-75">
<i class="bi bi-check fs-3 text-success"></i>
</div>
</div>
<div>
<p class="mb-0 text-white text-opacity-75">Vivamus sagittis lacus vel augue laoreet.</p>
</div>
</div>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
<div class="card mx-lg-3 mt-4 shadow-lg bg-info bg-opacity-75 text-white rounded-4 mb-3 mb-md-0">
<div class="card-body p-3">
<div class="d-flex flex-row align-items-center">
<div>
<div class="bg-dark-subtle rounded-circle me-4 px-2 opacity-75">
<i class="bi bi-check fs-3 text-info"></i>
</div>
</div>
<div>
<p class="mb-0 text-white text-opacity-75">Cras mattis consectetur purus sit amet.</p>
</div>
</div>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-lg-6 col-xl-8 text-white">
<h2 class="display-3 fw-medium mb-3">How It Works?</h2>
<p class="lead fs-lg pe-lg-5 text-white-75">Find out everything you need to know and more about how
we create our business process models.</p>
<p class="text-white text-opacity-75 mb-4">Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis
vestibulum. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies
vehicula ut id elit. Nullam quis risus eget urna mollis ornare.</p>
<p class="text-white text-opacity-75 mb-4">Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies
vehicula ut id elit. Nullam quis risus eget urna mollis ornare. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.</p>
<a href="#" class="btn btn-primary rounded-pill mb-0 px-4">Learn more <span aria-hidden="true">→</span></a>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.feature {
background: var(--bs-primary) url(/html-component/images/bg/hero-bg.png);
background-repeat: no-repeat;
background-size: cover;
}
Feature component - 5
COPY
<section class="feature">
<div class="container py-5">
<div class="row justify-content-center text-white">
<div class="col-md-4">
<div class="py-0 py-md-5">
<h2 class="display-5 fw-medium">
Mobility Aliquip
</h2>
<p class="fs-6 mt-3">Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis
tortor mi massa pharetra.
</p>
</div>
</div>
<div class="col-md-8">
<div class="row">
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0 border-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-011.jpg" class="img-fluid" alt="card image">
</div>
<div class="mt-auto py-3">
<p class="fs-6">Sed do eiusmod tempor incididunt</p>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0 border-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-022.jpg" class="img-fluid" alt="card image">
</div>
<div class="mt-auto py-3">
<p class="fs-6">Sed do eiusmod tempor incididunt</p>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0 border-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-044.jpg" class="img-fluid" alt="card image">
</div>
<div class="mt-auto py-3">
<p class="fs-6">Sed do eiusmod tempor incididunt</p>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0 border-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-033.jpg" class="img-fluid" alt="card image">
</div>
<div class="mt-auto py-3">
<p class="fs-6">Sed do eiusmod tempor incididunt</p>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Load more END -->
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
font-weight: normal;
}
.feature {
background: var(--bs-primary) url(/html-component/images/bg/pattern-round.png);
}
.card-metro {
overflow: hidden;
height: 100%;
text-decoration: none;
background: transparent;
color: var(--bs-white);
}
.card-metro:hover .card-image img {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}
.card-metro:hover {
color: rgb(var(--bs-white-rgb), .5);
}
.card-metro img {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
Feature component - 4
COPY
<section>
<section class="py-5">
<div class="container">
<div class="row justify-content-center text-center pb-3 mb-sm-2 mb-lg-3">
<div class="col-xl-6 col-lg-7 col-md-9">
<h2 class="h1 mb-lg-4 text-primary">Our Best Features</h2>
<p class="fs-lg text-muted mb-0">Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?.</p>
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-0 pb-xl-3">
<!-- Item -->
<div class="col position-relative">
<div class="card border-0 bg-transparent rounded-0 p-md-1 p-xl-3">
<div class="d-table bg-primary bg-opacity-10 text-primary rounded-3 p-2 px-3 mx-auto mt-3 mt-md-4">
<i class="bi bi-chat-square-quote fs-5"></i>
</div>
<div class="card-body text-center">
<h3 class="h5 pb-1 mb-2">Comments on Tasks</h3>
<p class="mb-0">Id mollis consectetur congue egestas egestas suspendisse blandit justo.</p>
</div>
</div>
<hr class="position-absolute top-0 end-0 w-1 h-100 d-none d-sm-block">
<hr class="position-absolute top-100 start-0 w-100 d-none d-sm-block">
</div>
<!-- Item -->
<div class="col position-relative">
<div class="card border-0 bg-transparent rounded-0 p-md-1 p-xl-3">
<div class="d-table bg-primary bg-opacity-10 text-primary rounded-3 p-2 px-3 mx-auto mt-3 mt-md-4">
<i class="bi bi-graph-up-arrow fs-5"></i>
</div>
<div class="card-body text-center">
<h3 class="h5 pb-1 mb-2">Tasks Analytics</h3>
<p class="mb-0">Non imperdiet facilisis nulla tellus Morbi scelerisque eget adipiscing vulputate.</p>
</div>
</div>
<hr class="position-absolute top-0 end-0 w-1 h-100 d-none d-md-block">
<hr class="position-absolute top-100 start-0 w-100 d-none d-sm-block">
</div>
<!-- Item -->
<div class="col position-relative">
<div class="card border-0 bg-transparent rounded-0 p-md-1 p-xl-3">
<div class="d-table bg-primary bg-opacity-10 text-primary rounded-3 p-2 px-3 mx-auto mt-3 mt-md-4">
<i class="bi bi-person-add fs-5"></i>
</div>
<div class="card-body text-center">
<h3 class="h5 pb-1 mb-2">Multiple Assignees</h3>
<p class="mb-0">A elementum, imperdiet enim, pretium etiam facilisi in aenean quam mauris.</p>
</div>
</div>
<hr class="position-absolute top-0 end-0 w-1 h-100 d-none d-sm-block d-md-none">
<hr class="position-absolute top-100 start-0 w-100 d-none d-sm-block">
</div>
<!-- Item -->
<div class="col position-relative">
<div class="card border-0 bg-transparent rounded-0 p-md-1 p-xl-3">
<div class="d-table bg-primary bg-opacity-10 text-primary rounded-3 p-2 px-3 mx-auto mt-3 mt-md-4">
<i class="bi bi-app-indicator fs-5"></i>
</div>
<div class="card-body text-center">
<h3 class="h5 pb-1 mb-2">Notifications</h3>
<p class="mb-0">Diam, suspendisse velit cras ac. Lobortis diam volutpat, eget pellentesque viverra.</p>
</div>
</div>
<hr class="position-absolute top-0 end-0 w-1 h-100 d-none d-md-block">
<hr class="position-absolute top-100 start-0 w-100 d-none d-sm-block d-md-none">
</div>
<!-- Item -->
<div class="col position-relative">
<div class="card border-0 bg-transparent rounded-0 p-md-1 p-xl-3">
<div class="d-table bg-primary bg-opacity-10 text-primary rounded-3 p-2 px-3 mx-auto mt-3 mt-md-4">
<i class="bi bi-list-task fs-5"></i>
</div>
<div class="card-body text-center">
<h3 class="h5 pb-1 mb-2">Sections & Subtasks</h3>
<p class="mb-0">Mi feugiat hac id in. Sit elit placerat lacus nibh lorem ridiculus lectus.</p>
</div>
</div>
<hr class="position-absolute top-0 end-0 w-1 h-100 d-none d-sm-block">
</div>
<!-- Item -->
<div class="col position-relative">
<div class="card border-0 bg-transparent rounded-0 p-md-1 p-xl-3">
<div class="d-table bg-primary bg-opacity-10 text-primary rounded-3 p-2 px-3 mx-auto mt-3 mt-md-4">
<i class="bi bi-database-check fs-5"></i>
</div>
<div class="card-body text-center">
<h3 class="h5 pb-1 mb-2">Data Security</h3>
<p class="mb-0">Aliquam malesuada neque eget elit nulla vestibulum nunc cras.</p>
</div>
</div>
</div>
</div>
</div>
<div class="position-absolute top-0 start-0 w-100 h-100" style="background-color: rgba(255,255,255,.05);"></div>
</section>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #009ce4;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
Content component - 3
COPY
<section class="content">
<div class="container-fluid p-3 p-md-5">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="bg-slate border p-5 rounded-5">
<h1 class="my-3 text-center">Extensive documentation</h1>
<div class="row align-items-center justify-content-center">
<div class="col-md-8 text-center my-3">
<p>Extensive documentation covering all components and tools makes implementation as elegant as the
design. The documentation covering all components and tools makes implementation as elegant as the
design. The documentation covering all components and tools makes implementation as elegant as the
design.</p>
<!-- button -->
<a href="#" class="btn btn-primary btn-lg me-2 shadow mb-2">Contact</a>
<a href="#" class="btn btn-lg btn-success shadow mb-2">Services</a>
</div>
<div class="col-md-8 order-1 mt-5 text-center">
<img src="/html-component/images/product/product-screen.png" class="img-fluid rounded-5">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #1a00ac;
--bs-blue-dark: #001574;
--bs-primary: var(--bs-blue);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.bg-slate {
--tw-bg-opacity: 1;
background-color: rgb(226 232 240/var(--tw-bg-opacity));
}
.content .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
background-color: var(--bs-blue);
border-color: var(--bs-blue-dark);
}
.content .btn-lg:hover {
background-color: var(--bs-blue-dark);
}
Feature component - 2
COPY
<section class="feature">
<div class="container py-5">
<div class="row py-2 pb-sm-3">
<div class="col-md-8 mb-5 mb-md-0">
<h5 class="fs-6 fw-normal rounded-1 bg-primary bg-opacity-100 py-1 px-2 text-white d-inline">Justo lorem
ipsum</h5>
<h2 class="fs-1 pb-4 mt-2">Blandit Proin Egestas
<div class="row">
<div class="col-md-6 mb-3">
<div class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-command" viewbox="0 0 16 16">
<path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3zM6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5H6zm4 1v4H6V6h4zm1-1V3.5A1.5 1.5 0 1 1 12.5 5H11zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5V11zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11H5z"></path>
</svg>
</div>
<h3 class="h5">Top Up Account Easily</h3>
<p class="fs-7">Mollis consectetur congue egestas egestas. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. </p>
</div>
<div class="col-md-6 mb-3">
<div class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-gift" viewbox="0 0 16 16">
<path d="M3 2.5a2.5 2.5 0 0 1 5 0 2.5 2.5 0 0 1 5 0v.006c0 .07 0 .27-.038.494H15a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 14.5V7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2.038A2.968 2.968 0 0 1 3 2.506V2.5zm1.068.5H7v-.5a1.5 1.5 0 1 0-3 0c0 .085.002.274.045.43a.522.522 0 0 0 .023.07zM9 3h2.932a.56.56 0 0 0 .023-.07c.043-.156.045-.345.045-.43a1.5 1.5 0 0 0-3 0V3zM1 4v2h6V4H1zm8 0v2h6V4H9zm5 3H9v8h4.5a.5.5 0 0 0 .5-.5V7zm-7 8V7H2v7.5a.5.5 0 0 0 .5.5H7z"></path>
</svg>
</div>
<h3 class="h5">Regular Cashback</h3>
<p>Id mollis consectetur congue egestas egestas. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. </p>
</div>
<div class="col-md-6">
<div class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-layer-forward" viewbox="0 0 16 16">
<path d="M8.354.146a.5.5 0 0 0-.708 0l-3 3a.5.5 0 0 0 0 .708l1 1a.5.5 0 0 0 .708 0L7 4.207V12H1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H9V4.207l.646.647a.5.5 0 0 0 .708 0l1-1a.5.5 0 0 0 0-.708l-3-3z"></path>
<path d="M1 7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h4.5a.5.5 0 0 0 0-1H1V8h4.5a.5.5 0 0 0 0-1H1zm9.5 0a.5.5 0 0 0 0 1H15v2h-4.5a.5.5 0 0 0 0 1H15a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-4.5z"></path>
</svg>
</div>
<h3 class="h5">Cost Statistics</h3>
<p>Congue fames odio tincidunt mus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. </p>
</div>
<div class="col-md-6">
<div class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-box-fill" viewbox="0 0 16 16">
<path fill-rule="evenodd" d="M15.528 2.973a.75.75 0 0 1 .472.696v8.662a.75.75 0 0 1-.472.696l-7.25 2.9a.75.75 0 0 1-.557 0l-7.25-2.9A.75.75 0 0 1 0 12.331V3.669a.75.75 0 0 1 .471-.696L7.443.184l.004-.001.274-.11a.75.75 0 0 1 .558 0l.274.11.004.001 6.971 2.789Zm-1.374.527L8 5.962 1.846 3.5 1 3.839v.4l6.5 2.6v7.922l.5.2.5-.2V6.84l6.5-2.6v-.4l-.846-.339Z"></path>
</svg>
</div>
<h3 class="h5">Data Security</h3>
<p>Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. </p>
</div>
</div>
</h2></div>
<div class="col-md-4">
<img src="/html-component/images/nature/road-in-jangol.jpg" class="img-fluid feature-img mt-5 shadow-sm" alt="Stats screen">
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #4f46e5;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.feature svg {
vertical-align: middle;
fill: var(--bs-primary);
}
.feature p {
color: #666;
}
.feature .feature-img {
box-shadow: rgba(126, 123, 160, 0.12) -7px 12px 60px 0px;
transform: translate3d(19px, -13px, 0px);
}
Used photos we collected from https://unsplash.com which are free to use
Feature component - 1
COPY
<section class="feature">
<div class="container py-5">
<h2 class="h1 text-center text-primary pb-4 py-2">Our Benefits</h2>
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 gy-4 gy-sm-5 gx-4 pb-3 pb-md-4 pb-lg-5 mb-md-3 mb-lg-0">
<!-- Item-->
<div class="col text-center">
<div class="ratio ratio-1x1 position-relative mx-auto mb-3 mb-sm-4" style="width: 68px;">
<i class="bi bi-tools text-primary fs-3 d-flex align-items-center justify-content-center position-absolute start-0"></i>
<svg class="position-absolute top-0 start-0 text-primary" width="68" height="68" viewbox="0 0 68 68" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M56.0059 60.5579C44.1549 78.9787 18.0053 58.9081 6.41191 46.5701C-2.92817 35.5074 -2.81987 12.1818 11.7792 3.74605C30.0281 -6.79858 48.0623 7.40439 59.8703 15.7971C71.6784 24.1897 70.8197 37.5319 56.0059 60.5579Z" fill-opacity="0.1"></path>
</svg>
</div>
<h3 class="h4 pb-2 mb-1">Online support</h3>
<p class="fs-sm mb-0">Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis tortor mi massa
pharetra.</p>
</div>
<!-- Item-->
<div class="col text-center">
<div class="ratio ratio-1x1 position-relative mx-auto mb-3 mb-sm-4" style="width: 68px;">
<i class="bi bi-chat-square-heart text-primary fs-3 d-flex align-items-center justify-content-center position-absolute start-0"></i>
<svg class="position-absolute top-0 start-0 text-primary" width="68" height="68" viewbox="0 0 68 68" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M65.0556 29.2672C75.4219 46.3175 48.5577 59.7388 33.8299 64.3181C21.0447 67.5599 1.98006 58.174 0.888673 42.8524C-0.475555 23.7004 18.3473 14.5883 29.9289 8.26059C41.5104 1.93285 52.0978 7.9543 65.0556 29.2672Z" fill-opacity="0.1"></path>
</svg>
</div>
<h3 class="h4 pb-2 mb-1">100% guarantee</h3>
<p class="fs-sm mb-0">Sapien ultrices egestas at faucibus eu diam velit diam id amet nibh quam rutrum diam
diam
natoque scelerisque.</p>
</div>
<!-- Item-->
<div class="col text-center">
<div class="ratio ratio-1x1 position-relative mx-auto mb-3 mb-sm-4" style="width: 68px;">
<i class="bi bi-life-preserver text-primary fs-3 d-flex align-items-center justify-content-center position-absolute start-0"></i>
<svg class="position-absolute top-0 start-0 text-primary" width="68" height="68" viewbox="0 0 68 68" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M6.61057 18.2783C10.8205 -1.22686 39.549 7.51899 53.3869 14.3301C64.8949 20.7749 72.2705 40.7038 62.5199 52.5725C50.3318 67.4085 30.4034 61.0689 17.6454 57.6914C4.88745 54.314 1.3482 42.6597 6.61057 18.2783Z" fill-opacity="0.1"></path>
</svg>
</div>
<h3 class="h4 pb-2 mb-1">Work on time</h3>
<p class="fs-sm mb-0">Morbi et massa fames ac scelerisque sit commodo dignissim faucibus vel quisque proin
lectus orbi et massa fames.</p>
</div>
<!-- Item-->
<div class="col text-center">
<div class="ratio ratio-1x1 position-relative mx-auto mb-3 mb-sm-4" style="width: 68px;">
<i class="bi bi-shop-window text-primary fs-3 d-flex align-items-center justify-content-center position-absolute start-0"></i>
<svg class="position-absolute top-0 start-0 text-primary" width="68" height="68" viewbox="0 0 68 68" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M9.34481 53.5078C-7.24653 42.4218 11.4487 18.9206 22.8702 8.55583C33.0946 0.223307 54.3393 0.690942 61.7922 14.1221C71.1082 30.9111 57.886 47.1131 50.0546 57.7358C42.2233 68.3586 30.084 67.3653 9.34481 53.5078Z" fill-opacity="0.1"></path>
</svg>
</div>
<h3 class="h4 pb-2 mb-1">Free consultation</h3>
<p class="fs-sm mb-0">Consectetur adipiscing elit proin volutpat mollis egestas nam luctus facilisis ultrices
pellentesque volutpat ligula est.</p>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #4f46e5;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.fs-xs {
font-size: 0.75rem !important;
}
.feature .text-primary {
color: var(--bs-primary) !important;
}
More coming soon
Regular license
- Free to use this design
- Customization by expert designer $20/hr
- For more information please get in touch with our marketing person - info@webui.io