About us page - 4
COPY
<header class="menu sticky-top">
<div class="navbar-light">
<nav class="navbar navbar-expand-md bg-white 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">Home</a></li>
<li class="nav-item"> <a class="nav-link" href="#about">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="#sp-team">Team</a></li>
<li class="nav-item"> <a class="nav-link" href="#contactus">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<section class="bg-light">
<div class="container position-relative zindex-5 pt-5">
<div class="row">
<div class="col-lg-6">
<!-- Breadcrumb -->
<nav class="pt-md-2 pt-lg-3 pb-4 pb-md-5 mb-xl-4" aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
<a href="#"><i class="bx bx-home-alt fs-lg me-1"></i>Home</a>
</li>
<li class="breadcrumb-item active" aria-current="page">About</li>
</ol>
</nav>
</div>
</div>
</div>
</section>
<section id="about" class="py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-6">
<!-- Badge -->
<span class="badge rounded-pill bg-primary-soft mb-3 px-4 py-2">
<span class="fs-8 fw-medium text-uppercase text-spcing-1">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">
</div>
</div>
</div>
</section>
<section id="sp-team" class="team">
<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-danger">Creative</span> team and <span class="text-primary">Leadership</span>
</h2>
<p class="fs-6 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="fs-6 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>
<footer class="footer-65670">
<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>
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: #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 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
line-height: normal;
}
.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-65670 .brand {
font-size: 1.3rem;
font-weight: 600;
}
.footer-65670 .nav-link {
color: #ffffff;
}
.footer-65670 .nav-link:hover {
color: black;
}
.footer-65670 .text-primary {
color: var(--bs-text-primary) !important;
}
.footer-65670 .bg-primary {
background-color: var(--bs-primary) !important;
}
About us page - 1
COPY
<header class="menu sticky-top">
<div class="navbar-light border-bottom">
<nav class="navbar navbar-expand-lg navbar-light bg-light px-0 py-1">
<div class="container-fluid">
<!-- Logo -->
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<img src="/html-component/images/logo/webui.svg" width="65" alt="webui">
</a>
<!-- Navbar toggle -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav navbar-nav-scroll nav-pills-primary-soft
text-center ms-auto me-auto p-2">
<li class="nav-item active"> <a class="nav-link px-md-3" href="#">Home</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Services</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Price</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Contact</a></li>
</ul>
<!-- Right navigation -->
<div class="navbar-nav ms-lg-4">
<a class="nav-item nav-link" href="#">Sign in</a>
</div>
<!-- Action -->
<div class="d-flex align-items-lg-center mt-3 mt-lg-0">
<a href="#" class="btn btn-primary rounded-5 px-4">
Register
</a>
</div>
</div>
</div>
</nav>
</div>
</header>
<section>
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-6 mb-4">
<img src="/html-component/images/service/ux-research.jpg" alt="Image" class="img-fluid">
<div class="d-flex align-items-center mt-3">
<div class="row">
<div class="col">
<img src="/html-component/images/service/service-3.jpg" alt="Image" class="img-fluid">
</div>
<div class="col">
<img src="/html-component/images/service/service-1.jpg" alt="Image" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div>
<span class="d-block border-bottom pb-2">About Us</span>
<h1 class="display-5 fw-medium my-4">Behind the Word Mountains</h1>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a
large language ocean.</p>
<div class="mt-3">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. Far far away, behind the word mountains.</p>
<p>far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language
ocean.</p>
<p>Countries live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. Bookmarksgrove right at the coast of the Semantics, a large language ocean</p>
<p>There live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>
</div>
</div>
</div>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind
texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. Far
far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind
texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. Far
far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind
texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>There live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a
large language ocean.</p>
</div>
</section>
<footer class="footer">
<div class="container-fluid p-0">
<div class="bg-light p-4 pb-0">
<div class="row g-4 justify-content-between">
<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. <br> Suite 100. Scottsdale, Arizona, USA</p>
</div>
<div class="col-md-7 col-lg-4">
<ul class="list-inline">
<li class="list-inline-item"> <a class="nav-link px-md-3" href="#">Home</a></li>
<li class="list-inline-item"> <a class="nav-link px-md-3" href="#">Services</a></li>
<li class="list-inline-item"> <a class="nav-link px-md-3" href="#">Price</a></li>
<li class="list-inline-item"> <a class="nav-link px-md-3" href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- Divider -->
<hr class="mt-4 mb-0 opacity-10">
<!-- 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>
<!-- 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-blue: #1264ff;
--bs-blue-rgb: 18, 100, 255;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a {
text-decoration: none;
}
.text-white {
color: var(--bs-white) !important;
}
.menu .nav-link {
text-decoration: none;
font-weight: 500;
color: var(--bs-secondary);
border-radius: 25px;
margin: 0 .1rem;
padding: .5rem 1.3rem !important;
}
.menu .nav-link:hover,
.menu .active .nav-link {
color: var(--bs-primary) !important;
background: rgb(var(--bs-blue-rgb), 0.1);
}
About us page - 2
COPY
<header class="menu sticky-top">
<div class="navbar-light border-bottom">
<nav class="navbar navbar-expand-lg navbar-light bg-light px-0 py-1">
<div class="container-fluid">
<!-- Logo -->
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<img src="/html-component/images/logo/webui.svg" width="65" alt="webui">
</a>
<!-- Navbar toggle -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav navbar-nav-scroll nav-pills-primary-soft
text-center ms-auto me-auto p-2">
<li class="nav-item active"> <a class="nav-link px-md-3" href="#">Home</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Services</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Price</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Contact</a></li>
</ul>
<!-- Right navigation -->
<div class="navbar-nav ms-lg-4">
<a class="nav-item nav-link" href="#">Sign in</a>
</div>
<!-- Action -->
<div class="d-flex align-items-lg-center mt-3 mt-lg-0">
<a href="#" class="btn btn-primary rounded-5 px-4">
Register
</a>
</div>
</div>
</div>
</nav>
</div>
</header>
<div class="container-xxl py-5">
<div class="container">
<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="/html-component/images/service/structural-1.jpg">
</div>
<div class="col-6 align-self-end">
<img class="img-fluid" src="/html-component/images/service/service-2.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 Are Leader In Industrial Market</h1>
<p class="mb-4">Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et
eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo magna dolore erat amet
</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>Power & Energy</p>
<p><i class="bi bi-check-lg text-primary me-2"></i>Civil Engineering</p>
<p><i class="bi bi-check-lg text-primary me-2"></i>Chemical Engineering</p>
<p><i class="bi bi-check-lg text-primary me-2"></i>Mechanical Engineering</p>
<p class="mb-0"><i class="bi bi-check-lg text-primary me-2"></i>Oil & Gas Engineering</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 class="mt-5">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind
texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. Far
far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
<p>There live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a
large language ocean.</p>
</div>
</div>
</div>
<!-- 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-blue: #1264ff;
--bs-blue-rgb: 18, 100, 255;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
}
a {
text-decoration: none;
}
.text-white {
color: var(--bs-white) !important;
}
.text-primary {
color: var(--bs-primary) !important;
}
.bg-primary {
background-color: var(--bs-primary-rgb);
}
.menu .nav-link {
text-decoration: none;
font-weight: 500;
color: var(--bs-secondary);
border-radius: 25px;
margin: 0 .1rem;
padding: .5rem 1.3rem !important;
}
.menu .nav-link:hover,
.menu .active .nav-link {
color: var(--bs-primary) !important;
background: rgb(var(--bs-blue-rgb), 0.1);
}
Page component - 3
COPY
<header class="menu sticky-top">
<div class="navbar-light border-bottom">
<nav class="navbar navbar-expand-lg navbar-light bg-light px-0 py-1">
<div class="container-fluid">
<!-- Logo -->
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<img src="/html-component/images/logo/webui.svg" width="65" alt="webui">
</a>
<!-- Navbar toggle -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav navbar-nav-scroll nav-pills-primary-soft
text-center ms-auto me-auto p-2">
<li class="nav-item active"> <a class="nav-link px-md-3" href="#">Home</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Services</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Price</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Contact</a></li>
</ul>
<!-- Right navigation -->
<div class="navbar-nav ms-lg-4">
<a class="nav-item nav-link" href="#">Sign in</a>
</div>
<!-- Action -->
<div class="d-flex align-items-lg-center mt-3 mt-lg-0">
<a href="#" class="btn btn-primary rounded-5 px-4">
Register
</a>
</div>
</div>
</div>
</nav>
</div>
</header>
<section>
<img src="/html-component/images/nature/pat-whelen2.jpg" class="img-fluid mb-5">
<div class="container">
<div class="row g-5">
<div class="col-lg-8">
<span class="eyebrow text-primary mb-4">About Us</span>
<h3 class="display-4 fw-medium my-2 mb-3">Behind the mountains!</h3>
<p>There live the blind texts. Separated they live in Bookmarksgrove right at the coast of the
Semantics, a
large language ocean.</p>
<div class="bg-light p-5 rounded-3">
<div class="row">
<div class="col">
<span class="d-block fs-3 fw-bold">+80%</span>
<span class="lead text-secondary">working hours</span>
</div>
<div class="col">
<span class="d-block fs-3 fw-bold">84</span>
<span class="lead text-secondary">working hours</span>
</div>
<div class="col">
<span class="d-block fs-3 fw-bold">84</span>
<span class="lead text-secondary">working hours</span>
</div>
<div class="col">
<span class="d-block fs-3 fw-bold">84</span>
<span class="lead text-secondary">working hours</span>
</div>
</div>
</div>
<div class="mt-5">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
there live the blind
texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a
large language ocean. Far
far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
<p>There live the blind texts. Separated they live in Bookmarksgrove right at the coast of
the Semantics, a
large language ocean.</p>
</div>
</div>
<div class="col-lg-4">
<img class="img-fluid rounded-3" src="/html-component/images/service/service-2.jpg">
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #1264ff;
--bs-blue-rgb: 18, 100, 255;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
}
a {
text-decoration: none;
}
.text-white {
color: var(--bs-white) !important;
}
.text-primary {
color: var(--bs-primary) !important;
}
.bg-primary {
background-color: var(--bs-primary-rgb);
}
.menu .nav-link {
text-decoration: none;
font-weight: 500;
color: var(--bs-secondary);
border-radius: 25px;
margin: 0 .1rem;
padding: .5rem 1.3rem !important;
}
.menu .nav-link:hover,
.menu .active .nav-link {
color: var(--bs-primary) !important;
background: rgb(var(--bs-blue-rgb), 0.1);
}
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