Skip to content

Commit f0dd90e

Browse files
elyanyeminielyanyemini
committed
chore: newsletter website
1 parent 667bafd commit f0dd90e

3 files changed

Lines changed: 246 additions & 29 deletions

File tree

‎newsletter-sign-up-with-success-message-main/index.html‎

Lines changed: 53 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,76 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<!-- displays site properly based on user's device. :O -->
8+
9+
<!-- This is for the requested font -->
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
613

714
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
8-
15+
916
<title>Frontend Mentor | Newsletter sign-up form with success message</title>
1017

11-
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
12-
<style>
13-
.attribution { font-size: 11px; text-align: center; }
14-
.attribution a { color: hsl(228, 45%, 44%); }
15-
</style>
18+
<link rel="stylesheet" href="style.css">
1619
</head>
17-
<body>
1820

19-
<!-- Sign-up form start -->
20-
21-
Stay updated!
21+
<body>
22+
<div class="container">
23+
<div class="blueContainer">
24+
<div class="mainbox">
2225

23-
Join 60,000+ product managers receiving monthly updates on:
26+
<div class="text-side">
27+
<div class="text">
2428

25-
Product discovery and building what matters
26-
Measuring to ensure updates are a success
27-
And much more!
29+
<!-- Sign-up form start -->
2830

29-
Email address
30-
email@company.com
31+
<h1>Stay updated!</h1>
3132

32-
Subscribe to monthly newsletter
33+
Join 60,000+ product managers receiving monthly updates on:
3334

34-
<!-- Sign-up form end -->
35+
<div class="bullet-list">
36+
<div class="bullet">
37+
Product discovery and building what matters
38+
</div>
39+
<div class="bullet">Measuring to ensure updates are a success</div>
40+
<div class="bullet">And much more!</div>
41+
</div>
3542

36-
<!-- Success message start -->
43+
<div class="emailPart">
44+
<form action="" method="post" target="_self">
45+
<h5>Email address:</h5>
46+
<input type="email" placeholder="email@company.com" class="emailBox" name="email" id="email" required><br><br>
3747

38-
Thanks for subscribing!
48+
<button type="submit" class="submitButton" id="submitButton">
49+
Subscribe to monthly newsletter
50+
</button>
51+
</form>
52+
<!-- Sign-up form end -->
53+
</div>
3954

40-
A confirmation email has been sent to ash@loremcompany.com.
41-
Please open it and click the button inside to confirm your subscription.
55+
</div>
56+
</div>
4257

43-
Dismiss message
58+
<div class="pic-side">
59+
<img src="assets/images/illustration-sign-up-desktop.svg" alt="side photo">
60+
</div>
4461

45-
<!-- Success message end -->
46-
47-
<div class="attribution">
48-
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
49-
Coded by <a href="#">Your Name Here</a>.
62+
</div>
63+
<div class="successContainer hidden">
64+
<div class="successMsg">
65+
<h1>Thanks for subscribing!</h1>
66+
A confirmation email has been sent to <strong id="confirmedEmail"></strong>.
67+
Please open it and click the button inside to confirm your subscription.<br><br><br>
68+
<button type="submit" class="submitButton" id="dismissButton">Dismiss message</button>
69+
</div>
70+
</div>
71+
5072
</div>
73+
<script src="script.js"></script>
5174
</body>
75+
5276
</html>

‎newsletter-sign-up-with-success-message-main/script.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const submitButton = document.getElementById('submitButton');
2+
const emailAddress = document.getElementById('email');
3+
const dismissButton = document.getElementById('dismissButton');
4+
const mainContainer = document.querySelector(".mainbox")
5+
const successContainer = document.querySelector('.successContainer');
6+
const confirmedEmail = document.getElementById('confirmedEmail')
7+
8+
9+
submitButton.addEventListener('click', function (event) {
10+
event.preventDefault();
11+
12+
if (!emailAddress) {
13+
console.error("Error: Could not find the email input field! Check your HTML IDs.");
14+
return;
15+
}
16+
17+
if (emailAddress.checkValidity()) {
18+
const email = emailAddress.value;
19+
confirmedEmail.textContent = email;
20+
21+
mainContainer.classList.add('hidden');
22+
successContainer.classList.remove('hidden');
23+
24+
} else {
25+
console.log("Email is invalid.");
26+
emailAddress.reportValidity();
27+
}
28+
});
29+
30+
31+
dismissButton.addEventListener('click', function () {
32+
successContainer.classList.add('hidden');
33+
mainContainer.classList.remove('hidden');
34+
});
35+
36+
37+
// button.addEventListener('click', () => {
38+
// button.style.backgroundColor = "green";
39+
// });
40+
41+
// button.addEventListener('mouseup', function(event) {
42+
// button.style.backgroundColor = "blue";
43+
// });

