Initial commit: starter files

5 years ago · 4dc67e18ee
2 changed files with 175 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -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>
--- a/style.css
+++ b/style.css
@ -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;
+}