From 3bddbc137ce652ffa9c045af23c5d0880050cc60 Mon Sep 17 00:00:00 2001
From: Asher  Pe'er <asher.colman21@gmail.com>
Date: Sat, 22 Nov 2025 16:36:26 +0200
Subject: [PATCH] first update

---
 .DS_Store                                     | Bin 0 -> 8196 bytes
 .../email.js                                  |  26 ++++
 .../index.css                                 | 118 ++++++++++++++++++
 .../index.html                                |  70 +++++------
 4 files changed, 176 insertions(+), 38 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 newsletter-sign-up-with-success-message-main/email.js
 create mode 100644 newsletter-sign-up-with-success-message-main/index.css

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..99a452e92dff331419275bbb220cc241e0e5da34
GIT binary patch
literal 8196
zcmeHMPfrs;6n|4twj#1Xkw4L7V?CGvib5pB7;3>NF$O{jf`Db)4rOIK)9h}kKuCJk
zn;*ar;3x3lg`*ea&71Kf=+%?H`BM;qiwTCrna#Z4o0<3K?fzzWXI~2dBwZ=o1n33;
z3#&l88O0GrjEj1x#B@(1B0+xuA1Fk4PzVlLn-0T(VZbn87%&VN22KM5xMz!E9kcJN
zQ6milhJpW*0r7rtunJ6RtSOYQ4iqv4Kolu}EU051AblK-DUCIS(iP`a*#pt8M5h=;
zx#PGa%n?%>YYLS+5akX;M<zN$Au>ApIno?RN}-X40mHyy2E^mj4-7N*Duf5}_W^8s
zP{gqTs6ZKI726T4p%!9K9uJCIi0zWrT(qaM?V>H4^m#t#^Bl&&$1?T_@%m3$uI`>>
z+*~y*>$vZ7W#0><!NJcY*3fw7Y?IYwHCxM>HD1j`Zd3`=Zm=j?vz+_6y6)!YJX+1#
ziE+*%*JCu04qkzx$<h;#6?iqxE36Po-;5ft;#NFscWrME4UhCYqa!>0&i3f7!G33W
z==RP|-0Do;xHFSo_e+ew#LLG*^xF(tRC`apLhZzs#mjGKddSB*Jzs6RPEh<@^ZAww
zt#(^`M_Zz;v$OMJS9ecu@1?BWk#qCw#Xwy6IQMyw_A7L;7<h$D+0A>bI3Lj$QO4V%
zS-brY(-~TLw%;|oSw@@0eutdyK|m>!^G&U;hBTW0O<%~`tzkakzCX=FFY-8BSPF63
zCL>y!WUCw_Zs3wlmBmmvM}rXYkk9;r8w4&Z()8xC@8+mK#nL>Acu81_+47uC2UN^7
z@1ZWPB{}w8ElV=>sIFX7iVaDn;74?#u4yF6-IbcuXBlTS9#5vG^^gU9a1S2C9IV3@
zyoNXM7T&`L_yXVH2WcWb<O=B{!{ja*BM-?Wc}ntRjd<j_@{iSTn#+1V4J1V6#BQ36
zOu&53iWmdq%TquhcVR@c{~ufn(=rU4dIlQQ8Fq{O|Nim6|DXEnFehjjFbw=X1Eg^x
zGm%DrxvL*BkJ#lMtSeYW5q33&(gnqV4*_iN{b7i@gQmhKrLm?Ed$5=v0wfJa7zX|+
G1HS;!trc4U

literal 0
HcmV?d00001

diff --git a/newsletter-sign-up-with-success-message-main/email.js b/newsletter-sign-up-with-success-message-main/email.js
new file mode 100644
index 0000000..958db0d
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/email.js
@@ -0,0 +1,26 @@
+const emailInput = document.getElementById("email");
+
+emailInput.addEventListener("input", function () {
+    const email = emailInput.value;
+    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (email === "") {
+        emailInput.style.borderColor = "#ccc";
+        emailInput.style.backgroundColor = "white";
+        return;
+    }
+
+    if (pattern.test(email)) {
+        emailInput.style.borderColor = "green";
+        emailInput.style.backgroundColor = "#e6ffe6"; 
+    } else {
+        emailInput.style.borderColor = "red";
+        emailInput.style.backgroundColor = "#ffe6e6"; 
+    }
+});
+
+emailInput.addEventListener("blur", function () {
+    if (emailInput.value.trim() === "") {
+        emailInput.style.borderColor = "#ccc";
+        emailInput.style.backgroundColor = "white";
+    }
+});
\ No newline at end of file
diff --git a/newsletter-sign-up-with-success-message-main/index.css b/newsletter-sign-up-with-success-message-main/index.css
new file mode 100644
index 0000000..09f1b9e
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/index.css
@@ -0,0 +1,118 @@
+@font-face {
+    font-family:Roboto ;
+    src: url(./assets/fonts/Roboto-Regular.ttf);
+}
+
+
+
+
+body {
+    background-color: hsl(234, 29%, 20%);
+    height: 100vh;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;   
+    font-family: 'Roboto';
+}
+
+
+.container {
+    display: flex;
+    background: white;
+    width: 843px;
+    height: 592px;
+    border-radius: 25px;
+    overflow: hidden;
+    box-shadow: 0 10px 35px rgba(0,0,0,0.25);
+}
+
+#left-side {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 50px;
+    width: 350px;
+    margin-left:15px;
+
+}
+
+#left-side h1 {
+    font-size: 50px;
+    margin-bottom: 20px;
+}
+
+#left-side p {
+    font-size: 14px;
+    margin-bottom: 20px;
+    line-height:1.45;
+}
+#left-side ul {
+    padding: 0;
+    margin: 0 0 30px 0;
+}
+
+#left-side li {
+    list-style: none;
+    display: flex;       
+    align-items: center;    
+    gap: 12px;                
+    margin-bottom: 12px;
+    font-size: 15px;
+}
+
+#left-side img {
+    width: 20px;
+}
+
+label {
+    font-size: 12px;
+    font-weight: bold;
+    margin-bottom: 8px;
+}
+
+input {
+    padding: 12px;
+    border-radius: 8px;
+    border: 1px solid #ccc;
+    width: 95%;
+    font-size: 14px;
+    margin-bottom: 15px;
+    transition: 0.3s ease;
+}
+
+button {
+    background-color: hsl(234, 29%, 20%);
+    color: white;
+    padding: 14px;
+    border-radius: 8px;
+    border: none;
+    font-size: 14px;
+    cursor: pointer;
+    width: 103%;
+}
+
+button:hover {
+    background-color: hsl(4, 100%, 67%);
+}
+
+
+#right-side {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #ff4664, #ff8f40);
+    width: 390px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    margin-right: 20px;
+    border-radius: 15px;
+}
+
+#right-side img {
+    width: 100%;
+    height: auto;
+    
+}
+
+
diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 8e7329b..9c06ed8 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -1,52 +1,46 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <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="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
-  
-  <title>Frontend Mentor | Newsletter sign-up form with success message</title>
-
-  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
-  <style>
-    .attribution { font-size: 11px; text-align: center; }
-    .attribution a { color: hsl(228, 45%, 44%); }
-  </style>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Asher Pe'er</title>
+  <link rel="stylesheet" href="index.css">
+  <link rel="font" href="https://fonts.google.com/specimen/Roboto">
 </head>
