- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create an email newsletter with CSS?
<p>Following is the code to create an email newsletter with CSS −</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/xqWR08lS" rel="nofollow" target="_blank"> Live Demo</a></p><pre class="prettyprint notranslate" style=""><!DOCTYPE html> <html> <style> body {font-family: Arial, Helvetica, sans-serif;font-size: 20px;font-weight: bold;} h1{ text-align: center; } form { border: 3px solid #f1f1f1; padding: 20px; background-color: #f3f3f3; max-width: 800px; margin:auto; } input[type=text], input[type=submit] { width: 100%; padding: 12px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; font-size: 30px; } input[type=checkbox] { margin-top: 16px; } input[type=submit] { background-color: rgb(236, 255, 61); color: rgb(0, 0, 0); border: none; font-size: 25px; font-weight: bolder; } input[type=submit]:hover { background-color: rgb(255, 238, 0); } </style> <body> <h1>Email Newsletter Example</h1> <form> <h2>Subscribe to our Newsletter</h2> <p>Subscribe to our Newsletter to get latest update in the world of technology and web</p> </div> <div> <input type="text" placeholder="Name" name="name" required> <input type="text" placeholder="Email address" name="mail" required> <label> <input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter </label> <input type="submit" value="Subscribe"> </form> </body> </html></pre><h2>Output</h2><p>This will produce the following output −</p><p style=""><img src="https://www.tutorialspoint.com/assets/questions/media/37061/email_newsletter.jpg" class="fr-fic fr-dib" style="width: 450px; height: 306px;" width="450" height="306"></p>
Updated on 08-Apr-2020 10:49:17
- Related Questions & Answers
- How to create an image gallery with CSS
- How to create an avatar image with CSS?
- How to create an overlay effect with CSS?
- How to create an Accordion with CSS and JavaScript?
- How to create an animated search form with CSS?
- Create an attenuated shadow with CSS
- How to create an expanding grid with CSS and JavaScript?
- How to create an image to zoom with CSS and JavaScript?
- How to create tooltips with CSS?
- How to create arrows with CSS?
- How to create an animated, closable side navigation menu with CSS?
- How to create an off-canvas menu with CSS and JavaScript?
- How to create an image overlay title on hover with CSS?
- How to Create an On Scroll Fixed Navigation Bar with CSS?
- How to create fading effect with CSS
Advertisements