zymr-keshav/invite.html

## invite.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Account Activation Mail</title>
    <style>
    body {
        display: grid;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
        color: #9c9c9c;
        font-size: 14px;
        font-weight: normal;
    }
    .wrapper {
        background-color: #eff5f7;
        display: grid;
        grid-template-rows: minmax(200px, max-content) 1fr;
        text-align: center;
        width: 40rem;
    }

    figure {
        margin: 1rem 0;
    }

    figcaption {
        color: #d58d2d;
        font-size: 1.25em;
        margin: 20px;
    }

    article {
        border-bottom: 1px solid #b4b4b4;
    }

    .link {
        color: #5a9cdf;
        font-size: 1rem;
        text-decoration: none;
    }

    .link:hover {
        text-decoration: underline;
    }

    .detail {
        padding: 2rem 0;
    }

    .privacy {
        font-size: 0.7rem;
        padding-bottom: 1rem;
    }

    .contact {
        background-color: #ddecf1;
        color: #666666;
        padding-bottom: 1.5rem;
    }

    span.number {
        font-size: 1.25em
    }

    .subscription {
        padding: 0 2rem;
        color: #666666;
    }

    footer {
        height: auto;
        padding: 1rem 0;
        color: #afbec5;
        font-size: 11px;
    }
    </style>
</head>

<body>
    <section class="wrapper container">
        <header class="header">
            <figure>
                <img src="https://dummyimage.com/128X32/000/fff&text=company name" alt="logo">
                <figcaption>We are glad to have you as one of our valuable user.</figcaption>
                <!-- <img src="https://dummyimage.com/128X128/000/fff&text=invite" alt="join"> -->
                <svg id="circle">
                    <circle cx="125" cy="70" r="60" stroke="rgb(51, 97, 193)" stroke-width="3" fill="transparent" />
                </svg>
            </figure>
        </header>
        <article class="detail">
            <p>Please activate your account by clicking the following link</p>
            <a class="link" title="activation" href="http://localhost:4200">http://localhost/activation/84e0484f-c16b-4cc6-af96-26537fcf8633</a>
        </article>
        <article class="privacy">
            <p><b>CONFIDENTIALITY</b>: This email is intended for the above named recipient only and is confidential. If you are not the intended addressee, you may neither copy nor deliver it to anyone else or use it in any unauthorized manner. To do so is prohibited and may be unlawful. If you have received this email by mistake and are not the above named recipient, please notify our customer care department immediately at</p>
            <a class="link" href="mailto:wecare@xyz.com?subject=Mail from Acvtivation" title="email">wecare@xyz.com</a>
        </article>
        <article class="contact">
            <p>For any questions, suggestions or comments, please contact us at</p>
            <span class="number">001-1234 5678</span>
        </article>
        <article class="subscription">
            <p>You are receiving this email because you are invited to sign up for Our CMS. If you no longer wish to receive these emails, you can <span class="link">unsubscribe</span>.</p>
        </article>
        <footer>Copyright by xyz, Inc. 2018. All rights reserved.</footer>
    </section>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Account Activation Mail</title>
	<style>
	body {
	display: grid;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	color: #9c9c9c;
	font-size: 14px;
	font-weight: normal;
	}
	.wrapper {
	background-color: #eff5f7;
	display: grid;
	grid-template-rows: minmax(200px, max-content) 1fr;
	text-align: center;
	width: 40rem;
	}

	figure {
	margin: 1rem 0;
	}

	figcaption {
	color: #d58d2d;
	font-size: 1.25em;
	margin: 20px;
	}

	article {
	border-bottom: 1px solid #b4b4b4;
	}

	.link {
	color: #5a9cdf;
	font-size: 1rem;
	text-decoration: none;
	}

	.link:hover {
	text-decoration: underline;
	}

	.detail {
	padding: 2rem 0;
	}

	.privacy {
	font-size: 0.7rem;
	padding-bottom: 1rem;
	}

	.contact {
	background-color: #ddecf1;
	color: #666666;
	padding-bottom: 1.5rem;
	}

	span.number {
	font-size: 1.25em
	}

	.subscription {
	padding: 0 2rem;
	color: #666666;
	}

	footer {
	height: auto;
	padding: 1rem 0;
	color: #afbec5;
	font-size: 11px;
	}
	</style>
	</head>

	<body>
	<section class="wrapper container">
	<header class="header">
	<figure>
	<img src="https://dummyimage.com/128X32/000/fff&text=company name" alt="logo">
	<figcaption>We are glad to have you as one of our valuable user.</figcaption>
	<!-- <img src="https://dummyimage.com/128X128/000/fff&text=invite" alt="join"> -->
	<svg id="circle">
	<circle cx="125" cy="70" r="60" stroke="rgb(51, 97, 193)" stroke-width="3" fill="transparent" />
	</svg>
	</figure>
	</header>
	<article class="detail">
	<p>Please activate your account by clicking the following link</p>
	<a class="link" title="activation" href="http://localhost:4200">http://localhost/activation/84e0484f-c16b-4cc6-af96-26537fcf8633</a>
	</article>
	<article class="privacy">
	<p><b>CONFIDENTIALITY</b>: This email is intended for the above named recipient only and is confidential. If you are not the intended addressee, you may neither copy nor deliver it to anyone else or use it in any unauthorized manner. To do so is prohibited and may be unlawful. If you have received this email by mistake and are not the above named recipient, please notify our customer care department immediately at</p>
	<a class="link" href="mailto:wecare@xyz.com?subject=Mail from Acvtivation" title="email">wecare@xyz.com</a>
	</article>
	<article class="contact">
	<p>For any questions, suggestions or comments, please contact us at</p>
	<span class="number">001-1234 5678</span>
	</article>
	<article class="subscription">
	<p>You are receiving this email because you are invited to sign up for Our CMS. If you no longer wish to receive these emails, you can <span class="link">unsubscribe</span>.</p>
	</article>
	<footer>Copyright by xyz, Inc. 2018. All rights reserved.</footer>
	</section>
	</body>

	</html>