Skip to content
OverviewSolutions
26
Comments
6
P
Pillippa Ignacia Pérez Pons
@Pillin

All comments

  • Pillippa Ignacia Pérez Pons•460
    @PillinPosted over 2 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

    0
  • Pillippa Ignacia Pérez Pons•460
    @PillinPosted about 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
    1
  • Pillippa Ignacia Pérez Pons•460
    @PillinPosted about 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.

    0
  • Pillippa Ignacia Pérez Pons•460
    @PillinPosted about 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
    0
  • placoderm•20
    @placodermSubmitted about 3 years ago

    The biggest challenge for me on this project was all of the images and the fact that some extended beyond a div and some did not. The background images were also tricky and I used some css that I hadn't before.

    As well, the animations on the accordion were tricky, getting the rotate correct and closing the sections when new ones opened.

    I really appreciated looking at the front end of other people's projects, both those that implemented everything correctly (because I didn't believe it was all possible!) and those that didn't so I could see the things I needed to focus on getting right.

    I would appreciate feedback on:

    • the way I aligned the image
    • the way I structured the divs to allow the JavaScript to do its thing.
    • the opening and closing animation. I had to have a fixed height for the answers in order to animate this. I'd appreciate knowing another way to do it where I could use auto height and still get the animation.

    FAQ accordion card using vanilla JS

    2
    Pillippa Ignacia Pérez Pons•460
    @PillinPosted about 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.

    0
  • Pillippa Ignacia Pérez Pons•460
    @PillinPosted about 3 years ago

    You can add in the .container

        height: 100vh;

    If you want to have vertically centered layout

    Marked as helpful
    0