This is a solution to the Base Apparel coming soon page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • What I learned
• Author

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Receive an error message when the form is submitted if:
  • The input field is empty
  • The email address is not formatted correctly

• Solution URL: Solution
• Live Site URL: Live site

2022.03.06

• image
• content
• email input

Started: 막 뒤져 보니까 이런 경우에는 opacity 아니면 display로 하는 것 같다. 갠적으로 opacity가 더 좋은 것 같기도 하다... ㅎㅎ display가 flex거나 아니면 공통이 아니라서 다르면 좀 귀찮게 두 번 써야 하는 번거로움 때문에 opacity가 딱 한 번만 써주면 되니 편해 보인다. 또한 transition으로 효과까지 줄 수 있으니 굳. 그나 저나 input 형태 첨 써봐서 공부 좀 해야 겠다. 반응형은 늘 그랬듯 grid로. 아 그리고 이미지를 너무 백그라운드에만 넣은 것 같아서 html에 img 태그로 넣어주려고 한다. 주석을 덜쓸까...? 생각도 들고...

Completed: opacity도 나름의 단점이 있었네... 이번에도 정돈은 잘 되지 않았다. 오히려 제일 안 써본 js를 제일 깔끔하게 정리해뒀다 ㅋㅋ... 코드가 적어서 그런듯. 주석 달면 더 지저분해 보여서 그냥 없앴는데 가독성이 있는지는 잘... 모르겠다... ㅋㅋㅎㅎ... 아 아니면 위치만 해둘까? 이름만 해두니까 훨씬 깔끔하다~! 굳. 이것저것 하다보니 찾아보는 재미가 있었다. 나중에 새로운 거 배우면 업뎃 할 예정. 생각해보니 css에서만 좀 막 했을 뿐이지만... 앵간 정돈 된 거 같지 않나...? ㅋㅋㅎㅎ 아직은 경험이 없어서 잘 모르겠다.

<form>: The Form element
The <form> HTML element represents a document section containing interactive controls for submitting information.

<input>: The input element

• Frontend Mentor - @2001Kaye
• GitHub - @2001Kaye