Skip to content
OverviewSolutions
3
Comments
5
i000o
@i000o

All comments

  • i000o•70
    @i000oPosted 13 days ago

    Nice fades on the hover states! Your link to code shows 404 not found :(

    0
  • Zeke Achas•70
    @zekeer21Submitted 13 days ago
    What are you most proud of, and what would you do differently next time?

    It's a bit of a challenge since the colors are not given and I have to experiment and test every possible colors. But it's worth the try.

    What challenges did you encounter, and how did you overcome them?

    Picking the right colors and the right sizes.

    Social Link Profile Main

    4
    i000o•70
    @i000oPosted 13 days ago

    In the given free files, there is a file called style-guide.md which has some more specific colours and typefaces you can opt for so that you're not guessing. It's viewable in your text editor.

    Marked as helpful
    0
  • i000o•70
    @i000oPosted 16 days ago

    Here are some design refinements for you:

    1 You can add some border-radius like you have on the card to the image too in order to match the design closer.

    2 I believe the font for this design is called 'Figtree' which you can find available anywhere.

    3 In order to add a drop-shadow to the card itself, I used the box-shadow property. You can also thicken the border outline with border-width too. Just a touch.

    4 You can set all your body text to text align: left.

    5 Maybe add a bit of margin to the bottom element so the author name isn't so close to the edge of the card.

    Marked as helpful
    1
  • i000o•70
    @i000oPosted 17 days ago

    You can use Flexbox for this challenge, not Grid; I did the same thing. Just use: display: flex; flex-direction: column and centre-align with justify-content: center; and align-items: center;.

    The correct font-family is in the design sheet in Figma, I believe it's called "Outfit" for this challenge.

    0
  • i000o•70
    @i000oPosted 18 days ago

    CSS: Set img height: auto; to preserve the aspect ratio so it can flex proportionally in all directions in combo with your max-width of 100%.

    0