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

Initial commit: starter files

master
Kevin Mok 5 years ago
commit
4dc67e18ee
Signed by: Kevin-Mok GPG Key ID: AEA75288DC135CF5
2 changed files with 175 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 74
      index.html
  2. 101
      style.css

74
index.html
View File

@ -0,0 +1,74 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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">
</head>
<body>
<div class="presentational-container">
<table role="presentation">
<tbody>
<tr class="outer-row">
<td class="headshot-cell">
<a href="http://www.robertcooper.me">
<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"/>
</a>
</td>
<td class="description-cell">
<table role="presentation">
<tbody>
<tr>
<td colspan="2" class="full-name">Robert Cooper</td>
</tr>
<tr>
<td colspan="2" class="title">Web Developer</td>
</tr>
<tr>
<td valign="top" class="website">
<a href="http://www.robertcooper.me">www.robertcooper.me</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="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>
<a href="https://twitter.com/RobertCooper_RC">
<img src="https://drive.google.com/uc?id=0BxERWEfxe_eUY2RBc3dBSW92NVE" alt="Follow me on Twitter!"/>
</a>
</li>
<li>
<a href="https://www.instagram.com/robert.cooper.qu/">
<img src="https://drive.google.com/uc?id=0BxERWEfxe_eUY3RIOU5MMnA3TFk" alt="Follow me on Instagram!"/>
</a>
</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>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

101
style.css
View File

@ -0,0 +1,101 @@
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;
}
Write Preview
Loading…
Cancel
Save