Submitted about 2 months ago

Solution #9. Newsletter form | React + SCSS

#react#sass/scss#webpack

Danya•190

@elClassico-eng

Preview site View code

This is a solution for...Newsletter sign-up form with success message

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of myself for being able to write this little app on my own!😊

This time I used npx create-react-app, next time I would like to use Vite.

I started doing the next project before this and it will just be layout, but after that I will already use Vite + React + JS (or TS) + Tailwind (or SCSS)👨‍💻

What challenges did you encounter, and how did you overcome them?

The main difficulties arose in working with react-form, I had never used this library and it was difficult to immediately understand how and what works

What specific areas of your project would you like help with?

I would like to receive feedback👨‍💻

Community feedback

Marzia Jalili•3,920

@MarziaJaliliPosted about 2 months ago

REAL great job, man!

Some adjestments:

For a smoother color change we usually use the transition property, but unfortunately it doesn't work with non-solid colors like linear-gradient.

Therefore, we have to use the ::before or ::after pseudo elements.

Take the code below as an example for html:

<button>
  <!-- to prevent the text of being hidden we have to wrapp it inside an element -->
  <div>Subscribe to monthly newsletter</div>
</button>

Then, apply this in css:

button {
  position: relative;
  background: black; /* or the code of that dark blue color */
   
  /* ensure that the text doesn't get hidden */
  & > * {
    position: relative;
  }
}

button::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  background: linear-gradient(codes of the two or more colores);
  /* we will only show it on hover so now it will be hidden... */
  opacity: 0;
  transition: opacity .4s;
}

button:hover::before {
  /* make the pesudo element appear */
  opacity: 1;
}

This definitely works!

set the code below in the body selector to center the card:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Make sure that the card is the only child element of the <body>.

If not wrapp everything nested inside <body> with the <main> element. It will look something like this:

<body>
  <main>
    <!-- every element nested inside -->
  </main>
</body>

Keep up the grind🫡

Marked as helpful

Danya•190

@elClassico-engPosted about 2 months ago

@MarziaJalili Thank you for your feedback!😉

I will accept all your comments and make amendments to the project!

EnochofGod•60
@EnochofGodPosted about 2 months ago
Nice work. keep coding going, practice makes permanent
0
Danya•190
@elClassico-engPosted about 2 months ago
@EnochofGod

Thanks a lot!🙂
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord