modified footer

2020-01-08 11:06:55 +01:00
parent fe4668a3ae
commit 43c8746ebf
6 changed files with 166 additions and 5 deletions
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+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;
+}
+</style>
+</head>
+<body>
+    <div>
+    <table role="presentation">
+        <tbody>
+        <tr class="outer-row">
+            <td class="headshot-cell">
+            <a href="http://www.m-tartari.eu">
+                <img src="https://drive.google.com/uc?id=1Y6t65qoE8s6CUPcfVQii6RZgAl1YmALD" name="preview-image-url" alt="Photo"/>
+            </a>
+            </td>
+            <td class="description-cell">
+            <table role="presentation">
+                <tbody>
+                <tr>
+                    <td colspan="2" class="full-name">Michele Tartari</td>
+                </tr>
+                <tr>
+                    <td colspan="2" class="title">Robotics Engineer</td>
+                </tr>
+                <tr>
+                    <td valign="top" class="website">
+                    <a href="http://www.m-tartari.eu">www.m-tartari.eu</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="http://www.m-tartari.eu">
+                            <img src="https://drive.google.com/uc?id=1KCLt13X7Jn-vTmcpCBjDJssYsKb29tRT" alt="Website"/>
+                        </a>
+                        </li>
+                        <li>
+                        <a href="https://github.com/m-tartari">
+                            <img src="https://drive.google.com/uc?id=1KferYVq2PXqGLZWEy6HlEYEaCKKZ8KiR" alt="Github"/>
+                        </a>
+                        </li>
+                        <li>
+                        <a href="https://www.linkedin.com/in/m-tartari/">
+                            <img src="https://drive.google.com/uc?id=1V9nFk0LaUXXNhPb-FnmP0M30ubXrjyAo" alt="LinkedIn"/>
+                        </a>
+                        </li>
+                    </ul>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+    </div>
+</body>
+