Posts

Showing posts from October, 2021

In this video, I'm going to show you how to style an awesome button using HTML and CSS

-
Image
In this video, I'm going to show you how to style an awesome button using HTML and CSS This is the code ************************************************************************** <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   <style> body{   margin: 0;   padding: 0;   box-sizing: border-box;   display: flex;   justify-content: center;   align-items: center;   height: 100vh;   background: linear-gradient(pink,blue); } .btn{   border: 1ps dashed #000;   background: rebeccapurple;   color: #fff;   padding: 10px 20px;   border-radius: 50px;   transition: .3s ease-in-out; } .btn:hover{    border-radius: 0px;    color: rebeccapurple;    background: #fff; } </style> </head> <body>   <di...
Post a Comment
Read more

How to install and use Datepicker plugin on website by jishaansinghal

-
Image
  How to install and use Datepicker plugin on website by jishaansinghal Copy and paste it ************************** <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">   <link rel="stylesheet" href="https://resources/demos/style.css">   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>   <style> body{   background: linear-gradient(to right, #abc, #de4,blue); } </style> </head> <body> <h1>This is Date Picker</h1> <p>Pick The Date: <input type="text" class="datep...
Post a Comment
Read more

How to use and install custom FAQ plugin with full source code by jishaansinghal

-
Image
How to install and use FAQ with full source code by jishaansinghal Copy and paste it ************************** <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>   <style> .faq{   width: 80%; } h3{   padding: 15px 0px;   box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, .5),               inset 5px 5px 5px 2px rgba(0, 0, 0, .5); } body{   background: linear-gradient(to right, #abc, #de4,green); } </style> </head> <body>   <div class="faq"> <h3>This is Question no: 1</h3> <div>   <p>Lorem ipsum dolor sit amet consectetur adipisicing ...
Post a Comment
Read more

How to install and use Draggable Content Plugin without download just use CDN with full source code by jishaansinghal

-
Image
  How to install and use Draggable Content Plugin without download just use CDN with full source code by jishaansinghal Drag plugins code just copy and paste this code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style> .box{ height: 200px; width: 200px; background: #000; color: #fff; display: flex; justify-content: center; align-items: center; } .box h1{ font-size: 20px; font-weight: bolder; } </style> </head> <body> <div class="box"> <h1>Drag me any where</h1> </div> <script> $( function() { $( "...
Post a Comment
Read more

How to install and use Type js plugin without download just use CDN with full source code by jishaansinghal

-
Image
How to install and use Type js plugin without download just use CDN with full source code by jishaansinghal Type js plugins code just copy and paste this code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ font-size: 5em; color: #fff; font-weight: bold; background: url('your img'); width: 100%; height: 100vh; display: flex !important; justify-content: center; align-items: center; width: 100%; height: 100vh; } #typed{ color: red; } </style> </head> <body> <div class="hero"> <h1>I'm <span id="typed"></span></h1> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.0/typed.min.js"></scrip...
Post a Comment
Read more