Skip to content
OverviewSolutions
9
Comments
10
Lakhvider Singh
@Ls6375

All comments

  • Lakhvider Singh•170
    @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 helpful
    1
  • RUTVIK-SANATHARA•190
    @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

    ecommerce-product-page-main

    2
    Lakhvider Singh•170
    @Ls6375Posted almost 3 years ago

    Your 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
  • Lakhvider Singh•170
    @Ls6375Posted almost 3 years ago

    I 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
  • Lakhvider Singh•170
    @Ls6375Posted about 3 years ago

    use display block on the image it will fix the extra overlay issue

    0
  • Samarth Tripathi•320
    @SamarthTripathi-DesignSubmitted about 3 years ago
    1. Can some one tell my how to extend my background image to the right
    2. Border radius does not seem to give the smooth curve shaped expected for the buttons, its seems to be kinada cut

    OrderSummary

    1
    Lakhvider Singh•170
    @Ls6375Posted about 3 years ago

    background-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 helpful
    1
  • Purushotham Sirasapalli•30
    @purushotham91Submitted about 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?

    Responsive design, CSS Flex box

    2
    Lakhvider Singh•170
    @Ls6375Posted about 3 years ago

    Hey 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 stylesheet

    you 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 helpful
    0
  • Ines Riahi•110
    @inesriahiSubmitted about 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

    NFT Card Component

    2
    Lakhvider Singh•170
    @Ls6375Posted about 3 years ago

    Just 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 Nenkov•80
    @milen-nenkovSubmitted about 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

    NFT Preview Component

    2
    Lakhvider Singh•170
    @Ls6375Posted about 3 years ago

    Add 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
  • Lakhvider Singh•170
    @Ls6375Posted about 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
  • MikevPeeren•2,100
    @MikevPeerenSubmitted about 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?

    Next.js TailwindCSS

    1
    Lakhvider Singh•170
    @Ls6375Posted about 3 years ago

    You 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