<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width"/>

    <style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font-size: 100%;
			font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
			line-height: 1.65;
		}
		img {
			max-width: 100%;
			margin: 0 auto;
			display: block;
		}
		body,
		.body-wrap {
			width: 100% !important;
			height: 100%;
			-webkit-font-smoothing: antialiased;
			-webkit-text-size-adjust: none;
		}
		a {
			text-decoration: none;
		}
		.text-center {
			text-align: center;
		}
		.text-right {
			text-align: right;
		}
		.text-left {
			text-align: left;
		}
		.button {
			display: inline-block;
			color: white;
			background: #71bc37;
			padding: 5px 10px;
			font-weight: bold;
			border-radius: 4px;
		}
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin-bottom: 20px;
			line-height: 1.25;
		}
		h1 {
			font-size: 32px;
		}
		h2 {
			font-size: 28px;
		}
		h3 {
			font-size: 24px;
		}
		h4 {
			font-size: 20px;
		}
		h5 {
			font-size: 16px;
		}
		p,
		ul,
		ol {
			font-size: 16px;
			font-weight: normal;
			margin-bottom: 20px;
		}
		.container {
			display: block !important;
			clear: both !important;
		}
		.container table {
			width: 100% !important;
			border-collapse: collapse;
		}
		.container .masthead {
			padding: 50px 0;
			background: #2c3e50;
			color: white;
		}
		.container .masthead h1 {
			margin: 0 auto !important;
			max-width: 90%;
			text-transform: uppercase;
		}
		.container .content {
			background: white;
			padding: 30px 35px;
		}
		.container .content.footer {
			background: none;
		}
		.container .content.footer p {
			margin-bottom: 0;
			color: #888;
			text-align: center;
			font-size: 14px;
		}
		.container .content.footer a {
			color: #888;
			text-decoration: none;
			font-weight: bold;
		}
		.alert {
			display: inline-block;
			margin: 20px auto;
			background: #fff;
			color: #EB2D30;
			padding: 10px 20px;
			border-radius: 4px;
		}
		.button.fb {
			background: #0066aa;
		}
		.button.tw {
			background: #4099FF;
		}
		.button.yt {
			background: #EB2D30;
		}
		.button-action {
			background: #2c3e50;
			display: block;
			color: white;
			padding: 10px;
			font-size: 20px;
			width: 200px;
			margin: 5px auto;
			font-weight: bold;
			border-radius: 4px;
			text-align: center;
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
		}
		.button-action:hover{
			background: #71bc37;
		}
		
    </style>
</head>
<body>
<table class="body-wrap">
    <tr>
        <td class="container">
            <table>
                <tr>
                    <td align="center" class="masthead">
                        <h1>Email Verification</h1>
                    </td>
                </tr>
                <tr>
                    <td class="content">
                        <h2>Hi {{username}},</h2>
						<p>Welcome to <a href="https://{{sitename}}.com"><strong>{{sitename}}</strong></a> !</p>
						<p>Please verify your email by clicking on the verify button.</p>
						<a href="{{link}}" class="button-action">Verify Email</a>
						<br />
						<p>	
							You can reach us via our support email at <a href="mailto:support@{{sitename}}.com">support@{{sitename}}.com</a> and our social platform
						</p>
						<hr />
						<br />
						<p>Thank you for connecting with us.</p>
						<div>Sent by <a href="http://{{sitename}}.com">{{sitename}} Support Team</a></div>
                        <div><a href="mailto:support@{{sitename}}.com">support@{{sitename}}.com</a></div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

</table>
</body>
</html>