From 26296f47103ce131cbd1fec867330a5d0ec7c260 Mon Sep 17 00:00:00 2001
From: shaharAk <shahar.akiva060603@gmail.com>
Date: Sun, 16 Nov 2025 21:03:11 +0200
Subject: [PATCH 01/12] added css file

---
 newsletter-sign-up-with-success-message-main/index.html | 1 +
 newsletter-sign-up-with-success-message-main/style.css  | 3 +++
 2 files changed, 4 insertions(+)
 create mode 100644 newsletter-sign-up-with-success-message-main/style.css

diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 8e7329b..53409f5 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
 
+  <link rel="stylesheet" href="./style.css">
   <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
   
   <title>Frontend Mentor | Newsletter sign-up form with success message</title>
diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css
new file mode 100644
index 0000000..4806e4e
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -0,0 +1,3 @@
+html {
+    background-color: rgb(228, 120, 120);
+}
\ No newline at end of file

From 560870df960c069d608710701b3059489d8712ae Mon Sep 17 00:00:00 2001
From: shaharAk <shahar.akiva060603@gmail.com>
Date: Sun, 16 Nov 2025 21:09:16 +0200
Subject: [PATCH 02/12] larger font

---
 newsletter-sign-up-with-success-message-main/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css
index 4806e4e..ac4d911 100644
--- a/newsletter-sign-up-with-success-message-main/style.css
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -1,3 +1,4 @@
 html {
     background-color: rgb(228, 120, 120);
+    font-size: 50px;
 }
\ No newline at end of file

From 49f7d14ad78664e1bfe80fc893ba3cc93dd1e6e5 Mon Sep 17 00:00:00 2001
From: shaharAk <shahar.akiva060603@gmail.com>
Date: Sun, 16 Nov 2025 21:19:27 +0200
Subject: [PATCH 03/12] new branch first commit

---
 .../index.html                                  | 17 ++++++++++-------
 .../style.css                                   | 13 +++++++++++--
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 53409f5..24bc1ac 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -19,16 +19,18 @@
 
   <!-- Sign-up form start -->
 
-  Stay updated!
+  <div class="card">
+    <h1>Stay updated!</h1>
+  
 
-  Join 60,000+ product managers receiving monthly updates on:
+    <p>Join 60,000+ product managers receiving monthly updates on:</p>
 
-  Product discovery and building what matters
-  Measuring to ensure updates are a success
-  And much more!
+  <p>Product discovery and building what matters</p>
+  <p>Measuring to ensure updates are a success</p>
+  <p>And much more!</p>
 
-  Email address
-  email@company.com
+  <p class="bold">Email address</p>
+  <textarea>@company.com</textarea>
 
   Subscribe to monthly newsletter
 
@@ -42,6 +44,7 @@
   Please open it and click the button inside to confirm your subscription.
 
   Dismiss message
+  </div>
 
   <!-- Success message end -->
   
diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css
index ac4d911..5c28749 100644
--- a/newsletter-sign-up-with-success-message-main/style.css
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -1,4 +1,13 @@
 html {
-    background-color: rgb(228, 120, 120);
-    font-size: 50px;
+    background-color: rgb(49, 50, 62);
+}
+
+.card {
+    position: absolute;
+    background-color: white;
+    border-radius: 15px;
+    width: 50vw;
+    height: 50vh;
+    left: 25vw;
+    top: 25vh;
 }
\ No newline at end of file

From f1df54791e9aab62140559696f87687cb7dcbfdb Mon Sep 17 00:00:00 2001
From: shaharAk <shahar.akiva060603@gmail.com>
Date: Sun, 16 Nov 2025 21:46:45 +0200
Subject: [PATCH 04/12] style changes

---
 .../index.html                                | 24 ++++++-----
 .../style.css                                 | 40 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 24bc1ac..16fea72 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -20,31 +20,35 @@
   <!-- Sign-up form start -->
 
   <div class="card">
-    <h1>Stay updated!</h1>
+    <div class="content">
+      <h1>Stay updated!</h1>
   
 
-    <p>Join 60,000+ product managers receiving monthly updates on:</p>
+      <p>Join 60,000+ product managers receiving monthly updates on:</p>
 
