+
+
Stay updated!
+
Join 60,000+ product managers receiving monthly updates on:
+
Product discovery
+ and building what matters
+
Measuring to
+ ensure updates are a success
+
And much more!
+
-
+
+
+
Email address
+ Invalid mail 😿
+
+
+
+
+
- Thanks for subscribing!
+
- A confirmation email has been sent to ash@loremcompany.com.
- Please open it and click the button inside to confirm your subscription.
+
+
- Challenge by
Frontend Mentor.
- Coded by
Your Name Here.
+
+ Challenge by a Mysterious Figure... I wasn't assigned a mentor yet
+ Coded by David Norman.
+
+
+
\ No newline at end of file
diff --git a/newsletter-sign-up-with-success-message-main/script.js b/newsletter-sign-up-with-success-message-main/script.js
new file mode 100644
index 0000000..3b0b091
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/script.js
@@ -0,0 +1,61 @@
+const mainContainer = document.querySelector(".main-container");
+const successState = document.querySelector(".success-state");
+const subscribeBtn = document.querySelector(".subscribe-button");
+const dismissBtn = document.querySelector(".dismiss-button");
+const emailInpt = document.querySelector(".email-input");
+const emailErrorMessage = document.querySelector(".email-error-message");
+const starColumn1 = document.querySelector("#star-column-1");
+const starsColumn1 = starColumn1.querySelectorAll(".child");
+const starColumn2 = document.querySelector("#star-column-2");
+const starsColumn2 = starColumn2.querySelectorAll(".child");
+const starColumn3 = document.querySelector("#star-column-3");
+const starsColumn3 = starColumn3.querySelectorAll(".child");
+
+function validateEmail() {
+ let inputMail = emailInpt.value;
+ const regex = new RegExp("^\\S+@\\S+\\.\\S+$");
+ if (regex.test(inputMail)) {
+ mainContainer.style.display = "none";
+ successState.style.display = "flex";
+ emailErrorMessage.style.display = "none";
+ emailInpt.style.color = "black";
+ emailInpt.style.borderColor = "black";
+ emailInpt.style.backgroundColor = "wheat";
+ }
+ else {
+ emailErrorMessage.style.display = "inline";
+ emailInpt.style.color = "hsl(4, 100%, 67%)";
+ emailInpt.style.borderColor = "hsl(4, 100%, 67%)";
+ emailInpt.style.backgroundColor = "hsla(4, 66%, 91%, 1.00)";
+ }
+};
+
+emailInpt.addEventListener("keydown", (e) => {
+ if (e.key === "Enter") {
+ validateEmail();
+ }
+});
+subscribeBtn.addEventListener("click", validateEmail);
+
+
+
+subscribeBtn.addEventListener("mouseover", () => {
+ subscribeBtn.style.backgroundImage = "linear-gradient(to right, hsla(313, 97%, 38%, 1.00), hsla(334, 85%, 26%, 1.00), hsla(313, 97%, 38%, 1.00))";
+});
+
+subscribeBtn.addEventListener("mouseleave", () => {
+ subscribeBtn.style.backgroundImage = "linear-gradient(to right, hsl(4, 100%, 67%), hsl(46, 91%, 54%), hsl(4, 100%, 67%))";
+});
+
+dismissBtn.addEventListener("click", () => {
+ successState.style.display = "none";
+ mainContainer.style.display = "flex";
+});
+
+dismissBtn.addEventListener("mouseover", () => {
+ dismissBtn.style.backgroundImage = "linear-gradient(to right, hsla(313, 97%, 38%, 1.00), hsla(334, 85%, 26%, 1.00), hsla(313, 97%, 38%, 1.00))";
+});
+
+dismissBtn.addEventListener("mouseleave", () => {
+ dismissBtn.style.backgroundImage = "linear-gradient(to right, hsl(4, 100%, 67%), hsl(46, 91%, 54%), hsl(4, 100%, 67%))";
+});
diff --git a/newsletter-sign-up-with-success-message-main/style-guide.md b/newsletter-sign-up-with-success-message-main/style-guide.md
index 822e21d..9d6298e 100644
--- a/newsletter-sign-up-with-success-message-main/style-guide.md
+++ b/newsletter-sign-up-with-success-message-main/style-guide.md
@@ -18,7 +18,7 @@ The designs were created to the following widths:
### Neutral
- Blue 800: hsl(234, 29%, 20%)
-- Blue 700: hsl(235, 18%, 26%)
+- Blue 700: hsla(235, 18%, 26%, 1.00)
- Grey: hsl(0, 0%,58%)
- White: hsl(0, 0%, 100%)
diff --git a/newsletter-sign-up-with-success-message-main/styles.css b/newsletter-sign-up-with-success-message-main/styles.css
new file mode 100644
index 0000000..fe5388f
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/styles.css
@@ -0,0 +1,159 @@
+body {
+ font-family: 'Roboto-Regular', sans-serif;
+ background-color: hsla(235, 18%, 26%, 1.00);
+ height: 95vh;
+ width: 95vw;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.main-container,
+.success-state {
+ justify-content: center;
+ align-content: center;
+}
+
+.main-container {
+ display: flex;
+ flex-direction: row;
+ height: 60vh;
+ width: 60vw;
+ background-color: hsl(0, 0%, 100%);
+ border-radius: 1.5rem;
+ padding: 2rem;
+}
+
+.content-section {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.illustration {
+ width: auto;
+ height: 100%;
+ object-fit: scale-down;
+ margin-left: auto;
+}
+
+.bullet-icon {
+ margin-right: 1rem;
+}
+
+.bullet {
+ display: flex;
+ align-items: center;
+}
+
+.email-section {
+ display: flex;
+ flex-direction: column;
+}
+
+.email-title {
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.email-input {
+ height: 3rem;
+ border-radius: 0.5rem;
+ text-align: center;
+ color: black;
+ border: 1px solid black;
+ transition: all 0.3s ease;
+ background-color: wheat;
+}
+
+h2 {
+ font-size: small;
+}
+
+.email-error-message {
+ display: none;
+ color:hsl(4, 100%, 67%);
+}
+
+.subscribe-button {
+ height: 3rem;
+ border-radius: 0.5rem;
+ background-image: linear-gradient(to right, hsl(4, 100%, 67%), hsl(46, 91%, 54%), hsl(4, 100%, 67%));
+ color: white;
+ cursor: pointer;
+}
+
+.success-state {
+ display: none;
+ flex-direction: column;
+ height: 50vh;
+ width: 30vw;
+ background-color: hsl(0, 0%, 100%);
+ border-radius: 1.5rem;
+ padding: 2rem;
+ justify-content: space-around;
+}
+
+.success-symbol {
+ height: 15%;
+ width: 15%;
+}
+
+.dismiss-button {
+ height: 3rem;
+ border-radius: 0.5rem;
+ background-image: linear-gradient(to right, hsl(4, 100%, 67%), hsl(46, 91%, 54%), hsl(4, 100%, 67%));
+ color: white;
+ cursor:pointer;
+}
+
+.credits {
+ position: absolute;
+ bottom: 1.5rem;
+ color: white;
+ text-align: center;
+}
+
+/* Only this animation was done with AI! */
+
+.star-wall {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ width: 10rem;
+ overflow: hidden;
+}
+
+
+.star-column {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ overflow: hidden;
+ width: 2rem;
+ gap: 1rem;
+}
+
+#star-column-1 .star,
+#star-column-3 .star {
+ transform: translateY(-50px);
+ animation: scroll-down 8s linear infinite;
+}
+
+@keyframes scroll-down {
+ 0% { transform: translateY(-100%); }
+ 100% { transform: translateY(0%); }
+}
+
+#star-column-2 .star {
+ animation: scroll-up 8s linear infinite;
+}
+
+@keyframes scroll-up {
+ 0% { transform: translateY(0%); }
+ 100% { transform: translateY(-100%); }
+}
\ No newline at end of file
+ 
+