HTML CSS examples for CSS Widget:Panel
Create news letter email input panel
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> footer{<!--from w ww .j a v a 2 s . c o m--> background:#0096D6; width:100%; height:250px; color:#fff; border:#FF0004 1px solid; } #foot{ width:1136px; margin:0px auto; margin-top:80px; } #subscribe{ display:inline-block; width:400px; line-height:20px; } #email{ width:300px; height:25px; border:none; border-bottom:1px solid #ffffff; background:#0096D6; color:#fff; } input{padding:2px 10px;} ::-webkit-input-placeholder { color: #ffffff; } :-moz-placeholder { color: #ffffff; } ::-moz-placeholder { color: #ffffff; } :-ms-input-placeholder { color: #ffffff; } #development{ float:right; } footer a{ color:#fff; } footer a:hover{ color:#fff; } ul{ list-style:none; line-height:22px; } a{ text-decoration:none; color:#000000; } a:hover{ color:#0096D6; } </style> </head> <body> <footer> <div id="foot"> <div id="subscribe"> <b>Subscribe</b> <br> this is a test. this is a test. this is a test. this is a test. <br> this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. <br> this is a test. this is a test. this is a test. this is a test. <br> this is a test. this is a test. this is a test. <input type="email" name="email" id="email" placeholder="yourname@domain.com"> </div> <span id="development"> <ul> Current Development <a href="#"> <li>Demo</li> </a> <a href="#"> <li>ALPHA</li> </a> <a href="#"> <li>BETA</li> </a> </ul> </span> </div> </footer> </body> </html>