HTML, CSS

Hi

I'm afraid this looks very broken for me I think because of how you're using viewport units on height. You'll only ever want to use a min- height in viewport units when necessary, which then allows content to grow as needed.

For this component though, I don't think even min-heights are necessary anywhere except the outer wrapper, maybe the image container if you are doing it with a background image and not placing it in the html...

Before any of that though, you need to address the html first

• use a heading
• remove all the line breaks
• swap mark for span
• put the words like "companies" in lowercase in the html so they can be read out by screenreaders. You can change their case to uppercase visually using the text-transform css property.

Good luck

Hi, Nice attempt. The image on right side, cuts, since its element does not have a background-size. I would suggest you to replace this piece of code in css. Also you can fix it in mobile view.

.card-image {
    width: 600px;
    height: 100%;
    background-image: linear-gradient(hsla(277, 64%, 61%,.50),hsl(277, 64%, 61%,.50)), url(./images/image-header-desktop.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-position: center top;
}

@media (max-width: 500px).card-image {
    width: 100%;
    background-image: linear-gradient(hsla(277, 64%, 61%,.50),hsl(277, 64%, 61%,.50)), url(./images/image-header-mobile.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

This will fix the skewed image issue in mobile view.

I would recommend you learn SCSS to make your whole code absolutely reusable 👍

Good luck 😃

Hi Vinay, Congratulations for finish this project, there an issue in your background image. you need background-repeat: no-repeat; so your image will not repeated.