Contact Us Form using HTML And CSS
<html>
<head>
<style type="text/css">
*{
box-sizing: border-box;
}
body{
margin: 0;
background-image: url("images/back.jpg");
}
input[type=text],input[type=password] {
padding: 10px 10px;
border-radius: 20px;
width: 80%;
border: 2px solid LightGreen;
margin-left: 5%;
}
textarea {
padding: 15px 10px;
border-radius: 20px;
width: 80%;
border: 2px solid LightGreen;
margin-left: 5%;
}
button {
padding: 15px 10px;
border-radius: 20px;
width: 40%;
border: 2px solid LightGreen;
margin-left: 25%;
background-color: yellow;
}
.contact {
padding: 15px 15px;
border-radius: 100px;
width: 30%;
background-color: #f7786b;
box-shadow: 8px 8px 8px 8px LightGreen;
margin-top: 2%;
}
h2 {
text-align: center;
color: blue;
}
.topnav {
overflow: hidden;
background-color: LightGreen;
padding: 10px;
}
.topnav a {
float: left;
display: block;
color: red;
padding: 10px 10px;
}
.topnav a:hover {
background-color: yellow;
color: blue;
}
.footer {
margin-top:5%;
background-color: yellow;
padding: 5px;
text-align: center;
}
.btn
{
padding: 12px 12px;
border-radius: 20px;
width: 8%;
border: 2px solid red;
margin-left: 70%;
background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>
<div class="topnav">
<button class = "btn" onclick="window.location.href = 'login.html'">Login</button>
<a href="index.html">Home</a>
<a href="aboutus.html">About Us</a>
<a href="contactus.html">Contact Us</a>
</div>
<form>
<table class ="contact" align="center" cellspacing="4" cellpadding="4">
<tr>
<td>
<h2>CONTACT US</h2>
</td>
</tr>
<tr>
<td>
<input type="text" name="name" placeholder="User Name">
</td>
</tr>
<tr>
<td>
<input type="text" name="email" placeholder="Email Address">
</td>
</tr>
<tr>
<td>
<input type="text" name="phone" placeholder="Phone Number">
</td>
</tr>
<tr>
<td>
<textarea name ="msg" rows="3" cols="20" placeholder= "Message" ></textarea>
</td>
</tr>
<tr>
<td>
<button type="submit">Submit</button>
</td>
</tr>
</table>
</form>
<div class="footer">
<h2>www.javabasics.com</h2>
</div>
</body>
</html>
<head>
<style type="text/css">
*{
box-sizing: border-box;
}
body{
margin: 0;
background-image: url("images/back.jpg");
}
input[type=text],input[type=password] {
padding: 10px 10px;
border-radius: 20px;
width: 80%;
border: 2px solid LightGreen;
margin-left: 5%;
}
textarea {
padding: 15px 10px;
border-radius: 20px;
width: 80%;
border: 2px solid LightGreen;
margin-left: 5%;
}
button {
padding: 15px 10px;
border-radius: 20px;
width: 40%;
border: 2px solid LightGreen;
margin-left: 25%;
background-color: yellow;
}
.contact {
padding: 15px 15px;
border-radius: 100px;
width: 30%;
background-color: #f7786b;
box-shadow: 8px 8px 8px 8px LightGreen;
margin-top: 2%;
}
h2 {
text-align: center;
color: blue;
}
.topnav {
overflow: hidden;
background-color: LightGreen;
padding: 10px;
}
.topnav a {
float: left;
display: block;
color: red;
padding: 10px 10px;
}
.topnav a:hover {
background-color: yellow;
color: blue;
}
.footer {
margin-top:5%;
background-color: yellow;
padding: 5px;
text-align: center;
}
.btn
{
padding: 12px 12px;
border-radius: 20px;
width: 8%;
border: 2px solid red;
margin-left: 70%;
background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>
<div class="topnav">
<button class = "btn" onclick="window.location.href = 'login.html'">Login</button>
<a href="index.html">Home</a>
<a href="aboutus.html">About Us</a>
<a href="contactus.html">Contact Us</a>
</div>
<form>
<table class ="contact" align="center" cellspacing="4" cellpadding="4">
<tr>
<td>
<h2>CONTACT US</h2>
</td>
</tr>
<tr>
<td>
<input type="text" name="name" placeholder="User Name">
</td>
</tr>
<tr>
<td>
<input type="text" name="email" placeholder="Email Address">
</td>
</tr>
<tr>
<td>
<input type="text" name="phone" placeholder="Phone Number">
</td>
</tr>
<tr>
<td>
<textarea name ="msg" rows="3" cols="20" placeholder= "Message" ></textarea>
</td>
</tr>
<tr>
<td>
<button type="submit">Submit</button>
</td>
</tr>
</table>
</form>
<div class="footer">
<h2>www.javabasics.com</h2>
</div>
</body>
</html>
Comments
Post a Comment