Skip to content
OverviewSolutions
3
Comments
3

Kyle

@CaptainKaveman50 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Kyle•50
    @CaptainKaveman

    Hey Jesse,

    To fix your accessibility issues and improve the semantic HTML you requested you should wrap the card divs in a <main></main> tag and the footer divs in a <footer></footer> tag. It is good practice to include these each time. In this case you don't have a need for the header and nav tags, but those are the main four that will typically need to be in the body.

  • Kyle•50
    @CaptainKaveman

    Hey Wesley,

    You've already got great answers about image widths, I would like to just add a helpful resource for creating websites that are responsive. Check out Kevin Powell, he has a free course called Creating Responsive Layouts and he goes into detail on explaining how to have various elements resize themselves depending on the view port size. I typically will have all images set to max-width: 100% by default. This will shrink the images that are to large and overflow to fit the container they are in. I also like to use a percentage for the width and then I will set a pixel value for my max-width. That way on large screens it won't stretch too much.

    Marked as helpful
  • Kyle•50
    @CaptainKaveman

    I did mine by creating a class called overlay and I set the background color to the cyan hsl they provided but changed it to an hsla which allows you to set the opacity on the color. Then I set the background image as the view icon, no-repeat, and center. I set the overlay opacity to 0 to hide this from the page. Then I set my container class for the image to :hover and added my overlay class as a descendant selector and set this to an opacity of 1. Basically, when someone hovers over the container of the image it will change the opacity of my overlay class from 0 to 1. I may not have described this very well so feel free to look at my solution if you want to better understand it. I found this part pretty challenging as well. I tried to use the inset box-shadow, but it was changing the color on the view icon as well. I probably would have to do this in separate classes.