Skip to content
OverviewSolutions
9
Comments
21

subu

@subu-vChennai390 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

View more solutions

Latest comments

  • subu•390
    @subu-v

    On the body element, use background-repeat:no-repeat; // so that the pattern don't repeat again. background-size:contain; // so that the background-image you used covers available width space. background-color: #000; // this will apply the color to the rest of the space that is not covered by the background image you used

  • subu•390
    @subu-v
    1. Coming up with good class names are indeed a pain but there is no proper methods to do so, we have to come up with class names ourselves.
    2. To practice flexbox, https://mastery.games/flexboxzombies/
    3. To practice grid, https://cssgridgarden.com/
  • subu•390
    @subu-v

    Great works,

    1. you can see your background-image is repeating itself, in order to avoid that use background-repeat: no-repeat.
    2. Set the background-color of body element to the blue it shows on the required design
    Marked as helpful
  • subu•390
    @subu-v

    You did well to get the exact results, one thing i will suggest is that, you can clearly see that your background-image is the not same as the required design background-image.

    Yours get repeating.

    To stop this, use

    background-repeat : no-repeat;
//this will stop repeating the background-image.
    Marked as helpful
  • subu•390
    @subu-v

    Regarding images, Use this property on the bigger image.

    transform:translateX(-values); 
This will move the image on the left, tinker with the value untill you archeive the desired output.

    As for the box image, use absolute positioning on it and make your container(parent of all element) position:relative;

    position:absolute;
top: some value;
left: some value;
transform:translate(-50%,-50%);
 //tinker with the values untill the desired outcome.

    To make the box to appear on top of the bigger image with the women. Use z-index property on the box image.

    z-index:-1;

    As for the functionality, please visit mygithub repository where i added the required functionality in 7 lines of code. https://github.com/subu-v/faq-accordian-component.git

    If you have any doubts, feel free to ask.

    Marked as helpful
  • subu•390
    @subu-v

    You could have use absolute positioning to position the white block. didn't you try?

View more comments