website/signature.html

<!doctype html>
<html>
  <head>
    <style>
      body {
        display: flex;
        margin: 0;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: #7681b3;
      }

      .presentational-container {
        padding: 20px;
        box-shadow: 2px 2px 10px 5px;
        background-color: #fff;
      }

      table {
        background: none;
        margin: 0;
        padding: 10px 10px 0;
        border-width: 3px 0 0 0;
        border-style: solid;
        border-color: #232c9f;
      }

      tr.outer-row td.headshot-cell {
        padding: 0 12px 0 0;
      }

      td.headshot-cell a {
        text-decoration: none;
      }

      td.headshot-cell img {
        vertical-align: middle;
        width: 120px;
        border-radius: 100%;
      }

      td.description-cell {
        padding: 0 0 0 12px;
      }

      td.description-cell > table {
        background: none;
        border: 0px;
        margin: 0;
        padding: 0;
      }

      td.full-name {
        font-weight: bold;
        color: #232c9f;
        font-size: 18px;
        font-family: Arial, Helvetica, sans-serif;
      }

      td.title {
        padding-bottom: 10px;
        color: #333333;
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
      }

      td.website {
        padding-bottom: 10px;
        vertical-align: top;
        color: #333333;
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
      }

      td.website a {
        color: #4bafdb;
        text-decoration: none;
        font-weight: normal;
        font-size: 14px;
      }

      td.social-icons {
        padding-top: 5px;
      }

      td.social-icons ul {
        list-style: none;
        padding: 0;
        margin: 0;
        height: 25px;
      }

      td.social-icons li {
        display: inline-block;
      }

      td.social-icons a {
        text-decoration: none;
      }

      td.social-icons img {
        width: 25px;
        height: 25px;
      }
    </style>
  </head>
  <body>
    <div>
      <table role="presentation">
        <tbody>
          <tr class="outer-row">
            <td class="headshot-cell">
              <a href="http://www.m-tartari.eu">
                <img
                  src="https://drive.google.com/uc?id=1Y6t65qoE8s6CUPcfVQii6RZgAl1YmALD"
                  name="preview-image-url"
                  alt="Photo"
                />
              </a>
            </td>
            <td class="description-cell">
              <table role="presentation">
                <tbody>
                  <tr>
                    <td colspan="2" class="full-name">Michele Tartari</td>
                  </tr>
                  <tr>
                    <td colspan="2" class="title">Robotics Engineer</td>
                  </tr>
                  <tr>
                    <td valign="top" class="website">
                      <a href="http://www.m-tartari.eu">www.m-tartari.eu</a>
                    </td>
                  </tr>
                  <tr>
                    <!-- Social Icons found here: https://www.flaticon.com/packs/social-media-color -->
                    <td colspan="2" class="social-icons">
                      <ul>
                        <li>
                          <a href="http://www.m-tartari.eu">
                            <img
                              src="https://drive.google.com/uc?id=1KCLt13X7Jn-vTmcpCBjDJssYsKb29tRT"
                              alt="Website"
                            />
                          </a>
                        </li>
                        <li>
                          <a href="https://github.com/m-tartari">
                            <img
                              src="https://drive.google.com/uc?id=1KferYVq2PXqGLZWEy6HlEYEaCKKZ8KiR"
                              alt="Github"
                            />
                          </a>
                        </li>
                        <li>
                          <a href="https://www.linkedin.com/in/m-tartari/">
                            <img
                              src="https://drive.google.com/uc?id=1V9nFk0LaUXXNhPb-FnmP0M30ubXrjyAo"
                              alt="LinkedIn"
                            />
                          </a>
                        </li>
                      </ul>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>