Frontend Mentor | Pablo's profile

All comments

Abid•1,000

@ghulamabidhassanSubmitted over 1 year ago

REST Countries API with color theme switcher (React)

@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 helpful

Jumagobe•1,050

@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

Highly Responsive Coming Soon Page Dev using Basics HTML, CSS & Js

Pablo•250

@pablo-92Posted over 1 year ago

Hi 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!

Abdul Rafay•70

@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

NFT Preview Card

Pablo•250

@pablo-92Posted over 1 year ago

Hi 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 helpful