Skip to content
This repository was archived by the owner on Dec 8, 2022. It is now read-only.

Account confirmation and base template #39

Merged
merged 5 commits into from
Jan 29, 2020
Merged

Account confirmation and base template #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
19ea9ca
Account confirmation and base template
margaretchoi Jan 28, 2020
f1a8bf4
Merge pull request #1 from margaretchoi/margaretchoi-email-template
margaretchoi Jan 28, 2020
c450c07
Merge branch 'master' into master
usrbinsam Jan 28, 2020
861dc46
Move styles to the main html file
margaretchoi Jan 28, 2020
90f8606
Merge branch 'master' into master
net8floz Jan 29, 2020
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
357 changes: 357 additions & 0 deletions CodeChallenge/templates/challenge_account_confirm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,357 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CodeWizardsHQ Code Challenge Welcome Email</title>
<style>
/* -------------------------------------
GLOBAL
A very basic CSS reset
------------------------------------- */
* {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
box-sizing: border-box;
font-size: 14px;
}

img {
max-width: 100%;
}

body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100% !important;
height: 100%;
line-height: 1.6em;
/* 1.6em * 14px = 22.4px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
/*line-height: 22px;*/
}

/* Let's make sure all tables have defaults */
table td {
vertical-align: top;
}

/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
body {
background-color: #f6f6f6;
}

.body-wrap {
background-color: #f6f6f6;
width: 100%;
}

.container {
display: block !important;
max-width: 600px !important;
margin: 0 auto !important;
/* makes it centered */
clear: both !important;
}

.content {
max-width: 600px;
margin: 0 auto;
display: block;
padding: 20px;
}

/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background-color: #fff;
border: 1px solid #e9e9e9;
border-radius: 3px;
}

.content-wrap {
padding: 40px;
}

.content-block {
padding: 0 0 20px;
}

.header {
width: 100%;
margin-bottom: 20px;
background-color: #353535;
padding: 60px 40px;
color: #fff;
}

.header h3{
color: #fff;
}

.footer {
width: 100%;
clear: both;
color: #999;
padding: 20px;
}
.footer p, .footer a, .footer td {
color: #999;
font-size: 12px;
}

/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #000;
margin: 40px 0 0;
line-height: 1.2em;
font-weight: 600;
}

h1 {
font-size: 32px;
/* 1.2em * 32px = 38.4px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
/*line-height: 38px;*/
}

h2 {
font-size: 24px;
/* 1.2em * 24px = 28.8px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
/*line-height: 29px;*/
}

h3 {
font-size: 18px;
/* 1.2em * 18px = 21.6px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
/*line-height: 22px;*/
}

h4 {
font-size: 14px;
font-weight: 600;
}

p, ul, ol {
margin-bottom: 10px;
font-weight: normal;
}
p li, ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}

/* -------------------------------------
LINKS & BUTTONS
------------------------------------- */
a {
color: #348eda;
text-decoration: underline;
}

.btn-primary {
text-decoration: none;
color: #FFF;
background-color: #00774f;
border: solid #00774f;
border-width: 10px 20px;
line-height: 2em;
/* 2em * 14px = 28px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
/*line-height: 28px;*/
font-weight: bold;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 5px;
text-transform: capitalize;
}

/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}

.first {
margin-top: 0;
}

.aligncenter {
text-align: center;
}

.alignright {
text-align: right;
}

.alignleft {
text-align: left;
}

.clear {
clear: both;
}

.social {
max-width: 25px;
display: inline-block;
}

/* -------------------------------------
ALERTS
Change the class depending on warning email, good email or bad email
------------------------------------- */
.alert {
font-size: 10px;
color: #fff;
font-weight: 500;
padding: 10px;
text-align: center;
border-radius: 3px 3px 0 0;
}
.alert a {
color: #fff;
text-decoration: none;
font-weight: 500;
font-size: 10px;
}
.alert.alert-warning {
background-color: #353535;
}
.alert.alert-bad {
background-color: #D0021B;
}
.alert.alert-good {
background-color: #0fad80;
}

/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 640px) {
body {
padding: 0 !important;
}

h1, h2, h3, h4 {
font-weight: 800 !important;
margin: 20px 0 5px !important;
}

h1 {
font-size: 22px !important;
}

h2 {
font-size: 18px !important;
}

h3 {
font-size: 16px !important;
}

.container {
padding: 0 !important;
width: 100% !important;
}

.content {
padding: 0 !important;
}

.content-wrap {
padding: 10px !important;
}

}

/*# sourceMappingURL=styles.css.map */

</style>
</head>

<body itemscope itemtype="http://schema.org/EmailMessage">

<table class="body-wrap">
<tr>
<td></td>
<td class="container" width="800">
<div class="content">
<table class="main" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="header aligncenter">
<img src="https://challenge.codewizardshq.com/images/logo-small.png">
<h3>{{NAME}}, you've accepted the CodeWizardsHQ Code Challenge! </h3>
<br>
<a href="https://challenge.codewizardshq.com/login" class="btn-primary">SIGN IN</a>
</td>
</tr>
<tr>
<td class="content-wrap">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">

</td>
</tr>
<tr>
<td class="content-block">
<p>Welcome {{NAME}},</p>
<br/>

<p>Your mission is to defeat the evil dragon who has invaded CWHQ land. Only the bravest and brightest kid coders, like you, are prepared for this quest. </p>

<h3>How to play The Dragon Quest? </h3>
<br/>

<p>To prove yourself worthy, you must log in every day between March 1 and March 21 to answer the Code Challenge question. </p>

<p>When you have answered the final question, you will take on the mighty dragon in the boss level by writing a piece of code in Python or JavaScript. If your answer unlocks the correct answer, you are worthy to be called Code Challenge champion and a chance to win a $100 cash prize!</p>

<p>See the <a href="http://codewizardshq.com/challenge">full FAQ</a> for more answers.</p>

<h3>Who will win the challenge?</h3>
<br/>

<p>The final champions will be determined by public vote from March 23-29 so share the challenge with your family and friends.</p>

<p>Visit the <a href="http://codewizardshq.com/challenge">Code Challenge</a> page for the latest details and updates.</p>
</td>
</tr>
<tr>
<td class="content-block">
<p>Good luck and safe travels! </p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="alert alert-warning">
<a href="https://challenge.codewizardshq.com/login">Share With Friends</a>
<br/>
<img class="social" src="https://codewizardshq.com/wp-content/uploads/2020/01/challenge_icon_fb.jpg">
<img class="social" src="https://codewizardshq.com/wp-content/uploads/2020/01/challenge_icon_twitter.jpg">
<img class="social" src="https://codewizardshq.com/wp-content/uploads/2020/01/challenge_icon_email.jpg">
</td>
</tr>
</table>
<div class="footer">
<table width="100%">
<tr>
<td class="aligncenter content-block"><a href="">Unsubscribe</a> from code challenge updates.</td>
</tr>
</table>
</div></div>
</td>
<td></td>
</tr>
</table>

</body>
</html>
Empty file added CodeChallenge/templates/styles.css
View file
Open in desktop
Empty file.