Personal landing page template - 5
COPY
<section class="hero">
<header class="menu">
<nav class="navbar navbar-expand-md p-3 pt-4 p-md-5">
<div class="container-fluid">
<a href="/" class="d-flex align-items-center text-danger text-decoration-none">
DEENA NICHOLS
</a>
<a class="navbar-toggler ms-sm-auto mx-3 me-md-0 p-0 p-sm-2 border-0" data-bs-toggle="collapse" data-bs-target="#navbarCategoryCollapse" aria-controls="navbarCategoryCollapse" aria-expanded="false" aria-label="Toggle navigation"> <i class="bi bi-list fs-1 text-white"></i>
</a>
<div class="navbar-collapse collapse" id="navbarCategoryCollapse">
<ul class="navbar-nav navbar-nav-scroll nav-pills-primary-soft ms-auto p-2 p-xl-0">
<li class="nav-item active"> <a class="nav-link" href="#">Home</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Services</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Price</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container pb-5">
<div class="row">
<div class="offset-xl-1 col-xl-10 col-12">
<div class="row d-lg-flex align-items-center">
<div class="col-lg-6 col-md-6 col-12 order-2 mt-8 order-md-1">
<div class="mb-0 mb-lg-8" data-aos="fade-zoom-in">
<!-- content --> <span class="text-uppercase text-sub">Deena Nichols, PERSONAL
TRAINER</span>
<h1 class="text-white mb-3 display-3 hero-title mt-2 fw-semibold"> Train your body </h1>
<p class="mb-5 lead text-white"> Get help from a professional coach, a professional
coach can change
your body and mind perfectly! </p>
</div>
<!-- button -->
<a href="#" class="btn btn-primary rounded-5 btn-lg shadow" data-aos="fade-up" data-aos-duration="3000">BOOK NOW</a>
</div>
<div class="col-md-6 col-12 mb-n2 order-1">
<img src="/html-component/images/profile/kirill-balobanov.png" class="img-fluid" alt="Kirill Balobanov" data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content py-5 pt-md-11">
<div class="container-lg py-5">
<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-4 fw-medium mb-9"> Visit <span class="text-underline-warning">loyal
evangelist</span>.
</h2>
</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">
<h3> Consectetur amet </h3>
<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">
<h3> Mattis accumsan </h3>
<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">
<h3> In urna lectus </h3>
<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 -->
<section class="skill py-5 py-md-5 bg-light">
<div class="container py-5">
<div class="section-title text-center mb-5">
<h2 class="pb-2 mb-2 fs-1">Skills</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint
consectetur velit. Quisquam quos quisquam cupiditate.</p>
</div>
<div class="row justify-content-center">
<div class="col-md-5 mb-5">
<div><span class="fw-bolder">HTML <i class="text-primary mx-3">100%</i></span></div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div><span class="fw-bolder"> CSS <i class="text-primary mx-3">90%</i> </span></div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div><span class="fw-bolder"> JavaScript <i class="text-primary mx-3">75%</i></span></div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div><span class="fw-bolder"> PHP <i class="text-primary mx-3">80%</i></span></div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div> <span class="fw-bolder"> WordPress/CMS <i class="text-primary mx-3">90%</i></span>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div> <span class="fw-bolder"> Photoshop <i class="text-primary mx-3">55%</i></span>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</section> <!-- Bootstrap JavaScript library -->
<section class="blog">
<div class="container my-5">
<h2 class="pb-2 mb-2 text-center fs-1">Blogs</h2>
<div class="row">
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-011.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/google-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white">Sed do eiusmod tempor incididunt</h4>
<p class="small text-white mb-0 text-truncate">Quis nostrud exercitation ullamco laboris
nisi ut aliquip</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-022.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/ev-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white">Excepteur sint occaecat cupidatat non proident</h4>
<p class="small text-white mb-0 text-truncate">Duis aute irure dolor in reprehenderit in
voluptate</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-044.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/ms-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white">The missing link in e-Mobility</h4>
<p class="small text-white mb-0 text-truncate">What hasn't been a great fit in
e-mobility until now.</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-011.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/ev-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white">Lorem ipsum dolor sit amet</h4>
<p class="small text-white mb-0 text-truncate">Sed ut perspiciatis unde omnis iste natus
error.</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-033.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/ms-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white">Aliquip ex ea commodo consequat</h4>
<p class="small text-white mb-0 text-truncate">What hasn't been a great fit in
e-mobility until now.</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-011.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/google-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white">Sed do eiusmod tempor incididunt</h4>
<p class="small text-white mb-0 text-truncate">Quis nostrud exercitation ullamco laboris
nisi ut aliquip</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-022.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/ev-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white">Excepteur sint occaecat cupidatat non proident</h4>
<p class="small text-white mb-0 text-truncate">Duis aute irure dolor in reprehenderit in
voluptate</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-033.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/ms-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white">Aliquip ex ea commodo consequat</h4>
<p class="small text-white mb-0 text-truncate">What hasn't been a great fit in
e-mobility until now.</p>
</div>
</div>
</a>
</div>
</div><!-- row END -->
<!-- Load more START -->
<div class="row">
<div class="col-12">
<div class="text-center mt-5">
<button type="button" class="btn btn-light px-4">Load more! <i class="bi bi-arrow-clockwise ms-2"></i></button>
</div>
</div>
</div>
<!-- Load more END -->
</div>
</section>
<footer class="bg-dark text-white">
<div class="py-5">
<div class="container">
<div class="row mx-auto">
<div class="col-md-4 mx-auto text-center">
<!-- Links -->
<ul class="nav justify-content-between mt-5 mt-md-0">
<li class="nav-item"><a href="#services" class="nav-link p-2">Our Services</a></li>
<li class="nav-item"><a href="#aboutUs" class="nav-link p-2">About Us</a></li>
<li class="nav-item"><a href="#contactUs" class="nav-link p-2">Contact Us</a></li>
</ul>
<!-- Social media button -->
<ul class="list-inline mt-4 mb-0">
<li class="list-inline-item">
<a class="btn btn-light btn-sm px-2 text-facebook" href="#">
<i class="bi bi-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm px-2 text-instagram" href="#">
<i class="bi bi-instagram"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm px-2 text-twitter" href="#">
<i class="bi bi-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm px-2 text-linkedin" href="#">
<i class="bi bi-linkedin"></i>
</a>
</li>
</ul>
<!-- copyright text -->
<div class="text-white-50 mt-4"> <small>Copyrights ©2023 webui. Powered by
<a href="https://www.webui.io/" class="text-danger">DEENA NICHOLS</a>.</small>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({
duration: 1200,
})
</script>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://unpkg.com/aos@2.3.1/dist/aos.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-size: 1rem;
}
:root {
--bs-primary: #d11800;
--bs-primary-light: #f3d8d5;
--bs-primary-dark: #a01300;
}
.nav-link {
color: var(--bs-white);
}
.nav-link:hover {
color: var(--bs-primary);
}
.text-primary {
color: var(--bs-primary) !important;
}
.menu .nav-link {
text-decoration: none;
color: #ffffff;
text-decoration: none;
color: var(--bs-white);
border-radius: 40px;
margin: 0 .1rem;
padding: .5rem 1.5rem !important
}
.menu .nav-link:hover,
.menu .active .nav-link {
color: var(--bs-white) !important;
background: var(--bs-red) !important;
}
.menu .navbar-toggler {
border-width: 0;
}
.hero {
background: var(--bs-black);
}
.hero .text-sub {
color: #c3d100 !important;
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
background-color: var(--bs-primary);
border-color: var(--bs-primary-dark);
}
.hero .btn-lg:hover {
background-color: var(--bs-primary-dark);
}
.progress {
--bs-progress-height: 0.5rem;
border-radius: 0px;
}
.progress-bar {
background: #5f5f5f;
}
.navbar-collapse {
text-align: right;
}
body {
font-family: 'Inter', sans-serif;
}
.text-primary {
color: var(--bs-primary) !important;
}
a {
text-decoration: none;
color: var(--bs-primary);
}
[class*=text-underline-] {
background: repeat-x left 1em/1em 0.15em;
}
.text-underline-warning {
background-image: linear-gradient(90deg, var(--bs-primary-light), var(--bs-primary-light));
}
@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-primary);
}
.timeline-warning .timeline-item:before {
background-color: color-level(var(--bs-primary), -7);
color: #fff;
border: 2px solid var(--bs-primary-light);
}
.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: var(--bs-primary-light);
}
@media (min-width: 992px) {
.timeline-expand-lg .timeline-item:after {
display: block;
}
}
.timeline-warning .timeline-item:after {
border-color: color-level(var(--bs-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: var(--bs-primary-light);
}
.link-more:hover {
background-color: #ffffff;
color: #1c1a28;
}
.link-more:hover .bi {
margin-left: 5px;
}
svg {
fill: #fff;
opacity: .5;
}
.card-metro {
overflow: hidden;
background: #333;
height: 100%;
}
.card-metro:hover .card-image img {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}
.card-metro img {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.card-metro:hover .card-text {
margin-bottom: 10px;
}
.card-metro .card-text {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.card-metro .card-text:last-child {
margin-bottom: 0;
}
Landing page template - 5
COPY
<header class="menu bg-white opacity-75 sticky-top">
<div class="navbar-light shadow-sm">
<nav class="navbar navbar-expand-md p-3">
<div class="container-fluid">
<a class="me-0 fs-4 text-decoration-none fw-semibold brand text-primary" href="#">
webui
</a>
<button class="navbar-toggler ms-sm-auto mx-3 me-md-0 p-0 p-sm-2 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCategoryCollapse" aria-controls="navbarCategoryCollapse" aria-expanded="false" aria-label="Toggle navigation">
<i class="bi bi-list fs-4"></i>
</button>
<div class="navbar-collapse collapse" id="navbarCategoryCollapse">
<ul class="navbar-nav navbar-nav-scroll nav-pills-primary-soft text-center ms-auto p-2 p-xl-0 fw-medium">
<li class="nav-item active"> <a class="nav-link" href="#home">Home</a></li>
<li class="nav-item"> <a class="nav-link" href="#aboutus">About us</a></li>
<li class="nav-item"> <a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"> <a class="nav-link" href="#doctors">Doctors</a></li>
<li class="nav-item"> <a class="nav-link" href="#appointment">Appointment</a></li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<section id="home" class="hero">
<div class="container py-5">
<div class="row g-0">
<div class="col-lg-6">
<div class="p-5">
<div class="mb-4">
<h4 class="display-3 fw-semibold mb-4 w-75">Finest Patient Care</h4>
<p class="fs-6">We have several options to connect with our health care providers without coming
into the doctor’s office or hospital. We have several options to connect with our health care providers without coming
into the doctor’s office or hospital.</p>
</div>
<div>
<a class="btn btn-danger rounded-pill mb-3 shadow-sm btn-lg" href="#appointment">Appointment</a>
</div>
</div>
</div>
<div class="col-lg-6">
<img class="img-fluid" src="/html-component/images/hospital/national-cancer-institute.jpg" alt="Image Description">
</div>
</div>
</div>
</section>
<section class="content">
<div class="bg-primary text-white py-5 my-5">
<div class="container py-4">
<div class="row">
<div class="col-md-4">
<svg width="30" height="30" class="mb-3" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<title>crime-man-ninja</title>
<path d="M11.979,17.125c4.052,0,6.875-5.1,6.875-9.67a10.134,10.134,0,0,0-.4-2.808h0A6.3,6.3,0,0,0,11.979.125,6.322,6.322,0,0,0,5.51,4.654l0,.009a10.38,10.38,0,0,0-.4,2.8C5.105,12.035,7.929,17.125,11.979,17.125Zm4.638-5.844a.25.25,0,0,1-.312.148,13.712,13.712,0,0,0-4.3-.554,13.886,13.886,0,0,0-4.346.559.248.248,0,0,1-.312-.147,10.963,10.963,0,0,1-.722-3.4A.244.244,0,0,1,6.689,7.7a.25.25,0,0,1,.18-.077H17.09a.25.25,0,0,1,.25.262A11.031,11.031,0,0,1,16.617,11.281Z">
</path>
<path d="M21.632,18.127A.251.251,0,0,0,22,17.906V16.375a.25.25,0,0,1,.25-.25H23a.75.75,0,0,0,0-1.5h-.75a.25.25,0,0,1-.25-.25v-3a1.5,1.5,0,0,0-3,0v3a.25.25,0,0,1-.25.25H18a.75.75,0,0,0,0,1.5h.75a.25.25,0,0,1,.25.25v.2a.25.25,0,0,0,.132.22Z">
</path>
<path d="M23.033,19.792a11.994,11.994,0,0,0-2.45-1.4.25.25,0,0,0-.32.109l-1.181,1.667-2.367,3.338a.25.25,0,0,0,.219.37H23.5a.5.5,0,0,0,.5-.5V21.77A2.463,2.463,0,0,0,23.033,19.792Z">
</path>
<path d="M11.079,21.4,7.552,17.432a.5.5,0,0,0-.467-.16,14.53,14.53,0,0,0-6.118,2.52A2.461,2.461,0,0,0,0,21.77v1.605a.5.5,0,0,0,.5.5H7.826a.252.252,0,0,0,.19-.087l3.066-2.06A.251.251,0,0,0,11.079,21.4Z">
</path>
<path d="M18.31,17.837a.252.252,0,0,0-.161-.145c-.244-.069-.5-.136-.76-.2a.252.252,0,0,0-.249.08l-.633.586-5.731,5.305a.25.25,0,0,0,.189.413h3.191a.251.251,0,0,0,.22-.13l3.068-4.452.855-1.24A.252.252,0,0,0,18.31,17.837Z">
</path>
<path d="M8.489,8.826a.75.75,0,0,0,1.022,1.1.567.567,0,0,1,.557,0,.75.75,0,1,0,1.022-1.1A2.017,2.017,0,0,0,8.489,8.826Z">
</path>
<path d="M13.421,10.125a.746.746,0,0,0,.511-.2.567.567,0,0,1,.557,0,.75.75,0,1,0,1.022-1.1,2.017,2.017,0,0,0-2.6,0,.75.75,0,0,0,.511,1.3Z">
</path>
</svg>
<h2 class="h4 mb-2 mt-2 fw-normal">Heart Care</h2>
<p class="text-white text-opacity-75 lh-sm">Our cardiac specialists provide superior care,
innovative treatments and surgical advances to keep you heart healthy.</p>
<a href="#" class="btn btn-outline-light rounded-5 link-more">More <i class="bi bi-arrow-right ms-1"></i> </a>
</div>
<div class="col-md-4">
<svg width="30" height="30" class="mb-3" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<title>layout-dashboard</title>
<path d="M.793.786A1,1,0,0,0,.5,1.493V12.508a1,1,0,0,0,1,1h8a1,1,0,0,0,1-1v-11a1,1,0,0,0-1-1L1.5.493A1,1,0,0,0,.793.786Z">
</path>
<path d="M22.5.493l-8,.014a1,1,0,0,0-1,1v5a1,1,0,0,0,1,1h8a1,1,0,0,0,1-1V1.493a1,1,0,0,0-1-1Z">
</path>
<path d="M10.207,23.214a1,1,0,0,0,.293-.707v-5a1,1,0,0,0-1-1h-8a1,1,0,0,0-1,1v4.985a1,1,0,0,0,1,1l8,.014A1,1,0,0,0,10.207,23.214Z">
</path>
<path d="M22.5,10.508h-8a1,1,0,0,0-1,1v11a1,1,0,0,0,1,1l8-.014a1,1,0,0,0,1-1V11.508A1,1,0,0,0,22.5,10.508Z">
</path>
</svg>
<h2 class="h4 mb-2 mt-2 fw-normal">Women’s Health</h2>
<p class="text-white text-opacity-75 lh-sm">Health + Hospitals women’s health services provide
the support women in City need to manage their health at every stage of life.</p>
<a href="#" class="btn btn-outline-light rounded-5 link-more">More <i class="bi bi-arrow-right ms-1"></i> </a>
</div>
<div class="col-md-4">
<svg width="30" height="30" class=" mb-3" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<title>pen-write</title>
<path d="M19,13a1,1,0,0,0-1,1v7a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V3A1,1,0,0,1,3,2h7a1,1,0,0,0,0-2H3A3,3,0,0,0,0,3V21a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V14A1,1,0,0,0,19,13Z">
</path>
<path d="M8.73,12.521a.5.5,0,0,0-.353.361L7.82,15.119,6.568,16.371a.75.75,0,0,0,0,1.061.76.76,0,0,0,1.06,0L8.892,16.17l2.207-.555a.5.5,0,0,0,.36-.35.5.5,0,0,0-.127-.487L9.217,12.65A.5.5,0,0,0,8.73,12.521Z">
</path>
<path d="M23.707.293a1,1,0,0,0-1.414,0l-.9.9a2.011,2.011,0,0,0-1.533.208l-.052-.051a3,3,0,0,0-4.235.006L11.961,4.961a1,1,0,0,0,0,1.414,1.013,1.013,0,0,0,1.415,0L17,2.761a1,1,0,0,1,1.407.007l-.707.707a.5.5,0,0,0,0,.707L19.818,6.3a.5.5,0,0,0,.707,0l1.768-1.768a2,2,0,0,0,.517-1.93l.9-.9A1,1,0,0,0,23.707.293Z">
</path>
<path d="M12.4,14.22a.5.5,0,0,0,.353-.147l6.356-6.355a.5.5,0,0,0,0-.707L16.99,4.889a.514.514,0,0,0-.707,0L9.927,11.245a.5.5,0,0,0,0,.707l2.121,2.121A.5.5,0,0,0,12.4,14.22Z">
</path>
</svg>
<h2 class="h4 mb-2 mt-2 fw-normal">Surgical Services</h2>
<p class="text-white text-opacity-75 lh-sm">Our surgical teams provide a wide range of
innovative, life-saving elective and emergency surgical services.</p>
<a href="#" class="btn btn-outline-light rounded-5 link-more small">More <i class="bi bi-arrow-right ms-1"></i> </a>
</div>
</div>
</div>
</div>
</section>
<section id="aboutus" class="container-xxl py-5">
<div class="container py-5">
<div class="row g-5">
<div class="col-lg-6">
<div class="row gx-3 h-100">
<div class="col-6 align-self-start">
<img class="img-fluid" src="https://peacefulqode.com/themes/medicate/html/images/portfolio/slider/9.jpg">
</div>
<div class="col-6 align-self-end">
<img class="img-fluid" src="https://peacefulqode.com/themes/medicate/html/images/portfolio/slider/5.jpg">
</div>
</div>
</div>
<div class="col-lg-6 ">
<p class="fw-medium text-uppercase text-primary mb-2">About Us</p>
<h1 class="display-5 mb-4 fw-bold">We focus on health and wellness </h1>
<p class="mb-4">We are an integrated network of hospitals, community-based health centers, long-term
care and rehabilitation facilities, home care services, correctional health services and a
health plan, MetroPlus.
</p>
<div class="d-flex align-items-center mb-4">
<div class="ms-4">
<p><i class="bi bi-check-lg text-primary me-2"></i> Specialized Services</p>
<p><i class="bi bi-check-lg text-primary me-2"></i>Immunization (Vaccination)</p>
<p><i class="bi bi-check-lg text-primary me-2"></i> Nursing, Paramedical Services </p>
<p><i class="bi bi-check-lg text-primary me-2"></i> Health and Allied Services </p>
<p class="mb-0"><i class="bi bi-check-lg text-primary me-2"></i> Utilities & Allied
Services </p>
</div>
</div>
<div class="row pt-2">
<div class="col-sm-6">
<div class="d-flex align-items-center">
<div class="bg-opacity-10 bg-primary rounded-3 p-3">
<i class="bi bi-envelope-open text-primary fs-6"></i>
</div>
<div class="ms-3">
<p class="mb-2">Email us</p>
<h5 class="fs-6 mb-0 text-primary">info@example.com</h5>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="d-flex align-items-center">
<div class=" btn-lg-square bg-opacity-10 bg-primary rounded-3 p-3">
<i class="bi bi-telephone-forward text-primary fs-6"></i>
</div>
<div class="ms-3">
<p class="mb-2">Call us</p>
<h5 class="fs-6 mb-0 text-primary">+000 000 0000</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="services" class="py-5 case-study text-white">
<div class="container py-5">
<div class="row justify-content-center text-center pb-3 mb-sm-2 mb-lg-3">
<h6>More Services</h6>
<h2 class="text-uppercase pb-3 mb-3">Departments</h2>
</div>
<div class="row gy-5 lightbox-gallery">
<div class="col-lg-6">
<div class="row">
<div class="col-md-5">
<img src="https://peacefulqode.com/themes/medicate/html/images/portfolio/slider/6.jpg" class="img-fluid" title="" alt="">
</div>
<div class="col-md-7 px-3">
<h3> Neurosurgery</h3>
<p>Our team consists of expert neurosurgeons, neuro nurses and technicians. We also have
skilled doctors from other departments for support with Neurosurgery subspecialties.</p>
<div class="btn-bar py-1">
<a 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="https://peacefulqode.com/themes/medicate/html/images/portfolio/slider/8.jpg" class="img-fluid" title="" alt="">
</div>
<div class="col-md-7 px-3">
<h3>Cardiac surgery</h3>
<p>The infrastructure has two state of the art Cardiac Surgical Operating Theatres and a
dedicated Cardiac ICU with 8 individually monitored beds. The ICU staff nurse to patient
ratio is 1:1 during all shifts.</p>
<div class="btn-bar py-1">
<a 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="https://peacefulqode.com/themes/medicate/html/images/portfolio/slider/4.jpg" class="img-fluid" title="" alt="">
</div>
<div class="col-md-7 px-3">
<h3> Oncology</h3>
<p>The Department of Oncology integrates health care personnel & diagnostic facilities in an
environment dedicated to the care of Cancer patients of both adult & Pediatrics.</p>
<div class="btn-bar py-1">
<a 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="https://peacefulqode.com/themes/medicate/html/images/portfolio/slider/5.jpg" class="img-fluid " title="" alt="">
</div>
<div class="col-md-7 px-3">
<h3>Neurology</h3>
<p>The Department of Neuro Medicine is dedicated to exceptional patient care center is
fortunate to have state-of-the-art facilities for evaluating patients with neurological
diseases,</p>
<div class="btn-bar py-1">
<a href="#"><i class="bi-arrow-up-right fs-5"></i></a>
</div>
</div>
</div>
</div>
</div>
<section class="content">
<div class="mt-5">
<div class="rounded-3 pt-5">
<div class="row g-0">
<div class="col-md-3">
<div class="d-flex flex-column h-100 text-center p-4" style="background-color: rgba(194,194,194, 0.5);">
<div class="display-6 mt-1 mb-0 fw-semibold">15</div>
<div class="fs-lg mb-1">Departments</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex flex-column h-100 text-center p-4" style="background-color: rgba(194,194,194, 0.75);">
<div class="h3 display-6 mt-1 mb-0 fw-semibold">75</div>
<div class="fs-lg mb-1">Expert Doctors</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex flex-column h-100 text-center p-4" style="background-color: rgba(194,194,194, 0.5);">
<div class="h3 display-6 mt-1 mb-0 fw-semibold">200+</div>
<div class="fs-lg mb-1">Trained Nurs</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex flex-column h-100 text-center p-4" style="background-color: rgba(194,194,194, 0.75);">
<div class="h3 display-6 mt-1 mb-0 fw-semibold">10,000</div>
<div class="fs-lg mb-1">Happy Patient</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
<section id="doctors" class="team-section py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<div class="pb-5">
<h6>Doctors Team</h6>
<h2 class="h1 mb-lg-4 text-primary">Meet Our Specialist Doctors</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-6">
<div class="card shadow-sm pt-5 my-5 position-relative border">
<div class="card-body p-4">
<div class="member-profile position-absolute w-100 text-center">
<img class="rounded-circle mx-auto d-inline-block shadow-sm" src="https://peacefulqode.com/themes/medicate/html/images/team/1.jpg" width="130" height="130" alt="">
</div>
<div class="card-text pt-3 text-center">
<h5 class="mb-2">Alex Jhon Martin</h5>
<div class="mb-4">OUTPATIENT SURGERY</div>
</div>
</div>
<!--//card-body-->
<div class="card-footer bg-opacity-25 border-0 text-center py-3">
<!--social-list-->
<ul class="social-list list-inline mb-0 mx-auto">
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-linkedin fs-5"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-twitter fs-5"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-skype fs-5"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card shadow-sm pt-5 my-5 position-relative border">
<div class="card-body p-4">
<div class="member-profile position-absolute w-100 text-center">
<img class="rounded-circle mx-auto d-inline-block shadow-sm" src="https://www.uhlbd.com/backend/web/product_uploads/1639479563_2_1527920169_2_dr%20reyan.jpg" width="130" height="130" alt="">
</div>
<div class="card-text pt-3 text-center">
<h5 class="mb-2 text-center ">DR. REYAN ANIS</h5>
<div class="mb-4 text-center">cardiologists</div>
</div>
</div>
<!--//card-body-->
<div class="card-footer bg-opacity-25 border-0 text-center py-3">
<!--social-list-->
<ul class="social-list list-inline mb-0 mx-auto">
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-linkedin fs-5"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-twitter fs-5"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-skype fs-5"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card shadow-sm pt-5 my-5 position-relative border">
<div class="card-body p-4">
<div class="member-profile position-absolute w-100 text-center">
<img class="rounded-circle mx-auto d-inline-block shadow-sm" src="https://www.uhlbd.com/backend/web/product_uploads/1576145669_2_Reazur%20Rahman_Cardiologist.jpg" width="120" height="120" alt="">
</div>
<div class="card-text pt-1 text-center">
<h5 class="mb-0">DR. REAZUR RAHMAN</h5>
<div class="mb-3">cardiologists</div>
</div>
</div>
<div class="card-footer bg-opacity-25 border-0 text-center py-3">
<!--social-list-->
<ul class="social-list list-inline mb-0 mx-auto">
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-linkedin fs-5"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-twitter fs-5"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-skype fs-5"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card shadow-sm pt-5 my-5 position-relative border">
<div class="card-body p-4">
<div class="member-profile position-absolute w-100 text-center">
<img class="rounded-circle mx-auto d-inline-block shadow-sm" src="https://www.uhlbd.com/backend/web/product_uploads/1654431051_2_Amina%20Sultana.jpg" width="120" height="120" alt="">
</div>
<div class="card-text pt-1 text-center">
<h5 class="mb-0 ">DR. AMINA SULTANA</h5>
<div class="mb-3">Consultant- Emergency Medicine</div>
</div>
</div>
<div class="card-footer bg-opacity-25 border-0 text-center py-3">
<!--social-list-->
<ul class="social-list list-inline mb-0 mx-auto">
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-linkedin fs-5"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-twitter fs-5"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-skype fs-5"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card shadow-sm pt-5 my-5 position-relative border">
<div class="card-body p-4">
<div class="member-profile position-absolute w-100 text-center">
<img class="rounded-circle mx-auto d-inline-block shadow-sm" src="https://www.uhlbd.com/backend/web/product_uploads/1654400437_2_Minhaj%20Bhuiyan%20copy.jpg" width="120" height="120" alt="">
</div>
<div class="card-text pt-1 text-center">
<h5 class="mb-0">DR. MINHAJ BHUIYAN</h5>
<div class="mb-3">Consultant, Surgical Oncology</div>
</div>
</div>
<div class="card-footer bg-opacity-25 border-0 text-center py-3">
<!--social-list-->
<ul class="social-list list-inline mb-0 mx-auto">
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-linkedin fs-5"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-twitter fs-5"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-skype fs-5"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--//row-->
</div>
</section>
<section id="appointment" class="contact container-fluid p-0">
<div class="position-relative py-5">
<!-- shapes-->
<svg class="position-absolute end-0 mt-n2" width="242" height="331" viewbox="0 0 242 331" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M172.014 250.127C137.236 227.74 112.349 192.144 144.586
153.591C157.686 137.932 176.759 127.973 196.524 122.046C234.647
110.639 277.027 113.361 313.349 129.576C338.19 140.666 361.129
159.183 369.934 184.502C383.476 223.496 359.75 260.161 321.569
273.118C288.832 284.223 247.685 279.513 214.885 269.837C201.003
265.743 185.745 258.966 172.014 250.127Z" fill="#121519" fill-opacity=".07"></path>
<path d="M20.3265 69.264C19.7064 43.0736 29.8071 17.1878 62.3851
19.8622C75.6229 20.9505 87.9525 27.2066 98.3563 35.3132C118.426
50.9253 132.424 73.896 136.952 98.6413C140.044 115.562 138.424
134.218 127.978 148C111.901 169.236 83.4531 170.283 62.5246
155.209C44.5807 142.281 32.0983 119.217 25.3391 98.6799C22.4836
89.9885 20.5616 79.6021 20.3265 69.264Z" fill="#121519" fill-opacity=".07"></path>
</svg>
<svg class="position-absolute start-0 bottom-0 ms-3" width="169" height="217" viewbox="0 0 169 217" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.2574 90.0177C29.666 97.6253 26.6254 106.591 24.9502
114.96C19.9522 140.043 26.4112 168.792 49.6162 181.885C66.0705
191.17 91.0017 189.904 108.062 183.692C125.725 177.266 135.045
168.04 142.29 150.389C151.409 128.174 150.912 99.6904 125.93
91.6429C115.423 88.254 104.723 86.5065 94.2249 82.5889C84.6622
79.0248 74.8545 72.1766 64.4411 71.6149C50.8011 70.8777 40.9122
79.0146 34.2574 90.0177Z" fill="#121519" fill-opacity="0.07"></path>
<path d="M147.005 75.6331C152.135 70.7783 156.106 64.2374 159.153
57.9073C166.014 43.6372 174.127 22.1368 160.207 9.68505C152.924
3.17188 139.243 3.86644 130.324 5.29774C118.428 7.20428 107.295
8.85077 96.5031 14.783C85.8056 20.6599 79.0155 33.6997 77.0014
45.6686C75.4978 54.5776 79.63 63.6672 84.7391 70.7453C91.8208
80.5571 103.503 84.2003 114.817 84.3975C121.101 84.5081 127.716
84.0527 133.89 82.8121C138.932 81.7962 143.273 79.1597 147.005
75.6331Z" fill="#121519" fill-opacity="0.07"></path>
</svg>
<div class="card-body position-relative zindex-2 p-3">
<form class="mx-auto" style="max-width: 800px;">
<h5 class="text-center">Visit with your doctor</h5>
<h2 class="display-5 fw-medium text-center pb-5">Make an Appointment Now</h2>
<div class="row g-4">
<div class="col-sm-6">
<label class="form-label fs-base" for="name">Name</label>
<input class="form-control form-control-lg fs-6 rounded-1" type="text" placeholder="Your name" required="" id="name">
</div>
<div class="col-sm-6">
<label class="form-label fs-base" for="company">Doctor Name</label>
<input class="form-control form-control-lg fs-6 rounded-1" type="text" placeholder="Doctor name" id="company">
</div>
<div class="col-sm-6">
<label class="form-label fs-base" for="email">Email</label>
<input class="form-control form-control-lg fs-6 rounded-1" type="email" placeholder="Email address" required="" id="email">
</div>
<div class="col-sm-6">
<label class="form-label fs-base" for="phone">Phone</label>
<input class="form-control form-control-lg fs-6 rounded-1" type="number" placeholder="Phone number" id="phone">
</div>
<div class="col-sm-6">
<label class="form-label fs-base" for="phone">Select Date</label>
<p><span class="wpcf7-form-control-wrap" data-name="date-638"><span class="btDateTypeInput"><input class="form-control form-control-lg fs-6 rounded-1" aria-required="true" aria-invalid="false" value="" type="date" name="date-638"></span></span>
</p>
</div>
<div class="col-sm-12">
<label class="form-label fs-base" for="message">How can we help?</label>
<textarea class="form-control form-control-lg fs-6 rounded-1" rows="6" placeholder="Enter your message here..." required="" id="message"></textarea>
</div>
<div class="col-sm-12 text-center pt-4">
<button class="btn btn-lg btn-dark shadow" type="submit">Book
APPOINTMENT</button>
</div>
</div>
</form>
</div>
</div>
</section>
<footer id="contact" class="footer-com65703">
<div class="container-fluid p-0">
<div class="bg-light p-4 pb-0">
<div class="row g-4 justify-content-between p-5">
<div class="col-md-5 col-lg-4">
<a class="me-0 fs-4 text-decoration-none fw-semibold brand text-primary" href="#">
webui
</a>
<p class="text-muted">15205 North Kierland Blvd. Suite 100. Scottsdale, Arizona, USA</p>
</div>
<div class="col-md-7 col-lg-4">
<div class="row g-4 g-lg-5">
<!-- Link block -->
<div class="col-6">
<h5 class="mb-2 mb-md-3">Website</h5>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
</ul>
</div>
<!-- Link block -->
<div class="col-6">
<h5 class="mb-2 mb-md-3">Application</h5>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link pt-0" href="#">Sign up</a></li>
<li class="nav-item"><a class="nav-link" href="#">Sign in</a></li>
<li class="nav-item"><a class="nav-link" href="#">Privacy Policy</a></li>
<li class="nav-item"><a class="nav-link" href="#">Terms</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Divider -->
<hr class="mt-4 mb-0">
<!-- Bottom footer -->
<div class="container-fluid py-3 px-0">
<div class="d-md-flex justify-content-between align-items-center text-center text-md-left text-black-50">
<!-- copyright text -->
<div class="text-primary-hover copyright-message"> Copyrights ©2023 webui. Powered by <a href="https://www.webui.io/">webui</a>. </div>
<!-- copyright links-->
<div class="mt-3 mt-md-0">
<ul class="nav text-primary-hover social-link justify-content-center justify-content-md-end">
<li class="nav-item">
<a class="nav-link text-reset" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-reset" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-reset" href="#"><i class="bi bi-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-reset" href="#"><i class="bi bi-linkedin"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
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: #6ba900;
--bs-primary-rgb: 107, 169, 0;
--bs-secondary: #1c1a28;
--bs-secondary-rgb: 28, 26, 40;
}
body {
font-family: 'Inter', sans-serif;
font-size: .90rem;
line-height: normal;
}
/***hero section**/
.nav-link {
text-decoration: none;
font-weight: 500;
color: var(--bs-secondary);
border-radius: 40px;
margin: 0 .1rem;
padding: .5rem 1.5rem !important
}
.nav-link:hover,
.menu .active .nav-link {
color: var(--bs-white) !important;
background: var(--bs-primary) !important;
font-weight: 500 !important;
}
.btn-primary {
--bs-btn-bg: var(--bs-primary);
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.fs-7 {
font-size: .85rem;
}
.bg-primary {
--bs-primary: var(--bs-primary) !important;
}
.content svg {
fill: #fff;
opacity: 0.4 !important;
}
.content a {
color: #fff;
}
.link-more:hover .bi {
margin-left: 10px !important;
}
.case-study {
background: url(/html-component/images/bg/background-features.jpg) 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);
}
/***hero section end**/
/**Team**/
.team-section a:hover {
color: var(--bs-black) !important;
}
.member-profile {
top: -65px;
left: 0;
}
.social-list .list-inline-item {
margin: 0 10px;
}
.contact .fs-xs {
font-size: 0.75rem !important;
}
.contact .btn-group-lg>.btn,
.contact .btn-lg {
padding: 1.25rem 3.65rem;
font-size: .95rem;
line-height: 1.5;
border-radius: 3px;
}
.contact .text-primary {
color: var(--bs-text-primary) !important;
}
.form-label {
font-size: 1.1rem;
--bs-text-opacity: .8;
}
.footer-com65703 .flex-column .nav-link {
padding: 2px 0;
color: #666;
}
.footer-com65703 .flex-column .nav-link:hover {
color: var(--bs-primary);
}
.footer-com65703 .copyright-message {
font-size: 0.85rem;
}
.footer-com65703 .text-primary {
color: var(--bs-primary) !important;
}
.footer-com65703 .btn-primary {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
}
.footer-com65703 .social-link a,
.footer-com65703 .copyright-message a {
color: var(--bs-primary) !important;
}
Landing page template - 5
COPY
<header class="menu sticky-top">
<nav class="navbar navbar-expand-md bg-black p-3 p-md-4">
<div class="container-fluid">
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<img src="/html-component/images/logo/webui-wh.svg" width="75">
</a>
<button class="navbar-toggler ms-sm-auto mx-3 me-md-0 p-0 p-sm-2 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCategoryCollapse" aria-controls="navbarCategoryCollapse" aria-expanded="false" aria-label="Toggle navigation"> <i class="bi bi-list fs-4 text-white"></i>
</button>
<div class="navbar-collapse collapse" id="navbarCategoryCollapse">
<ul class="navbar-nav navbar-nav-scroll nav-pills-primary-soft ms-auto p-2 p-xl-0">
<li class="nav-item active"> <a class="nav-link" href="#home">Home</a></li>
<li class="nav-item"> <a class="nav-link" href="#aboutus">About</a></li>
<li class="nav-item"> <a class="nav-link" href="#courses">Courses</a></li>
<li class="nav-item"> <a class="nav-link" href="#whyus">Why Us</a></li>
<li class="nav-item"> <a class="nav-link" href="#teachers">Teachers</a></li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<section class="hero h-100vh">
<div class="overlay">
<div id="home" class="container">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row justify-content-start align-items-center h-100vhn">
<div class="col-md-10">
<div class="">
<h1 class="text-white display-1 hero-title mt-2">
Exceptional Education
</h1>
<h4 class="fs-1 text-sub fw-normal mb-3">Exceptional Value</h4>
<p class="mb-3 text-white">
The first thing to remember about success is that it is a process nothing more, nothing less. There is really no magic to it and it’s not reserved only for a select few people.
</p>
<!-- button -->
<a href="#" class="btn btn-lg btn-success shadow">Programmes</a>
<a href="#" class="btn btn-primary btn-lg me-2 shadow">Contact</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-start align-items-center h-100vhn">
<div class="col-md-10">
<div class="">
<h1 class="text-white display-1 hero-title mt-2">
The Education You Want
</h1>
<h4 class="fs-1 text-sub fw-normal mb-3">The Attention You Deserve</h4>
<p class="mb-3 text-white">
There are basically six key areas to higher achievement. Some people will tell you there are four while others may tell you there are eight.
</p>
<!-- button -->
<a href="#" class="btn btn-primary btn-lg me-2 shadow">Contact</a>
<a href="#" class="btn btn-lg btn-success shadow">Services</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-start align-items-center h-100vhn">
<div class="col-md-10">
<div class="">
<h1 class="text-white display-1 hero-title mt-2">
Vulputate Commodo
</h1>
<h4 class="fs-1 text-sub fw-normal mb-3">Morbi viverra dui mi arcu sed</h4>
<p class="mb-3 text-white">
Tincidunt risus morbi viverra dui mi arcu sed. Tellus semper adipiscing.
</p>
<!-- button -->
<a href="#" class="btn btn-primary btn-lg me-2 shadow">Contact</a>
<a href="#" class="btn btn-lg btn-success shadow">Services</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div id="aboutus" class="container-xxl py-5">
<div class="container py-5">
<div class="row g-5">
<div class="col-lg-6 mb-4 mb-lg-0 pr-xl-6">
<div class="mb-4">
<h2>Personal Education, Extraordinary Success</h2>
<p class="lead mb-0">Commitment is something that comes from understanding that everything has its price and then having the willingness to pay that price.</p>
</div>
<p class="mb-4 mb-lg-5">The other virtues practice in succession by Franklin were silence, order, resolution, frugality, industry, sincerity, Justice, moderation, cleanliness, tranquility, chastity and humility. For the summary order he followed a little scheme of employing his time each day.</p>
<a href="#" class="btn btn-primary btn-lg">Read More</a>
</div>
<div class="col-lg-6 pr-lg-5">
<div class="row">
<div class="col-sm-7">
<img class="img-fluid w-100 border-radius" src="https://img.freepik.com/free-photo/college-students-different-ethnicities-cramming_23-2149891293.jpg" alt="">
</div>
<div class="col-sm-5 mt-sm-5 mt-4">
<img class="img-fluid mb-sm-2 w-100 border-radius" src="https://www.maxpixel.net/static/photo/1x/Students-College-University-Graduation-Education-5268404.jpg" alt="">
<div class=" border-radius overflow-hidden mt-4">
<img class="img-fluid border-radius" src="https://img.freepik.com/premium-photo/two-female-students-stand-corridor-college-with-books_255667-3091.jpg" alt="image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section id="courses" class="py-5 case-study bg-light">
<div class="container py-5">
<div class="row justify-content-center text-center pb-3 mb-sm-2 mb-lg-3">
<h2 class=" pb-3 mb-3">Our Popular Courses</h2>
</div>
<div class="row gy-5 lightbox-gallery">
<div class="col-lg-6">
<div class="row">
<div class="col-md-5">
<img src="https://img.freepik.com/premium-photo/two-female-students-stand-corridor-college-with-books_255667-3091.jpg" class="img-fluid" title="" alt="">
</div>
<div class="col-md-7 px-3">
<h4 class="text-primary"> Aeronautical & Manufacturing Engineering</h4>
<p>Our team consists of expert neurosurgeons, neuro nurses and technicians. We also have skilled doctors</p>
<p>$ 80/ 8 Lessons</p>
<div class="">
<a class="btn bg-primary text-white" href="#">Book Now</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-md-5">
<img src="https://img.freepik.com/premium-photo/young-blonde-brunette-women-stand-together-smile_152404-6430.jpg?w=360" class="img-fluid" title="" alt="">
</div>
<div class="col-md-7 px-3">
<h4 class="text-primary">Business & Management Studies</h4>
<p>The infrastructure has two state of the art Cardiac Surgical Operating Theatres and a dedicated Cardiac </p>
<p>$ 60/ 4 Lessons</p>
<div class="">
<a class="btn bg-primary text-white" href="#">Book Now</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-md-5">
<img src="https://img.freepik.com/free-photo/cheerful-women-studying-bench-near-friends_23-2147860592.jpg" class="img-fluid" title="" alt="">
</div>
<div class="col-md-7 px-3">
<h4 class="text-primary"> History of Art, Architecture & Design</h4>
<p>The Department of Oncology integrates health care personnel & diagnostic facilities in an environment.</p>
<p>$ 100 / 10 Lessons</p>
<div class="">
<a class="btn bg-primary text-white" href="#">Book Now</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-md-5">
<img src="https://img.freepik.com/free-photo/group-students-happy-be-back-university_23-2148586616.jpg" class="img-fluid " title="" alt="">
</div>
<div class="col-md-7 px-3">
<h4 class="text-primary">Electrical & Electronic Engineering</h4>
<p>The Department of Neuro Medicine is dedicated to exceptional patient care center is fortunate to have state-of,</p>
<p>$ 280/ 17 Lessons</p>
<div class="">
<a class="btn bg-primary text-white" href="#">Book Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="whyus" class="bg-dark">
<div class="container-fluid text-white">
<div class="row align-items-center">
<div class="col-lg-6 col-12 ps-0" style="visibility: visible;">
<div class="ps-0">
<img alt="#" src="https://images.pexels.com/photos/207684/pexels-photo-207684.jpeg?cs=srgb&dl=pexels-pixabay-207684.jpg&fm=jpg" class="img-fluid">
</div>
</div>
<div class="col-lg-6 col-12 px-4" style="visibility: visible;">
<div class="content">
<h5>Get Experience</h5>
<h2 class="text-primary fs-1">Why Choose Us</h2>
<p class="mb-4">Let success motivate you. Find a picture of what epitomizes success to you and then pull it out when you are in need of motivation.
</p>
<div class="row">
<div class="col-md-1"><i class="bi bi-book fs-5 bg-primary rounded-1 p-2"></i></div>
<div class="col-md-11">
<p><span class="fw-bold">Multidisciplinary study programs :</span> Adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
<div class="col-md-1"><i class="bi bi-mortarboard fs-5 bg-primary rounded-1 p-2"></i></div>
<div class="col-md-11">
<p><span class="fw-bold">International study programs :</span> Adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
<div class="col-md-1"><i class="bi bi-people fs-5 bg-primary rounded-1 p-2"></i></div>
<div class="col-md-11">
<p><span class="fw-bold">Highly qualified teaching staff :</span> Adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="teachers" class="py-5 team">
<div class="container">
<div class="row mb-4">
<div class="col-12 col-lg-8 mx-auto">
<div class="title text-center mb-4">
<div class="pre-title text-primary fs-5">They are all professionals</div>
<h2 class="fs-1">Creative team and founders</h2>
<p>Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis tortor mi massa pharetra. Massa maecenas vulputate elitr.</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<!-- Team item -->
<div class="col-sm-6 col-md-3">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/html-component/images/avatar/m1.jpg" class="img-fluid w-100 h-100 bg-light" alt="Allen Smith">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Allen Smith</h5>
<div class="team-position text-primary">Founder</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-sm-6 col-md-3">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/html-component/images/avatar/m2.jpg" class="img-fluid w-100 h-100 bg-light" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Peter Smith</h5>
<div class="team-position text-primary">Software Developer</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-sm-6 col-md-3">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/html-component/images/avatar/m3.jpg" class="img-fluid w-100 h-100 bg-light" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Emma Watson</h5>
<div class="team-position text-primary">Human Resource</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-sm-6 col-md-3">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/html-component/images/avatar/m4.jpg" class="img-fluid w-100 h-100 bg-light" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Jessica Mores</h5>
<div class="team-position text-primary">Web Developer</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-sm-6 col-md-3 mt-2">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/html-component/images/avatar/m5.jpg" class="img-fluid w-100 h-100 bg-light" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Jessica Mores</h5>
<div class="team-position text-primary">Web Developer</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-sm-6 col-md-3 mt-2">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/html-component/images/avatar/m6.jpg" class="img-fluid w-100 h-100 bg-light" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Jessica Mores</h5>
<div class="team-position text-primary">Web Developer</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<footer id="contact" class="footer-com65703">
<div class="container-fluid p-0">
<div class="bg-light p-4 pb-0">
<div class="row g-4 justify-content-between px-5">
<div class="col-md-5 col-lg-4">
<a class="me-0 fs-4 text-decoration-none fw-semibold brand text-primary" href="#">
webui
</a>
<p class="text-muted">15205 North Kierland Blvd. Suite 100. Scottsdale, Arizona, USA</p>
</div>
<div class="col-md-7 col-lg-4">
<div class="row g-4 g-lg-5">
<!-- Link block -->
<div class="col-6">
<h5 class="mb-2 mb-md-3">Website</h5>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
</ul>
</div>
<!-- Link block -->
<div class="col-6">
<h5 class="mb-2 mb-md-3">Application</h5>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link pt-0" href="#">Sign up</a></li>
<li class="nav-item"><a class="nav-link" href="#">Sign in</a></li>
<li class="nav-item"><a class="nav-link" href="#">Privacy Policy</a></li>
<li class="nav-item"><a class="nav-link" href="#">Terms</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Divider -->
<hr class="mt-4 mb-0">
<!-- Bottom footer -->
<div class="container-fluid py-3 px-0">
<div class="d-md-flex justify-content-between align-items-center text-center text-md-left text-black-50">
<!-- copyright text -->
<div class="text-primary-hover copyright-message"> Copyrights ©2023 webui. Powered by <a href="https://www.webui.io/">webui</a>. </div>
<!-- copyright links-->
<div class="mt-3 mt-md-0">
<ul class="nav text-primary-hover social-link justify-content-center justify-content-md-end">
<li class="nav-item">
<a class="nav-link text-reset" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-reset" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-reset" href="#"><i class="bi bi-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-reset" href="#"><i class="bi bi-linkedin"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
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: #e91b00;
--bs-primary-dark: #b81500;
--bs-secondary: #1c1a28;
--bs-secondary-rgb: 28, 26, 40;
}
body {
font-family: 'Inter', sans-serif;
font-size: 1rem;
}
.menu .nav-link {
text-decoration: none;
font-weight: 500;
color: var(--bs-white);
border-radius: 40px;
margin: 0 .1rem;
padding: .5rem 1.5rem !important
}
.menu .nav-link:hover,
.menu .active .nav-link {
color: var(--bs-white) !important;
background: var(--bs-primary) !important;
font-weight: 500 !important;
}
.hero {
background: url(https://images.unsplash.com/photo-1607237138185-eedd9c632b0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80) top center;
background-size: cover;
}
.hero .hero-title {
font-weight: 400;
}
.hero .text-sub {
color: var(--bs-yellow) !important;
}
.btn {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
background-color: var(--bs-primary);
border-color: var(--bs-primary-dark);
}
.hero .btn-lg:hover {
background-color: var(--bs-primary-dark);
}
.h-100vhn {
height: calc(100vh - 88px);
}
.overlay {
height: 100vh;
background: rgba(var(--bs-black-rgb), 0.5);
}
.carousel {
height: 86vh;
}
.team a,
.text-primary {
color: var(--bs-primary) !important;
}
.team a:hover {
color: var(--bs-blue-dark) !important;
}
.team .team-item {
width: 95%;
}
.team .social-icons-link i {
font-size: 24px;
}
.team .team-avatar img {
filter: grayscale(100%);
}
.team .team-avatar img:hover {
filter: none;
opacity: .9;
}
.team .team-position {
font-weight: 500;
}
.footer-com65703 .flex-column .nav-link {
padding: 2px 0;
color: #666;
}
.footer-com65703 .flex-column .nav-link:hover {
color: var(--bs-primary);
}
.footer-com65703 .copyright-message {
font-size: 0.85rem;
}
.footer-com65703 .text-primary {
color: var(--bs-primary) !important;
}
.footer-com65703 .btn-primary {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
}
.footer-com65703 .social-link a,
.footer-com65703 .copyright-message a {
color: var(--bs-primary) !important;
}
Landing page template - 4
COPY
<header class="menu">
<div class="navbar-light">
<nav class="navbar navbar-expand-md p-3 p-md-4">
<div class="container-fluid">
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<img src="/html-component/images/logo/webui.svg" width="75">
</a>
<a class="navbar-toggler ms-sm-auto mx-3 me-md-0 p-2 border-0" data-bs-toggle="collapse" data-bs-target="#navbarCategoryCollapse" aria-controls="navbarCategoryCollapse" aria-expanded="false" aria-label="Toggle navigation">
<i class="bi bi-list fs-4"></i>
</a>
<div class="navbar-collapse collapse" id="navbarCategoryCollapse">
<ul class="navbar-nav navbar-nav-scroll nav-pills-primary-soft text-center ms-auto p-2 p-xl-0">
<li class="nav-item active"> <a class="nav-link" href="#">Home</a></li>
<li class="nav-item"> <a class="nav-link" href="#aboutUs">About</a></li>
<li class="nav-item"> <a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"> <a class="nav-link" href="#team">Team</a></li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<section class="hero py-5">
<div class="py-5 h-100vh bg-g-light">
<div class="container py-5">
<div class="row">
<div class="col-12 col-md-6 col-lg-6 text-center text-md-start" data-aos="fade-in">
<h2 class="fs-6 fw-normal rounded-1 text-center text-md-start bg-secondary bg-opacity-75 text-white py-1 px-2 d-inline lh-1">
Competitive HR Advantage
</h2>
<h1 class="display-4 mt-2 fw-bold">
<span class="text-primary">Specialized Human </span>
Resource Solutions
</h1>
<p class="lead text-muted pt-2">
We take a bold approach to formulate and implement HR strategies for competitive advantage.
</p>
<div class="text-center text-md-start">
<a href="#" class="btn btn-primary btn-lg shadow me-md-1 left mb-2">
View all pages <i class="bi bi-arrow-right-short d-none d-md-inline ms-3 mt-2"></i>
</a>
<a href="#" class="btn btn-secondary btn-lg shadow left mb-2">
Documentation <i class="bi bi-arrow-right-short d-none d-md-inline ms-3 mt-2"></i>
</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6 text-center mb-n2 order-1">
<div class="position-relative">
<figure class="fill-blue position-absolute top-0 end-0 me-5 d-none d-xl-block" style="position: absolute !important;z-index: 99;top: -35px !important;">
<svg width="42px" height="42px">
<path d="M21.000,-0.001 L28.424,13.575 L41.999,20.999 L28.424,28.424 L21.000,41.998 L13.575,28.424 L-0.000,20.999 L13.575,13.575 L21.000,-0.001 Z">
</path>
</svg>
</figure>
<figure class="fill-blue" style="opacity: 0.1;">
<svg width="300px" height="308px" viewbox="0 0 554 544" style="enable-background:new 0 0 554 544;" xml:space="preserve">
<path class="fill-primary" d="M423.3,77.2c49.5,32.5,100.4,67.2,118.4,114.5s3.5,107.1-15.4,165.7c-18.7,58.6-41.8,116.1-84,148.6 c-42.5,32.8-104.2,40.2-163.8,37.3c-59.5-3.2-116.8-17.1-164.7-47.9c-48.3-30.6-87.2-78.2-102-131.6C-3,310.5,6.6,251,25.3,194.7 C43.6,138,70.7,84.3,114.1,49.5C157.2,14.8,216.7-1,270.8,6.4C324.8,14.2,373.4,44.7,423.3,77.2z">
</path>
</svg>
</figure>
<img src="/html-component/images/art/home-hero-art.svg" class="img-fluid position-absolute hero-art" data-aos="fade-up" data-aos-delay="50">
<figure class="fill-blue position-absolute start-0 translate-middle-x mt-n5 ms-5">
<svg width="55px" height="55px">
<path d="M10.717,4.757 L14.440,-0.001 L14.215,6.023 L20.142,4.757 L16.076,9.228 L21.435,12.046 L15.430,12.873 L17.713,18.457 L12.579,15.252 L10.717,20.988 L8.856,15.252 L3.722,18.457 L6.005,12.873 L-0.000,12.046 L5.359,9.228 L1.292,4.757 L7.220,6.023 L6.995,-0.001 L10.717,4.757 Z">
</path>
</svg>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="aboutUs" class="py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-6" data-aos="fade-in">
<!-- Badge -->
<span class="badge rounded-1 bg-primary-soft mb-3 px-4 py-2">
<span class="fs-8 fw-medium text-uppercase text-spcing-1">About Us</span>
</span>
<!-- Heading -->
<h2 class="fs-1 text-primary">An expedition of implementation</h2>
<h4 class="mb-3">We maximize your earnings.</h4>
<!-- Text -->
<p class="fs-lg text-gray mb-5">
Finding market gaps & opportunities to solve their problems in a profitable & good way is our central end over. We are committed to fostering values & ensuring better life with good benefits. We strongly believe in making situation win & win for all.
</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/service/work2.jpg" alt="..." class="img-fluid rounded-1" data-aos="fade-up" data-aos-delay="50">
</div>
</div>
</div>
</section>
<section id="services" class="feature py-5 bg-g-light">
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-10 mb-5 mb-md-0 text-center">
<h2 class="fs-6 fw-normal rounded-1 bg-primary bg-opacity-100 py-1 px-2 text-white d-inline">Our Best Services</h2>
<h1 class="fs-1 pb-5 mt-2 text-primary">Growing customer expectations</h1>
<div class="row justify-content-between">
<div class="col-md-5 mb-5">
<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="h4">People Outsourcing</h3>
<p class="fs-7">Operating in Bangladesh for a long time with excellence now it has also become one of the most reputed human resources.</p>
</div>
<div class="col-md-5 mb-5">
<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="h4">Facility Management</h3>
<p>Outsourcing facilities management can be defined as one of the most analytical, interpretative & evaluative services we manage.</p>
</div>
<div class="col-md-5">
<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="h4">HR Consultation</h3>
<p>HR Consulting also refers as human resource advisory for organizations. Enroute covers from advisory to implementation of human.</p>
</div>
<div class="col-md-5">
<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="h4">Market Development</h3>
<p>We help strategize and implement growth in specific markets with our development consultancy. </p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="team" class="team py-5">
<div class="container py-5">
<div class="row justify-content-between align-items-center">
<div class="col-md-5">
<div class="py-0 py-md-5">
<h2 class="display-5 fw-medium">
<span class="text-primary">Creative</span> team and <span class="text-primary">Leadership</span>
</h2>
<p class="mt-3">We always strive to ensure better values through the quality of our services, products & solutions as per the committed price.
</p>
<p class="mt-3">We try to delight our customers through our service excellence.
</p>
</div>
</div>
<div class="col-md-6">
<div class="row">
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div class="card card-metro rounded-0 border-0">
<div class="card-image">
<img src="/html-component/images/avatar/m1.jpg" class="img-fluid rounded-1" alt="card image">
</div>
<div class="d-flex flex-column p-0">
<h6 class="my-1 mt-3 text-uppercase">Christina Kray</h6>
<div class="text-muted">Founder / CEO</div>
<div class="d-flex flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div href="#" class="card card-metro rounded-0 border-0">
<div class="card-image">
<img src="/html-component/images/avatar/m2.jpg" class="img-fluid rounded-1" alt="card image">
</div>
<div class="d-flex flex-column p-0">
<h6 class="my-1 mt-3 text-uppercase">JEFF FISHER</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div href="#" class="card card-metro rounded-0 border-0">
<div class="card-image">
<img src="/html-component/images/avatar/m3.jpg" class="img-fluid rounded-1" alt="card image">
</div>
<div class="d-flex flex-column p-0">
<h6 class="my-1 mt-3 text-uppercase">Christina Kray</h6>
<div class="text-muted">Founder / CEO</div>
<div class="d-flex flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div href="#" class="card card-metro rounded-0 border-0">
<div class="card-image">
<img src="/html-component/images/avatar/m4.jpg" class="img-fluid rounded-1" alt="card image">
</div>
<div class="d-flex flex-column p-0">
<h6 class="my-1 mt-3 text-uppercase">SOPHIA HARRINGTON</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div href="#" class="card card-metro rounded-0 border-0">
<div class="card-image">
<img src="/html-component/images/avatar/m4.jpg" class="img-fluid rounded-1" alt="card image">
</div>
<div class="d-flex flex-column p-0">
<h6 class="my-1 mt-3 text-uppercase">SOPHIA HARRINGTON</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div href="#" class="card card-metro rounded-0 border-0">
<div class="card-image">
<img src="/html-component/images/avatar/m5.jpg" class="img-fluid rounded-1" alt="card image">
</div>
<div class="d-flex flex-column p-0">
<h6 class="my-1 mt-3 text-uppercase">SOPHIA HARRINGTON</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div href="#" class="card card-metro rounded-0 border-0">
<div class="card-image">
<img src="/html-component/images/avatar/m6.jpg" class="img-fluid rounded-1" alt="card image">
</div>
<div class="d-flex flex-column p-0">
<h6 class="my-1 mt-3 text-uppercase">SOPHIA HARRINGTON</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Load more END -->
</div>
</section>
<section id="contact" class="contact bg-g-light py-5">
<div class="py-5 text-primary">
<div class="container justify-content-center py-5">
<div class="text-center mb-5">
<h2 class="display-4 fw-medium">Contact Us</h2>
<p>Ut possimus qui ut temporibus culpa velit eveniet modi omnis est adipisci expedita at voluptas atque vitae
autem.</p>
</div>
<div class="row">
<div class="col-lg-6">
<div class="text-center bg-white shadow-sm py-5 rounded-1">
<i class="bx bx-map"></i>
<h5>Our Address</h5>
<p>A108 Adam Street, New York, NY 535022</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="text-center bg-white shadow-sm py-5 rounded-1">
<i class="bx bx-envelope"></i>
<h5>Email Us</h5>
<p>contact@example.com</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="text-center bg-white shadow-sm py-5 rounded-1">
<i class="bx bx-phone-call"></i>
<h5>Call Us</h5>
<p>+1 5589 55488 55</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="bg-primary py-5">
<div class="container">
<div class="row mx-auto">
<div class="col-lg-8 mx-auto text-center">
<!-- Logo -->
<div class="mb-4">
<a href="#" class="brand text-white text-decoration-none">
webui
</a>
</div>
<!-- Links -->
<ul class="nav justify-content-between text-primary-hover mt-5 mt-md-0">
<li class="nav-item"><a class="nav-link p-2" href="#">About</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Terms</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Privacy</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Career</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Contact us</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Cookies</a></li>
</ul>
<!-- Social media button -->
<ul class="list-inline mt-4 mb-0">
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow px-2 text-facebook" href="#">
<i class="bi bi-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow px-2 text-instagram" href="#">
<i class="bi bi-instagram"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow px-2 text-twitter" href="#">
<i class="bi bi-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow px-2 text-linkedin" href="#">
<i class="bi bi-linkedin"></i>
</a>
</li>
</ul>
<!-- copyright text -->
<div class="text-white-50 mt-4"> <small>Copyrights ©2023 webui. Powered by <a href="https://www.webui.io/" class="text-white-50">webui</a>.</small> </div>
</div>
</div>
</div>
</div>
</footer>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({
duration: 1200,
})
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://unpkg.com/aos@2.3.1/dist/aos.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: #451dd5;
--bs-primary-rgb: 69, 29, 213;
--bs-primary-dark: #310cb5;
--bs-secondary: #6900d1;
--bs-secondary-dark: #5500aa;
}
body {
font-family: 'Inter', sans-serif;
}
.nav-link {
text-decoration: none;
font-weight: 500;
color: var(--bs-secondary);
border-radius: 5px;
margin: 0 .1rem;
padding: .5rem 1.5rem !important
}
.menu .nav-link:hover,
.menu .active .nav-link {
color: var(--bs-primary) !important;
background: rgb(var(--bs-primary-rgb), 0.1);
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 14px 20px;
text-align: center;
font-weight: 500;
border-radius: 4px;
line-height: normal;
}
.bg-g-light {
background: radial-gradient(116.18% 118% at 50% 100%, rgba(99, 102, 241, 0.1) 0%, rgba(218, 70, 239, 0.05) 41.83%, rgba(241, 244, 253, 0.07) 82.52%);
}
.hero .fill-blue {
fill: var(--bs-primary);
}
.hero .lead {
color: #869ab8 !important;
font-size: 1.3125rem;
font-weight: 400;
}
.hero .left:hover {
box-shadow: 0 0 0 rgba(22, 28, 45, 0);
transition: box-shadow .25s ease, transform .25s ease;
margin-right: -5px;
}
.text-primary {
color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.btn-primary {
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary-dark);
--bs-btn-hover-bg: var(--bs-primary-dark);
}
.btn-secondary {
--bs-btn-bg: var(--bs-secondary);
--bs-btn-border-color: var(--bs-secondary-dark);
--bs-btn-hover-bg: var(--bs-secondary-dark);
}
.hero-art {
top: 0px;
height: 335px;
left: 0;
}
.h-100vh {
height: calc(80vh - 88px)
}
.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 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);
}
/**Team**/
.team {
background: url(/html-component/images/bg/abstract-lines.svg);
background-repeat: no-repeat;
background-size: cover;
}
.card-metro {
overflow: hidden;
text-decoration: none;
background: transparent;
}
.card-metro:hover .card-image img {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}
.card-metro img {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.team h6 {
font-size: .9rem;
}
/** end team**/
.contact .text-primary {
color: var(--bs-text-primary) !important;
}
.contact .bg-primary {
background-color: var(--bs-primary) !important;
}
.contact .btn-group-lg>.btn,
.contact .btn-lg {
padding: 1.25rem 3.65rem;
font-size: .95rem;
line-height: 1.5;
border-radius: 3px;
}
.footer .brand {
font-size: 1.3rem;
font-weight: 600;
}
.footer .nav-link {
color: #ffffff;
}
.footer .nav-link:hover {
color: black;
}
.footer .text-primary {
color: var(--bs-text-primary) !important;
}
.footer .bg-primary {
background-color: var(--bs-primary) !important;
}
Landing page template - 3
COPY
<header class="bg-light justify-content-center py-3 border-bottom text-center com65472">
<a href="/">
<span class="fs-3 brand fw-bold">
webui
</span>
</a>
<ul class="nav mt-2">
<li class="nav-item"><a href="#" class="nav-link">How it work?</a></li>
<li class="nav-item"><a href="#" class="nav-link">Components</a></li>
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link">About Us</a></li>
</ul>
</header>
<section class="com65538 bg-secondary" style="background: url(/html-component/images/nature/pat-whelen2.jpg); background-size: cover; background-repeat: no-repeat; background-position: center;">
<div class="overlay py-5">
<div class="container">
<div class="row">
<div class="offset-lg-3 col-lg-6 col-md-12 col-12 py-5">
<div class="pt-5 text-center text-light">
<h1 class="display-3 text-white mb-3 hero-title fw-semibold">
Become the hero of your own story
</h1>
<p class="mb-5 lead">
Join our Coach community of like-minded individuals. Get your ticket to the 2021 event.
</p>
<a href="#" class="btn btn-danger text-white btn-lg fs-6 py-3 px-5 rounded-2">Buy a Package</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="container py-5 com65967">
<h2 class="h1 text-center text-primary pb-4 py-2">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>
</section>
<section class="py-5 price-66198 bg-light">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="mb-5">
<div class="p-0 text-center">
<h2>Pricing Packages</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
</div>
</div>
<div class="row g-0 pt-5"> <!-- pricing item -->
<div class="col-md-4 mb-5">
<div class="pricing-pakg p-5 shadow-sm border h-100 text-center">
<h5 class="mb-3">Personal Plan</h5>
<div class="plan-price my-3">
<h1 class="price fs-1 text-success mb-0 fw-bold"> <sup class="text-grad">$</sup>20 </h1> /month
</div>
<p class="text-muted">Best for individual uses</p>
<a class="btn btn-primary mt-4 mb-5 py-3 px-5 text-white" href="#!">Order now!</a>
</div>
</div> <!-- pricing item -->
<div class="col-md-4 mb-5">
<div class="pricing-pakg p-5 shadow-lg bg-danger text-white h-100 text-center popular-package">
<div class="bg-white bg-opacity-25 fw-normal fs-7 text-white mb-3 d-inline p-2 px-4 rounded-1">POPULAR
</div>
<h5 class="mt-4">Business Plan</h5>
<div class="plan-price my-3">
<h1 class="price fs-1 text-grad mb-0 fw-bold"> <sup class="text-grad">$</sup>20 </h1> /month
</div>
<p class="text-white-75">Best for small and medium company</p> <a class="btn btn-dark mt-4 mb-5 py-3 px-5" href="#!">Order now!</a>
</div>
</div> <!-- pricing item -->
<div class="col-md-4 mb-5">
<div class="pricing-pakg p-5 shadow-sm border h-100 text-center">
<h5>Ultimate Plan</h5>
<div class="plan-price my-3">
<h1 class="price fs-1 text-success mb-0 fw-bold"> <sup class="text-grad">$</sup>20 </h1> /month
</div>
<p class="text-muted">Best for corporate company</p> <a class="btn btn-primary mt-4 mb-5 py-3 px-5" href="#!">Order now!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-primary py-5 com65670">
<div class="container">
<div class="row mx-auto">
<div class="col-lg-6 mx-auto text-center">
<!-- Logo -->
<div class="mb-4">
<a href="#" class="brand text-white text-decoration-none">
webui
</a>
</div>
<!-- Links -->
<ul class="nav justify-content-between text-primary-hover mt-5 mt-md-0">
<li class="nav-item"><a class="nav-link p-2" href="#">About</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Terms</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Privacy</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Career</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Contact us</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Cookies</a></li>
</ul>
<!-- Social media button -->
<ul class="list-inline mt-4 mb-0">
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow px-2 text-facebook" href="#">
<i class="bi bi-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow px-2 text-instagram" href="#">
<i class="bi bi-instagram"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow px-2 text-twitter" href="#">
<i class="bi bi-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow px-2 text-linkedin" href="#">
<i class="bi bi-linkedin"></i>
</a>
</li>
</ul>
<!-- copyright text -->
<div class="text-white-50 mt-4"> <small>Copyrights ©2023 webui. Powered by <a href="https://www.webui.io/" class="text-white-50">webui</a>.</small> </div>
</div>
</div>
</div>
</footer>
<!-- 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-purple: #00ac2b;
--bs-purple-dark: #008822;
--bs-black: #000000;
--bs-red: #d11800;
--bs-red-dark: #a01300;
--bs-primary: var(--bs-purple);
--bs-secondary: var(--bs-black);
--bs-success: var(--bs-green);
}
.nav-link {
color: var(--bs-primary);
font-weight: 500;
font-size: 16px !important;
}
.nav-link:hover {
color: var(--bs-black) !important;
}
.bg-success {
background-color: var(--bs-success) !important;
}
.bg-primary {
background: var(--bs-primary) !important;
}
body {
font-size: .9rem;
font-family: 'Inter', sans-serif;
}
.fs-xs {
font-size: 0.75rem !important;
}
.com65505 {
background: linear-gradient(243.24deg, var(--bs-primary) 5.22%, var(--bs-green-dark) 32.12%), #ad6000;
}
.com65505 .hero-title {
font-weight: 400;
}
.com65538 .overlay {
background-color: rgb(1 166 0 / 42%);
}
.com65505 .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
background-color: var(--bs-red);
border-color: var(--bs-red-dark);
}
.com65505 .btn-lg:hover {
background-color: var(--bs-red-dark);
}
.com65472 .brand {
color: var(--bs-secondary);
font-weight: 500;
background: linear-gradient(to right, var(--bs-secondary) 0%, var(--bs-primary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 1px;
}
.com65472 a,
.com65472 .nav-link {
text-decoration: none;
}
.com65472 a:hover,
.com65472 .nav-link:hover {
color: var(--bs-primary) !important;
}
.com65472 .nav {
display: flex !important;
justify-content: center !important;
}
.text-red {
color: var(--bs-red);
}
.text-red {
color: var(--bs-red);
}
.com66198 .team-item {
width: 95%;
}
.com66198 .social-icons-link i {
font-size: 24px;
}
.brand {
font-size: 1.3rem;
font-weight: 600;
}
.com65670 .nav-link {
color: #ffffff;
}
.com65670 .nav-link:hover {
color: var(--bs-secondary);
}
.brand {
font-size: 1.3rem;
font-weight: 600;
}
.com65670 .nav-link {
color: #ffffff;
}
.com65670 .nav-link:hover {
color: var(--bs-secondary);
}
.text-primary,
.social-icons-link {
color: var(--bs-primary) !important;
}
.price-66198 a:hover {
color: var(--bs-green-dark);
}
.btn-primary {
background: var(--bs-green);
border: var(--bs-green-dark);
color: var(--bs-white) !important;
}
.btn-primary:hover {
background: var(--bs-green-dark);
border: var(--bs-green-dark);
color: var(--bs-white) !important;
}
.btn-outline-primary {
border-color: var(--bs-green-dark) !important;
}
.btn-outline-primary:hover {
color: #ffffff !important;
background: var(--bs-green);
}
.text-red {
color: var(--bs-red);
}
.shadow {
-webkit-box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.1) !important;
}
.pricing-pakg {
border: 1px solid #f0f1f3;
padding: 50px;
position: relative;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.price.text-success,
.text-grad {
opacity: 1;
z-index: 9;
}
.fs-7 {
font-size: .85rem !important;
}
.popular-package {
z-index: 9;
margin-top: -20px;
padding-bottom: 50px;
}
Landing page template - 2
COPY
<header class="bg-light justify-content-center py-3 border-bottom text-center com65472">
<a href="/">
<span class="fs-4 brand">
<img src="/html-component/images/logo/webui.svg" alt="webui" width="75">
</span>
</a>
<ul class="nav mt-2">
<li class="nav-item"><a href="#" class="nav-link">How it work?</a></li>
<li class="nav-item"><a href="#" class="nav-link">Components</a></li>
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link">About Us</a></li>
</ul>
</header>
<section class="py-5 com65505">
<div class="container">
<div class="row">
<div class="offset-xl-1 col-xl-10 col-12">
<div class="row d-lg-flex align-items-center py-13">
<div class="col-lg-6 col-md-6 col-12 order-2 mt-8 order-md-1">
<div class="mb-0 mb-lg-8">
<!-- content -->
<span class="text-uppercase text-white-50">Deena
Nichols, PERSONAL TRAINER</span>
<h1 class="text-white mb-3 display-3 hero-title mt-2">
Train your body
& your mind.
</h1>
<p class="mb-5 lead text-white">
Get help from Coach, a professional
business
coach with advanced experience on growth
and business scaling.
</p>
<!-- button -->
<a href="#" class="btn btn-primary btn-lg me-2 shadow">Book a Class</a>
<a href="#" class="btn btn-lg btn-success shadow">About Me</a>
</div>
</div>
<div class="col-md-6 col-12 mb-n2 order-1 text-center">
<img src="/html-component/images/yoga/morning-yoga.jpg" alt="" class="img-fluid w-75">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="container py-5 com65967">
<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>
</section>
<section class="py-5 com66231 bg-light">
<div class="container content-space-1 content-space-md-3">
<div class="row justify-content-center">
<div class="col-8">
<!-- Heading -->
<div class="text-center mb-5">
<h1 class="fs-1">Team Members</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
</div>
<!-- End Heading -->
<div class="row justify-content-center mb-sm-5">
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/html-component/images/avatar/m1.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Christina Kray</h6>
<div class="text-muted">Founder / CEO</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/html-component/images/avatar/m2.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Jeff Fisher</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/html-component/images/avatar/m3.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Sophia Harrington</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/html-component/images/avatar/m4.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">David Forren</h6>
<div class="text-muted">Support Consultant</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/html-component/images/avatar/m5.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Amil Evara</h6>
<div class="text-muted">UI/UX Designer</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/html-component/images/avatar/m6.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Tom Lowry</h6>
<div class="text-muted">UI/UX Designer</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-success py-5 com65670">
<div class="container">
<div class="row mx-auto">
<div class="col-lg-6 mx-auto text-center">
<!-- Logo -->
<div class="mb-4">
<a href="#" class="brand text-white text-decoration-none">
webui
</a>
</div>
<!-- Links -->
<ul class="nav justify-content-between text-primary-hover mt-5 mt-md-0">
<li class="nav-item"><a class="nav-link p-2" href="#">About</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Terms</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Privacy</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Career</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Contact us</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Cookies</a></li>
</ul>
<!-- Social media button -->
<ul class="list-inline mt-4 mb-0">
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow px-2 text-facebook" href="#">
<i class="bi bi-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow px-2 text-instagram" href="#">
<i class="bi bi-instagram"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow px-2 text-twitter" href="#">
<i class="bi bi-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow px-2 text-linkedin" href="#">
<i class="bi bi-linkedin"></i>
</a>
</li>
</ul>
<!-- copyright text -->
<div class="text-white-50 mt-4"> <small>Copyrights ©2023 webui. Powered by <a href="https://www.webui.io/" class="text-white-50">webui</a>.</small> </div>
</div>
</div>
</div>
</footer>
<!-- 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-green: #00249b;
--bs-green-dark: #010866;
--bs-black: #000000;
--bs-red: #d11800;
--bs-red-dark: #a01300;
--bs-primary: var(--bs-green);
--bs-secondary: var(--bs-black);
--bs-success: var(--bs-green);
}
.bg-success {
background-color: var(--bs-success) !important;
}
body {
font-size: .9rem;
font-family: 'Inter', sans-serif;
}
.fs-xs {
font-size: 0.75rem !important;
}
.com65505 {
background: linear-gradient(243.24deg, var(--bs-primary) 5.22%, var(--bs-green-dark) 32.12%), #ad6000;
}
.com65505 .hero-title {
font-weight: 400;
}
.com65505 .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
background-color: var(--bs-red);
border-color: var(--bs-red-dark);
}
.com65505 .btn-lg:hover {
background-color: var(--bs-red-dark);
}
.com65472 .brand {
color: var(--bs-secondary);
font-weight: 500;
background: linear-gradient(to right, var(--bs-secondary) 0%, var(--bs-primary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 1px;
}
.com65472 a,
.com65472 .nav-link {
text-decoration: none;
color: var(--bs-secondary);
}
.com65472 a:hover,
.com65472 .nav-link:hover {
color: var(--bs-primary) !important;
}
.com65472 .nav {
display: flex !important;
justify-content: center !important;
}
.com66231 a,
.com66231 .text-primary {
color: var(--bs-primary) !important;
}
.com66231 a:hover {
color: var(--bs-green-dark) !important;
}
.text-red {
color: var(--bs-red);
}
.com66231 .team-item {
width: 95%;
}
.com66231 .social-icons-link i {
font-size: 24px;
}
.com66231 .rounded-circle {
border: 1px solid #ddd;
padding: 5px;
}
.brand {
font-size: 1.3rem;
font-weight: 600;
}
.com65670 .nav-link {
color: #ffffff;
}
.com65670 .nav-link:hover {
color: var(--bs-secondary);
}
.brand {
font-size: 1.3rem;
font-weight: 600;
}
.com65670 .nav-link {
color: #ffffff;
}
.com65670 .nav-link:hover {
color: var(--bs-secondary);
}
Landing page template - 1
COPY
<header class="com65373">
<div class="d-flex flex-wrap justify-content-center py-3 border-bottom bg-light">
<a href="/" class="d-flex align-items-center ms-3 mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<span class="fs-3 brand fw-bold">
webui
</span>
</a>
<ul class="nav justify-content-center nav-pills me-3">
<li class="nav-item"><a href="#services" class="nav-link fw-medium">Our Services</a></li>
<li class="nav-item"><a href="#aboutUs" class="nav-link fw-medium">About Us</a></li>
<li class="nav-item"><a href="#contactUs" class="nav-link fw-medium">Contact Us</a></li>
</ul>
</div>
</header>
<section class="bg-primary hero-65934">
<div class="container py-5">
<div class="row">
<div class="position-relative col-md-8 mx-auto text-center text-white my-3 my-md-5">
<h1 class="display-4 fw-semibold text-center mx-auto pt-5 position-relative zindex-2" style="max-width: 680px;z-index: 1;" data-aos="fade-in">The best platform for online learning</h1>
<div class="text-white position-absolute top-0 start-50 translate-middle-x w-100 mt-md-5">
<svg width="408" height="66" viewbox="0 0 608 66" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path opacity=".2" d="M45.66 63.0651C48.1682 62.8708 50.692 62.5736 53.2046 62.482C55.5493 62.3949 57.8918 62.3033 60.232 62.2161C73.0671 61.7358 85.8977 61.1192 98.7394 60.9293C112.169 60.7304 125.603 60.402 139.035 60.3663C152.743 60.3328 166.446 60.2747 180.152 60.3417C206.867 60.4757 231.522 59.2366 258.233 59.3013C290.201 57.8797 306.797 56.9045 334.904 55.6546C348.07 55.5876 361.243 55.2681 374.408 55.0111C387.336 54.7632 399.538 53.6311 412.46 53.1396C415.299 53.0323 418.137 52.8201 420.972 52.6548C423.774 52.4894 426.583 52.3576 429.383 52.1432C436.572 51.5913 444.461 51.7091 451.639 51.0545C464.138 49.9061 476.595 48.378 489.11 47.4218C502.221 46.4209 515.361 45.8534 528.486 45.0379C534.408 44.6715 540.366 44.2135 546.249 43.4048C552.974 42.4865 559.639 41.3762 566.288 39.991C572.715 38.6505 579.137 37.2743 585.567 35.9584C588.655 35.3261 591.757 34.7497 594.873 34.2984C598.4 33.7868 601.894 33.2618 605.377 32.5044C607.052 32.138 607.381 29.8927 607.381 28.4494C607.388 27.6273 607.258 26.8297 606.995 26.0567C606.749 25.4065 606.232 24.3676 605.377 24.3967C599.094 24.6089 592.816 24.8234 586.535 25.1205C580.2 25.4177 573.853 25.6009 567.51 25.6903C555.192 25.8578 542.852 25.4311 530.548 24.9172C532.645 24.6335 534.742 24.3498 536.839 24.0638C544.371 23.0361 551.882 21.7448 559.453 21.0522C563.482 20.6813 567.524 20.373 571.541 19.8971C573.579 19.6581 575.599 19.381 577.614 18.9744C579.777 18.5365 581.91 17.9378 584.036 17.339C584.719 17.2653 585.234 16.9212 585.587 16.3158C586.213 15.4489 586.5 14.2872 586.608 13.1746C588.761 12.511 589.194 9.31622 589.194 7.39709C589.207 6.20853 589.022 5.05348 588.635 3.93417C588.261 2.94892 587.55 1.55034 586.297 1.53694C579.758 1.46321 573.23 1.01862 566.691 0.938188C565.93 0.931485 565.163 0.927017 564.397 0.927017C558.77 0.927017 553.155 1.17501 547.535 1.47885C535.016 2.1558 522.495 2.96679 509.989 3.87832C504.175 4.29834 498.369 4.79655 492.551 5.15178C485.435 5.58297 478.335 5.91139 471.212 6.19066C459.296 6.65536 447.361 6.83632 435.438 7.05527C421.763 7.3122 408.106 7.67189 394.447 8.31756C381.795 8.91631 369.155 9.7139 356.512 10.4757C343.816 11.2354 331.122 11.9905 318.427 12.7613C305.415 13.5499 292.394 14.1353 279.373 14.7206C272.783 15.02 266.185 15.1071 259.593 15.297C253.354 15.4758 247.107 15.5227 240.864 15.6143C228.574 15.7952 216.287 15.9069 203.998 16.0343C179.21 16.2867 154.428 16.6934 129.642 17.1067C116.025 17.3346 102.412 17.587 88.7943 17.8439C81.8486 17.9758 74.9007 18.2506 67.9594 18.4539C62.0236 18.6259 56.0901 19.0303 50.1565 19.3364C43.8406 19.6625 37.5247 20.0222 31.2089 20.3886C27.4542 20.6076 23.6952 20.8332 19.9362 21.0522C18.3053 21.1505 16.67 21.2443 15.0346 21.3426C13.5474 21.4297 12.0579 21.5415 10.5729 21.6554C9.51432 21.7358 8.47346 21.89 7.42818 22.0687C6.26798 22.2631 5.11442 22.7859 4.00063 23.1657C3.33545 23.7019 2.87138 24.381 2.61503 25.2099C2.24156 26.3002 2.05814 27.4217 2.0714 28.5768C2.05814 29.7341 2.24156 30.8556 2.61503 31.9459C2.81834 32.3569 3.02165 32.768 3.22496 33.1769C3.60506 33.8292 4.15974 34.1979 4.88901 34.2783C6.1818 34.6492 7.4547 35.0156 8.78063 35.2367C9.50548 35.1563 10.0602 34.7922 10.4381 34.142C10.5817 33.9432 10.7077 33.7309 10.8182 33.5075C11.5121 33.4896 12.2082 33.4919 12.9043 33.4919C13.5695 33.4919 14.2369 33.4874 14.9043 33.4718C16.407 33.4383 17.9053 33.4003 19.4058 33.3645C23.2709 33.2729 27.136 33.1791 31.0011 33.0875C35.1889 32.987 39.3766 32.911 43.5622 32.8373C43.129 32.8753 42.6981 32.9132 42.265 32.9467C32.3735 33.7242 22.4886 34.5062 12.606 35.3931C11.0038 35.5741 9.79056 36.3784 8.95301 37.806C7.71768 39.5129 7.04366 41.7135 6.70996 43.9231C4.97299 43.9075 3.2338 43.8873 1.49682 43.8739C0.28359 43.865 0.0449219 46.0031 0.0449219 46.8252C0.0449219 47.6608 0.28359 49.7564 1.50345 49.7698C3.1675 49.7855 4.83376 49.8145 6.49781 49.8369C6.64146 51.6934 7.01272 53.5098 7.62265 55.2882C8.06905 56.1908 8.51545 57.0934 8.96184 57.9937C9.79719 59.4213 15.9944 65.1786 17.5966 65.3596C26.9466 64.5218 36.3011 63.789 45.66 63.0651Z">
</path>
</svg>
</div>
<p class="lead mb-5 pt-3">Improve your skills and gain knowledge in one application. Become the best version of
yourself</p>
<a class="btn btn-danger text-white shadow px-5 py-3 rounded-5 text-uppercase" data-aos="fade-up" data-aos-delay="50" href="#contactUs">Get early access</a>
</div>
</div>
</div>
</section>
<section class="py-5">
<div class="container" id="services">
<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">Our Services</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-light text-primary rounded-3 p-3 px-4 mx-auto mt-3 mt-md-4">
<i class="bi bi-chat-square-quote fs-3"></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-light text-primary rounded-3 p-3 px-4 mx-auto mt-3 mt-md-4">
<i class="bi bi-graph-up-arrow fs-3"></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-light text-primary rounded-3 p-3 px-4 mx-auto mt-3 mt-md-4">
<i class="bi bi-person-add fs-3"></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-light text-primary rounded-3 p-3 px-4 mx-auto mt-3 mt-md-4">
<i class="bi bi-app-indicator fs-3"></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-light text-primary rounded-3 p-3 px-4 mx-auto mt-3 mt-md-4">
<i class="bi bi-list-task fs-3"></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-light text-primary rounded-3 p-3 px-4 mx-auto mt-3 mt-md-4">
<i class="bi bi-database-check fs-3"></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>
</section>
<section class="bg-light">
<div class="bg-gray-100 text-dark-700 py-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="/html-component/images/icon/transit-64.png" width="55" alt="Free shipping" class="me-4 float-start">
<div class="service-text">
<h6 class="text-uppercase">Free shipping & return</h6>
<p class="text-muted fw-light text-sm mb-0">Free Shipping over $300</p>
</div>
</div>
<div class="col-md-4">
<img src="/html-component/images/icon/money-bag-64.png" width="50" alt="Money Back" class="me-4 float-start">
<div class="service-text">
<h6 class="text-uppercase">Money back guarantee</h6>
<p class="text-muted fw-light text-sm mb-0">30 Days Money Back Guarantee</p>
</div>
</div>
<div class="col-md-4">
<img src="/html-component/images/icon/support-64.png" width="50" alt="Support" class="me-4 float-start">
<div class="service-text">
<h6 class="text-uppercase">020-800-456-747</h6>
<p class="text-muted fw-light text-sm mb-0">24/7 Available Support</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="aboutUs" class="py-5 com66231">
<div class="container content-space-1 content-space-md-3 py-5">
<div class="row justify-content-center">
<div class="col-8">
<!-- Heading -->
<div class="text-center mb-5">
<h1 class="fs-1">Team Members</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
</div>
<!-- End Heading -->
<div class="row justify-content-center mb-sm-5">
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/html-component/images/avatar/m1.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Christina Kray</h6>
<div class="text-muted">Founder / CEO</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/html-component/images/avatar/m2.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Jeff Fisher</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/html-component/images/avatar/m3.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Sophia Harrington</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/html-component/images/avatar/m6.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">David Forren</h6>
<div class="text-muted">Support Consultant</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/html-component/images/avatar/m4.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Amil Evara</h6>
<div class="text-muted">UI/UX Designer</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/html-component/images/avatar/m5.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Tom Lowry</h6>
<div class="text-muted">UI/UX Designer</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contactUs" class="com66033 container-fluid p-0">
<div class="bg-primary text-white position-relative py-5">
<!-- shapes-->
<svg class="position-absolute end-0 mt-n2" width="242" height="331" viewbox="0 0 242 331" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M172.014 250.127C137.236 227.74 112.349 192.144 144.586 153.591C157.686 137.932 176.759 127.973 196.524 122.046C234.647 110.639 277.027 113.361 313.349 129.576C338.19 140.666 361.129 159.183 369.934 184.502C383.476 223.496 359.75 260.161 321.569 273.118C288.832 284.223 247.685 279.513 214.885 269.837C201.003 265.743 185.745 258.966 172.014 250.127Z" fill="#121519" fill-opacity=".07"></path>
<path d="M20.3265 69.264C19.7064 43.0736 29.8071 17.1878 62.3851 19.8622C75.6229 20.9505 87.9525 27.2066 98.3563 35.3132C118.426 50.9253 132.424 73.896 136.952 98.6413C140.044 115.562 138.424 134.218 127.978 148C111.901 169.236 83.4531 170.283 62.5246 155.209C44.5807 142.281 32.0983 119.217 25.3391 98.6799C22.4836 89.9885 20.5616 79.6021 20.3265 69.264Z" fill="#121519" fill-opacity=".07"></path>
</svg>
<svg class="position-absolute start-0 bottom-0 ms-3" width="169" height="217" viewbox="0 0 169 217" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.2574 90.0177C29.666 97.6253 26.6254 106.591 24.9502 114.96C19.9522 140.043 26.4112 168.792 49.6162 181.885C66.0705 191.17 91.0017 189.904 108.062 183.692C125.725 177.266 135.045 168.04 142.29 150.389C151.409 128.174 150.912 99.6904 125.93 91.6429C115.423 88.254 104.723 86.5065 94.2249 82.5889C84.6622 79.0248 74.8545 72.1766 64.4411 71.6149C50.8011 70.8777 40.9122 79.0146 34.2574 90.0177Z" fill="#121519" fill-opacity="0.07"></path>
<path d="M147.005 75.6331C152.135 70.7783 156.106 64.2374 159.153 57.9073C166.014 43.6372 174.127 22.1368 160.207 9.68505C152.924 3.17188 139.243 3.86644 130.324 5.29774C118.428 7.20428 107.295 8.85077 96.5031 14.783C85.8056 20.6599 79.0155 33.6997 77.0014 45.6686C75.4978 54.5776 79.63 63.6672 84.7391 70.7453C91.8208 80.5571 103.503 84.2003 114.817 84.3975C121.101 84.5081 127.716 84.0527 133.89 82.8121C138.932 81.7962 143.273 79.1597 147.005 75.6331Z" fill="#121519" fill-opacity="0.07"></path>
</svg>
<div class="card-body position-relative zindex-2 p-3">
<form class="mx-auto" style="max-width: 800px;">
<h2 class="h1 text-center pb-4 text-white">Send a Message</h2>
<div class="row g-4">
<div class="col-sm-6">
<label class="form-label fs-base" for="name">Name</label>
<input class="form-control form-control-lg fs-6 rounded-1" type="text" placeholder="Your name" required="" id="name">
</div>
<div class="col-sm-6">
<label class="form-label fs-base" for="company">Company</label>
<input class="form-control form-control-lg fs-6 rounded-1" type="text" placeholder="Your company name" id="company">
</div>
<div class="col-sm-6">
<label class="form-label fs-base" for="email">Email</label>
<input class="form-control form-control-lg fs-6 rounded-1" type="email" placeholder="Email address" required="" id="email">
</div>
<div class="col-sm-6">
<label class="form-label fs-base" for="phone">Phone</label>
<input class="form-control form-control-lg fs-6 rounded-1" type="text" placeholder="Phone number" id="phone">
</div>
<div class="col-sm-12">
<label class="form-label fs-base" for="message">How can we help?</label>
<textarea class="form-control form-control-lg fs-6 rounded-1" rows="6" placeholder="Enter your message here..." required="" id="message"></textarea>
</div>
<div class="col-sm-12 text-center pt-4">
<button class="btn btn-danger shadow px-5 py-3 rounded-5" type="submit">Send a request</button>
</div>
</div>
</form>
</div>
</div>
</section>
<footer class="com65670">
<div class="py-5">
<div class="container">
<div class="row mx-auto">
<div class="col-lg-6 mx-auto text-center">
<!-- Logo -->
<div class="mb-4">
<a href="#" class="brand text-decoration-none">
webui
</a>
</div>
<!-- Links -->
<ul class="nav justify-content-between mt-5 mt-md-0">
<li class="nav-item"><a href="#services" class="nav-link p-2">Our Services</a></li>
<li class="nav-item"><a href="#aboutUs" class="nav-link p-2">About Us</a></li>
<li class="nav-item"><a href="#contactUs" class="nav-link p-2">Contact Us</a></li>
</ul>
<!-- Social media button -->
<ul class="list-inline mt-4 mb-0">
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow-sm px-2 text-facebook" href="#">
<i class="bi bi-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow-sm px-2 text-instagram" href="#">
<i class="bi bi-instagram"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow-sm px-2 text-twitter" href="#">
<i class="bi bi-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-light btn-sm shadow-sm px-2 text-linkedin" href="#">
<i class="bi bi-linkedin"></i>
</a>
</li>
</ul>
<!-- copyright text -->
<div class="text-white-50 mt-4"> <small>Copyrights ©2023 webui. Powered by <a href="https://www.webui.io/" class="text-white-50">webui</a>.</small> </div>
</div>
</div>
</div>
</div>
</footer>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({
duration: 1200,
})
</script>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://unpkg.com/aos@2.3.1/dist/aos.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-black: #202020;
--bs-black-rgb: 0, 0, 0;
--bs-purple: #303030;
--bs-purple-rgb: 48, 48, 48;
--bs-purple-dark: #047500;
--bs-primary: var(--bs-purple);
--bs-primary-rgb: var(--bs-purple-rgb);
--bs-secondary: var(--bs-black);
--bs-red: #be0000;
--bs-red-rgb: 190, 0, 0;
--bs-accent: var(--bs-red);
}
body {
font-size: .90rem;
font-family: 'Inter', sans-serif;
}
.brand {
color: var(--bs-primary);
}
.com65373 a,
.com65373 .nav-link {
text-decoration: none;
color: var(--bs-secondary);
}
.com65373 a:hover,
.com65373 .nav-link:hover {
color: var(--bs-primary);
}
.hero-65934 {
background: url(/html-component/images/art/abstract-art.svg) left top no-repeat;
background-size: 100%;
}
.bg-primary {
background-color: rgba(var(--bs-primary-rgb)) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.nav-item {
padding: 0 20px;
}
.com66231 a,
.com66231 .text-primary {
color: var(--bs-primary) !important;
}
.com66231 a:hover {
color: var(--bs-green-dark) !important;
}
.text-red {
color: var(--bs-red);
}
.com66231 .team-item {
width: 95%;
}
.com66231 .social-icons-link i {
font-size: 24px;
}
.com66231 .rounded-circle {
border: 1px solid #ddd;
padding: 5px;
}
.com66231 img:hover {
opacity: .9;
}
.com66033 .fs-xs {
font-size: 0.75rem !important;
}
.com66033 .text-primary {
color: var(--bs-text-primary) !important;
}
.com66033 .bg-primary {
background-color: var(--bs-primary) !important;
}
.com65670 .brand {
font-size: 1.3rem;
font-weight: 600;
}
.com65670 .nav-link {
color: var(--bs-primary);
}
.com65670 .nav-link:hover {
color: var(--bs-secondary);
}
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