
C4rlos
@solracssAll comments
- @annaindistress@solracss
Nice way of doing those curves. Really like this approach!
- @kwiatkowskimaciej@solracss
How do you calc all those clamps...? Nice solution!
- @Mriganka5137@solracss
You need to copy whole <svg> to html code, and then you can set
fill
property. Check mine solution.Marked as helpful - P@rahulmourya336@solracss
Check your site at 768px, layout gets messy
- @yosephwinata
- @GentaSurya@solracss
You can also use
picture
tag. Much better and you don't have to set media-queries.Marked as helpful - @vladiusftw@solracss
Unable to add board and task. Edit board -> save changes is not responding to click.
- @KaterinaYakovishina@solracss
Hide meter only for screen-readers and build your custom one.
- P@Charley95@solracss
Use one class that share same properties for cards, no need to repeat it. DRY principle. As for gap, you did it ok, but change it to
gap: 2rem
and deltete top/bottom margin from card - no need for it.
- @jasnoludek@solracss
Add
mix-blend-mode: multiply;
, changeopacity
to 0.75 for your image and you got it.For RWD you can add
max-width
for your card (decide what would be the best) mobile version. This would prevent for enormous streching.I'd suggest switching to desktop at around ~1200px.
https://getbootstrap.com/docs/5.0/layout/breakpoints/
Marked as helpful - @DanishZubair@solracss
"how can I stop following tutorials and build projects"
You've just answered yourself. Just stop code along and start using your knowledge by doing very easy projects like this one.
- @jjpmonteiro@solracss
Nice one! You could add a little transition for changing color on hover, so this change is more smooth. Try add some more padding/margin on wide screen for logo (Huddle) and social icons to be "closer" to main content. Really like your solution!
Marked as helpful - @vanzasetia@solracss
Hi, great that you have shared this challenge. I was looking for some help regarding positioning background-image for desktop and your solution helped me. Nice work!
- @Uvejsii@solracss
Start with reading about
mobile first development
. - @emanuelcba94@solracss
Nice job! You could add some
transition
for hover animations so it would be more smooth. - @Janvampierssel@solracss
Also this image that have
hover
action on this suggest that it's clickable element. So it should be link or button.For making horizontal line good practice is to use
<hr>
or just useborder-top/bottom
of adequate container.Images used as icons do not need
alt
text (ether, clock).Overall very nice job! Really like it!
- @av1ad@solracss
You do not need to target f.e avatar using
main .avatar
. Only name of the class is sufficient.avatar
. Alsomain .card-header p:first-of-type
would be much easier to add a class for this paragraph like f.e..autor-name
, like you have used for location.For stats it's nice to use list, and name this section not a footer but
profile-stats
or sth that reflect what is there.Regarding bubbles you can check mine solution or visit Grace .
Overall nice job! I like your solution. Keep coding.
Marked as helpful - @MikeBeloborodov@solracss
You can also
fix
bubbles to your card. Another way on doing this with pseudoelements..content-section::before
and.content-section::after
. I was struggling 2 days with those bubbles. Overall did something similar to Grace solution, as it makes more logical sense to attach bubbles tobackground
rather than to card.