Hello Hassan, congratulations on finishing your first challenge!
How do I get the proper box-shadow? Try something like this
box-shadow: 0 2px 15px rgba(0,0,0,.1);
Check the syntax for the box-shadow so you can test alterations.
The picture example shows the larger text to be more bold, but I couldn't get it to be as bold as the picture shows it, it might have to do with the font family.
Yes, it does, you were supposed to use Outfit. It also has to do with the font-weight. The style guide stated that you need 400 and 700, so the title should have 'font-weight: 700'.
What are the font sizes supposed to be?
On this matter, I noticed that you used pixels (px) to set the font size. I recommend taking a look at the 'rem' unit of measurement. To determine the actual sizing, you can start with 1rem and increase it bit by bit until you reach your desired result. For this project, the heading should be around 1.5rem
What units do I use for border-radius?
I usually use rem as my default unit of measurement, as a personal preference. However, for this project, you can use either rem or px depending on your preference. Since this project has a fixed size and does not require responsiveness, using pixels is fine too.
Surely I encountered some problems. But the hardest thing was adjusting the size of an image. When I applied the css grid on the content of my page, the img took up a lot of space and reconstructing it with the CSS was not easy for me. In addition, when I used media querie to code the part mobile, I did not know how to replace the image of the desktop with that of the mobile that exist in the image folder. So I had to leave the first img only. Thank you for you attention and for reading my code.
Congratulations on completing the challenge! Your use of grid is a good start and with some improvement, it can become even better.
The desktop layout seems to be your main one and I have some suggestions that may help you improve your design. You might want to consider using flex on the body element to center your card in the viewport. This will give your design a more polished and professional look. However, keep in mind that doing so may cause your footer to move around. To fix this, you can set its position to absolute and give it a fixed height. Like this:
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
footer{
position: absolute;
bottom: 0;
height: 10vh;
}
Another issue is that your text column seems to get very squished while the image remains the same size. To solve this, consider putting all the elements of the text column into a single div and giving the image its own div. You can use multiple rows inside the text column to adjust the content. Placing both the image div and the text div inside a single container, similar to what you have, and adjusting its width might also help with sizing issues.
Implementing these suggestions will require adjustments in other areas of your code, but they are a good starting point for improving your design. Keep up the good work and continue to improve your skills.
I am new to this so any feedback is welcome. I'm not sure where I need to improve.
Congratulations on completing the solution! I really liked your clever use of Java for the overlay, and I definitely took some notes for future reference. Now, regarding your request for feedback:
Your code has a few responsiveness issues that could benefit from some adjustments. For instance, setting the height and width of the html element to 100% is generally not recommended because it can cause unintended layout issues. It's better to set the height and width of the body element and let the html element expand as necessary to accommodate content. This approach is more flexible and ensures that the layout is not affected by the height of the viewport.
Using percentage for the width of a container can also cause sizing problems across different devices, so it's better to use rem instead for the width of a container to ensure that its size remains constant across devices. Additionally, the width of the card seems to be changing size, which can affect the overall layout of the page. To address this, it might be helpful to set a specific width for the card instead of using a percentage. I ended up going with 21.9rem after some trial and error when I was solving this challenge.
To improve the layout of the attribution class in this type of project, I suggest enclosing all the body code within a main tag and using a footer for the attribution. By setting the main tag height to 95vh and the footer to 5vh, the attribution section will automatically be placed at the bottom without any extra effort. It's important to note that the main and footer elements should have the same width to align properly.
I also noticed that the items in the .nft-info and .creator classes aren't aligned. To fix this, you can use align-items: center; within the contents of these classes. This may cause some margin-related issues, but those can be easily solved by adjusting the margin of the icons.
Finally, while media queries can be useful for making a website responsive, in this project they aren't necessary and can make your code more complicated than it needs to be. I'm also guilty of trying to incorporate new techniques to my code, but it's better to try to step back and check if they aren't causing more harm than good. By making the adjustments above you would be able to delete the queries entirely.
If you'd like to see the adjustments I suggested in action, feel free to check out my code for this project.
Overall, nice challenge and I hope I was able to offer some helpful feedback.
