Thursday, December 20, 2018

CREATE A USER FEEDBACK FORM USING HTML CSS

Cloud Tech December 20, 2018 COMPUTER, WEB DESIGN

Create a User Feedback Form Using HTML Css

============

Also read :CONVERT NUMBER INTO DATE IN EXCEL

Also read :RESPONSIVE USER LOGIN FORM USING HTML CSS JAVA

<!DOCTYPE html>
<html>
<head>
<title>fEEDBACK fROM</title>
<style type="text/css">

*{
box-sizing: border-box;
font-family: helvetica;
}
body{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('g.jpg');
background-position: center;
background-size: cover;
height: 100vh;
width: 100%;
background-attachment: fixed;
}
.main{
width: 400px;
margin: 50px auto;
border: 5px solid #dc143c;
border-radius: 10px;
background-color: #fffaf0;
border-left: 40px solid #dc143c;
box-shadow: 4px 4px 8px black;
}
.info{
width: 100%;
padding: 8px;
background-color: #dc143c;
font-size: 40px;
font-weight: bold;
text-align: center;
color: #fff;
text-shadow: 2px 2px 4px black;
}
.form-box{
padding: 25px;
}
label{
color: navy;
font-size: 20px;
text-shadow: 1px 1px 3px black;
}
.inp, #message-box{
width: 100%;
padding: 10px;
margin-top: 3px;
margin-bottom: 5px;
border: 2px solid #dc143c;
border-radius: 5px;
font-weight: bold;
border-right: 20px solid #dc143c;
border-left: 20px solid #dc143c;
color: purple;
}
.inp:focus, #message-box:focus{
border:2px solid navy;
border-right: 20px solid navy;
border-left: 20px solid navy;
outline: none;
box-shadow: 2px 2px 4px black;
}
#message-box{
height: 150px;
}
.sub-btn{
font-size: 22px;
width: 100%;
margin: 4px;
border-radius: 5px;
padding: 10px;
border:none;
color: #fff;
background: linear-gradient(#dc143c,skyblue);
text-shadow: 2px 2px 4px black;
box-shadow: 2px 2px 4px black;
}
.sub-btn:hover{
background: linear-gradient(steelblue,orange);
transition: all ease-out 0.5s;
}
.blink{
animation: colorchange 2.5s infinite;
}
@keyframes colorchange{
0%{color: yellow;}
25%{color: blue;}
50%{color: purple;}
75%{color: limegreen;}
100%{color: #dc143c;}
}
</style>
</head>
<body>
<div class="main">
<div class="info blink">
ଆପଣଙ୍କ ମତାମତ ଦିଅନ୍ତୁ</div>
<form action="#" method="post" name="form" class="form-box">
<label for="name">Name</label><br>
<input type="text" name="name" class="inp" placeholder="Enter Your Name" required><br>
<label for="name">Email Id</label><br>
<input type="email" name="email" class="inp" placeholder="Enter Your Email Id" required><br>
<label for="phone">Phone</label><br>
<input type="tel" name="phone" class="inp" placeholder="Enter Your Phone no" required><br>
<label for="message">Message</label><br>
<textarea type="msg" id="message-box" class="inp" placeholder="Type Your Message Here...." required>

Also read :3D IMAGE SLIDE SHOW USING HTML CSS

Paste below Code After Text area Closing TAG <input type="submit" name="submit" value="send" class="sub-btn blink"><br>