Html email signature

atomjoy · Dec 4, 2024 · 3afe4ce · 3afe4ce
1 parent 5ba775a
commit 3afe4ce
Show file tree

Hide file tree

Showing 3 changed files with 201 additions and 4 deletions.
diff --git a/signature-1.htm b/signature-1.htm
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Signature</title>
+    <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
+
+    <style>
+        .si-body * {
+            font-family: Lora, 'Google Sans', Arial, Helvetica, monospace, sans-serif;
+        }
+    </style>
+</head>
+
+<body style="margin: 0px;">
+    <div class="si-body" style="background-color: #f5f4f2; background-position: center; background-size: cover; padding: 50px 10px; float: left; width: 100%; height: auto; margin: 0px; padding: 0px; box-sizing: border-box;">
+        <div class="si-border" style="width: 640px; margin: 50px auto; padding: 10px; background: #fff; box-sizing: border-box; overflow: hidden;">
+            <div class="si-table" style="border: 0px; width: 100%; margin: 0px auto; background: #fff; border: 2px solid #191715; overflow: hidden;">
+                <div class="si-company" style="float: left; width: 100%; padding: 20px; border-bottom: 2px solid #191715; box-sizing: border-box;">
+                    <img src="https://github.githubassets.com/assets/GitHub-Logo-ee398b662d42.png" class="si-logo" style="height: 30px; width: auto;">
+                </div>
+
+                <div class="si-details" style="float: left; width: 100%; padding: 20px; border-bottom: 2px solid #191715; box-sizing: border-box;">
+                    <div class="si-foto" style="float: left; width: auto; margin-right: 20px; box-sizing: border-box; overflow: hidden; border: 2px solid #191715;">
+                        <img src="https://img.freepik.com/premium-photo/cute-santa-claus-christmas-illustration_692702-7652.jpg?w=512" style="display:block; height: 170px; width: 160px; margin: 0px; object-fit: cover; border-radius: 0%; box-sizing: border-box;">
+                    </div>
+
+                    <div class="si-about" style="float: left; width: 66%;">
+                        <div class="si-job" style="color: #191715; font-size: 16px; margin-top: 30px;">Content Marketing</div>
+                        <div class="si-name" style="color: #191715; padding: 10px 0px; font-weight: 900; font-size: 25px;">Santa Clause Rednose</div>
+                        <div class="si-socials" style="padding: 5px 0px;">
+                            <a href="https://facebook.com" class="social-link" target="_blank" style="display: inline-block; color: #191715; width: auto; outline: none; text-decoration: none;">
+                                <img class="si-icon" src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/social-black/facebook.png" style="float: left; height: 30px; width: 30px; margin-right: 10px;">
+                            </a>
+                            <a href="https://x.com" class="social-link" target="_blank" style="display: inline-block; color: #191715; width: auto; outline: none; text-decoration: none;">
+                                <img class="si-icon" src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/social-black/twitter.png" style="float: left; height: 30px; width: 30px; margin-right: 10px;">
+                            </a>
+                            <a href="https://linkedin.com" class="social-link" target="_blank" style="display: inline-block; color: #191715; width: auto; outline: none; text-decoration: none;">
+                                <img class="si-icon" src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/social-black/linkedin.png" style="float: left; height: 30px; width: 30px; margin-right: 10px;">
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="si-contact" style="float: left; width: 100%; border-bottom: 2px solid #191715; box-sizing: border-box;">
+                    <div class="si-email si-info" style="float: left; width: 33.333%; font-size: 14px; font-weight: 500; box-sizing: border-box; text-align: center; padding-top: 25px; padding-bottom: 25px; border-right: 2px solid #191715;">
+                        <span style="display: inline-block;">
+                            <img src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/contact-black/email.png" class="si-icon-small" style="float: left; height: 15px; width: auto; margin-right: 5px; margin-top: 3px;">
+                            <a href="mailto: [email protected]" class="si-link" target="_blank" style="float: left; height: 15px; width: auto; margin-right: 5px; color: #191715 !important; outline: none !important; text-decoration: none !important;">
+                                [email protected]
+                            </a>
+                        </span>
+                    </div>
+
+                    <div class="si-mobile si-info" style="float: left; width: 33.333%; font-size: 14px; font-weight: 500; box-sizing: border-box; text-align: center; padding-top: 25px; padding-bottom: 25px; border-right: 2px solid #191715;">
+                        <span style="display: inline-block;">
+                            <img src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/contact-black/phone.png" class="si-icon-small" style="float: left; height: 15px; width: auto; margin-right: 5px; margin-top: 3px;">
+                            <a href="tel: +48 100 200 300" class="si-link" target="_blank" style="float: left; height: 15px; width: auto; margin-right: 5px; color: #191715 !important; outline: none !important; text-decoration: none !important;">
+                                +48 100 200 300
+                            </a>
+                        </span>
+                    </div>
+
+                    <div class="si-www si-info" style="float: left; width: 33.333%; font-size: 14px; font-weight: 500; box-sizing: border-box; text-align: center; padding-top: 25px; padding-bottom: 25px;">
+                        <span style="display: inline-block;">
+                            <img src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/contact-black/globe.png" class="si-icon-small" style="float: left; height: 15px; width: auto; margin-right: 5px; margin-top: 3px;">
+                            <a href="https://www.example.org" class="si-link" target="_blank" style="float: left; height: 15px; width: auto; margin-right: 5px; color: #191715 !important; outline: none !important; text-decoration: none !important; font-size: 14px;">
+                                www.example.org
+                            </a>
+                        </span>
+                    </div>
+                </div>
+
+                <div class="si-address">
+                    <div class="si-search" style="float: left; width: 100%; font-size: 14px; font-weight: 500; padding: 20px; padding-block: 25px; border-bottom: 0px solid #191715; box-sizing: border-box; text-align: center;">
+                        <span style="display: inline-block;">
+                            <img src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/contact-black/marker.png" class="si-icon-small" style="float: left; height: 15px; width: auto; margin-right: 5px; margin-top: 3px;">
+                            <a href="https://www.google.com/search?q=00-100 Warsaw, Al. Jerozolimskie 123" class="si-link" target="_blank" style="color: #191715 !important; width: auto; outline: none !important; text-decoration: none !important;">
+                                00-100 Warsaw, Al. Jerozolimskie 123
+                            </a>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="si-powerd" style="float: left; width: 100%; margin-top: 30px; margin-bottom: 30px; text-align: center;">
+            <a href="https://github.com/atomjoy/signatures" target="_blank" style="color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; font-family: Arial, Helvetica, sans-serif;">Powered by Atomjoy</a>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/signature-2.htm b/signature-2.htm
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Signature</title>
+    <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
+
+    <style>
+        .si-body * {
+            font-family: Lora, 'Google Sans', Arial, Helvetica, monospace, sans-serif;
+        }
+    </style>
+</head>
+
+<body style="margin: 0px;">
+    <div class="si-body" style="background-color: #f5f4f2; background-position: center; background-size: cover; padding: 50px 10px; float: left; width: 100%; height: auto; margin: 0px; padding: 0px; box-sizing: border-box;">
+        <div class="si-border" style="width: 640px; margin: 50px auto; padding: 10px; background: #fff; box-sizing: border-box; overflow: hidden;">
+            <div class="si-table" style="border: 0px; width: 100%; margin: 0px auto; background: #fff; border: 2px solid #191715; overflow: hidden;">
+                <div class="si-company" style="float: left; width: 100%; padding: 20px; border-bottom: 2px solid #191715; box-sizing: border-box;">
+                    <img src="https://github.githubassets.com/assets/GitHub-Logo-ee398b662d42.png" class="si-logo" style="height: 30px; width: auto;">
+                </div>
+
+                <div class="si-details" style="float: left; width: 100%; padding: 20px; border-bottom: 2px solid #191715; box-sizing: border-box;">
+                    <div class="si-foto" style="float: left; width: auto; margin-right: 20px; box-sizing: border-box; overflow: hidden; border: 2px solid #191715;">
+                        <img src="https://img.freepik.com/premium-photo/cute-santa-claus-christmas-illustration_692702-7652.jpg?w=512" style="display:block; height: 170px; width: 160px; margin: 0px; object-fit: cover; border-radius: 0%; box-sizing: border-box;">
+                    </div>
+
+                    <div class="si-about" style="float: left; width: 66%;">
+                        <div class="si-job" style="color: #191715; font-size: 16px; margin-top: 30px;">Content Marketing</div>
+                        <div class="si-name" style="color: #191715; padding: 10px 0px; font-weight: 900; font-size: 25px;">Santa Clause Rednose</div>
+                        <div class="si-socials" style="padding: 5px 0px;">
+                            <a href="https://facebook.com" class="social-link" target="_blank" style="display: inline-block; color: #191715; width: auto; outline: none; text-decoration: none;">
+                                <img class="si-icon" src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/social-black/facebook.png" style="float: left; height: 30px; width: 30px; margin-right: 10px;">
+                            </a>
+                            <a href="https://x.com" class="social-link" target="_blank" style="display: inline-block; color: #191715; width: auto; outline: none; text-decoration: none;">
+                                <img class="si-icon" src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/social-black/twitter.png" style="float: left; height: 30px; width: 30px; margin-right: 10px;">
+                            </a>
+                            <a href="https://linkedin.com" class="social-link" target="_blank" style="display: inline-block; color: #191715; width: auto; outline: none; text-decoration: none;">
+                                <img class="si-icon" src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/social-black/linkedin.png" style="float: left; height: 30px; width: 30px; margin-right: 10px;">
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="si-contact" style="float: left; width: 100%; border-bottom: 2px solid #191715; box-sizing: border-box;">
+                    <div class="si-email si-info" style="float: left; width: 33.333%; font-size: 14px; font-weight: 500; box-sizing: border-box; text-align: center; padding-top: 25px; padding-bottom: 25px; border-right: 2px solid #191715;">
+                        <span style="display: inline-block;">
+                            <img src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/contact-black/email.png" class="si-icon-small" style="float: left; height: 15px; width: auto; margin-right: 5px; margin-top: 3px;">
+                            <a href="mailto: [email protected]" class="si-link" target="_blank" style="float: left; height: 15px; width: auto; margin-right: 5px; color: #191715 !important; outline: none !important; text-decoration: none !important;">
+                                [email protected]
+                            </a>
+                        </span>
+                    </div>
+
+                    <div class="si-mobile si-info" style="float: left; width: 33.333%; font-size: 14px; font-weight: 500; box-sizing: border-box; text-align: center; padding-top: 25px; padding-bottom: 25px; border-right: 2px solid #191715;">
+                        <span style="display: inline-block;">
+                            <img src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/contact-black/phone.png" class="si-icon-small" style="float: left; height: 15px; width: auto; margin-right: 5px; margin-top: 3px;">
+                            <a href="tel: +48 100 200 300" class="si-link" target="_blank" style="float: left; height: 15px; width: auto; margin-right: 5px; color: #191715 !important; outline: none !important; text-decoration: none !important;">
+                                +48 100 200 300
+                            </a>
+                        </span>
+                    </div>
+
+                    <div class="si-www si-info" style="float: left; width: 33.333%; font-size: 14px; font-weight: 500; box-sizing: border-box; text-align: center; padding-top: 25px; padding-bottom: 25px;">
+                        <span style="display: inline-block;">
+                            <img src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/contact-black/globe.png" class="si-icon-small" style="float: left; height: 15px; width: auto; margin-right: 5px; margin-top: 3px;">
+                            <a href="https://www.example.org" class="si-link" target="_blank" style="float: left; height: 15px; width: auto; margin-right: 5px; color: #191715 !important; outline: none !important; text-decoration: none !important; font-size: 14px;">
+                                www.example.org
+                            </a>
+                        </span>
+                    </div>
+                </div>
+
+                <div class="si-address">
+                    <div class="si-search" style="float: left; width: 100%; font-size: 14px; font-weight: 500; padding: 20px; padding-block: 25px; border-bottom: 2px solid #191715; box-sizing: border-box; text-align: center;">
+                        <span style="display: inline-block;">
+                            <img src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/contact-black/marker.png" class="si-icon-small" style="float: left; height: 15px; width: auto; margin-right: 5px; margin-top: 3px;">
+                            <a href="https://www.google.com/search?q=00-100 Warsaw, Al. Jerozolimskie 123" class="si-link" target="_blank" style="color: #191715 !important; width: auto; outline: none !important; text-decoration: none !important;">
+                                00-100 Warsaw, Al. Jerozolimskie 123
+                            </a>
+                        </span>
+                    </div>
+                </div>
+
+                <div class="si-promo">
+                    <a href="https://santaclausvillage.info" target="_blank">
+                        <img src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/banner2.jpg" width="100%" class="si-promo-banner" style="display: block;">
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div class="si-powerd" style="float: left; width: 100%; margin-top: 30px; margin-bottom: 30px; text-align: center;">
+            <a href="https://github.com/atomjoy/signatures" target="_blank" style="color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; font-family: Arial, Helvetica, sans-serif;">Powered by Atomjoy</a>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/signature-3.htm b/signature-3.htm
@@ -16,9 +16,9 @@
 </head>
 
 <body style="margin: 0px;">
