Det går att skriva dessa tecken som "vanligt" :hearts:.
Googla "utf5 hearts" så får man tecken som går att kopiera in som vanliga tecken.
Det är nog den enklaste varianten.
Här är en enklare variant där man kan jobba med CSS-klasser. PS, exemplet är inte helt korrekt utan visar bara hur man kan tänka och kombinera HTML elementet och CSS klassen, exemplet saknar hur man tex får in sitt hjärter i ekvationen.
.hearts {
font-color: red;
}
<div class="card hearts">A</div>
PS. Uppgiften säger inget om hur snyggt det skall vara, så man kan representera ett hjärter ess som [:hearts: A] eller som en handritad HTML/CSS element eller som en bild.
Det går att skriva dessa tecken som "vanligt" :hearts:. Googla "utf5 hearts" så får man tecken som går att kopiera in som vanliga tecken. Det är nog den enklaste varianten.
Eller ja, det kan vara lika enkelt att jobba med bilder på kort. https://commons.wikimedia.org/wiki/Category:SVG_playing_cards
En tredje variant är att jobba med en bild på alla kort och definera CSS sprites. Följande bild går nog att fixa bakgrunden så den går att använda: https://commons.wikimedia.org/wiki/Category:SVG_playing_cards#/media/File:Atlasnye_playing_cards_deck.svg
Läs mer om CSS sprites. https://dbwebb.se/guide/kom-igang-med-objektorienterad-programmering-i-php/grafisk-representation-av-tarning#grafik2
Här är en enklare variant där man kan jobba med CSS-klasser. PS, exemplet är inte helt korrekt utan visar bara hur man kan tänka och kombinera HTML elementet och CSS klassen, exemplet saknar hur man tex får in sitt hjärter i ekvationen.
PS. Uppgiften säger inget om hur snyggt det skall vara, så man kan representera ett hjärter ess som [:hearts: A] eller som en handritad HTML/CSS element eller som en bild.