Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
26
Comments
12

Cosmo

@cosmoart590 points

Hi there 👋, I am a junior web developer looking to learn and improve every day. I specialize in frontend development working with technologies like HTML, CSS and JS.

I’m currently learning...

Redux, Node.js, Astro, Svelte

Latest solutions

  • Age calculator app solution

    #react#vite#accessibility

    Cosmo•590
    Submitted about 2 years ago

    1 comment
  • Easybank landing page solution

    #react#vite#tailwind-css

    Cosmo•590
    Submitted over 2 years ago

    0 comments
  • Where in the world solution

    #pwa#tailwind-css#vite#react

    Cosmo•590
    Submitted over 2 years ago

    1 comment
  • IP address tracker solution

    #axios#react#styled-components#vite

    Cosmo•590
    Submitted over 2 years ago

    1 comment
  • Space tourism solution in NextJS

    #next#react

    Cosmo•590
    Submitted over 2 years ago

    1 comment
  • Interactive card details form solution

    #accessibility#vite#react

    Cosmo•590
    Submitted almost 3 years ago

    0 comments
View more solutions

Latest comments

  • Sai•50
    @A-C-Sai
    Submitted almost 3 years ago

    NFT preview card component

    #accessibility#styled-components
    1
    Cosmo•590
    @cosmoart
    Posted almost 3 years ago

    Hi Sai!, Congratulations on completing this challenge, it looks great!, .avatar:hover .avatar::before { opacity: 1;} Translates to: When hovered in .avatar you will give an opacity of 1 to the ::before child from .avatar named .avatar.

    It would be something like this:

    	<div class="avatar">
    <div class="avatar"></div>
    </div>
    

    You can see it more clearly by hovering over the selector from a code editor like Visual Studio Code.

    Another way to display the SVG is using the <img> tag, something like this:

    <img src="image.svg" alt="...">
    

    If you want to know more about the differences is to use each one you can see this question on stackoverflow

    I hope you find it useful, Happy coding! 👋

    Marked as helpful
  • Shikhar Srivastava•210
    @shikhars
    Submitted almost 3 years ago

    NFT preview card component

    1
    Cosmo•590
    @cosmoart
    Posted almost 3 years ago

    Hi Shikhar!, Congratulations on completing this challenge!, The card does not take up the entire height of the screen: it has the size that its children together with the gap make it have. You can see it clearly from the devtools.

    My recommendation would be that you use relative units and change the gap to a height along with a justify-content: space-between

    As a last recommendation, personally I don't like the shadow that the card has: it is very "dirty" and striking, I would change it for something more elegant and discreet, something like this:

    box-shadow: 0 0 10px 10px hsl(217deg 79% 6% / 15%);
    

    I hope this helps you, Happy coding! 👋

    Marked as helpful
  • Antoine Estievenart•240
    @Kehs719
    Submitted almost 3 years ago

    Article preview component

    1
    Cosmo•590
    @cosmoart
    Posted almost 3 years ago

    Hi Antoine!, Your solution looks great, The reverse animation does not work because there is no animation called opacityOut, I recommend that in this case you use transitions that are simpler and easier to use.

    I hope this helps you, happy coding 😁

    Marked as helpful
  • Catherine•110
    @boba-milktea
    Submitted almost 3 years ago

    Interactive rating component using flexbox

    2
    Cosmo•590
    @cosmoart
    Posted almost 3 years ago

    Hey!👋 It looks great!... You can use input radios and forms to take advantage of the use of input submit, the required attribute, and to improve accessibility. In addition, you can display the value selected by the user in a very easy way:

    "You selected " + document.querySelector('input[name="feedback"]:checked').value + " out of 5"
    

    If you want you can review how I made the JS for this challenge

    I hope this is useful for you... happy coding 😁

    Marked as helpful
  • Payal Deshmukh•20
    @DeshmukhPayal
    Submitted almost 3 years ago

    3-column-preview-card-component

    1
    Cosmo•590
    @cosmoart
    Posted almost 3 years ago

    Hi Payal! Looks great!... Both cases didn't work because the body didn't have enough height to center its elements. If you want to center a card like the one in this challenge, I recommend you use this method:

    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    

    Regarding the change in size of the cards when hovering on the button, it is because you are using border: which increases the size of the button, forcing the other boxes to do so as well. To fix it you can use outline or use an invisible border:

    button{
        border: 2px solid transparent;
    }
    button:hover{
        border: 2px solid red;
    }
    

    As a last recommendation, I suggest you use a more semantic html: you can use <main>, <section>, <figure> etc.

    I hope this is useful for you... Keep it up👍

    Marked as helpful
  • B Naveen kumar reddy•50
    @Naveen6677
    Submitted almost 3 years ago

    Frontend Mentor | Interactive rating component

    1
    Cosmo•590
    @cosmoart
    Posted almost 3 years ago

    Hi Naveen! Congratulations on completing this challenge... You can use input radios and forms to take advantage of the use of input submit, the required attribute, and to improve accessibility. In addition, you can display the value selected by the user in a very easy way:

    "You selected " + document.querySelector('input[name="feedback"]:checked').value + " out of 5"
    

    I hope this is useful for you... Keep it up👍

    Marked as helpful
View more comments
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