Today we are gonna see the CSS part.
If you haven't seen our previous the here is the link. Go and see this first.
So the Code for the styling part will be:
body{
margin: 0;
padding: 0 ;
background: url(bgi.jpg);
background-size: cover;
}
.contact-form{
width: 85%;
max-width: 600px;
background: #f1f1f1;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
padding: 30px 40px;
box-sizing: border-box;
border-radius: 8px;
text-align: center;
box-shadow: 0 0 20px #000000b3;
font-family: "Monteserrat",sans-serif;
}
.contact-form h1{
margin-top: 0;
font-weight: 200;
}
.txtb{
border:1px solid gray;
margin: 8px 0;
padding: 12px 18px;
border-radius: 8px;
font-size: 18px;
}
.txtb label{
display: block;
text-align: left;
color: #333;
text-transfrom: uppercase;
font-size: 20px
}
.txtb input,.txtb textarea{
width: 100%;
border: none;
background: none;
outline: none;
font-size: 18px;
margin-top: 6px;
}
.btn{
display: inline-block;
background: #9b59b6;
padding: 14px 0;
color: white;
text-transform: uppercase;
cursor: pointer;
margin-top: 8px;
width: 100%;
}
After applying this code our final contact form looks something like
Now we can do much more in this form like Redirecting after the send button is pressed or storing it in our database and reverting a auto generated text on the input email and much more.
So just stay tuned for more exciting posts every week!
So just stay tuned for more exciting posts every week!
