Skip to content

Commit fc2a15e

Browse files
atomjoyatomjoy
authored
Email signature
Html email signature thunderbird gmail, outlook, yahoo, interia, wp, o2 ...
1 parent ae38eba commit fc2a15e

File tree

1 file changed

+60
-162
lines changed

1 file changed

+60
-162
lines changed

‎resources/views/email/signature.blade.php‎

Lines changed: 60 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -1,169 +1,67 @@
11
<!DOCTYPE html>
2-
<html lang="{{ $locale ?? 'pl' }}">
2+
<html lang="pl">
33

44
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8-
<title>{{ $title ?? 'Email signature' }}</title>
9-
10-
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
11-
12-
<style>
13-
.si-body {
14-
display: block;
15-
padding: 0px;
16-
margin: 0px;
17-
}
18-
19-
.si-wrapper {
20-
width: 100%;
21-
display: block;
22-
overflow: hidden;
23-
box-sizing: border-box;
24-
color: #222;
25-
background: #f2f2fd;
26-
font-size: 18px;
27-
font-weight: normal;
28-
font-family: 'Baloo 2', 'Open Sans', 'Roboto', 'Segoe UI', 'Helvetica Neue', Helvetica, Tahoma, Arial, monospace, sans-serif;
29-
}
30-
31-
.si-table a.proton-link {
32-
display: inline-block;
33-
width: auto !important;
34-
outline: none !important;
35-
text-decoration: none !important;
36-
}
37-
38-
.si-border {
39-
width: 640px;
40-
margin: 50px auto;
41-
border: 1px solid #191715;
42-
border-radius: 20px;
43-
overflow: hidden;
44-
}
45-
46-
.si-table {
47-
border-collapse: collapse;
48-
border-spacing: 0px;
49-
border: 0px;
50-
width: 640px;
51-
margin: 0px auto;
52-
background-color: #F1EBE4;
53-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
54-
border-top-width: 3px;
55-
}
56-
57-
.si-table td,
58-
.si-table th {
59-
padding: 10px 20px;
60-
border-bottom: 1px solid #191715;
61-
}
62-
63-
.si-foto {
64-
display: block;
65-
height: 170px;
66-
width: 150px;
67-
object-fit: cover;
68-
border: 4px solid #ff4400;
69-
box-shadow: 0px 0px 0px 4px #ff4400aa, 0px 0px 0px 8px #ff440055;
70-
border-radius: 20px;
71-
transition: all 1s;
72-
}
73-
74-
.si-name {
75-
color: #191715;
76-
font-weight: 900;
77-
font-size: 25px;
78-
border-left: 1px solid #191715;
79-
}
80-
81-
.si-title {
82-
text-align: left;
83-
border-left: 1px solid #191715;
84-
}
85-
86-
.si-title strong {
87-
color: #ff4400;
88-
font-weight: 700;
89-
font-size: 19px;
90-
}
91-
92-
.si-row {
93-
text-align: left;
94-
border-left: 1px solid #191715;
95-
}
96-
97-
.si-row strong {
98-
font-weight: 600;
99-
font-size: 19px;
100-
}
101-
102-
.si-social {
103-
background: #191715;
104-
color: #F1EBE4;
105-
padding: 15px;
106-
border: 0px;
107-
}
108-
109-
.si-icon {
110-
float: left;
111-
height: 30px;
112-
width: 30px;
113-
margin-right: 10px;
114-
115-
}
116-
117-
.si-company img {
118-
float: left;
119-
width: 150px;
120-
}
121-
</style>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Email signature</title>
9+
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
10+
<style>
11+
.si-wrapper * {
12+
font-family: 'Baloo 2', 'Google Sans', 'Open Sans', Roboto, 'Segoe UI', 'Helvetica Neue', Helvetica, Tahoma, Arial, monospace, sans-serif;
13+
}
14+
</style>
12215
</head>
12316

