Versions Compared

Old Version 9

changes.mady.by.user Luis Banez

Saved on

compared with

New Version 10

changes.mady.by.user Luis Banez

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
<!DOCTYPE html> <html> <head> <title>Contact form</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet"> <style> html, body { min-height: 100%; padding: 0; margin: 0; font-family: Roboto, Arial, sans-serif; font-size: 14px; color: #666; } h1 { margin: 0 0 20px; font-weight: 400; color: #1c87c9; } p { margin: 0 0 5px; } .main-block { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; background: #1c87c9; } form { padding: 25px; margin: 25px; box-shadow: 0 2px 5px #f5f5f5; background: #f5f5f5; } .fas { margin: 25px 10px 0; font-size: 72px; color: #fff; } .fa-envelope { transform: rotate(-20deg); } .fa-at , .fa-mail-bulk{ transform: rotate(10deg); } input, textarea { width: calc(100% - 18px); padding: 8px; margin-bottom: 20px; border: 1px solid #1c87c9; outline: none; } input::placeholder { color: #666; } button { width: 100%; padding: 10px; border: none; background: #1c87c9; font-size: 16px; font-weight: 400; color: #fff; } button:hover { background: #2371a0; } @media (min-width: 568px) { .main-block { flex-direction: row; } .left-part, form { width: 50%; } .fa-envelope { margin-top: 0; margin-left: 20%; } .fa-at { margin-top: -10%; margin-left: 65%; } .fa-mail-bulk { margin-top: 2%; margin-left: 28%; } } </style> </head> <body> <div class="main-block"> <div class="left-part"> <i class="fas fa-envelope"></i> <i class="fas fa-at"></i> <i class="fas fa-mail-bulk"></i> </div> <form action="/"> <h1>Contact Us</h1> <div class="info"> <input class="fname" type="text" name="name" placeholder="Full name"> <input type="text" name="name" placeholder="Email"> </div> <p>Message</p> <div> <textarea rows="4"></textarea> </div> <button type="submit" href="/">Submit</button> </form> </div> </body> </html>

 

 

Center
HTML
Center
HTML
<iframe class="embeddedObject shadow resizable" name="embedded_content" scrolling="no" frameborder="0" type="text/html" 
        style="overflow:hidden;" src="https://www.screencast.com/users/russell.santos/folders/APHP/media/45019485-2174-4b64-8dd1-43881bca8a5f/embed" height="576" width="1024" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>