Blocks - Navbar
Copy any custom block snippet below and paste it on your page to build your website easily.
Note that since we show multiple navbar examples on docs, offcanvas navigation, offcanvas info and modals are disabled on the examples, but their codes are intact and will work properly on the template.
Disable dropdown hover by adding
.hover-noneclass to.navbareither on HTML or GulpclassList.Disable carets on dropdown parents by adding
.caret-noneclass to.navbareither on HTML or GulpclassList.Usethis guideto add a link to dropdown parent.
<section id="snippet-1" className="wrapper !bg-[#ffffff] ">
<div className="container pt-14">
<h2 className="!mb-3 !leading-[1.35]">
Center Nav - Transparent Background
</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">
Check out some of the live examples:
<Link
href={`/demo1`}
className="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['e906'] after:text-[0.7rem] after:font-Custom"
target="_blank"
>
Demo 1
</Link>
or
<Link
href={`/demo4`}
className="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['e906'] after:text-[0.7rem] after:font-Custom"
target="_blank"
>
Demo 4
</Link>
.
</p>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header className="relative wrapper">
<nav className="navbar navbar-expand-lg center-nav transparent navbar-light">
<div className="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
<div className="navbar-brand w-full">
<Link href={`/index`}>
<img
srcSet="/assets/img/logo-dark@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo-dark.png"
/>
</Link>
</div>
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header xl:!hidden lg:!hidden">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
<div className="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
{/* /.offcanvas-footer */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.navbar-collapse */}
<div className="navbar-other w-full !flex !ml-auto">
<ul className="navbar-nav !flex-row !items-center !ml-auto">
<li className="nav-item dropdown language-select uppercase">
<a
className="nav-link dropdown-item dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
En
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
En
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
De
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Es
</a>
</li>
</ul>
</li>
<li className="nav-item hidden xl:block lg:block md:block">
<Link
href={`/contact`}
className="btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]"
>
Contact
</Link>
</li>
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
</header>
{/* /header */}
</div>
{/* /.container */}
</section>Center Nav - Transparent Background - Light Text
<section id="snippet-2" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-3 !leading-[1.35]">
Center Nav - Transparent Background - Light Text
</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">
Check out some of the live examples:
<Link
href={`/demo3`}
className="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['e906'] after:text-[0.7rem] after:font-Custom"
target="_blank"
>
Demo 3
</Link>
or
<Link
href={`/demo15`}
className="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['e906'] after:text-[0.7rem] after:font-Custom"
target="_blank"
>
Demo 15
</Link>
.
</p>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header
className="relative wrapper image-wrapper bg-image pb-1 bg-scroll z-[2] bg-no-repeat bg-[center_center] bg-cover"
style={{ backgroundImage: "url(/assets/img/photos/bg3.jpg)" }}
>
<nav className="navbar navbar-expand-lg center-nav transparent navbar-dark">
<div className="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
<div className="navbar-brand w-full">
<Link href={`/index`}>
<img
className="logo-dark"
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
<img
className="logo-light"
srcSet="/assets/img/logo-light@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo-light.png"
/>
</Link>
</div>
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header xl:!hidden lg:!hidden">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
<div className="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
{/* /.offcanvas-footer */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.navbar-collapse */}
<div className="navbar-other w-full !flex !ml-auto">
<ul className="navbar-nav !flex-row !items-center !ml-auto">
<li className="nav-item dropdown language-select uppercase">
<a
className="nav-link dropdown-item dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
En
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
En
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
De
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Es
</a>
</li>
</ul>
</li>
<li className="nav-item hidden xl:block lg:block md:block">
<Link
href={`/contact`}
className="btn btn-sm btn-white !rounded-[50rem]"
>
Contact
</Link>
</li>
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
</header>
{/* /header */}
</div>
{/* /.container */}
{/* /.container */}
</section>Center Nav - Light Background
Check out some of the live examples:ShoporProduct Page.
<section id="snippet-3" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-3 !leading-[1.35]">
Center Nav - Light Background
</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">
Check out some of the live examples:
<Link
href={`/shop`}
className="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['e906'] after:text-[0.7rem] after:font-Custom"
target="_blank"
>
Shop
</Link>
or
<Link
href={`/shop-product`}
className="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['e906'] after:text-[0.7rem] after:font-Custom"
target="_blank"
>
Product Page
</Link>
.
</p>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header className="relative wrapper !bg-[#edf2fc] py-5">
<nav className="navbar navbar-expand-lg center-nav navbar-light !bg-[#ffffff]">
<div className="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
<div className="navbar-brand w-full">
<Link href={`/index`}>
<img
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
</Link>
</div>
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header xl:!hidden lg:!hidden">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
<div className="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
{/* /.offcanvas-footer */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.navbar-collapse */}
<div className="navbar-other w-full !flex !ml-auto">
<ul className="navbar-nav !flex-row !items-center !ml-auto">
<li className="nav-item dropdown language-select uppercase">
<a
className="nav-link dropdown-item dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
En
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
En
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
De
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Es
</a>
</li>
</ul>
</li>
<li className="nav-item hidden xl:block lg:block md:block">
<Link
href={`/contact`}
className="btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]"
>
Contact
</Link>
</li>
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
</header>
{/* /header */}
</div>
{/* /.container */}
{/* /.container */}
</section>Center Nav - Dark Background
<section id="snippet-4" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-0">Center Nav - Dark Background</h2>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header className="relative wrapper !bg-[#edf2fc]">
<nav className="navbar navbar-expand-lg center-nav navbar-dark navbar- bg-[#21262c] opacity-100">
<div className="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
<div className="navbar-brand w-full">
<Link href={`/index`}>
<img
srcSet="/assets/img/logo-light@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo-light.png"
/>
</Link>
</div>
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header xl:!hidden lg:!hidden">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
<div className="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
{/* /.offcanvas-footer */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.navbar-collapse */}
<div className="navbar-other w-full !flex !ml-auto">
<ul className="navbar-nav !flex-row !items-center !ml-auto">
<li className="nav-item dropdown language-select uppercase">
<a
className="nav-link dropdown-item dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
En
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
En
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
De
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Es
</a>
</li>
</ul>
</li>
<li className="nav-item hidden xl:block lg:block md:block">
<Link
href={`/contact`}
className="btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]"
>
Contact
</Link>
</li>
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
</header>
{/* /header */}
</div>
{/* /.container */}
</section>Center Nav - Fancy
Check out some of the live examples:Demo 7.
<section id="snippet-5" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-3 !leading-[1.35]">Center Nav - Fancy</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">
Check out some of the live examples:
<Link
href={`/demo7`}
className="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['e906'] after:text-[0.7rem] after:font-Custom"
target="_blank"
>
Demo 7
</Link>
.
</p>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header className="relative wrapper !bg-[#edf2fc] pb-10">
<nav className="navbar navbar-expand-lg fancy navbar-light !bg-[#ffffff] caret-none xl:[background:0_0!important] lg:[background:0_0!important]">
<div className="container">
<div className="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 flex flex-row !flex-nowrap w-full justify-between items-center">
<div className="navbar-brand w-full">
<Link href={`/index`}>
<img
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
</Link>
</div>
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header xl:!hidden lg:!hidden">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
<div className="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
{/* /.offcanvas-footer */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.navbar-collapse */}
<div className="navbar-other w-full !flex !ml-auto">
<ul className="navbar-nav !flex-row !items-center !ml-auto">
<li className="nav-item dropdown language-select uppercase">
<a
className="nav-link dropdown-item dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
En
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
En
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
De
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Es
</a>
</li>
</ul>
</li>
<li className="nav-item hidden xl:block lg:block md:block">
<Link
href={`/contact`}
className="btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]"
>
Contact
</Link>
</li>
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.navbar-collapse-wrapper */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
</header>
{/* /header */}
</div>
{/* /.container */}
</section><section id="snippet-6" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-3 !leading-[1.35]">
Classic - Transparent Background
</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">
Check out some of the live examples:
<Link
href={`/demo6`}
className="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['e906'] after:text-[0.7rem] after:font-Custom"
target="_blank"
>
Demo 6
</Link>
or
<Link
href={`/demo8`}
className="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['e906'] after:text-[0.7rem] after:font-Custom"
target="_blank"
>
Demo 8
</Link>
.
</p>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header className="relative wrapper">
<nav className="navbar navbar-expand-lg classic transparent navbar-light">
<div className="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
<div className="navbar-brand w-full">
<Link href={`/index`}>
<img
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
</Link>
</div>
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header xl:!hidden lg:!hidden">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
<div className="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
{/* /.offcanvas-footer */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.navbar-collapse */}
<div className="navbar-other lg:!ml-4 xl:!ml-4">
<ul className="navbar-nav !flex-row !items-center !ml-auto">
<li className="nav-item">
<a
className="nav-link"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-info"
>
<i className="uil uil-info-circle before:content-['eb99'] !text-[1.1rem]" />
</a>
</li>
<li className="nav-item hidden xl:block lg:block md:block">
<a
href="#"
className="btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]"
data-bs-toggle="modal"
data-bs-target="trueLink"
>
Sign In
</a>
</li>
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
<div
className="modal fade !m-0 !p-0"
id="modal-signin"
tabIndex={-1}
>
<div className="modal-dialog modal-dialog-centered modal-sm">
<div className="modal-content !text-center">
<div className="relative flex-auto pt-[2.5rem] pr-[2.5rem] pb-[2.5rem] !pl-[2.5rem]">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
<h2 className="!mb-3 text-left">Welcome Back</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-6 text-left">
Fill your email and password to sign in.
</p>
<form className="text-left !mb-3">
<div className="form-floating relative !mb-4">
<input
type="email"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Email"
id="loginEmail1"
/>
<label htmlFor="loginEmail1">Email</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Password"
id="loginPassword"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPassword">Password</label>
</div>
<a className="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2">
Sign In
</a>
</form>
{/* /form */}
<p className="!mb-1">
<a href="#" className="hover">
Forgot Password?
</a>
</p>
<p className="!mb-0">
Don't have an account?
<a
href="#"
data-bs-target="#modal-signup"
data-bs-toggle="modal"
data-bs-dismiss="modal"
className="hover"
>
Sign up
</a>
</p>
<div className="divider-icon !my-4">or</div>
<nav className="nav social justify-center !text-center">
<a
href="#"
className="btn btn-circle btn-sm btn-google !text-white !bg-[#e44134] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-google before:content-['eb50']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-facebook-f !text-white !bg-[#4470cf] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-facebook-f before:content-['eae2']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-twitter !text-white !bg-[#5daed5] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-twitter before:content-['ed59']" />
</a>
</nav>
{/*/.social */}
</div>
{/*/.modal-content */}
</div>
{/*/.modal-body */}
</div>
{/*/.modal-dialog */}
</div>
{/*/.modal */}
<div
className="modal fade !m-0 !p-0"
id="modal-signup"
tabIndex={-1}
>
<div className="modal-dialog modal-dialog-centered modal-sm">
<div className="modal-content !text-center">
<div className="relative flex-auto pt-[2.5rem] pr-[2.5rem] pb-[2.5rem] !pl-[2.5rem]">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
<h2 className="!mb-3 text-left">Sign up to Sandbox</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-6 text-left">
Registration takes less than a minute.
</p>
<form className="text-left !mb-3">
<div className="form-floating relative !mb-4">
<input
type="text"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Name"
id="loginName"
/>
<label htmlFor="loginName">Name</label>
</div>
<div className="form-floating relative !mb-4">
<input
type="email"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Email"
id="loginEmail2"
/>
<label htmlFor="loginEmail2">Email</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Password"
id="loginPassword2"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPassword2">Password</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Confirm Password"
id="loginPasswordConfirm"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPasswordConfirm">
Confirm Password
</label>
</div>
<a className="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2">
Sign Up
</a>
</form>
{/* /form */}
<p className="!mb-0">
Already have an account?
<a
href="#"
data-bs-target="#modal-signin"
data-bs-toggle="modal"
data-bs-dismiss="modal"
className="hover"
>
Sign in
</a>
</p>
<div className="divider-icon !my-4">or</div>
<nav className="nav social justify-center !text-center">
<a
href="#"
className="btn btn-circle btn-sm btn-google !text-white !bg-[#e44134] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-google before:content-['eb50']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-facebook-f !text-white !bg-[#4470cf] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-facebook-f before:content-['eae2']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-twitter !text-white !bg-[#5daed5] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-twitter before:content-['ed59']" />
</a>
</nav>
{/*/.social */}
</div>
{/*/.modal-content */}
</div>
{/*/.modal-body */}
</div>
{/*/.modal-dialog */}
</div>
{/*/.modal */}
<div
className="offcanvas offcanvas-end !text-[#cacaca]"
id="offcanvas-info"
data-bs-scroll="true"
>
<div className="offcanvas-header">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body pb-6">
<div className="widget !mb-8">
<p>
Sandbox is a multipurpose HTML5 template with various
layouts which will be a great solution for your business.
</p>
</div>
{/* /.widget */}
<div className="widget !mb-8">
<h4 className="widget-title !text-white !mb-3">
Contact Info
</h4>
<address className="not-italic !leading-[inherit] !mb-4">
Moonshine St. 14/05 <br />
Light City, London
</address>
<a
className="!text-[#cacaca] hover:!text-[#3f78e0]"
href="mailto:first.last@email.com"
>
info@email.com
</a>
<br />
00 (123) 456 78 90
</div>
{/* /.widget */}
<div className="widget !mb-8">
<h4 className="widget-title !text-white !mb-3">
Learn More
</h4>
<ul className="!pl-0 list-none">
<li>
<a href="#">Our Story</a>
</li>
<li>
<a href="#">Terms of Use</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
{/* /.widget */}
<div className="widget">
<h4 className="widget-title !text-white !mb-3">
Follow Us
</h4>
<nav className="nav social social-white">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
{/* /.widget */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.offcanvas */}
</header>
{/* /header */}
</div>
{/* /.container */}
</section>Classic - Transparent Background - Light Text
Check out some of the live examples:Demo 11.
Sandbox
Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
Follow Us
<section id="snippet-7" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-3 !leading-[1.35]">
Classic - Transparent Background - Light Text
</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">
Check out some of the live examples:
<Link
href={`/demo11`}
className="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['e906'] after:text-[0.7rem] after:font-Custom"
target="_blank"
>
Demo 11
</Link>
.
</p>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header
className="relative wrapper image-wrapper bg-image pb-1 bg-scroll z-[2] bg-no-repeat bg-[center_center] bg-cover"
style={{ backgroundImage: "url(/assets/img/photos/bg3.jpg)" }}
>
<nav className="navbar navbar-expand-lg classic transparent navbar-dark">
<div className="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
<div className="navbar-brand w-full">
<Link href={`/index`}>
<img
className="logo-dark"
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
<img
className="logo-light"
srcSet="/assets/img/logo-light@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo-light.png"
/>
</Link>
</div>
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header xl:!hidden lg:!hidden">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
<div className="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
{/* /.offcanvas-footer */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.navbar-collapse */}
<div className="navbar-other lg:!ml-4 xl:!ml-4">
<ul className="navbar-nav !flex-row !items-center !ml-auto">
<li className="nav-item">
<a
className="nav-link"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-info2"
>
<i className="uil uil-info-circle before:content-['eb99'] !text-[1.1rem]" />
</a>
</li>
<li className="nav-item hidden xl:block lg:block md:block">
<a
href="#"
className="btn btn-sm btn-white !rounded-[50rem]"
data-bs-toggle="modal"
data-bs-target="trueLink"
>
Sign In
</a>
</li>
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
<div
className="modal fade !m-0 !p-0"
id="modal-signin2"
tabIndex={-1}
>
<div className="modal-dialog modal-dialog-centered modal-sm">
<div className="modal-content !text-center">
<div className="relative flex-auto pt-[2.5rem] pr-[2.5rem] pb-[2.5rem] !pl-[2.5rem]">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
<h2 className="!mb-3 text-left">Welcome Back</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-6 text-left">
Fill your email and password to sign in.
</p>
<form className="text-left !mb-3">
<div className="form-floating relative !mb-4">
<input
type="email"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Email"
id="loginEmail3"
/>
<label htmlFor="loginEmail3">Email</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Password"
id="loginPassword3"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPassword3">Password</label>
</div>
<a className="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2">
Sign In
</a>
</form>
{/* /form */}
<p className="!mb-1">
<a href="#" className="hover">
Forgot Password?
</a>
</p>
<p className="!mb-0">
Don't have an account?
<a
href="#"
data-bs-target="#modal-signup2"
data-bs-toggle="modal"
data-bs-dismiss="modal"
className="hover"
>
Sign up
</a>
</p>
<div className="divider-icon !my-4">or</div>
<nav className="nav social justify-center !text-center">
<a
href="#"
className="btn btn-circle btn-sm btn-google !text-white !bg-[#e44134] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-google before:content-['eb50']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-facebook-f !text-white !bg-[#4470cf] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-facebook-f before:content-['eae2']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-twitter !text-white !bg-[#5daed5] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-twitter before:content-['ed59']" />
</a>
</nav>
{/*/.social */}
</div>
{/*/.modal-content */}
</div>
{/*/.modal-body */}
</div>
{/*/.modal-dialog */}
</div>
{/*/.modal */}
<div
className="modal fade !m-0 !p-0"
id="modal-signup2"
tabIndex={-1}
>
<div className="modal-dialog modal-dialog-centered modal-sm">
<div className="modal-content !text-center">
<div className="relative flex-auto pt-[2.5rem] pr-[2.5rem] pb-[2.5rem] !pl-[2.5rem]">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
<h2 className="!mb-3 text-left">Sign up to Sandbox</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-6 text-left">
Registration takes less than a minute.
</p>
<form className="text-left !mb-3">
<div className="form-floating relative !mb-4">
<input
type="text"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Name"
id="loginName2"
/>
<label htmlFor="loginName2">Name</label>
</div>
<div className="form-floating relative !mb-4">
<input
type="email"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Email"
id="loginEmail4"
/>
<label htmlFor="loginEmail4">Email</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Password"
id="loginPassword4"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPassword4">Password</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Confirm Password"
id="loginPasswordConfirm2"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPasswordConfirm2">
Confirm Password
</label>
</div>
<a className="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2">
Sign Up
</a>
</form>
{/* /form */}
<p className="!mb-0">
Already have an account?
<a
href="#"
data-bs-target="#modal-signin2"
data-bs-toggle="modal"
data-bs-dismiss="modal"
className="hover"
>
Sign in
</a>
</p>
<div className="divider-icon !my-4">or</div>
<nav className="nav social justify-center !text-center">
<a
href="#"
className="btn btn-circle btn-sm btn-google !text-white !bg-[#e44134] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-google before:content-['eb50']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-facebook-f !text-white !bg-[#4470cf] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-facebook-f before:content-['eae2']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-twitter !text-white !bg-[#5daed5] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-twitter before:content-['ed59']" />
</a>
</nav>
{/*/.social */}
</div>
{/*/.modal-content */}
</div>
{/*/.modal-body */}
</div>
{/*/.modal-dialog */}
</div>
{/*/.modal */}
<div
className="offcanvas offcanvas-end !text-[#cacaca]"
id="offcanvas-info2"
data-bs-scroll="true"
>
<div className="offcanvas-header">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body pb-6">
<div className="widget !mb-8">
<p>
Sandbox is a multipurpose HTML5 template with various
layouts which will be a great solution for your business.
</p>
</div>
{/* /.widget */}
<div className="widget !mb-8">
<h4 className="widget-title !text-white !mb-3">
Contact Info
</h4>
<address className="not-italic !leading-[inherit] !mb-4">
Moonshine St. 14/05 <br />
Light City, London
</address>
<a
className="!text-[#cacaca] hover:!text-[#3f78e0]"
href="mailto:first.last@email.com"
>
info@email.com
</a>
<br />
00 (123) 456 78 90
</div>
{/* /.widget */}
<div className="widget !mb-8">
<h4 className="widget-title !text-white !mb-3">
Learn More
</h4>
<ul className="!pl-0 list-none">
<li>
<a href="#">Our Story</a>
</li>
<li>
<a href="#">Terms of Use</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
{/* /.widget */}
<div className="widget">
<h4 className="widget-title !text-white !mb-3">
Follow Us
</h4>
<nav className="nav social social-white">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
{/* /.widget */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.offcanvas */}
</header>
{/* /header */}
</div>
</section>Classic - Light Background
Sandbox
Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
Follow Us
<section id="snippet-8" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-0">Classic - Light Background</h2>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header className="relative wrapper !bg-[#edf2fc] py-5">
<nav className="navbar navbar-expand-lg classic navbar-light !bg-[#ffffff]">
<div className="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
<div className="navbar-brand w-full">
<Link href={`/index`}>
<img
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
</Link>
</div>
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header xl:!hidden lg:!hidden">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
<div className="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
{/* /.offcanvas-footer */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.navbar-collapse */}
<div className="navbar-other lg:!ml-4 xl:!ml-4">
<ul className="navbar-nav !flex-row !items-center !ml-auto">
<li className="nav-item">
<a
className="nav-link"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-info3"
>
<i className="uil uil-info-circle before:content-['eb99'] !text-[1.1rem]" />
</a>
</li>
<li className="nav-item hidden xl:block lg:block md:block">
<a
href="#"
className="btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]"
data-bs-toggle="modal"
data-bs-target="trueLink"
>
Sign In
</a>
</li>
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
<div
className="modal fade !m-0 !p-0"
id="modal-signin3"
tabIndex={-1}
>
<div className="modal-dialog modal-dialog-centered modal-sm">
<div className="modal-content !text-center">
<div className="relative flex-auto pt-[2.5rem] pr-[2.5rem] pb-[2.5rem] !pl-[2.5rem]">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
<h2 className="!mb-3 text-left">Welcome Back</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-6 text-left">
Fill your email and password to sign in.
</p>
<form className="text-left !mb-3">
<div className="form-floating relative !mb-4">
<input
type="email"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Email"
id="loginEmail5"
/>
<label htmlFor="loginEmail5">Email</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Password"
id="loginPassword5"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPassword5">Password</label>
</div>
<a className="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2">
Sign In
</a>
</form>
{/* /form */}
<p className="!mb-1">
<a href="#" className="hover">
Forgot Password?
</a>
</p>
<p className="!mb-0">
Don't have an account?
<a
href="#"
data-bs-target="#modal-signup3"
data-bs-toggle="modal"
data-bs-dismiss="modal"
className="hover"
>
Sign up
</a>
</p>
<div className="divider-icon !my-4">or</div>
<nav className="nav social justify-center !text-center">
<a
href="#"
className="btn btn-circle btn-sm btn-google !text-white !bg-[#e44134] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-google before:content-['eb50']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-facebook-f !text-white !bg-[#4470cf] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-facebook-f before:content-['eae2']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-twitter !text-white !bg-[#5daed5] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-twitter before:content-['ed59']" />
</a>
</nav>
{/*/.social */}
</div>
{/*/.modal-content */}
</div>
{/*/.modal-body */}
</div>
{/*/.modal-dialog */}
</div>
{/*/.modal */}
<div
className="modal fade !m-0 !p-0"
id="modal-signup3"
tabIndex={-1}
>
<div className="modal-dialog modal-dialog-centered modal-sm">
<div className="modal-content !text-center">
<div className="relative flex-auto pt-[2.5rem] pr-[2.5rem] pb-[2.5rem] !pl-[2.5rem]">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
<h2 className="!mb-3 text-left">Sign up to Sandbox</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-6 text-left">
Registration takes less than a minute.
</p>
<form className="text-left !mb-3">
<div className="form-floating relative !mb-4">
<input
type="text"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Name"
id="loginName3"
/>
<label htmlFor="loginName3">Name</label>
</div>
<div className="form-floating relative !mb-4">
<input
type="email"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Email"
id="loginEmail6"
/>
<label htmlFor="loginEmail6">Email</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Password"
id="loginPassword6"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPassword6">Password</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Confirm Password"
id="loginPasswordConfirm3"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPasswordConfirm3">
Confirm Password
</label>
</div>
<a className="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2">
Sign Up
</a>
</form>
{/* /form */}
<p className="!mb-0">
Already have an account?
<a
href="#"
data-bs-target="#modal-signin3"
data-bs-toggle="modal"
data-bs-dismiss="modal"
className="hover"
>
Sign in
</a>
</p>
<div className="divider-icon !my-4">or</div>
<nav className="nav social justify-center !text-center">
<a
href="#"
className="btn btn-circle btn-sm btn-google !text-white !bg-[#e44134] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-google before:content-['eb50']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-facebook-f !text-white !bg-[#4470cf] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-facebook-f before:content-['eae2']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-twitter !text-white !bg-[#5daed5] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-twitter before:content-['ed59']" />
</a>
</nav>
{/*/.social */}
</div>
{/*/.modal-content */}
</div>
{/*/.modal-body */}
</div>
{/*/.modal-dialog */}
</div>
{/*/.modal */}
<div
className="offcanvas offcanvas-end !text-[#cacaca]"
id="offcanvas-info3"
data-bs-scroll="true"
>
<div className="offcanvas-header">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body pb-6">
<div className="widget !mb-8">
<p>
Sandbox is a multipurpose HTML5 template with various
layouts which will be a great solution for your business.
</p>
</div>
{/* /.widget */}
<div className="widget !mb-8">
<h4 className="widget-title !text-white !mb-3">
Contact Info
</h4>
<address className="not-italic !leading-[inherit] !mb-4">
Moonshine St. 14/05 <br />
Light City, London
</address>
<a
className="!text-[#cacaca] hover:!text-[#3f78e0]"
href="mailto:first.last@email.com"
>
info@email.com
</a>
<br />
00 (123) 456 78 90
</div>
{/* /.widget */}
<div className="widget !mb-8">
<h4 className="widget-title !text-white !mb-3">
Learn More
</h4>
<ul className="!pl-0 list-none">
<li>
<a href="#">Our Story</a>
</li>
<li>
<a href="#">Terms of Use</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
{/* /.widget */}
<div className="widget">
<h4 className="widget-title !text-white !mb-3">
Follow Us
</h4>
<nav className="nav social social-white">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
{/* /.widget */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.offcanvas */}
</header>
</div>
</section>Classic - Dark Background
Sandbox
Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
Follow Us
<section id="snippet-9" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-0">Classic - Dark Background</h2>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header className="relative wrapper">
<nav className="navbar navbar-expand-lg classic navbar-dark navbar- bg-[#21262c] opacity-100">
<div className="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
<div className="navbar-brand w-full">
<Link href={`/index`}>
<img
srcSet="/assets/img/logo-light@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo-light.png"
/>
</Link>
</div>
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header xl:!hidden lg:!hidden">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
<div className="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
{/* /.offcanvas-footer */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.navbar-collapse */}
<div className="navbar-other lg:!ml-4 xl:!ml-4">
<ul className="navbar-nav !flex-row !items-center !ml-auto">
<li className="nav-item">
<a
className="nav-link"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-info4"
>
<i className="uil uil-info-circle before:content-['eb99'] !text-[1.1rem]" />
</a>
</li>
<li className="nav-item hidden xl:block lg:block md:block">
<a
href="#"
className="btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]"
data-bs-toggle="modal"
data-bs-target="trueLink"
>
Sign In
</a>
</li>
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
<div
className="modal fade !m-0 !p-0"
id="modal-signin4"
tabIndex={-1}
>
<div className="modal-dialog modal-dialog-centered modal-sm">
<div className="modal-content !text-center">
<div className="relative flex-auto pt-[2.5rem] pr-[2.5rem] pb-[2.5rem] !pl-[2.5rem]">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
<h2 className="!mb-3 text-left">Welcome Back</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-6 text-left">
Fill your email and password to sign in.
</p>
<form className="text-left !mb-3">
<div className="form-floating relative !mb-4">
<input
type="email"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Email"
id="loginEmail7"
/>
<label htmlFor="loginEmail7">Email</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Password"
id="loginPassword7"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPassword7">Password</label>
</div>
<a className="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2">
Sign In
</a>
</form>
{/* /form */}
<p className="!mb-1">
<a href="#" className="hover">
Forgot Password?
</a>
</p>
<p className="!mb-0">
Don't have an account?
<a
href="#"
data-bs-target="#modal-signup4"
data-bs-toggle="modal"
data-bs-dismiss="modal"
className="hover"
>
Sign up
</a>
</p>
<div className="divider-icon !my-4">or</div>
<nav className="nav social justify-center !text-center">
<a
href="#"
className="btn btn-circle btn-sm btn-google !text-white !bg-[#e44134] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-google before:content-['eb50']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-facebook-f !text-white !bg-[#4470cf] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-facebook-f before:content-['eae2']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-twitter !text-white !bg-[#5daed5] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-twitter before:content-['ed59']" />
</a>
</nav>
{/*/.social */}
</div>
{/*/.modal-content */}
</div>
{/*/.modal-body */}
</div>
{/*/.modal-dialog */}
</div>
{/*/.modal */}
<div
className="modal fade !m-0 !p-0"
id="modal-signup4"
tabIndex={-1}
>
<div className="modal-dialog modal-dialog-centered modal-sm">
<div className="modal-content !text-center">
<div className="relative flex-auto pt-[2.5rem] pr-[2.5rem] pb-[2.5rem] !pl-[2.5rem]">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
<h2 className="!mb-3 text-left">Sign up to Sandbox</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-6 text-left">
Registration takes less than a minute.
</p>
<form className="text-left !mb-3">
<div className="form-floating relative !mb-4">
<input
type="text"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Name"
id="loginName4"
/>
<label htmlFor="loginName4">Name</label>
</div>
<div className="form-floating relative !mb-4">
<input
type="email"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Email"
id="loginEmail8"
/>
<label htmlFor="loginEmail8">Email</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Password"
id="loginPassword8"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPassword8">Password</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Confirm Password"
id="loginPasswordConfirm4"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPasswordConfirm4">
Confirm Password
</label>
</div>
<a className="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2">
Sign Up
</a>
</form>
{/* /form */}
<p className="!mb-0">
Already have an account?
<a
href="#"
data-bs-target="#modal-signin4"
data-bs-toggle="modal"
data-bs-dismiss="modal"
className="hover"
>
Sign in
</a>
</p>
<div className="divider-icon !my-4">or</div>
<nav className="nav social justify-center !text-center">
<a
href="#"
className="btn btn-circle btn-sm btn-google !text-white !bg-[#e44134] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-google before:content-['eb50']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-facebook-f !text-white !bg-[#4470cf] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-facebook-f before:content-['eae2']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-twitter !text-white !bg-[#5daed5] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-twitter before:content-['ed59']" />
</a>
</nav>
{/*/.social */}
</div>
{/*/.modal-content */}
</div>
{/*/.modal-body */}
</div>
{/*/.modal-dialog */}
</div>
{/*/.modal */}
<div
className="offcanvas offcanvas-end !text-[#cacaca]"
id="offcanvas-info4"
data-bs-scroll="true"
>
<div className="offcanvas-header">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body pb-6">
<div className="widget !mb-8">
<p>
Sandbox is a multipurpose HTML5 template with various
layouts which will be a great solution for your business.
</p>
</div>
{/* /.widget */}
<div className="widget !mb-8">
<h4 className="widget-title !text-white !mb-3">
Contact Info
</h4>
<address className="not-italic !leading-[inherit] !mb-4">
Moonshine St. 14/05 <br />
Light City, London
</address>
<a
className="!text-[#cacaca] hover:!text-[#3f78e0]"
href="mailto:first.last@email.com"
>
info@email.com
</a>
<br />
00 (123) 456 78 90
</div>
{/* /.widget */}
<div className="widget !mb-8">
<h4 className="widget-title !text-white !mb-3">
Learn More
</h4>
<ul className="!pl-0 list-none">
<li>
<a href="#">Our Story</a>
</li>
<li>
<a href="#">Terms of Use</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
{/* /.widget */}
<div className="widget">
<h4 className="widget-title !text-white !mb-3">
Follow Us
</h4>
<nav className="nav social social-white">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
{/* /.widget */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.offcanvas */}
</header>
</div>
</section>Classic - Fancy
Sandbox
Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
Follow Us
<section id="snippet-10" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-0">Classic - Fancy</h2>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header className="relative wrapper !bg-[#edf2fc] pb-10">
<nav className="navbar navbar-expand-lg fancy navbar-light !bg-[#ffffff] xl:[background:0_0!important] lg:[background:0_0!important]">
<div className="container">
<div className="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 flex flex-row !flex-nowrap w-full justify-between items-center">
<div className="navbar-brand w-full">
<Link href={`/index`}>
<img
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
</Link>
</div>
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header xl:!hidden lg:!hidden">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
<div className="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
{/* /.offcanvas-footer */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.navbar-collapse */}
<div className="navbar-other lg:!ml-4 xl:!ml-4">
<ul className="navbar-nav !flex-row !items-center !ml-auto">
<li className="nav-item">
<a
className="nav-link"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-info5"
>
<i className="uil uil-info-circle before:content-['eb99'] !text-[1.1rem]" />
</a>
</li>
<li className="nav-item hidden xl:block lg:block md:block">
<a
href="#"
className="btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]"
data-bs-toggle="modal"
data-bs-target="trueLink"
>
Sign In
</a>
</li>
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.navbar-collapse-wrapper */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
<div
className="modal fade !m-0 !p-0"
id="modal-signin5"
tabIndex={-1}
>
<div className="modal-dialog modal-dialog-centered modal-sm">
<div className="modal-content !text-center">
<div className="relative flex-auto pt-[2.5rem] pr-[2.5rem] pb-[2.5rem] !pl-[2.5rem]">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
<h2 className="!mb-3 text-left">Welcome Back</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-6 text-left">
Fill your email and password to sign in.
</p>
<form className="text-left !mb-3">
<div className="form-floating relative !mb-4">
<input
type="email"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Email"
id="loginEmail9"
/>
<label htmlFor="loginEmail9">Email</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Password"
id="loginPassword9"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPassword9">Password</label>
</div>
<a className="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2">
Sign In
</a>
</form>
{/* /form */}
<p className="!mb-1">
<a href="#" className="hover">
Forgot Password?
</a>
</p>
<p className="!mb-0">
Don't have an account?
<a
href="#"
data-bs-target="#modal-signup5"
data-bs-toggle="modal"
data-bs-dismiss="modal"
className="hover"
>
Sign up
</a>
</p>
<div className="divider-icon !my-4">or</div>
<nav className="nav social justify-center !text-center">
<a
href="#"
className="btn btn-circle btn-sm btn-google !text-white !bg-[#e44134] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-google before:content-['eb50']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-facebook-f !text-white !bg-[#4470cf] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-facebook-f before:content-['eae2']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-twitter !text-white !bg-[#5daed5] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-twitter before:content-['ed59']" />
</a>
</nav>
{/*/.social */}
</div>
{/*/.modal-content */}
</div>
{/*/.modal-body */}
</div>
{/*/.modal-dialog */}
</div>
{/*/.modal */}
<div
className="modal fade !m-0 !p-0"
id="modal-signup5"
tabIndex={-1}
>
<div className="modal-dialog modal-dialog-centered modal-sm">
<div className="modal-content !text-center">
<div className="relative flex-auto pt-[2.5rem] pr-[2.5rem] pb-[2.5rem] !pl-[2.5rem]">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
<h2 className="!mb-3 text-left">Sign up to Sandbox</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-6 text-left">
Registration takes less than a minute.
</p>
<form className="text-left !mb-3">
<div className="form-floating relative !mb-4">
<input
type="text"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Name"
id="loginName5"
/>
<label htmlFor="loginName5">Name</label>
</div>
<div className="form-floating relative !mb-4">
<input
type="email"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Email"
id="loginEmail"
/>
<label htmlFor="loginEmail">Email</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Password"
id="loginPassword10"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPassword10">Password</label>
</div>
<div className="form-floating relative password-field !mb-4">
<input
type="password"
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
placeholder="Confirm Password"
id="loginPasswordConfirm5"
/>
<span className="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4">
<i className="uil uil-eye" />
</span>
<label htmlFor="loginPasswordConfirm5">
Confirm Password
</label>
</div>
<a className="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2">
Sign Up
</a>
</form>
{/* /form */}
<p className="!mb-0">
Already have an account?
<a
href="#"
data-bs-target="#modal-signin5"
data-bs-toggle="modal"
data-bs-dismiss="modal"
className="hover"
>
Sign in
</a>
</p>
<div className="divider-icon !my-4">or</div>
<nav className="nav social justify-center !text-center">
<a
href="#"
className="btn btn-circle btn-sm btn-google !text-white !bg-[#e44134] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-google before:content-['eb50']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-facebook-f !text-white !bg-[#4470cf] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-facebook-f before:content-['eae2']" />
</a>
<a
href="#"
className="btn btn-circle btn-sm btn-twitter !text-white !bg-[#5daed5] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"
>
<i className="uil uil-twitter before:content-['ed59']" />
</a>
</nav>
{/*/.social */}
</div>
{/*/.modal-content */}
</div>
{/*/.modal-body */}
</div>
{/*/.modal-dialog */}
</div>
{/*/.modal */}
<div
className="offcanvas offcanvas-end !text-[#cacaca]"
id="offcanvas-info5"
data-bs-scroll="true"
>
<div className="offcanvas-header">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body pb-6">
<div className="widget !mb-8">
<p>
Sandbox is a multipurpose HTML5 template with various
layouts which will be a great solution for your business.
</p>
</div>
{/* /.widget */}
<div className="widget !mb-8">
<h4 className="widget-title !text-white !mb-3">
Contact Info
</h4>
<address className="not-italic !leading-[inherit] !mb-4">
Moonshine St. 14/05 <br />
Light City, London
</address>
<a
className="!text-[#cacaca] hover:!text-[#3f78e0]"
href="mailto:first.last@email.com"
>
info@email.com
</a>
<br />
00 (123) 456 78 90
</div>
{/* /.widget */}
<div className="widget !mb-8">
<h4 className="widget-title !text-white !mb-3">
Learn More
</h4>
<ul className="!pl-0 list-none">
<li>
<a href="#">Our Story</a>
</li>
<li>
<a href="#">Terms of Use</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
{/* /.widget */}
<div className="widget">
<h4 className="widget-title !text-white !mb-3">
Follow Us
</h4>
<nav className="nav social social-white">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
{/* /.widget */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.offcanvas */}
</header>
{/* /header */}
</div>
</section>Center Logo - Transparent Background
<section id="snippet-11" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-0">Center Logo - Transparent Background</h2>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header className="relative wrapper">
<nav className="navbar navbar-expand-lg center-logo transparent navbar-light">
<div className="container justify-between items-center">
<div className="flex flex-row w-full justify-between items-center xl:!hidden lg:!hidden">
<div className="navbar-brand">
<Link href={`/index`}>
<img
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
</Link>
</div>
<div className="navbar-other !ml-auto">
<ul className="navbar-nav flex-row items-center">
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.flex */}
<div className="navbar-collapse-wrapper flex flex-row items-center w-full">
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!flex lg:!px-[5rem] xl:!order-1 xl:!flex xl:!px-[5rem]">
<Link
href={`/index`}
className="transition-none hidden xl:!flex lg:!flex"
>
<img
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
</Link>
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0 xl:!hidden lg:!hidden">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white xl:!hidden lg:!hidden"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex">
<ul className="navbar-nav lg:!ml-auto xl:!ml-auto">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
</ul>
{/* /.navbar-nav */}
</div>
<div className="w-full order-3 lg:!order-2 lg:!flex">
<ul className="navbar-nav lg:!mr-auto xl:!mr-auto">
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
</div>
<div className="offcanvas-body xl:!hidden lg:!hidden order-4 !mt-auto">
<div className="offcanvas-footer">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
</div>
</div>
{/* /.navbar-collapse */}
</div>
{/* /.navbar-collapse-wrapper */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
</header>
{/* /header */}
</div>
</section>Center Logo - Transparent Background - Light Text
Check out some of the live examples:Demo 13.
<section id="snippet-12" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-3 !leading-[1.35]">
Center Logo - Transparent Background - Light Text
</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">
Check out some of the live examples:
<Link
href={`/demo13`}
className="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['e906'] after:text-[0.7rem] after:font-Custom"
target="_blank"
>
Demo 13
</Link>
.
</p>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header
className="relative wrapper image-wrapper bg-image pb-1 bg-scroll z-[2] bg-no-repeat bg-[center_center] bg-cover"
style={{ backgroundImage: "url(/assets/img/photos/bg3.jpg)" }}
>
<nav className="navbar navbar-expand-lg center-logo transparent navbar-dark">
<div className="container justify-between items-center">
<div className="flex flex-row w-full justify-between items-center xl:!hidden lg:!hidden">
<div className="navbar-brand">
<Link href={`/index`}>
<img
className="logo-dark"
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
<img
className="logo-light"
srcSet="/assets/img/logo-light@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo-light.png"
/>
</Link>
</div>
<div className="navbar-other !ml-auto">
<ul className="navbar-nav flex-row items-center">
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.flex */}
<div className="navbar-collapse-wrapper flex flex-row items-center w-full">
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!flex lg:!px-[5rem] xl:!order-1 xl:!flex xl:!px-[5rem]">
<Link
href={`/index`}
className="transition-none hidden xl:!flex lg:!flex"
>
<img
className="logo-dark"
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
<img
className="logo-light"
srcSet="/assets/img/logo-light@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo-light.png"
/>
</Link>
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0 xl:!hidden lg:!hidden">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white xl:!hidden lg:!hidden"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex">
<ul className="navbar-nav lg:!ml-auto xl:!ml-auto">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
</ul>
{/* /.navbar-nav */}
</div>
<div className="w-full order-3 lg:!order-2 lg:!flex">
<ul className="navbar-nav lg:!mr-auto xl:!mr-auto">
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
</div>
<div className="offcanvas-body xl:!hidden lg:!hidden order-4 !mt-auto">
<div className="offcanvas-footer">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
</div>
</div>
{/* /.navbar-collapse */}
</div>
{/* /.navbar-collapse-wrapper */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
</header>
{/* /header */}
</div>
</section>Center Logo - Light Background
<section id="snippet-13" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-0">Center Logo - Light Background</h2>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header className="relative wrapper !bg-[#edf2fc] py-5">
<nav className="navbar navbar-expand-lg center-logo navbar-light !bg-[#ffffff]">
<div className="container justify-between items-center">
<div className="flex flex-row w-full justify-between items-center xl:!hidden lg:!hidden">
<div className="navbar-brand">
<Link href={`/index`}>
<img
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
</Link>
</div>
<div className="navbar-other !ml-auto">
<ul className="navbar-nav flex-row items-center">
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.flex */}
<div className="navbar-collapse-wrapper flex flex-row items-center w-full">
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!flex lg:!px-[5rem] xl:!order-1 xl:!flex xl:!px-[5rem]">
<Link
href={`/index`}
className="transition-none hidden xl:!flex lg:!flex"
>
<img
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
</Link>
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0 xl:!hidden lg:!hidden">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white xl:!hidden lg:!hidden"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex">
<ul className="navbar-nav lg:!ml-auto xl:!ml-auto">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
</ul>
{/* /.navbar-nav */}
</div>
<div className="w-full order-3 lg:!order-2 lg:!flex">
<ul className="navbar-nav lg:!mr-auto xl:!mr-auto">
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
</div>
<div className="offcanvas-body xl:!hidden lg:!hidden order-4 !mt-auto">
<div className="offcanvas-footer">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
</div>
</div>
{/* /.navbar-collapse */}
</div>
{/* /.navbar-collapse-wrapper */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
</header>
</div>
</section>Center Logo - Dark Background
<section id="snippet-14" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-0">Center Logo - Dark Background</h2>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header className="relative wrapper !bg-[#edf2fc]">
<nav className="navbar navbar-expand-lg center-logo navbar-dark navbar- bg-[#21262c] opacity-100">
<div className="container justify-between items-center">
<div className="flex flex-row w-full justify-between items-center xl:!hidden lg:!hidden">
<div className="navbar-brand">
<Link href={`/index`}>
<img
srcSet="/assets/img/logo-light@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo-light.png"
/>
</Link>
</div>
<div className="navbar-other !ml-auto">
<ul className="navbar-nav flex-row items-center">
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.flex */}
<div className="navbar-collapse-wrapper flex flex-row items-center w-full">
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!flex lg:!px-[5rem] xl:!order-1 xl:!flex xl:!px-[5rem]">
<img
className="transition-none hidden lg:!flex xl:!flex logo-light"
srcSet="/assets/img/logo-light@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo-light.png"
/>
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0 xl:!hidden lg:!hidden">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white xl:!hidden lg:!hidden"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex">
<ul className="navbar-nav lg:!ml-auto xl:!ml-auto">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
</ul>
{/* /.navbar-nav */}
</div>
<div className="w-full order-3 lg:!order-2 lg:!flex">
<ul className="navbar-nav lg:!mr-auto xl:!mr-auto">
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
</div>
<div className="offcanvas-body xl:!hidden lg:!hidden order-4 !mt-auto">
<div className="offcanvas-footer">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
</div>
</div>
{/* /.navbar-collapse */}
</div>
{/* /.navbar-collapse-wrapper */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
</header>
</div>
</section>Center Logo - Fancy
<section id="snippet-15" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-0">Center Logo - Fancy</h2>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header className="relative wrapper !bg-[#edf2fc] pb-10">
<nav className="navbar navbar-expand-lg fancy center-logo navbar-light !bg-[#ffffff] xl:[background:0_0!important] lg:[background:0_0!important]">
<div className="container">
<div className="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 xl:!flex lg:!flex flex-row !flex-nowrap w-full justify-between items-center">
<div className="flex flex-row w-full justify-between items-center xl:!hidden lg:!hidden">
<div className="navbar-brand">
<Link href={`/index`}>
<img
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
</Link>
</div>
<div className="navbar-other !ml-auto">
<ul className="navbar-nav flex-row items-center">
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.flex */}
<div className="navbar-collapse-inner flex flex-row items-center w-full !mt-0">
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!flex lg:!px-[5rem] xl:!order-1 xl:!flex xl:!px-[5rem]">
<Link
href={`/index`}
className="transition-none hidden xl:!flex lg:!flex"
>
<img
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
</Link>
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0 xl:!hidden lg:!hidden">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white xl:!hidden lg:!hidden"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex">
<ul className="navbar-nav lg:!ml-auto xl:!ml-auto">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
</ul>
{/* /.navbar-nav */}
</div>
<div className="w-full order-3 lg:!order-2 lg:!flex">
<ul className="navbar-nav lg:!mr-auto xl:!mr-auto">
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
</div>
<div className="offcanvas-body xl:!hidden lg:!hidden order-4 !mt-auto">
<div className="offcanvas-footer">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
</div>
</div>
{/* /.navbar-collapse */}
</div>
{/* /.navbar-collapse-wrapper */}
</div>
{/* /.navbar-collapse-wrapper */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
</header>
</div>
</section>Extended
Check out some of the live examples:Demo 12.
Sandbox
Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
Follow Us
<section id="snippet-16" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-3 !leading-[1.35]">Extended</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">
Check out some of the live examples:
<Link
href={`/demo12`}
className="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['e906'] after:text-[0.7rem] after:font-Custom"
target="_blank"
>
Demo 12
</Link>
.
</p>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header className="relative wrapper !bg-[#edf2fc] pb-10">
<nav className="navbar navbar-expand-lg extended navbar-light !bg-[#ffffff] xl:[background:0_0!important] lg:[background:0_0!important]">
<div className="container xl:!flex-col lg:!flex-col">
<div className="topbar flex flex-row w-full justify-between items-center">
<div className="navbar-brand">
<Link href={`/index`}>
<img
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
</Link>
</div>
<div className="navbar-other !ml-auto">
<ul className="navbar-nav !flex-row items-center">
<li className="nav-item">
<a
className="nav-link"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-info6"
>
<i className="uil uil-info-circle before:content-['eb99'] !text-[1.1rem]" />
</a>
</li>
<li className="nav-item dropdown language-select uppercase">
<a
className="nav-link dropdown-item dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
En
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
En
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
De
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Es
</a>
</li>
</ul>
</li>
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.flex */}
<div className="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 flex flex-row items-center">
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header xl:!hidden lg:!hidden">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body flex flex-col !h-full">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
<div className="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
{/* /.offcanvas-footer */}
</div>
</div>
{/* /.navbar-collapse */}
<div className="navbar-other !ml-auto w-full hidden xl:block lg:block">
<nav className="nav social social-muted justify-end text-right">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
</nav>
{/* /.social */}
</div>
{/* /.navbar-other */}
</div>
{/* /.navbar-collapse-wrapper */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
<div
className="offcanvas offcanvas-end !text-[#cacaca]"
id="offcanvas-info6"
data-bs-scroll="true"
>
<div className="offcanvas-header">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body pb-6">
<div className="widget !mb-8">
<p>
Sandbox is a multipurpose HTML5 template with various
layouts which will be a great solution for your business.
</p>
</div>
{/* /.widget */}
<div className="widget !mb-8">
<h4 className="widget-title !text-white !mb-3">
Contact Info
</h4>
<address className="not-italic !leading-[inherit] !mb-4">
Moonshine St. 14/05 <br />
Light City, London
</address>
<a
className="!text-[#cacaca] hover:!text-[#3f78e0]"
href="mailto:first.last@email.com"
>
info@email.com
</a>
<br />
00 (123) 456 78 90
</div>
{/* /.widget */}
<div className="widget !mb-8">
<h4 className="widget-title !text-white !mb-3">
Learn More
</h4>
<ul className="!pl-0 list-none">
<li>
<a href="#">Our Story</a>
</li>
<li>
<a href="#">Terms of Use</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
{/* /.widget */}
<div className="widget">
<h4 className="widget-title !text-white !mb-3">
Follow Us
</h4>
<nav className="nav social social-white">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
{/* /.widget */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.offcanvas */}
</header>
</div>
</section>Extended - Alternative
Check out some of the live examples:Demo 24.
Sandbox
Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
Follow Us
<section id="snippet-17" className="wrapper !bg-[#ffffff] ">
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
<h2 className="!mb-3 !leading-[1.35]">Extended - Alternative</h2>
<p className="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">
Check out some of the live examples:
<Link
href={`/demo24`}
className="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['e906'] after:text-[0.7rem] after:font-Custom"
target="_blank"
>
Demo 24
</Link>
.
</p>
</div>
{/* /.container */}
<div className="container-fluid pt-10 xl:pt-14 lg:pt-14 md:pt-14 pb-14 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem] xxl:!px-10">
<header className="relative wrapper !bg-[#edf2fc] pb-10">
<nav className="navbar navbar-expand-lg extended extended-alt navbar-light !bg-[#ffffff] xl:[background:0_0!important] lg:[background:0_0!important]">
<div className="container xl:!flex-col lg:!flex-col">
<div className="topbar flex flex-row lg:!justify-center xl:!justify-center items-center">
<div className="navbar-brand">
<Link href={`/index`}>
<img
srcSet="/assets/img/logo@2x.png 2x"
alt="image"
width="134"
height="26"
src="/assets/img/logo.png"
/>
</Link>
</div>
</div>
{/* /.flex */}
<div className="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 flex flex-row items-center justify-between">
<div className="navbar-other w-full hidden lg:block xl:block">
<nav className="nav social social-muted">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
</nav>
{/* /.social */}
</div>
{/* /.navbar-other */}
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header xl:!hidden lg:!hidden">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body flex flex-col !h-full">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="dropdown dropdown-submenu dropend">
<a
className="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown
</a>
<ul className="dropdown-menu">
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item">
<a className="dropdown-item" href="#">
Another Action
</a>
</li>
</ul>
</li>
<li className="nav-item dropdown dropdown-mega">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Mega Menu
</a>
<ul className="dropdown-menu mega-menu">
<li className="mega-menu-content">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">One</h6>
<div className="flex flex-wrap mx-0">
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul className="!pl-0 list-none">
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
>
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
<div className="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[7.5px] lg:!px-[7.5px]">
<h6 className="dropdown-header">Three</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
</ul>
</div>
{/*/column */}
</div>
{/*/.row */}
</li>
{/*/.mega-menu-content*/}
</ul>
{/*/.dropdown-menu */}
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"
>
Dropdown Large
</a>
<div className="dropdown-menu dropdown-lg">
<div className="dropdown-lg-content">
<div>
<h6 className="dropdown-header">One</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
<div>
<h6 className="dropdown-header">Two</h6>
<ul className="!pl-0 list-none">
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Link
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another Link
</a>
</li>
</ul>
</div>
{/* /.column */}
</div>
{/* /auto-column */}
</div>
</li>
</ul>
{/* /.navbar-nav */}
<div className="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a
href="mailto:first.last@email.com"
className="link-inverse"
>
info@email.com
</a>
<br />
00 (123) 456 78 90 <br />
<nav className="nav social social-white !mt-4">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
</div>
{/* /.offcanvas-footer */}
</div>
</div>
{/* /.navbar-collapse */}
<div className="navbar-other w-full flex">
<ul className="navbar-nav !flex-row !items-center !ml-auto">
<li className="nav-item">
<a
className="nav-link"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-info7"
>
<i className="uil uil-info-circle before:content-['eb99'] !text-[1.1rem]" />
</a>
</li>
<li className="nav-item">
<a
className="nav-link"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-search"
>
<i className="uil uil-search before:content-['eca5'] !text-[1.1rem]" />
</a>
</li>
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.navbar-collapse-wrapper */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
<div
className="offcanvas offcanvas-end !text-[#cacaca]"
id="offcanvas-info7"
data-bs-scroll="true"
>
<div className="offcanvas-header">
<h3 className="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
Sandbox
</h3>
<button
type="button"
className="btn-close btn-close-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body pb-6">
<div className="widget !mb-8">
<p>
Sandbox is a multipurpose HTML5 template with various
layouts which will be a great solution for your business.
</p>
</div>
{/* /.widget */}
<div className="widget !mb-8">
<h4 className="widget-title !text-white !mb-3">
Contact Info
</h4>
<address className="not-italic !leading-[inherit] !mb-4">
Moonshine St. 14/05 <br />
Light City, London
</address>
<a
className="!text-[#cacaca] hover:!text-[#3f78e0]"
href="mailto:first.last@email.com"
>
info@email.com
</a>
<br />
00 (123) 456 78 90
</div>
{/* /.widget */}
<div className="widget !mb-8">
<h4 className="widget-title !text-white !mb-3">
Learn More
</h4>
<ul className="!pl-0 list-none">
<li>
<a href="#">Our Story</a>
</li>
<li>
<a href="#">Terms of Use</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
{/* /.widget */}
<div className="widget">
<h4 className="widget-title !text-white !mb-3">
Follow Us
</h4>
<nav className="nav social social-white">
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-twitter before:content-['ed59'] text-[1rem] !text-[#5daed5]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-facebook-f before:content-['eae2'] text-[1rem] !text-[#4470cf]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-dribbble before:content-['eaa2'] text-[1rem] !text-[#e94d88]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-instagram before:content-['eb9c'] text-[1rem] !text-[#d53581]" />
</a>
<a
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
href="#"
>
<i className="uil uil-youtube before:content-['edb5'] text-[1rem] !text-[#c8312b]" />
</a>
</nav>
{/* /.social */}
</div>
{/* /.widget */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.offcanvas */}
<div
className="offcanvas offcanvas-top !bg-[#ffffff]"
id="offcanvas-search"
data-bs-scroll="true"
>
<div className="container flex flex-row py-6">
<form className="search-form relative before:content-['eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[1rem] before:!text-[#343f52] before:z-[1] before:right-auto before:top-2/4 before:font-Unicons w-full before:left-0 focus:!outline-offset-0">
<input
id="search-form1"
type="text"
className="form-control text-[0.8rem] !shadow-none !pl-[1.75rem] !pr-[.75rem] border-0 bg-inherit m-0 block w-full font-medium !leading-[1.7] !text-[#60697b] px-4 py-[0.6rem] rounded-[0.4rem] focus:!outline-offset-0"
placeholder="Type keyword and hit enter"
/>
</form>
<button
type="button"
className="btn-close leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out p-0 border-0 motion-reduce:transition-none before:text-[1.05rem] before:content-['ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(0,0,0,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
{/* /.container */}
</div>
{/* /.offcanvas */}
</header>
</div>
</section>Think unique and be creative. Make a difference with Sandbox.
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox
Sandbox
Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.