 |
| final result |
in this small tutorial, I will show you how to make a simple contact form for valentine's day using only HTML & CSS.
I will start by the HTML part and then I will add the CSS, you can copy directly the code but before let me tell you the tool that we will use.
for the font we will use google fonts because it's free, for the image we will use unsplash and for the gradient effect, we will use cssgradient if you want to learn more about these tools I invite you to visit my article about tools here.
1-HTML part :
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="filter">
</div>
<h1>Send a message to your lover</h1>
<div class="valentine_card">
<form>
<label>TO :</label><br><input type="text"><br>
<label>Message :</label><br>
<textarea></textarea><br>
<button>SEND</button>
</form>
</div>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="filter">
</div>
<h1>Send a message to your lover</h1>
<div class="valentine_card">
<form>
<label>TO :</label><br><input type="text"><br>
<label>Message :</label><br>
<textarea></textarea><br>
<button>SEND</button>
</form>
</div>
</body>
</html>
after we added our html file let's linked with our css file
2-CSS Part :
@import url('https://fonts.googleapis.com/css?family=Courgette|Dancing+Script|Pacifico|Satisfy');
body{
padding: 0;
margin: 0;
outline: 0;
height: 100vh;
background: url(img/bg.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.filter{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #f44336;
opacity: .6;
z-index: 1;
}
h1{
position: absolute;
width: 100%;
z-index: 2;
font-size: 4em;
text-align: center;
color: #fff;
font-family: 'Courgette', cursive;
}
.valentine_card{
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background: #fff;
width: 40%;
padding: 25px;
font-family: 'Courgette', cursive;
}
.valentine_card label{
font-size: 1.3rem;
}
.valentine_card input{
width: 100%;
font-size:1.3rem;
font-family: 'Courgette', cursive;
border: none;
border-bottom: 1px solid black;
margin: 10px 0;
}
*:focus{
outline: none;
}
.valentine_card textarea{
width: 100%;
height: 150px;
resize: none;
font-size:1.3rem;
font-family: 'Courgette', cursive;
border: none;
border-bottom: 1px solid black;
margin: 10px 0;
}
.valentine_card button{
border: none;
background: transparent ;
font-size: 1.5rem;
float: right;
font-family: 'Courgette', cursive;
transition: .4s;
}
.valentine_card button:hover{
color: #f44336;
}
body{
padding: 0;
margin: 0;
outline: 0;
height: 100vh;
background: url(img/bg.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.filter{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #f44336;
opacity: .6;
z-index: 1;
}
h1{
position: absolute;
width: 100%;
z-index: 2;
font-size: 4em;
text-align: center;
color: #fff;
font-family: 'Courgette', cursive;
}
.valentine_card{
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background: #fff;
width: 40%;
padding: 25px;
font-family: 'Courgette', cursive;
}
.valentine_card label{
font-size: 1.3rem;
}
.valentine_card input{
width: 100%;
font-size:1.3rem;
font-family: 'Courgette', cursive;
border: none;
border-bottom: 1px solid black;
margin: 10px 0;
}
*:focus{
outline: none;
}
.valentine_card textarea{
width: 100%;
height: 150px;
resize: none;
font-size:1.3rem;
font-family: 'Courgette', cursive;
border: none;
border-bottom: 1px solid black;
margin: 10px 0;
}
.valentine_card button{
border: none;
background: transparent ;
font-size: 1.5rem;
float: right;
font-family: 'Courgette', cursive;
transition: .4s;
}
.valentine_card button:hover{
color: #f44336;
}
and that's it you have made your card if you have any question about the tutorial please tell us and we will answer
learn how to design a Valentine's card using HTML and CSS
Reviewed by Medics
on
March 03, 2019
Rating:
Reviewed by Medics
on
March 03, 2019
Rating:
This comment has been removed by the author.
ReplyDelete