Posts

Showing posts from April, 2020

Clock

Image
<!DOCTYPE html> <html> <head> <title>Clock Html</title> </head> <body> <div class="clock"> <div class="hour"> <div class="hr" id="hr"></div> </div> <div class="min"> <div class="mn" id="mn"></div> </div> <div class="sec"> <div class="sc" id="sc"></div> </div> </div> <script type="text/javascript"> const deg = 6; const hr = document.querySelector("#hr"); const mn = document.querySelector("#mn"); const sc = document.querySelector("#sc"); setInterval(() => { let day = new Date(); let hh = day.getHours() * 30; let mm = day.getMinutes() * deg; let ss = day.getSeconds() * deg; hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`; mn.style.tr...
Post a Comment
Read more

Hover Quick Card

Image
<!DOCTYPE html> <html> <head> <title>Hover Quick Card</title> </head> <body> <div class="container"> <div class="card"> <div><h2>Design</h2> <p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p> <a href="#">Read More</a> </div> </div> <div class="card"> <div><h2>Code</h2> <p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p> <a href="#">Read More</a> </div> </div> <div class="card"...
Post a Comment
Read more

Input Placeholder

Image
<!DOCTYPE html> <html> <head> <title>Input Placeholder</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <h2>How to Create Custom Input Filed</h2> <form> <div class="input-field"> <input type="text" name="" required=""> <label>Please Enter Your Full Name</label> <span></span> </div> <input type="submit" value="Show Result" name="" class="btn"> </form> </div> </body> </html> <style type="text/css"> *{margin: 0px; padding: 0px; font-family: arial; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; background-color: #111; min-height: 100vh;} .c...
Post a Comment
Read more

Full Screen Slider

Image
<!DOCTYPE html> <html> <head> <title>Full Screen Slider</title> </head> <body> <section> <div class="slide"> <div class="content"> <h2>Slider One</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.</p> </div> </div> <div class="slide"> <div class="content"> <h2>Slider Two</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.</p> </div> </div> <div class="slide"> <div class="content"> <h2>Slider Three</h2> <p>Lorem ipsum dolor sit am...
Post a Comment
Read more

404 Page Error

Image
<!DOCTYPE html> <html> <head> <title>404 Page</title> </head> <body> <div id="container"> <div class="content"> <h2>404</h2> <h4>Opps! Page Not Found</h4> <p>The Page You were Looking for does'nt exist. You May Have Mistyped The Address or The Page My Have Moved.</p> <a href="#">Back to Home</a> </div> </div> </body> </html> <style type="text/css"> *{ margin: 0px; padding: 0px; box-sizing: border-box; font-family: arial; } body{ background: linear-gradient(45deg, #8500ff, #5acaff); height: 100vh; } #container{position: absolute; border-radius: 15px; top: 10%; left:10%; right: 10%; bottom: 10%; display: flex; justify-content: center; align-items: center; background: url("p404.png") #151729; box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.5);} ...
Post a Comment
Read more