Description:-

Hello everyone! In this video, you are going to learn "How to create ''Email Subscription Form - Using HTML & CSS" .

Let's see!

First, try it by following the video tutorial !

Result -

Email Subscription Form | Codexbaba

You Might Also Like  ➝

• CSS Card Hover Effect

• DROPMORPHISM UI DESIGN 

• Profile card hover effect 

• Add To Favorites Button Hover Effect

• Social Media Button Hover Effect 

• Login in Page

All the source codes are available to download from here. Copy and paste the code from the text editors. First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

Source code:-

Email Subscription Form - Using HTML & CSS

HTML 

<div class="input-group"> <input type="email" class="input" id="Email" name="Email" placeholder="@gmail.com" autocomplete="off"> <input class="button--submit" value="Subscribe" type="submit"> </div>

CSS

.input-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .input { min-height: 50px; min-width: 150px; padding: 0 1rem; color: black; font-size: 15px; border: 1px solid #5e4dcd; border-radius: 6px 0 0 6px; background-color: transparent; } .button--submit { min-height: 50px; padding: .5em 1em; border: none; border-radius: 0 6px 6px 0; background-color: #5e4dcd; color:black; font-size: 15px; cursor: pointer; -webkit-transition: background-color .3s ease-in-out; transition: background-color .3s ease-in-out; } .button--submit:hover { background-color: #5e5dcd; } .input:focus, .input:focus-visible { border-color: #3898EC; outline: none; }

Result -

Email Subscription Form | Codexbaba

.

× NOTE: Make sure that you follow us on Telegram ( our recommendation ). Some drives will be telegram exclusive.

Follow us

Telegram

Join Our Telegram Group of your batch and get Off-campus and Job updates.

Instagram

Join Our Instagaram channel of your batch and get Off-campus and Job updates.

full-width

You Might Also Like ➝

• Authentic Weather Loader 

• DROPMORPHISM UI DESIGN 

• Profile card hover effect 

• About us page with pop effect 

• Social Media Button Hover Effect 

• Login in Page 

Happy Coding..