Newsletter Design in HTML and CSS | Project Series Day - 26 | Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made an Animated Newsletter Design with the help of HTML and CSS. It is Project Series Day 26. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making Newsletter step by step.
Preview 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)
We first made the form for the search bar and put the icon for the same.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" integrity="sha384-i1LQnF23gykqWXg6jxC2ZbCbUMxyw5gLZY6UiUS98LYV5unm8GWmfkIS6jqJfb4E" crossorigin="anonymous">
<div class="wrapper">
<form action="#" class="card-content">
<div class="container">
<div class="image">
<i class="fas fa-envelope"></i>
</div>
<h1>Subscribe</h1>
<p>Subscribe to our newsletter and stay updated.</p>
</div>
<div class="form-input">
<label for="email"></label>
<input type="email" placeholder="Your Email">
<button class="subscribe-btn">Subscribe</button>
</div>
</form>
</div>CSS🎈( step - 2)
Now let's design the amazing search bar
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap');
* {
margin: 0;
padding: 0;
}
html {
font-size: 20px;
font-family: 'Roboto';
}
body {
background: linear-gradient(90deg, #ff9966, #ff5e62);
}
.wrapper {
height: 100vh;
position: realtive;
}
.fas.fa-envelope {
color: #fff;
font-size: 2rem;
background: #333;
padding: 1rem;
border-radius: 100%;
margin: 0 0 1rem 0;
}
.card-content {
max-width: 30rem;
background-color: #fff;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 1rem;
padding: 4rem .5rem;
box-shadow: 1px 1px 2rem rgba(0,0,0,.3);
text-align: center;
}
.card-content h1 {
text-transform: uppercase;
margin: 0 0 1rem 0;
}
.card-content p {
font-size: .8rem;
margin: 0 0 2rem 0;
}
input {
padding: .8rem 1rem;
width: 40%;
border-radius: 5rem;
outline: none;
border: .1rem solid #d1d1d1;
font-size: .7rem;
}
::placeholder {
color: #d1d1d1;
}
.subscribe-btn {
padding: .8rem 2rem;
border-radius: 5rem;
background: linear-gradient(90deg, #ff9966, #ff5e62);
color: #fff;
font-size: .7rem;
border: none;
outline: none;
cursor: pointer;
}
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
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.
.