Blog

How to Create Drop-down Menu in Navigation bar Using HTML and CSS

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 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”>&times;</span> <p>This is […]

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”; } […]

Scroll to top