Skip to content
OverviewSolutions
9
Comments
17

Muhammad Amoo

@DruxAMBIbadan, Nigeria220 points

Hi there! 👋 I'm Muhammad, a passionate web developer 👩🏿‍💻 on a journey to strengthen my skills as a full-stack developer 🚀. Open to internships, job opportunities, and collaborations. Excited to share my projects with you!

I’m currently learning...

🔹Next.js 🌐🔸TypeScript 🚀🔹Python ➰ 💎🔸Tailwind CSS 🎨

Latest solutions

View more solutions

Latest comments

  • Muhammad Amoo•220
    @DruxAMB

    Your project is amazing man but one of the purpose of using frontend mentor is to build a project that look like that of frontend mentor design.

    Hope this was helpful?

    Happy Coding: DruxAMB

  • Muhammad Amoo•220
    @DruxAMB

    You did great man, but you need to give your card-image a default height so as the images hight to match and prevent overflow.

    Hope this was helpful?

    Happy Coding: DruxAMB

  • Muhammad Amoo•220
    @DruxAMB

    Well done man, you did really great on the challenge. You need to change the styling of the card items so that it will display 4 countries on each column as shown in the default design. Here is a reference from my project. <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"> {filterApi.map((mapping) =>{ const {numericCode, flags, name, population, region, capital} = mapping; return ( <div key={numericCode} className="card overflow-hidden w-64 rounded-lg shadow-lg hover:shadow-xl mb-10 cursor-pointer m-auto"> <img src={flags.png} className="w-64 h-36" alt="DruxAMB png" /> <div className="p-3 mt-2 mb-5"> <div className="font-black text-md my-2 text-start">{name.common}</div> <div className="flex text-sm font-semibold">Population: <p className="font-extralight ml-1">{population }</p></div> <div className="flex text-sm font-semibold">Region: <p className="font-extralight ml-1">{region}</p></div> <div className="flex text-sm font-semibold">Capital: <p className="font-extralight ml-1">{capital}</p></div> </div> </div>

    Using something like this will help you <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">

    Hope this was helpful*?

    Happy Coding!!: DruxAMB

    Marked as helpful
  • Muhammad Amoo•220
    @DruxAMB

    Well done man, you did really well on the project. You need to change the styling of the card items so that it will display 4 countries on each column as shown in the default design. Here is a reference from my project. <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"> {filterApi.map((mapping) =>{ const {numericCode, flags, name, population, region, capital} = mapping; return ( <div key={numericCode} className="card overflow-hidden w-64 rounded-lg shadow-lg hover:shadow-xl mb-10 cursor-pointer m-auto"> <img src={flags.png} className="w-64 h-36" alt="DruxAMB png" /> <div className="p-3 mt-2 mb-5"> <div className="font-black text-md my-2 text-start">{name.common}</div> <div className="flex text-sm font-semibold">Population: <p className="font-extralight ml-1">{population }</p></div> <div className="flex text-sm font-semibold">Region: <p className="font-extralight ml-1">{region}</p></div> <div className="flex text-sm font-semibold">Capital: <p className="font-extralight ml-1">{capital}</p></div> </div> </div>

    Using something like this will help you <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">

    Hope this was helpful*?

    Happy Coding!!: DruxAMB

  • Muhammad Amoo•220
    @DruxAMB

    Well done dev, you did really great on this project. You need to change the styling of the card items so that it will display 4 countries on each column as shown in the default design. Here is a reference from my project. <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"> {filterApi.map((mapping) =>{ const {numericCode, flags, name, population, region, capital} = mapping; return ( <div key={numericCode} className="card overflow-hidden w-64 rounded-lg shadow-lg hover:shadow-xl mb-10 cursor-pointer m-auto"> <img src={flags.png} className="w-64 h-36" alt="DruxAMB png" /> <div className="p-3 mt-2 mb-5"> <div className="font-black text-md my-2 text-start">{name.common}</div> <div className="flex text-sm font-semibold">Population: <p className="font-extralight ml-1">{population }</p></div> <div className="flex text-sm font-semibold">Region: <p className="font-extralight ml-1">{region}</p></div> <div className="flex text-sm font-semibold">Capital: <p className="font-extralight ml-1">{capital}</p></div> </div> </div>

    Using something like this will help you <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">

    Hope this was helpful*?

    Happy Coding!!: DruxAMB

  • Muhammad Amoo•220
    @DruxAMB

    Well done man, you did really great on this project. You need to change the styling of the card items so that it will display 4 countries on each column as shown in the default design. Here is a reference from my project. <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"> {filterApi.map((mapping) =>{ const {numericCode, flags, name, population, region, capital} = mapping; return ( <div key={numericCode} className="card overflow-hidden w-64 rounded-lg shadow-lg hover:shadow-xl mb-10 cursor-pointer m-auto"> <img src={flags.png} className="w-64 h-36" alt="DruxAMB png" /> <div className="p-3 mt-2 mb-5"> <div className="font-black text-md my-2 text-start">{name.common}</div> <div className="flex text-sm font-semibold">Population: <p className="font-extralight ml-1">{population }</p></div> <div className="flex text-sm font-semibold">Region: <p className="font-extralight ml-1">{region}</p></div> <div className="flex text-sm font-semibold">Capital: <p className="font-extralight ml-1">{capital}</p></div> </div> </div>

    Using something like this will help you <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">

    Hope this was helpful*?

    Happy Coding!!: DruxAMB

View more comments