-<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
 
-  Subscribe to monthly newsletter
 
-  <!-- Sign-up form end -->
-
-  <!-- Success message start -->
-
-  Thanks for subscribing!
+<body>
 
-  A confirmation email has been sent to ash@loremcompany.com. 
-  Please open it and click the button inside to confirm your subscription.
+  <div class="container">
+    <div id="left-side">
+      <h1>Stay update!</h1>
+      <p>
+        Join 60,000+ product managers receiving monthly updates on:
+      </p>
+      
+      <ul>
+        <li><img src="assets/images/icon-list.svg" alt="">Product discovery and building what matters</li>
+        <li><img src="assets/images/icon-list.svg" alt="">Measuring to ensure updates are a success</li>
+        <li> <img src="assets/images/icon-list.svg" alt="">And much more!</li>
+      </ul>
+     
+      <label for="email">Email address</label>
+      <input type="email" id="email" placeholder="email@company.com">
+
+      <button type="submit">Subscribe to monthly newsletter</button>
+      
+    </div>
+
+    <div id="right-side">
+      <img src="assets/images/illustration-sign-up-desktop.svg" alt="">
+    </div>
+  </div>
 
-  Dismiss message
 
-  <!-- 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="#">Your Name Here</a>.
-  </div>
+  <script src="email.js"></script>
 </body>
+
 </html>
\ No newline at end of file