DEV Community

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

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

somanathgoudar profile image Somanath Goudar ・1 min read

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


Discussion (4)

Collapse
loouislow profile image
Loouis 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 Author • 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
loouislow profile image
Loouis 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 Author

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

Forem Open with the Forem app