Bootstrap Snippet Multilevel Collapsible Menu using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider with Animation Using Bootstrap 5</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  
</head>
<body>
    <section class="section-banner d-none d-lg-block d-md-block">
  
        <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner py-5">
                <div class="carousel-item py-5 active">
                    <div id="WebGL-output">
                    </div>
                    <img class="planetImg" src="https://assets.codepen.io/1651485/planet.png">
                    <div class="container">
                        <div class="row py-5">
                            <div class="col-lg-12">
                                <div class="mainText">
                                    <div class="mainTitle">
                                        Empower Your Procurement Process with GeM Solutions.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.section-banner {
    background: radial-gradient(circle,
            rgba(19, 17, 17, 1) 0%,
            rgba(0, 0, 0, 1) 17%,
            rgba(0, 0, 0, 1) 27%);
    overflow: hidden;
}
.planetImg {
    transform: scale(0.7) rotate(158deg);
    position: absolute;
    top: -42%;
    right: 13%;
    animation: float 12s ease-in-out infinite;
}
     
.mainTitle {
    text-transform: uppercase;
    color: #fff;
    font-size: 60px;
    position: relative;
    letter-spacing: 10px;
    position: relative;
    display: block;
    font-family: "Poppins", sans-serif;
    text-transform: uppercase;
    -webkit-text-stroke: 2px #ffffff;
    text-stroke: 2px #ffffff;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
    transition: all 0.4s linear;
    opacity: 0.5;
    user-select: none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Multilevel Collapsible Menu"
Bootstrap 4.1.1 Snippet by nitesh575

Related: See More

Questions / Comments:

"Multilevel Collapsible Menu" Bootstrap 4.1.1 Snippet by nitesh575

Related: See More

Questions / Comments:

"Multilevel Collapsible Menu"
Bootstrap 4.1.1 Snippet by nitesh575