Posts

Clip Path Image

Image
  <!DOCTYPE html> <html> <head> <title>Clip Path</title> </head> <body> <section></section> </body> </html> <style type="text/css"> *{ margin: 0px; padding: 0px; box-sizing: border-box; } section{ position: relative; width: 100%; min-height: 100vh; background: url(bg.jpg); background-size: cover; } section:before{ content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: url(splash.jpg); background-size: 1800px; background-position: center; mix-blend-mode: screen; } </style>
Post a Comment
Read more

3D Hover Effect

Image
<!DOCTYPE html> <html> <head> <title> 3d Content </title> </head> <body> <div class =" container "> <div class =" imgBx "> <img src =" # "> <img src =" # "> <img src =" # "> </div> <h2> CSS 3D Perspective Post </h2> <div class =" Skew "> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <a href =" # "> Read More </a> </div> </body> </html>...
Post a Comment
Read more

Shine Button

Image
<!DOCTYPE html> <html> <head> <title> Shite Button </title> </head> <body> <a href =" # "> Shine Button </a> <a href =" # "> Shine Button </a> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; font-family: arial; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; flex-direction: column; background: #19011d; } a{ position: relative; padding: 15px 30px; margin: 10px; background: #27022d; color: #fff; text-decoration: none; letter-spacing: 1px; border: 1px solid #000; transition: 0.5s; overflow: hidden; } a:hover{ background: #a41ee9; } a:nth-child(2):hover{ background: #ff3c7f; } a::before{ content: ''; position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg...
Post a Comment
Read more

Radmon Password Generator App

Image
<!DOCTYPE html> <html> <head> <title> Random Password </title> </head> <body> <div class =" inputBox "> <h2> Radmon Password Generator App </h2> <input type =" text " name ="" placeholder =" Create Password " id =" password " readonly =""> <div id =" btn " onclick =" getPassword(); "> Generate Password </div> </div> </body> </html> <script type =" text/javascript "> function getPassword() { var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+?><:{}[]./<>"; var passwordLength = 16; var password = ""; for (var i=0; i<passwordLength; i++){ var randomNumber = Math.floor(Math.random() * chars.length); password += chars.substring(randomNumber, randomNumber+1); ...
Post a Comment
Read more

Click Navigation

Image
<!DOCTYPE html> <html> <head> <title> Navigation </title> </head> <body> <nav> <div id =" marker "> </div> <a href =" # "> Home </a> <a href =" # "> About </a> <a href =" # "> Services </a> <a href =" # "> Portfolio </a> <a href =" # "> Team </a> <a href =" # "> Contact Us </a> </nav> <script type =" text/javascript "> var marker = document.querySelector('#marker'); var item = document.querySelectorAll('nav a'); function indicator(e) { marker.style.left = e.offsetLeft+"px"; marker.style.width = e.offsetWidth+"px"; } item.forEach(link => { link.addEventListener('click' , (e)=>{ indicator(e.target); }) }) </script> </body...
Post a Comment
Read more

Sticky

Image
<!DOCTYPE html> <html> <head> <title>Sticky</title> </head> <body> <nav id="navbar"> <a href="#" class="brand">Brand Name</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portifolio</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Exc...
Post a Comment
Read more

Progress Bar

Image
<!DOCTYPE html> <html> <head> <title>Skills HTML</title> </head> <body> <div class="container"> <h2>CSS Skills Bar UI Design</h2> <div class="skills"> <span class="Name">HTML</span> <div class="percent"> <div class="progress" style="width: 95%"></div> </div> <span class="Value">95%</span> </div> <div class="skills"> <span class="Name">CSS</span> <div class="percent"> <div class="progress" style="width: 90%"></div> </div> <span class="Value">90%</span> </div> <div class="skills"> <span class="Name">JavaScript</span> <div class="percent...
Post a Comment
Read more