This was super difficult for me but with the help of my friend Emmanuel, I know so much more about responsive design as a whole the project I worked on after getting frustrated with this one was the "Order Summary Component" so I'll be resubmitting this one with my newly heightened abilities in responsive design. any feedback is welcome but understand that I know a lot more now than I did when I stopped working on this one.
my head is broken, can someone take a look at this test, I started with the creation of the mobile design, then I wanted to switch to the desktop screen, of course using the flex display, and I I found that the first box is smaller than the others, I found myself having to change the width of the desktop design... what do you say about it?
I think you should use Grid for this, set a width: 100% on the individual cards and use grid-template-columns to create the mobile and desktop layout. An alternative approach would be to create the mobile design first, then set that width to be the max-width of the <main> and the individual blocks. In the desktop design, triple that width, and if all your cards are of the same width, they should slot into place.
Hi, okay, good job on the challenge. Well done on the card-content layout. For feedback,
position: absolute to center stuff isn't ideal as it lifts it up from the Flow Of The Document. Other elements that you put on the page will ignore the former and slip underneath it. You should try this approach instead. Apply the following styles to your <body>position: relative on the img and position: absolute on the pseudo elements.content: "" (empty string), and in ::after, set content: url(eyeicon.svg). style these appropriately.Aaaaaand that should be it, hope this helps! let me know if you have any doubts, and good luck :)
The tricky part was designing the hovering state of the nft-image, where while hovering the image it should display a translucent cyan color with a icon-view svg at the middle of it. I created a div with the size of the image, inside it kept the icon-view svg. It was set to appear while hovering the nft-image, also I set the cursor to pointer to make it seem like hovering a link. I'm unsure if this technique is good or not. Please suggest me an efficient method where it would be understandable and accessible for all type of users.
Also, please review my code and suggest me your valuable points to improve it more.
Hi, good job on the challenge. Your code is clean and well commented :). For feedback,
position: relative on the img and position: absolute on the pseudo elements.content: "" (empty string), and in ::after, set content: url(eyeicon.svg). style these appropriately.Pretty long comment, hopefully it helps you :D Good luck
I want to know is my code acceptable? It's my first time attempting projects on site and submitting challenges.
Hi, good job on the challenge! You have nailed the inner contents of the card. A few suggestions:
min-height: 100vh; (this forces your <body> tag height to be 100% of the viewport height, by default element heights depend upon the inner content size, unlike width.)
display: flex;
flex-direction: column;
justify-content: center;
hope this helps, good job once again :D
Is there anything I can do to make this more responsive for different screen sizes?
I had a lot of trouble getting the image to scale within the card
Hi, you don't need media queries or responsive anything for this challenge - this is just a static card design. At most it should be centered vertically and horizontally on the page. Anything more would be overkill. Besides that, I would suggest you a few improvements you could make.
Your HTML indentation could be better, at the moment it is not quite readable.
Your div.card-body doesn't have a closing tag. I think this is why your div.attribution is inside the card.
To fix your HTML and Accessibility issues, wrap your main card in a <main> tag and your .attribution in a <footer> tag. Also, your page should always contain one <h1> element. Also, in line #21 of your HTML you have misspelt your href attribute as hred.
Try using nested Flexbox's to create the layout of content inside the card.
I can't see the active states in your design.
(pseudo classes are indicated by : and always go before pseudo elements, indicated by ::, if they are used together)I hope that's helpful. Let me know if you would like further clarification. Besides all that, the actual size of your card is spot on. It is centered as well. You don't need to make it anymore responsive. Your image styling is correct as well :D
The styles that I've specified for the overlay don't seem like they're the most accessible. Any suggestions on how to improve that part are very welcome.
Please feel free to comment on any other feature that could be improved on.
Hi, for the image overlay, here's what I would recommend:
wrap your <img> tag in a <a> tag. This is what should link to the content page when the user clicks on it.
position: relative; on the <img>. Then, use pseudo elements img::before and img::after.
position: absolute; on both of them.
this will create two children of the <img> which will be lifted up from the flow of the document
and will be positioned relative to your <img>
The ::before will be the color.
Set content: ""; (empty string), and
top: 0, left: 0, width: 100%, height: 100%.
set the color of your choice.
the ::after will be the eye.
Set content: "url(eye-icon-here)"; and position it to the center similarly.
Set hover states on the pseudo elements.
For example, img:hover::before and img:hover::after. In the hover pseudo elements, apply opacity: 1;. In img::before and img::after, apply opacity: 0;. This will make it so that when the user hovers on the pseudo elements, the styles appear and when not hovered, nothing happens.
You can make the transition smoother by applying transition: opacity .5s ease; to the ::before and ::after elements.
Besides that, good job. You are kinda getting some HTML errors because of commenting that way and whatever secret stuff you implemented :P
modified the active state but it doesnt work for the main image..
So for the active states, here's what you need to do.
wrap your <img> tag in a <a> tag. This is what should link to the content page when the user clicks on it.
position: relative; on the <img>. Then, use pseudo elements img::before and img::after.
position: absolute; on both of them.
this will create two children of the <img> which will be lifted up from the flow of the document
and will be positioned relative to your <img>
The ::before will be the color.
Set content: ""; (empty string), and
top: 0, left: 0, width: 100%, height: 100%.
set the color of your choice.
the ::after will be the eye.
Set content: "url(eye-icon-here)"; and position it to the center similarly.
Set hover states on the pseudo elements.
For example, img:hover::before and img:hover::after. In the hover pseudo elements, apply opacity: 1;. In img::before and img::after, apply opacity: 0;. This will make it so that when the user hovers on the pseudo elements, the styles appear and when not hovered, nothing happens.
You can make the transition smoother by applying transition: opacity .5s ease; to the ::before and ::after elements.
Additionally, change your div.attribution to footer.attribution. That will solve the last accessibility issue you have.
Hope this helps!
I am a complete beginner at HTML and CSS. I found this a difficult challenge. I know that my code does not allow for mobile friendly devices. I am still trying to figure that out along with alot of other things that I need to improve on. I was able to replicate the challenge in my own way, but it definitely is not a good way. I would like any feed back on how I could make this code better and learn how to make it a more reliable and successful site.
Thank you
Hi! Congrats on completing the challenge :D First off, don't be too harsh on yourself! The content inside the card looks great. The fact that you are commenting your code is impressive. The design doesn't need to be responsive in this challenge so don't worry about it being mobile-friendly.
The main issues that you have at the moment is centering your main component (which will tackle the mobile-screen issue) and the light-blue eye overlay on the image hover. You also have a few Accessibility issues. Lets see how you can fix those:
-put alt attributes on your images and icons.
-Change your div.container to main.container (<main class="container">).
-The whole page needs to have at least one <h1> tag.
min-height: 100vh
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
What this will do is, force your <body> tag to cover 100% of the viewport height (by default, element heights usually depend on inner content height). Then you can turn your <body> into a flex-container, and then use flex-properties to center your content.
Then, apply this CSS to your <main>: margin-block: auto;. Now your content is properly centered!
-you need to set a `position: relative` on your <img>.
-then, create two <img> pseudo elements ::before and ::after. use `position: absolute;` on these.
-on the ::before, set a `content: ""; (empty string), then style it to cover 100% of your <img> and give it the blue color.
-then, set a `content: url(eye-icon-url);` on the ::after. Position it to be at the center.
-then, set both ::before and ::after to show only when hovered on the image. (use :hover pseudo classes)
This has been quite a long comment, I hope it is helpful! Good job and keep learning :D
Hi, your live site isn't up! Could you check it out, I'll be able to help you out then! :)
modified the active state but it doesnt work for the main image..
Hi, congrats on completing the challenge. The content inside the card looks great! I just commented on someone else's solution of the same challenge, and i notice similar issues in yours as well so I'm going to carry my feedback over to here.
-put alt attributes on your images and icons.
-Change your div.cardBG to main.cardBG (<main class="cardBG">).
-Whenever you use a section, it needs to have one heading element inside it,
and the whole page needs to have at least one <h1> tag.
Besides that, I think the rest is good! Keep learning!
First time I worked on something without any issues and it was also the first time I used Grid. Before, I always worked with flex. Felt very satisfied , won't lie😅. Guess there's some progress.
Any feedback will be highly appreciated as always. Thx.
Grid is amazing! I hope I am not breaking community guidelines but i just wanted to say this >D
