Blog

How To Create a Sticky Social Bar / Fixed Social Bar Using HTML / CSS

How To Create a Sticky Social Bar / Fixed Social Bar Using HTML / CSS Step 1 : Loading Font awesome CDN in HTML and Adding Dummy Content (Lorem ipsum) <!– Load font awesome icons –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <!– The social media icon bar –> <div class=”icon-bar”> <a href=”#” class=”facebook”><i class=”fa fa-facebook”></i></a> <a href=”#” […]

How to shake/wiggle an image with CSS.

Learn how to shake/wiggle an image with CSS. Step 1 : Adding HTML – Giving image path <h2> Hover on the image</h2> <img src=”https://image.freepik.com/free-photo/adorable-brown-white-basenji-dog-smiling-giving-high-five-isolated-white_346278-1657.jpg” alt=”Pineapple” width=”30%” height=”30%”> Step 2 : Adding Css img:hover { /* Start the shake animation and make the animation last for 0.5 seconds */ animation: shake 0.5s; /* When the animation […]

How to Create an AutoComplete Form using HTML, CSS and Java Script

Learn How to Create an AutoComplete Form using HTML, CSS and Java Script Step 1) Add HTML: <!–Make sure the form has the autocomplete function switched off:–> <form autocomplete=”off” action=”/action_page.php”> <div class=”autocomplete” style=”width:300px;”> <input id=”myInput” type=”text” name=”myCountry” placeholder=”Country”> </div> <input type=”submit”> </form> Step 2) Create a JavaScript Array: var countries = [“Afghanistan”,”Albania”,”Algeria”,”Andorra”,”Angola”,”Anguilla”,”Antigua &amp; Barbuda”,”Argentina”,”Armenia”,”Aruba”,”Australia”,”Austria”,”Azerbaijan”,”Bahamas”,”Bahrain”,”Bangladesh”,”Barbados”,”Belarus”,”Belgium”,”Belize”,”Benin”,”Bermuda”,”Bhutan”,”Bolivia”,”Bosnia &amp; […]

How to create a popup form with CSS and JavaScript.

How To Create a Popup Form Step 1) Add HTML Use a <form> element to process the input. <div class=”form-popup” id=”myForm”> <form action=”/action_page.php” class=”form-container”> <h1>Login</h1> <label for=”email”><b>Email</b></label> <input type=”text” placeholder=”Enter Email” name=”email” required> <label for=”psw”><b>Password</b></label> <input type=”password” placeholder=”Enter Password” name=”psw” required> <button type=”submit” class=”btn”>Login</button> <button type=”submit” class=”btn cancel” onclick=”closeForm()”>Close</button> </form> </div> Step 2) Add CSS: […]

Learn how to create a fading overlay effect to an image on hover Using HTML & CSS

Learn how to create a fading overlay effect to an image on hover Step 1: Adding HTML <h2>Fade in Overlay</h2> <p>Hover over the image to see the effect.</p> <div class=”container”> <img src=”img_avatar.png” alt=”Avatar” class=”image”> <div class=”overlay”> <div class=”text”>Hello World</div> </div> </div>   Step 2 : Adding CSS : .container { position: relative; width: 50%; } […]

How to create a responsive Slider / Slideshow with CSS and JavaScript

Via this article we gonna Learn how to create a responsive slideshow with CSS and JavaScript. Step 1) Add HTML: <!– Slideshow container –> <div class=”slideshow-container”> <!– Full-width images with number and caption text –> <div class=”mySlides fade”> <div class=”numbertext”>1 / 3</div> <img src=”img1.jpg” style=”width:100%”> <div class=”text”>Caption Text</div> </div> <div class=”mySlides fade”> <div class=”numbertext”>2 / […]

Scroll to top