Submitted over 2 years ago

Interactive card details form solution

sass/scss

yishak abrham•2,150

@yishak621

A solution to the Interactive card details form challenge

Preview Code

Solution retrospective

the process to the card design seems seasy at first but challenging in the process. questions

1-- the layout design in the atm card pictures adding overlay div block element was pretty challenging specially the responsiveness part...so what type of method is optimal to use for these type of things?

2-- the input type='number' can not be limited the number of characters by maxlength and max attribute since it is not work for number type so i ended up using JS function for maxlength....so is there any other way?

3- i use border-image property for a border with a linear gradient*when the input focused ...but i can't apply the border-radius since it can't go along with border image so how to fix these? beside these the input validation process was fun and at the same time pretty challenging i created several functions to check for each of them according to there input types and design. i use moment js library to validate date and month also add my function .

Code

Please log in to post a comment

Community feedback

Catalin Banici•260

@CatalinBanici

Posted over 2 years ago

Use this for the input border on focus:

input:focus {
  outline: none;
  padding: 15px;
  border: double 1px transparent;
  border-radius: 7px;
  background-image: linear-gradient(white, white),
    linear-gradient(to right, hsl(249, 99%, 64%), hsl(278, 94%, 30%));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Not sure what it does or if everything is used in there.. but it works... for me at least. Try it

Marked as helpful

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