Skip to content
OverviewSolutions
14
Comments
11

Apah

@apah-dev280 points

Photographer, Artist and budding Web Developer. Fluent in CSS and HTML 5.

I’m currently learning...

HTML 5, CSS, Javascript

Latest solutions

View more solutions

Latest comments

  • Apah•280
    @apah-dev

    Hello Romana

    Great work completely the challenge!!

    I've got some observations with your code.

    1. You created a style.css file and placed it in the design folder. I would recommend creating a separate folder called css for all your stylesheets moving forward. This would make your code more accessible and easier to work on by other programmers in a team.

    2. You forgot a piece of style in the head section of your html code. Check the head section of your code to move it and put it in your style sheets instead.

    I suggest moving it to the style.css file you created and remove it from the html file since you already created an external stylesheet.

    1. This is about your active state. I noticed that on hover your image doesn't show the overlay and the icon-view. It was quite a challenge for me to do it initially but it is quite easy now. All you have to do is add the following codes to your html and css files.

    On the html document do this:

    Add a div with class overlay to overlay the color And add the icon-view.svg found in images folder inside the div

          <div class="imageContainer">
        <img src="./images/image-equilibrium.jpg" alt="image-equilibrium" />
/* add the overlay div and inside add the icon-view icon */
        <div class="overlay">
          <img class="icon-view" src="images/icon-view.svg" alt="icon-view">
        </div>
      </div>

    In the css document add the following code to display the overlay and icon-view on hover

    
/* make the image container position: relative. this will make it possible to have an overlay on it */
      .imageContainer {
        position: relative;
      }

/* make the overlay div absolute position to have it move around to where you want */
      .overlay {
        position: absolute;
        display: none;
        background-color: hsla(178, 100%, 50%, 0.1);
        top: 0;
        left: 0;
        border-radius: 10px;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }

/* this will position the icon view right in the center of the overlay div */
      .icon-view {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
      }

/* finally this will reveal the overlay and its content on hover */
      .imageContainer:hover .overlay {
        display: block;
      }
    1. Finally I also noticed there's no active state for the h1 content "Equilibrium" and the name of the creator which you enclosed in a span

    You can easily fix that by creating a :hover state for both of them

    h1:hover {
cursor: pointer;
 color: hsl(178, 100%, 50%);
}

span.author {
cursor: pointer;
color: hsl(178, 100%, 50%);
}

    I hope this helps. Have a great one!!!

    Marked as helpful
  • Apah•280
    @apah-dev

    Hello!!!

    Congrats 🎉 on finishing the challenge

    There are a few things you should take note of moving forward.

    The first one is semantics in html and accessibility

    Using main as the first div for the body instead of div is better semantics for your code.

    Using the h1 as the first header for your content is better semantics instead of the h3 that you used. You can adjust the font-size to fit the size you want.

    Note: h1 should only be used once in a body

    The next thing is the overlay that appears on hover. I think all you need to do is change the bg-color of the overlay div in your code.

    Here's an example with my own code

    HTML

            <div class="overlay">
          <img class="icon-view" src="images/icon-view.svg" alt="overlay" />
        </div>
      </div>

    CSS

    /*make the parent container position:relative*/
      .nftimagecontainer {
        position: relative;
      }
/*make the overlay div absolute to make it overlay on the main image container*/
       .overlay {
        position: absolute;
        background-color: hsla(178, 100%, 50%, 0.5);
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        cursor: pointer;
      }

/* this is to position the icon in the center of the overlay */
      .icon-view {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }


      .overlay {
        display: none;
      }

      .nftimagecontainer:hover .overlay {
        display: block;
      }

    In your code you could check background-color and opacity in the .overlay div class. Finally, check for unnecessary code that may not be doing anything to the position of the overlay and icon.

    I hope this helps

    Marked as helpful
  • Apah•280
    @apah-dev

    Great work!

    I noticed you didn't use the image provided in the images folder I'm guessing you either didn't see the file or you decided to be creative with the project and use your own image.

    If you didn't see the images folder, it is downloaded with the project challenge and contains all the necessary images. There's also the styleguide.md which contains the fonts, font-weight, font-size, colors. I hope this helps

  • Apah•280
    @apah-dev
    • Hello! *

    Congrats 🎉 on finishing your challenge!

    Understanding and using git can be a real challenge at the beginning but with practise and consistency it is as easy as breathing!

    Here's a link to a tutorial by Travesy Media that breaks everything down

    Wish you luck!!!!

  • Apah•280
    @apah-dev

    In addition to what Abdul has recommended, I do advice you always visit the styleguide.md file to use the correct colors and fonts for the projects.

    ** It is downloaded with the project files at the beginning of the challenge **

    Marked as helpful
  • Apah•280
    @apah-dev

    I've struggled with centering items myself for a while but now i know many options you could use. I'll share them here. You could try them all out on a test project and then apply them on real projects when you understand them.

    container {
margin-left: auto; 
margin-right: auto; 
width: 400px;
}

    If you want to use margin and make it work you have to specify width if not it doesn’t work *There’s no way to vertically align it to the centre. That’s the disadvantage of this option *

    container {
position: absolute; 
top: 50%; left: 50%; 
transform: translate(-50%, -50%);
}
    • the -50%, -50% represent x and y axis *

    Using Flexbox method:

    main { 
display: flex; 
justify-content: center; 
align-items: center; 
height: 100vh; }

    Using the grid method:

    main { 
display: grid; 
align-items: center; 
height: 100vh; 
justify-content: center; 
}

    this is far from exhaustive as the methods you can use are many. I do advice you try them out and figure out the one that's best for the particular project you're working on. also consider how it would work for the responsiveness of your page. Hope this helps

    Marked as helpful
View more comments