Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
4

Umair

@umairanwer240 points

Hi, I am a life long learner with a passion for all things CS. Currently learning web dev.

I’m currently learning...

CSS, HTML, JS

Latest solutions

  • Fully Functional Todo App


    Umair•240
    Submitted about 3 years ago

    0 comments
  • Calculator App


    Umair•240
    Submitted about 3 years ago

    0 comments
  • Advice Generator


    Umair•240
    Submitted about 3 years ago

    0 comments
  • Time Tracking Dashboard with JSON


    Umair•240
    Submitted about 3 years ago

    1 comment
  • Tip Calculator App


    Umair•240
    Submitted about 3 years ago

    0 comments
  • Fylo Data Storage


    Umair•240
    Submitted about 3 years ago

    1 comment
View more solutions

Latest comments

  • DilinyerCR•330
    @DilinyerCR
    Submitted about 3 years ago

    Order summary component

    2
    Umair•240
    @umairanwer
    Posted about 3 years ago

    Hi, good work on the project. Regarding your query there are a few modifications you need to do in your CSS.

    • In your main class set the background to: background: url(/images/pattern-background-desktop.svg)no-repeat top/contain;

    • What this will do is push your image to the top and contain will force the image to display completely without any cutoff.

    • Now set background-color to pale blue.

    • Finally change your height to 100vh.

    Hope this helps. Feel free to ask any questions.

    Marked as helpful
  • Harleen Kaur•40
    @harleenkaur1343
    Submitted about 3 years ago

    Interactive Rating component

    3
    Umair•240
    @umairanwer
    Posted about 3 years ago

    Hi, the issue arises because when you revert the styles using js, the styles of the pseudo classes (:hover) are also set to these styles, thus your hover action stops working. Although you coded the hover effect again using js but a simpler solution is that to reset styles of deselected items by setting their style properties to empty string in js, this way the original css styles will take effect.

    ratelist[y].style.backgroundColor = "";
    ratelist[y].style.color = "";
    

    Now you can remove the hover effect code from js and your page will function as intended.

    Marked as helpful
  • whitehatns•150
    @platypus567
    Submitted about 3 years ago

    Interactive Rating Component using Bootstrap CSS

    #bootstrap
    2
    Umair•240
    @umairanwer
    Posted about 3 years ago

    A good solution to your problem is already provided. There is another solution to this issue, if you want to use <button>.

    • In your CSS create styles for a class "selected-btn"
    • Set the styles of this class to the ones you selected in your js code (background-color and color). And remove them from js code.
    • Now whenever a btn is clicked, first loop through all the buttons and remove 'selected-btn' class from them.
    • After this add the 'selected-btn' class to the clicked button.

    Hope this helps. Feel free to ask any questions.

  • Anthony Aligbe•90
    @Meauma13
    Submitted about 3 years ago

    NFT Preview Component - Image Overlay With Rounded Edges

    #bootstrap#styled-components
    1
    Umair•240
    @umairanwer
    Posted about 3 years ago

    Hi, one of the methods to improve overlay img is to enclose it in a container, and inside this container also add an empty div which will be the cyan-overlay.

    Now set cyan-overlay to 100% width and height, its color to cyan and its border radius should match the NFT img's radius. Initially set its opacity to zero.

    Set hover tag of img container to change opacity of cyan-overlay to 0.5.

    These tips will get the result you need. Please reply if you need any clarification.

    Marked as helpful
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