active link and visited link in html | link color in html | a link v lin...

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>

Bootstrap 5 with CSS Bootstrap Login Form Design

 Login Page Using Bootstrap 5 and CSS with Model Design

____________________________________

Example Here:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Bootstrap 5 Login page with Icon</title>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<style>

body {

font-family: 'Varela Round', sans-serif;

}

.modal-login {

color: #636363;

width: 350px;

}

.modal-login .modal-content {

padding: 20px;

border-radius: 5px;

border: none;

}

.modal-login .modal-header {

border-bottom: none;   

position: relative;

justify-content: center;

}

.modal-login h4 {

text-align: center;

font-size: 26px;

margin: 30px 0 -15px;

}

.modal-login .form-control:focus {

border-color: #70c5c0;

}

.modal-login .form-control, .modal-login .btn {

min-height: 40px;

border-radius: 3px; 

}

.modal-login .close {

position: absolute;

top: -5px;

right: -5px;

}

.modal-login .modal-footer {

background: #ddf002;

border-color: #dee4e7;

text-align: center;

justify-content: center;

margin: 0 -20px -20px;

border-radius: 5px;

font-size: 13px;

}

.modal-login .modal-footer a {

color: white;

}

.modal-login .avatar {

position: absolute;

margin: 0 auto;

left: 0;

right: 0;

top: -70px;

width: 95px;

height: 95px;

border-radius: 50%;

z-index: 9;

background: #60c7c1;

padding: 15px;

box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);

}

.modal-login .avatar img {

width: 100%;

}

.modal-login.modal-dialog {

margin-top: 80px;

}

.modal-login .btn, .modal-login .btn:active {

color: #fff;

border-radius: 4px;

background: #60c7c1 !important;

text-decoration: none;

transition: all 0.4s;

line-height: normal;

border: none;

}

.modal-login .btn:hover, .modal-login .btn:focus {

background: #45aba6 !important;

outline: none;

}

.trigger-btn {

display: inline-block;

margin: 100px auto;

}

</style>

</head>

<body>

<div class="text-center">

<!-- Button HTML (to Trigger Modal) -->

<a href="#myModal" class="trigger-btn" data-toggle="modal">Login Here</a>

</div>

<!-- Modal HTML -->

<div id="myModal" class="modal fade">

<div class="modal-dialog modal-login">

<div class="modal-content">

<div class="modal-header">

<div class="avatar">

<img src="Avatar.png" alt="Avatar">

</div>

<h4 class="modal-title">Member Login</h4>

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

</div>

<div class="modal-body">

<form action="/examples/actions/confirmation.php" method="post">

<div class="form-group">

<input type="text" class="form-control" name="username" placeholder="Username" required="required">

</div>

<div class="form-group">

<input type="password" class="form-control" name="password" placeholder="Password" required="required">

</div>        

<div class="form-group">

<button type="submit" class="btn btn-success btn-lg btn-block login-btn">Login</button>

</div>

</form>

</div>

<div class="modal-footer">

<a href="#">Forgot Password?</a>

</div>

</div>

</div>

</div>  

</body>

</html>

How to Create CSS Counter

 CSS COUNTER CREATION STEP BY STEP

EXAMPLE : 

<style>

body {

  counter-reset: section;

  background-color: DodgerBlue;

}

h2{

border:1px solid red;

background-color: tomato;

padding: 15px;

box-shadow: 1px 1px 1px 1px;

}

h2:hover{

background-color: black;

color: white;

}

h2::before {

  counter-increment: section;

  content: " " counter(section) " ";

  color: white;

  border-radius: 50%;

  border-color: black;

  border-style: solid;

  padding-left:08px;

  text-align: center;

  background-color: DodgerBlue;

}

</style>

<h2> Web Design Tutorial</h2>

<h2> HTML Tutorial</h2>

<h2> CSS Tutorial</h2>

<h2> JavaScript Tutorial</h2>

<h2> Bootstrap Tutorial</h2>

<h2> Lean All Programming and Scripting Languages with Youtube.com/avadhtutor</h2>

<h2>Please Like Share and Subscribe Our Channel </h2>

learn all Programming with youtube.com/avadhtutor

Linear Gradient Using CSS

 CSS Linear Gradient Example Step by Step

Just copy and past below code and run your Program

All Linear Gradient Example Listed Here:

<!-- <body style="background:linear-gradient(red,blue,yellow)"> -->

 <body style="background:linear-gradient(to top left, red,blue,yellow)"> 

<input type=submit value=" Create Account  " style="width:230px; padding:15px; background:linear-gradient(to bottom left, green, tomato, white,black,blue)">

<h1 style="background:linear-gradient(green 30%, red 30%, yellow 40% ); height:200px;">Welcome to CSS3 Gradient</h1>

