I am wondering if there is a more efficient way to program the buttons. I gave them a general class but then had to use IDs when styling the individual colours and hover behaviours. I feel like there would be an easier way for this.
Your solution looks pretty good. For button the better solution would be to use the following for hover
.learn-more-button:hover {
background-color: transparent;
color: var(--very-light-gray);
}
For this to work you need to add a 1px solid white border on the button's class by default so that you won't have to add it separately for hover. Since the border and button's background would have the same color it won't be visible in button's normal state.
Hi there, I would like some feedback on the code I used to handle the responsiveness and the behaviour of the image and the card on desktop. It feels like I over complicated such a simple component. Any other feedback would be bonus. Cheers
Props for trying to be as close to the design as possible. There are few mistakes I see here:
Any mistakes i've made ??
Looks good! For mobile view you can add some margin between the button and the paragraph. Although the style guide says that mobile is 375px, you have to take care of transition between desktop and mobile views. You can increase the min-width for mobile to make use of the mobile design for tablet views. Other than that everything seems good.
