Very cool challenge ! I love the work from the designer on this one !
I learned a few things such as using the <picture> tag to adjust images and the mix-blend-mode property to get the "orange" effect on one of the images. Also, I've used the new and recommended way of doing import with SASS with @use instead of @import which behave really differently because it's not a global scope anymore.
I would like to have any feedback on the project and especially on how I structured my SCSS files. I divided them by (abstracts | components | layout). But at the end, I didn't really used the components folder, thus , I could have simplified the layout folder.
I think your solution looks pretty close to the Figma design with a nice transition between when you switch over to / from desktop layout. Not sure if shrinking the images itself is the best solution, i opted myself to keep them 'static'.
I finished this one yesterday evening and used your solution as an inspiration to refactor mine. The tip for the 'mix-blend-mode property to get the "orange" effect' was very helpful since i struggled to get that right and with a linear-gradient I couldn't get it look as the Figma design. I also refactored to get rid of @import using @use now. Btw I noticed that your SCSS is showing in FF Inspector, mine isn't; how does that work?
I used SASS for the first time this challenge and went 'all in' on structure; perhaps too much when i look at your SASS folder structure that's a bit simpler. I think it's ok to split up the SASS CSS into small components, not having to search so much to find a specific piece of code.
Hello! The most difficult part for me was the profile image, i am using absolute position and percentages to center the image, is there any better solution for this part of the card?
I also used absolute to place the image.
You could try with margin left & top..
I Just opened my project for this and i get the picture in the center like that too.
Perhaps you could give it a try and see if it works for you.
You're Desktop site looks good, but your Tablet and Mobile are not showing up nice.
It's easier to start Mobile first and then apply CSS exceptions for Tablet and Desktop.
https://zellwk.com/blog/how-to-write-mobile-first-css/
I just flexbox (space-around) on the parent div with the logo img files. And then for each logo nth-child i set a height. Those values are all in the Figma file.
Well done Hachi mostly it looks pretty much like the design, but 'the devil is in the details'! It's also recommended to use rem and not px value for accessibility
On my 38" screen the card grow really big when I take it fullscreen. Perhaps limit the max size of the cards a bit..
It's hard and requires tweaking the values. left -??rem top -??rem, right -??rem bottom -??rem the exact values I leave for you to figure out, that's part of the fun!
Seems very good to me, very nice and clean code too. Card size is only a bit bigger than the design, but I'm sure you can refactor it to be closer to the design.
In order to make background for the page, I used position: absolute; property but that is not looks fine, and also i felt difficulty in making background using .svg files.So please help me with this, it would be much appreciated
It's hard and requires tweaking the values. left -??rem top -??rem, right -??rem bottom -??rem the exact values I leave for you to figure out, that's part of the fun!
It's an component but you built it as page.. sizing is off your component is too big.
Did this one myself today i tried to make it into an component that could be fit into a bigger page. Perhaps consider refactoring it into an component (Single price grid component)!
This is my second solution using most of the feedbacks I got. Hopefully it is more readable, and better structured. Again if you can give criticism, tips or things I should avoid doing I am all ears. Thank you!
I think your responsive design still deserves some consideration to make it a more seamless transition. Layout is a bit off, it might be better to tweak it a bit to closer to the design!
Gradually teaching myself HTML / CSS, first time handling Grid.
My main complication I encountered was with the container shadow. The only way I could figure out how to do it was to create it in its own div. The end effect is fine but I am sure there must be another way of coding it, so would appreciate a heads up with that please.
Also would like some feedback on how I handled the site's responsiveness.
Nice solution...
I'm working on this one at the moment, also using grid layout...
I noticed a view things
border-radius: 0.4375rem 0.4375rem 0.4375rem 0.4375rem; could be shortened to border-radius: 0.4375rem; The mobile version keeps on expanding vertically if i increase the viewport, i think it would be better to fix it like the desktop version.
better to use rem over px unless you have good reason for px!
box shadow code is a bit long 0px 15px 30px 0px rgba(0,81,171,0.15); will do fine. I'm a bit lazy so used a cssboxshadow generator with the values from the Figma file, just aplied it on the grid container.
