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

#html #css #webdev #tutorial

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.

somanathgoudar

🤯 30DaysChallenge - 30 Days Extreme HTML & CSS CHALLENGE 🤯

Somanath Goudar ・ May 19 '21

#html #webdev #frontend #30daysofcode

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

Read next

prince_beec5ccde00b7c6c73 profile image

Toggle Switch Realistic illusion using the core html and core Css Code

Prince -

abhay_yt_52a8e72b213be229 profile image

React.js Explained: A Comprehensive Guide to Building Modern Web Applications

Abhay Singh Kathayat -

kafeel_ahmad profile image

JavaScript Best Practices

Kafeel Ahmad (kaf shekh) -

hamzakhan profile image

🚀 Why TypeScript is Better Than Vanilla JavaScript: A Technical Deep Dive 🛠️

Hamza Khan -