-  <p>Product discovery and building what matters</p>
-  <p>Measuring to ensure updates are a success</p>
-  <p>And much more!</p>
+      <p>Product discovery and building what matters</p>
+      <p>Measuring to ensure updates are a success</p>
+      <p>And much more!</p>
 
-  <p class="bold">Email address</p>
-  <textarea>@company.com</textarea>
+      <p class="bold">Email address</p>
+      <textarea>@company.com</textarea>
 
-  Subscribe to monthly newsletter
+      <button class="submit">Subscribe to monthly newsletter</button>
+    </div>
+    <div class="image"></div>
 
   <!-- Sign-up form end -->
 
   <!-- Success message start -->
 
-  Thanks for subscribing!
+  <!-- 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.
 
-  Dismiss message
+  Dismiss message -->
   </div>
+  
 
   <!-- Success message end -->
   
diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css
index 5c28749..ce488af 100644
--- a/newsletter-sign-up-with-success-message-main/style.css
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -3,11 +3,47 @@ html {
 }
 
 .card {
+    display: flex;
     position: absolute;
     background-color: white;
     border-radius: 15px;
-    width: 50vw;
+    width: 45vw;
     height: 50vh;
     left: 25vw;
-    top: 25vh;
+    top: 20vh;
+    padding-left: 4vw;
+    padding-top: 2.5vh;
+    padding-bottom: 2.5vh;
+}
+
+.content {
+    width: 50%;
+}
+
+.image {
+    background-image: url("./assets/images/illustration-sign-up-desktop.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: 100%;
+    width: 50%;
+    right: 0;
+    margin-right: 0;
+    position: absolute;
+}
+
+textarea {
+    display: block;
+}
+
+.submit {
+    position: relative;
+    display: block;
+    width: 30%;
+    padding: 2%;
+    background-color: rgb(35, 38, 61);
+    color: white;
+    border-radius: 5px;
+    border: none;
+    cursor: pointer;
+    margin-top: 2%;
 }
\ No newline at end of file

From 636ff9dee29b59587ca5838d689d1795dba35e6b Mon Sep 17 00:00:00 2001
From: shaharAk <shahar.akiva060603@gmail.com>
Date: Thu, 20 Nov 2025 13:05:02 +0200
Subject: [PATCH 05/12] test

---
 .../style.css                                   | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css
index ce488af..763d76f 100644
--- a/newsletter-sign-up-with-success-message-main/style.css
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -1,5 +1,6 @@
 html {
     background-color: rgb(49, 50, 62);
+    font-family: "assignmentfont";
 }
 
 .card {
@@ -11,7 +12,7 @@ html {
     height: 50vh;
     left: 25vw;
     top: 20vh;
-    padding-left: 4vw;
+    padding-left: 3%;
     padding-top: 2.5vh;
     padding-bottom: 2.5vh;
 }
@@ -24,10 +25,13 @@ html {
     background-image: url("./assets/images/illustration-sign-up-desktop.svg");
     background-repeat: no-repeat;
     background-size: contain;
-    height: 100%;
+    height: 90%;
     width: 50%;
-    right: 0;
-    margin-right: 0;
+    top: 5%;
+    margin-left: 50%;
+    margin-top: 0;
+
+
     position: absolute;
 }
 
@@ -46,4 +50,9 @@ textarea {
     border: none;
     cursor: pointer;
     margin-top: 2%;
+}
+
+@font-face {
+    font-family: "assignmentfont";
+    src: url("./assets/fonts/Roboto-Regular.ttf");
 }
\ No newline at end of file

From f204361541a5fe0a91045ea2be0717b716348bc6 Mon Sep 17 00:00:00 2001
From: shaharAk <shahar.akiva060603@gmail.com>
Date: Sat, 29 Nov 2025 17:36:03 +0200
Subject: [PATCH 06/12] updated

---
 .../index.html                                   |  2 +-
 .../style.css                                    | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 16fea72..5ed903b 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -31,7 +31,7 @@ <h1>Stay updated!</h1>
       <p>And much more!</p>
 
       <p class="bold">Email address</p>
-      <textarea>@company.com</textarea>
+      <textarea class="mail">@company.com</textarea>
 
       <button class="submit">Subscribe to monthly newsletter</button>
     </div>
diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css
index 763d76f..ec7c9fc 100644
--- a/newsletter-sign-up-with-success-message-main/style.css
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -35,15 +35,25 @@ html {
     position: absolute;
 }
 
-textarea {
+.mail {
+    position: relative;
     display: block;
+    border:gray;
+    width: 100%;
+    padding: 1%;
+    height: 10%;
+    border-width: 20px;
+    resize: none;
+    font-size: 18px;
+    color: gray;
+    margin: 0;
 }
 
 .submit {
     position: relative;
     display: block;
-    width: 30%;
-    padding: 2%;
+    width: 100%;
+    /* padding: 6%; */
     background-color: rgb(35, 38, 61);
     color: white;
     border-radius: 5px;

From 8e84adebb6668a2a7090472c52c23b15a0d7c20a Mon Sep 17 00:00:00 2001
From: shaharAk <shahar.akiva060603@gmail.com>
Date: Sat, 29 Nov 2025 18:11:26 +0200
Subject: [PATCH 07/12] finished basic styling

---
 .../index.html                                | 13 ++--
 .../style.css                                 | 59 +++++++++++++++----
 2 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 5ed903b..da50d91 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -21,17 +21,18 @@
 
   <div class="card">
     <div class="content">
-      <h1>Stay updated!</h1>
+      <h1 class="title">Stay updated!</h1>
   
 
       <p>Join 60,000+ product managers receiving monthly updates on:</p>
 
-      <p>Product discovery and building what matters</p>
-      <p>Measuring to ensure updates are a success</p>
-      <p>And much more!</p>
+      <p><img class="icon" src="./assets/images/icon-list.svg"/> Product discovery and building what matters</p>
+      <p><img class="icon" src="./assets/images/icon-list.svg"/> Measuring to ensure updates are a success</p>
+      <p><img class="icon" src="./assets/images/icon-list.svg"/> And much more!</p>
 
+      <div class="spacer"></div>
       <p class="bold">Email address</p>
-      <textarea class="mail">@company.com</textarea>
+      <textarea class="mail">email@company.com</textarea>
 
       <button class="submit">Subscribe to monthly newsletter</button>
     </div>
@@ -54,7 +55,7 @@ <h1>Stay updated!</h1>
   
   <div class="attribution">
     Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
-    Coded by <a href="#">Your Name Here</a>.
+    Coded by <a href="#">Shahar Akiva</a>.
   </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css
index ec7c9fc..a6c04d5 100644
--- a/newsletter-sign-up-with-success-message-main/style.css
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -3,6 +3,8 @@ html {
     font-family: "assignmentfont";
 }
 
+
+
 .card {
     display: flex;
     position: absolute;
@@ -15,6 +17,11 @@ html {
     padding-left: 3%;
     padding-top: 2.5vh;
     padding-bottom: 2.5vh;
+    font-size: 12px;
+}
+
+.title {
+    font-size: 40px;
 }
 
 .content {
@@ -30,23 +37,38 @@ html {
     top: 5%;
     margin-left: 50%;
     margin-top: 0;
-
-
     position: absolute;
 }
 
 .mail {
     position: relative;
-    display: block;
-    border:gray;
-    width: 100%;
-    padding: 1%;
-    height: 10%;
-    border-width: 20px;
+    display: inline-block;
+    border: 1px solid gray;
+    width: 92%;
+    padding: 6% 2% 2% 6%;
     resize: none;
-    font-size: 18px;
+    font-size: 12px;
     color: gray;
-    margin: 0;
+    border-radius: 8px;
+    line-height: 100%;
+    vertical-align: middle;
+    text-wrap-mode: nowrap;
+}
+
+
+.icon {
+    vertical-align: bottom;
+    width: 6%;
+    margin-right: 10px;
+}
+
+p {
+    margin-right: 5%;
+}
+
+.spacer {
+    width: 100%;
+    height: 10px;
 }
 
 .submit {
@@ -56,13 +78,26 @@ html {
     /* padding: 6%; */
     background-color: rgb(35, 38, 61);
     color: white;
-    border-radius: 5px;
+    border-radius: 8px;
     border: none;
     cursor: pointer;
+    padding: 5% 2% 5% 2%;
     margin-top: 2%;
+    font-size: 12px;
+}
+
+.bold {
+    font-weight: bold;
 }
 
 @font-face {
     font-family: "assignmentfont";
     src: url("./assets/fonts/Roboto-Regular.ttf");
-}
\ No newline at end of file
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: "assignmentfont";
+    src: url("./assets/fonts/Roboto-Bold.ttf");
+    font-weight: bold; /* Or font-weight: bold; */
+}

From dd88868d4770dc31abe7d0ddf38474dd33c741a4 Mon Sep 17 00:00:00 2001
From: shaharAk <shahar.akiva060603@gmail.com>
Date: Sat, 29 Nov 2025 19:00:19 +0200
Subject: [PATCH 08/12] added javascript and a new card for completion

---
 .../index.html                                | 26 ++++++++++++-------
 .../script.js                                 | 20 ++++++++++++++
 .../style.css                                 | 26 +++++++++++++++++++
 3 files changed, 63 insertions(+), 9 deletions(-)
 create mode 100644 newsletter-sign-up-with-success-message-main/script.js

diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index da50d91..f8a6322 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -6,7 +6,9 @@
 
   <link rel="stylesheet" href="./style.css">
   <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
-  
+
+  <script src="./script.js" defer></script> 
+
   <title>Frontend Mentor | Newsletter sign-up form with success message</title>
 
   <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
@@ -19,7 +21,7 @@
 
   <!-- Sign-up form start -->
 
-  <div class="card">
+  <div class="card" id="first-card">
     <div class="content">
       <h1 class="title">Stay updated!</h1>
   
@@ -34,20 +36,26 @@ <h1 class="title">Stay updated!</h1>
       <p class="bold">Email address</p>
       <textarea class="mail">email@company.com</textarea>
 
-      <button class="submit">Subscribe to monthly newsletter</button>
+      <button id="subscribe" class="submit">Subscribe to monthly newsletter</button>
     </div>
     <div class="image"></div>
+  </div>
 
-  <!-- Sign-up form end -->
+  <div id="success-card" class="card">
+      <!-- Sign-up form end -->
 
-  <!-- Success message start -->
+      <!-- Success message start -->
 
-  <!-- Thanks for subscribing!
+      <img class="v-icon" src="./assets/images/icon-success.svg"/>
+      <h1 class="title">Thanks for subscribing!</h1>
 
-  A confirmation email has been sent to ash@loremcompany.com. 
-  Please open it and click the button inside to confirm your subscription.
+      <p>A confirmation email has been sent to <span id="customer-mail" class="bold">ash@loremcompany.com</span>.
+      Please open it and click the button inside to confirm your subscription.</p>
+
+      <div class="spacer"></div>
+      <div class="spacer"></div>
 
-  Dismiss message -->
+      <button id="dismiss" class="submit">Dismiss message</button>
   </div>
   
 
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..24060f3
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/script.js
@@ -0,0 +1,20 @@
+
+//handles the subscription button
+document.getElementById("subscribe").addEventListener("click", () => {
+
+    let email = document.querySelector(".mail").value;
+    document.getElementById("success-card").style.display = "block";
+    document.getElementById("first-card").style.display = "none";
+
+    document.getElementById("customer-mail").textContent = email;
+});
+
+//handles the dismiss button
+
+document.getElementById("dismiss").addEventListener("click", () => {
+
+    document.getElementById("first-card").style.display = "block";
+    document.getElementById("success-card").style.display = "none";
+
+    document.querySelector(".mail").value = "email@company.com";
+});
\ No newline at end of file
diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css
index a6c04d5..1bab75d 100644
--- a/newsletter-sign-up-with-success-message-main/style.css
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -15,6 +15,7 @@ html {
     left: 25vw;
     top: 20vh;
     padding-left: 3%;
+    padding-right: 3%;
     padding-top: 2.5vh;
     padding-bottom: 2.5vh;
     font-size: 12px;
@@ -84,12 +85,37 @@ p {
     padding: 5% 2% 5% 2%;
     margin-top: 2%;
     font-size: 12px;
+    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+}
+
+.submit:hover {
+    background: #fd1d6b;
+    background: linear-gradient(90deg, rgba(253, 29, 107, 1) 0%, rgba(252, 176, 69, 1) 100%);
+}
+
+.submit:active {
+    transform: scale(0.95);
+    transform: translateY(2px);
+    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
 }
 
 .bold {
     font-weight: bold;
 }
 
+#success-card {
+    display: none;
+    left: 32vw;
+    width: 25vw;
+    height: 40vh;
+    padding: 5%;
+}
+
+.v-icon {
+    width: 50px;
+}
+
 @font-face {
     font-family: "assignmentfont";
     src: url("./assets/fonts/Roboto-Regular.ttf");

From c32e5b5a48d85d991e575887aa92e4ee1cfa8852 Mon Sep 17 00:00:00 2001
From: shaharAk <shahar.akiva060603@gmail.com>
Date: Sat, 29 Nov 2025 19:19:16 +0200
Subject: [PATCH 09/12] added error msg

---
 .../index.html                                |  3 +-
 .../script.js                                 | 29 ++++++++++++++++---
 .../style.css                                 | 19 ++++++++++++
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index f8a6322..a0576be 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -33,7 +33,8 @@ <h1 class="title">Stay updated!</h1>
       <p><img class="icon" src="./assets/images/icon-list.svg"/> And much more!</p>
 
       <div class="spacer"></div>
-      <p class="bold">Email address</p>
+      <span><p class="bold">Email address</p> <p id="errormsg">valid email required</p></span>
+      
       <textarea class="mail">email@company.com</textarea>
 
       <button id="subscribe" class="submit">Subscribe to monthly newsletter</button>
diff --git a/newsletter-sign-up-with-success-message-main/script.js b/newsletter-sign-up-with-success-message-main/script.js
index 24060f3..c4fe914 100644
--- a/newsletter-sign-up-with-success-message-main/script.js
+++ b/newsletter-sign-up-with-success-message-main/script.js
@@ -1,12 +1,33 @@
+//check validity of input
+const checkEmailValidity = () => {
+let txt = document.querySelector(".mail");
+
+// txt.addEventListener("input", () => {
+    //ok
+    if (txt.value.includes("@")) {
+        document.getElementById("errormsg").style.display = "none";
+        txt.classList.remove("error");
+        return true;
+    } 
+    //error
+    else {
+        document.getElementById("errormsg").style.display = "inline-block";
+        txt.classList.add("error");
+        return false;
+    }
+// });
+}
 
 //handles the subscription button
 document.getElementById("subscribe").addEventListener("click", () => {
 
-    let email = document.querySelector(".mail").value;
-    document.getElementById("success-card").style.display = "block";
-    document.getElementById("first-card").style.display = "none";
+    if (checkEmailValidity()){
+        let email = document.querySelector(".mail").value;
+        document.getElementById("success-card").style.display = "block";
+        document.getElementById("first-card").style.display = "none";
 
-    document.getElementById("customer-mail").textContent = email;
+        document.getElementById("customer-mail").textContent = email;
+    }
 });
 
 //handles the dismiss button
diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css
index 1bab75d..447f40d 100644
--- a/newsletter-sign-up-with-success-message-main/style.css
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -116,6 +116,25 @@ p {
     width: 50px;
 }
 
+.error {
+    background-color: rgb(255, 239, 239);
+    border-color: red;
+    color: red;
+}
+
+span p {
+    display: inline-block;
+}
+
+#errormsg {
+    display: none;
+    position: absolute;
+    color: red;
+    text-align: right;
+    right: 45%;
+}
+
+
 @font-face {
     font-family: "assignmentfont";
     src: url("./assets/fonts/Roboto-Regular.ttf");

From b642a7ecb0b81cc1e4a1d754e6c8494e8f103854 Mon Sep 17 00:00:00 2001
From: shaharAk <shahar.akiva060603@gmail.com>
Date: Sun, 30 Nov 2025 17:48:01 +0200
Subject: [PATCH 10/12] added mobile view

---
 .../style.css                                 | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css
index 447f40d..25f7a7b 100644
--- a/newsletter-sign-up-with-success-message-main/style.css
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -76,6 +76,7 @@ p {
     position: relative;
     display: block;
     width: 100%;
+    font-weight: bold;
     /* padding: 6%; */
     background-color: rgb(35, 38, 61);
     color: white;
@@ -146,3 +147,59 @@ span p {
     src: url("./assets/fonts/Roboto-Bold.ttf");
     font-weight: bold; /* Or font-weight: bold; */
 }
+
+
+/* Responsive design */
+
+@media screen and (width <= 440px) {
+
+    html {
+        background-color: white;
+    }
+
+    .card {
+        border-radius: 0;
+        width: 100vw;
+        height: 100vh;
+        left: 0;
+        top: 0;
+        padding: 0;
+    }
+
+    .image {
+        background-image: url("./assets/images/illustration-sign-up-mobile.svg");
+        width: 100%;
+        top: 0;
+        margin: 0;
+        padding: 0;
+    }
+
+    .content {
+        width: 80%;
+        position: absolute;
+        top: 32%;
+        padding: 10%;
+        z-index: 2;
+        font-size: 18px;
+    }
+
+    .spacer {
+        height: 5px;
+    }
+
+    .title {
+        font-size: 45px;
+        margin: 5% 0 2% 0;
+    }
+
+    .mail {
+        font-size: 18px;
+        padding: 8% 2% 2% 6%;
+    }
+
+    .submit {
+        font-size: 16px;
+        margin-top: 10px;
+    }   
+
+}
\ No newline at end of file

From 2e4ebb01ee103a74e734a283808d4a1c1cfdd0e9 Mon Sep 17 00:00:00 2001
From: shaharAk <shahar.akiva060603@gmail.com>
Date: Sun, 30 Nov 2025 17:58:38 +0200
Subject: [PATCH 11/12] fixed mobile view

---
 .../style.css                                 | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css
index 25f7a7b..4de1c76 100644
--- a/newsletter-sign-up-with-success-message-main/style.css
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -77,7 +77,6 @@ p {
     display: block;
     width: 100%;
     font-weight: bold;
-    /* padding: 6%; */
     background-color: rgb(35, 38, 61);
     color: white;
     border-radius: 8px;
@@ -151,7 +150,7 @@ span p {
 
 /* Responsive design */
 
-@media screen and (width <= 440px) {
+@media screen and (max-width: 440px) {
 
     html {
         background-color: white;
@@ -202,4 +201,24 @@ span p {
         margin-top: 10px;
     }   
 
+    #success-card {
+        left: 0;
+        width: 80%;
+        height: 100vh;
+        padding: 10%;
+    }  
+    
+    #success-card p {
+        font-size: 20px;
+    }   
+
+    .v-icon {
+        margin-top: 30%;
+        width: 70px;
+    }
+
+    #dismiss {
+        position: relative;
+        margin-top: 90%;
+    }
 }
\ No newline at end of file

From 356a67df5d3a468c245daa4f2ed1fb44d16ef870 Mon Sep 17 00:00:00 2001
From: shaharAk <shahar.akiva060603@gmail.com>
Date: Sun, 30 Nov 2025 18:02:43 +0200
Subject: [PATCH 12/12] fixed error msg alignment

---
 newsletter-sign-up-with-success-message-main/style.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css
index 4de1c76..de2ebdf 100644
--- a/newsletter-sign-up-with-success-message-main/style.css
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -219,6 +219,10 @@ span p {
 
     #dismiss {
         position: relative;
-        margin-top: 90%;
+        margin-top: 80%;
+    }
+
+    #errormsg {
+        right: 20px;
     }
 }
\ No newline at end of file