topcoder-platform · jmgasper · May 31, 2021 · May 30, 2021
diff --git a/web-assets/css/styles.css b/web-assets/css/styles.css
@@ -244,6 +244,74 @@ select::-ms-expand {
   line-height: 1.5;
   margin-bottom: 0;
 }
+/** Start: Check Email Card  **/
+.checkemail-card .header {
+  padding: 35px 10px 12px 10px;
+  background-color: transparent;
+}
+
+.checkemail-card.center-align-card .page-content .page-main {
+  padding: 0px 50px 40px;
+  position: relative;
+  text-align: center;
+}
+
+.checkemail-card.center-align-card .page-content .page-main .page-title-heading {
+  color: #2A2A2A;
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 24px;
+  line-height: 29px;
+  text-align: center;
+  text-transform: none;
+}
+.checkemail-card.center-align-card .page-content .page-main .page-subtitle-heading {
+  color: #2A2A2A;
+  font-family: Roboto;
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 21px;
+  text-align: center;
+  text-transform: none;
+}
+
+.checkemail-card.center-align-card .page-content .page-main .page-description {
+  margin-top: 30px;
+  text-align: left;
+  font-weight: normal;
+  font-family: "Roboto";
+  font-size: 15px;
+}
+
+.checkemail-card.center-align-card .page-content .page-main .page-description ul {
+  list-style: none;
+  list-style-image: url(./images/arrow.svg);
+  margin: 0px;
+}
+
+.checkemail-card.center-align-card .page-content .page-main .page-description ul li {
+  line-height: 21px;
+  position: relative;
+}
+.checkemail-card.center-align-card .page-content .page-main .page-description ul li span {
+  position: relative;
+  top: -3px
+}
+
+.checkemail-card.center-align-card .page-content .page-main .page-description ul li::marker {
+  margin-top: 3px;
+}
+
+
+.checkemail-card.center-align-card .page-content .page-main .page-description ul li:not(:last-child){
+  margin: 0px 0px 30px 0px;
+ }
+
+.checkemail-card .footer {
+  padding-top: 0px;
+}
+
+/** End: Check Email Card  **/
 
 /** Start: Confirmation Card  **/
 .confirmation-card.center-align-card {
@@ -291,10 +359,11 @@ select::-ms-expand {
 }
 .confirmation-card.center-align-card .page-content .page-main .page-description ul {
   list-style: none;
+  margin: 0px;
 }
 
 .confirmation-card.center-align-card .page-content .page-main .page-description ul li{
-  margin: 0;
+  margin-bottom: 0;
   line-height: 21px;
   position: relative;
 }
@@ -315,28 +384,26 @@ select::-ms-expand {
   top: -4px;
 }
 
-li:nth-child(1)::before {
+.confirmation-card.center-align-card .page-content .page-main .page-description ul li:nth-child(1)::before {
   content:"";
   background-image: url('./images/1.png');
   height: 28px;
   width: 30px;
 }
 
-li:nth-child(2)::before {
+.confirmation-card.center-align-card .page-content .page-main .page-description ul li:nth-child(2)::before {
   content:"";
   background-image: url('./images/2.png');
   height: 28px;
   width: 30px;
 }
 
-li:nth-child(3)::before {
+.confirmation-card.center-align-card .page-content .page-main .page-description ul li:nth-child(3)::before {
   content:"";
   background-image: url('./images/3.png');
   height: 28px;
   width: 30px;
 }
-
-
 /** End: Confirmation Card  **/
 
 /** Start : Input/select box - field area style **/

diff --git a/web-assets/images/arrow.svg b/web-assets/images/arrow.svg
diff --git a/web-assets/images/email.png b/web-assets/images/email.png
diff --git a/web-assets/static-pages/check_email.html b/web-assets/static-pages/check_email.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Check your email to activate your account</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="shortcut icon" href="./images/favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed:wght@500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+
+  <body class="center-align-card checkemail-card">
+    <!-- Page Wrapper -->
+    <div class="page-wrapper">
+      <!-- For ADA - Skip to Content Area -->
+      <a class="action skip" href="#contentarea">Skip to Content</a>
+      <!-- Page Content Area -  Header + Main content -->
+      <div class="page-content">
+        <header class="header">
+            <img
+              src="./images/email.png"
+              alt="Check Email"
+              width="104"
+              height="89"
+            />
+        </header>
+        <main id="main" class="page-main">
+          <a id="contentarea" tabindex="-1"></a>
+          <h1 id="page-title-heading" class="page-title-heading">
+            Check your email to <br/>activate your account
+          </h1>
+          <h2 id="page-subtitle-heading" class="page-subtitle-heading">
+            Welcome to the Topcoder Community!
+          </h2>
+          <div class="page-description">
+           <ul>
+             <li><span>Don't see an email? Try spam just in case. You can also
+               request to have us <a href="">resend the activation email</a>.
+               If you still have any issues, you can always email <a href="mailto:support@topcoder.com">support@topcoder.com</a>.
+               </span>
+             </li>
+             <li><span>Want to keep browsing?<br/><a href="https://www.topcoder.com/community/learn">Learn</a> / <a href="https://www.topcoder.com/gigs">Freelance Gigs</a> /
+               <a href="https://www.topcoder.com/community/arena">Competitive Programming</a></span></li>
+           </ul>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="copyright-text">
+          <strong>&copy;</strong> 2021 Topcoder. All Rights Reserved
+        </div>
+        <a
+          class="privacy-policy"
+          href="https://www.topcoder.com/privacy-policy/"
+          >Privacy Policy</a
+        >
+      </footer>
+    </div>
+  </body>
+</html>