Blog

How to Create a full screen video background using HTML, CSS

Learn How to Create a full screen video background using HTML, CSS Adding HTML <div class=”videobg”> <video src=”https://adaptabiz.com/wp-content/uploads/2021/05/Pexels-Videos-1234162.mp4″ loop muted autoplay> </video> <div class=”overlay”> </div> <h1>Fullscreen video background </h1> </div> Adding CSS body { margin: 0; padding: 0; } .videobg { position: relative; overflow: hidden; width: 100%; height: 100vh; background: url(body { margin: 0; padding: […]

How to Create an Off-Canvas Menu / Side Bar Navigation

How to Create an Off-Canvas Menu / Side Bar Navigation Step 1) Add HTML: <div id=”mySidenav” class=”sidenav”> <a href=”javascript:void(0)” class=”closebtn” onclick=”closeNav()”>&times;</a> <a href=”#”>About</a> <a href=”#”>Services</a> <a href=”#”>Clients</a> <a href=”#”>Contact</a> </div> <div id=”main”> <h2>Off-Canvas Menu / Side Bar Navigation</h2> <p>Click on the element below to open the side navigation menu, and push this content to the […]

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 Weight Converter using HTML and JavaScript

How to Create Weight Converter using HTML and JavaScript For Converting Pounds to Kilogram Adding HTML : <h2>Weight Converter Pound to Kilogram</h2> <p>Type a value in the Pounds field to convert the value to Kilograms:</p> <p> <label>Pounds</label> <input id=”inputPounds” type=”number” placeholder=”Pounds” oninput=”weightConverter(this.value)” onchange=”weightConverter(this.value)”> </p> <p>Kilograms: <span id=”outputKilograms”></span></p>   Adding Javascript function weightConverter(valNum) { document.getElementById(“outputKilograms”).innerHTML=valNum/2.2046; } […]

How to create a Scroll indicator with CSS and JavaScript

How to create a Scroll indicator with CSS and JavaScript   Step 1) Add HTML: <div class=”header”> <h2>Scroll Indicator</h2> <div class=”progress-container”> <div class=”progress-bar” id=”myBar”></div> </div> </div> <div class=”content”> <h3> Please Scroll Down to See The Effect</h3> <p>This progress bar will <b>show how far a page has been scrolled</b>.</p> <p>It also <b>works when you scroll back […]

How to Create an Avatar image with CSS

How to Create an Avatar image with CSS Step 1) Add HTML: <h2>How to create Avatar Images with CSS</h2> <img src=”https://adaptabiz.com/wp-content/uploads/2022/01/img_avatar.png” alt=”Avatar” class=”avatar”> <img src=”https://adaptabiz.com/wp-content/uploads/2022/01/img_avatar2.png” alt=”Avatar” class=”avatar”>   Step 2) Add CSS: .avatar { vertical-align: middle; width: 50px; height: 50px; border-radius: 50%; } Full Code and Output : See the Pen Avatar image with CSS […]

How to Change Background Images on Scroll with CSS.

How to Change Background Images on Scroll with CSS.   Step 1) Add HTML: <div class=”bg-image img1″></div> <div class=”bg-image img2″></div> <div class=”bg-image img3″></div> <div class=”bg-image img4″></div> <div class=”bg-image img5″></div> <div class=”bg-image img6″></div> <div class=”bg-text”>DEMO</div> Step 2) Add CSS: body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } […]

Scroll to top