Blog

How to Create Responsive Testimonials with CSS

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 […]

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

Scroll to top