<section class="pb-20">
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" src="flaro-assets/logos/flaro-logo-black.svg" alt=""/></a>
<div class="collapse navbar-collapse me-5 justify-content-end">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#" >Features</a></li>
<li class="nav-item"><a class="nav-link" href="#" >Solutions</a></li>
<li class="nav-item"><a class="nav-link" href="#" >Resources</a></li>
<li class="nav-item"><a class="nav-link" href="#" >Pricing</a></li>
</ul>
</div>
<div class="d-none d-lg-block"><a class="btn btn-primary" href="#" >Try 14 Days Free Trial</a></div>
<div class="d-lg-none">
<button class="btn navbar-burger p-0">
<svg class="text-primary" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="56" height="56" rx="28" fill="currentColor"></rect>
<path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
</div>
</nav>
<div class="container position-relative">
<div class="row align-items-center">
<div class="col-12 col-lg-6 pt-24">
<div class="mw-xl mw-lg-2xl mx-auto mx-lg-0"><a class="btn d-inline-flex px-2 py-1 mb-6 align-items-center btn-success-light rounded-pill" href="#"><span class="me-1 fw-semibold" >👋 We are hiring. View open roles</span>
<svg width="15" height="15" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.66667 3.41675L12.75 7.50008M12.75 7.50008L8.66667 11.5834M12.75 7.50008L2.25 7.50008" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg></a>
<h1 class="h2 mb-6" >Discover mentors that helps you grow</h1>
<p class="mw-lg fs-7 mb-10" >Get the best-in-class group mentoring plans and professional benefits for your team.</p>
<div class="d-sm-flex align-items-center mb-24"><a class="btn d-block d-sm-inline-block mb-4 mb-sm-0 me-sm-6 btn-primary" href="#" >Join Free for 30 Days</a><a class="btn d-block d-sm-inline-block btn-outline-light-dark" href="#">
<svg width="19" height="18" viewbox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.75 3.75C2.75 2.92157 3.42157 2.25 4.25 2.25H6.70943C7.03225 2.25 7.31886 2.45657 7.42094 2.76283L8.5443 6.13291C8.66233 6.48699 8.50203 6.87398 8.1682 7.0409L6.47525 7.88737C7.30194 9.72091 8.77909 11.1981 10.6126 12.0247L11.4591 10.3318C11.626 9.99796 12.013 9.83767 12.3671 9.9557L15.7372 11.0791C16.0434 11.1811 16.25 11.4677 16.25 11.7906V14.25C16.25 15.0784 15.5784 15.75 14.75 15.75H14C7.7868 15.75 2.75 10.7132 2.75 4.5V3.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg><span class="ms-1 text-black fw-medium" >Book a call</span></a></div>
<p class="fs-8 fw-semibold text-secondary mb-6" >TRUSTED AND LOVED BY 100+ TECH FIRST TEAMS</p>
<div class="d-flex flex-column flex-sm-row align-items-center"><img class="mb-5 mb-sm-0 me-sm-6" src="flaro-assets/logos/brands/brand.png" alt=""/><img class="mb-5 mb-sm-0 me-sm-6" src="flaro-assets/logos/brands/brand2.png" alt=""/><img src="flaro-assets/logos/brands/brand3.png" alt=""/></div>
</div>
</div>
<div class="col-12 col-lg-6 pt-24">
<div class="mw-2xl mx-auto"><img class="img-fluid" src="flaro-assets/images/headers/header.png" alt=""/></div>
</div>
</div>
</div>
<div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;" >
<div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
<nav class="position-relative h-100 w-100 d-flex flex-column justify-content-between py-8 px-8 bg-white overflow-auto">
<div class="d-flex align-items-center"><a class="me-auto h4 mb-0 text-decoration-none" href="#"><img class="img-fluid" src="flaro-assets/logos/flaro-logo-black.svg" alt=""/></a><a class="navbar-close" href="#">
<svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg></a></div>
<div class="py-16">
<ul class="nav flex-column">
<li class="nav-item mb-8"><a class="nav-link text-dark" href="#" >Features</a></li>
<li class="nav-item mb-8"><a class="nav-link text-dark" href="#" >Solutions</a></li>
<li class="nav-item mb-8"><a class="nav-link text-dark" href="#" >Resources</a></li>
<li class="nav-item"><a class="nav-link text-dark" href="#" >Pricing</a></li>
</ul>
</div>
<div><a class="btn w-100 fw-medium" href="#" >Login</a><a class="btn w-100 btn-primary" href="#" >Sign in</a></div>
</nav>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- About us 5
- Alert 85
- Application 63
- Banners 15
- Blog 93
- Breadcrumbs 4
- Call to action 113
- Careers 16
- Contact 52
- Content 62
- Cookies 53
- Download 5
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 58
- Features 160
- Footers 68
- Graphs 18
- HTTP codes 65
- Hero section 106
- How it works 53
- Logo clouds 89
- Modals 6
- Navbar 68
- Navigation (horizontal) 107
- Navigation (vertical) 6
- Newsletter 58
- Portfolio 39
- Pricing 58
- Projects 14
- Reviews 5
- Rich text 3
- Services 5
- Sign in / Sign up 99
- Stats 89
- Tables 57
- Team 56
- Testimonials 58
- Toasts 6
- Users 25
Bootstrap Components by Shuffle
Browse 1980 of ready-made components in Bootstrap. They are divided into UI libraries that our professional designers designed. Each of them has a resource of many variations of different types of components. Under each of them, there is a clear code created by our team of developers.
All elements available in the editor are fully responsive. You will get full access to them by subscribing to our drag and drop editor.
