Clean Stylish Responsive Contact Form Using HTML and CSS Only (Free SOurce Code)
HTML
<!-- <div style="background: rgb(35 , 9 , 40); color: white; padding: 5px 8px;">Replaceable</div> -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Contract form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div id="contact">
<div class="info con-box">
<div class="con">
<h2>Contact Us</h2>
<!-- .address>div>i+p -->
<ul>
<li><span><img src="icon/location.svg" alt=""></span>     72-1 Jigatola, Dhanmondi
Dhaka, BD</li>
<li><span><img src="icon/e-mail-envelope.svg" alt=""></span>     mdshayon0@gmail.com
</li>
<li><span><img src="icon/mobile-phone-design.svg" alt=""></span>     +880178520-8590
</li>
<li><span><img src="icon/more.svg" alt=""></span>     To know more connect me</li>
</ul>
<!-- <div class="address">
<div class="icon"><img src="icon/location.svg" alt=""></div>
<span>72-1 Jigatola, Dhanmondi Dhaka, BD</span>
</div> -->
<!-- <div class="email">
<div class="icon"><img src="icon/e-mail-envelope.svg" alt=""></div>
<span>mdshayon0@gmail.com</span>
</div> -->
<!-- <div class="cell">
<div class="icon"><img src="icon/mobile-phone-design.svg" alt=""></div>
<span>+880178520-8590</span>
</div> -->
<!-- <div class="more">
<div class="icon"><img src="icon/more.svg" alt=""></div>
<span>To know more connect me </span>
</div> -->
<div class="social-media">
<ul>
<li><a href="https://www.facebook.com/md.shayon.148"><img src="icon/fb.svg" alt="fb"></a>
</li>
<li><a href="https://www.youtube.com/channel/UCAIlMG6LplmiRb14UFtcKCg?sub_confirmation=1"><img
src="icon/youtube.svg" alt="youtube"></a></li>
<li><a href="https://twitter.com/shayon_md"><img src="icon/twitter.svg" alt="twitter"></a>
</li>
<li><a href="https://www.linkedin.com/in/md-shayon-a1032a11b/"><img src="icon/in.svg"
alt="linkedin"></a></li>
</ul>
</div>
</div>
</div>
<!-- <br>
<br>
<br>
<br>
<br> -->
<div class="con-form con-box">
<div class="con">
<h2>Get in touch</h2>
<form class="form">
<input type="email" placeholder="Enter your email">
<input type="text" placeholder="Subject">
<textarea type="text" placeholder="Enter your text here......" id="message"></textarea>
<input type="submit" value="Send" id="sbmt-btn">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
/*
background rgb(88, 76, 119);
foreground rgb(201, 192, 228);
*/
.wrapper{
width: 100%;
height: 100vh;
overflow: hidden;
color: rgb(88, 76, 119);
}
#contact{
width: 80%;
height: 70%;
margin: 5% 10%;
box-shadow: 3px 3px 15px grey;
background: rgb(242, 226, 255);
}
.con-box{
display: inline-block;
}
/* .icon{
color: rgb(88, 76, 119);
background: rgb(242, 226, 255);
} */
.info, .con-form{
/* display: inline-block; */
/* width: 49%; */
/* height: 100%; */
}
.info{
color: rgb(201, 192, 228);
height: 100%;
width: 39%;
/* width: 25%; */
/* margin: 5%; */
/* padding: 2rem 2rem 0 2rem; */
background: rgb(88, 76, 119);
}
.con-form{
width: 60%;
/* padding-top: -5%;
margin-top: -10%; */
/* float: inline-start;
float: unset; */
/* padding: 2rem 2rem 0 2rem; */
/* height: 100%; */
/* margin-top: 0;
padding-top: 0; */
/* background: #000; */
}
.con{
padding: 5%;
}
.con h2{
padding-top: 0;
margin-top: 0;
}
.info ul li{
list-style: none;
margin: 8% 0;
}
.social-media{
margin-top: 30%;
}
.social-media ul li {
list-style: none;
display: inline-block;
margin: 0 5%;
}
.social-media ul li img{
width: 165%;
}
/* .social-media ul li a{
text-decoration: none;
color: white;
} */
/* .icon{
display: inline-block;
padding: 1rem 1rem;
} */
/* .address, .cell, .email, .more{
width: 40%;
} */
h2, .form input, .form textarea, #sbmt-btn{
display: block;
border: none;
/* align-items: center; */
margin:5%;
width: 90%;
padding: 2%;
}
input, textarea{
background: rgb(201, 192, 228);
}
::placeholder{
color: rgb(88, 76, 119);
}
h2{
text-transform: uppercase;
}
.con-form h2{
color: rgb(88, 76, 119);
}
#sbmt-btn{
padding: 1em 10em ;
color: rgb(201, 192, 228);
width: 94%;
background: rgb(88, 76, 119);
/* margin-bottom: 20%; */
}
/* h2, form input, form textarea{
} */
/* #sbmt-btn{
width: 100%;
color: white;
padding: 10px;
background: #000;
} */
/* input[type=submit]{
padding: 2%;
}
input[type=text]{
padding: 2%;
}
input[type=email]{
padding: 2%;
}
textarea{
padding: 2%;
} */
@media (max-width:1024px){
#contact{
width: 100%;
/* height: 70%; */
margin: 0;
background: none;
}
.info, .con-form{
/* display: inline-block; */
width: 100%;
height: 80%;
}
.social-media{
margin-top: 10%;
}
}
padding: 0;
margin: 0;
}
/*
background rgb(88, 76, 119);
foreground rgb(201, 192, 228);
*/
.wrapper{
width: 100%;
height: 100vh;
overflow: hidden;
color: rgb(88, 76, 119);
}
#contact{
width: 80%;
height: 70%;
margin: 5% 10%;
box-shadow: 3px 3px 15px grey;
background: rgb(242, 226, 255);
}
.con-box{
display: inline-block;
}
/* .icon{
color: rgb(88, 76, 119);
background: rgb(242, 226, 255);
} */
.info, .con-form{
/* display: inline-block; */
/* width: 49%; */
/* height: 100%; */
}
.info{
color: rgb(201, 192, 228);
height: 100%;
width: 39%;
/* width: 25%; */
/* margin: 5%; */
/* padding: 2rem 2rem 0 2rem; */
background: rgb(88, 76, 119);
}
.con-form{
width: 60%;
/* padding-top: -5%;
margin-top: -10%; */
/* float: inline-start;
float: unset; */
/* padding: 2rem 2rem 0 2rem; */
/* height: 100%; */
/* margin-top: 0;
padding-top: 0; */
/* background: #000; */
}
.con{
padding: 5%;
}
.con h2{
padding-top: 0;
margin-top: 0;
}
.info ul li{
list-style: none;
margin: 8% 0;
}
.social-media{
margin-top: 30%;
}
.social-media ul li {
list-style: none;
display: inline-block;
margin: 0 5%;
}
.social-media ul li img{
width: 165%;
}
/* .social-media ul li a{
text-decoration: none;
color: white;
} */
/* .icon{
display: inline-block;
padding: 1rem 1rem;
} */
/* .address, .cell, .email, .more{
width: 40%;
} */
h2, .form input, .form textarea, #sbmt-btn{
display: block;
border: none;
/* align-items: center; */
margin:5%;
width: 90%;
padding: 2%;
}
input, textarea{
background: rgb(201, 192, 228);
}
::placeholder{
color: rgb(88, 76, 119);
}
h2{
text-transform: uppercase;
}
.con-form h2{
color: rgb(88, 76, 119);
}
#sbmt-btn{
padding: 1em 10em ;
color: rgb(201, 192, 228);
width: 94%;
background: rgb(88, 76, 119);
/* margin-bottom: 20%; */
}
/* h2, form input, form textarea{
} */
/* #sbmt-btn{
width: 100%;
color: white;
padding: 10px;
background: #000;
} */
/* input[type=submit]{
padding: 2%;
}
input[type=text]{
padding: 2%;
}
input[type=email]{
padding: 2%;
}
textarea{
padding: 2%;
} */
@media (max-width:1024px){
#contact{
width: 100%;
/* height: 70%; */
margin: 0;
background: none;
}
.info, .con-form{
/* display: inline-block; */
width: 100%;
height: 80%;
}
.social-media{
margin-top: 10%;
}
}
No comments: