Design comparison
Solution retrospective
Hello, new component is here :). Feedback is welcome.
Community feedback
- @apah-devPosted over 1 year ago
Hello Romana
Great work completely the challenge!!
I've got some observations with your code.
-
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.
-
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.
- 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; }
- 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 helpful0 -
- @HassiaiPosted over 1 year ago
there is no need to give the body a margin value.
To center the main on the page using flexbox, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body
body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here
You forgot to add the hover effect to the design.
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
0@11nenaPosted over 1 year ago@Hassiai hello thank you. I saved your advice for next challenge.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord