Kevin-Mok/email-sig
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add personal information

Browse Source
This commit is contained in:
Kevin Mok
2019-10-02 18:56:09 -04:00
parent 4dc67e18ee
commit 7175b71fa0
3 changed files with 33 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
*.css
*.map
test.html

43
index.html
View File

@@ -3,13 +3,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Kevin's Email Signature</title>
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="style.css?v=1.0"> <link rel="stylesheet" href="style.css?v=1.0">
<script src="http://livejs.com/live.js" charset="utf-8"></script>
</head> </head>
<body> <body>
@@ -18,48 +14,43 @@
<tbody> <tbody>
<tr class="outer-row"> <tr class="outer-row">
<td class="headshot-cell"> <td class="headshot-cell">
<a href="http://www.robertcooper.me"> <a href="https://kevin-mok.com" target="_blank">
<img src="https://drive.google.com/uc?id=0BxERWEfxe_eUTWJlMTMtbDJGN1k" name="preview-image-url" alt="headshot of Robert Cooper wearing a navy blue collared t-shirt with a background containing horizontal wooden structures and windows"/> <img src="https://avatars3.githubusercontent.com/u/25857736?s=460&v=4"
name="preview-image-url" alt="kevin-mok-headshot"/>
</a> </a>
</td> </td>
<td class="description-cell"> <td class="description-cell">
<table role="presentation"> <table role="presentation">
<tbody> <tbody>
<tr> <tr>
<td colspan="2" class="full-name">Robert Cooper</td> <td colspan="2" class="full-name">Kevin Mok</td>
</tr> </tr>
<tr> <tr>
<td colspan="2" class="title">Web Developer</td> <td colspan="2" class="title">Computer Science
Specialist</td>
</tr>
<tr>
<td colspan="2" class="title">University of Toronto</td>
</tr> </tr>
<tr> <tr>
<td valign="top" class="website"> <td valign="top" class="website">
<a href="http://www.robertcooper.me">www.robertcooper.me</a> <a href="https://kevin-mok.com" target="_blank">kevin-mok.com</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<!-- Social Icons found here: https://www.flaticon.com/packs/social-media-color --> <!-- Social Icons found here: https://www.flaticon.com/packs/social-media-color -->
<td colspan="2" class="social-icons"> <td colspan="2" class="social-icons">
<ul> <ul>
<li>
<a href="https://www.facebook.com/Robert.Cooper.Qu">
<img src="https://drive.google.com/uc?id=0BxERWEfxe_eUaWFKTlAxdkwyMXc" alt="Let's be friends on Facebook."/>
</a>
</li>
<li> <li>
<a href="https://twitter.com/RobertCooper_RC"> <a href="https://twitter.com/RobertCooper_RC">
<img src="https://drive.google.com/uc?id=0BxERWEfxe_eUY2RBc3dBSW92NVE" alt="Follow me on Twitter!"/> <img src="https://drive.google.com/uc?id=0BxERWEfxe_eUY2RBc3dBSW92NVE" alt="Follow me on Twitter!"/>
</a> </a>
</li> </li>
<li> <!-- <li> -->
<a href="https://www.instagram.com/robert.cooper.qu/"> <!-- <a href="https://www.instagram.com/robert.cooper.qu/"> -->
<img src="https://drive.google.com/uc?id=0BxERWEfxe_eUY3RIOU5MMnA3TFk" alt="Follow me on Instagram!"/> <!-- <img src="https://drive.google.com/uc?id=0BxERWEfxe_eUY3RIOU5MMnA3TFk" alt="Follow me on Instagram!"/> -->
</a> <!-- </a> -->
</li> <!-- </li> -->
<li>
<a href="https://www.linkedin.com/in/robert-cooper">
<img src="https://drive.google.com/uc?id=0BxERWEfxe_eUSTM0UWdKWUdNbHM" alt="Connected with me on LinkedIn!"/>
</a>
</li>
</ul> </ul>
</td> </td>
</tr> </tr>

17
style.css → style.scss
View File

@@ -1,10 +1,13 @@
$name-color: #002f65;
body { body {
display: flex; display: flex;
margin: 0; margin: 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
background-color: #7681B3; /* background-color: black; */
background-color: #1c1e1f;
} }
.presentational-container { .presentational-container {
@@ -19,13 +22,17 @@ table {
padding: 10px 10px 0; padding: 10px 10px 0;
border-width: 3px 0 0 0; border-width: 3px 0 0 0;
border-style: solid; border-style: solid;
border-color: #232C9F; border-color: $name-color;
} }
tr.outer-row td.headshot-cell { tr.outer-row td.headshot-cell {
padding: 0 12px 0 0; padding: 0 12px 0 0;
} }
td {
padding-bottom: 3px;
}
td.headshot-cell a { td.headshot-cell a {
text-decoration: none; text-decoration: none;
} }
@@ -49,20 +56,20 @@ td.description-cell > table {
td.full-name { td.full-name {
font-weight: bold; font-weight: bold;
color: #232C9F; color: $name-color;
font-size: 18px; font-size: 18px;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
td.title { td.title {
padding-bottom: 10px; // padding-bottom: 10px;
color: #333333; color: #333333;
font-size: 14px; font-size: 14px;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
td.website { td.website {
padding-bottom: 10px; // padding-bottom: 10px;
vertical-align: top; vertical-align: top;
color: #333333; color: #333333;
font-size: 14px; font-size: 14px;