-    <div class="si-body" style="background-color: #f5f4f2; background-image: url(https://img.freepik.com/free-vector/watercolor-christmas-tinsel-background_79603-2307.jpg?t=st=1733060373~exp=1733063973~hmac=206dac4045a0e77bb545d61ec7b9302a7c66f9aefc334c6facd85608990f2288&w=1380); background-position: center; background-size: cover; padding: 50px 10px; float: left; width: 100%; height: auto; margin: 0px; padding: 0px; box-sizing: border-box;">
+    <div class="si-body" style="background-color: #f5f4f2; background-image: url('https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/bg1.png'); background-position: center; background-size: cover; padding: 50px 10px; float: left; width: 100%; height: auto; margin: 0px; padding: 0px; box-sizing: border-box;">
         <div class="si-border" style="width: 640px; margin: 50px auto; padding: 10px; background: #fff; box-sizing: border-box; overflow: hidden;">
-            <div class="si-table" style="border: 0px; width: 100%; margin: 0px auto; background: #fff; border: 2px solid #191715;">
+            <div class="si-table" style="border: 0px; width: 100%; margin: 0px auto; background: #fff; border: 2px solid #191715; overflow: hidden;">
                 <div class="si-company" style="float: left; width: 100%; padding: 20px; border-bottom: 2px solid #191715; box-sizing: border-box;">
                     <img src="https://github.githubassets.com/assets/GitHub-Logo-ee398b662d42.png" class="si-logo" style="height: 30px; width: auto;">
                 </div>
@@ -87,8 +87,7 @@
 
                 <div class="si-promo">
                     <a href="https://santaclausvillage.info" target="_blank">
-                        <!-- <img src="https://img.freepik.com/free-vector/funny-black-friday-banner-template-with-speech-bubble-comic-zoom-background_69286-219.jpg?t=st=1733058536~exp=1733062136~hmac=736cac89a67d79aef0b3f1e46be15aa34b26cdf5885ed51ff0d66636f3df43f8&w=1380" alt="Logo" class="si-promo-banner"> -->
-                        <img src="https://img.freepik.com/free-vector/elegant-banner-with-christmas-decoration_69286-247.jpg?t=st=1733058650~exp=1733062250~hmac=9239866146495b48b4f03127f255505108f7c3fe11284456f86d2d2c506666d8&w=1380" width="100%" class="si-promo-banner" style="display: block;">
+                        <img src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/banner2.jpg" width="100%" class="si-promo-banner" style="display: block;">
                     </a>
                 </div>
             </div>