Hero component - 16
COPY
<section class="hero">
<div class="container-fluid">
<nav class="navbar navbar-expand-md p-4 mb-5">
<div class="container-fluid">
<a class="navbar-brand me-5" href="#">
<img src="/html-component/images/logo/webui-wh.svg" width="75" alt="webui">
</a>
<a class="navbar-toggler ms-auto border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="bi bi-list fs-4 text-white"></i>
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu py-3">
<li><a class="dropdown-item" href="#">Service #1</a></li>
<li><a class="dropdown-item" href="#">Service #2</a></li>
<li><a class="dropdown-item" href="#">Service #3</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact Us</a>
</li>
</ul>
<div>
<a href="#" class="btn btn-dark rounded-5 px-4">Log in <i class="bi bi-arrow-right-short"></i></a>
</div>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-12">
<div class="py-5 text-center">
<h1 class="display-5 fw-medium">
Interdum etrure dolor reprehenderit
</h1>
<h4 class="fs-4 fw-normal mb-3">Morbi viverra dui mi arcu sed</h4>
<p class="mb-5">
Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse
semper morbi.
</p>
<a href="#" class="btn btn-dark btn-lg me-2 shadow mb-2">Contact</a>
<a href="#" class="btn btn-lg btn-dark shadow mb-2">Services</a>
</div>
</div>
</div>
</div>
</section>
<section class="feature-content">
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Playfair+Display:wght@400;500;600&display=swap');
:root {
--bs-primary: #000000;
--bs-primary-rgb: 0, 0, 0;
--bs-secondary: #919191;
--bs-secondary-rgb: 145, 145, 145;
}
body {
font-family: 'Inter', sans-serif;
font-size: 1rem;
}
h1,
h2,
h3 {
font-family: 'Playfair Display', serif;
color: var(--bs-primary);
}
.hero {
background-color: #ebebeb;
height: 50vh;
}
.feature-content {
background: var(--bs-primary) url(/html-component/images/3d/3D-wqeS9uDZs6k.jpg) right top no-repeat;
background-size: cover;
height: 60vh;
}
.nav-link {
text-decoration: none;
font-weight: 500;
border-radius: 40px;
margin: 0 .1rem;
padding: .5rem 1.5rem !important;
}
.nav-link:hover,
.menu .active .nav-link {
color: var(--bs-primary);
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
Hero component - 15
COPY
<section class="hero">
<div class="container-fluid">
<nav class="navbar navbar-expand-md p-4 mb-5">
<div class="container-fluid">
<a class="navbar-brand me-5" href="#">
<img src="/html-component/images/logo/webui-wh.svg" width="75" alt="webui">
</a>
<a class="navbar-toggler ms-auto border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="bi bi-list fs-4 text-white"></i>
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu py-3">
<li><a class="dropdown-item" href="#">Service #1</a></li>
<li><a class="dropdown-item" href="#">Service #2</a></li>
<li><a class="dropdown-item" href="#">Service #3</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact Us</a>
</li>
</ul>
<div>
<a href="#" class="btn btn-dark rounded-5 px-4">Log in <i class="bi bi-arrow-right-short"></i></a>
</div>
</div>
</div>
</nav>
</div>
<div class="container text-white py-5">
<div class="row align-items-center">
<div class="col-md-6">
<div class="py-5">
<h1 class="display-4 fw-medium">
Interdum etrure dolor reprehenderit
</h1>
<h4 class="fs-5 fw-normal mb-3">Morbi viverra dui mi arcu sed</h4>
</div>
</div>
<div class="col-md-6">
<p class="mb-5">
Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse semper morbi. Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse semper morbi. Vulputate commodo tincidunt risus.
</p>
</div>
</div>
</div>
<div class="container">
<div class="feature-content">
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Playfair+Display:wght@400;500;600&display=swap');
:root {
--bs-primary: #2c433b;
--bs-primary-rgb: 44, 67, 59;
}
body {
font-family: 'Inter', sans-serif;
font-size: 1rem;
}
h1,
h2,
h3 {
font-family: 'Playfair Display', serif;
}
.hero {
background-color: var(--bs-primary);
height: 80vh;
}
.feature-content {
background: var(--bs-primary) url(/html-component/images/home-office/annie-spratt-2.jpg) right top no-repeat;
background-size: cover;
height: 60vh;
}
.nav-link {
text-decoration: none;
font-weight: 500;
border-radius: 40px;
margin: 0 .1rem;
padding: .5rem 1.5rem !important;
color: #ffffff;
}
.nav-link:hover,
.menu .active .nav-link {
color: #000;
}
Hero component - 14
COPY
<section class="hero">
<header class="menu mb-5">
<nav class="navbar navbar-expand-md p-3 p-md-4">
<div class="container-fluid mt-3 mt-md-2">
<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>
<a class="navbar-toggler ms-sm-auto mx-3 me-md-0 p-0 p-sm-2" 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>
</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-fluid p-0 m-0">
<div class="row g-0 justify-content-center">
<div class="col-lg-6 col-md-6 col-12 text-center">
<div class="py-5 my-0 py-md-5 my-md-5">
<!-- content -->
<h2 class="fs-6 fs-md-6 fw-light rounded-5 bg-primary bg-opacity-75 py-2 px-3 d-inline lh-1 text-white">
webui is a UI component library</h2>
<h1 class="display-5 mt-2 fw-semibold text-white">
<span class="animate-charcter">webui</span> Develop anything
</h1>
<p class="mb-5 text-white text-opacity-50">
Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse
semper morbi.
</p>
<div class="position-relative w-75 ms-auto me-auto mb-5">
<form>
<i class="bi bi-envelope position-absolute fs-4 sr-icon text-dark"></i>
<input type="email" class="form-control rounded-5 ps-4-5" placeholder="Enter your email">
<input type="submit" class="btn btn-primary rounded-5 fs-6 me-2 position-absolute sbtn" value="Subscribe">
</form>
</div>
<a class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">Learn More</span>
</a>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #002abb;
--bs-primary-dark: #001d83;
--bs-primary-dark-2: #001666;
--bs-primary-dark-rgb: 0, 29, 131;
}
body {
font-family: 'Inter', sans-serif;
font-size: 1rem;
}
.menu a,
.menu .nav-link {
text-decoration: none;
font-weight: 500;
color: var(--bs-white);
border-radius: 25px;
margin: 0 .1rem;
padding: .5rem 1.5rem !important
}
.menu a:hover,
.menu .nav-link:hover,
.menu .nav-item.active a {
color: #e0af1c !important;
}
.hero {
background: var(--bs-primary) url(/html-component/images/bg/square-line-pattern.svg);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
.hero .hero-title {
font-weight: 400;
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.btn-primary {
--bs-btn-bg: var(--bs-primary-dark);
--bs-btn-border-color: var(--bs-primary-dark-2);
}
.bg-primary {
--bs-primary-rgb: var(--bs-primary-dark-rgb);
}
.navbar-collapse {
text-align: right;
}
.animate-charcter {
background-image: linear-gradient(-225deg,
#e0af1c 0%,
#d2e900 29%,
#ffa339 67%,
#cf7500 100%);
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
color: #fff;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textclip 6s linear infinite;
display: block;
font-size: 80px;
}
@media (max-width: 900px) {
.animate-charcter {
font-size: 70px;
}
}
@media (max-width: 576px) {
.animate-charcter {
font-size: 60px;
}
}
@keyframes textclip {
to {
background-position: 200% center;
}
}
.sr-icon {
top: 8px;
left: 20px;
color: #c9c9c9 !important;
}
.ps-4-5 {
padding: 12px 128px 13px 60px;
}
.sbtn {
top: 1px;
right: -7px;
font-size: 14px !important;
padding: 13px 30px;
}
.learn-more {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
width: 12rem;
height: auto;
}
.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: var(--bs-primary);
border-radius: 1.625rem;
}
.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #ffffff;
font-weight: 500;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
.learn-more:hover .circle {
width: 100%;
}
.learn-more:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
.learn-more:hover .button-text {
color: #fff;
}
Hero component - 13
COPY
<header>
<div class="d-flex py-4 px-3">
<div class="">
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<img src="/html-component/images/logo/webui.svg" class="mt-1" width="70">
</a>
</div>
<div class="ms-auto">
<a class="btn btn-sm btn-outline-secondary rounded-5 px-3" href="#">Sign in</a>
<a class="btn btn-sm btn-secondary rounded-5 px-3" href="#">Sign up</a>
</div>
</div>
<div class="menu bg-primary">
<nav class="navbar navbar-expand-md p-0 m-0">
<div class="container-fluid">
<a class="navbar-toggler ms-sm-auto mx-3 me-md-0 p-2 border-0 text-white" 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 p-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>
</div>
</header>
<section class="hero">
<div class="py-5 h-100vh" style="background: radial-gradient(116.18% 118% at 50% 100%, rgb(97 98 151 / 10%) 0%, rgb(110 10 124 / 5%) 41.83%, rgb(95 101 119 / 10%) 82.52%);">
<div class="container py-5">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-md-6 col-lg-6 text-center text-md-start">
<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">
Ultimate fitness companion!
</h2>
<h1 class="display-5 mt-2 fw-bold">
<a href="#" class="txt-h-effect" data-replace="Unleash"><span class="text-primary">Unleash</span></a>
Your Inner Athlete with FitLife!
</h1>
<p class="lead text-muted pt-2 fw-normal">
FitLife app provides the tools, guidance, and motivation you need to succeed.
</p>
<div class="d-flex align-items-end gap-1 rate fs-6 opacity-75 text-primary">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<div class="d-flex mt-3 w-50">
<div class="me-2">
<a href="#" class="left mb-2">
<img src="/html-component/images/logo/google-play.png" alt="Google play" class="img-fluid me-2 shadow-sm">
</a>
</div>
<div>
<a href="#" class="left mb-2">
<img src="/html-component/images/logo/apple-store.png" alt="Apple store" class="img-fluid shadow-sm">
</a>
</div>
</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/app/ramotion-app-design.webp" class="img-fluid position-absolute hero-art">
<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>
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: #005c9a;
--bs-primary-rgb: 0, 92, 154;
--bs-primary-dark: #013063;
--bs-secondary: #ad1055;
--bs-secondary-dark: #7f0339;
}
body {
font-family: 'Inter', sans-serif;
}
.nav-link {
text-decoration: none;
font-weight: 400;
color: var(--bs-white);
border-radius: 3px;
margin: .3rem .1rem;
padding: .4rem 1.5rem .5rem !important;
line-height: normal;
}
.menu .nav-link:hover,
.menu .nav-link:focus,
.menu .active .nav-link {
color: var(--bs-white) !important;
background: var(--bs-primary-dark) !important;
}
.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);
}
.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;
left: 0;
}
.h-100vh {
height: calc(100vh - 122px);
}
.txt-h-effect {
overflow: hidden;
position: relative;
display: inline-box;
display: -webkit-inline-box;
}
.txt-h-effect::before,
.txt-h-effect::after {
content: '';
position: absolute;
width: 100%;
left: 0;
}
.txt-h-effect::before {
background-color: var(--bs-secondary);
height: 2px;
bottom: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}
.txt-h-effect::after {
content: attr(data-replace);
height: 100%;
top: 0;
transform-origin: 100% 50%;
transform: translate3d(200%, 0, 0);
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
color: var(--bs-secondary);
}
.txt-h-effect:hover::before {
transform-origin: 0% 50%;
transform: scaleX(1);
}
.txt-h-effect:hover::after {
transform: translate3d(0, 0, 0);
}
.txt-h-effect span {
display: inline-block;
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}
.txt-h-effect:hover span {
transform: translate3d(-200%, 0, 0);
}
Illustration collected from https://illustrationkit.com It's free to use.
Hero component - 12
COPY
<header class="menu sticky-top bg-white justify-content-center pt-3 border-bottom text-center">
<a href="/" class="fs-4">
<img src="/html-component/images/logo/webui.svg" width="80">
</a>
<ul class="nav mt-4">
<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>
</header>
<section class="bg-primary hero">
<div class="container py-4">
<div class="row">
<div class="position-relative col-md-7 mx-auto text-center text-white my-3 my-md-5">
<h1 class="display-5 fw-semibold text-center mx-auto pt-5 position-relative zindex-2 text-break z-1">Beautiful
Design & Responsive Components</h1>
<p class="lead mb-5 pt-3 fs-6">Build faster your next idea! HTML, CSS & JavaScript codes are clean, reusable and
easy to use. It's FREE, you should try now..</p>
<a class="btn btn-danger shadow px-4 py-2 rounded-5" href="#">Get early access <i class="bi bi-arrow-right-short"></i></a>
<a class="btn btn-dark shadow px-4 py-2 rounded-5" href="#">Log in <i class="bi bi-arrow-right-short"></i></a>
</div>
</div>
</div>
<div class="text-center mt-n7 position-relative">
<a href="#" class="btn btn-primary btn-circle shadow down-animation" style="z-index: 9; margin-bottom: -30px;">
<i class="bi bi-arrow-down-short fs-3"></i>
</a>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-black: #202020;
--bs-black-rgb: 0, 0, 0;
--bs-purple: #6301eb;
--bs-purple-dark: #5201c4;
--bs-primary: var(--bs-purple);
--bs-secondary: var(--bs-black);
--bs-red: #be0000;
--bs-red-rgb: 190, 0, 0;
--bs-accent: var(--bs-red);
}
body {
font-family: 'Inter', sans-serif;
font-size: .95rem;
}
.hero {
background: var(--bs-primary) url(/html-component/images/art/dotts-2.svg) left top no-repeat;
background-size: 100%;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.nav {
margin-bottom: -1px;
}
.nav-item {
padding: 0 10px;
}
.menu .nav-link {
text-decoration: none;
font-weight: 500;
color: var(--bs-secondary);
padding: 0 10px 5px 10px !important;
margin: 0 0.5rem !important;
}
.menu a:hover,
.menu .nav-link:hover,
.menu .nav-item.active .nav-link {
color: var(--bs-primary) !important;
border-bottom: 2px solid var(--bs-primary) !important;
}
.menu .nav {
display: flex !important;
justify-content: center !important;
}
.btn-primary {
background-color: var(--bs-secondary) !important;
border-color: var(--bs-primary) !important;
}
.btn-circle {
border-radius: 50%;
--bs-btn-padding-x: 1.00rem;
--bs-btn-padding-y: 0.50rem;
padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
}
@-webkit-keyframes downarrow {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(0.4em);
}
}
.down-animation {
-webkit-animation: downarrow 0.6s infinite alternate ease-in-out;
}
.btn-link:hover {
color: #202020 !important;
}
Hero component - 11
COPY
<section class="hero bg-hero">
<header class="menu mb-5">
<nav class="navbar navbar-expand-md p-3 p-md-4">
<div class="container-fluid mt-3 mt-md-2">
<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>
<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-fluid p-0 m-0">
<div class="row g-0 d-lg-flex align-items-center justify-content-center">
<div class="col-lg-6 col-md-6 col-12 text-center">
<div class="p-5">
<!-- content -->
<h1 class="text-white display-3 hero-title mt-2 fw-semibold text-gradient">
Beautifully designed
</h1>
<h4 class="fs-4 text-sub fw-normal mb-3">webui components are free and easy to use</h4>
<p class="mb-5 text-white">
Components are beautiful, responsive and cross-browser compatible. HTML, CSS & JavaScript codes are clean,
reusable and easy to use. It's FREE, try it now..
</p>
<!-- button -->
<div class="text-center">
<a href="#" class="btn btn-dark btn-lg me-md-2 shadow mb-2">Contact Us</a>
<a href="#" class="btn btn-lg btn-dark shadow mb-2">Our Services</a>
</div>
</div>
<div>
<img src="/html-component/images/webui-home.png" alt="" class="img-fluid rounded-5">
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1264ff;
--bs-primary-dark: #004bd6;
--bs-primary-rgb: 18, 100, 255;
--bs-secondary: #b7d0ff;
--bs-secondary-rgb: 28, 26, 40;
}
body {
font-family: 'Inter', sans-serif;
font-size: 1rem;
}
.menu .nav-link {
text-decoration: none;
color: #ffffff;
text-decoration: none;
font-weight: 500;
color: var(--bs-secondary);
border-radius: 4px;
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;
}
.bg-hero {
background: var(--bs-primary-dark) url(/html-component/images/bg/abstract-lines.svg) no-repeat;
background-size: cover;
}
.hero .hero-title {
font-weight: 400;
}
.hero .text-sub {
color: var(--bs-secondary) !important;
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.navbar-collapse {
text-align: right;
}
.text-gradient {
background: linear-gradient(90deg, #ffffff 16%, #4182fa 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Hero component - 10
COPY
<section class="hero">
<header class="menu mb-5">
<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-dark text-decoration-none">
<img src="/html-component/images/logo/webui-wh.svg" width="80">
</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 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-sub">Deena
Nichols, PERSONAL TRAINER</span>
<h1 class="text-white mb-3 display-5 hero-title mt-2 fw-semibold">
Train your body & 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 NOW</a>
<a href="#" class="btn btn-lg btn-success shadow">WHY US</a>
</div>
</div>
<div class="col-md-6 col-12 mb-n2 order-1">
<div>
<img src="/html-component/images/yoga/Green-Yoga-800x480.png" alt="" class="img-fluid rounded-1 mb-3">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
font-size: 1rem;
}
:root {
--bs-primary: #147a00;
--bs-primary-dark: #047700;
--bs-secondary: #000000;
--bs-text-primary: var(--bs-primary);
--bs-text-secondary: var(--bs-secondary);
--bs-red: #d11800;
--bs-red-dark: #a01300;
}
.menu .nav-link {
text-decoration: none;
color: #ffffff;
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-red) !important;
}
.menu .navbar-toggler {
border-width: 0;
}
.hero {
background: var(--bs-primary) url("/html-component/images/bg/pattern-round.png") center;
}
.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-red);
border-color: var(--bs-red-dark);
}
.hero .btn-lg:hover {
background-color: var(--bs-red-dark);
}
.navbar-collapse {
text-align: right;
}
Hero component - 9
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-bw.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="#">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>
</div>
</header>
<section class="hero">
<div class="py-5 h-100vh" style="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%);">
<div class="container py-5">
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<h2 class="fs-6 fw-normal rounded-1 bg-secondary bg-opacity-75 text-white py-1 px-2 d-inline lh-1">
Build website in 5 minutes
</h2>
<h1 class="display-4 mt-2 fw-bold">
<span class="text-primary">webui</span> Develop anything
</h1>
<p class="lead text-muted pt-2">
Build a beautiful, modern website with flexible Bootstrap components built from scratch.
</p>
<div class="mt-4">
<a href="#" class="btn btn-primary btn-lg shadow me-md-1 left mb-2">
Services <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">
Price <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">
<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>
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: #198754;
--bs-primary-rgb: 25, 135, 84;
--bs-primary-dark: #12663c;
--bs-secondary: #292929;
--bs-secondary-dark: #000000;
}
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(90vh - 88px)
}
Hero component - 8
COPY
<section class="bg-primary hero">
<div class="hero overlay">
<video class="hero-banner" preload="auto" autoplay="autoplay" loop="" muted="" playsinline="" id="bannerVideo" width="100%" src="/html-component/images/video/photovideos-3.mp4" type="video/mp4">
<!-- <source src="images/1081470401.mp4" type="video/mp4"> -->
</video>
<header class="menu position-absolute w-100 top-0">
<nav class="navbar navbar-expand-md p-3 p-md-4">
<div class="container-fluid mt-3 mt-md-2">
<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>
<a class="navbar-toggler ms-sm-auto mx-3 me-md-0 p-0 p-sm-2" 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>
</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"> <a class="nav-link px-md-3" href="#">About Us</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Product</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Testimonial</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="position-absolute hero-inner">
<div class="container-fluid">
<div class="row">
<div class="position-relative col-md-6 mx-auto text-center text-white pt-5">
<h1 class="display-1 fw-semibold text-center mx-auto pt-5">Welcome</h1>
<h2 class="display-2">Wanderlust <span class="fw-semibold">Travel! </span></h2>
<p class="mb-5 pt-3 fs-6">Embark on an unforgettable journey with Wanderlust Travel Company, your ultimate companion in exploring the world's most captivating destinations. </p>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<div class="bg-white shadow p-2 rounded-2 w-100 w-md-50">
<div class="row align-items-center">
<div class="col border-end p-4">
<h4 class="fs-6">Personalized Travel Experiences</h4>
<a href="#"><i class="bi bi-arrow-right-circle fs-3"></i></a>
</div>
<div class="col border-end p-4">
<h4 class="fs-6">Personalized Travel Experiences</h4>
<a href="#"><i class="bi bi-arrow-right-circle fs-3"></i></a>
</div>
<div class="col p-4">
<h4 class="fs-6">Personalized Travel Experiences</h4>
<a href="#"><i class="bi bi-arrow-right-circle fs-3"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://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: rgb(0 51 216);
--bs-purple-dark: #5600a7;
--bs-primary: var(--bs-purple);
--bs-secondary: var(--bs-black);
--bs-red: #be0000;
--bs-red-rgb: 190, 0, 0;
--bs-accent: var(--bs-red);
}
body {
font-family: 'Inter', sans-serif;
font-size: .95rem;
}
.hero-65934 {
background: var(--bs-primary);
background-size: 100%;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.menu .nav-link {
text-decoration: none;
color: #ffffff;
font-weight: 500;
}
.menu .nav-link:hover {
color: #b4b4b4;
}
.btn-link:hover {
color: #202020 !important;
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.hero {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
}
.overlay:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgb(0 51 216 / 52%);
/* background: rgba(0, 12, 27, 0.75); */
}
.hero-banner {
width: 100%;
}
.hero-inner {
top: 20%;
position: absolute;
z-index: 99;
width: 100%;
}
@media (max-width: 576px) {
.hero-banner {
width: auto;
}
}
.title-word {
animation: color-animation 4s linear infinite;
}
Hero component - 7
COPY
<section class="hero h-100vh">
<div class="overlay">
<header class="menu">
<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-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</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">
<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-6">
<div class="">
<h1 class="text-white display-5 hero-title mt-2">
Tellus Semper Dui
</h1>
<h4 class="fs-4 text-sub fw-normal mb-3">Morbi viverra dui mi arcu sed</h4>
<p class="mb-3 text-white">
Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse
semper morbi.
</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-6">
<div class="">
<h1 class="text-white display-5 hero-title mt-2">
Adipiscing Suspendisse
</h1>
<h4 class="fs-4 text-sub fw-normal mb-3">Morbi viverra dui mi arcu sed</h4>
<p class="mb-3 text-white">
Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse
semper morbi.
</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-6">
<div class="">
<h1 class="text-white display-5 hero-title mt-2">
Vulputate Commodo
</h1>
<h4 class="fs-4 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>
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(/html-component/images/gym/jonathan-gym.jpg) top center;
background-size: cover;
}
.hero .hero-title {
font-weight: 400;
}
.hero .text-sub {
color: var(--bs-yellow) !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);
}
.h-100vhn {
height: calc(100vh - 88px);
}
.overlay {
height: 100vh;
background: rgba(var(--bs-black-rgb), 0.5);
}
.carousel {
height: 86vh;
}
Hero component - 6
COPY
<section class="hero">
<div class="overlay">
<nav class="navbar navbar-expand-md p-3 p-md-5">
<div class="container-fluid">
<a class="navbar-brand me-5" href="#">
<img src="/html-component/images/logo/webui-wh.svg" width="75" alt="webui">
</a>
<a class="navbar-toggler ms-auto border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="bi bi-list fs-4 text-white"></i>
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu py-3">
<li><a class="dropdown-item" href="#">Service #1</a></li>
<li><a class="dropdown-item" href="#">Service #2</a></li>
<li><a class="dropdown-item" href="#">Service #3</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact Us</a>
</li>
</ul>
<div>
<a href="#" class="nav-link">Log in <i class="bi bi-arrow-right-short"></i></a>
</div>
</div>
</div>
</nav>
<div class="container py-md-5">
<div class="row py-md-5 justify-content-center">
<div class="col-md-8 col-12 py-5">
<div class="pt-3 text-center text-light">
<h1 class="display-4 text-white mb-3 hero-title fw-semibold text-gradient">
Morbi viverra semper adipiscing arcu sed
</h1>
<p class="mb-5 lead">
Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper
adipiscing suspendisse
semper morbi.
</p>
<div class="position-relative w-50 ms-auto me-auto mb-5">
<form>
<i class="bi bi-email position-absolute sr-icon text-dark"></i>
<input type="email" class="form-control rounded-5 ps-4-5 py-3" placeholder="Enter your email">
<input type="submit" class="btn btn-success rounded-5 fs-6 me-2 position-absolute sbtn py-2" value="Subscribe">
</form>
</div>
<a class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">Learn More</span>
</a>
<!-- <a href="#" class="btn btn-danger btn-lg fs-6 me-2 rounded-5">Get Ticket</a>
<a href="#" class="btn btn-warning btn-lg fs-6 rounded-5">View Details</a> -->
</div>
</div>
</div>
<div class="text-center" style="margin-top: -100px;">
<img src="/html-component/images/service/Portfolio.jpg" class="img-fluid rounded-4 shadow" alt="">
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #0047cc;
--bs-primary-rgb: 0, 71, 204;
--bs-secondary: #1c1a28;
--bs-secondary-rgb: 28, 26, 40;
}
body {
font-family: 'Inter', sans-serif;
font-size: 1rem;
}
.hero {
background: var(--bs-primary) url(/html-component/images/bg/background-features.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
.hero .overlay {
height: 100vh;
background: rgba(var(--bs-secondary-rgb), 0.2);
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.nav-item {
padding: 0 8px;
font-weight: 500;
}
.nav-link {
color: #ffffff;
}
.navbar-collapse {
text-align: right;
}
.text-gradient {
background: linear-gradient(90deg, #ffffff 15.94%, #FFEB3B 89.53%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.sr-icon {
top: 7px;
left: 13px;
}
.ps-4-5 {
padding-left: 35px;
}
.sbtn {
top: 7px;
right: 0;
}
.learn-more {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
width: 12rem;
height: auto;
}
.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #282936;
border-radius: 1.625rem;
}
.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #282936;
font-weight: 500;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
.learn-more:hover .circle {
width: 100%;
}
.learn-more:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
.learn-more:hover .button-text {
color: #fff;
}
Hero component - 5
COPY
<header class="menu">
<div class="navbar-light shadow-sm">
<nav class="navbar navbar-expand-md p-3">
<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>
<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</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>
</div>
</header>
<section class="hero">
<div class="container-fluid py-5">
<div class="container">
<div class="row align-items-lg-center py-5">
<div class="col-lg-6 text-center">
<img class="img-fluid mb-2" src="/html-component/images/product/work-station.jpg" alt="Image Description" style="max-height:300px;">
</div>
<div class="col-lg-5">
<div class="mb-4">
<h2 class="display-4 mb-4 fw-bold">Investor presentation</h2>
<p class="fs-6">It's all new, all screen, and all powerful. Completely redesigned and packed
with our
most advanced technology, it will make you rethink what iPad is capable of.</p>
</div>
<div>
<a class="btn btn-primary rounded-pill mb-3 shadow-sm btn-lg" href="#">Services</a>
<a class="btn btn-dark rounded-pill mb-3 shadow-sm btn-lg" href="#">Contact</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content">
<div class="bg-primary text-white py-3">
<div class="container my-5 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">Not just for developers</h2>
<p class="text-white text-opacity-75 lh-sm">You don't need to be an expert developer to harness
the user friendly simplicity and flexibility of Square.</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">Timeless design</h2>
<p class="text-white text-opacity-75 lh-sm">Taking design cues from Swiss design and typography,
Square offers elegant, contemporary page layouts.</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">Detailed documentation</h2>
<p class="text-white text-opacity-75 lh-sm">Extensive documentation covering all components and
tools makes implementation as elegant as the design.</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>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1264ff;
--bs-primary-rgb: 18, 100, 255;
--bs-secondary: #1c1a28;
--bs-secondary-rgb: 28, 26, 40;
}
body {
font-family: 'Inter', sans-serif;
font-size: .90rem;
line-height: normal;
}
.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;
}
Hero component - 4
COPY
<section class="hero">
<div class="container-fluid px-0 position-relative">
<div class="row g-0 justify-content-center">
<div class="col-md-6">
<nav class="navbar navbar-expand-md p-3 p-md-4">
<a href="/">
<img src="/html-component/images/logo/webui-wh.svg" width="75">
</a>
<div class="mt-3 mt-md-2 ms-5">
<a class="border-0 navbar-toggler ms-sm-auto mx-3" 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>
</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>
</div>
<div class="col-md-6 hero-right order-1 order-md-2">
</div>
</div>
<div class="p-4 p-md-5 text-white position-absolute " style="top: 30%;left: 10%;right: 20%;">
<h1 class="display-5 fw-medium">
Interdum etrure dolor reprehenderit
</h1>
<h4 class="fs-4 fw-normal mb-3 text-success">Morbi viverra dui mi arcu sed</h4>
<p class="mb-5">
Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse
semper morbi.
</p>
<a href="#" class="btn btn-success btn-lg me-2 shadow mb-2">Contact</a>
<a href="#" class="btn btn-lg btn-success shadow mb-2">Services</a>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #129c00;
--bs-primary-rgb: 18, 156, 0;
--bs-secondary: #000000;
--bs-secondary-rgb: 0, 0, 0;
}
body {
font-family: 'Inter', sans-serif;
font-size: 1rem;
}
.hero {
background-color: var(--bs-secondary);
}
.hero-right {
background: var(--bs-primary) url(/html-component/images/nature/pat-whelen.jpg) right top no-repeat;
background-size: cover;
height: 100vh;
}
.nav-link {
text-decoration: none;
font-weight: 500;
border-radius: 40px;
margin: 0 .1rem;
padding: .5rem 1.5rem !important;
color: var(--bs-white);
}
.nav-link:hover,
.menu .active .nav-link {
color: var(--bs-primary);
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.overlay {
height: 100vh;
background: rgba(var(--bs-secondary-rgb), 1);
}
Hero component - 3
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="#">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>
</div>
</header>
<section class="hero">
<div class="container-fluid p-0 m-0">
<div class="row g-0 d-lg-flex align-items-center justify-content-center">
<div class="col-md-8 col-12 text-center">
<div class="p-5" style="margin-bottom: 230px;">
<!-- content -->
<h1 class="text-white display-3 hero-title mt-4 fw-semibold text-gradient">
Beautifully designed
</h1>
<h4 class="fs-4 text-sub fw-normal mb-3">webui components are free and easy to use</h4>
<p class="mb-5">
Components are beautiful, responsive and cross-browser compatible. HTML, CSS & JavaScript
codes are clean,
reusable and easy to use. It's FREE, try it now..
</p>
<div class="position-relative w-50 ms-auto me-auto mb-5">
<form>
<i class="bi bi-envelope position-absolute fs-3 sr-icon text-dark"></i>
<input type="email" class="form-control rounded-5 ps-4-5 py-3" placeholder="Enter your email">
<input type="submit" class="btn btn-dark rounded-5 fs-6 me-2 position-absolute sbtn py-2 px-3" value="Subscribe">
</form>
</div>
<a class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">Learn More</span>
</a>
</div>
</div>
</div>
</div>
<div class="row justify-content-center position-absolute w-100 bg-primary">
<div class="col-md-8">
<div class="row g-2 justify-content-center" style="margin-top: -200px;">
<div class="col-md-3">
<a href="#" class="card-metro">
<img src="/html-component/images/portrait/portrait-011.jpg" class="img-fluid" alt="card image">
</a>
<a href="#" class="card-metro">
<img src="/html-component/images/portrait/portrait-022s.jpg" class="img-fluid" alt="card image">
</a>
</div>
<div class="col-md-3">
<a href="#" class="card-metro">
<img src="/html-component/images/portrait/portrait-044s.jpg" class="img-fluid" alt="card image">
</a>
<a href="#" class="card-metro">
<img src="/html-component/images/portrait/portrait-033.jpg" class="img-fluid" alt="card image">
</a>
</div>
<div class="col-md-3">
<a href="#" class="card-metro">
<img src="/html-component/images/portrait/portrait-011.jpg" class="img-fluid" alt="card image">
</a>
<a href="#" class="card-metro">
<img src="/html-component/images/portrait/portrait-022s.jpg" class="img-fluid" alt="card image">
</a>
</div>
<div class="col-md-3">
<a href="#" class="card-metro">
<img src="/html-component/images/portrait/portrait-044s.jpg" class="img-fluid" alt="card image">
</a>
<a href="#" class="card-metro">
<img src="/html-component/images/portrait/portrait-033.jpg" class="img-fluid" alt="card image">
</a>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1264ff;
--bs-primary-dark: #004bd6;
--bs-primary-rgb: 18, 100, 255;
--bs-secondary: #000000;
}
body {
font-family: 'Inter', sans-serif;
font-size: 1rem;
}
.nav-link {
text-decoration: none;
font-weight: 500;
color: var(--bs-secondary);
border-radius: 25px;
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 .hero-title {
font-weight: 400;
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.text-gradient {
background: linear-gradient(90deg, #1264ff 16%, #7912ff 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.card-metro:hover img {
opacity: 0.9;
}
.card-metro img {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-bottom: 10px;
border-radius: 10px;
}
.sr-icon {
top: 8px;
left: 20px;
color: #999 !important;
}
.ps-4-5 {
padding-left: 60px;
}
.sbtn {
top: 7px;
right: 0;
}
.learn-more {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
width: 12rem;
height: auto;
}
.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #282936;
border-radius: 1.625rem;
}
.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #333;
font-weight: 500;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
.learn-more:hover .circle {
width: 100%;
}
.learn-more:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
.learn-more:hover .button-text {
color: #fff;
}
Hero component - 2
COPY
<section class="hero h-100vh">
<div class="overlay">
<header class="menu-65406">
<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-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"> <a class="nav-link px-md-3" href="#">About Us</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Product</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Testimonial</a></li>
<li class="nav-item"> <a class="nav-link px-md-3" href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade pt-5" 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-center">
<div class="col-md-8 text-center">
<div class="p-2 p-md-5">
<!-- content -->
<h1 class="text-white display-3 hero-title mt-2">
Tellus Semper
</h1>
<h4 class="fs-4 text-sub fw-normal mb-3">Morbi viverra dui mi arcu sed</h4>
<p class="mb-5 text-white">
Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse
semper morbi.
</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-center">
<div class="col-md-8 text-center">
<div class="p-2 p-md-5">
<!-- content -->
<h1 class="text-white display-3 hero-title mt-2">
Adipiscing
</h1>
<h4 class="fs-4 text-sub fw-normal mb-3">Morbi viverra dui mi arcu sed</h4>
<p class="mb-5 text-white">
Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse
semper morbi.
</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-center">
<div class="col-md-8 text-center">
<div class="p-2 p-md-5">
<!-- content -->
<h1 class="text-white display-3 hero-title mt-2">
Vulputate
</h1>
<h4 class="fs-4 text-sub fw-normal mb-3">Morbi viverra dui mi arcu sed</h4>
<p class="mb-5 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>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1264ff;
--bs-primary-rgb: 18, 100, 255;
--bs-secondary: #1c1a28;
--bs-secondary-rgb: 28, 26, 40;
--bs-yellow: #e9fa00;
--bs-yellow-dark: #81b800;
--bs-yellow-dark2: #6a9700;
}
body {
font-family: 'Inter', sans-serif;
font-size: 1rem;
}
.menu-65406 a,
.menu-65406 .nav-link {
text-decoration: none;
color: #ffffff;
}
.menu-65406 a:hover,
.menu-65406 .nav-link:hover {
color: var(--bs-yellow) !important;
}
.hero {
background: url(/html-component/images/resort/lumbardh-plluzhina.webp) top center;
background-size: cover;
}
.hero .hero-title {
font-weight: 400;
}
.hero .text-sub {
color: var(--bs-yellow) !important;
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
background-color: var(--bs-yellow-dark);
border-color: var(--bs-yellow-dark2);
}
.hero .btn-lg:hover {
background-color: var(--bs-yellow-dark2);
}
.h-100vh {
height: 100vh;
}
.bg-blur {
background: transparent;
-webkit-backdrop-filter: blur(9.84375px);
backdrop-filter: blur(9.84375px);
webkit-backdrop-filter: blur(5px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.overlay {
height: 100vh;
background: rgba(var(--bs-primary-rgb), 0.7);
}
.carousel {
height: 86vh;
}
Hero component - 1
COPY
<section class="hero">
<div class="container-fluid px-0">
<div class="row g-0 justify-content-center align-items-center">
<div class="col-md-6 hero-right order-1">
<nav class="navbar navbar-expand-md p-3 p-md-4">
<a href="/">
<img src="/html-component/images/logo/webui-wh.svg" width="75">
</a>
<div class="mt-3 mt-md-2 ms-5">
<a class="border-0 navbar-toggler ms-sm-auto mx-3" 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>
</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>
</div>
<div class="col-md-6 text-white order-2">
<div class="p-4 p-md-5">
<h1 class="display-5 hero-title fw-medium">
Interdum etrure dolor reprehenderit
</h1>
<h4 class="fs-4 fw-normal mb-3 text-success">Morbi viverra dui mi arcu sed</h4>
<p class="mb-5">
Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse
semper morbi.
</p>
<a href="#" class="btn btn-success btn-lg me-2 shadow mb-2">Contact</a>
<a href="#" class="btn btn-lg btn-success shadow mb-2">Services</a>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #129c00;
--bs-primary-rgb: 18, 156, 0;
--bs-secondary: #222222;
--bs-secondary-rgb: 34, 34, 34;
}
body {
font-family: 'Inter', sans-serif;
font-size: 1rem;
}
.hero {
background-color: var(--bs-secondary);
}
.hero-right {
background: var(--bs-primary) url(/html-component/images/nature/road-in-jangol.jpg) right top no-repeat;
background-size: cover;
height: 100vh;
}
.nav-link {
text-decoration: none;
font-weight: 500;
border-radius: 40px;
margin: 0 .1rem;
padding: .5rem 1.5rem !important;
color: var(--bs-white);
}
.nav-link:hover,
.menu .active .nav-link {
color: var(--bs-primary);
}
.hero .btn-lg {
font-size: 0.9375rem;
padding: 12px 30px;
text-align: center;
font-weight: 500;
border-radius: 4px;
}
.overlay {
height: 100vh;
background: rgba(var(--bs-secondary-rgb), 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
Installation
- Choose one which match most with your idea
- Copy HTML, CSS and past into your page
- Run saved HTML file into web browser