+
+
- A confirmation email has been sent to ash@loremcompany.com.
- Please open it and click the button inside to confirm your subscription.
+
Thanks for subscribing!
- Dismiss message
+
+ A confirmation email has been sent to
+ . Please open it and click the button
+ inside to confirm your subscription.
+
-
-
-
+
\ 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..795de53
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/script.js
@@ -0,0 +1,41 @@
+document.addEventListener("DOMContentLoaded", () => {
+ const formContainer = document.querySelector(".form-container");
+ const successCard = document.getElementById("success-card");
+
+ const emailInput = document.getElementById("email");
+ const submitBtn = document.getElementById("submit-button");
+ const dismissBtn = document.getElementById("dismiss-button");
+ const userEmailSpot = document.getElementById("user-email");
+
+ function isValidEmail(email) {
+ // simple email check – good enough for this challenge
+ return /\S+@\S+\.\S+/.test(email);
+ }
+
+ submitBtn.addEventListener("click", () => {
+ const email = emailInput.value.trim();
+
+ if (!isValidEmail(email)) {
+ emailInput.style.borderColor = "red";
+ return;
+ }
+
+ emailInput.style.borderColor = ""; // reset if previously red
+
+ // Insert email into success message
+ userEmailSpot.textContent = email;
+
+ // Hide form & show success
+ formContainer.classList.add("hidden");
+ successCard.classList.remove("hidden");
+ });
+
+ dismissBtn.addEventListener("click", () => {
+ successCard.classList.add("hidden");
+ formContainer.classList.remove("hidden");
+
+ // reset form input
+ emailInput.value = "";
+ emailInput.style.borderColor = "";
+ });
+});
diff --git a/newsletter-sign-up-with-success-message-main/style-guide.md b/newsletter-sign-up-with-success-message-main/style-guide.md
deleted file mode 100644
index 822e21d..0000000
--- a/newsletter-sign-up-with-success-message-main/style-guide.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Front-end Style Guide
-
-## Layout
-
-The designs were created to the following widths:
-
-- Mobile: 375px
-- Desktop: 1440px
-
-> 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens.
-
-## Colors
-
-### Primary
-
-- Red: hsl(4, 100%, 67%)
-
-### Neutral
-
-- Blue 800: hsl(234, 29%, 20%)
-- Blue 700: hsl(235, 18%, 26%)
-- Grey: hsl(0, 0%,58%)
-- White: hsl(0, 0%, 100%)
-
-## Typography
-
-### Body Copy
-
-- Font size (paragraph): 16px
-
-### Font
-
-- Family: [Roboto](https://fonts.google.com/specimen/Roboto)
-- Weights: 400, 700
-
-> 💎 [Upgrade to Pro](https://www.frontendmentor.io/pro?ref=style-guide) for design file access to see all design details and get hands-on experience using a professional workflow with tools like Figma.
diff --git a/newsletter-sign-up-with-success-message-main/styles/style.css b/newsletter-sign-up-with-success-message-main/styles/style.css
new file mode 100644
index 0000000..6b8ec4d
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/styles/style.css
@@ -0,0 +1,187 @@
+/*
+ - Mobile: 375px
+ - Desktop: 1440px
+*/
+
+:root {
+ font-family: "Roboto", sans-serif;
+ font-size: 16px;
+ --originalBlue800: hsl(234, 29%, 20%);
+ --originalBlue700: hsl(235, 18%, 26%);
+ --originalGrey: hsl(0, 0%, 58%);
+ --originalWhite: hsl(0, 0%, 100%);
+ --primaryRed: hsl(4, 100%, 67%);
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ background-color: var(--originalBlue800);
+ width: 100vw;
+ height: 100vh;
+ overflow: hidden;
+ color: var(--originalBlue800);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+
+.form-container {
+ background-color: var(--originalWhite);
+ width: 65%;
+ max-width: 900px;
+ border-radius: 25px;
+ display: flex;
+ flex-direction: row;
+ overflow: hidden;
+}
+
+.form-column {
+ flex: 1 1 0;
+ min-width: 0;
+
+ height: 100%;
+ padding: 2rem 1.5rem;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+#form-text {
+ width: 100%;
+ margin-left: 1.3rem;
+}
+
+#form-text h1 {
+ font-size: 2.5rem;
+ line-height: 1.1;
+ margin-bottom: 1rem;
+ color: var(--originalBlue800);
+}
+
+#form-text>p {
+ font-size: 0.95rem;
+ color: var(--originalBlue700);
+}
+
+#form-text ul {
+ list-style: none;
+ padding-left: 0;
+ margin-bottom: 2rem;
+}
+
+#form-text ul li {
+ background-image: url("/newsletter-sign-up-with-success-message-main/assets/images/icon-list.svg");
+ background-repeat: no-repeat;
+ background-position: 0 0.25rem;
+ background-size: 18px 18px;
+
+ padding-left: 1.6rem;
+ margin-bottom: 0.75rem;
+
+ font-size: 0.95rem;
+ line-height: 1.75;
+ color: var(--originalBlue800);
+}
+
+#form-text label {
+ display: block;
+ font-size: 0.75rem;
+ font-weight: 700;
+ margin-bottom: 0.4rem;
+ color: var(--originalBlue800);
+}
+
+#form-text input[type="email"] {
+ width: 100%;
+ padding: 0.9rem 1rem;
+ border-radius: 8px;
+ border: 1px solid hsl(231, 7%, 85%);
+ font-size: 0.9rem;
+ color: var(--originalBlue800);
+ margin-bottom: 1rem;
+}
+
+#form-text input[type="email"]::placeholder {
+ color: var(--originalGrey);
+}
+
+#form-text input[type="email"]:focus {
+ outline: none;
+ border-color: var(--originalBlue800);
+}
+
+button {
+ width: 100%;
+ padding: 0.9rem 1rem;
+ background: var(--originalBlue800);
+ color: var(--originalWhite);
+ border: none;
+ border-radius: 8px;
+ font: inherit;
+ cursor: pointer;
+}
+
+button:hover {
+ background: linear-gradient(to right, #ff5379, #fe693e);
+ box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+#desktop-image {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+}
+
+#desktop-image img {
+ max-width: 100%;
+ object-fit: contain;
+ display: block;
+}
+
+.hidden {
+ display: none;
+}
+
+#success-card.hidden {
+ display: none;
+}
+
+#success-card {
+ background: var(--originalWhite);
+ width: 420px;
+ padding: 2.5rem;
+ border-radius: 25px;
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.success-content h1 {
+ color: var(--originalBlue800);
+ margin: 1.5rem 0 1rem;
+ font-size: 2rem;
+}
+
+.success-content p {
+ font-size: 0.95rem;
+ line-height: 1.4;
+ color: var(--originalBlue700);
+ margin-bottom: 1.5rem;
+}
+
+#success-icon {
+ width: 48px;
+}
\ No newline at end of file
+