From 6f23333aac4920dcf80619b5adc2bfa518b91dff Mon Sep 17 00:00:00 2001 From: daniel Aminov Date: Sun, 16 Nov 2025 21:13:25 +0200 Subject: [PATCH 1/3] indeactive commit message --- 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..950a9fa 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 @@
Challenge by Frontend Mentor. - Coded by Your Name Here. + Coded by daniel.
\ No newline at end of file From 2b667b0651fdca51f92c51cfb017559829b21727 Mon Sep 17 00:00:00 2001 From: daniel Aminov Date: Wed, 19 Nov 2025 13:22:28 +0200 Subject: [PATCH 2/3] done --- file.txt | 42 +++++++ .../constants.js | 3 + .../index-styles.css | 109 +++++++++++++++++ .../index.html | 114 +++++++++++------- .../styles.css | 51 ++++++++ .../success-styles.css | 60 +++++++++ .../successPage.html | 46 +++++++ 7 files changed, 380 insertions(+), 45 deletions(-) create mode 100644 file.txt create mode 100644 newsletter-sign-up-with-success-message-main/constants.js create mode 100644 newsletter-sign-up-with-success-message-main/index-styles.css create mode 100644 newsletter-sign-up-with-success-message-main/styles.css create mode 100644 newsletter-sign-up-with-success-message-main/success-styles.css create mode 100644 newsletter-sign-up-with-success-message-main/successPage.html diff --git a/file.txt b/file.txt new file mode 100644 index 0000000..751144b --- /dev/null +++ b/file.txt @@ -0,0 +1,42 @@ +@media (max-width: 375px) { + .container { + display: flex; + justify-content: space-around; + /* Stack the items vertically, with the image on top */ + flex-direction: column-reverse; + align-items: center; + min-width: fit-content; + height: fit-content; + padding: 1em; + border-radius: 0; + } + .container > * { + flex-grow: 1; + } + + .text-side { + /* Use vw for padding to make it proportional to the screen width */ + padding: 1vw; + justify-content: flex-start; /* Align content to the top */ + } + + h1 { + /* Font size scales with the screen width */ + font-size: 10vw; + } + + .img-side { + background-image: url("./assets/images/illustration-sign-up-mobile.svg"); + border-radius: 0 0 20px 20px; + } + + .form { + margin-top: 2rem; + } + + input, + button { + /* Use vw for padding inside the button and input */ + padding: 4vw; + } +} \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/constants.js b/newsletter-sign-up-with-success-message-main/constants.js new file mode 100644 index 0000000..843d9cc --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/constants.js @@ -0,0 +1,3 @@ +const AppConstants = { + EMAIL_PARAM_KEY: "email", +}; diff --git a/newsletter-sign-up-with-success-message-main/index-styles.css b/newsletter-sign-up-with-success-message-main/index-styles.css new file mode 100644 index 0000000..3dc0883 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/index-styles.css @@ -0,0 +1,109 @@ +@media screen and (min-width: 800px) { + .container { + width: 850px; + height: 590px; + padding: 2em; + } + .img-side { + background-image: url("./assets/images/illustration-sign-up-desktop.svg"); + } + button { + height: 25%; + } +} +@media screen and (max-width: 799px) { + .container { + flex-direction: column-reverse; + width: 320px; + height: 110vh; + padding: 0.4em; + margin: 0; + } + .img-side { + max-height: 35%; + background-image: url("./assets/images/illustration-sign-up-mobile.svg"); + } + button, + input { + height: 45%; + } +} +.img-side { + border-radius: 10px; +} +.container > * { + flex: 1; +} +.container { + margin-top: 1em; + justify-self: center; + + background-color: white; + + border-radius: 20px; + display: flex; +} +.text-side { + display: flex; + flex-direction: column; + justify-content: space-evenly; + padding: 4em 0.1em 1.5em 0.1em; + gap: 1em; + margin: 0.5em 1.5em 0.5em 1.5em; +} +.text-side > * { + flex-grow: 1; +} + +ul { + list-style: none; + display: flex; + flex-direction: column; + justify-content: space-around; + height: 5%; + padding: 0; + margin: 0; +} +li { + gap: 0.4em; + flex: 1; + display: flex; + justify-content: flex-start; + align-items: center; +} +h1 { + align-self: center; + max-height: fit-content; + padding: 0; + margin: 0; +} +.check-icon { + justify-self: flex-start; + width: 5%; + height: 40%; +} +p { + margin: 0; + max-height: fit-content; +} +button { + width: 100%; + + border-radius: 10px; + border: none; + font-weight: bold; + color: white; + box-shadow: 2px 2px 2px hsla(5, 9%, 27%, 0.695); +} + +input { + width: 98%; + height: 25%; + border-radius: 6px; +} +.form { + margin-top: 1em; + display: flex; + flex-direction: column; + gap: 0.5em; +} diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 950a9fa..98fbf04 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -1,52 +1,76 @@ - - - + + + + + - - - Frontend Mentor | Newsletter sign-up form with success message + - - - - + + Frontend Mentor | Newsletter sign-up form with success message + + + + + + +
+
+
+