<input type=submit style="background: linear-gradient(orange 30%, blue 10%, tomato 50%, black ); 

 height:180px; width:250px; color:white; font-size:25px; border-radius:10px;">

Learn all Programming and Scripting languages with youtube.com/avadhtutor

 

How to Create Multi Color Background Using CSS

 How to Create Multi Color Background Using CSS

Example just Copy and past code to Your Editor and View Multi Color background Output Using CSS 

<!-- HTML <body bgcolor=yellow> -->

<!-- CSS  <body style="background:red;"> -->

<!--<body style="background:linear-gradient(red,yellow);"> -->

 <body style="background:linear-gradient(orange,black,blue, yellow)"> 

<h1 style="background:linear-gradient(white, blue)">welcome</h1>

<button style="background:linear-gradient(red, orange,yellow); width:200px; padding:10px;">Click me</button><br>

<input type=text style="background:linear-gradient(pink,yellow,green); width:250px; padding:10px;">

Learn all Programming Languages with youtube.com/avadhtutor

Padding In CSS

 How to use Padding in CSS

Padding is the space between its content and its border Area.

Example1: 

<p style="padding-left:20px;">welcome</p>

Example2:

<p style="background-color:yellow; padding:50px;"> Padding Attribute for hello this is a testing Hello hi this is simple text abcd aa</p>

Example 3:

<p style="padding-right:40px;">hello welcome this is a Padding Attribute for CSS this attribute make space inside a Elements</p>

Example 4:

<p style="padding-top:40px; background-color:blue; ">hello welcome this is a Padding Attribute for CSS this attribute make space inside a Elements</p>

Example 5:

<p style="padding-bottom:40px; background-color:orange; ">hello welcome this is a Padding Attribute for CSS this attribute make space inside a Elements</p>

Example 6: 

<p style="padding-bottom:30px; padding-left:40px; padding-right:50px; padding-top:30px;  background-color:pink; ">hello welcome this is a Padding Attribute for CSS this attribute make space inside a Elements</p>

Learn all Programming and Scripting Languages with youtube.com/avadhtutor

Margin Using CSS

 How to use and Apply Margin in CSS

with avadh tutor margin property or attribute define as the space of just about an HTML tag. The margin specifies a property elements for setting the margin properties attributes in one statement. The margin-bottom specifies the bottom margin of an element (tag). The margin-top specify the top margin of an element (tag).

Examples: 

<!-- Margin is Apply inside a body tag cover all over page

padding is apply inside a element (tag)

-->

<!-- <body style="margin:60px;"> -->

<body style="margin-left:30px; margin-top:100px; margin-right:50px; margin-bottom:60px;">

<p style="text-align:justify;" >Avadh  Tutor is Information Technology Based channel that provide information like Html tutorial, Html5 tutorial, CSS tutorial, step by step CSS3 ,how to create website using Bootstrap, Javascript, JQuery, Angular Js, website development using  PHP, step by step php mysqli, ASP.NET tutorial, C#.NET tutorial, WordPress tutorial with theme plugins widgets how to create your own theme , theme development using wordpress, how to create ecommerce online shopping website using magento, magento 2.x tutorial,  UI  UX, Website Designing and Website Development, software development, learn bootstrap, how to create responsive website using wordpress, how to create software using c#.net  and so on with avadh tutor

<br><br>

Avadh  Tutor is Information Technology Based channel that provide information like Html tutorial, Html5 tutorial, CSS tutorial, step by step CSS3 ,how to create website using Bootstrap, Javascript, JQuery, Angular Js, website development using  PHP, step by step php mysqli, ASP.NET tutorial, C#.NET tutorial, WordPress tutorial with theme plugins widgets how to create your own theme , theme development using wordpress, how to create ecommerce online shopping website using magento, magento 2.x tutorial,  UI  UX, Website Designing and Website Development, software development, learn bootstrap, how to create responsive website using wordpress, how to create software using c#.net  and so on with avadh tutor

</p>

#3 Create fully responsive and attractive card view with footer || mater...

Types of CSS

 TYPES OF CSS

- Inline CSS

- Multi Line CSS

- Internal CSS

- External CSS

________________________________________

INLINE CSS : 

An inline CSS is used to apply a unique style to a single HTML tag or element.

Syntax: <tag style="attribute:value">-----</tag>

Example:

    <p style="color:red;">welcome 123</p>

    <h2 style="background-color:yellow;">hello this is a INline Style</h2>

_______________________________________________

MULTI-LINE CSS : 

An Multi Line CSS is used to apply a unique style to a single HTML tag or element with Multiple CSS Attributes or Properties.

Syntax: <tag style="attribute:value; attribute:value;">------</tag>

Example :

    <p style="color:white; background-color:black;">Welcome 111</p>

    <a href="" style="color:orange; background-color:maroon; padding:10px; text-                            decoration:none;">Home</a>

