Off-canvas Menu Example

 Create OffCanvas menu using bootstrap 5

Sidebar.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="offcanvas.css">

<div class="sidebar-nav">

    <nav class="navbar navbar-dark bg-danger fixed-top">

        <div class="container">

            <!-- Mobile Menu Toggle Button -->

            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">

                <span class="navbar-toggler-icon"></span>

            </button>

            <!-- Menus List -->

            <div class="bg-light offcanvas offcanvas-start shadow" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">

              <div class="offcanvas-body">

                    <ul class="navbar-nav">

                        <li><a href="#"> <span class="item-text">Home</span></a></li>

                        <li><a href="#"><span class="item-text">Contact Us</span></a></li>

                        <li><a href="#"><span class="item-text">About Us</span></a></li>

                        <li><a href="#"> <span class="item-text">Products</span></a></li>

                        <li><hr class="dropdown-divider"></li>

                        <li><a href="#"><span class="item-text">Send</span></a></li>

                        <li><a href="#"><span class="item-text">Share</span></a></li>

                        <li><a href="#"><span class="item-text">Settings</span></a></li>

                    </ul>

              </div>

            </div>

            <div class="btn-group " >

                <a href="#" class="dropdown-toggle text-white text-decoration-none" data-bs-toggle="dropdown" aria-expanded="false">

                    

                    <span class="textnone">User Name</span>

                </a>

                <ul class="bg-warning  dropdown-menu dropdown-menu-end">

                    <li><button class="dropdown-item" type="button">Change Password</button></li>

                    <li><button class="dropdown-item" type="button">Edit Profile</button></li>

                    <li><button class="dropdown-item" type="button">Settings</button></li>

                    <li><hr class="dropdown-divider"></li>

                    <li><button class="dropdown-item" type="button">Sign out</button></li>

                </ul>

            </div>

        </div>

</div>

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

offcanvas.css

 .sidebar-nav ul li a {

    font-size: 26px;

    text-decoration: none;

    display: block;

    padding: 6px 10px;

    transition: 0.5s;

}

.sidebar-nav ul li a:hover {

    background-color: #eeeeee;

    border-radius: 4px;

}

.sidebar-nav .offcanvas {

    width: 220px;

    border: none;

}

.sidebar-nav .offcanvas ul li a span {

    font-size: 18px;

    position: relative;

    top: -4px;

    transition: 0.5s;

}

.sidebar-nav .offcanvas.show ul li a:hover span {

    padding-left: 10px;

}

.sidebar-nav .dropdown-toggle::after {

    position: relative;

    top: 3px;

}

Learn all Programming with youtube.com/avadhtutor

Happy Independence Day Code Using Html Css

 

Happy Independence Day Using HTML CSS

<style>

body{

background:linear-gradient(to left, orange, white, green);

animation: bg 5s infinite; 

}

@keyframes bg

{

0%

{ background:linear-gradient(orange,white,green); }

50%

{ background: linear-gradient(to left, orange,white,green); }

100%

{ background:linear-gradient(to right,orange,white,green); }

}

div{

font-size: 4.5em;

padding: 10px;

text-align: center;

color: orange;

text-shadow: 15px 10px 15px green;

font-family: century gothic;

}

.happy

{

animation: happy 5s infinite;

position: relative;

}

@keyframes happy{

0%{top: 0px; color: white; text-shadow: 2px 3px 1px orange ;}

25%{top: 25px; color: green; text-shadow: 2px 2px 0px white ;}

50%{top: 50px; color: orange; text-shadow: 1px 2px 1px black ;}

75%{top: 25px; color: white; text-shadow: 2px 3px 2px green ;}

100%{top: 0px; color: green; text-shadow: 2px 3px 2px orange ;}

}

h4{

font-size: 3em;

font-family: century;

color: #e5ff00;

animation: text 5s infinite;

text-align: center;

}

@keyframes text 

{

0%

{

text-shadow: 2px 2px 3px orange;

background-color: green;

}

50%

{

color: white;

background-color: orange;

}

100%

{

text-shadow: 2px 2px 3px green;

background-color: white;

}

}

</style>

<div class="happy">Happy</div>

<div class="happy">Independence</div>

<div class="happy">Day</div>

<h4>AVADH TUTOR</h4>