Skip to content

Commit

Permalink
feat: add email signature
Browse files Browse the repository at this point in the history
  • Loading branch information
cakasuma committed Nov 30, 2020
1 parent 9733ed8 commit 8e4e535
Show file tree
Hide file tree
Showing 5 changed files with 291 additions and 0 deletions.
140 changes: 140 additions & 0 deletions css/reset.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
/* http://meyerweb.com/eric/tools/css/reset/
v4.0 | 20180602
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
display: block;
}

/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
display: none;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
li {
outline: none;
}
blockquote,
q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input::-ms-clear {
display: none;
}
77 changes: 77 additions & 0 deletions css/signature.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
@import url('../fonts/local.css');
@import url('./reset.css');

:root {
/* colors */
--color-black: #0e0e0e;
--color-white: #ffffff;
--color-red: #ff444f;
/* font-sizes */
--text-size: 16px;
}

body {
font-family: 'IBM Plex Sans', sans-serif;
margin: 0;
}

h1, h2, p {
line-height: 24px;
}

.wrapper {
width: 467px;
height: 152px;
}

.signature {
width: 100%;
height: 100%;
padding: 16px;
display: flex;
align-items: center;
}

.logo {
border-radius: 50%;
background: var(--color-black);
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
margin-right: 16px;
}

.description {
display: flex;
flex-direction: column;
}

h1, h2 {
font-size: var(--text-size);
}

h1 {
font-weight: bold;
}

hr {
border: none;
width: 100%;
height: 4px;
margin: 8px 0;
background: var(--color-red);
}

.detail {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 16px;
grid-row-gap: 8px;
}

strong {
color: var(--color-red);
margin-right: 4px;
}
18 changes: 18 additions & 0 deletions logos/deriv-logomark-signature.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletions signature/signature-default.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deriv signature default</title>
<link rel="stylesheet" href="../css/signature.css" />
</head>
<body>
<div class="wrapper">
<div class="signature">
<div class='logo'>
<img src='../logos/deriv-logomark-signature.svg' alt='deriv-logomark' width='65' height='62' />
</div>
<div class='description'>
<h1>Firstname Lastname</h1>
<h2>Role in deriv.com</h2>
<hr />
<div class='detail'>
<p><strong>E</strong>test@mail.com</p>
<p><strong>W</strong>www.mail.com</p>
</div>
</div>
</div>
</div>
</body>
</html>
29 changes: 29 additions & 0 deletions signature/signature-full.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deriv signature full</title>
<link rel="stylesheet" href="../css/signature.css" />
</head>
<body>
<div class="wrapper">
<div class="signature">
<div class='logo'>
<img src='../logos/deriv-logomark-signature.svg' alt='deriv-logomark' width='65' height='62' />
</div>
<div class='description'>
<h1>Firstname Lastname</h1>
<h2>Role in deriv.com</h2>
<hr />
<div class='detail'>
<p><strong>P</strong>+603 2442 5486</p>
<p><strong>M</strong>+601 3885 3424</p>
<p><strong>E</strong>test@mail.com</p>
<p><strong>W</strong>www.mail.com</p>
</div>
</div>
</div>
</div>
</body>
</html>

0 comments on commit 8e4e535

Please sign in to comment.