From df9ae98f7dab49dbd91f50702ba637dc6eb8d3ad Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Sun, 16 Nov 2025 21:09:40 +0200
Subject: [PATCH 01/14] added my name

---
 newsletter-sign-up-with-success-message-main/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 8e7329b..78eb8ca 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -46,7 +46,7 @@
   
   <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="#">Liron</a>.
   </div>
 </body>
 </html>
\ No newline at end of file

From 95a97b7c26c191db18a8fa7c28266932aa52f38e Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Mon, 17 Nov 2025 02:18:51 +0200
Subject: [PATCH 02/14] created desktop design

---
 .../desktop-design.css                        | 88 +++++++++++++++++++
 .../index.html                                | 50 +++++++----
 2 files changed, 122 insertions(+), 16 deletions(-)
 create mode 100644 newsletter-sign-up-with-success-message-main/desktop-design.css

diff --git a/newsletter-sign-up-with-success-message-main/desktop-design.css b/newsletter-sign-up-with-success-message-main/desktop-design.css
new file mode 100644
index 0000000..982d74f
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/desktop-design.css
@@ -0,0 +1,88 @@
+html {
+    height: 100vh;
+}
+
+body {
+    background-color: hsl(235, 18%, 26%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    font-family: "Roboto", sans-serif;
+}
+
+article {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-evenly;
+    background-color: hsl(0, 0%, 100%);
+    border-radius: 25px;
+    max-width: 800px;
+    max-height: 400px;
+    color: hsl(234, 29%, 20%);
+    font-size: 15px;
+    padding-bottom: 15px;
+    padding-top: 15px;
+    padding-left: 30px;
+}
+
+article img {
+    margin-right: -10px;
+}
+
+article main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 50%;
+}
+
+article main h1 {
+    font-weight: 700;
+    font-size: 40px;
+    line-height: 30px;
+    position: relative;
+}
+
+.article-content {
+    gap: 10px;
+}
+
+.bullet-point {
+    display: flex;
+    gap: 20px;
+    margin-bottom: -25px;
+}
+
+.bullet-point img {
+    width: 15px;
+}
+
+article form {
+    display: flex;
+    flex-direction: column;
+    margin-top: 30px;
+    padding-bottom: 30px;
+}
+
+article label {
+    font-weight: 700;
+    font-size: 12px;
+}
+
+article input {
+    height: 40px;
+    border-radius: 5px;
+    margin-top: 10px;
+    border-color: hsl(0, 0%,58%);
+    border-width: 0.5px;
+    color: hsl(0, 0%,58%);
+}
+
+article input[type=button] {
+    background-color: hsl(234, 29%, 20%);
+    text-align: center;
+    color: white;
+    font-weight: 700;
+}
diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 78eb8ca..5b42b40 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -5,6 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
 
   <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
+  <link type="text/css" href="./desktop-design.css" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
   
   <title>Frontend Mentor | Newsletter sign-up form with success message</title>
 
@@ -17,33 +21,47 @@
 <body>
 
   <!-- Sign-up form start -->
-
-  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
-  email@company.com
-
+  <article>
+    <img src="assets\images\illustration-sign-up-desktop.svg">
+    <main>
+      <div class="article-content">
+        <h1>Stay updated!</h1>
+        <p>Join 60,000+ product managers recieving monthly updates on:</p>
+        <div class="bullet-point">
+          <img src="./assets/images/icon-success.svg">
+          <p>Product discovery and building what matters</p>
+        </div>
+        <div class="bullet-point">
+          <img src="./assets/images/icon-success.svg">
+          <p>Measuring to ensure updates are a success</p>
+        </div>
+        <div class="bullet-point">
+          <img src="./assets/images/icon-success.svg">
+          <p>And much more!</p>
+        </div>
+      </div>
+      <form>
+         <label for="email-address">Email address</label>
+         <input type="text" id="email-address" name="email-address" value="email@company.com">
+         <input type="button" value="Subscribe to monthly newsletter">
+      </form>
+    </main>
+  </article>
+<!-- 
   Subscribe to monthly newsletter
 
-  <!-- Sign-up form end -->
+ 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
 
-  <!-- Success message end -->
-  
+  Success message end --> 
   <div class="attribution">
     Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
     Coded by <a href="#">Liron</a>.

From 60183354a5fa2a8a59028e674ded2a0ca509517d Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Mon, 17 Nov 2025 02:25:55 +0200
Subject: [PATCH 03/14] added button hover color

---
 .../desktop-design.css                                        | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/newsletter-sign-up-with-success-message-main/desktop-design.css b/newsletter-sign-up-with-success-message-main/desktop-design.css
index 982d74f..18a8598 100644
--- a/newsletter-sign-up-with-success-message-main/desktop-design.css
+++ b/newsletter-sign-up-with-success-message-main/desktop-design.css
@@ -86,3 +86,7 @@ article input[type=button] {
     color: white;
     font-weight: 700;
 }
+
+article input[type=button]:hover {
+    background-color: hsl(4, 100%, 67%);
+}

From 1803d6743c642d4dffd2fe9587d658c0497e1e01 Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Tue, 18 Nov 2025 01:52:58 +0200
Subject: [PATCH 04/14] created mobile design

---
 .../desktop-design.css                        | 128 +++++++++++++-----
 .../index.html                                |   9 +-
 2 files changed, 100 insertions(+), 37 deletions(-)

diff --git a/newsletter-sign-up-with-success-message-main/desktop-design.css b/newsletter-sign-up-with-success-message-main/desktop-design.css
index 18a8598..8cfadac 100644
--- a/newsletter-sign-up-with-success-message-main/desktop-design.css
+++ b/newsletter-sign-up-with-success-message-main/desktop-design.css
@@ -8,34 +8,110 @@ body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    height: 100%;
+    height: 100vh;
     font-family: "Roboto", sans-serif;
 }
 
