In this Blog Post you will see how to create an amazing contact form by using only HTML & CSS.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<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 Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<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 Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contact-page">
<h1 class="contact-page-title">
<div class="back-title">Contact</div>
<div class="front-title">Get In <span>Touch</span></div>
</h1>
<div class="contact-boxes">
<div class="contact-box">
<h2 class="box-title"><i class="box-icon fas fa-location-pin"></i>Location</h2>
<div class="box-content">
Newyor, USA <br>
25 Bolvard
</div>
</div>
<div class="contact-box">
<h2 class="box-title"><i class="box-icon fas fa-envelope"></i>Email</h2>
<div class="box-content">
alias@domain.tld
</div>
</div>
<div class="contact-box">
<h2 class="box-title"><i class="box-icon fas fa-phone"></i>Phone</h2>
<div class="box-content">
+18852684455
</div>
</div>
</div>
<form action="" class="contact-form">
<input type="text" class="nameInput" placeholder="Name">
<input type="email" class="emailInput" placeholder="Email">
<input type="text" class="subjectInput" placeholder="Subject">
<textarea class="msgArea" placeholder="Your Message"></textarea>
<input type="submit" class="sendbtn" placeholder="Send Message">
</form>
</div>
</body>
</html>
CSS CODE:
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
body{
background-color: #111;
min-height: 100vh;
display: flex;
align-items: center;
}
.contact-page{
width: 100%;
max-width: 1200px;
margin: auto;
padding: 0 20px;
}
.contact-page-title{
position: relative;
text-transform: uppercase;
text-align: center;
}
.back-title{
text-align: center;
-webkit-text-stroke: 1px #ffffff12;
color: transparent;
font-size: 110px;
letter-spacing: 6px;
}
.front-title{
color: #f1f1f1;
font-weight: 900;
font-size: 50px;
transform: translateY(-95px);
}
.front-title span{
color: #0fbcf9;
}
.contact-boxes{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact-box{
background-color: #ffffff12;
padding: 20px;
border-radius: 3px ;
border-left: 2px solid #0fbcf9;
width: 100%;
max-width: 360px;
margin-bottom: 40px;
}
.box-title{
font-size: 20px;
color: #fff;
margin-bottom: 10px;
}
.box-icon{
background: #0fbcf9;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 18px;
}
.box-content{
color: #858585;
font-size: 14px;
font-weight: 500;
}
.contact-form{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
input{
width: 100%;
margin-bottom: 10px;
background: #ffffff12;
padding: 14px;
color: #fff;
border: 0;
}
textarea{
width: 100%;
margin-bottom: 10px;
background: #ffffff12;
padding: 14px;
color: #fff;
border: 0;
resize: none;
height: 160px;
}
input::placeholder{
color: #888;
}
.nameInput,.emailInput{
width: calc(50% - 5px);
}
.nameInput{
border-top-left-radius: 10px;
}
.emailInput{
border-top-right-radius: 10px;
}
.sendbtn{
background-color: #0fbcf9;
border-radius: 0 0 10px 10px;
cursor: pointer;
text-transform: uppercase;
font-weight: 500;
transition: .3s linear;
}
.sendbtn:hover{
opacity: .7;
}
@media screen and (max-width:1200px) {
.contact-box{
max-width: 100%;
}
.nameInput,.emailInput{
width: 100%;
border-radius: 0;
}
.nameInput{
border-radius: 10px 10px 0 0;
}
}
You can Download The Full Source Code From HERE.
No comments:
Post a Comment