DEV Community

Cover image for Day 22/30 : Amazing Profile Cards Design Using HTML and CSS
Somanath Goudar
Somanath Goudar

Posted on

Day 22/30 : Amazing Profile Cards Design Using HTML and CSS

Welcome to Day 22 of this Challenge. This is what I created today.

➜ Here is the Demo :
Amazing Profile Cards Design

➜ Video Tutorial :


➜ Source Code :
https://www.futurecodersweb.com/2021/06/amazing-profile-cards-design-using-html.html

➜ Instagram Post and Reel for Day 22 :
See Post and Reel


Hey, If You don't know what is happening here. Don't Worry, I am doing a crazy challenge 😅. Read More about it from the post below.

Support Me :
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 Follow Me on Instagram
👉 Follow Future Coders on Instagram
👉 Subscribe to My Main Channel
👉 Subscribe to Channel Created for this Challenge


Top comments (4)

Collapse
 
louislow profile image
Louis Low • Edited

I recreated it with the Yogurt CSS in just a few minutes without writing CSS. Just my two cents.


<body class="font-default bg-charcoal-100 flex justify-center items-center">
  <div class="relative p-4 h-24 w-72 flex flex-col justify-center items-start bg-white rounded shadow-lg">
    <div class="pb-2">Bailey Wonger</div>
    <div class="flex flex-gap-2 justify-start items-center">
      <div class="h-6 w-6 bg-gray-400 rounded-full"></div>
      <div class="h-6 w-6 bg-gray-400 rounded-full"></div>
      <div class="h-6 w-6 bg-gray-400 rounded-full"></div>
    </div>
    <div class="absolute -top-4 right-3">
      <img class="h-24 w-auto filter saturate-4 brightness-4 contrast-2 rounded shadow" src="https://picsum.photos/400?random=1">
    </div>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
somanathgoudar profile image
Somanath Goudar • Edited

Woah!! That's just amazing. Mind Blown.
Btw I didnt know about Yogurt CSS.

Wait.. Did u create yogurt?
Just checked it and its just really amazing

Collapse
 
louislow profile image
Louis Low • Edited

Thanks. I created it two years ago. Just for use in my workplace and my private projects. I mainly use this tool for embedded (IoT) applications. After that, the release to the public has already come true. I hope you enjoy it.

Oh yes, this month June 2021 will release version 1.1.6 on my birthday. Tons of new utilities!

Thread Thread
 
somanathgoudar profile image
Somanath Goudar

Will definitely check the documentation and make use of it.. Really its just Amazing. Thank you