Skip to content
OverviewSolutions
2
Comments
2

Joseph Cobbinah Ofori

@joecobbAccra, Ghana60 points

I'm an experienced software developer with a rekindle passion for UI design and want to get better.

Latest solutions

Latest comments

  • Joseph Cobbinah Ofori•60
    @joecobb

    @nikhil149 That's a great first attempt! I just want to make few suggestions which will make your solution even better.

    1. You can add the following css to your to properly center your product-container. It will place the product-container right in the middle of the body.

    body{ justify-content: center; height: 100vh; }

    1. Usually all fonts and colors, et cetera used in the design are all in the style-guide.md file. If you view the file, you will realize that two fonts are used.

    All the fonts can be found at fonts.google.com. For convenience sake I will put a link here which you include in the head of you document. It has all the two fonts.

    <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:ital,wght@0,500;1,700&display=swap" rel="stylesheet">

    Use font-family: 'Fraunces', serif; for the bold title as well as the price. and Montserrat for all others.

    Marked as helpful
  • Joseph Cobbinah Ofori•60
    @joecobb

    Hello Alfiekadalfie, Hope you are good. You need to apply the following css to your parent div.

    <div class="flex-container"> <div id="the-content"> </div> </div>

    .flex-container{ display: flex; height: 100vh; justify-content: center; align-items: center; }

    Marked as helpful