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.

100 lines
4.6 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 style="display: flex;
  10. margin: 0;
  11. align-items: center;
  12. justify-content: center;
  13. height: 100vh;
  14. background-color: #1c1e1f;">
  15. <div class="presentational-container" style="box-shadow: 2px 2px 10px 5px;
  16. background-color: #fff;">
  17. <table role="presentation" style="background: none;
  18. margin: 0;
  19. border-width: 1px 0 0 0;
  20. border-style: solid;
  21. border-color: #002f65;
  22. padding-top: 10px;"><tbody><tr class="outer-row">
  23. <td class="description-cell" style="padding-bottom: 3px;">
  24. <table role="presentation" style="background:none;margin:0;border-width:0px 0 0 0;border-style:solid;border-color:#002f65;padding-top:10px;padding-left:0px;border:0px;padding:0;"><tbody>
  25. <tr>
  26. <td colspan="2" class="full-name" style="padding-bottom:3px;font-weight:bold;font-size:18px;font-family:Arial, Helvetica, sans-serif;">
  27. Kevin Mok
  28. </td>
  29. </tr>
  30. <tr>
  31. <td colspan="2" class="title" style="padding-bottom:3px;color:#333333;font-size:14px;font-family:Arial, Helvetica, sans-serif;">
  32. Computer Science Specialist
  33. </td>
  34. </tr>
  35. <tr>
  36. <td colspan="2" class="title" style="padding-bottom:3px;color:#333333;font-size:14px;font-family:Arial, Helvetica, sans-serif;">
  37. University of Toronto
  38. </td>
  39. </tr>
  40. <tr>
  41. <td valign="top" class="website" style="padding-bottom:3px;vertical-align:top;color:#333333;font-size:14px;font-family:Arial, Helvetica, sans-serif;">
  42. <a href="https://kevin-mok.com" target="_blank" style="color: #4BAFDB;
  43. text-decoration: none;
  44. font-weight: normal;
  45. font-size: 14px;">kevin-mok.com</a>
  46. </td>
  47. </tr>
  48. <tr>
  49. <!-- Social Icons found here: https://www.flaticon.com/packs/social-media-color --><td colspan="2" class="social-icons" style="padding-bottom:3px;position:relative;top:-8px;">
  50. <ul style="list-style: none;
  51. padding: 0;
  52. margin: 0;
  53. height: 25px;">
  54. <li style="display: inline-block;
  55. padding-right: 9px;">
  56. <a href="https://github.com/Kevin-Mok" target="_blank" style="text-decoration: none;">
  57. <!-- <img src="http://test.khkm.tk/github.svg" alt=""/> -->
  58. <img
  59. src="https://img.khkm.gq/uploads/big/2db206989793b732c143f15ffe2b694b.png"
  60. alt="github-icon" style="height: 25px;"></a>
  61. </li>
  62. <li style="display: inline-block;
  63. padding-right: 9px;">
  64. <a href="https://git.kevin-mok.com/Kevin-Mok" target="_blank" style="text-decoration: none;">
  65. <img id="gitea-icon"
  66. src="https://img.khkm.gq/uploads/big/71386b828f31087493c896635672ff3c.png"
  67. alt="gitea-icon" style="height:25px;position:relative;top:3px;"></a>
  68. </li>
  69. <li style="display: inline-block;
  70. padding-right: 9px;">
  71. <a href="https://www.linkedin.com/in/Kev-Mok/" target="_blank" style="text-decoration: none;">
  72. <img id="linkedin-icon"
  73. src="https://img.khkm.gq/uploads/big/a07fdee5042df0dd245b7788c5f25f7d.png"
  74. alt="linkedin-icon"
  75. style="height:25px;position:relative;left:-0px;"></a>
  76. </li>
  77. <li style="display: inline-block;
  78. padding-right: 9px;">
  79. <a href="https://fosstodon.org/@Kevin" target="_blank" style="text-decoration: none;">
  80. <img
  81. src="https://img.khkm.gq/uploads/big/8e32935993f5ec3dee5ea2b86507ded8.png"
  82. alt="mastodon-icon" style="height: 25px;"></a>
  83. </li>
  84. </ul>
  85. </td>
  86. </tr>
  87. </tbody></table>
  88. </td>
  89. <td class="headshot-cell" style="padding-bottom:3px;position:relative;left:-12px;">
  90. <img src="https://img.khkm.gq/uploads/big/cd4566af5a14ef845a6a9818bf26c73e.png" alt="uoft-logo" style="vertical-align: middle;
  91. width: 120px;
  92. border-radius: 100%;
  93. 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%;margin-right:5px;position:relative;left:-10px;">
  94. </td>
  95. </tr></tbody></table>
  96. </div>
  97. </body>
  98. </html>