How to Create Responsive Testimonials with CSS Step 1 : Adding HTML <h2>Responsive Testimonials</h2> <p>Resize the browser window to see the effect.</p> <div class=”container”> <img src=”https://adaptabiz.com/wp-content/uploads/2020/10/procreator.jpg” alt=”Avatar” style=”width:90px”> <p><span>Chris Fox.</span> CEO at Mighty Schools.</p> <p>JLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text […]
Augmented and Virtual Reality in Education
In today’s World, Applications of VR / AR are not limited to Entertainment purposes only, but for various other sectors also. For Eg : Medical , Military , Shopping, Marketing etc. When we talk about the impact of AR and VR in Education, VR and AR technologies are gradually transforming the education world’s learning experience. […]
How to Create a “Read More – Read Less” button with JavaScript.
How to Create a “Read More – Read Less” button with JavaScript. Step 1) Add HTML: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id=”dots”>…</span><span id=”more”>erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue […]
How to Create Zooming Effect on Hover Using CSS
How to Create Zooming Effect on Hover Using CSS Step 1: Adding HTML <h1>Zoom on Hover</h1> <p>Hover over the div element.</p> <div class=”zoom”></div> Step 2 : Adding CSS * { box-sizing: border-box; } .zoom { padding: 50px; background-color: blue; transition: transform .2s; width: 200px; height: 200px; margin: 0 auto; } .zoom:hover { -ms-transform: scale(1.5); /* […]
How to Detect if CAPS LOCK is ON using JavaScript
How to Detect if CAPS LOCK is ON inside an input field using JavaScript Step 1 : Create an input field using HTML <h3>Detect Caps Lock</h3> <p>Press the “Caps Lock” key inside the input field to trigger the function.</p> <input id=”myInput” value=”Some text..”> <p id=”text”>WARNING! Caps lock is ON.</p> Step 2 : Add Color to […]
How to copy text to the clipboard with JavaScript
How to copy text to the clipboard with JavaScript Step 1) Add HTML: <p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p> <input type=”text” value=”Hello World” id=”myInput”> <div class=”tooltip”> <button onclick=”myFunction()” onmouseout=”outFunc()”> <span class=”tooltiptext” id=”myTooltip”>Copy to […]
How to Create a Responsive Checkout form with CSS
How to Create a Responsive Checkout form with CSS Step 1 : Create a form in HTML <h2>Responsive Checkout Form Using CSS</h2> <p>Resize the browser window to see the effect. When the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other.</p> <div […]
How to create a Sticky Menu with CSS and JavaScript
How to create a Sticky Menu with CSS and JavaScript Step 1) Add HTML: Create a navigation bar: <div class=”header”> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <div id=”navbar”> <a class=”active” href=”javascript:void(0)”>Home</a> <a href=”javascript:void(0)”>News</a> <a href=”javascript:void(0)”>Contact</a> </div> <div class=”content”> <h3>What is Lorem Ipsum?</h3> <p>Lorem Ipsum is simply dummy text of the […]
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 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; } * […]