Posts

Showing posts from May, 2020

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

Scroll bar

Image
<!DOCTYPE html> <html> <head> <title> Scroll HTml </title> </head> <body> <div class =" scrollTop " onclick =" scrollToTop(); "> </div> <div class =" container "> <h2> Animated Scoll to top bottom using vanilla JavaScript </h2> <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.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 ullam...
Post a Comment
Read more

soft button

Image
<!DOCTYPE html> <html> <head> <title>Soft Button</title> </head> <body> <a href="#"><span>Button</span></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; background-color: #f2f3f7; } a{ position: relative; display: inline-block; padding: 10px 30px; text-decoration: none; text-transform: uppercase; font-weight: 500; letter-spacing: 2px; color: #5a84a2; font-size: 18px; border-radius: 40px; box-shadow: -2px -2px 8px rgba(255,255,255,1), -2px -2px 12px rgba(255,255,255,0.5), inset 2px 2px 4px rgba(255, 255, 255, 0.1), 2px 2px 8px rgba(0,0,0,0.15); } a:hover{ box-shadow: inset -2px -2px 8px rgba(255,255,255,1), inset -2px -2px 12px rgba(255,255,255,0.5), inset 2...
Post a Comment
Read more

Soft Form

Image
<!DOCTYPE html> <html> <head> <title> Soft Form Dark </title> </head> <body> <div class =" form "> <h2> Login </h2> <form action =" # " method =" post "> <div class =" input "> <div class =" inputBox "> <label> User </label> <input type =" text " name ="" placeholder =" example@xyz.com "> </div> <div class =" inputBox "> <label> Password </label> <input type =" text " name ="" placeholder =" ...... "> </div> <div class =" inputBox "> <label> Password </label> <input type =" Submit " name ="" value =" Sing in "> </div> <p class =" forget "> Forget...
Post a Comment
Read more

Button Hover

Image
<!DOCTYPE html> <html> <head> <title> Button </title> </head> <body> <button class =" button "> continue <span> </span> </button> </body> </html> <style type =" text/css "> *{box-sizing: border-box;} body{ display: flex; justify-content: center; align-items: center; height: 100vh; } button{ border: none; display: block; position: relative; padding: 0.5em 2.2em; font-size: 25px; background-color: transparent; cursor: pointer; user-select: none; color: royalblue; overflow:hidden; } button span{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: transparent; z-index: -1; border: 5px solid royalblue; } .button span::before{ content: ''; position: absolute; width: 8%; height: 500%; background-color: white; to...
Post a Comment
Read more

Floating Menu

Image
<!DOCTYPE html> <html> <head> <title> Floating Html </title> </head> <body> <div class =" action " onclick =" actionToggle(); "> <span> + </span> <ul> <li> <img src =" facebook.png "> Share On facebook </li> <li> <img src =" facebook.png "> Share On Twitter </li> <li> <img src =" facebook.png "> Share On Instagram </li> <li> <img src =" facebook.png "> Share On Pintrest </li> <li> <img src =" facebook.png "> Share On Linkedin </li> </ul> </div> <script type =" text/javascript "> function actionToggle() { var action = document.querySelector('.action'); action.classList.toggle('active') } </script> </body> </html> <style ty...
Post a Comment
Read more

Flip Hover Images

Image
<!DOCTYPE html> <html> <head> <title>moving</title> </head> <body> <div class="container"> <div class="box " data-tilt data-tilt-axis="y"> <div class="imgBx"> <img src="img-box.jpg"> </div> <div class="contentBx"> <h2>Tilt Box Hover Effects</h2> <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> </div> </div> <div class="box"> <div class="...
Post a Comment
Read more

Soft

Image
<!DOCTYPE html> <html> <head> <title> Soft </title> </head> <body> <div class =" container "> <div class =" box "> <img src =" icons.png "> </div> <div class =" box "> <img src =" icons.png "> </div> </div> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f3f4f6; } .box{ position: relative; width: 250px; height: 250px; margin: 25px; display: flex; justify-content: center; align-items: center; border-radius: 25px; background-color: #f3f4f6; box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.5), 15px 15px 15px rgba(0, 0, 0, 0.05); } .box:nth-child(2){ box-shadow: -15px -1...
Post a Comment
Read more