Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
17
Comments
27
C4rlos
@solracss

All comments

  • Anna•1,070
    @annaindistress
    Submitted over 1 year ago

    Workit landing page

    #accessibility#bem#vite#progressive-enhancement
    1
    C4rlos•410
    @solracss
    Posted over 1 year ago

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

  • Maciej Kwiatkowski•150
    @kwiatkowskimaciej
    Submitted over 1 year ago

    Responsive Workit landing page

    1
    C4rlos•410
    @solracss
    Posted over 1 year ago

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

  • Mriganka Mousum Gogoi•260
    @Mriganka5137
    Submitted almost 2 years ago

    Equalizer Landing Page

    #react
    1
    C4rlos•410
    @solracss
    Posted almost 2 years ago

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

    Marked as helpful
  • P
    Rahul Mourya•440
    @rahulmourya336
    Submitted almost 2 years ago

    [Solution] Equalizer landing page

    #tailwind-css
    1
    C4rlos•410
    @solracss
    Posted almost 2 years ago

    Check your site at 768px, layout gets messy

  • Yoseph Winata•400
    @yosephwinata
    Submitted almost 2 years ago

    Responsive Layout

    1
    C4rlos•410
    @solracss
    Posted almost 2 years ago

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

    Marked as helpful
  • GentaSurya•60
    @GentaSurya
    Submitted almost 2 years ago

    Product preview card

    1
    C4rlos•410
    @solracss
    Posted almost 2 years ago

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

    Marked as helpful
  • Abdul Rahman Al Sbeinaty•100
    @vladiusftw
    Submitted almost 2 years ago

    Redux Toolkit, Redux Persist, NextJS, ReactJS, TailwindCSS

    #next#react#redux-toolkit#tailwind-css
    2
    C4rlos•410
    @solracss
    Posted almost 2 years ago

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

  • KaterinaYakovishina•170
    @KaterinaYakovishina
    Submitted almost 2 years ago

    meter styles

    1
    C4rlos•410
    @solracss
    Posted almost 2 years ago

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

  • P
    Chinenye Ibenyenwa•30
    @Charley95
    Submitted almost 2 years ago

    Four card feature section

    1
    C4rlos•410
    @solracss
    Posted almost 2 years 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.

  • jasnoludek•70
    @jasnoludek
    Submitted almost 2 years ago

    Stats Preview card component

    2
    C4rlos•410
    @solracss
    Posted almost 2 years 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
  • DanishZubair•20
    @DanishZubair
    Submitted almost 2 years ago

    QR code component

    #web-components
    3
    C4rlos•410
    @solracss
    Posted almost 2 years 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.

  • João Paulo•30
    @jjpmonteiro
    Submitted almost 2 years ago

    Huddle Landing Page with single introductory section master

    1
    C4rlos•410
    @solracss
    Posted almost 2 years 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
  • Vanza Setia•27,715
    @vanzasetia
    Submitted about 4 years ago

    Huddle Landing Page with Single Introductory HTML5 CSS3 Sass

    #bem#sass/scss
    2
    C4rlos•410
    @solracss
    Posted almost 2 years ago

    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!

  • Uvejs•370
    @Uvejsii
    Submitted almost 2 years ago

    Order summary component

    1
    C4rlos•410
    @solracss
    Posted almost 2 years ago

    Start with reading about mobile first development.

  • Emanuel Bonardo•320
    @emanuelcba94
    Submitted almost 2 years ago

    Solution order summary using CSS Grid and CSS Flexbox

    #bem#node
    1
    C4rlos•410
    @solracss
    Posted almost 2 years ago

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

  • Jan van Ierssel•20
    @Janvampierssel
    Submitted almost 2 years ago

    NFT Card Design

    4
    C4rlos•410
    @solracss
    Posted almost 2 years ago

    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!

  • Aviad Churaman•210
    @av1ad
    Submitted almost 2 years ago

    Profile Card Component

    1
    C4rlos•410
    @solracss
    Posted almost 2 years ago

    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
  • Mikhail•440
    @MikeBeloborodov
    Submitted almost 2 years ago

    Frontend Mentor - Profile card component solution CSS and HTML only

    2
    C4rlos•410
    @solracss
    Posted almost 2 years ago

    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.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub