in this tutorial, I will show you the code to make this kind of form, of course, you can get the full code and i will explain some tricks before we start.
so for this tutorial we will center our div by using the simple method
.div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
and as you can see the contact is composed of two columns, to make this layout we will use FlexBox.
display: flex;
flex-direction: column;
flex-direction: column;
we will also use a small gradient effect that will be provided by Gradient.io
the color that we will use are:
- 0 : rgba(83,19,166,1)
- 100: rgba(83,19,166,1)
now i will present you the full code:
Video tutorial
HTML CODE
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div class="filter">
</div>
<div class="container">
<div class="desc">
<h1>Subscribe to my chanel</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec placerat lorem, et aliquet erat. Fusce mattis varius leo. Donec a tortor eu diam pellentesque faucibus. Phasellus nisl enim, euismod in mauris a, tempor viverra quam.
</p>
</div>
<div class="form">
<h1>Contact-us</h1>
<form>
<input type="text" placeholder="Name"><br>
<input type="text" placeholder="E-mail"><br>
<textarea placeholder="message"></textarea><br>
<button>Subscribe</button>
</form>
</div>
</div>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div class="filter">
</div>
<div class="container">
<div class="desc">
<h1>Subscribe to my chanel</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec placerat lorem, et aliquet erat. Fusce mattis varius leo. Donec a tortor eu diam pellentesque faucibus. Phasellus nisl enim, euismod in mauris a, tempor viverra quam.
</p>
</div>
<div class="form">
<h1>Contact-us</h1>
<form>
<input type="text" placeholder="Name"><br>
<input type="text" placeholder="E-mail"><br>
<textarea placeholder="message"></textarea><br>
<button>Subscribe</button>
</form>
</div>
</div>
</body>
</html>
CSS CODE
@import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Roboto');
*{
margin: 0;
outline: 0;
padding: 0;
}
body{
background-image: url(../image/background.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.filter{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgb(83,19,166);
background: -moz-linear-gradient(160deg, rgba(83,19,166,0.3) 0%, rgba(247,72,255,0.3) 100%);
background: -webkit-linear-gradient(160deg, rgba(83,19,166,0.3) 0%, rgba(247,72,255,0.3) 100%);
background: linear-gradient(160deg, rgba(83,19,166,0.3) 0%, rgba(247,72,255,0.3) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5313a6",endColorstr="#f748ff",GradientType=1);
}
.container{
width: 50%;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: flex;
box-shadow: 0 2px 15px rgba(53,53,53,.7);
border-radius: 15px;
overflow: hidden;
}
.desc{
width: 50%;
padding: 30px;
background: rgb(83,19,166);
background: -moz-linear-gradient(160deg, rgba(83,19,166,1) 0%, rgba(247,72,255,1) 100%);
background: -webkit-linear-gradient(160deg, rgba(83,19,166,1) 0%, rgba(247,72,255,1) 100%);
background: linear-gradient(160deg, rgba(83,19,166,1) 0%, rgba(247,72,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5313a6",endColorstr="#f748ff",GradientType=1);
}
.desc h1{
text-align: center;
color: #fafafa;
margin-bottom: 50px;
font-size: 1.5em;
text-transform: uppercase;
font-family: 'Roboto',sans-serif;
}
.desc p{
color: #fafafa;
font-family: 'Open Sans',sans-serif;
}
.form{
background-color: #fff;
width: 50%;
padding:30px;
}
.form h1{
text-transform: uppercase;
text-align: center;
font-family: 'Roboto',sans-serif;
margin-bottom: 50px;
}
.form label{
font-family: 'Montserat',sans-serif;
margin-bottom: 20px;
}
.form input{
width: calc(100% - 20px );
padding: 5px 10px;
font-size: 1.2em;
border: none;
border-bottom: 1px solid rgb(83,19,166);
margin-bottom: 20px;
font-family: 'Montserat',sans-serif;
}
.form textarea{
width: calc(100% - 20px);
padding: 10px;
height: 150px;
resize: none;
border: none;
border-bottom: 1px solid rgb(83,19,166);
margin-bottom: 20px;
font-size: 1.2em;
font-family: 'Montserat',sans-serif;
}
::placeholder{
color: rgba(83,19,166,.4);
}
.form button{
cursor: pointer;
width: 100% ;
padding: 10px 20px;
color: #fff;
text-transform: uppercase;
border: none;
border-radius: 15px;
font-weight: bold;
background: rgb(83,19,166);
background: -moz-linear-gradient(160deg, rgba(83,19,166,1) 0%, rgba(247,72,255,1) 100%);
background: -webkit-linear-gradient(160deg, rgba(83,19,166,1) 0%, rgba(247,72,255,1) 100%);
background: linear-gradient(160deg, rgba(83,19,166,1) 0%, rgba(247,72,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5313a6",endColorstr="#f748ff",GradientType=1);
transition: all .4s;
}
.form button:hover{
opacity: .7;
}
*{
margin: 0;
outline: 0;
padding: 0;
}
body{
background-image: url(../image/background.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.filter{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgb(83,19,166);
background: -moz-linear-gradient(160deg, rgba(83,19,166,0.3) 0%, rgba(247,72,255,0.3) 100%);
background: -webkit-linear-gradient(160deg, rgba(83,19,166,0.3) 0%, rgba(247,72,255,0.3) 100%);
background: linear-gradient(160deg, rgba(83,19,166,0.3) 0%, rgba(247,72,255,0.3) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5313a6",endColorstr="#f748ff",GradientType=1);
}
.container{
width: 50%;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: flex;
box-shadow: 0 2px 15px rgba(53,53,53,.7);
border-radius: 15px;
overflow: hidden;
}
.desc{
width: 50%;
padding: 30px;
background: rgb(83,19,166);
background: -moz-linear-gradient(160deg, rgba(83,19,166,1) 0%, rgba(247,72,255,1) 100%);
background: -webkit-linear-gradient(160deg, rgba(83,19,166,1) 0%, rgba(247,72,255,1) 100%);
background: linear-gradient(160deg, rgba(83,19,166,1) 0%, rgba(247,72,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5313a6",endColorstr="#f748ff",GradientType=1);
}
.desc h1{
text-align: center;
color: #fafafa;
margin-bottom: 50px;
font-size: 1.5em;
text-transform: uppercase;
font-family: 'Roboto',sans-serif;
}
.desc p{
color: #fafafa;
font-family: 'Open Sans',sans-serif;
}
.form{
background-color: #fff;
width: 50%;
padding:30px;
}
.form h1{
text-transform: uppercase;
text-align: center;
font-family: 'Roboto',sans-serif;
margin-bottom: 50px;
}
.form label{
font-family: 'Montserat',sans-serif;
margin-bottom: 20px;
}
.form input{
width: calc(100% - 20px );
padding: 5px 10px;
font-size: 1.2em;
border: none;
border-bottom: 1px solid rgb(83,19,166);
margin-bottom: 20px;
font-family: 'Montserat',sans-serif;
}
.form textarea{
width: calc(100% - 20px);
padding: 10px;
height: 150px;
resize: none;
border: none;
border-bottom: 1px solid rgb(83,19,166);
margin-bottom: 20px;
font-size: 1.2em;
font-family: 'Montserat',sans-serif;
}
::placeholder{
color: rgba(83,19,166,.4);
}
.form button{
cursor: pointer;
width: 100% ;
padding: 10px 20px;
color: #fff;
text-transform: uppercase;
border: none;
border-radius: 15px;
font-weight: bold;
background: rgb(83,19,166);
background: -moz-linear-gradient(160deg, rgba(83,19,166,1) 0%, rgba(247,72,255,1) 100%);
background: -webkit-linear-gradient(160deg, rgba(83,19,166,1) 0%, rgba(247,72,255,1) 100%);
background: linear-gradient(160deg, rgba(83,19,166,1) 0%, rgba(247,72,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5313a6",endColorstr="#f748ff",GradientType=1);
transition: all .4s;
}
.form button:hover{
opacity: .7;
}
thank you for reading and see you later for another tutorial
how to make a contact form using HTML and CSS
Reviewed by Medics
on
March 06, 2019
Rating:
Reviewed by Medics
on
March 06, 2019
Rating:
No comments: