diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..99a452e Binary files /dev/null and b/.DS_Store differ 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 @@ + - - - - - Frontend Mentor | Newsletter sign-up form with success message - - - + + Asher Pe'er + + - - - - - 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 - - - - - 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. +
+
+

Stay update!

+

+ Join 60,000+ product managers receiving monthly updates on: +

+ + + + + + + + +
+ +
+ +
+
- Dismiss message - - -
- Challenge by Frontend Mentor. - Coded by Your Name Here. -
+ + \ No newline at end of file