_________________________________________________

INTERNAL CSS:

internal CSS is used to define a style for a single HTML page. within a <style> element

Syntax:

    <style>

            ----- css coding ----

    </style>

Example:

<style>

p

{

color:red;

}

h1{ color:yellow; background-color:black;}

b

{

color:green; 

background-color:pink;

font-size:30px;

padding:12px;

}

a{color:white; background-color:black; padding:10px; font-family:'Bauhaus 93'; text-decoration:none;}

</style>

<a href="">Home</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="">Contact Us</a><br><br><br><br>

<b>youtube.com/avadhtutor</b>

<h3>Learn All Programming</h3>

<p>AVADH TUTOR</p>

<h4>Internal</h4>

<h1> CSS</h1>

________________________________________

External CSS: 

this style sheet  you can change the look of an entire website by changing just one file, External CSS hash two files one is create with extension .css and another file with extension .html

Example:

Create File : external.css

    body{ background-color:orange; }

    p{ color:blue; font-size:21px; font-family:'Britannic'; }

    h1{ background-color:yellow; }

Create File : simple.html

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

    youtube.com/avadhtutor

    <h1>External StyleSheet</h1>

    <p>This is Simple Example</p>

_________________________

Learn All Programming and Scripting Languages with youtube.com/avadhtutor

Learn HTML For beginners : https://www.youtube.com/watch?v=oxIsm512PdM&list=PLkx9f4H3tJMKHviDIr-BsBd_h2dVtWWf5

Learn CSS For Beginners: https://www.youtube.com/watch?v=tJWtvmRanOc&list=PLkx9f4H3tJMKDiznW8Zus-4-N0mWlfkiB

Learn CSS3 For Beginners: https://www.youtube.com/watch?v=EHczBXp-cmc&list=PLkx9f4H3tJMJ2xk5lOUsfpexF0IH3_sOA

Simple Border Attribute Example Using CSS

 Simple Border Attribute Example Using CSS

(Just Copy and past This Code to Your Editor like NotePad, SubLime, Atom, VS etc...)

Example 1: Using Border Style and Width Properties

<a href="" style="border-style:dotted; border-width:2px; ">Home</a> &nbsp;&nbsp;&nbsp;

<a href="" style="border-style:solid; border-width:3px; border-color:red;">Contact Us</a>

Example 2: Using Border Color and Style Properties

<p style="border-color:blue; border-style:inset; ">welcome 123</p>

<span style="border-color:blue; border-style:inset;">welcome 111</span>

Example 3: General Example

                <p style="border-top-color:red; border-top-style:dotted; border-top-width:3px; 

                border-bottom-color:green; border-bottom-style:groove; border-bottom-width:4px;

                border-right-color:orange; border-right-style:solid; 

       border-left-color:tomato; border-left-style:outset; ">welcome to Border Attribute</p>

How to create Background image and color using CSS Step by step Example

 How to Create Background Image and Color Using CSS Step By Step

(Just you Copy and past This Code to Your Editor)

Example 1: Using HTML

    <body background="nature.jpg"> 

Example 2: Using CSS with No-Repeat Attribute

    <body style="background-image:url('nature.jpg'); background-repeat:no-repeat;"> 

Example 3: Using CSS Repeat Image Width Wise

    <body style="background-image:url('nature.jpg'); background-repeat:repeat-x;"> -->

Example 4: Using CSS Repeat Image as Height Wise

    <body style="background-image:url('nature.jpg'); background-repeat:repeat-y;">

_________________________________

Example 5: Using HTML Apply Background Color

    <p bgcolor=red>welcome 123</p>

Example 6: Using CSS Apply Background Color

    <p style="background-color:red;">welcome 123</p>

    <p style="color:blue; background-color:yellow;">Hello this is a Color Attribute</p>

Example 7: General Example

        <p style="background-image: url('1.png');">welcome <br>

Hello this is<br> welcome 123<br> aksjdk sdkj kasjklkl asljaskljkl askl </p>

        <span style="background-image:url('1.png');">welcome to css<br> hello this is a test<br>                     cascading style sheet</span>

__________________________

Learn All Programming and Scripting Languages with youtube.com/avadhtutor

Learn HTML: https://www.youtube.com/watch?v=oxIsm512PdM&list=PLkx9f4H3tJMKHviDIr-BsBd_h2dVtWWf5

Learn CSS: https://www.youtube.com/watch?v=tJWtvmRanOc&list=PLkx9f4H3tJMKDiznW8Zus-4-N0mWlfkiB

learn CSS 3: https://www.youtube.com/watch?v=EHczBXp-cmc&list=PLkx9f4H3tJMJ2xk5lOUsfpexF0IH3_sOA

___________________________