@AntonatorSubmitted about 3 years ago
Created in just 1 hour. Had some problems with background, but I could solve them. Any feedback is welcome :D
SirJhay3
@SirJhay3All comments
- @SirJhay3Posted about 3 years ago
Hi Anthony, great work!
play around with the background-position values so it cuts across the edge of the card as similar to the design
cheers!
0 - @vviktorianSubmitted about 3 years ago
I got problem with background image, any advice? :)
@SirJhay3Posted about 3 years agoadd this to your body style
background: url(./images/pattern-background-desktop.svg); background-repeat: no-repeat; background-size: 100% 40vh;Marked as helpful1 - @michaelastefkovaSubmitted about 3 years ago
Hi guys, thank you very much for your feedback. Have a great day!!
@SirJhay3Posted about 3 years agoHi Mishka27,
Instead of the ball-1 and ball-2 classes you have there, add them as background images to the body
try this: `` background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg); background-repeat: no-repeat; background-position: right 45vw bottom 45vh, left 45vw top 45vh; `
play around with the background-position values to scale similar to the design
Cheers!
0 - @rafatdawoodSubmitted about 3 years ago
First code
@SirJhay3Posted about 3 years agoThis looks great, just adjust your screen breakpoints
The first media query should have min-width: 1024px while the second have just min-width: 375px; So there won't be need for the max-width
cheers!
Marked as helpful1 - @obaryoSubmitted about 3 years ago
This is my first Frontend mentor challenge, and it would be helpful to receive some feedback
@SirJhay3Posted about 3 years agoHi Obaryo
Add
align-items: centerto your body, so it looks centered properly as similar to the design.Great job, Happy coding!
Marked as helpful0 - @adithya-designSubmitted about 3 years ago
There was one problem which I definitely need someones help with There is a line bellow the image and I cannot get rid of it. I have tried making linespace 0 in CSS but it still wont work. Anyways thank you.
@SirJhay3Posted about 3 years agoHi Adithya
View those images to see their width and height details. Then give #back-image width and height properties to the values you see and set both img and #green-box width and height to 100%.
Remove the width and height that's being set in your HTML.
cheers
0 - @Bilal2073Submitted about 3 years ago
If there is any recommendation, please recommend me.
@SirJhay3Posted about 3 years agoHi,
- Set a height and width property to the id of right, then set your image height and width to 100%
- Add a div with a class of modal after your picture tag and give it this styles: .modal { width: 100%; height: 100%; background-color: hsl(277, 64%, 61%); position: absolute; top: 0; opacity: .5; }
- Set position: relative to #right
- Surround 'insight' with a span tag instead and set the color to HSL(277, 64%, 61%)
Happy coding!
0 - @buddywuthebtSubmitted about 3 years ago
it was my seconde project here its almost being easier and easier
@SirJhay3Posted about 3 years agoHi @buddywuthebt, here are things noticed:
- Your solutions URL does not point to your solution, so your code can't be viewed. Update the link.
- For those two background images, add a background-position property to position them similar to the design.
- The div with a class of attribution, the styles are not visible on the page, seems it was deleted because they were already included in the starter file. Review that section, add your name to the markup.
0 - @twalibnurrein07Submitted about 3 years ago
how to change code to be mobile responsive so that the image appears first not the heading
