This content originally appeared on DEV Community and was authored by Technical Vandar
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:
This content originally appeared on DEV Community and was authored by Technical Vandar
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Technical Vandar | Sciencx (2021-09-17T12:19:45+00:00) Responsive Contact Form Using Pure HTML & CSS.|. Retrieved from https://www.scien.cx/2021/09/17/responsive-contact-form-using-pure-html-css/
" » Responsive Contact Form Using Pure HTML & CSS.|." Technical Vandar | Sciencx - Friday September 17, 2021, https://www.scien.cx/2021/09/17/responsive-contact-form-using-pure-html-css/
HARVARDTechnical Vandar | Sciencx Friday September 17, 2021 » Responsive Contact Form Using Pure HTML & CSS.|., viewed ,<https://www.scien.cx/2021/09/17/responsive-contact-form-using-pure-html-css/>
VANCOUVERTechnical Vandar | Sciencx - » Responsive Contact Form Using Pure HTML & CSS.|. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/17/responsive-contact-form-using-pure-html-css/
CHICAGO" » Responsive Contact Form Using Pure HTML & CSS.|." Technical Vandar | Sciencx - Accessed . https://www.scien.cx/2021/09/17/responsive-contact-form-using-pure-html-css/
IEEE" » Responsive Contact Form Using Pure HTML & CSS.|." Technical Vandar | Sciencx [Online]. Available: https://www.scien.cx/2021/09/17/responsive-contact-form-using-pure-html-css/. [Accessed: ]
rf:citation » Responsive Contact Form Using Pure HTML & CSS.| | Technical Vandar | Sciencx | https://www.scien.cx/2021/09/17/responsive-contact-form-using-pure-html-css/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.