Skip to content
OverviewSolutions
17
Comments
27
C4rlos
@solracss

All comments

  • C4rlos•410
    @solracssPosted about 1 year ago

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

    0
  • C4rlos•410
    @solracssPosted about 1 year ago

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

    1
  • C4rlos•410
    @solracssPosted about 1 year ago

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

    Marked as helpful
    1
  • C4rlos•410
    @solracssPosted about 1 year ago

    Check your site at 768px, layout gets messy

    0
  • Yoseph Winata•400
    @yosephwinataSubmitted about 1 year ago

    Which one is the better practice:

    1. Creating a separate file for media queries (e.g. queries.css), OR
    2. Declaring the media query right after each CSS declaration (in the same file as the regular CSS).

    Responsive Layout

    1
    C4rlos•410
    @solracssPosted about 1 year ago

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

    Marked as helpful
    0
  • GentaSurya•60
    @GentaSuryaSubmitted about 1 year ago

    The difficult part of this challenge is changing the image between mobile and desktop version because they are two different image. I thinking about it for 30mins and finally got the idea how.

    Product preview card

    1
    C4rlos•410
    @solracssPosted about 1 year ago

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

    Marked as helpful
    0
  • C4rlos•410
    @solracssPosted about 1 year ago

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

    0
  • C4rlos•410
    @solracssPosted about 1 year ago

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

    1
  • C4rlos•410
    @solracssPosted over 1 year ago

    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.

    0
  • jasnoludek•70
    @jasnoludekSubmitted over 1 year ago

    EDITS: Max-width of the card container lowered from 63.75rem to 30rem for mobile screen sizes

    A margin of 1.5rem is applied to the main element.

    Mix-blend-mode is applied to the image and opacity of 0.75.

    Thanks @solracss !!

    Thank you for checking out my solution to this challenge. I believe some areas need to be refractored in order to have a smoother transition between mobile and desktop versions.

    I am not sure I am on the right path to properly setting the color overlay to the image.

    Always looking for new knowledge regarding best practices and accessibility.

    Stats Preview card component

    2
    C4rlos•410
    @solracssPosted over 1 year ago

    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
    1
  • DanishZubair•20
    @DanishZubairSubmitted over 1 year ago

    I have done this challenge by following a tutorial. I want to ask how can I stop following tutorials and build projects, as I have knowledge of HTML and CSS, I have done many courses and I understand most of the advanced concepts in HTML and CSS, but I am not able to build the project. Can you suggest me what to do, as I am really worried about this. I have 2 years of experience in HTML and CSS. Thank you.

    QR code component

    3
    C4rlos•410
    @solracssPosted over 1 year ago

    "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.

    2
  • C4rlos•410
    @solracssPosted over 1 year ago

    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
    1