Skip to content
OverviewSolutions
14
Comments
11
Apah
@apah-dev

All comments

  • Apah•280
    @apah-devPosted over 1 year ago

    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
    0
  • Apah•280
    @apah-devPosted over 1 year ago

    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
    0
  • Apah•280
    @apah-devPosted over 1 year ago

    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

    1
  • Andrei•530
    @XeotheosisSubmitted over 1 year ago

    The real challenge was setting up github and github pages

    QR card

    2
    Apah•280
    @apah-devPosted over 1 year ago
    • 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!!!!

    1
  • Apah•280
    @apah-devPosted over 1 year ago

    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
    0
  • Olebogeng Sebogodi•80
    @OlebxgengSubmitted over 1 year ago

    I struggled to space the image & details 50/50 on a bigger screen. Struggled with centering my main on the page but figured it out (Would really like to know a better way to do it). How to center my main on the mobile device to get rid of the horizontal scrolling. Any advice on how to better my code, thanks.

    Appreciate the feedback & help :).

    HTML CSS

    3
    Apah•280
    @apah-devPosted over 1 year ago

    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
    0
  • Apah•280
    @apah-devPosted over 1 year ago

    You can set the container background color to white to make it more like the final solution.

    And the body of the page color is specified in the styleguide.md

    0
  • Apah•280
    @apah-devPosted over 1 year ago

    There are few things you could do to make your final result much closer to the solution.

    1. use the recommended font-weight and font-family as advised in the styleguide.md file in the project documents you downloaded

    2. use the background color recommended for the body to make it look much more like the solution. that would be background-color: hsl(212, 45%, 89%); in this case.

    3. use border-radius to add some border to the main div and also seperately do it for the img too

    4. you could increase the padding in the main div element to give some space between the content of the div and the border

    0
  • Apah•280
    @apah-devPosted over 1 year ago

    Using the recommended font and font-weight would make font more close to that of the solution.

    Check the styleguide to see the font-family and font-weight recommended

    0
  • Apah•280
    @apah-devSubmitted over 1 year ago

    I'd love to know how to perfectly use the background-image gradient property to make it look just like the project. Especially for the circular button holding the result. And also on how to decide whether the main or the body should be a flex.

    I'd love any advice also to better deal with problems in the code.

    Result Summary page with flexbox and media query for responsiveness

    2
    Apah•280
    @apah-devPosted over 1 year ago

    I'd also love to know how the made the button with the result fade along the border at the bottom

    0
  • Apah•280
    @apah-devPosted over 1 year ago

    I noticed there is no set margin between the container and the body making it look clogged up. Just setting a margin-top in the div containing the image and texts would fix this. Or setting some default margin in the body element would also work.

    Marked as helpful
    0