 |
| Contact Us Form |
Hello friends, today in this blog tutorial we will learn how to make a contact us page in HTML and CSS. In previous blog tutorials we learn how to How To Make Header Section in Website Using HTML and CSS | E-CODEC.
So here is the code and my work. I hope you are gonna love this and share whit your friends too. So let's start learning a contact us page in HTML and CSS from scratch. So let's start..
In this tutorial you will learn to create a contact us page in HTML and CSS coding, subscribe E-CODEC channel to watch more videos on website designing tutorials for beginners.
I hope you enjoyed this video tutorial. If you had any doubts, then please comment them below. And if you enjoyed this tutorial, then please hit the like button below and subscribe my channel. Thank you..
Video Tutorial
STEP 1: Open any code editor
STEP 2: Create a index.html file with html extension
Create a new file index.html, Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How To Make a Contact Form Using HTML and CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col col30">
<div class="content">
<img src="icon.png" alt="draft">
<p>If you have questions or just want to get in touch, use the form below. We look forward to hearing from you!</p>
</div>
</div>
<div class="col col50">
<div class="title">
<h1>Contact Us</h1>
</div>
<form>
<input type="text" placeholder="Full Name" class="input-data">
<input type="email" placeholder="Email" class="input-data">
<textarea placeholder="Message" class="input-data"></textarea>
<div class="btn-box">
<input type="submit" value="Send" class="btn">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
STEP 3: Create a style.css file with CSS extension
Create a new file style.css, Here is the code
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #EEF3FA;
}
.container{
max-width: 900px;
width: 100%;
}
.row,.title,.btn-box{
width: 100%;
display: flex;
justify-content: center;
}
.col{
width: 30%;
height: 450px;
}
.col30{
background: #495C6A;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0px 20px;
}
.col50{
width: 500px;
background: #ffff;
}
.title h1{
color: #495C6A;
margin: 10px 0;
}
.content p{
color: #fff;
font-size: 1.2em;
font-weight: 400;
}
form{
width: 100%;
padding: 30px;
}
.input-data{
width: 100%;
padding: 15px 10px;
outline: none;
background: #EEF3FA;
margin: 10px 0;
border: none;
resize: none;
}
.btn{
padding: 10px 30px;
background: #0087c0;
border: none;
cursor: pointer;
color: #fff;
font-size: 1em;
}
I hope you enjoyed this video tutorial. If you had any doubts, then please comment them below. And if you enjoyed this tutorial, then please hit the like button below and subscribe my channel on YouTube. Thank you..
You can also learn:- How To Make Header Section in Website Using HTML and CSS
0 Comments