HTML:
<div class="sidebar subscription"> <div class="subscription-inner"> <h5>Рассылка</h5> <p><strong>1429</strong> <b>подписчиков</b> уже получают периодическую рассылку о новостях из мира инфографики: тренды, новинки, инструменты, важные события и конференции</p> <form novalidate="" target="_blank" class="validate" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" method="post" action="http://123.com"> <input type="text" placeholder="Введите e-mail" class="subscription-input" name="EMAIL"> <input type="submit" class="subscription-button" value="Подписаться" name="subscribe"> </form> </div> </div>
и стили CSS:
.sidebar.subscription { background: url("http://infogra.ru/wp-content/themes/infogra/assets/images/subscription-background.png") repeat scroll 0 0 rgba(0, 0, 0, 0); display: block; height: 280px; margin: -8px -8px 20px; padding: 8px; text-align: center; width: 280px; } .sidebar.subscription .subscription-inner { background: none repeat scroll 0 0 #f5f5f5; height: 280px; width: 280px; } .sidebar.subscription .subscription-inner h5 { display: block; font-size: 22px; font-weight: bold; padding: 17px 0 16px; text-transform: uppercase; } .sidebar.subscription .subscription-inner p { color: #262626; display: block; font-size: 15px; line-height: 18px; padding: 0 18px 24px; text-align: left; } .sidebar.subscription .subscription-inner p strong { text-transform: uppercase; } .sidebar.subscription .subscription-input { background: none repeat scroll 0 0 #fff; border: 1px solid #7f8c9c; display: block; font-size: 15px; height: 28px; line-height: 28px; margin: 0 auto; text-align: center; width: 207px; } .sidebar.subscription .subscription-button { background: none repeat scroll 0 0 #72bb72; border: medium none; color: #fff; cursor: pointer; display: block; font-size: 16px; height: 33px; line-height: 33px; margin: 19px auto 0; text-align: center; text-transform: uppercase; width: 182px; }
оформление было подмечено тут
и на всякий случай картинка бэкграунда: