Hello everyone, you can learn how to create a Subscribe Newsletter Design Using HTML and CSS in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Subscribe Newsletter Design
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!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">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Email Subscription Form</title>
</head>
<body>
<div class="container">
<h1>Subscribe to our Newsletter</h1>
<div class="email">
<input type="email" placeholder="Email">
<i class="icon fa fa-envelope"></i>
<button type="submit">Subscribe</button>
</div>
</div>
</body>
</html>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body{
background: #386aeb;
width: 100%;
height: 100vh;
position: relative;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container h1{
font-size: 40px;
color: white;
margin-bottom: 20px;
}
.container .email{
height: 50px;
position: relative;
}
.container .email input{
height: 100%;
width: 450px;
padding-left: 50px;
font-size: 18px;
outline: none;
font-family: Arial, Helvetica, sans-serif;
border-radius: 50px;
border: 2px solid coral;
}
.container .email .icon{
position: absolute;
left: 25px;
top: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
}
.container .email button{
position: absolute;
top: 50%;
right: -30px;
transform: translate(-50%, -50%);
padding: 8px 12px;
cursor: pointer;
border-radius: 50px;
border: 1px solid gray;
outline: none;
background: #286aeb;
color: white;
transition: 0.3s;
}
.container .email button:hover{
background: #1b3d94;
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
This comment has been removed by the author.
ReplyDelete