"web componunt"
Pure CSS 0.6.2 Snippet by bjstephen

Post to Facebook Tweet this

<link href="//cdnjs.cloudflare.com/ajax/libs/pure/0.6.2/pure-min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>mousemove demo</title> <link href="css/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/style3.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="js/wow.min.js"></script> <script> new WOW().init(); </script> </head> <body> <div class="container"> <ul class="nav"> <li class="active">step 1 hai this is jus test</ li> <li >step 2 hai this is jus test</li> <li >step 3 hai this is jus test</li> </ul> <h3>Chate</h3> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5"> <ul class="menu"> <li><i class="fa fa-heart"></i> <div class="out">hi</div></li> <li><i class="fa fa-check"></i><div class="out">hi</div></li> <li><i class="fa fa-heart"></i><div class="out">how are you</div></li> <li> <i class="fa fa-heart"></i> <div class="out"> <div class="check-box"> <input type="checkbox" id="chek11"> <label for="chek11"><span>Checkbox</span></label> </div></div> </li> </ul> </div></div> <h3>Chekbox</h3> <div class="row"> <div class="col-md-12 checked-box"> <div class="check-box"> <input type="checkbox" id="chek1"> <label for="chek1"><span>Checkbox</span></label> </div> <div class="check-box"> <input type="checkbox" id="chek2"> <label for="chek2"><span>Checkbox</span></label> </div> </div> </div> <h3>Switch</h3> <div class="row"> <div class="col-md-12 "> <div class="Switch-box"> do you what turn it ON? <input type="checkbox" id="chek22"> <label for="chek22"></label> </div> <div class="Switch-box"> do you what turn it OFF? <input type="checkbox" id="chek33"> <label for="chek33"><span></span></label> </div> </div> </div> <h3>Range</h3> <div class="col-md-6 "> <input type="range" max="20" min="10" step="1"> </div> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html>
.thumbnail { border: 0px; } .caption { background: #333; } .caption h4,p { text-align: center; color: #fff; } .header { background: rgb(255, 39, 64); color: #fff; } header { padding: 10px; font-family: sans-serif; font-size: 18pt; } ul{ counter-reset: step; } .nav li:before { content: counter(step); counter-increment: step; display: block; border:2px solid #333; border-radius: 30px; margin: 10px auto; height: 40px; width: 40px; background: #fff; line-height: 34px; } .nav li:after { content: ''; background: #333; height: 3px; position: absolute; width: 100%; left: -50%; top: 30px; z-index: -1; } .nav li:first-child:after { content: none; } .nav li.active:before { border:4px solid #f40808; } .nav li.active + li:after { background: #f40808; } .nav li.active { color: #f40808; } .nav li { list-style-type: none; text-align: center; position: relative; float: left; width: 33.33% } .menu { display: block; list-style-type: none; margin: 0px; padding: 0px; } .menu li:last-child:before { content: none; } .menu li:before { content: ''; background: #ddd; height: 100%; display: block; width: 1px; margin-left: 15px; z-index: -1; margin-top: 20px; position: absolute; } .menu li i:after { content: ''; width: 50px; height: 1px; background: #ddd; position: absolute; z-index: -1; margin-top: 15px; } .menu li:nth-child(odd) i { background: #ff3d3d; color:#fff; } .menu li i { border:1px solid #ddd; border-radius: 30px; height:30px; line-height: 30px; background: #fff; color: #727272; width: 30px; text-align: center; } .check-box input[type="checkbox"] { display: none; } .check-box input[type="checkbox"]:checked + label { background: #ff4b4b; } .check-box input[type="checkbox"]:checked + label:before { content: ''; height: 8px; width: 13px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; position: absolute; left: 4px; margin: 5px auto; transform: rotate(-45deg); } .check-box label span { margin-left: 30px; } .check-box label { height: 25px; width: 25px; position: relative; transition: 1s all; border: 2px solid #ddd; } body { color: #5d5d5d; } h3::after { content: ''; border-bottom: 1px solid #ddd; width: 50%; margin-top: 10px; height: 1px; display: block; } h3 { position: relative; font-size: 13pt ; } .Switch-box input[type="checkbox"]:checked + label:after { left: 32px; } .Switch-box label:after { content: ''; height: 16px; width: 16px; position: absolute; border-radius: 50px; top: 2px; left: 2px; transition: 0.5s all; background: #fff; } .Switch-box input[type="checkbox"] { display: none; } .Switch-box input[type="checkbox"]:checked + label { background: #ff3d3d; } .Switch-box label { height: 20px; width: 50px; transition: 0.5s all; position: absolute; background: #999; vertical-align: middle; border-radius: 50px; } .Switch-box { margin: 10px auto; } .menu li:nth-child(odd) .out { background: #ff3d3d; color:#fff; } .menu li { margin: 10px auto; position: relative; } .menu li .out { position: absolute; top: 0px; width: 100%; left:40px; background: #fff; border: 1px solid #ddd; padding: 5px; }

Related: See More

BLK• Design System

Questions / Comments: