toggle switch style02

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Toggle Switch | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="Toggle Switch">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style.css"  rel="stylesheet" type="text/css">
</head>
<body >
      <div class="container mt-5">
        <div class="row">
          <div class="col-lg-6">

            <div class="toggle-group">
              <input type="checkbox" name="on-off-switch" id="on-off-switch" checked="" tabindex="1">
              <label for="on-off-switch">
                  <span class="aural">Show:</span> Show Accessible Toggle Switch
              </label>
              <div class="onoffswitch pull-right" aria-hidden="true">
                  <div class="onoffswitch-label">
                      <div class="onoffswitch-inner"></div>
                      <div class="onoffswitch-switch"></div>
                  </div>
              </div>
            </div>

          </div>
        </div>
      </div>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');

* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
}

body {
    position: fixed;
    width: 100%;
    height: 100%;
  }
  /* ON/OFF Switch */
  .onoffswitch {
    position: relative;
    width: 55px;
    display: inline-block;
    font-size: 80%;
  }
  .onoffswitch .onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid hsl(0, 0%, 90%);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    margin: 0;
  }
  .onoffswitch .onoffswitch-inner {
    width: 200%;
    margin-left: -100%;
    -webkit-transition: margin 0.15s ease-in-out;
    -o-transition: margin 0.15s ease-in-out;
    -moz-transition: margin 0.15s ease-in-out;
    transition: margin 0.15s ease-in-out;
  }
  .onoffswitch .onoffswitch-inner:before,
  .onoffswitch .onoffswitch-inner:after {
    float: left;
    width: 50%;
    height: 24px;
    padding: 0;
    line-height: 24px;
    font-size: 80%;
    color: hsl(0, 0%, 100%);
    font-weight: normal;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .onoffswitch .onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: hsl(203, 100%, 39.1569%);
    color: hsl(0, 0%, 100%);
  }
  .onoffswitch .onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: hsl(0, 0%, 98%);
    color: hsl(0, 0%, 24%);
    text-align: right;
  }
  .onoffswitch .onoffswitch-switch {
    width: 22px;
    height: 22px;
    margin: 0;
    background: hsl(0, 0%, 100%);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    bottom: 0;
    right: 35px;
    -webkit-transition: right 0.15s ease-in-out;
    -o-transition: right 0.15s ease-in-out;
    -moz-transition: right 0.15s ease-in-out;
    transition: right 0.15s ease-in-out;
  }
  .toggle-group {
    position: relative;
    height: 27px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    top: 50%;
    left: 20px;
    margin-top: -13.5px;
  }
  .toggle-group input[type=checkbox] {
    position: absolute;
    left: 10px;
  }
  .toggle-group input[type=checkbox]:checked ~ .onoffswitch .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
  }
  .toggle-group input[type=checkbox]:checked ~ .onoffswitch .onoffswitch-label .onoffswitch-switch {
    right: 1px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  }
  .toggle-group input[type=checkbox]:focus ~ .onoffswitch {
    outline: thin dotted #333;
    outline: 0;
  }
  .toggle-group label {
    position: absolute;
    cursor: pointer;
    padding-left: 65px;
    display: inline-block;
    text-align: left;
    line-height: 24px;
    width: 100%;
    z-index: 1;
    height: 24px;
    font-weight: 200;
  }
  /* ==== Accessibility ===== */
  .aural {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }
  .aural:focus {
    clip: rect(0, 0, 0, 0);
    font-size: 1em;
    height: auto;
    outline: thin dotted;
    position: static !important;
    width: auto;
    overflow: visible;
  }

                                    
Affichage des images aléatoire avec js

Affichage des images aléatoire avec js

Ajouter une pagination1

Ajouter une pagination1

Alert Bootstrap4 style01

Alert Bootstrap4 style01

Bloc resizable with jquery

Bloc resizable with jquery

Card 4 Product Style01

Card 4 Product Style01

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Image hover 03

Image hover 03

Image hover 05

Image hover 05

Input range slider HTML style01

Input range slider HTML style01

Manual Slideshow

Manual Slideshow

Timeline style05

Timeline style05

login page green one

login page green one