Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Brian Wodu Oluohu.• 50

    @Bthedraft

    Submitted

    Hi there 👋, I’m Brian and this is my solution for this challenge. 🚀 Any suggestions on how I can improve and reduce unnecessary code are appreciated!

    I need help on how to fix multiple background images

    Thank you. 😊✌️

    Profile card component challenge Using FlexBox

    1

    Karrar Hussein• 220

    @Karrar-Hussein

    Posted

    In order to add multiple background images, you just need to write their urls in the background-image property and add a comma between the two images, just like this:

    background-image: url(images/bg-pattern-top.svg),
                  url(images/bg-pattern-bottom.svg);

    Marked as helpful

    0
  • Aadarsh Rai• 20

    @Ocean-bluess

    Submitted

    Any tips to make this code even better... especially I wanted to make the background top - bottom pattern responsive but I didn't know how to do that And also I did not knew how to present that inner card layout so, I presented div using background color instead of the pattern card layout.

    Any feedback you will provide me will be helpful for my growth towards my Frontend developer journey... Thank you!

    Profile card component using HTML / CSS

    2

    Karrar Hussein• 220

    @Karrar-Hussein

    Posted

    Nice solution, for your card image instead of using a div with a background color you just need to add an img tag with the image provided <img src="bg-pattern-card.svg"> and give it width: 100% and also don't forget to add an overflow: hidden to your card container to keep the edges round.

    And for your circles pattern rather than adding them in html you just need to set them as two background images and position them with the right values using the background-position property, it should be something like this:

    body {
  background-color: var(--clr-Dark-cyan);
  background-image: url(images/bg-pattern-top.svg),
                    url(images/bg-pattern-bottom.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: right 49vw bottom 45vh, left 49vw top 50vh;
}

    That should fix your problems✨

    Happy coding😁🔥

    Marked as helpful

    1
  • Karrar Hussein• 220

    @Karrar-Hussein

    Posted

    The reason that your buttons are expanding when hovering over them is because that you're creating the border in the :hoverstate, instead you should be adding it along with your button styles.

    0
  • Achinta Haldar• 140

    @FSwebdeveloper

    Submitted

    Hello, Frontend Mentor Coding community. I have almost completed this challenge but I have questions, How to apply white padding on Victor's image in an easy method and How to use a background pattern on top and bottom also?

    • All Feedback is Well Come.

    Profile card component

    2

    Karrar Hussein• 220

    @Karrar-Hussein

    Posted

    And for the circles in the background, you just need to position them with the right values you could try something like this: background-position: right 49vw bottom 45vh, left 49vw top 50vh;

    and I hope that fix your problem .

    happy coding😁🔥

    Marked as helpful

    1
  • Karrar Hussein• 220

    @Karrar-Hussein

    Posted

    One easy way to fix it is to set the circles as two background images and position them using the background-position property it should be something like this:

    body {
  background-color: var(--clr-Dark-cyan);
  background-image: url(images/bg-pattern-top.svg),
                    url(images/bg-pattern-bottom.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: right 49vw bottom 45vh, left 49vw top 50vh;
}

    Now you're good to go😁🔥

    happy coding✨

    Marked as helpful

    0
  • Achinta Haldar• 140

    @FSwebdeveloper

    Submitted

    Hello, Frontend Mentor Coding community. I have almost completed this challenge but I have questions, How to apply white padding on Victor's image in an easy method and How to use a background pattern on top and bottom also?

    • All Feedback is Well Come.

    Profile card component

    2

    Karrar Hussein• 220

    @Karrar-Hussein

    Posted

    Hi, nice solution 🔥. For your problem you don't really need a padding, you just need to add a white border around your image something like this border: 3px solid white; and you're good to go!✨

    Marked as helpful

    0
  • Azhar• 600

    @azhar1038

    Submitted

    This is my solution to News homepage using HTML, CSS and vanilla JS. I have tried to make it as much accessible as possible, if you have any suggestions please let me know

    Responsive homepage

    1

    Karrar Hussein• 220

    @Karrar-Hussein

    Posted

    Very impressive job✨, I'm just curious how do you name your colors?

    0
  • Akshay-Tarde• 160

    @Akshay-Tarde

    Submitted

    It was nice to do DOM manipulation using JS. This challenge tested my planning of the layout. I tried to abide by the DRY principle while writing the CSS for this page.

    Any feedback would be welcome!

    Responsive News Homepage

    2

    Karrar Hussein• 220

    @Karrar-Hussein

    Posted

    Beautiful job, one thing to take notice of is that instead of changing the body element background color when opening the hamburger menu you could get a better shade by creating an overlay "empty div" with position fixed and size it so that it covers the whole screen and give it a black background color with an alpha value "smth like 0.5 👌" and set its display property to "none", then you can attach an event listener to toggle the overlay display property whenever you click the nav button.

    also, don't forget to give the sidebar a z-index higher than the overlay 😊

    Marked as helpful

    0
  • Karrar Hussein• 220

    @Karrar-Hussein

    Posted

    The best way to approach this is to create an overlay with position fixed and size it so that it covers the whole screen and give it a black background color with an alpha value and set its display property to "none", then you can attach an event listener to toggle the overlay display property whenever you click the nav button.

    also, don't forget to give the sidebar a z-index higher than the overlay

    Marked as helpful

    1