An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
Some of Our Sources
- TutsPlus - Design
- Vandelay Design
- You The Designer
- Creative Curio
- Crazy Leaf Design
- Fudge Graphics
- CSS Tricks
- Spyre Studios
- Design Modo
- TechPowerUp
Help Webnuz
Referal links:
September 17, 2021 12:19 pm GMT
Original Link: https://dev.to/technicalvandar885/responsive-contact-form-using-pure-html-css-2ip1
Responsive Contact Form Using Pure HTML & CSS.|
Here Is The Complete Responsive Login Form Using Pure HTML & CSS.|
Source Code
HTML Code:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="style.css"> <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>Contact Form</title></head><body> <div class="container"> <form action="" autocomplete="off"> <h1>Contact Us</h1> <div class="inp"> <div class="name"> <input type="text" name="name" id="name" placeholder="Name" required> </div> <div class="email"> <input type="email" name="email" id="email" placeholder="E-mail" required> </div> <div class="phone"> <input type="number" name="phone" id="phone" placeholder="Phone No." required> </div> <div class="message"> <textarea name="message" id="message" cols="30" rows="10" placeholder="Type Here Your Message..." required></textarea> </div> <div class="submit"> <button type="Submit">Submit</button> </div> </div> </form> </div></body></html>CSS Code:
*{ margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;}body{ height: 100vh; width: 100%; background: turquoise; display: grid; place-items: center;}.container{ position: relative; height: 450px; width: 350px; background: rgb(0, 0, 0); border-radius: 3px; box-shadow: 1px 1px 4px #444, -1px -1px 4px #444;}form h1{ color: white; text-align: center; margin: 5px;}.inp{ margin: 10px 25px;}input{ color: white; height: 40px; width: 280px; outline: none; border: 1px solid white; margin: 10px 0; box-shadow: 1px 1px 1px rgb(224, 221, 221); padding: 15px; font-size: 20px; background: #000;}textarea{ height: 140px; width: 280px; color: white; outline: none; border: 1px solid white; background: #000; margin: 10px 0; box-shadow: 1px 1px 1px rgb(224, 221, 221); padding: 10px 10px; font-size: 20px;}.submit button{ height: 40px; width: 100px; background: #0489EE; color: white; font-size: 20px; font-weight: 650; cursor: pointer; border: none; outline: none; box-shadow: 0 1px 2px #777;}::placeholder{ color: white;}Find Me On:
Original Link: https://dev.to/technicalvandar885/responsive-contact-form-using-pure-html-css-2ip1
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To