stay updated!

+

join 60000+ product managers reciving monthly updates on:

+
    +
  • + product discovery and bulding what matters +
    • +
  • + messuring to ensure updates are a sucsses +
    • +
  • + and + much more +
    • +
+
+ + + +
+
+
+
+
- +
all rights belong to aminov.inc®
+ + + diff --git a/newsletter-sign-up-with-success-message-main/styles.css b/newsletter-sign-up-with-success-message-main/styles.css new file mode 100644 index 0000000..226a839 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/styles.css @@ -0,0 +1,51 @@ +html { + height: 100vh; + width: 96vw; +} +footer { + background-color: rgb(155, 150, 150); + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; +} +body { + height: fit-content; + min-height: 100%; + min-width: 100%; + box-sizing: border-box; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 97% 3%; +} +main { + height: 100%; + width: 100%; + background-color: rgb(230, 227, 227); +} + +div { + margin: 0; + padding: 0; +} + +label { + font-weight: bold; +} + +button { + background-color: hsl(224, 64%, 21%); + color: white; +} + +button:hover { + cursor: pointer; + box-shadow: 4px 4px 4px hsla(5, 9%, 27%, 0.695); + background-image: linear-gradient( + to right, + hsl(354, 100%, 67%), + hsl(4, 100%, 67%), + hsl(15, 100%, 67%) + ); +} diff --git a/newsletter-sign-up-with-success-message-main/success-styles.css b/newsletter-sign-up-with-success-message-main/success-styles.css new file mode 100644 index 0000000..0683ccd --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/success-styles.css @@ -0,0 +1,60 @@ +@media screen and (min-width: 800px) { + article { + width: 300px; + height: 340px; + padding: 2.5em; + } + button { + max-height: 20%; + } +} +@media screen and (max-width: 799px) { + article { + width: 70vw; + flex-direction: column-reverse; + height: 100%; + padding: 1.5em; + justify-content: flex-start; + margin: 0; + } + button { + margin-top: 40vh; + max-height: 7%; + } +} + +article > * { + flex: 1; +} +article { + gap: 2em; + justify-self: center; + display: flex; + flex-direction: column; + border-radius: 30px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + background-color: rgb(255, 255, 255); + margin-top: 4rem; + max-height: fit-content; +} +button { + border: none; + border-radius: 10px; + padding: 0.75rem 1.5rem; + cursor: pointer; + font-size: 1rem; + width: 100%; +} +img { + width: 15%; + max-height: fit-content; +} +h1 { + margin: 0; + max-height: fit-content; + font-size: 45px; +} +p { + max-height: fit-content; + margin: 0; +} diff --git a/newsletter-sign-up-with-success-message-main/successPage.html b/newsletter-sign-up-with-success-message-main/successPage.html new file mode 100644 index 0000000..16be6cc --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/successPage.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + Frontend Mentor | Newsletter sign-up form with success message + + + +
+
+ +

thanks for subscribing!

+

+ +
+
+ +
all rights belong to aminov.inc®
+ + + From 2ee50528b78d8e19eff053b96cd58ac1a26b18b9 Mon Sep 17 00:00:00 2001 From: daniel Aminov Date: Wed, 19 Nov 2025 13:30:15 +0200 Subject: [PATCH 3/3] removed unused filesand folders --- file.txt | 42 ------------------------------------------ 1 file changed, 42 deletions(-) delete mode 100644 file.txt diff --git a/file.txt b/file.txt deleted file mode 100644 index 751144b..0000000 --- a/file.txt +++ /dev/null @@ -1,42 +0,0 @@ -@media (max-width: 375px) { - .container { - display: flex; - justify-content: space-around; - /* Stack the items vertically, with the image on top */ - flex-direction: column-reverse; - align-items: center; - min-width: fit-content; - height: fit-content; - padding: 1em; - border-radius: 0; - } - .container > * { - flex-grow: 1; - } - - .text-side { - /* Use vw for padding to make it proportional to the screen width */ - padding: 1vw; - justify-content: flex-start; /* Align content to the top */ - } - - h1 { - /* Font size scales with the screen width */ - font-size: 10vw; - } - - .img-side { - background-image: url("./assets/images/illustration-sign-up-mobile.svg"); - border-radius: 0 0 20px 20px; - } - - .form { - margin-top: 2rem; - } - - input, - button { - /* Use vw for padding inside the button and input */ - padding: 4vw; - } -} \ No newline at end of file