What did you find challenging while building the project?
I did not analyze the page's structure before starting to create it. That's why I had to do it again when I realized I needed to structure it better.
What are the best ways to popularize data on an HTML page?
Great work @eduardotejeda, congrats on completing your challenge. And without doubt an answer to your question. I built this project twice. First with HTML and CSS and second with Tailwind CSS and to be honest with plain CSS, it was a pain for me especially when dealing with the gradients of the results circle in the component yet I was still looking for perfection. But it's so great that you managed to complete it. Happy coding 👌👌
How can I improve the way I code?
@judgemongcal Congratulations on completing this challenge, it really shows that you put a lot of effort into it, keep it up and keep on practicing. On the side of suggestions though I just wanted to talk about the position of the component itself which could be centered more like the design by adding the following lines to your body styles.
body{
padding: 0;
font-family: 'Outfit', sans-serif;
background-color: #0D192C;
/*Add the following lines to your code*/
displaty:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
}
Otherwise to be honest, You really did a great job. Happy coding👌👌👌
Hello @7Wall you've really done an excellent job on this challenge it really show that you push in a lot of effort into it, Great work. As a suggestion, in your HTML instead of using a div for the container class it is recommended to use more accessible elements like the article element which will be so helpful for accessibility most especially screen readers to understand how your code is structured, other than that you have really done it well. Happy coding!!
@Edmiro-Cacoma This is a well-built solution, you really put in the effort to make it excellent, Keep it up. I just hoped that this would also be helpful. To center the preview card vertically also.
body { display: flex; align-items: center; font-family: "Inter", sans-serif; flex-direction: column; min-height: 100vh; background-color: var(--main-bg); justify-content: center; /*Add this to the body styles of the preview card*/ }
Otherwise, you really did an excellent job on this solution. Hope this is helpful to you. Happy coding!
This is my first challenge, it was nice. It took me a while to center the qr code container's container though, cause I set the height to 100% instead of 100vh. Any comment will be helpful, thank you.
Hello @Scazee, you have done a really great job with this solution. Thanks for putting in the effort until it's completed. Hope these suggestions will help in your solutions too! In your code, I think it's better to use tags that are more accessible like <section> and <article> which increases its availability to your audience.
<section class="flex-container"> instead of <div class="flex-container"> <article class="qr-container"> instead of <div class="qr-container">
This makes it accessible to screen readers hence so that they know what the elements mean Hope this helps, otherwise Great solution and Keep it up!
All feedback are welcome. Thank you in advance
@Algka You have done a very great job on this component, It shows that you put in a lot of effort completing it, Well done. I hope this suggestion would help in the positioning of the component in the center of the page.
body{
background-color: var(--Very-dark-blue1);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}
Otherwise, you have done an excellent job. Keep up with the code!!
Feel free to comment :)
Your solution is perfect, you've really done an excellent job well done! As a suggestion though to make the component responsive even on a higher range of devices and to make your width more reliable, I just thought it would be better to use the max-width property instead of width for the component because it reduces the lines in the long run and many other benefits concerning responsiveness. Otherwise, Seriously you've done extremely well. Keep up with the code.
I would love to know a better way to scale the card across devices. I wasn't sure of how to center the card vertically, would love insight on how to fix that.
Thank you
@Richlee-demo According to your code it would be better to make the body element a display of flex and the other properties below so as to center the card easily as shown below.
body {
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
Hope you would find this helpful.
Happy coding and keep up with the spirit.
Really looks excellent, How do you make your designs so perfect?
I've been having trouble turning the color of the equilibrium image to cyan using bgcolor on the div or the img element in the active hover state. Searching the internet wasn't much help but i'll keep searching. Meanwhile anyone who has a solution to that please feel free to share.
A suggestion regarding your code that could be of interest to you to get the hover effect on the image to work:
First of all, we need to have an element that will overlay the image element.
<div class="nftimagecontainer">
<img
class="nftimage"
src="images/image-equilibrium.jpg"
alt="Equilibrium"
/>
<div class="imageOverlay">
<img src="/*location of the icon*/"/>
</div>
</div>
Second, we need to make the newly created div be located in the same position as the image and give it the (light blue) color.
.nftImageContainer{
position:relative;
}
.imageOverlay{
position:absolute;
background-color:/*the color you want (use rgba or hsla to give the color a little opacity e.g (rgba (0, 255, 247,0.6)*/
/*styles to make the div in the same position as the image*/
left: 0;
top: 0;
width: 100%;
height: 100%;
/*this is to give the div the same border radius as the image (to make it look the same */
border-radius: /*Same border radius as the image*/;
}
/*this should also be done to position the icon in the middle*/
.icon-view{
/*the absolute value should also be put on the icon too*/
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/*then make the overlay disappear by adding this style to the imageOverlay styles*/
.imageOverlay{
.....
......(other styles written previously)
display:none;
}
Lastly make the imageOverlay element show when the image has been hovered over
.nftImageContainer:hover .imgOverlay{
display: block;
}