How to Create Drop-down Menu in Navigation bar Using HTML and CSS Step 1) Adding HTML: <head> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> </head> <div class=”navbar”> <a href=”#home”>Home</a> <a href=”#news”>About</a> <div class=”dropdown”> <button class=”dropbtn”>Dropdown Menu <i class=”fa fa-caret-down”></i> </button> <div class=”dropdown-content”> <a href=”#”>Link 1</a> <a href=”#”>Link 2</a> <a href=”#”>Link 3</a> </div> </div> </div> <h3>Dropdown […]
How to Convert Color image to Black & White using CSS Filter ( Color to Grayscale)
Many a times, there is necessity of converting Color image into Black and White or Grayscale. Here in this very simple tutorial, we gonna show you, how to convert or change any Color image into Black and white How to Convert Color image to Black & White using CSS Filter ( Color to Grayscale) Step […]
How to add form validation for empty input fields with JavaScript.
How to add form validation for empty input fields with JavaScript. Step 1 : Create a Simple input field in HTML <h2>Input field validation via JavaScript</h2> <p>Press Submit button without entering any text.</p> <form name=”myForm” action= “/action_page.php” onsubmit=”return validateForm()” method=”post” required> Name: <input type=”text” name=”fname”> <input type=”submit” value=”Submit”> </form> Step 2: Add JavaScript function validateForm() […]
How To Create a Blurry Background Image Using CSS
How To Create a Blurry Background Image Using CSS Adding HTML (image and text) : <div class=”bg-image”></div> <div class=”bg-text”> <h2>Welcome to World of</h2> <h1 style=”font-size:50px”>Virtual Reality</h1> <p>Where everything is virtual, still feels like real</p> </div> Adding CSS ( making image blurry): body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; } * […]
How to Create a Glowing Text using CSS
How to Create a Glowing Text using CSS Step 1: Adding text to HTML <h1 class=”glow”>This is an example of glowing text</h1> Step 2 : Defining Colors and Effects in CSS body { background-color: black; font-family: arial; } .glow { font-size: 80px; color: #fff; text-align: center; animation: glow 1s ease-in-out infinite alternate; } @-webkit-keyframes […]
How To Create a Coming Soon Page / Maintenance Page Using HTML, CSS and JavaScript
How To Create a Coming Soon Page / Maintenance Page Using HTML, CSS and JavaScript Step 1 : Adding HTML : <div class=”bgimg”> <div class=”topleft”> <div id=”color-overlay”></div> </div> <div class=”middle”> <h1>COMING SOON</h1> <hr> <p id=”demo” style=”font-size:30px”></p> </div> <div class=”bottomleft”> <p>www.adaptabiz.com</p> </div> </div> Step 2 : Adding CSS: body, html { height: 100%; margin: 0; […]
How to create a Modal Box / Dialogue Box with CSS and JavaScript
A modal is a dialog box/popup window that is displayed on top of the current page: How To Create a Modal Box: Step 1 : ADD HTML <h2>Modal Example</h2> <!– Trigger/Open The Modal –> <button id=”myBtn”>Open Modal</button> <!– The Modal –> <div id=”myModal” class=”modal”> <!– Modal content –> <div class=”modal-content”> <span class=”close”>×</span> <p>This is […]
Best Programming Language to Learn in 2021
In today’s world, when technology is so advanced, the most important skill a person should have is to know how to write a computer program. Almost every industry is equipped with computers, Gone are the days of pen and paper. Today, in order to store and access your information, you absolutely need computers. Programmers and […]
What is Blockchain Technology? What are the Advantages of Blockchain?
Blockchain is a technology that is rapidly expanding with the development of new platforms and applications. Blockchain is an open and distributed ledger that can record transactions efficiently, permanently, and verifiably. It was first described as a part of the Bitcoin protocol by ‘Satoshi Nakamoto’ in 2008. Bitcoin needed a way to record and validate […]
How to Create Show Password Feature / Toggle Password Visibility using JavaScript
How to Create Show Password Feature / Toggle Password Visibility using JavaScript Step 1) Add HTML: <p>Click the radio button to show and hide password:</p> Password: <input type=”password” value=”test123″ id=”myInput”><br><br> <input type=”checkbox” onclick=”myFunction()”>Show Password Step 2) Add JavaScript: <script> function myFunction() { var x = document.getElementById(“myInput”); if (x.type === “password”) { x.type = “text”; } […]