Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
33
Comments
17

Roy

@arkaroy135600 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Blog Preview Card Using Nuxt3 and UnoCSS

    #accessibility#nuxt

    Roy•600
    Submitted over 1 year ago

    0 comments
  • FAQ Accordion New Challenge

    #accessibility#nuxt#tailwind-css

    Roy•600
    Submitted over 1 year ago

    0 comments
  • Fylo Data Storage Component using Sass

    #sass/scss#accessibility

    Roy•600
    Submitted about 2 years ago

    0 comments
  • Social Media Dashboard with Dark mode switch using Nuxt

    #accessibility#nuxt#tailwind-css#vue

    Roy•600
    Submitted about 2 years ago

    0 comments
  • Newsletter Subcription Component using Nuxt3 and UnoCSS

    #accessibility#nuxt#tailwind-css

    Roy•600
    Submitted about 2 years ago

    0 comments
  • Project Tracking Intro Component with Nuxt and UnoCSS

    #accessibility#nuxt#tailwind-css#sass/scss

    Roy•600
    Submitted about 2 years ago

    0 comments
View more solutions

Latest comments

  • Abdelrahman•90
    @Dribbz
    Submitted about 2 years ago

    huddle landing page with a single introductory

    #accessibility
    1
    Roy•600
    @arkaroy135
    Posted about 2 years ago

    Hey Abdelrahman, you did a fine job. However, use

    body{
    min-width: 100dvh;
    min-height:100dvh;
    }
    

    for solving the overflow issue. dvh or dvw units are better at handling the overflow issue. Check my code to solve your icon issue. PS, I also have that overflow issue which I didn't fixed yet.

    Marked as helpful
  • Zahirul•150
    @ZahirulIslamTanvir
    Submitted about 2 years ago

    NFT preview card component

    1
    Roy•600
    @arkaroy135
    Posted about 2 years ago

    You did an excellent job, Zahirul. I have one tip for you, use transition effect when hovering on the image. I think that will make it more awesome.

  • Arsen Yavorskyi•20
    @yazdrahobycha
    Submitted over 2 years ago

    Age Calculator

    #accessibility#animation#bem#bootstrap
    1
    Roy•600
    @arkaroy135
    Posted over 2 years ago

    Excellent work.

  • Mario Petkov•80
    @mariby21
    Submitted over 2 years ago

    Landing page with Flex-box and Grid

    1
    Roy•600
    @arkaroy135
    Posted over 2 years ago

    Hello Mario, Hope you are doing well. We did a good job here. However I have some suggestions for you. You did this.

    <div class="flex-box">
            <img
              src="/images/image-product-desktop.jpg"
              alt="product-image"
              class="image"
            />
    
            <img
              src="/images/image-product-mobile.jpg"
              alt="mobile=image"
              class="image-2"
            />
    

    I would like to suggest use

    <picture>
       <source media="(min-width: 1440px)" srcset="/images/image-product-desktop.jpg" aria-hidden = "true">
       <img src="/images/image-product-mobile.jpg" alt=" " aria-hidden="true">
    </picture>
    

    This will make the desktop-image appear whenever screen size is 1440px or greater, else it will show the mobile-image.

    And also use this

    <del class="price-2">$169.99</del>
    

    del tag will make the cross through exactly in the middle of the price. Feel free to ask questions if you like. Happy coding.

  • Davide Di Francesco•200
    @davdifr
    Submitted over 2 years ago

    advice-generator-app

    1
    Roy•600
    @arkaroy135
    Posted over 2 years ago

    Hello Davide, Hope you are doing well. You did a very good job in designing, but the advises are not generating when clicking the button.

    const promise = fetch(url).then((response) => response.json());
    

    the possible solution could be to use 'Let' instead of 'const' when declaring this variable.

    Let promise = fetch(url, { cache: "no-store" }).then((response)=>response.json());
    

    Use this instead. Everything else looks fine. Happy coding.

  • Apo•20
    @ApoBaba6
    Submitted over 2 years ago

    display: flex; justify-content: center;

    3
    Roy•600
    @arkaroy135
    Posted over 2 years ago

    Hello Apo, Hope you are doing well. You did great so far in this project, however I have some tips regarding your question.

    1. Use this for responsivness,
    @media (max-width:1439px){
        .main-container{
             display: flex;
             flex-direction: column;
         }
        /* add your codes */
    }
    
    1. Start your project with a mobile first approach. Build the mobile view first, then change it using media query for different screen-size. However, this approach varies people to people, but I think mobile first approach is more efficient to build any project.

    You can check my solution of this project as a reference. Feel free to ask questions. Happy coding.

View more comments

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