Design cool Contact Form With Only HTML and CSS Posted by Yahya Benlachheb on September 07, 2017 Get link Facebook Twitter Pinterest Email Other Apps HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <script src="https://use.fontawesome.com/d1341f9b7a.js"></script> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <title>Contact Form</title> </head> <body> <div class="contact-form"> <div class="header"> <span><i class="fa fa-paper-plane" aria-hidden="true"></i></span> </div> <form class="contact" action="index.html" method="post"> <label for="">Full Name :</label><br> <input class="texti" type="text" name="" value=""> <label for="">E-mail :</label><br> <input class="texti" type="email" name="" value=""> <label for="">Phone Number :</label><br> <input class="texti" type="text" name="" value=""> <label for="">Message :</label><br> textarea class="textm" /textarea <input class="btn" name="" type="button" value="Send" /> </form> </div> </body> </html> CSS CODE body{ margin: 0; padding: 0; background: #f1f1f1; } .contact-form{ background: white; position: absolute; width: 400px; top: 50%; left: 50%; transform: translate(-50%,-50%); } .header{ width: 100%; background: #2196f3; overflow: hidden; color: white; } .header span{ font-size: 100px; display: block; text-align: center; padding: 40px; } .contact{ padding: 10px; overflow: hidden; font-family: 'Montserrat', sans-serif; color: gray; } .contact label{ font-weight: 700; } .texti{ width: 100%; border: none; border-bottom: 2px solid #2196f3; font-size: 20px; margin: 8px 0; display: block; outline: none; color: gray; } .textm{ width: 100%; border: none; border-bottom: 2px solid #2196f3; font-size: 20px; margin: 8px 0; display: block; outline: none; color: gray; min-height: 100px; } .btn{ width: 100%; color: white; padding: 10px; text-align: center; background: #2196f3; font-size: 20px; border: none; } Comments radhaMarch 22, 2018 at 11:59 AMCode works .Keep updating UI online course Banglore ReplyDeleteRepliesReplyAdd commentLoad more... Post a Comment
Code works .Keep updating UI online course Banglore
ReplyDelete