Skip to content
OverviewSolutions
13
Comments
19
abedzeidan
@Abed001

All comments

  • abedzeidan•340
    @Abed001Posted about 1 month ago

    hello @vietthong31 great solution , althought there are some details that differ from the design, which is on large devices as I the input part and the result part should have the same width like two equal halfs , second in the middle there is a space ,I removed that space in my project by giving all the card a white background. hope that was helpful.

    Marked as helpful
    0
  • abedzeidan•340
    @Abed001Posted about 2 months ago

    hello great solution Ethan Bolton,

    i was searching for a cake and when i deleted the search the product fetching didnt return to initial state which is fetching all the products again.And also i think when i change the category even if there is text inside the search input i think it should be deleted, and the category should work althought this is my opinion hope that was helpful .

    0
  • abedzeidan•340
    @Abed001Posted about 2 months ago

    it needs a bigger shadow on the white background part

    0
  • legaldrummer•30
    @fullspeccoderSubmitted 10 months ago

    What did you find difficult while building the project?

    This challenge provided a means to build my understanding of box shadows. I didn't much of a problem with anything else.

    Which areas of your code are you unsure of?

    I wanted to be sure that the code was organized and the styling names made as much sense as I could make of it.

    Do you have any questions about best practices?

    Was the use of the spans appropriate in the ways that I had used them? Or should I have used a different block element?

    Blog Preview Card

    1
    abedzeidan•340
    @Abed001Posted 10 months ago

    hi @legaldrummer try this for your card hover .cardshadow{ box-shadow: 10px 10px rgba(0,0,0);

    } .cardshadow:hover { box-shadow: 15px 15px rgba(0, 0, 0); /* Increase shadow size and opacity on hover */ } in your css for the active state hope I helped.

    0
  • abedzeidan•340
    @Abed001Posted 10 months ago

    Hello Sankalpa Sarkar great solution but i saw that you didnt make the active state which is when you hover the card the shadow becomes bigger .try this in your css :.cardshadow{ box-shadow: 10px 10px rgba(0,0,0);

    } .cardshadow:hover { box-shadow: 15px 15px rgba(0, 0, 0); /* Increase shadow size and opacity on hover */ }hope i helped keep going!

    Marked as helpful
    0
  • abedzeidan•340
    @Abed001Posted 11 months ago

    great solution try to add some duration on transition on hovering it will make it better visually it will eleminate the sudden change.keep going

    0
  • megaiera•10
    @megaieraSubmitted 11 months ago

    this is my project, i'm sure my css could be better. i tried using grid at some point but it was nightmare-ish to say the least. i don't know what i was doing wrong, but i'll try again with a different project. i can't place the attributions where i wanted to, if anyone could tell me why justify-content and align-items don't work at all that'd be cool.

    is there anything i should do differently in the future? good habits to get? thanks in advance.

    Blog Preview Card CSS HTML

    3
    abedzeidan•340
    @Abed001Posted 11 months ago

    hello, I saw your comment and tried to see your code, since not everyone's coding is the same I tried my best. first, I added margin-top to attribution and it worked because i think there is something in the shadow may it taller I am not sure . second I added a hover state on the card and you should also add hover state on the .<h2><a href="/"> HTML & CSS foundations </a> </h2>. here is my added code:

    .cardshadow{ box-shadow: 10px 10px rgba(0,0,0);

    } .cardshadow:hover { box-shadow: 15px 15px rgba(0, 0, 0); /* Increase shadow size and opacity on hover */ } .attribution{ margin-top:50px; border:2px solid white; color: var(--Grey); font-size: 10px; word-spacing: 2px; }keep going

    1
  • abedzeidan•340
    @Abed001Posted 11 months ago

    Hi KwabenaIzen, nice work on this challenge. One suggestion I have is to make the card smaller on the large screen and on the mobile screen make it a flex column so the image should be at the top. keep going.

    0
  • abedzeidan•340
    @Abed001Posted 11 months ago

    Hi Paulo Borges good job on finishing this project it looks great, although I have two suggestions, the first one is to try to use h-screen or height of 100vh to make the yellow color go through all the screen because there is still white space on top and bottom. and second, you have to add active states when hovering the card not just on the text try to use this in your CSS:

    .cardshadow{ box-shadow: 10px 10px rgba(0,0,0);

    } .cardshadow:hover { box-shadow: 15px 15px rgba(0, 0, 0); /* Increase shadow size and opacity on hover */ } keep going!!

    0
  • Isaiah Williams•40
    @Zayacode96Submitted 11 months ago

    I utilized some CSS variables for the main colors to make implementing the color design easier. Relatively easy project for my beginning skill level, although I drew a blank on some CSS properties like "font-style". I wrote "text-style" instead and was wondering why it didn't work. End up not using it after.

    ALL IN ALL, check out my version and code. Would appreciate it. Thank you guys.

    BLOG PREVIEW CARD

    5
    abedzeidan•340
    @Abed001Posted 11 months ago

    Hello good job, I know that there are a lot of comments here but there is also one thing to add which is the active state when the card hovers the shadow should become bigger you can use something like this resource: https://www.freecodecamp.org/news/css-box-shadow-property-with-examples/

    and also this is the code i have used : .cardshadow{ box-shadow: 10px 10px rgba(0,0,0);

    } .cardshadow:hover { box-shadow: 15px 15px rgba(0, 0, 0); /* Increase shadow size and opacity on hover */ } keep going!!

    Marked as helpful
    1
  • abedzeidan•340
    @Abed001Posted 11 months ago

    Nice work on this challenge! A suggestion I have is to add a hover effect on text to turn the text to yellow . and on the card something like this :cardshadow{ box-shadow: 10px 10px rgba(0,0,0);}

    .cardshadow:hover { box-shadow: 15px 15px rgba(0, 0, 0); /* Increase shadow size and opacity on hover */ } . keep going!!

    2
  • abedzeidan•340
    @Abed001Posted 11 months ago

    Nice work on this challenge! A suggestion I have is to use the yellow color that is found inside the style sheet that you have inside the style guide.it's better for the vision. also, you can add some margin on the bottom because, on the mobile screen, the card has a lower position and finally you have to add on the hover effect . just like this: .cardshadow{ box-shadow: 10px 10px rgba(0,0,0);

    } .cardshadow:hover { box-shadow: 15px 15px rgba(0, 0, 0); /* Increase shadow size and opacity on hover */ } . keep going!!

    1