Hello Guys! Welcome to Coding Torque. In this blog, we are going to make a newsletter form card using HTML and CSS. You must create this if you are a beginner and learning HTML and CSS.
Before we start, here are some JavaScript Games you might like to create:
1. Snake Game using JavaScript
2. 2D Bouncing Ball Game using JavaScript
3. Rock Paper Scissor Game using JavaScript
4. Tic Tac Toe Game using JavaScript
5. Whack a Mole Game using JavaScript
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
HTML CodeÂ
Starter Template
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Subscribe Newsletter form card using HTML CSS and JavaScript - @codingtorque</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet"> </head> <body> <!-- further code in next block --> <!-- JQuery CDN --> <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html>
Paste the below code in your <body>
tag
<section class="wrapper"> <div class="content"> <header> <h1>Subscribe Us</h1> </header> <section> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </section> <footer> <input type="email" placeholder="Enter your email"> <button>Let's go</button> </footer> </div> </section>
CSS CodeÂ
Create a file style.css
and paste the code below.
@import url('https://fonts.googleapis.com/css?family=Nunito'); :root { --start-color: #0575E6; --end-color: #021B79; --p-color: #929DA6; --button-background: #0575E6; --input-background: #e4eff8; --radius-50: 50px; --padding-15: 15px; } body { margin: 0; padding: 0; height: 100vh; background: var(--start-color); background: linear-gradient(to right, var(--start-color), var(--end-color)) no-repeat; font-family: 'Nunito', sans-serif; } .wrapper { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .wrapper .content { background: #fff; padding: 40px; width: 100%; max-width: 500px; min-width: 200px; border-radius: 10px; text-align: center; } .wrapper .content header h1 { font-size: 230%; margin-top: 0; } .wrapper .content section { color: var(--p-color); font-size: 15px; } .wrapper .content footer { padding: var(--padding-15); } .wrapper .content footer input { border: unset; background-color: var(--input-background); padding: var(--padding-15); font-size: 13px; border-radius: var(--radius-50); width: 250px; } .wrapper .content footer button { background-color: var(--button-background); color: #fff; border: unset; width: 120px; border-radius: var(--radius-50); padding: var(--padding-15); margin-left: 10px; cursor: pointer; } .wrapper .content footer input:focus, .wrapper .content footer button:focus { outline: none; } @media screen and (max-width: 720px) { .wrapper .content { margin-right: 20px !important; margin-left: 20px !important; padding: var(--padding-15); } .wrapper .content footer input { width: 200px; margin-bottom: 10px; } }
Output Till Now
![newsletter using html and css with source code](https://codingtorque.com/wp-content/uploads/2022/11/BLOG-Newsletter-form-card-using-html-and-css-1-1024x576.png)
Written by: Piyush Patil
Code Credits:Â @afgprogrammer
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpful💖