Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
26
Comments
6
P

Pillippa Ignacia Pérez Pons

@PillinChile460 points

Curious!. Learning...

Latest solutions

  • Dictionary web app

    #next#react#tailwind-css

    P
    Pillippa Ignacia Pérez Pons•460
    Submitted over 1 year ago

    0 comments
  • nft preview card component

    #react#motion

    P
    Pillippa Ignacia Pérez Pons•460
    Submitted about 3 years ago

    0 comments
  • Interactive rating

    #gatsby#react#motion

    P
    Pillippa Ignacia Pérez Pons•460
    Submitted about 3 years ago

    0 comments
  • Intro Section with Dropdown Navigation

    #gatsby#react#motion

    P
    Pillippa Ignacia Pérez Pons•460
    Submitted about 3 years ago

    0 comments
  • Interactive Rating Component

    #motion#gatsby#emotion

    P
    Pillippa Ignacia Pérez Pons•460
    Submitted about 3 years ago

    0 comments
  • Equalizer landing page in react


    P
    Pillippa Ignacia Pérez Pons•460
    Submitted over 3 years ago

    0 comments
View more solutions

Latest comments

  • Chetana_Chaudhary•100
    @chetanachaudhary
    Submitted about 3 years ago

    Stats_preview_card_component challenge

    2
    P
    Pillippa Ignacia Pérez Pons•460
    @Pillin
    Posted about 3 years ago

    Hi!!

    You can use Flex to positionate in the center. Rembemer the container need to be 100hv and 100 vw,

    display: flex;
    justify-content: center;
    align-items: center;
    
    

    ref: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ;).

    if you have doubts don't hesitate in say

  • Jorge Miguel•410
    @notFaceroll
    Submitted over 3 years ago

    "Stat preview card" solution, with desktop-first using CSS grid/flex

    1
    P
    Pillippa Ignacia Pérez Pons•460
    @Pillin
    Posted over 3 years ago

    Hiii!!, you can try to use mix-blend-mode, there is an example here: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_mix-blend-mode-all. the one that comes closest to it is the multiply =). Also, It isn't similar to the color, but it is closest.

    Marked as helpful
  • Muhammad Kaleem Raza•120
    @MuhammadKaleemRaza
    Submitted over 3 years ago

    Responsive Card using CSS Flex-box

    2
    P
    Pillippa Ignacia Pérez Pons•460
    @Pillin
    Posted over 3 years ago

    Hiii!!, you can try to use mix-blend-mode, there is an example here: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_mix-blend-mode-all. the one that comes closest to it is the multiply =). Also, It isn't similar to the color, but it is closest.

  • Peter Kalavritinos•70
    @peter-kalavritinos
    Submitted over 3 years ago

    faq-accordion-card

    1
    P
    Pillippa Ignacia Pérez Pons•460
    @Pillin
    Posted over 3 years ago

    Hi!!!

    when you defined the H2 tag, you didn't close it, that makes it look dropped.

    <h2 class="question">How many team members can I invite?</p><button title="open answer" class="toggle-button"><img src="./images/icon-arrow-down.svg" alt=""></button>
    

    I suppose that you want to do is

    <h2 class="question">How many team members can I invite?</h2>
    <button title="open answer" class="toggle-button">
      <img src="./images/icon-arrow-down.svg" alt="" />
    </button>
    

    With the flex that you have in the parent. you will have the alignment correctly

    I hope it has been helpful

    Marked as helpful
  • placoderm•20
    @placoderm
    Submitted over 3 years ago

    FAQ accordion card using vanilla JS

    2
    P
    Pillippa Ignacia Pérez Pons•460
    @Pillin
    Posted over 3 years ago

    Hi! I hope that you are well

    If you want to centered the layout vertically

    you can add in main tag

        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    

    and in #card remove the margin. I hope It has been helpful.

  • Erlenth•10
    @Erlenth
    Submitted over 3 years ago

    3 column card

    1
    P
    Pillippa Ignacia Pérez Pons•460
    @Pillin
    Posted over 3 years ago

    You can add in the .container

        height: 100vh;
    

    If you want to have vertically centered layout

    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

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

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