Navbar Example 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Example 1</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
*{font-family: 'Poppins', sans-serif;}
a{text-decoration: none;}
.btn,input[type=search]{box-shadow: none !important;}
.text-primary2{color:rgb(21, 71, 123) !important;}
.navbar{z-index: 100000000;}
.navbar-brand{
color:rgb(21, 71, 123) !important;
font-weight: bold;
text-decoration: none;
font-family: 'Poppins', sans-serif;
letter-spacing: 1.2px;
}
/*login button css*/
.login-btn{
position: relative;
text-decoration: none;
background: rgb(21, 71, 123);
width: 100px;
color: #ffffff;
font-weight: bold;
font-size: 17px;
text-align: center;
transition-duration: 0.4s;
overflow: hidden;
letter-spacing: 1.5px;
}
.login-btn:hover{
color:#ffffff;
}
.login-btn:after {
content: "";
background: rgb(78, 138, 203);
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.login-btn:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.navbarExampleSidebar1{
width:250px !important;
z-index: 100000000;
}
.navbarExampleSidebar1 .offcanvas-header{
border-bottom: 2px solid rgb(21, 71, 123);
color:rgb(21, 71, 123) !important;
}
.navbarExampleSidebar1 .offcanvas-body{
padding: 0px !important;
}
.navbarExampleSidebar1 .nav-link a{
color:rgb(21, 71, 123) !important;
}
@media screen and (max-width: 576px) {
.w-sm-100{width: 100% !important;}
.m-sm-2{margin-top: 2% !important;}
}
@media screen and (min-width: 576px) {
.navbar{padding: 0px !important;}
}
@media screen and (min-width: 1200px) {
.container-fluid{
width: 1140px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg border-bottom shadow bg-light">
<div class="container-fluid">
<a href="#" class="navbar-brand me-auto">Navbar</a>
<a class="btn login-btn order-sm-last d-none d-sm-block d-md-block d-lg-block" style="margin-left: 10px;">
LOGIN
</a >
<a class="btn d-sm-none fill-primary mb-1">
<svg viewBox="0 0 448 512" width="20px" height="20px"><path d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"/></svg>
</a>
<a class="btn d-sm-none fill-primary mb-1" data-bs-toggle="offcanvas" href="#navbarExample1" role="button" aria-controls="offcanvasExample">
<svg viewBox="0 0 448 512" width="20px" height="20px"><path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"></svg>
</a>
<form class="w-sm-100 m-sm-2">
<input class="form-control" type="search" placeholder="Search" aria-label="Search">
</form>
</div>
</nav>
<div class="offcanvas offcanvas-start navbarExampleSidebar1" id="navbarExample1" aria-labelledby="navbarExample1Label">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Navbar</h5>
<button type="button" class="btn-close text-reset text-primary2" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<nav class="nav flex-column">
<li class="nav-link"><a href="">Item1</a></li>
</nav>
</div>
</div>
</body>
</html>
Navbar Example 2
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Navbar 2title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbarEX2 .navbar{
z-index: 0;
}
.navbarEX2 .navbar-logo{
color:rgb(12, 132, 64) !important;
font-weight: bold;
text-transform:uppercase;
font-size: 1rem;
text-decoration: none;
}
.navbarEX2 .navbar .nav-link{
color: rgb(21, 71, 123) !important;
font-weight: bold;
}
.navbarEX2 .btn{
box-shadow: none !important;
}
.navbarEX2 #sidebarExample2{
margin-top: 58px;
width: 200px;
}
.navbarEX2 #sidebarExample2 ul li{
list-style-type: none;
font-size: 13px;
}
.navbarEX2 .searchCollapse{
position: absolute;
}
.navbarEX2 input[type="search"]{
border-top: 0px !important;
border-left: 0px !important;
border-right: 0px !important;
box-shadow: none !important;
}
.navbarEX2 svg{
width:20px;
height:20px;
fill: rgb(21, 71, 123);;
}
style>
head>
<body class="navbarEX2">
<div class="navbarEX2">
<nav class="navbar navbar-expand-lg border-bottom shadow bg-light">
<div class="container">
<a href="#" class="navbar-logo me-auto">Navbara>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto" style="margin-left:20px">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Courses
a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Laravela>li>
<li><a class="dropdown-item" href="#">PHPa>li>
<li><a class="dropdown-item" href="#">Vuejsa>li>
ul>
li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Services
a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Laravela>li>
<li><a class="dropdown-item" href="#">PHPa>li>
<li><a class="dropdown-item" href="#">Vuejsa>li>
ul>
li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Trainings
a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Laravela>li>
<li><a class="dropdown-item" href="#">PHPa>li>
<li><a class="dropdown-item" href="#">Vuejsa>li>
ul>
li>
ul>
div>
<a class="btn" data-bs-toggle="collapse" href="#searchcollapse" role="button" aria-expanded="false"
aria-controls="searchcollapse">
<svg viewBox="0 0 512 512"><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/>svg>
a>
<a class="btn">
<svg viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"/>svg>
a>
<a class="btn d-lg-none" data-bs-toggle="offcanvas" href="#sidebarExample2" role="button" aria-controls="sidebarExample2">
<svg viewBox="0 0 448 512"><path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z">svg>
a>
div>
nav>
<div class="searchCollapse w-100 d-flex justify-content-center">
<div class="collapse p-1 w-100" id="searchcollapse" style="background: none !important;">
<div class="container">
<input type="search" name="" id="" class="form-control w-100" placeholder="search your query">
div>
div>
div>
<div class="offcanvas offcanvas-start shadow" data-bs-backdrop="false" tabindex="-1" id="sidebarExample2" aria-labelledby="sidebarExample2Label">
<div class="offcanvas-body">
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a class="nav-link btn-toggle" data-bs-toggle="collapse" href="#structure" role="button" aria-expanded="true" aria-controls="structure">
<svg viewBox="0 0 576 512" width="20px" height="20px"><path d="M544 32h-112l-32-32H320c-17.62 0-32 14.38-32 32v160c0 17.62 14.38 32 32 32h224c17.62 0 32-14.38 32-32V64C576 46.38 561.6 32 544 32zM544 320h-112l-32-32H320c-17.62 0-32 14.38-32 32v160c0 17.62 14.38 32 32 32h224c17.62 0 32-14.38 32-32v-128C576 334.4 561.6 320 544 320zM64 16C64 7.125 56.88 0 48 0h-32C7.125 0 0 7.125 0 16V416c0 17.62 14.38 32 32 32h224v-64H64V160h192V96H64V16z"/>svg>
Courses <i class="fa fa-angle-right">i>
a>
<ul class="collapse" id="structure">
<li class="nav-item">
<a href="#" class="nav-link">Laravela>
li>
<li class="nav-item">
<a href="#" class="nav-link">PHPa>
li>
<li class="nav-item">
<a href="#" class="nav-link">Vuejsa>
li>
ul>
li>
<li><hr class="dropdown-divider">li>
<li class="nav-item">
<a class="nav-link btn-toggle" data-bs-toggle="collapse" href="#monitoring" role="button" aria-expanded="true" aria-controls="monitoring">
<svg viewBox="0 0 384 512" width="20px" height="20px"><path d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM96 424c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm0-96c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm0-96c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm96-192c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm128 368c0 4.4-3.6 8-8 8H168c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-96c0 4.4-3.6 8-8 8H168c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-96c0 4.4-3.6 8-8 8H168c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z"/>svg>
Services <i class="fa fa-angle-right">i>
a>
<ul class="collapse" id="monitoring">
<li class="nav-item">
<a href="#" class="nav-link">Laravel Appa>
li>
<li class="nav-item">
<a href="#" class="nav-link">Vue Appa>
li>
<li class="nav-item">
<a href="#" class="nav-link">Php Appa>
li>
ul>
li>
<li><hr class="dropdown-divider">li>
<li class="nav-item">
<a href="#" class="nav-link" aria-current="page">
<svg viewBox="0 0 512 512" width="20px" height="20px"><path d="M434.66,167.71h0L344.5,77.36a31.83,31.83,0,0,0-45-.07h0l-.07.07L224,152.88V424L434.66,212.9A32,32,0,0,0,434.66,167.71ZM480,320H373.09L186.68,506.51c-2.06,2.07-4.5,3.58-6.68,5.49H480a32,32,0,0,0,32-32V352A32,32,0,0,0,480,320ZM192,32A32,32,0,0,0,160,0H32A32,32,0,0,0,0,32V416a96,96,0,0,0,192,0ZM96,440a24,24,0,1,1,24-24A24,24,0,0,1,96,440Zm32-184H64V192h64Zm0-128H64V64h64Z"/>svg>
Summer Trainings
a>
li>
ul>
div>
div>
div>
body>
html> DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Navbar 2title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbarEX2 .navbar{
z-index: 0;
}
.navbarEX2 .navbar-logo{
color:rgb(12, 132, 64) !important;
font-weight: bold;
text-transform:uppercase;
font-size: 1rem;
text-decoration: none;
}
.navbarEX2 .navbar .nav-link{
color: rgb(21, 71, 123) !important;
font-weight: bold;
}
.navbarEX2 .btn{
box-shadow: none !important;
}
.navbarEX2 #sidebarExample2{
margin-top: 58px;
width: 200px;
}
.navbarEX2 #sidebarExample2 ul li{
list-style-type: none;
font-size: 13px;
}
.navbarEX2 .searchCollapse{
position: absolute;
}
.navbarEX2 input[type="search"]{
border-top: 0px !important;
border-left: 0px !important;
border-right: 0px !important;
box-shadow: none !important;
}
.navbarEX2 svg{
width:20px;
height:20px;
fill: rgb(21, 71, 123);;
}
style>
head>
<body class="navbarEX2">
<div class="navbarEX2">
<nav class="navbar navbar-expand-lg border-bottom shadow bg-light">
<div class="container">
<a href="#" class="navbar-logo me-auto">Navbara>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto" style="margin-left:20px">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Courses
a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Laravela>li>
<li><a class="dropdown-item" href="#">PHPa>li>
<li><a class="dropdown-item" href="#">Vuejsa>li>
ul>
li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Services
a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Laravela>li>
<li><a class="dropdown-item" href="#">PHPa>li>
<li><a class="dropdown-item" href="#">Vuejsa>li>
ul>
li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Trainings
a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Laravela>li>
<li><a class="dropdown-item" href="#">PHPa>li>
<li><a class="dropdown-item" href="#">Vuejsa>li>
ul>
li>
ul>
div>
<a class="btn" data-bs-toggle="collapse" href="#searchcollapse" role="button" aria-expanded="false"
aria-controls="searchcollapse">
<svg viewBox="0 0 512 512"><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/>svg>
a>
<a class="btn">
<svg viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"/>svg>
a>
<a class="btn d-lg-none" data-bs-toggle="offcanvas" href="#sidebarExample2" role="button" aria-controls="sidebarExample2">
<svg viewBox="0 0 448 512"><path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z">svg>
a>
div>
nav>
<div class="searchCollapse w-100 d-flex justify-content-center">
<div class="collapse p-1 w-100" id="searchcollapse" style="background: none !important;">
<div class="container">
<input type="search" name="" id="" class="form-control w-100" placeholder="search your query">
div>
div>
div>
<div class="offcanvas offcanvas-start shadow" data-bs-backdrop="false" tabindex="-1" id="sidebarExample2" aria-labelledby="sidebarExample2Label">
<div class="offcanvas-body">
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a class="nav-link btn-toggle" data-bs-toggle="collapse" href="#structure" role="button" aria-expanded="true" aria-controls="structure">
<svg viewBox="0 0 576 512" width="20px" height="20px"><path d="M544 32h-112l-32-32H320c-17.62 0-32 14.38-32 32v160c0 17.62 14.38 32 32 32h224c17.62 0 32-14.38 32-32V64C576 46.38 561.6 32 544 32zM544 320h-112l-32-32H320c-17.62 0-32 14.38-32 32v160c0 17.62 14.38 32 32 32h224c17.62 0 32-14.38 32-32v-128C576 334.4 561.6 320 544 320zM64 16C64 7.125 56.88 0 48 0h-32C7.125 0 0 7.125 0 16V416c0 17.62 14.38 32 32 32h224v-64H64V160h192V96H64V16z"/>svg>
Courses <i class="fa fa-angle-right">i>
a>
<ul class="collapse" id="structure">
<li class="nav-item">
<a href="#" class="nav-link">Laravela>
li>
<li class="nav-item">
<a href="#" class="nav-link">PHPa>
li>
<li class="nav-item">
<a href="#" class="nav-link">Vuejsa>
li>
ul>
li>
<li><hr class="dropdown-divider">li>
<li class="nav-item">
<a class="nav-link btn-toggle" data-bs-toggle="collapse" href="#monitoring" role="button" aria-expanded="true" aria-controls="monitoring">
<svg viewBox="0 0 384 512" width="20px" height="20px"><path d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM96 424c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm0-96c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm0-96c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm96-192c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm128 368c0 4.4-3.6 8-8 8H168c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-96c0 4.4-3.6 8-8 8H168c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-96c0 4.4-3.6 8-8 8H168c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z"/>svg>
Services <i class="fa fa-angle-right">i>
a>
<ul class="collapse" id="monitoring">
<li class="nav-item">
<a href="#" class="nav-link">Laravel Appa>
li>
<li class="nav-item">
<a href="#" class="nav-link">Vue Appa>
li>
<li class="nav-item">
<a href="#" class="nav-link">Php Appa>
li>
ul>
li>
<li><hr class="dropdown-divider">li>
<li class="nav-item">
<a href="#" class="nav-link" aria-current="page">
<svg viewBox="0 0 512 512" width="20px" height="20px"><path d="M434.66,167.71h0L344.5,77.36a31.83,31.83,0,0,0-45-.07h0l-.07.07L224,152.88V424L434.66,212.9A32,32,0,0,0,434.66,167.71ZM480,320H373.09L186.68,506.51c-2.06,2.07-4.5,3.58-6.68,5.49H480a32,32,0,0,0,32-32V352A32,32,0,0,0,480,320ZM192,32A32,32,0,0,0,160,0H32A32,32,0,0,0,0,32V416a96,96,0,0,0,192,0ZM96,440a24,24,0,1,1,24-24A24,24,0,0,1,96,440Zm32-184H64V192h64Zm0-128H64V64h64Z"/>svg>
Summer Trainings
a>
li>
ul>
div>
div>
div>
body>
html>