Skip to content
OverviewSolutions
9
Comments
9
SirJhay3
@SirJhay3

All comments

  • SirJhay3•160
    @SirJhay3

    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!

  • SirJhay3•160
    @SirJhay3

    add this to your body style

    background: url(./images/pattern-background-desktop.svg); background-repeat: no-repeat; background-size: 100% 40vh;

    Marked as helpful
  • SirJhay3•160
    @SirJhay3

    Hi 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!

  • SirJhay3•160
    @SirJhay3

    This 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 helpful
  • SirJhay3•160
    @SirJhay3

    Hi Obaryo

    Add align-items: center to your body, so it looks centered properly as similar to the design.

    Great job, Happy coding!

    Marked as helpful
  • SirJhay3•160
    @SirJhay3

    Hi 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

  • SirJhay3•160
    @SirJhay3

    Hi,

    1. Set a height and width property to the id of right, then set your image height and width to 100%
    2. 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; }
    3. Set position: relative to #right
    4. Surround 'insight' with a span tag instead and set the color to HSL(277, 64%, 61%)

    Happy coding!

  • SirJhay3•160
    @SirJhay3

    Hi @buddywuthebt, here are things noticed:

    1. Your solutions URL does not point to your solution, so your code can't be viewed. Update the link.
    2. For those two background images, add a background-position property to position them similar to the design.
    3. 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.
  • SirJhay3•160
    @SirJhay3

    set the order property of your image container to 1