Skip to content
OverviewSolutions
17
Comments
27
C4rlos
@solracss

All comments

  • Anna•1,070
    @annaindistress

    Workit landing page

    #accessibility#bem#vite#progressive-enhancement
    1
    C4rlos•410
    @solracss

    Nice way of doing those curves. Really like this approach!

  • C4rlos•410
    @solracss

    How do you calc all those clamps...? Nice solution!

  • C4rlos•410
    @solracss

    You need to copy whole <svg> to html code, and then you can set fill property. Check mine solution.

    Marked as helpful
  • C4rlos•410
    @solracss

    Check your site at 768px, layout gets messy

  • C4rlos•410
    @solracss

    Im using option 2. Sass mixins are really handy for this.

    Marked as helpful
  • C4rlos•410
    @solracss

    You can also use picture tag. Much better and you don't have to set media-queries.

    Marked as helpful
  • C4rlos•410
    @solracss

    Unable to add board and task. Edit board -> save changes is not responding to click.

  • C4rlos•410
    @solracss

    Hide meter only for screen-readers and build your custom one.

  • C4rlos•410
    @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.

  • C4rlos•410
    @solracss

    Add mix-blend-mode: multiply;, change opacity 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
  • C4rlos•410
    @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.

  • C4rlos•410
    @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
  • C4rlos•410
    @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!

  • C4rlos•410
    @solracss

    Start with reading about mobile first development.

  • C4rlos•410
    @solracss

    Nice job! You could add some transition for hover animations so it would be more smooth.

  • C4rlos•410
    @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 use border-top/bottom of adequate container.

    Images used as icons do not need alt text (ether, clock).

    Overall very nice job! Really like it!

  • C4rlos•410
    @solracss

    You do not need to target f.e avatar using main .avatar. Only name of the class is sufficient .avatar. Also main .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
  • C4rlos•410
    @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 to background rather than to card.