124-
<body class="si-body">
125-
<div class="si-wrapper">
126-
<div class="si-border">
127-
<table class="si-table">
128-
<tbody>
129-
<tr>
130-
<td class="si-company" colspan="2">
131-
<img src="https://www.freepnglogos.com/uploads/black-netflix-logo-png-4.png" alt="Logo">
132-
</td>
133-
</tr>
134-
<tr class="si-image">
135-
<td rowspan="4" width="150px">
136-
<img class="si-foto" src="https://img.freepik.com/free-photo/fashion-boy-with-yellow-jacket-blue-pants_71767-96.jpg?w=740&t=st=1687603414~exp=1687604014~hmac=e996a267d60cb3bb9467733a6fb6a5116c49020aa25efb3610f90fcb9ae83de9" alt="Foto">
137-
{{-- <img class="si-foto" src="https://xsgames.co/randomusers/avatar.php?g=female" alt="Foto"> --}}
138-
{{-- <img class="si-foto" src="https://i.pravatar.cc/150" alt="Foto"> --}}
139-
</th>
140-
<td class="si-name">Alex Cosmonova</th>
141-
</tr>
142-
<tr>
143-
<td class="si-title"><strong>Web Developer</strong></td>
144-
</tr>
145-
<tr>
146-
<td class="si-row"><strong>Netflix Novatec Ltd.</strong></td>
147-
</tr>
148-
<tr>
149-
<td class="si-row">
150-
<div>Email: <strong>[email protected]</strong></div>
151-
<div>Phone: <strong>+48 100 200 300</strong></div>
152-
</td>
153-
</tr>
154-
<tr>
155-
<td colspan="2" class="si-social">
156-
<a href="" class="proton-link"><img class="si-icon" src="https://img.icons8.com/?size=128&id=16713&format=png"></a>
157-
<a href="" class="proton-link"><img class="si-icon" src="https://img.icons8.com/?size=128&id=13963&format=png"></a>
158-
<a href="" class="proton-link"><img class="si-icon" src="https://img.icons8.com/?size=128&id=32323&format=png"></a>
159-
<a href="" class="proton-link"><img class="si-icon" src="https://img.icons8.com/?size=128&id=19318&format=png"></a>
160-
<a href="" class="proton-link"><img class="si-icon" src="https://img.icons8.com/?size=128&id=Wkmw3VcFPr8T&format=png"></a>
161-
</td>
162-
</tr>
163-
</tbody>
164-
</table>
165-
</div>
166-
</div>
17+
<body class="si-body" style="display: block; padding: 0px; margin: 0px; font-family: 'Baloo 2', 'Open Sans', 'Roboto', 'Segoe UI', 'Helvetica Neue', Helvetica, Tahoma, Arial, monospace, sans-serif;">
18+
<div class="si-wrapper" style="color: #222; background: #f5f4f2; font-size: 18px; font-weight: normal; display: block; overflow: hidden; box-sizing: border-box; background-position: center; background-size: cover;">
19+
<div class="si-border" style="border: 1px solid #000; background: #F1EBE4; width: 600px; margin: 20px 20px; border-radius: 20px; overflow: hidden;">
20+
<div class="si-table" style="border: 0px; width: 640px; margin: 0px auto;">
21+
<div class="si-company" style="border-bottom: 1px solid #000; float: left; width: 100%; padding: 15px;">
22+
<a href="https://netflix.com">
23+
<img src="https://www.freepnglogos.com/uploads/black-netflix-logo-png-4.png" style="float: left; height: 50px !important; min-height: 50px !important; max-height: 50px !important;" height="50px">
24+
</a>
25+
</div>
26+
<div class="si-details" style="float: left; width: 100%;">
27+
<div class=" si-image" style="float: left; width: 160px; height: auto; overflow: hidden; padding: 30px 20px 30px 20px; border-right: 1px solid #000;">
28+
<div style="display: block; height: 170px; width: 150px; border: 4px solid #ff4400; box-shadow: 0px 0px 0px 4px #ff4400aa, 0px 0px 0px 8px #ff440055; border-radius: 20px; overflow: hidden;">
29+
<img class="si-foto" src="https://xsgames.co/randomusers/avatar.php?g=female" style="display: block; height: 170px; width: 150px; object-fit: cover;">
30+
</div>
31+
</div>
32+
33+
<div class="si-about" style="float: left; width: 400px; border: 0px;">
34+
<div class="si-name" style="padding: 10px 15px; color: #000; font-weight: 900; font-size: 21px; border-bottom: 1px solid #000;">
35+
Alex Cosmonova
36+
</div>
37+
<div class="si-title" style="padding: 10px 15px; border-bottom: 1px solid #000;">
38+
<strong style="color: #ff4400; font-weight: 700; font-size: 17px;">
39+
Web Developer
40+
</strong>
41+
</div>
42+
<div class="si-row" style="padding: 10px 15px; border-bottom: 1px solid #000;">
43+
<strong style="color: #000; font-weight: 700; font-size: 16px;">
44+
Netflix Novatec Ltd.
45+
</strong>
46+
</div>
47+
<div class="si-row" style="padding: 10px 15px;">
48+
<div>Email: <strong style="font-weight: 600; font-size: 16px;">
49+
<a href="mailto:[email protected]" target="_blank" style="color: #000; text-decoration: none;">[email protected]</a>
50+
</strong></div>
51+
<div>Phone: <strong style="font-weight: 600; font-size: 16px;">
52+
<a href="tel:+48100200300" target="_blank" style="color: #000; text-decoration: none;">+48 100 200 300</a></strong></div>
53+
</div>
54+
</div>
55+
</div>
56+
57+
<div class="si-social" style="float: left; width: 100%; background: #000; padding: 15px; border: 0px; box-sizing: border-box;">
58+
<a href="https://facebook.com" target="_blank" class="proton-link" style="float: left; width: auto; width: auto !important; outline: none !important; text-decoration: none !important;"><img class="si-icon" src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/social-white/facebook.png" style="display: block; width: 40px;"></a>
59+
<a href="https://x.com" target="_blank" class="proton-link" style="float: left; width: auto; width: auto !important; outline: none !important; text-decoration: none !important;"><img class="si-icon" src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/social-white/twitter.png" style="display: block; width: 40px;"></a>
60+
<a href="https://linkedin.com" target="_blank" class="proton-link" style="float: left; width: auto; width: auto !important; outline: none !important; text-decoration: none !important;"><img class="si-icon" src="https://raw.githubusercontent.com/atomjoy/signatures/refs/heads/main/img/social-white/linkedin.png" style="display: block; width: 40px;"></a>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
16765
</body>
16866

169-
</html>
67+
</html>

0 commit comments

Comments
 (0)