Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
21
Comments
2

Mustapha SLIMANI

@Slimani-CEMorocco-Casablanca430 points

🎈 Artificial Intelligence and Distributed Systems Master Student 🎈

I’m currently learning...

BOOTSTRAP 5, REACT, AND MORE ...

Latest solutions

  • Advice Generator App


    Mustapha SLIMANI•430
    Submitted almost 2 years ago

    0 comments
  • Age Calculator App (Responsive and Logic Functions Not Yet)


    Mustapha SLIMANI•430
    Submitted almost 2 years ago

    0 comments
  • Interactive Comments Section (Responsive and Logic Functions Not Yet)


    Mustapha SLIMANI•430
    Submitted almost 2 years ago

    0 comments
  • Calculator App With Theme Switcher (No Logic Functions Yet)


    Mustapha SLIMANI•430
    Submitted almost 2 years ago

    0 comments
  • Responsive Multi-step Form


    Mustapha SLIMANI•430
    Submitted almost 2 years ago

    0 comments
  • Responsive Rock, Paper and Scissors Game


    Mustapha SLIMANI•430
    Submitted almost 2 years ago

    0 comments
View more solutions

Latest comments

  • Ibrahim Suleiman•50
    @ebeeraheem
    Submitted almost 2 years ago

    Order summary | Frontend mentor

    1
    Mustapha SLIMANI•430
    @Slimani-CE
    Posted almost 2 years ago

    Hey Ibrahim,

    Addressing the first challenge, try setting the height of the image element within the .top class to 100% and customize the height of the .top element itself to be 170px. This should eliminate the unwanted space between the hero image and the bottom of the card.

    Now, for the second issue related to the arrangement of items in the .plan section, consider the following steps:

    1. Remove justify-content from the .plan class.
    2. Add a padding of 15px to the .plan class.
    3. Introduce position: relative to the .plan class.
    4. Apply position: absolute; right: 15px; to the third child of the .plan class. If needed, you can assign a custom class to this child or select it using .plan:nth-child(3).
  • yassine-ramla•520
    @yassine-ramla
    Submitted almost 2 years ago

    responsive Pricing component with toggle with just html and css

    #tailwind-css
    1
    Mustapha SLIMANI•430
    @Slimani-CE
    Posted almost 2 years ago

    I suggest implementing a toggle functionality for prices using a clever combination of HTML and CSS. First, create a hidden checkbox input accompanied by a corresponding label. By placing your toggle button within this label, a click on the toggle will essentially trigger the checkbox. Leveraging the CSS :checked pseudo-class, you can dynamically style elements based on the checkbox's state. When the checkbox is checked, apply styles to display the monthly price; otherwise, keep the yearly price div visible.

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