Skip to content
OverviewSolutions
31
Comments
10
Radasin
@Radasin

All comments

  • Radasin•620
    @Radasin

    Place an image inside an image: html<img class="img"><img class="overlay" /></img>

    css

    .overlay {
display: none;
width: 100%;
height: 100%;
position: relative;
z-index: 2; 
}

.img:hover .overlay {
 display:block;
} ```
this should work i haven't tested it but it should work.
  • Radasin•620
    @Radasin

    Looks good. CSS Line 16 - -fs-16: font-size: 16px; is an error. Correct is --fs-16: 16px;. But you don't need a custom property for font size of 16px because 16px = 1rem and its the default font size for browsers.

    Marked as helpful
  • Radasin•620
    @Radasin

    Done some fixing.

  • Radasin•620
    @Radasin

    You can use the output element for the form output. Here is a link for that MDN

  • Radasin•620
    @Radasin

    I will try to fix it.

  • Radasin•620
    @Radasin

    Id's should be unique, you can remove id from clone by using clone.removeAttribute("id");. Use rem, em or % instead of px. Don't style sections, or any element that you can have more then once in html, give them a class. You can use the fetch function to get the data from json:

    fetch("./data.json").then((response) => {
         return response.json();
}).then( (data) => {
     //read the parsed json  data
));
    Marked as helpful
  • Radasin•620
    @Radasin

    HTML & CSS for Beginners Part 7: File Structure

    Marked as helpful
  • Radasin•620
    @Radasin

    Its better to put the css file in a folder css then src, because most developers use a css folder (we get confused when the css style is in a folder who is named differently). You don't need to set height to auto its the default. The :root is for custom properties, if you want to set font size to 62.5% use html selector here is a video about css units at 1:44 is the font size set to 62.5% so the rem would be 10px. Lastly use alt attribute in img elements, its use when the img can't be showed and for screen readers.

    Marked as helpful
  • Radasin•620
    @Radasin

    Thanks. I will change the code.

  • Radasin•620
    @Radasin

    That is the simplest solution to center something in the browser viewport. The body like any other element has a height set to auto by default, so when you set it to 100vh it has the full height of the browser viewport and the flex display can then center the content in the middle. You can use position relative or absolute to place items in center, but that is more complex.

    Marked as helpful