How to create an email newsletter with CSS?

CSSWeb DevelopmentFront End Technology

<p>Following is the code to create an email newsletter with CSS &minus;</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/xqWR08lS" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate" style="">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;style&gt; body {font-family: Arial, Helvetica, sans-serif;font-size: 20px;font-weight: bold;} h1{ &nbsp; &nbsp;text-align: center; } form { &nbsp; &nbsp;border: 3px solid #f1f1f1; &nbsp; &nbsp;padding: 20px; &nbsp; &nbsp;background-color: #f3f3f3; &nbsp; &nbsp;max-width: 800px; &nbsp; &nbsp;margin:auto; } input[type=text], input[type=submit] { &nbsp; &nbsp;width: 100%; &nbsp; &nbsp;padding: 12px; &nbsp; &nbsp;margin: 8px 0; &nbsp; &nbsp;display: inline-block; &nbsp; &nbsp;border: 1px solid #ccc; &nbsp; &nbsp;box-sizing: border-box; &nbsp; &nbsp;font-size: 30px; } input[type=checkbox] { &nbsp; &nbsp;margin-top: 16px; } input[type=submit] { &nbsp; &nbsp;background-color: rgb(236, 255, 61); &nbsp; &nbsp;color: rgb(0, 0, 0); &nbsp; &nbsp;border: none; &nbsp; &nbsp;font-size: 25px; &nbsp; &nbsp;font-weight: bolder; } input[type=submit]:hover { &nbsp; &nbsp;background-color: rgb(255, 238, 0); } &lt;/style&gt; &lt;body&gt; &lt;h1&gt;Email Newsletter Example&lt;/h1&gt; &lt;form&gt; &lt;h2&gt;Subscribe to our Newsletter&lt;/h2&gt; &lt;p&gt;Subscribe to our Newsletter to get latest update in the world of technology and web&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;input type=&quot;text&quot; placeholder=&quot;Name&quot; name=&quot;name&quot; required&gt; &lt;input type=&quot;text&quot; placeholder=&quot;Email address&quot; name=&quot;mail&quot; required&gt; &lt;label&gt; &lt;input type=&quot;checkbox&quot; checked=&quot;checked&quot; name=&quot;subscribe&quot;&gt; Daily Newsletter &lt;/label&gt; &lt;input type=&quot;submit&quot; value=&quot;Subscribe&quot;&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p>This will produce the following output &minus;</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>
raja
Updated on 08-Apr-2020 10:49:17

Advertisements