hi, any feedback on my work would be highly appreciated. Thank you
Lakhvider Singh
@Ls6375All comments
- @Abdul400Submitted almost 3 years ago@Ls6375Posted almost 3 years ago
Just put background: url(/images/bg-intro-desktop.png), hsl(0, 100%, 74%) into body tag it will fix the dim background issue.
use the background property as layer wise for example if we put img url in first like then it will be on the top background.... background : (it will be on top ),(top - 1 or second position )... and so on
Marked as helpful1 - @RUTVIK-SANATHARASubmitted almost 3 years ago
Hello eveyone ! This task is code for moblie view ,Please give your some suggestion for my coding skills and how to improve
@Ls6375Posted almost 3 years agoYour code is not good cause you only designed this mobile always go for responsive apporoach.
Seems like you are completing these projects in hurry , I will suggest to take your time and code the design as it is given in the challenge.
0 - @RyusseSubmitted almost 3 years ago
collaboration with mo-adell
@Ls6375Posted almost 3 years agoI thing you didn't completed this project and just uploaded it in hurry..
Problems it doesn't have footer down below it doesn't have reviews section it doesn't have background image as it was there in solution and few fonts color doesn't match
0 - @TomasScerbakSubmitted almost 3 years ago
I couldn't figure it out how to make view-icon to stay white on hover. Any help would be appreciated.
@Ls6375Posted almost 3 years agouse display block on the image it will fix the extra overlay issue
0 - @SamarthTripathi-DesignSubmitted almost 3 years ago
- Can some one tell my how to extend my background image to the right
- Border radius does not seem to give the smooth curve shaped expected for the buttons, its seems to be kinada cut
@Ls6375Posted almost 3 years agobackground-size: contain; to cover the full background Give alpha value to the background shadow // GIve some transparcy to black color border-radius: 20px // always set border radius in px this will fix the round border issue tnx
Marked as helpful1 - @purushotham91Submitted almost 3 years ago
This is my second challange on front end mentor. I would like to know if there are any better way to name my class names. Most of the time i am stuck in deciding the class names for the elements. Is there any way or practice to write the class names without wasting much time or does it get better with more practice?
@Ls6375Posted almost 3 years agoHey there I have checked your css code & I have found that you have given class name to each and everything in you html. Listen it is not necessary to give name to each class you can just use selector to select that element for example
<div> <p>hi <span> There </span> </p> </div> you can simple use div p span to access the particular element in you stylesheetyou can also see my Respostry where I have completed the same project using very few classes
https://github.com/Ls6375/Frontend-Projects_Frontend-Mentor/tree/main/4.%20nft-preview-card-component-main
Marked as helpful0 - @inesriahiSubmitted almost 3 years ago
Hi, I have implemented the hovering effect over the image using another div that changes its opacity when the link hovers. However, I think that this is not the best way to do this, maybe using pseudo-elements is better. I tried to implement this but the ::after element is not displayed.
Please tell me some advice regarding this.
Also, when the image hovers, you may notice a bar under the image that is covered by the overlay. I don't know why it is showing although I am setting all the margins and paddings to 0.
I appreciate your help, Thank you in advance
@Ls6375Posted almost 3 years agoJust put the display Block in you img tag it will solve the issue of extra space below the image
Refer to this link if you wanna know further about it https://codeutility.org/image-inside-div-has-extra-space-below-the-image/ thnx
1 - @milen-nenkovSubmitted almost 3 years ago
Hi,
I used
background-blend-mode
for the hover effect on the image. I think the color is not the same like the design but it is close.Could you please let me know how you would have approached this?
Regards Milen
@Ls6375Posted almost 3 years agoAdd overlay div in the image container. div-container img div-overlay
set div-overlay postion abosolute top 0 left 0 and width 100% h= 100% and put img and background-color inside it ## set it's opcatity to 0 set div-container position relative
now on hovering the div-container sets the div-overlay opacity to 1
if you still can't understand to my repositry
https://github.com/Ls6375/Frontend-Projects_Frontend-Mentor/tree/main/4.%20nft-preview-card-component-main
0 - @fraserwatSubmitted almost 3 years ago@Ls6375Posted almost 3 years ago
You did pretty good job. I have found that, most of solutions of this challenge are missing one thing and i.e. The "image-avatar.png" border should be only visible when we hover on the "Jules Wyvern" & this is tricky to do that's why most people just skipped or they might didn't noticed the differences in design folder.
0 - @MikevPeerenSubmitted almost 3 years ago
I tried to implement Glassmorphism for this component as a new thing. However It didn't really "work" is this because the background colours are close to each other?
@Ls6375Posted almost 3 years agoYou did preety good job. I have found that, most of solution are missing one thing and i.e. The "image-avatar.png" border should be only visible when we hover on the "Jules Wyvern" & this is tricky to do that's why most people just skipped or they might didn't noticed the differences in design folder.
0