Skip to content
OverviewSolutions
6
Comments
4
Andrew G. Ayad
@andrew-g-ayad

All comments

  • Andrew G. Ayad•100
    @andrew-g-ayadPosted 6 months ago

    Hi There! Awesome work already! 👏👏 You did a really good job, and your solution looks good to me, but it needs attention to some details to become awesome and perfect!

    • As a best practice, Try setting all margins and paddings to Zero * { margin: 0; padding: 0; }

    • Consider adding equal padding to all sides in the card padding: 1.5rem

    • The correct border width in the design is 1px

    • Try spacing vertically by adding margin-top to the newly added elements

    • Refer to the design to get the correct font sizes

    • Use this piece of code at the top of your CSS file to add the font family to your CSS @font-face { font-family: 'Figtree'; src: url('/assets/fonts/Figtree-VariableFont_wght.ttf'); }

    0
  • Amit-Mahi•60
    @Amit-MahiSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    next time will try to use Sass and stylus

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

    media query

    What specific areas of your project would you like help with?

    media query

    add root variable for the more accessible code

    1
    Andrew G. Ayad•100
    @andrew-g-ayadPosted 7 months ago

    You already did a great job creating root-level custom properties. I recommend you to do the following:

    • don't set heights unless you need to
    • don't use id's to style elements (it works but is not a best practice)
    • use more semantic HTML (for example you could use the h1 tag for the title)
    • Double-check width values in the design

    I highly recommend you give these a go before moving to more advanced tools like sass

    1
  • Andrew G. Ayad•100
    @andrew-g-ayadPosted about 2 years ago

    Hey Cheosphere Your work is awesome! And I loved how accurate it is and the fact you put much effort to make it look as close as possible to the original design. but here's a little trick.. the original card design has a really small amount of extra padding-right

    Try it out and I'm sure your design will match the original design a 100%

    Marked as helpful
    1
  • Muhammad Zohaib•270
    @codefolkSubmitted about 2 years ago

    Cropping and placing the image was frustrating, and didn't find any way to place color in the background. Really need feedback and suggestions. Happy coding.

    Project Tracking Dashboard

    1
    Andrew G. Ayad•100
    @andrew-g-ayadPosted about 2 years ago

    Hello @codefolk This background appears to be a separate HTML element positioned behind the image.

    • So, try creating a new div and style it with the same grey color and the border radius.
    • set the positions to absolute
    • make the z-index: -100
    • give it a width and a height
    • position it behind the hero image

    remember to handle its position to match the design of the mobile version.

    0