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
100 lines
4.6 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Kevin's Email Signature</title>
|
|
<link rel="stylesheet" href="style.css?v=1.0">
|
|
<script src="https://cdn.khkm.gq/live.js" charset="utf-8"></script>
|
|
</head>
|
|
<body style="display: flex;
|
|
margin: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
|
|
background-color: #1c1e1f;">
|
|
<div class="presentational-container" style="box-shadow: 2px 2px 10px 5px;
|
|
background-color: #fff;">
|
|
<table role="presentation" style="background: none;
|
|
margin: 0;
|
|
border-width: 1px 0 0 0;
|
|
border-style: solid;
|
|
border-color: #002f65;
|
|
padding-top: 10px;"><tbody><tr class="outer-row">
|
|
<td class="description-cell" style="padding-bottom: 3px;">
|
|
<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>
|
|
<tr>
|
|
<td colspan="2" class="full-name" style="padding-bottom:3px;font-weight:bold;font-size:18px;font-family:Arial, Helvetica, sans-serif;">
|
|
Kevin Mok
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" class="title" style="padding-bottom:3px;color:#333333;font-size:14px;font-family:Arial, Helvetica, sans-serif;">
|
|
Computer Science Specialist
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" class="title" style="padding-bottom:3px;color:#333333;font-size:14px;font-family:Arial, Helvetica, sans-serif;">
|
|
University of Toronto
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td valign="top" class="website" style="padding-bottom:3px;vertical-align:top;color:#333333;font-size:14px;font-family:Arial, Helvetica, sans-serif;">
|
|
<a href="https://kevin-mok.com" target="_blank" style="color: #4BAFDB;
|
|
text-decoration: none;
|
|
font-weight: normal;
|
|
font-size: 14px;">kevin-mok.com</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- 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;">
|
|
<ul style="list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 25px;">
|
|
<li style="display: inline-block;
|
|
padding-right: 9px;">
|
|
<a href="https://github.com/Kevin-Mok" target="_blank" style="text-decoration: none;">
|
|
<!-- <img src="http://test.khkm.tk/github.svg" alt=""/> -->
|
|
<img
|
|
src="https://img.khkm.gq/uploads/big/2db206989793b732c143f15ffe2b694b.png"
|
|
alt="github-icon" style="height: 25px;"></a>
|
|
</li>
|
|
<li style="display: inline-block;
|
|
padding-right: 9px;">
|
|
<a href="https://git.kevin-mok.com/Kevin-Mok" target="_blank" style="text-decoration: none;">
|
|
<img id="gitea-icon"
|
|
src="https://img.khkm.gq/uploads/big/71386b828f31087493c896635672ff3c.png"
|
|
alt="gitea-icon" style="height:25px;position:relative;top:3px;"></a>
|
|
</li>
|
|
<li style="display: inline-block;
|
|
padding-right: 9px;">
|
|
<a href="https://www.linkedin.com/in/Kev-Mok/" target="_blank" style="text-decoration: none;">
|
|
<img id="linkedin-icon"
|
|
src="https://img.khkm.gq/uploads/big/a07fdee5042df0dd245b7788c5f25f7d.png"
|
|
alt="linkedin-icon"
|
|
style="height:25px;position:relative;left:-0px;"></a>
|
|
</li>
|
|
<li style="display: inline-block;
|
|
padding-right: 9px;">
|
|
<a href="https://fosstodon.org/@Kevin" target="_blank" style="text-decoration: none;">
|
|
<img
|
|
src="https://img.khkm.gq/uploads/big/8e32935993f5ec3dee5ea2b86507ded8.png"
|
|
alt="mastodon-icon" style="height: 25px;"></a>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</td>
|
|
<td class="headshot-cell" style="padding-bottom:3px;position:relative;left:-12px;">
|
|
<img src="https://img.khkm.gq/uploads/big/cd4566af5a14ef845a6a9818bf26c73e.png" alt="uoft-logo" style="vertical-align: middle;
|
|
width: 120px;
|
|
border-radius: 100%;
|
|
margin-right: 5px;"><img id="headshot-img" src="https://avatars3.githubusercontent.com/u/25857736?s=460&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;">
|
|
</td>
|
|
|
|
</tr></tbody></table>
|
|
</div>
|
|
</body>
|
|
</html>
|