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. 😊✌️
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);
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!
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😁🔥
Feedback on container expanding when hovering over buttons & centering 3 columns on desktop spread.
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.
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?
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😁🔥
I found problem on background circles
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✨
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?
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!✨
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
Very impressive job✨, I'm just curious how do you name your colors?
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!
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 😊
any feedback please !!, i have completed this challenge but one thing i haven't completed is a blur background when sidebar clicked, if you read this please give me a solution, thank you
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
