Posts

HTML CSS Bat Ball Hover Effect

-
Image
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Transform</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hover on the bat ... </h1> <div class="field"> <img class="bat" src="img/bat.png"> <div class="ball"> </div> </div> </body> </html> CSS h1 { font-size : 50px; text-align : center; font-weight: bolder; font-family: 'Segoe UI'; } .field { border : 5px dotted green; background-color: rgba(4, 145, 4, 0.2); width : 85%; height : 550px; margin : auto; padding : 30px; } /***************** bat **************...
Post a Comment
Read more

Get Your Geo Location

-
Image
  HTML + CSS + JavaScript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Geo Location</title> <style> body { font-family: 'Courier New', Courier, monospace; } button { font-size: 18px; padding: 10px 5px; cursor: pointer; } </style> </head> <body> <div> <h3>Click the button to get your coordinates.</h3> <button onclick="getLocation()">Know Your Geo Location...</button> <h1>Latitude : <span id="lan"></span></h1> <h1>Longitude : <span id="lon"></span...
Post a Comment
Read more

Simple HTML Form

-
Image
Ingredients :  HTML  CSS  Main Focus Point : CSS  outline border  box-shadow transition   HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Input Focus Hover</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"> <input type="text" placeholder="First Name" name="" id=""> <input type="text" placeholder="Last Name" name="" id=""> <input type="text" placeholder="Email" name="" id=""> <input type="text" placeholder="Phone" name="" id=""> <input type="submit" value="Submit Your Info"> </div> </body> </html> CSS * { margin...
Post a Comment
Read more

Half Diamond By HTML & CSS

-
Image
  If you are searching for How to make Half Diamond by HTML & CSS? then it might be what you are looking for...  Ingredients : HTML  CSS Main Focus Point : grid  grid-template-areas   place-items    transform HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Half Diamond</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <!-- .box#box-$*6>p.text{$} --> <div class="box" id="box-1"> <p class="text">1</p> </div> <div class="box" id="box-2"> <p class="text">2</p> </div> <div class="box" id="box-3"> <p class="text">3</p> </div> ...
Post a Comment
Read more

Responsive | CSS Media-Quarry

-
Image
If you are looking for the best simple responsive media-query example, then below these code snipped must be helpful for you.  Ingreadients : HTML  CSS  image files  Main Focus Point : CSS display : none | block @media min-width  max-width    HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>About Media Query</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <div class="box" id="box-1"> <img src="./img/mobile.png" alt=""> <p>Phone</p> </div> <div class="box" id="box-2"> <...
Post a Comment
Read more