Untitled

<!DOCTYPE html>
<html>
  <head>
    <style>
      * { margin: 0; padding: 0; }

      body, .body {
        background: url(https://chudodetyam.ru/assets/mail/bg.jpg) repeat;
        min-width: 850px;
      }

      .border {
        width: 100%;
        height: 9px;
        background: url(https://chudodetyam.ru/assets/mail/border.jpg) repeat;
      }

      .content {
        width: 800px;
        margin: 0 auto;
        margin-top: 30px;
        margin-bottom: 30px;
        background: #ffffff;
        padding-top: 20px;
      }

      .content-head {
        border-bottom: 2px solid #e6e6e6;
        padding-bottom: 20px;
      }

      .content-head-main {
        display: inline-block;
        vertical-align: middle;
      }

      .content-head a {
        display: inline-block;
        vertical-align: middle;
        margin-left: 15px;
      }

      .content-main {
        padding-top: 30px;
        padding-bottom: 40px;
        padding-left: 65px;
        padding-right: 65px;
        font-family: 'Arial', serif;
      }

      .content-main h1 {
        color: #002468;
        font-size: 25px;
        font-weight: bold;
        text-transform: uppercase;
        line-height: 37px;
      }

      .content-main p {
        font-size: 20px;
        color: #002468;
        line-height: 26px;
        margin-top: 30px;
      }

      .content-main .sign {
        text-align: right;
        font-style: italic;
        margin-top: 30px;
      }

      .content-main a {
        color: #0018ff;
        font-weight: bold;
      }

      .content-footer {
        border-top: 2px solid #e6e6e6;


        padding-left: 65px;

        font-family: 'Arial', serif;
      }

      .content-footer-main {
        padding-top: 25px;
        padding-bottom: 30px;
        display: inline-block;
        vertical-align: middle;
      }

      .content-footer-main img {
        display: inline-block;
        vertical-align: middle;
      }

      .content-footer-main .contact {
        display: inline-block;
        vertical-align: middle;
        color: #002568;
        font-size: 18px;
        line-height: 24px;
        margin-left: 10px;
      }

      .content-footer-main a {
          color: #002568;
      }

      .content-footer .social {
        display: inline-block;
        vertical-align: top;
        margin-left: 15px;
      }

      .content-unsub {
        background: #0076da;
        padding-top: 10px;
        padding-bottom: 10px;
        font-family: 'Arial', serif;
        color: #ffffff;
        font-size: 12px;
        line-height: 15px;
        text-align: center;
      }

      .content-unsub a {
        color: #ffffff;
      }

      hr {
        border: none;
        border-bottom: 2px solid #e6e6e6;
        width: 100%;
        display: block;
        margin-top: 40px;
      }
    </style>
    <meta charset="utf-8"/>
  </head>
  <body>
    <div class="body">
      <div class="border"></div>

      <div class="content">
        <div class="content-head">
          <img src="https://chudodetyam.ru/assets/mail/header.jpg" width="600" class="content-head-main"/>
          <a href="https://vk.com/chudodetyam" style="margin-left: 40px;">
            <img src="https://chudodetyam.ru/assets/img/inner/icon-vk.png" width="50"/>
          </a>
          <a href="https://instagram.com/chudodetyam">
            <img src="https://chudodetyam.ru/assets/img/inner/icon-insta.png" width="50"/>
          </a>
        </div>
        <div class="content-main">
          <h1>Уффф... Наконец-то я сделал и твоё видео! Заказов просто лавина, еле-еле успеваю!!!</h1>

          <div style="margin-top: 20px;">
            <img src="https://chudodetyam.ru/assets/mail/tick.jpg" width="40" style="display: inline-block; vertical-align: middle;"/>
            <div style="display: inline-block; vertical-align: middle; margin-left: 10px; color: #002468; font-size: 18px; line-height: 26px;">
                <a href="#">Скачай своё видео-поздравление!</a>
            </div>
          </div>

          <div style="margin-top: 20px;">
            <img src="https://chudodetyam.ru/assets/mail/tick.jpg" width="40" style="display: inline-block; vertical-align: middle;"/>
            <div style="display: inline-block; vertical-align: middle; margin-left: 10px; color: #002468; font-size: 18px; line-height: 26px;">
                <a href="#">Твоя ссылка на новогоднюю открытку</a>, где я уже загрузил твоё<br>
                видео - поздравление!
            </div>
          </div>

          [-- Если: детское письмо --]

          <div style="margin-top: 20px;">
            <img src="https://chudodetyam.ru/assets/mail/tick.jpg" width="40" style="display: inline-block; vertical-align: middle;"/>
            <div style="display: inline-block; vertical-align: middle; margin-left: 10px; color: #002468; font-size: 18px; line-height: 26px;">
                <a href="#">Скачай нашу инструкцию!</a> В ней рассказано как вызвать у ребенка<br>максимальный волшебный эффект от видео-поздравления!
            </div>
          </div>

          <div style="margin-top: 20px;">
            <img src="https://chudodetyam.ru/assets/mail/tick.jpg" width="40" style="display: inline-block; vertical-align: middle;"/>
            <div style="display: inline-block; vertical-align: middle; margin-left: 10px; color: #002468; font-size: 18px; line-height: 26px;">
                <a href="#">Скачай макет письма</a>, на котором ребенок будет рисовать желание<br>для меня. Тебе останется только распечатать его.
            </div>
          </div>

          [-- конец --]

          <hr>

          <h1 style="color: #ff0000; margin-top: 30px;">Но это еще не всё! У меня для тебя есть приятный сюрприз!</h1>

          <p>
            <b>Но он действует только в течение 24 часов! Поэтому читай внимательно! Времени мало!</b>
          </p>

          <p>
              Ты купил первое видео-поздравление на нашем сайте! И, как ты уже наверное знаешь - у меня есть видео-поздравления как для деток, так и для вторых половинок, а также для наших любимых родителей!
          </p>

          <p><i>В каждое из этих видео-поздравлений я вложил всю свою душу и сердце! В чудо должны верить не только дети, но и взрослые!</i></p>

          <p>Именно поэтому в течение 24 часов я даю тебе возможность
            <a href="#">заказать еще 2 видео-поздравления по супер-скидке</a>
             и получить статус нашего VIP-клиента, среди которых перед Новым Годом мы разыграем 2 путевки на один из самых живописных курортов мира  - <b>«БАЛИ»</b> (Всё Включено) и море других бонусов!
           </p>

           <p style="color: #ff0000;"><b><i>Чтобы учавствовать в розыгрыше путевки надо купить минимум 3 видео! Сейчас у тебя 1 из 3х. Купи еще 2 видео!</i></b></p>
           <br>
           <p><i>P.S. Запомни, данное предложение действует только 24 часа, магические скидки пропадут как только пройдут сутки...<br>
              <a href="#">Сделай это прямо сейчас!</a></i></p>

          <p class="sign">C любовью,<br>
                          твой Дедушка Мороз.</p>
        </div>
        <div class="content-footer">
          <div class="content-footer-main">
            <img src="https://chudodetyam.ru/assets/mail/avatar.jpg" width="100"/>
            <div class="contact">
              <b>Есть вопросы? Пишите эльфу:</b><br>
              <a href="mailto:support@chudodetyam.ru">support@chudodetyam.ru</a><br>
              Viber / WhatsApp: +7 (924) 635-00-11
            </div>
          </div>
          <a class="social" href="https://vk.com/chudodetyam" style="margin-left: 90px;">
            <img src="https://chudodetyam.ru/assets/mail/vk.jpg" width="80"/>
          </a>
          <a class="social" href="https://instagram.com/chudodetyam">
            <img src="https://chudodetyam.ru/assets/mail/insta.jpg" width="80"/>
          </a>
        </div>
        <div class="content-unsub">
            Вы получили это письмо, потому что оставили свою почту<br>
            на сайтах проектов холдинга «Magic Media Group». <a href="#">Отписаться от рассылки</a>
        </div>
      </div>

        <div class="border" style="margin-top: 30px;"></div>
    </div>
  </body>
</html>