Skip to content

Commit 753861a

Browse files
atelomycterusatelomycterus
committed
Issues-125: Check your email page
1 parent 764d28a commit 753861a

File tree

4 files changed

+157
-6
lines changed

4 files changed

+157
-6
lines changed

‎web-assets/css/styles.css‎

Lines changed: 73 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,74 @@ select::-ms-expand {
244244
line-height: 1.5;
245245
margin-bottom: 0;
246246
}
247+
/** Start: Check Email Card **/
248+
.checkemail-card .header {
249+
padding: 35px 10px 12px 10px;
250+
background-color: transparent;
251+
}
252+
253+
.checkemail-card.center-align-card .page-content .page-main {
254+
padding: 0px 50px 40px;
255+
position: relative;
256+
text-align: center;
257+
}
258+
259+
.checkemail-card.center-align-card .page-content .page-main .page-title-heading {
260+
color: #2A2A2A;
261+
font-family: Roboto;
262+
font-weight: normal;
263+
font-size: 24px;
264+
line-height: 29px;
265+
text-align: center;
266+
text-transform: none;
267+
}
268+
.checkemail-card.center-align-card .page-content .page-main .page-subtitle-heading {
269+
color: #2A2A2A;
270+
font-family: Roboto;
271+
font-weight: bold;
272+
font-size: 15px;
273+
line-height: 21px;
274+
text-align: center;
275+
text-transform: none;
276+
}
277+
278+
.checkemail-card.center-align-card .page-content .page-main .page-description {
279+
margin-top: 30px;
280+
text-align: left;
281+
font-weight: normal;
282+
font-family: "Roboto";
283+
font-size: 15px;
284+
}
285+
286+
.checkemail-card.center-align-card .page-content .page-main .page-description ul {
287+
list-style: none;
288+
list-style-image: url(./images/arrow.svg);
289+
margin: 0px;
290+
}
291+
292+
.checkemail-card.center-align-card .page-content .page-main .page-description ul li {
293+
line-height: 21px;
294+
position: relative;
295+
}
296+
.checkemail-card.center-align-card .page-content .page-main .page-description ul li span {
297+
position: relative;
298+
top: -3px
299+
}
300+
301+
.checkemail-card.center-align-card .page-content .page-main .page-description ul li::marker {
302+
margin-top: 3px;
303+
}
304+
305+
306+
.checkemail-card.center-align-card .page-content .page-main .page-description ul li:not(:last-child){
307+
margin: 0px 0px 30px 0px;
308+
}
309+
310+
.checkemail-card .footer {
311+
padding-top: 0px;
312+
}
313+
314+
/** End: Check Email Card **/
247315

248316
/** Start: Confirmation Card **/
249317
.confirmation-card.center-align-card {
@@ -291,10 +359,11 @@ select::-ms-expand {
291359
}
292360
.confirmation-card.center-align-card .page-content .page-main .page-description ul {
293361
list-style: none;
362+
margin: 0px;
294363
}
295364

296365
.confirmation-card.center-align-card .page-content .page-main .page-description ul li{
297-
margin: 0;
366+
margin-bottom: 0;
298367
line-height: 21px;
299368
position: relative;
300369
}
@@ -315,28 +384,26 @@ select::-ms-expand {
315384
top: -4px;
316385
}
317386

318-
li:nth-child(1)::before {
387+
.confirmation-card.center-align-card .page-content .page-main .page-description ul li:nth-child(1)::before {
319388
content:"";
320389
background-image: url('./images/1.png');
321390
height: 28px;
322391
width: 30px;
323392
}
324393

325-
li:nth-child(2)::before {
394+
.confirmation-card.center-align-card .page-content .page-main .page-description ul li:nth-child(2)::before {
326395
content:"";
327396
background-image: url('./images/2.png');
328397
height: 28px;
329398
width: 30px;
330399
}
331400

332-
li:nth-child(3)::before {
401+
.confirmation-card.center-align-card .page-content .page-main .page-description ul li:nth-child(3)::before {
333402
content:"";
334403
background-image: url('./images/3.png');
335404
height: 28px;
336405
width: 30px;
337406
}
338-
339-
340407
/** End: Confirmation Card **/
341408

342409
/** Start : Input/select box - field area style **/

‎web-assets/images/arrow.svg‎

Lines changed: 19 additions & 0 deletions
Loading

‎web-assets/images/email.png‎

8.07 KB
Loading

‎web-assets/static-pages/check_email.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Check your email to activate your account</title>
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="shortcut icon" href="./images/favicon.ico" />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link href="https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed:wght@500&display=swap" rel="stylesheet">
14+
<link rel="stylesheet" href="./styles.css" />
15+
</head>
16+
17+
<body class="center-align-card checkemail-card">
18+
<!-- Page Wrapper -->
19+
<div class="page-wrapper">
20+
<!-- For ADA - Skip to Content Area -->
21+
<a class="action skip" href="#contentarea">Skip to Content</a>
22+
<!-- Page Content Area - Header + Main content -->
23+
<div class="page-content">
24+
<header class="header">
25+
<img
26+
src="./images/email.png"
27+
alt="Check Email"
28+
width="104"
29+
height="89"
30+
/>
31+
</header>
32+
<main id="main" class="page-main">
33+
<a id="contentarea" tabindex="-1"></a>
34+
<h1 id="page-title-heading" class="page-title-heading">
35+
Check your email to <br/>activate your account
36+
</h1>
37+
<h2 id="page-subtitle-heading" class="page-subtitle-heading">
38+
Welcome to the Topcoder Community!
39+
</h2>
40+
<div class="page-description">
41+
<ul>
42+
<li><span>Don't see an email? Try spam just in case. You can also
43+
request to have us <a href="">resend the activation email</a>.
44+
If you still have any issues, you can always email <a href="mailto:support@topcoder.com">support@topcoder.com</a>.
45+
</span>
46+
</li>
47+
<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> /
48+
<a href="https://www.topcoder.com/community/arena">Competitive Programming</a></span></li>
49+
</ul>
50+
</div>
51+
</main>
52+
</div>
53+
<footer class="footer">
54+
<div class="copyright-text">
55+
<strong>&copy;</strong> 2021 Topcoder. All Rights Reserved
56+
</div>
57+
<a
58+
class="privacy-policy"
59+
href="https://www.topcoder.com/privacy-policy/"
60+
>Privacy Policy</a
61+
>
62+
</footer>
63+
</div>
64+
</body>
65+
</html>

0 commit comments

Comments
 (0)