tfoman/Angel6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Email HTML template

Browse Source
This commit is contained in:
Luke Malpass
2018-04-20 16:20:55 +01:00
parent bb7c1841f9
commit 110e6eeb49
14 changed files with 438 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Email HTML Template/Template/Source/Assets/Images/logo-small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
Email HTML Template/Template/Source/Assets/Images/text-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

2
Email HTML Template/Template/Source/Html/_footer.dhtml Normal file
View File

@ -0,0 +1,2 @@
</body>
</html>

11
Email HTML Template/Template/Source/Html/_header.dhtml Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="/Assets/Css/reset.css" rel="stylesheet" type="text/css" />
<link href="/Assets/Css/style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
</head>
<body>

114
Email HTML Template/Template/Source/Html/index.dhtml Normal file
View File

@ -0,0 +1,114 @@
<!--@ include header @-->
<!-- Fills entire email viewport -->
<table class="container">
<tbody>
<tr>
<!-- Centers and limits width to recommended size -->
<td class="wrapper" align="center">
<!-- Start of wrapped content -->
<table>
<tbody>
<!-- Top Image -->
<tr>
<td align="center" class="content-item">
<img src="/Assets/Images/logo-small.png" />
</td>
</tr>
<!-- Page behind 1 -->
<tr class="page-behind-1">
<td align="center">
<table>
<tbody>
<tr>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Page behind 2 -->
<tr class="page-behind-2">
<td align="center">
<table>
<tbody>
<tr>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Page content -->
<tr>
<td align="center" class="page-content">
<!-- Table containing page content -->
<table class="text-center">
<tbody>
<!-- Header -->
<tr>
<td class="content-item">
<h1>Verify Email</h1>
</td>
</tr>
<!-- Text -->
<tr>
<td class="content-item">
Hi Luke,
</td>
</tr>
<!-- Text -->
<tr>
<td class="content-item">
Thanks for creating an account with us.
<br/> To continue please verify your email with us.
</td>
</tr>
<!-- Button -->
<tr>
<td class="content-item" align="center">
<table class="button">
<tbody>
<tr>
<td>
<a href="http://www.angelsix.com" target="_blank">Verify Your Email</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Text logo -->
<tr>
<td align="center" class="text-logo">
<img src="/Assets/Images/text-logo.png" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--@ include footer @-->

3
Email HTML Template/Template/Source/Sass/dna.config Normal file
View File

@ -0,0 +1,3 @@
{
"outputPath": "../../WebRoot/Assets/Css"
}

49
Email HTML Template/Template/Source/Sass/reset.scss Normal file
View File

@ -0,0 +1,49 @@
// Body
body
{
// Reset margin/padding
margin: 0;
padding: 0;
}
// Image
img
{
// Remove border
border: 0 none;
// Auto height
height: auto;
// Set line-height so inline works
line-height: 100%;
// No outline
outline: none;
// No text decoration
text-decoration: none;
}
a img
{
// Remove border
border: 0 none;
}
// Table and column
table, td
{
// Remove extra spacing
border-collapse: collapse;
// No padding
padding: 0;
}
// Header
h1,h2,h3,h4,h5,h6
{
// Margin
margin: 0;
}

185
Email HTML Template/Template/Source/Sass/style.scss Normal file
View File

@ -0,0 +1,185 @@
$background-color: #0d9e73;
$content-background-color: white;
$text-color: black;
$button-background-color: #fbbd1f;
$button-text-color: #833b20;
$default-font-family: sans-serif;
$web-font-family: 'Quicksand';
$font-size-normal: 24px;
$font-size-large: 48px;
$line-height: 1.4;
$base-size: 16px;
$spacing-small: $base-size * 0.5;
$spacing-normal: $base-size;
$spacing-tiny: $base-size * 0.25;
$spacing-large: $base-size * 1.5;
$spacing-larger: $base-size * 2;
$spacing-huge: $base-size * 3;
body
{
// Round font by default
font-family: $default-font-family;
font-family: $web-font-family;
}
// Main Header
h1
{
font-size: $font-size-large;
}
// Top-most table inside body
.container
{
// Web-font if supported
font-family: $default-font-family;
font-family: $web-font-family;
// Reset margins/padding
margin:0;
padding:0;
// Set background color
background-color: $background-color;
// Fill all available area
width:100% !important;
height:100% !important;
// Font size
font-size: $font-size-normal;
// Line height
line-height: $line-height;
// Don't change our font size
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
// Wraps contents to email width
.wrapper
{
// Block display
display: block;
// Padding around all content
padding: $spacing-larger;
}
// Content item
.content-item
{
// Add padding
padding: $spacing-large;
}
// Center text
.text-center
{
text-align: center;
}
// Inline-block
.inline-block
{
display: inline-block;
}
// Page behind visuals
.page-behind-1, .page-behind-2
{
// Remove any whitespace oversize
font-size: 0;
line-height: 0;
table > tbody > tr > td
{
// Remove any whitespace oversize
font-size: 0;
line-height: 0;
// Clear padding
padding: 0;
// Set inner column to take all width
width: 100%;
// Margin below
margin-bottom: $spacing-tiny;
// Display inline block
display: inline-block;
// Solid bar of color
border-top: $spacing-tiny solid $content-background-color;
}
}
// Page behind visual
.page-behind-1 table
{
width: 75%;
}
// Page behind visual
.page-behind-2 table
{
width: 90%;
}
// Main page content
.page-content
{
// Set background color
background: $content-background-color;
// Add some padding
padding: $spacing-huge;
}
// Button table container
.button
{
// Size to content
//width: auto;
td
{
// Rounded button
border-radius: $spacing-normal;
// Background color
background-color: $button-background-color;
// Button link
a
{
// Duplicate the border for anchor
// as Mail for Windows doesn't like
// honoring padding if there is no border
border-radius: $spacing-normal;
border: solid 1px $button-background-color;
// Text color
color: $button-text-color;
// Padding
padding: $spacing-normal $spacing-larger;
// No underline
text-decoration: none;
// Inline block so padding works
display: inline-block;
}
}
}
.text-logo
{
padding-top: $spacing-huge * 2;
padding-bottom: $spacing-larger;
}

8
Email HTML Template/Template/Source/dna.config Normal file
View File

@ -0,0 +1,8 @@
{
"outputPath": "../WebRoot",
"liveServers": [ "../WebRoot" ],
"staticFolders":
[
{ "source": "Assets", "destination": "../WebRoot/Assets" }
]
}