My HTML email signature. https://codepen.io/Kevin-Mok/pen/KKKPPwy
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

96 lines
4.7 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Kevin's Email Signature</title>
  6. <link rel="stylesheet" href="style.css?v=1.0">
  7. <script src="https://cdn.khkm.gq/live.js" charset="utf-8"></script>
  8. </head>
  9. <body>
  10. <div class="presentational-container" style="// padding: 20px;
  11. box-shadow: 2px 2px 10px 5px;
  12. background-color: #fff;">
  13. <table role="presentation" style="background: none;
  14. margin: 0;
  15. // padding: 10px 10px 0;
  16. border-width: 1px 0 0 0;
  17. border-style: solid;
  18. border-color: $name-color;
  19. padding-top: 10px;"><tbody><tr class="outer-row">
  20. <td class="description-cell" style="padding-bottom: 3px;">
  21. <table role="presentation" style="background:none;margin:0;// padding:10px 10px 0;border-width:1px 0 0 0;border-style:solid;border-color:$name-color;padding-top:10px;padding-left:0px;border:0px;padding:0;"><tbody>
  22. <tr>
  23. <td colspan="2" class="full-name" style="padding-bottom:3px;font-weight:bold;// color:$name-color;font-size:18px;font-family:Arial, Helvetica, sans-serif;">
  24. Kevin Mok
  25. </td>
  26. </tr>
  27. <tr>
  28. <td colspan="2" class="title" style="padding-bottom:3px;// padding-bottom:10px;color:#333333;font-size:14px;font-family:Arial, Helvetica, sans-serif;img {
  29. width:5em;">
  30. <!-- Computer Science Specialist -->
  31. Software Engineering Intern
  32. </td>
  33. </tr>
  34. <tr>
  35. <td colspan="2" class="title" style="padding-bottom:3px;// padding-bottom:10px;color:#333333;font-size:14px;font-family:Arial, Helvetica, sans-serif;img {
  36. width:5em;">
  37. <!-- University of Toronto -->
  38. Red Hat
  39. </td>
  40. </tr>
  41. <tr>
  42. <td valign="top" class="website" style="padding-bottom: 3px;">
  43. <a href="https://kevin-mok.com" target="_blank" style="color: #4BAFDB;
  44. text-decoration: none;
  45. font-weight: normal;
  46. font-size: 14px;">kevin-mok.com</a>
  47. </td>
  48. </tr>
  49. <tr>
  50. <!-- Social Icons found here: https://www.flaticon.com/packs/social-media-color --><td colspan="2" class="social-icons" style="padding-bottom:3px;// padding-top:-75px;position:relative;top:-8px;">
  51. <ul style="list-style: none;
  52. padding: 0;
  53. margin: 0;
  54. height: 25px;">
  55. <li style="display: inline-block;
  56. padding-right: 9px;">
  57. <a href="https://github.com/Kevin-Mok" target="_blank" style="text-decoration: none;">
  58. <!-- <img src="http://test.khkm.tk/github.svg" alt=""/> -->
  59. <img src="https://img.khkm.gq/uploads/big/2db206989793b732c143f15ffe2b694b.png" alt="github-icon" style="// width: 25px;
  60. height: 25px;
  61. // height: 1.5em;"></a>
  62. </li>
  63. <li style="display: inline-block;
  64. padding-right: 9px;">
  65. <a href="https://git.kevin-mok.com/Kevin-Mok" target="_blank" style="text-decoration: none;">
  66. <img id="gitea-icon" src="https://img.khkm.gq/uploads/big/71386b828f31087493c896635672ff3c.png" alt="gitea-icon" style="// width:25px;height:2em;// height:1.5em;position:relative;top:3px;"></a>
  67. </li>
  68. <li style="display: inline-block;
  69. padding-right: 9px;">
  70. <a href="https://www.linkedin.com/in/Kev-Mok/" target="_blank" style="text-decoration: none;">
  71. <img id="linkedin-icon" src="https://img.khkm.gq/uploads/big/a07fdee5042df0dd245b7788c5f25f7d.png" alt="linkedin-icon" style="// width:25px;height:25px;// height:1.5em;position:relative;left:-3px;"></a>
  72. </li>
  73. <li style="display: inline-block;
  74. padding-right: 9px;">
  75. <a href="https://fosstodon.org/@Kevin" target="_blank" style="text-decoration: none;">
  76. <img src="https://img.khkm.gq/uploads/big/8e32935993f5ec3dee5ea2b86507ded8.png" alt="mastodon-icon" style="// width: 25px;
  77. height: 25px;
  78. // height: 1.5em;"></a>
  79. </li>
  80. </ul>
  81. </td>
  82. </tr>
  83. </tbody></table>
  84. </td>
  85. <td class="headshot-cell" style="padding-bottom:3px;position:relative;left:-12px;">
  86. <!-- <img src="https://img.khkm.gq/uploads/big/cd4566af5a14ef845a6a9818bf26c73e.png" alt="uoft-logo"/> -->
  87. <img src="https://img.khkm.gq/uploads/big/d5fa1826d232f67869823471a772c14d.png" alt="red-hat-logo" style="vertical-align: middle;
  88. width:120px;
  89. // border-radius: 5px;
  90. margin-right: 5px;"><img id="headshot-img" src="https://avatars3.githubusercontent.com/u/25857736?s=460&amp;v=4" name="preview-image-url" alt="kevin-mok-headshot" style="vertical-align:middle;width:120px;border-radius:100%;// border-radius:5px;margin-right:5px;position:relative;left:-10px;">
  91. </td>
  92. </tr></tbody></table>
  93. </div>
  94. </body>
  95. </html>