Latest Solutions
- HTML
- CSS
Responsive 4 Card Feature section with React, EmotionJS & TypeScript
View SolutionI had 2 problems:
Not proper adding the top border inside the both, it is not like the one on the design, I tried to use box-shadow also without success.
I tried to use GridCSS (ugly solution but wanted to give it a shot and learn by doing) and the middle column is streched more that the left/right columns for the cards on desktop.
Of course any other tips and suggestions will be welcome
- HTML
- CSS
Profile Card built with React & Emotion on Live Coding
View SolutionWould love to know how to set the background images responsive for both circles on the background. Any other tips will be welcome!
- HTML
- CSS
- JS
CSS with BEM and some basic animations
View SolutionAny suggestion will be welcome. If you have suggestions on how to improve the BEM naming that would be great and also if you would create the share div in another different way to be shown in desktop/mobile views also great.
Thanks in advanced
Latest Comments
Carlos Loureda has commented on crooz's "Pure CSS" solution
Hi Crooz! Great start with CSS skills.
I am also new at this site. I was checking your solution and if you see the report that is generated by the site you have 4 accesability issues and 2 HTML issues, check the report here
If you want to check your HTML/CSS validation you can use these online resources:
Tips about folder arquitecture
For these projects it might not be needed but it can be a good training to begin to add .js files into a js folder and .css files into a css or styles folder, you can check a nice medium post about this
Icons Nice addition of _fontawesome` icons, I use them a lot, but for this exercise if I recall it well they asked to use only the assets provided, so in this project you have 3 svg icons provided on the images folder. The result is very nice but for the sake of the exercise I would try to use them, remembe: r that in this industry we will be needing to follow orders from product owners or designers.
Css
Checking out your code everything looks great, good work! I only see you used some ids for styling: #share-icon, #share-icon2. It is recommened to use classes over ids
Design
card2
element would improve that little difference.object-fit
andobject-position
Great overall design and cool code! I am also learning CSS hope these tips help you and don´t hesitate to ask anything!