How to create Amazing Subscribe Form | HTML & CSS Project - Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made an Amazing Subscribe Form with the help of HTML and CSS Only!😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Before starting the blog, you might think about where you can use this project in real-life-based projects. So it's an Amazing Subscribe Form that you can use in your own blog project. So it will look attractive.
Let's start making these amazing Amazing Subscribe Form Using HTML & CSS step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
In HTML we have used divs for container and inputs for field and checkbox.
<div class="subscribe">
<h2 class="subscribe__title">Let's keep in touch</h2>
<p class="subscribe__copy">Subscribe to keep up with fresh news and exciting updates. We promise not to spam you!</p>
<div class="form">
<input type="email" class="form__email" placeholder="Enter your email address" />
<button class="form__button">Send</button>
</div>
<div class="notice">
<input type="checkbox">
<span class="notice__copy">I agree to my email address being stored and uses to recieve monthly newsletter.</span>
</div>
</div>
After the HTML we will design the subscribe form
Output till now
CSS🎈( step - 2)
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700&display=swap');
body {
background: #CAD3DB;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Mulish', sans-serif;
}
.subscribe {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: white;
width: 945px;
height: 474px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(61, 159, 255, 0.2)
}
.subscribe__title {
font-weight: bold;
font-size: 26px;
margin-bottom: 18px;
}
.subscribe__copy {
max-width: 450px;
text-align: center;
margin-bottom: 53px;
line-height: 1.5;
}
.form {
margin-bottom: 25px;
}
.form__email {
padding: 20px 25px;
border-radius: 5px;
border: 1px solid #CAD3DB;
width: 431px;
font-size: 18px;
color: #0F121F;
}
.form__email:focus {
outline: 1px solid #3D9FFF;
}
.form__button {
background: #3D9FFF;
padding: 10px;
border: none;
width: 244px;
height: 65px;
border-radius: 5px;
font-size: 18px;
color: white;
box-shadow: 0 4px 20px rgba(61, 159, 255, 0.7);
}
.form__button:hover {
box-shadow: 0 10px 20px rgba(61, 159, 255, 0.7);
}
.notice {
width: 345px;
}
Now we have done the CSS coding as well, now we will see the final output and also check the codepen link mentioned below.
Final Output
The codepen link is here for making your work easier!
project user:
.
If you found any value in this blog you can support me by buying me a coffee.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.