+@media(min-width: 600px) {
+    article {
+        max-height: 400px;
+        flex-direction: row-reverse;
+        justify-content: space-around;
+        border-radius: 25px;
+        padding-bottom: 15px;
+        padding-top: 15px;
+        padding-left: 30px;
+    }
+    article img {
+        height: 100%;
+    }
+    article main {
+        flex-direction: column;
+        justify-content: center;
+        width: 50%;
+    }
+    .article-content {
+        gap: 10px;
+    }
+    article form {
+        margin-top: 30px;
+        padding-bottom: 30px;
+    }
+
+    .bullet-point {
+        gap: 20px;
+        margin-bottom: -25px;
+        align-items: baseline;
+    }
+    .bullet-point img {
+        width: 15px;
+        margin-top: 5px;
+    }
+    article input {
+        height: 40px;
+        margin-top: 10px;
+        border-width: 0.5px;
+    }
+}
+
+@media(max-width: 600px) {
+    article {
+        height: 100%;
+        width: 100%;
+        flex-direction: column;
+        padding-bottom: 15px;
+    }
+    article main {
+        flex-direction: column;
+    }
+    .article-content {
+        padding: 30px;
+    }
+    article form {
+        padding-left: 30px;
+        padding-right: 30px;
+        padding-bottom: 30px;
+    }
+    article img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        border-bottom-left-radius: 20px;
+        border-bottom-right-radius: 20px;
+    }
+    .bullet-point img {
+        width: 20px;
+    }
+    .bullet-point {
+        margin-bottom: -20px;
+        gap: 15px;
+        align-items: center;
+    }
+    article input {
+        height: 50px;
+        margin-top: 10px;
+        border-width: 0.5px;
+    }
+    article input[type=button] {
+        margin-top: 25px;
+    }
+
+}
+
+.bullet-point {
+        display: flex;
+}
+
+
 article {
     display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-evenly;
     background-color: hsl(0, 0%, 100%);
-    border-radius: 25px;
-    max-width: 800px;
-    max-height: 400px;
     color: hsl(234, 29%, 20%);
     font-size: 15px;
-    padding-bottom: 15px;
-    padding-top: 15px;
-    padding-left: 30px;
-}
-
-article img {
-    margin-right: -10px;
 }
 
 article main {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 50%;
 }
 
 article main h1 {
@@ -45,25 +121,9 @@ article main h1 {
     position: relative;
 }
 
-.article-content {
-    gap: 10px;
-}
-
-.bullet-point {
-    display: flex;
-    gap: 20px;
-    margin-bottom: -25px;
-}
-
-.bullet-point img {
-    width: 15px;
-}
-
 article form {
     display: flex;
     flex-direction: column;
-    margin-top: 30px;
-    padding-bottom: 30px;
 }
 
 article label {
@@ -72,9 +132,8 @@ article label {
 }
 
 article input {
-    height: 40px;
     border-radius: 5px;
-    margin-top: 10px;
+    border-width: 0.5px;
     border-color: hsl(0, 0%,58%);
     border-width: 0.5px;
     color: hsl(0, 0%,58%);
@@ -85,6 +144,7 @@ article input[type=button] {
     text-align: center;
     color: white;
     font-weight: 700;
+    border: none;
 }
 
 article input[type=button]:hover {
diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 5b42b40..d1223fb 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -22,7 +22,10 @@
 
   <!-- Sign-up form start -->
   <article>
-    <img src="assets\images\illustration-sign-up-desktop.svg">
+    <picture>
+      <source media="(max-width:600px)" srcset="assets\images\illustration-sign-up-mobile.svg">
+      <img src="assets/images/illustration-sign-up-desktop.svg">
+    </picture>
     <main>
       <div class="article-content">
         <h1>Stay updated!</h1>
@@ -62,9 +65,9 @@ <h1>Stay updated!</h1>
   Dismiss message
 
   Success message end --> 
-  <div class="attribution">
+  <!-- <div class="attribution">
     Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
     Coded by <a href="#">Liron</a>.
-  </div>
+  </div> -->
 </body>
 </html>
\ No newline at end of file

From 5aa50f7fe81edb93984df6e3664f2e5c8f7c8c1e Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Wed, 19 Nov 2025 16:01:44 +0200
Subject: [PATCH 05/14] fixed desktop design

---
 .../desktop-design.css                        | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/newsletter-sign-up-with-success-message-main/desktop-design.css b/newsletter-sign-up-with-success-message-main/desktop-design.css
index 8cfadac..3e1bb3d 100644
--- a/newsletter-sign-up-with-success-message-main/desktop-design.css
+++ b/newsletter-sign-up-with-success-message-main/desktop-design.css
@@ -1,5 +1,8 @@
 html {
-    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
 }
 
 body {
@@ -8,27 +11,35 @@ body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+   
     font-family: "Roboto", sans-serif;
 }
 
 @media(min-width: 600px) {
     article {
         max-height: 400px;
+        max-width: 700px;
         flex-direction: row-reverse;
         justify-content: space-around;
         border-radius: 25px;
-        padding-bottom: 15px;
-        padding-top: 15px;
+        padding: 20px;
         padding-left: 30px;
     }
+    article picture {
+        max-width: 300px;
+        display: flex;
+        justify-content: end;
+    }
     article img {
         height: 100%;
     }
     article main {
         flex-direction: column;
         justify-content: center;
-        width: 50%;
+       padding-left: 15px;
+       padding-top: 15px;
+       width: 50%;
+       height: 50%;
     }
     .article-content {
         gap: 10px;
@@ -39,7 +50,7 @@ body {
     }
 
     .bullet-point {
-        gap: 20px;
+        gap: 10px;
         margin-bottom: -25px;
         align-items: baseline;
     }
@@ -108,6 +119,7 @@ article {
     background-color: hsl(0, 0%, 100%);
     color: hsl(234, 29%, 20%);
     font-size: 15px;
+    font-weight: 400;
 }
 
 article main {

From 4739e66e417b6153f321d24a0d7e65cae7a8d4dd Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Wed, 19 Nov 2025 16:32:05 +0200
Subject: [PATCH 06/14] fix bullet points design

---
 .../desktop-design.css                        | 16 ++++---------
 .../index.html                                | 24 +++++++++----------
 2 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/newsletter-sign-up-with-success-message-main/desktop-design.css b/newsletter-sign-up-with-success-message-main/desktop-design.css
index 3e1bb3d..d1ed4ad 100644
--- a/newsletter-sign-up-with-success-message-main/desktop-design.css
+++ b/newsletter-sign-up-with-success-message-main/desktop-design.css
@@ -90,14 +90,6 @@ body {
         border-bottom-left-radius: 20px;
         border-bottom-right-radius: 20px;
     }
-    .bullet-point img {
-        width: 20px;
-    }
-    .bullet-point {
-        margin-bottom: -20px;
-        gap: 15px;
-        align-items: center;
-    }
     article input {
         height: 50px;
         margin-top: 10px;
@@ -109,11 +101,13 @@ body {
 
 }
 
-.bullet-point {
-        display: flex;
+.success-icon {
+    float: left; 
+    width: 20px; 
+    height: 20px; 
+    margin-right: 10px;
 }
 
-
 article {
     display: flex;
     background-color: hsl(0, 0%, 100%);
diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index d1223fb..9dbb4eb 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -30,18 +30,18 @@
       <div class="article-content">
         <h1>Stay updated!</h1>
         <p>Join 60,000+ product managers recieving monthly updates on:</p>
-        <div class="bullet-point">
-          <img src="./assets/images/icon-success.svg">
-          <p>Product discovery and building what matters</p>
-        </div>
-        <div class="bullet-point">
-          <img src="./assets/images/icon-success.svg">
-          <p>Measuring to ensure updates are a success</p>
-        </div>
-        <div class="bullet-point">
-          <img src="./assets/images/icon-success.svg">
-          <p>And much more!</p>
-        </div>
+        <p>
+            <img src="./assets/images/icon-success.svg" class="success-icon">
+             Product discovery and building what matters
+        </p>
+        <p>
+            <img src="./assets/images/icon-success.svg" class="success-icon">
+             Measuring to ensure updates are a success
+        </p>
+        <p>
+            <img src="./assets/images/icon-success.svg" class="success-icon">
+             And much more fun!
+        </p>
       </div>
       <form>
          <label for="email-address">Email address</label>

From 8246d5e3dea5e73524c14cdd0ebadcd91f7c6b18 Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Wed, 19 Nov 2025 16:46:13 +0200
Subject: [PATCH 07/14] remove redundent css

---
 .../desktop-design.css                        | 32 +++++--------------
 .../index.html                                |  2 +-
 2 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/newsletter-sign-up-with-success-message-main/desktop-design.css b/newsletter-sign-up-with-success-message-main/desktop-design.css
index d1ed4ad..5d73542 100644
--- a/newsletter-sign-up-with-success-message-main/desktop-design.css
+++ b/newsletter-sign-up-with-success-message-main/desktop-design.css
@@ -20,9 +20,9 @@ body {
         max-height: 400px;
         max-width: 700px;
         flex-direction: row-reverse;
-        justify-content: space-around;
+        justify-content: space-between;
         border-radius: 25px;
-        padding: 20px;
+        padding: 15px;
         padding-left: 30px;
     }
     article picture {
@@ -30,33 +30,17 @@ body {
         display: flex;
         justify-content: end;
     }
-    article img {
-        height: 100%;
-    }
+
     article main {
         flex-direction: column;
         justify-content: center;
        padding-left: 15px;
        padding-top: 15px;
-       width: 50%;
-       height: 50%;
-    }
-    .article-content {
-        gap: 10px;
-    }
-    article form {
-        margin-top: 30px;
-        padding-bottom: 30px;
     }
 
-    .bullet-point {
-        gap: 10px;
-        margin-bottom: -25px;
-        align-items: baseline;
-    }
-    .bullet-point img {
-        width: 15px;
-        margin-top: 5px;
+    article form {
+        margin-top: 20px;
+        padding-bottom: 10px;
     }
     article input {
         height: 40px;
@@ -103,8 +87,8 @@ body {
 
 .success-icon {
     float: left; 
-    width: 20px; 
-    height: 20px; 
+    width: 15px; 
+    height: 15px; 
     margin-right: 10px;
 }
 
diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 9dbb4eb..1ff4c74 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -45,7 +45,7 @@ <h1>Stay updated!</h1>
       </div>
       <form>
          <label for="email-address">Email address</label>
-         <input type="text" id="email-address" name="email-address" value="email@company.com">
+         <input type="text" id="email-address" name="email-address" placeholder="email@company.com">
          <input type="button" value="Subscribe to monthly newsletter">
       </form>
     </main>

From 936c0009b85ebd856c6ea5638f74d68199ce1f09 Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Wed, 19 Nov 2025 17:17:45 +0200
Subject: [PATCH 08/14] rename css file

---
 .../index.html                                     |  6 ++----
 ...esktop-design.css => subscribe-page-design.css} | 14 +++++++++-----
 2 files changed, 11 insertions(+), 9 deletions(-)
 rename newsletter-sign-up-with-success-message-main/{desktop-design.css => subscribe-page-design.css} (92%)

diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 1ff4c74..a5f9c54 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
 
   <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
-  <link type="text/css" href="./desktop-design.css" rel="stylesheet">
+  <link type="text/css" href="./subscribe-page-design.css" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
@@ -51,12 +51,10 @@ <h1>Stay updated!</h1>
     </main>
   </article>
 <!-- 
-  Subscribe to monthly newsletter
-
  Sign-up form end -->
 
   <!-- Success message start -->
-
+    
   <!-- Thanks for subscribing!
 
   A confirmation email has been sent to ash@loremcompany.com. 
diff --git a/newsletter-sign-up-with-success-message-main/desktop-design.css b/newsletter-sign-up-with-success-message-main/subscribe-page-design.css
similarity index 92%
rename from newsletter-sign-up-with-success-message-main/desktop-design.css
rename to newsletter-sign-up-with-success-message-main/subscribe-page-design.css
index 5d73542..23a8b86 100644
--- a/newsletter-sign-up-with-success-message-main/desktop-design.css
+++ b/newsletter-sign-up-with-success-message-main/subscribe-page-design.css
@@ -22,7 +22,7 @@ body {
         flex-direction: row-reverse;
         justify-content: space-between;
         border-radius: 25px;
-        padding: 15px;
+        padding: 20px;
         padding-left: 30px;
     }
     article picture {
@@ -30,17 +30,21 @@ body {
         display: flex;
         justify-content: end;
     }
-
     article main {
         flex-direction: column;
         justify-content: center;
        padding-left: 15px;
        padding-top: 15px;
+       max-height: 370px;
+    }
+    .article-content {
+        max-width: 350px;;
     }
 
     article form {
         margin-top: 20px;
-        padding-bottom: 10px;
+        padding-bottom: 20px;
+        max-width: 350px;;
     }
     article input {
         height: 40px;
@@ -87,8 +91,8 @@ body {
 
 .success-icon {
     float: left; 
-    width: 15px; 
-    height: 15px; 
+    width: 20px; 
+    height: 20px; 
     margin-right: 10px;
 }
 

From d993189d642d83270a76acfce8f6abd9d608fbc4 Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Thu, 20 Nov 2025 01:56:27 +0200
Subject: [PATCH 09/14] added success window and functionality

---
 .../function.js                               |  12 ++
 .../index.html                                |  34 +++---
 .../subscribe-page-design.css                 | 105 ++++++++++++------
 3 files changed, 101 insertions(+), 50 deletions(-)
 create mode 100644 newsletter-sign-up-with-success-message-main/function.js

diff --git a/newsletter-sign-up-with-success-message-main/function.js b/newsletter-sign-up-with-success-message-main/function.js
new file mode 100644
index 0000000..2dfa2c9
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/function.js
@@ -0,0 +1,12 @@
+function send(event) {
+    event.preventDefault();
+    const form = event.target;
+    const data = new FormData(form);
+    const email = data.get("email-address");
+    console.log(email)
+    const subscribeForm = document.querySelector(".subscribe-form");
+    const subscribeSuccessWindow = document.querySelector(".subscribe-success");
+    subscribeForm.classList.add("active");
+    document.querySelector(".subscribe-success p b").textContent = email;
+    subscribeSuccessWindow.classList.add("active");
+}
\ No newline at end of file
diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index a5f9c54..6b6fee1 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -8,6 +8,7 @@
   <link type="text/css" href="./subscribe-page-design.css" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <script src="./function.js" defer></script>
   <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
   
   <title>Frontend Mentor | Newsletter sign-up form with success message</title>
@@ -20,10 +21,10 @@
 </head>
 <body>
 
-  <!-- Sign-up form start -->
-  <article>
+  <article class="subscribe-form">
     <picture>
-      <source media="(max-width:600px)" srcset="assets\images\illustration-sign-up-mobile.svg">
+      <source media="(max-width:375px)" srcset="assets\images\illustration-sign-up-mobile.svg">
+      <source media="(max-width:528px)" srcset="assets\images\illustration-sign-up-tablet.svg">
       <img src="assets/images/illustration-sign-up-desktop.svg">
     </picture>
     <main>
@@ -43,26 +44,25 @@ <h1>Stay updated!</h1>
              And much more fun!
         </p>
       </div>
-      <form>
+      <form onsubmit="send(event)">
          <label for="email-address">Email address</label>
-         <input type="text" id="email-address" name="email-address" placeholder="email@company.com">
-         <input type="button" value="Subscribe to monthly newsletter">
+         <input type="text" id="email-address" name="email-address" placeholder="email@company.com" required>
+         <input type="submit" value="Subscribe to monthly newsletter">
       </form>
     </main>
   </article>
-<!-- 
- Sign-up form end -->
 
   <!-- Success message start -->
-    
-  <!-- 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
-
-  Success message end --> 
+   <article class="subscribe-success">
+       <header>
+          <img src="./assets/images/icon-success.svg" class="success-icon">
+       </header>
+       <h1>Thanks for subscribing!</h1>
+       <p>A confirmation email has been sent to <b></b>. 
+          Please open it and click the button inside to confirm your subscription.</p>
+          <input type="button" value="Dismiss message">
+   </article>
+  <!-- Success message end -->
   <!-- <div class="attribution">
     Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
     Coded by <a href="#">Liron</a>.
diff --git a/newsletter-sign-up-with-success-message-main/subscribe-page-design.css b/newsletter-sign-up-with-success-message-main/subscribe-page-design.css
index 23a8b86..343006d 100644
--- a/newsletter-sign-up-with-success-message-main/subscribe-page-design.css
+++ b/newsletter-sign-up-with-success-message-main/subscribe-page-design.css
@@ -7,6 +7,8 @@ html {
 
 body {
     background-color: hsl(235, 18%, 26%);
+    height: 100%;
+    width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -15,22 +17,23 @@ body {
     font-family: "Roboto", sans-serif;
 }
 
-@media(min-width: 600px) {
-    article {
+@media(min-width: 528px) {
+    .subscribe-form {
         max-height: 400px;
-        max-width: 700px;
+        max-width: 800px;
         flex-direction: row-reverse;
         justify-content: space-between;
         border-radius: 25px;
         padding: 20px;
         padding-left: 30px;
+        gap: 30px;
     }
-    article picture {
+    .subscribe-form picture {
         max-width: 300px;
         display: flex;
         justify-content: end;
     }
-    article main {
+    .subscribe-form main {
         flex-direction: column;
         justify-content: center;
        padding-left: 15px;
@@ -41,62 +44,52 @@ body {
         max-width: 350px;;
     }
 
-    article form {
+    .subscribe-form form {
         margin-top: 20px;
         padding-bottom: 20px;
         max-width: 350px;;
     }
-    article input {
-        height: 40px;
-        margin-top: 10px;
-        border-width: 0.5px;
-    }
 }
 
-@media(max-width: 600px) {
-    article {
+@media(max-width: 528px) {
+    .subscribe-form {
         height: 100%;
         width: 100%;
         flex-direction: column;
         padding-bottom: 15px;
     }
-    article main {
+    .subscribe-form main {
         flex-direction: column;
     }
     .article-content {
         padding: 30px;
     }
-    article form {
+    .subscribe-form form {
+        /* margin-top: 20px; */
         padding-left: 30px;
         padding-right: 30px;
         padding-bottom: 30px;
     }
-    article img {
-        height: 100%;
-        width: 100%;
+    .subscribe-form picture {
         object-fit: cover;
         border-bottom-left-radius: 20px;
         border-bottom-right-radius: 20px;
     }
-    article input {
-        height: 50px;
-        margin-top: 10px;
-        border-width: 0.5px;
-    }
-    article input[type=button] {
+    article input[type=submit] {
         margin-top: 25px;
+        height: 50px;
     }
 
 }
 
-.success-icon {
+.subscribe-form .success-icon {
     float: left; 
     width: 20px; 
     height: 20px; 
     margin-right: 10px;
 }
 
-article {
+.subscribe-form {
     display: flex;
     background-color: hsl(0, 0%, 100%);
     color: hsl(234, 29%, 20%);
@@ -104,36 +97,40 @@ article {
     font-weight: 400;
 }
 
-article main {
+.subscribe-form main {
     display: flex;
 }
 
-article main h1 {
+.subscribe-form main h1 {
     font-weight: 700;
     font-size: 40px;
     line-height: 30px;
     position: relative;
 }
 
-article form {
+.subscribe-form form {
     display: flex;
     flex-direction: column;
 }
 
-article label {
+.subscribe-form label {
     font-weight: 700;
     font-size: 12px;
 }
 
-article input {
+input {
     border-radius: 5px;
     border-width: 0.5px;
     border-color: hsl(0, 0%,58%);
     border-width: 0.5px;
     color: hsl(0, 0%,58%);
+    height: 40px;
+    margin-top: 10px;
+    border-width: 0.5px;
+    outline: 0;
 }
 
-article input[type=button] {
+input[type=submit], input[type=button] {
     background-color: hsl(234, 29%, 20%);
     text-align: center;
     color: white;
@@ -141,6 +138,48 @@ article input[type=button] {
     border: none;
 }
 
-article input[type=button]:hover {
+input[type=text] {
+    color: hsl(234, 29%, 20%);
+}
+
+input[type=submit]:hover, input[type=button]:hover {
     background-color: hsl(4, 100%, 67%);
 }
+
+.subscribe-form.active{
+        display: none;
+}
+
+.subscribe-success{
+    display: none;
+}
+
+.subscribe-success.active {
+    display: flex;
+    flex-direction: column;
+    background-color: hsl(0, 0%, 100%);
+    color: hsl(234, 29%, 20%);
+    font-size: 15px;
+    font-weight: 400;
+    max-width: 340px;
+    height: 350px;
+    border-radius: 7%;
+    padding: 50px;
+}
+
+.subscribe-success.active h1 {
+    font-weight: 800;
+    font-size: 3em;
+    line-height: 1.1;
+
+}
+
+.subscribe-success.active p {
+    margin-top: -3%;
+    color: hsl(234, 29%, 20%);
+}
+
+.subscribe-success.active input[type=button] {
+    height: 50px;
+    margin-top: 20px;
+}

From e490ddd939bb01012a3a03cc568e0af8ef7494a6 Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Thu, 20 Nov 2025 11:33:47 +0200
Subject: [PATCH 10/14] add success window desgin and functionality

---
 .../function.js                               | 24 ++++++----
 .../index.html                                |  7 ++-
 .../subscribe-page-design.css                 | 48 +++++++++++++++----
 3 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/newsletter-sign-up-with-success-message-main/function.js b/newsletter-sign-up-with-success-message-main/function.js
index 2dfa2c9..5dc0f23 100644
--- a/newsletter-sign-up-with-success-message-main/function.js
+++ b/newsletter-sign-up-with-success-message-main/function.js
@@ -1,12 +1,18 @@
 function send(event) {
     event.preventDefault();
-    const form = event.target;
-    const data = new FormData(form);
-    const email = data.get("email-address");
-    console.log(email)
-    const subscribeForm = document.querySelector(".subscribe-form");
-    const subscribeSuccessWindow = document.querySelector(".subscribe-success");
-    subscribeForm.classList.add("active");
-    document.querySelector(".subscribe-success p b").textContent = email;
-    subscribeSuccessWindow.classList.add("active");
+    const emailInput = document.getElementById("email-address");
+    console.log(emailInput.checkValidity())
+    if(!emailInput.checkValidity()) {
+        emailInput.classList.add("invalid");
+        document.getElementById(".inalid-email-label").classList.add("invalid");
+    } else {
+        const form = event.target;
+        const data = new FormData(form);
+        const email = data.get("email-address");
+        const subscribeForm = document.querySelector(".subscribe-form");
+        const subscribeSuccessWindow = document.querySelector(".subscribe-success");
+        subscribeForm.classList.add("active");
+        document.querySelector(".subscribe-success p b").textContent = email;
+        subscribeSuccessWindow.classList.add("active");
+    }
 }
\ No newline at end of file
diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 6b6fee1..878cbfb 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -45,8 +45,11 @@ <h1>Stay updated!</h1>
         </p>
       </div>
       <form onsubmit="send(event)">
-         <label for="email-address">Email address</label>
-         <input type="text" id="email-address" name="email-address" placeholder="email@company.com" required>
+         <div class="labels">
+          <label for="email-address">Email address</label>
+          <label class="invalid-email-label" for="email-address">valid email required</label>
+         </div>
+         <input type="email" id="email-address" name="email-address" placeholder="email@company.com" required>
          <input type="submit" value="Subscribe to monthly newsletter">
       </form>
     </main>
diff --git a/newsletter-sign-up-with-success-message-main/subscribe-page-design.css b/newsletter-sign-up-with-success-message-main/subscribe-page-design.css
index 343006d..a106ed9 100644
--- a/newsletter-sign-up-with-success-message-main/subscribe-page-design.css
+++ b/newsletter-sign-up-with-success-message-main/subscribe-page-design.css
@@ -49,6 +49,15 @@ body {
         padding-bottom: 20px;
         max-width: 350px;;
     }
+    .subscribe-success.active {
+        max-width: 340px;
+        height: 350px;
+        border-radius: 7%;
+        padding: 50px;
+    }
+    .subscribe-success.active input[type=button] {
+        margin-top: 20px;
+    }
 }
 
 @media(max-width: 528px) {
@@ -65,7 +74,6 @@ body {
         padding: 30px;
     }
     .subscribe-form form {
-        /* margin-top: 20px; */
         padding-left: 30px;
         padding-right: 30px;
         padding-bottom: 30px;
@@ -79,7 +87,17 @@ body {
         margin-top: 25px;
         height: 50px;
     }
-
+    .subscribe-success.active {
+       height: 90%;
+       width: 90%;
+       padding: 10%;
+    }
+    .subscribe-success.active header {
+      margin-top: 40%;
+    }
+    .subscribe-success.active input {
+        margin-top: 90%;
+    }
 }
 
 .subscribe-form .success-icon {
@@ -138,10 +156,27 @@ input[type=submit], input[type=button] {
     border: none;
 }
 
-input[type=text] {
+input[type=email] {
     color: hsl(234, 29%, 20%);
 }
 
+input[type=email]:invalid {
+    border-color: hsl(4, 100%, 67%);
+}
+
+.invalid-email-label:invalid {
+    color: hsl(4, 100%, 67%);
+}
+
+.invalid-email-label {
+    color: hsl(0, 0%, 100%);
+}
+
+.labels {
+    display: flex;
+    justify-content: space-between;
+}
+
 input[type=submit]:hover, input[type=button]:hover {
     background-color: hsl(4, 100%, 67%);
 }
@@ -161,10 +196,6 @@ input[type=submit]:hover, input[type=button]:hover {
     color: hsl(234, 29%, 20%);
     font-size: 15px;
     font-weight: 400;
-    max-width: 340px;
-    height: 350px;
-    border-radius: 7%;
-    padding: 50px;
 }
 
 .subscribe-success.active h1 {
@@ -181,5 +212,4 @@ input[type=submit]:hover, input[type=button]:hover {
 
 .subscribe-success.active input[type=button] {
     height: 50px;
-    margin-top: 20px;
-}
+}
\ No newline at end of file

From 820dba40dd2d3d7100586ce73de08a55aabfad7b Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Thu, 20 Nov 2025 17:44:25 +0200
Subject: [PATCH 11/14] add invaild styling

---
 .../function.js                               | 28 +++++++++----------
 .../index.html                                |  8 +++---
 .../subscribe-page-design.css                 | 15 ++++------
 3 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/newsletter-sign-up-with-success-message-main/function.js b/newsletter-sign-up-with-success-message-main/function.js
index 5dc0f23..d1b6461 100644
--- a/newsletter-sign-up-with-success-message-main/function.js
+++ b/newsletter-sign-up-with-success-message-main/function.js
@@ -1,18 +1,18 @@
 function send(event) {
     event.preventDefault();
+    const form = event.target;
+    const data = new FormData(form);
+    const email = data.get("email-address");
+    const subscribeForm = document.querySelector(".subscribe-form");
+    const subscribeSuccessWindow = document.querySelector(".subscribe-success");
+    subscribeForm.classList.add("active");
+    document.querySelector(".subscribe-success p b").textContent = email;
+    subscribeSuccessWindow.classList.add("active");
+}
+
+function invalidEmail() {
     const emailInput = document.getElementById("email-address");
-    console.log(emailInput.checkValidity())
-    if(!emailInput.checkValidity()) {
-        emailInput.classList.add("invalid");
-        document.getElementById(".inalid-email-label").classList.add("invalid");
-    } else {
-        const form = event.target;
-        const data = new FormData(form);
-        const email = data.get("email-address");
-        const subscribeForm = document.querySelector(".subscribe-form");
-        const subscribeSuccessWindow = document.querySelector(".subscribe-success");
-        subscribeForm.classList.add("active");
-        document.querySelector(".subscribe-success p b").textContent = email;
-        subscribeSuccessWindow.classList.add("active");
-    }
+    const invalidEmailLabel = document.getElementsByClassName("invalid-email-label")[0];
+    emailInput.classList.add("invalid");
+    invalidEmailLabel.classList.add("invalid");
 }
\ No newline at end of file
diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 878cbfb..aada4d6 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -32,15 +32,15 @@
         <h1>Stay updated!</h1>
         <p>Join 60,000+ product managers recieving monthly updates on:</p>
         <p>
-            <img src="./assets/images/icon-success.svg" class="success-icon">
+            <img src="./assets/images/icon-list.svg" class="icon-list">
              Product discovery and building what matters
         </p>
         <p>
-            <img src="./assets/images/icon-success.svg" class="success-icon">
+            <img src="./assets/images/icon-list.svg" class="icon-list">
              Measuring to ensure updates are a success
         </p>
         <p>
-            <img src="./assets/images/icon-success.svg" class="success-icon">
+            <img src="./assets/images/icon-list.svg" class="icon-list">
              And much more fun!
         </p>
       </div>
@@ -49,7 +49,7 @@ <h1>Stay updated!</h1>
           <label for="email-address">Email address</label>
           <label class="invalid-email-label" for="email-address">valid email required</label>
          </div>
-         <input type="email" id="email-address" name="email-address" placeholder="email@company.com" required>
+         <input type="email" id="email-address" name="email-address" placeholder="email@company.com" required oninvalid="invalidEmail()">
          <input type="submit" value="Subscribe to monthly newsletter">
       </form>
     </main>
diff --git a/newsletter-sign-up-with-success-message-main/subscribe-page-design.css b/newsletter-sign-up-with-success-message-main/subscribe-page-design.css
index a106ed9..bb5c7fa 100644
--- a/newsletter-sign-up-with-success-message-main/subscribe-page-design.css
+++ b/newsletter-sign-up-with-success-message-main/subscribe-page-design.css
@@ -2,22 +2,19 @@ html {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100%;
+    min-height: 100vh;
 }
 
 body {
     background-color: hsl(235, 18%, 26%);
-    height: 100%;
-    width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-   
     font-family: "Roboto", sans-serif;
 }
 
-@media(min-width: 528px) {
+@media(min-width: 529px) {
     .subscribe-form {
         max-height: 400px;
         max-width: 800px;
@@ -100,10 +97,8 @@ body {
     }
 }
 
-.subscribe-form .success-icon {
+.subscribe-form .icon-list {
     float: left; 
-    width: 20px; 
-    height: 20px; 
     margin-right: 10px;
 }
 
@@ -160,11 +155,11 @@ input[type=email] {
     color: hsl(234, 29%, 20%);
 }
 
-input[type=email]:invalid {
+#email-address.invalid {
     border-color: hsl(4, 100%, 67%);
 }
 
-.invalid-email-label:invalid {
+.invalid-email-label.invalid {
     color: hsl(4, 100%, 67%);
 }
 

From a0dbb18f45619e2057f485f4ba8e8fcf1e78392b Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Sun, 30 Nov 2025 00:08:36 +0200
Subject: [PATCH 12/14] changes

---
 newsletter-sign-up-with-success-message-main/index.html       | 4 ++--
 .../{function.js => script.js}                                | 2 +-
 .../{subscribe-page-design.css => style.css}                  | 0
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename newsletter-sign-up-with-success-message-main/{function.js => script.js} (88%)
 rename newsletter-sign-up-with-success-message-main/{subscribe-page-design.css => style.css} (100%)

diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index aada4d6..4d361a6 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -5,10 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
 
   <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
-  <link type="text/css" href="./subscribe-page-design.css" rel="stylesheet">
+  <link type="text/css" href="./style.css" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <script src="./function.js" defer></script>
+  <script src="./script.js" defer></script>
   <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
   
   <title>Frontend Mentor | Newsletter sign-up form with success message</title>
diff --git a/newsletter-sign-up-with-success-message-main/function.js b/newsletter-sign-up-with-success-message-main/script.js
similarity index 88%
rename from newsletter-sign-up-with-success-message-main/function.js
rename to newsletter-sign-up-with-success-message-main/script.js
index d1b6461..04bf1c6 100644
--- a/newsletter-sign-up-with-success-message-main/function.js
+++ b/newsletter-sign-up-with-success-message-main/script.js
@@ -12,7 +12,7 @@ function send(event) {
 
 function invalidEmail() {
     const emailInput = document.getElementById("email-address");
-    const invalidEmailLabel = document.getElementsByClassName("invalid-email-label")[0];
+    const invalidEmailLabel = document.querySelector(".invalid-email-label");
     emailInput.classList.add("invalid");
     invalidEmailLabel.classList.add("invalid");
 }
\ No newline at end of file
diff --git a/newsletter-sign-up-with-success-message-main/subscribe-page-design.css b/newsletter-sign-up-with-success-message-main/style.css
similarity index 100%
rename from newsletter-sign-up-with-success-message-main/subscribe-page-design.css
rename to newsletter-sign-up-with-success-message-main/style.css

From da6cf886af332c74968d24d64ea8c902bafdd61e Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Mon, 1 Dec 2025 01:11:27 +0200
Subject: [PATCH 13/14] change px to rem

---
 .../style.css                                 | 127 +++++++++---------
 1 file changed, 61 insertions(+), 66 deletions(-)

diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css
index bb5c7fa..cd3526b 100644
--- a/newsletter-sign-up-with-success-message-main/style.css
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -1,29 +1,37 @@
-html {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
+@font-face {
+    font-family:Roboto ;
+    src: url(./assets/fonts/Roboto-Regular.ttf);
 }
 
-body {
-    background-color: hsl(235, 18%, 26%);
+:root {
+    --primary-bg-color: hsl(235, 18%, 26%);
+    --primary-color: hsl(234, 29%, 20%);
+    --hover-button-color: hsl(4, 100%, 67%);
+    --form-bg-color: hsl(0, 0%, 100%);
+    --form-input-color: hsl(0, 0%,58%);
+}
+
+html, body {
+    background-color: var(--primary-bg-color);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     font-family: "Roboto", sans-serif;
+    min-height: 100vh;
+    height: 100%;
 }
 
 @media(min-width: 529px) {
     .subscribe-form {
-        max-height: 400px;
-        max-width: 800px;
+        max-height: 25rem;
+        max-width: 50rem;
         flex-direction: row-reverse;
         justify-content: space-between;
-        border-radius: 25px;
-        padding: 20px;
-        padding-left: 30px;
-        gap: 30px;
+        border-radius: 1.5rem;
+        padding: 1.25rem;
+        padding-left: 2rem;
+        gap: 2rem;
     }
     .subscribe-form picture {
         max-width: 300px;
@@ -33,8 +41,8 @@ body {
     .subscribe-form main {
         flex-direction: column;
         justify-content: center;
-       padding-left: 15px;
-       padding-top: 15px;
+       padding-left: 1rem;
+       padding-top: 1rem;
        max-height: 370px;
     }
     .article-content {
@@ -42,72 +50,62 @@ body {
     }
 
     .subscribe-form form {
-        margin-top: 20px;
-        padding-bottom: 20px;
+        margin-top: 1rem;
+        padding-bottom: 1rem;
         max-width: 350px;;
     }
     .subscribe-success.active {
         max-width: 340px;
         height: 350px;
-        border-radius: 7%;
-        padding: 50px;
-    }
-    .subscribe-success.active input[type=button] {
-        margin-top: 20px;
+        border-radius: 1.5rem;
+        padding: 3rem;
     }
 }
 
 @media(max-width: 528px) {
     .subscribe-form {
         height: 100%;
-        width: 100%;
         flex-direction: column;
-        padding-bottom: 15px;
+        padding-bottom: 1rem;
     }
     .subscribe-form main {
         flex-direction: column;
     }
     .article-content {
-        padding: 30px;
+        padding: 2rem;
     }
     .subscribe-form form {
-        padding-left: 30px;
-        padding-right: 30px;
-        padding-bottom: 30px;
+        padding-left: 2rem;
+        padding-right: 2rem;
+        padding-bottom: 2rem;
     }
     .subscribe-form picture {
         object-fit: cover;
-        border-bottom-left-radius: 20px;
-        border-bottom-right-radius: 20px;
+        border-bottom-left-radius: 1rem;
+        border-bottom-right-radius: 1rem;
     }
     article input[type=submit] {
-        margin-top: 25px;
-        height: 50px;
+        margin-top: 1.5rem;
     }
     .subscribe-success.active {
        height: 90%;
        width: 90%;
        padding: 10%;
     }
-    .subscribe-success.active header {
-      margin-top: 40%;
-    }
-    .subscribe-success.active input {
-        margin-top: 90%;
-    }
 }
 
 .subscribe-form .icon-list {
     float: left; 
-    margin-right: 10px;
+    margin-right: 0.5rem;
 }
 
 .subscribe-form {
     display: flex;
-    background-color: hsl(0, 0%, 100%);
-    color: hsl(234, 29%, 20%);
-    font-size: 15px;
+    background-color: var(--form-bg-color);
+    color: var(--primary-color);
+    font-size: 1rem;
     font-weight: 400;
+    margin: 0 auto;
 }
 
 .subscribe-form main {
@@ -116,8 +114,8 @@ body {
 
 .subscribe-form main h1 {
     font-weight: 700;
-    font-size: 40px;
-    line-height: 30px;
+    font-size: 2.5rem;
+    line-height: 2rem;
     position: relative;
 }
 
@@ -128,43 +126,41 @@ body {
 
 .subscribe-form label {
     font-weight: 700;
-    font-size: 12px;
+    font-size: 0.75rem;
 }
 
 input {
-    border-radius: 5px;
-    border-width: 0.5px;
-    border-color: hsl(0, 0%,58%);
-    border-width: 0.5px;
-    color: hsl(0, 0%,58%);
-    height: 40px;
-    margin-top: 10px;
-    border-width: 0.5px;
+    border-radius: 0.3rem;
+    border-width: 0.05rem;
+    border-color: var(--form-input-color);
+    color: var(--form-input-color);
+    margin-top: 0.5rem;
     outline: 0;
+    height: 2rem
 }
 
 input[type=submit], input[type=button] {
-    background-color: hsl(234, 29%, 20%);
+    background-color: var(--primary-color);
     text-align: center;
-    color: white;
+    color: var(--form-bg-color);
     font-weight: 700;
     border: none;
 }
 
 input[type=email] {
-    color: hsl(234, 29%, 20%);
+    color: var(--primary-color);
 }
 
 #email-address.invalid {
-    border-color: hsl(4, 100%, 67%);
+    border-color: var(--hover-button-color);
 }
 
 .invalid-email-label.invalid {
-    color: hsl(4, 100%, 67%);
+    color: var(--hover-button-color);
 }
 
 .invalid-email-label {
-    color: hsl(0, 0%, 100%);
+    color: var(--form-bg-color);;
 }
 
 .labels {
@@ -173,31 +169,29 @@ input[type=email] {
 }
 
 input[type=submit]:hover, input[type=button]:hover {
-    background-color: hsl(4, 100%, 67%);
+    background-color: var(--hover-button-color);
 }
 
 .subscribe-form.active{
         display: none;
 }
 
-.subscribe-success{
+.subscribe-success {
     display: none;
 }
 
 .subscribe-success.active {
     display: flex;
     flex-direction: column;
-    background-color: hsl(0, 0%, 100%);
-    color: hsl(234, 29%, 20%);
-    font-size: 15px;
+    background-color: var(--form-bg-color);
+    color: var(--primary-color);
+    font-size: 1rem;
     font-weight: 400;
 }
 
 .subscribe-success.active h1 {
     font-weight: 800;
     font-size: 3em;
-    line-height: 1.1;
-
 }
 
 .subscribe-success.active p {
@@ -207,4 +201,5 @@ input[type=submit]:hover, input[type=button]:hover {
 
 .subscribe-success.active input[type=button] {
     height: 50px;
+    margin-top: auto;
 }
\ No newline at end of file

From e889adf10c238ac23b614d30b3635be8524a611a Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Mon, 1 Dec 2025 01:11:51 +0200
Subject: [PATCH 14/14] import fonts in css file instead

---
 newsletter-sign-up-with-success-message-main/index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 4d361a6..9e719dd 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -9,7 +9,6 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <script src="./script.js" defer></script>
-  <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
   
   <title>Frontend Mentor | Newsletter sign-up form with success message</title>