1

Расположение элементов введите сюда описание изображения

Код

<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0; background: #214B90;" width="100%">
  <tr>
    <td style="text-align: left; padding: 50px 0 75px;">
      <span style="color: #fff; font-family: Helvetica, sans-serif; font-size: 24px; font-weight: 700;">FreebiesGallery</span>
    </td>
    <td style="text-align: right; padding: 50px 0 75px;">
      <a href="#" style="color: #fff; font-family: Helvetica, sans-serif; text-decoration: none; border: 1px solid #fff; border-radius: 20px; padding: 10px 20px; font-size: 15px; font-weight: 300;">Go to Website</a>
    </td>
  </tr>
  <tr>
    <td colspan="2" style="padding-bottom: 40px;">
      <center><span style="font-family: Georgia, serif; font-style: italic; font-weight: 400; font-size: 32px; color: #fff;">Are your looking for a</span></center>
    </td>
  </tr>
  <tr>
    <td colspan="2" style="padding-bottom: 30px;">
      <center><span style="font-family: Helvetica, sans-serif; font-weight: 700; font-size: 48px; color: #fff; padding-bottom: 40px;">FREE LANCE DESIGNER</span></center>
    </td>
  </tr>
  <tr>
    <td colspan="2" style="padding-bottom: 70px;">
      <center><a style="padding: 15px 30px; font-family: Helvetica, sans-serif; text-decoration: none; color: #fff; font-weight: 400; font-size: 18px; background: #102548; border-radius: 30px;" href="#">CONTACT NOW</a></center>
    </td>
  </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0; background: #FFFFFF;" width="100%">
  <tr>
    <td colspan="1" style="padding-top: 80px; text-align: left;">
      <img src="img/icon.png" border="0" alt="icon" style="border-radius: 100%; border: 1px solid #E8E8E8; padding: 40px;">
    </td>
  </tr>
  <tr>
    <td colspan="1" style="text-align: left;">
      <span style="font-weight: 700; font-family: Helvetica, sans-serif; font-size: 15px; text-transform: uppercase; color: #333; padding-top: 90px;">RESPONSIVE WEB DESIGN</span>
    </td>
  </tr>
  <tr>
    <td colspan="1" style="text-align: left;">
      <span style="color: #999; font-weight: 400; font-size: 14px; line-height: 1.5;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante urna, placerat eu euismod dictum, aliquam et sapien. Ut at risus commodo, eleifend sem cursus</span>
    </td>
  </tr>
  <tr>
    <td colspan="1" style="padding-top: 80px; text-align: right;">
      <img src="img/icon.png" border="0" alt="icon" style="border-radius: 100%; border: 1px solid #E8E8E8; padding: 40px;">
    </td>
  </tr>
  <tr>
    <td colspan="1" style="text-align: right;">
      <span style="font-weight: 700; font-family: Helvetica, sans-serif; font-size: 15px; text-transform: uppercase; color: #333; padding-top: 90px;">RESPONSIVE WEB DESIGN</span>
    </td>
  </tr>
  <tr>
    <td colspan="1" style="text-align: right;">
      <span style="color: #999; font-weight: 400; font-size: 14px; line-height: 1.5;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante urna, placerat eu euismod dictum, aliquam et sapien. Ut at risus commodo, eleifend sem cursus</span>
    </td>
  </tr>
</table>
1
  • Будет ли правильным закидывать все стили в тэг <style> когда верстаешь email письмо. В особенности можно ли использовать тэг display: flex; Или чем то его заменить? 29 июн 2019 в 16:00

1 ответ 1

2

* {
  margin: 0;
  padding: 0;
}

body {
  max-width: 900px;
  margin: 0 auto;
}
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0; background: #214B90;" width="100%">
  <tr>
    <td style="text-align: left; padding: 50px 0 75px;">
      <span style="color: #fff; font-family: Helvetica, sans-serif; font-size: 24px; font-weight: 700;">FreebiesGallery</span>
    </td>
    <td style="text-align: right; padding: 50px 0 75px;">
      <a href="#" style="color: #fff; font-family: Helvetica, sans-serif; text-decoration: none; border: 1px solid #fff; border-radius: 20px; padding: 10px 20px; font-size: 15px; font-weight: 300;">Go
          to Website</a>
    </td>
  </tr>
  <tr>
    <td colspan="2" style="padding-bottom: 40px;">
      <center><span style="font-family: Georgia, serif; font-style: italic; font-weight: 400; font-size: 32px; color: #fff;">Are
            your looking for a</span></center>
    </td>
  </tr>
  <tr>
    <td colspan="2" style="padding-bottom: 30px;">
      <center><span style="font-family: Helvetica, sans-serif; font-weight: 700; font-size: 48px; color: #fff; padding-bottom: 40px;">FREE
            LANCE DESIGNER</span></center>
    </td>
  </tr>
  <tr>
    <td colspan="2" style="padding-bottom: 70px;">
      <center><a style="padding: 15px 30px; font-family: Helvetica, sans-serif; text-decoration: none; color: #fff; font-weight: 400; font-size: 18px; background: #102548; border-radius: 30px;" href="#">CONTACT NOW</a></center>
    </td>
  </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0; background: #FFFFFF; width:80%; border: 4px solid red; margin: 30px auto; padding-bottom: 50px;">
  <tr>
    <td colspan="1" style="padding-top: 30px; text-align: center;">
      <img src="img/icon.png" border="0" alt="icon" style="border-radius: 100%; border: 1px solid #E8E8E8; padding: 40px;">
    </td>
    <td colspan="1" style="padding-top: 30px; text-align: center;">
      <img src="img/icon.png" border="0" alt="icon" style="border-radius: 100%; border: 1px solid #E8E8E8; padding: 40px;">
    </td>
  </tr>
  <tr>
    <td colspan="1" style="text-align: center; padding-top: 20px">
      <span style="font-weight: 700; font-family: Helvetica, sans-serif; font-size: 15px; text-transform: uppercase; color: #333; padding-top: 90px;">RESPONSIVE
          WEB DESIGN</span>
    </td>
    <td colspan="1" style="text-align: center; padding-top: 20px">
      <span style="font-weight: 700; font-family: Helvetica, sans-serif; font-size: 15px; text-transform: uppercase; color: #333; padding-top: 90px;">RESPONSIVE
            WEB DESIGN</span>
    </td>
  </tr>
  <tr>
    <td colspan="1" style="text-align: center; padding-top: 20px">
      <span style="color: #999; font-weight: 400; font-size: 14px; line-height: 1.5;">Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Etiam ante urna, placerat eu euismod dictum, aliquam et sapien. Ut at risus
          commodo, eleifend sem cursus</span>
    </td>
    <td colspan="1" style="text-align: center; padding-top: 20px;">
      <span style="color: #999; font-weight: 400; font-size: 14px; line-height: 1.5;">Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Etiam ante urna, placerat eu euismod dictum, aliquam et sapien. Ut at risus
          commodo, eleifend sem cursus</span>
    </td>
  </tr>
</table>

Всё поправил, невнимательно посмотрел на задание :)

3
  • 1
    Разве когда верстаешь email письмо можно подключать css? 29 июн 2019 в 15:51
  • @Владислав Жидко когда верстаешь письма надо использовать таблицы ?!
    – Leks
    29 июн 2019 в 15:54
  • Боже, не увидел, что это письма. Прошу прощение :) 29 июн 2019 в 15:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.