Pablo
@pablo-92All comments
- @ghulamabidhassanSubmitted over 1 year ago@pablo-92Posted over 1 year ago
Hi Abid, nice work with the challenge! I've seen that your dark-mode background has a height of 100vh. So, if the page have more height than that, the rest of it hasn't background (making it white like looking). You can easily fix it changing this:
.main { height: 100vh; width: 100%; background-color: #fafafa; }
To this:
.main { min-height: 100vh; width: 100%; background-color: #fafafa; }
In short, you just have to change the height to min-height.
Hope this help you. Have a nice day!
Marked as helpful1 - @JumanjigobezSubmitted over 1 year ago
Hey there :)
Just completed this challenge, the part am confused is on the linear gradient and the part I loved is the Email collection part.
How can I place the two gradients together to get the one like that of the challenge preview?
Otherwise, Thanks in Advance for viewing and trying to Like my solution :)
#KeepCodingKeepTheSpirit
@pablo-92Posted over 1 year agoHi Juma, nice work! If you mean the button gradient, it could be something like:
.button { background: linear-gradient (<first color>, <second color>, <thrid color>, <and as many as you want!>) }
There's some more stuffs you can do with it, like rotate it, or set the amout of space you want a color cover. Look more here.
If this isn't what you meant, let me know, and I'll help you!
1 - @Rafay3305Submitted over 1 year ago
Hey there 👋 So, I almost completed this NFT Preview Card challenge but I am stuck on one problem. Can someone tell me how can I change the background to cyan when we hover over the image? I just could not understand how it works. I have tried absolute positioning and applied height and width of 100% but the div takes an entire page and the cyan color box does not appear within the image. Please share the solution. Thanks
@pablo-92Posted over 1 year agoHi Abdul, nice work with the challenge! I've seen your code and looks like you haven't used a pseudoelement. For your specific question, I'd use an ::before pseudoelement. Of course there's tons of solutions for your issue, but pseudoelements are very useful, and fits perfectly with what you want to do.
The ::before and ::after creates a child of the selected element (selected by the id or the class). You just have be sure the parent has width and height.
Note that the ::before and ::after can't be applied to the <img> element. That's why I use it on the .img-top div and not on the .showcase-img
So let's take a look:
Your HTML:
(Get rid of the div that contains the eye icon.)
<div class="img-top"> <img class="showcase-image" src="images/image-equilibrium.jpg" alt="showcase image"> </div>
This could be it's CSS:
.img-top { width: 300px; /* this is just an example of it's size, you just let the one you have */ height: 300px; position: relative; /* the parent of the ::before must have position: relative */ z-index: 0; /* by default it's 0, but just to be sure */ } .img-showcase { width: 100%; height: 100%; } .img-top::before { content: url(images/icon-view.svg); /* this property adds the eye icon */ width: inherit; height: inherit; border-radius: inherit; /* the inherit value make the ::before to take the same value of it's parent, so, in this case it will have the same width, height and border-radius as .img-top */ background: hsla(178, 100%, 50%, 0.5); /* background with .5 of opacity so it can be like 'semi-transparent' */ display: flex; /* flexbox to center the eye icon */ align-items: center; justify-content: center; position: absolute; opacity: 0; /* this make the ::before to be invisible until you hover it */ transition: 0.2s ease-in-out; /* the transition property allows you to set the time the before will take to appear, and how, once you have hovered it */ z-index: 1; /* this let the ::before to be over the .img-top div */ }
Now the most important, you need to add this to the CSS aswell:
.img-top:hover::before { /* this just adds the :hover function to the ::before we have just created. So when its hovered, it's opacity turns to 1 and it appears */ opacity: 1; cursor: pointer; }
I hope this works for you (if not, just let me know and I'll try my best to help you out). You're doing great! Just keep going; don't give up. There's a lot more to learn! Also, if this helped you, be sure you understand how it works before you go on, it's very important.
Marked as helpful1