‎newsletter-sign-up-with-success-message-main/style.css‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
html, body {
2+
height: 100%;
3+
margin: 0;
4+
font-family: "Roboto", sans-serif;
5+
}
6+
7+
h1{
8+
font-size: 50px;
9+
color: hsl(235, 18%, 26%);
10+
11+
}
12+
13+
h5 {
14+
margin-bottom: 7px;
15+
color: hsl(235, 18%, 26%);
16+
}
17+
18+
.container {
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
height: 95vh;
23+
}
24+
25+
.blueContainer{
26+
display: flex;
27+
background-color: hsl(234, 29%, 20%);
28+
height: 85%;
29+
width: 85%;
30+
}
31+
32+
.hidden {
33+
display: none !important;
34+
}
35+
36+
.mainbox{
37+
display: flex;
38+
margin: auto;
39+
height: 65%;
40+
width: 65%;
41+
max-width: 700px;
42+
background-color: white;
43+
border-radius: 3%;
44+
overflow: hidden;
45+
justify-content: space-evenly;
46+
padding: 3%;
47+
}
48+
49+
.text-side {
50+
height: 100%;
51+
width: 50%;
52+
display: flex;
53+
justify-content: center;
54+
margin-top: 30px;
55+
font-size: 16px;
56+
}
57+
58+
.text{
59+
height: 70%;
60+
width: 100%;
61+
}
62+
63+
.bullet-list{
64+
display: flex;
65+
margin-top: 20px;
66+
flex-direction: column;
67+
line-height: 2;
68+
}
69+
70+
.bullet::before{
71+
content: url("assets/images/icon-list.svg");
72+
margin-right: 6px;
73+
74+
}
75+
76+
.emailPart{
77+
display: flex;
78+
margin-top: 20px;
79+
}
80+
81+
#emailTitle{
82+
font-size: 1px;
83+
}
84+
85+
.emailBox{
86+
width: 100%;
87+
height: 40px;
88+
padding-left: 20px;
89+
box-sizing: border-box;
90+
}
91+
92+
.emailBox:hover{
93+
cursor: pointer;
94+
}
95+
96+
.submitButton{
97+
background-color: hsl(235, 18%, 26%);
98+
color: white;
99+
border: none;
100+
border-radius: 5px;
101+
height: 41px;
102+
box-sizing: border-box;
103+
padding: 10px 50px;
104+
}
105+
106+
.submitButton:hover {
107+
background-color: hsl(4, 100%, 67%);
108+
cursor: pointer;
109+
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
110+
}
111+
112+
.pic-side{
113+
display: flex;
114+
height: 100%;
115+
width: 50%;
116+
justify-content: flex-end;
117+
align-items: center;
118+
}
119+
120+
.pic-side img{
121+
height: 100%;
122+
width: 100%;
123+
object-fit: cover;
124+
object-position: center;
125+
border-radius: 2%;
126+
}
127+
128+
.successContainer{
129+
display: flex;
130+
justify-items: center;
131+
margin: auto;
132+
justify-content: center;
133+
width: 65%;
134+
}
135+
136+
.successMsg::before{
137+
content: url("assets/images/icon-success.svg");
138+
margin-right: 6px;
139+
140+
}
141+
142+
.successMsg{
143+
height: 30%;
144+
width: 30%;
145+
max-width: 700px;
146+
background-color: white;
147+
border-radius: 3%;
148+
overflow: hidden;
149+
padding: 3%;
150+
}

0 commit comments

Comments
 (0)