improving
What challenges did you encounter, and how did you overcome them?getting the quote img set up
What specific areas of your project would you like help with?Any advice is great.
Hi Chris!
Your solution is looking alright. I do have a few suggestions, though:
When settin the font size, it's preferable to use rem instead of px. This ensures that the font size responds to user browser preferences. The default browser font-size is 16px, you can it's rem size by calculating 13 / 16, which is 0.8125rem.
Instead of including the quote img in you html file, you can include it in your CSS file like this:
background-color: var(--Moderate-violet);
background-image: url(images/bg-pattern-quotation.svg);
background-repeat: no-repeat;
background-position: 81.5% 0;
There are a few other details that may not be worth mentioning. Overall it's looking alright.
Keep up the good work!
I am proud of the cleanliness of my code. If I were to do this project again I would definitely improve the design of the cards.
What challenges did you encounter, and how did you overcome them?It was a challenge to create the desktop layout of the cards but eventually I found a way.
What specific areas of your project would you like help with?I would like help with another layout grid solutions to learn from them.
Hi DesignJunkie!
Your solution is looking good. There's just a problem with your icons as they're not loading properly. I belive the solution to this is to change the path of the images like this: 'src="./images/icon-calculator.svg"' to src="./icon-calculator.svg"
Other than that, I think it's just the color of the 'p class="description"' and p class="card-description" that need's to be a lighter colour.
Keep up the good work!
I'm most proud of how I take the challenge on the responsiveness of the card. The thing I would do next time is to limit my media query. I think the responsiveness of this project can be done even though there is no media queries. I'm not sure hehe
Your feedback is highly appreciated 😊😊😊
What challenges did you encounter, and how did you overcome them?The challenge that I encountered from this challenge are the sizing of the max-inline-size of the card and the spacing when the card is in a desktop view by doing a trial and error of the values I was able to overcome this challenge.
I'm not sure if it's efficient or a good thing to do a trial and error on a value if I'm working on a real-world project. Do you think I should know the calculation of the sizes and spacing without doing a trial and error?
Let me know your thoughts 🧐🧐🧐
What specific areas of your project would you like help with?For this challenge I didn't need any help on areas. But Your feedback is highly appreciated 😊😊😊
Hi Ralph!
Your solution looks quite good. I don't think there's really anything I would say except maybe there may be some redundant lines of code in both your html and css making is bigger than is necessary. But in the end, the result is quite good anyway.
Keep up the good work!
It was my first time creating a table. I'm always happy to learn something new.
What specific areas of your project would you like help with?Any feedback will be appreciated.
Hi Yurins!
Your solution looks quite good. I'd say the only big issue I see is the responsiveness.
I would suggest that you set a max width using the min() function on the width property, that way it would look more responsive to the device's witdh.
Keep up the good work!
Nothing really. This was pretty simple to make.
What challenges did you encounter, and how did you overcome them?Getting the sizes right, but it was not that much of a challenge.
What specific areas of your project would you like help with?Any constructive criticism would be appreciated.
Hi Mostafa.
Looks pretty good! Your design is a bit narrower but a minor aesthetic detail.
I liked your inclusion of a transition effect and now I wish I would have included it in my solution.
Keep up the good work!
Hi Osiel!
Your solution to the challenge is quite good, I liked how you used the translate property to make it look like the card is hovering higher. I used margins to separate the different elements but I think your gap solution was better.
A few suggestions though:
Your card is not responsive to smaller screens. You could the width property with the min() function a using vw units. Also to change the font size in smaller screens you could use the clamp() function on the font-size property. I think you forgot to change the card title color to yellow when hovering.
Keep up the good work!
Proud of completing this project and understand CSS
What challenges did you encounter, and how did you overcome them?N/A
What specific areas of your project would you like help with?N/A
Hi Jamie.
Your solution looks pretty accurate. However, on my browser, the card is stuck at the top of the screen. I managed to center it vertically and horizontally by using: body { display: flex; align-items: center; justify-content: center; } Maybe there are other ways or might just be my browser but that seemed to work for me.
Keep up the good work!
