You're off to a good start! Nice attempt on the this challenge. I did mine just a couple of days ago and I find it quite a challenge as well.
I reviewed the design images and it doesn't appear to require those. They appear to be just plain colored borders. However if you are curious border gradient requires several properties added in CSS to make that work, not just one.
input {
border: 1px solid rgba(...);
border-radius: var(--br); // this stopped working when border-image was used on hover
}
input:focus-visible {
border-image-source: linear-gradient(20deg,hsl(249,99%,64%),hsl(278,94%,30%));
border-image-slice: 1; // need to have some value
border-image-repeat: round;
}
I noticed that border-radius stopped working when you used border-image, so I appears they are not compatible. Also, at 1px border the gradient on focus isn't too noticeable unless you increase the px size to maybe 15px so you can actually see the gradient colors. So I am convinced this is just a solid border in one color. On checking via inspect element, the border gradient has been rendered all right - it's just not obvious because it's just 1px - so need to stress yourself out here!
I noticed that the card doesn't update in real-time - it is only updated after submission, but as per listed in the requirements:
- Fill in the form and see the card details update in real-time
Which meant that the card details update as you type. Probably best add event listener "input" for every input and write a function to update the card details from there.
Other notable things to improve -
- It is cleaner to use the bg-front-card.png as a CSS background for the card, so you use lesser HTML code. Same is true with the backside of the card.
style.css
.card-front {
background: url('/images/bg-front-card/png') no-repeat;
}
index.html
<div class="card card-front">
// remove <img >
<span>...</span>
</div>
...
