Just wrote an article about how to code this with CSS. I'm new to writing stuff. Would love to hear what you guys think

Where can we see the article?

@kamen oh shit. My dumb ass brain forgot to give the link

Here you go

https://medium.com/@so_deep.dev/...

@kamen thanks for pointing that out

I'm horrible at CSS :(

@Xoka everybody once was, most are still.
Cheers

@devGaara have you tried to also round-corner the badge on the left side ?

@dder @Xoka I'm too.. lot of stuff to learn

Very nice!

@FelisPhasma thank you :D

Looks good. Wouldn't a element for the badge/ribbony thing be a better solution? In that scenario the content of the ribbon isn't stored in your stylesheet, which might be a problem when having different types.

@gyzoor oh ya.. I should have thought that through. My bad 😅

@gyzoor after can just be replaced with a span

So I really liked the article. It would be helpful to have the code fragments in the text highlighted differently than bold. But I still enjoyed the article. Its one way to achieve the card 👌🏼

@Flamestro thank you! And I'll keep the suggestion in mind

It has been long time since I write css. I wanted to challenge myself and tried to create that card just by looking the picture you posted. Here is my result:
https://codepen.io/bekiruzun/pen/...

I used a different approach. I used borders to create little triangle.

And by looking at the code you write, I think you can make css classes prettier. You can use "header" instead of "card__header" which makes css selectors better like ".card .header" instead of ".card .card__header"

@hack damn! This is so cool! Thanks for reaching me a new trick!

@hack I like to follow BEM conventions. I usually use scss pre-processor. I did not wanna have to explain what that is in the same post. That's why I wrote
.card .card__header.

.card{
&__header{
}
}

This is how I usually write

@devGaara yeah I see now. Didn't know about BEM convention. Looked it up a little bit. I guess its not for me :/

I prefer:

.card {
.header {
}
}

@hack understandable

@24th-Dragon awesome! I did not know about attr(). Thank you!

@24th-Dragon y ?

@24th-Dragon fair. Especially about the interactivity. But I thought css scales well as well...

I also don’t like the usage of text in ::before.content
You cannot select and copy that text.

@24th-Dragon Hey bro, I was updating the article and I wanted to give credits for suggesting the change. What do write your name as?

@24th-Dragon aight, cool!

@assmaster NICE