Skip to content

Instantly share code, notes, and snippets.

@mhekel

mhekel/index.html

Created April 4, 2026 23:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mhekel/5cb17ccb7050f104cc30a5e7003947a9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mhekel/5cb17ccb7050f104cc30a5e7003947a9 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
index.html
<main id="playing-cards">
<div class="card hearts" id="hearts">
<div class="left heart">K♥</div>
<div class="middle">
<div class="heart">♥</div>
<div class="heart">♥</div>
<div class="heart">♥</div>
</div>
<div class="right heart">K♥</div>
</div>
<div class="card" id="spades">
<div class="left spade">A♠</div>
<div class="middle">
<div class="spade">♠</div>
<div class="spade">♠</div>
<div class="spade">♠</div>
</div>
<div class="right spade">A♠</div>
</div>
<div class="card diamonds" id="diamonds">
<div class="left diamond">7♦</div>
<div class="middle">
<div class="diamond">♦</div>
<div class="diamond">♦</div>
<div class="diamond">♦</div>
</div>
<div class="right diamond">7♦</div>
</div>
</main>
Raw
style.css
@import url("https://fonts.cdnfonts.com/css/sho-card-caps");
/* #5 — playing-cards uses flexbox, centers children, wraps, 20px gap */
#playing-cards {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
/* #6 — each card uses flexbox with space-between */
.card {
display: flex;
justify-content: space-between;
width: 180px;
height: 250px;
border: 1px solid #3c3c3c;
padding: 10px;
font-family: "Sho-Card-Caps", sans-serif;
font-size: 48px;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7),
-1px -1px 0 rgba(255, 255, 255, 0.5);
-webkit-text-stroke: 1px black ;
}
.hearts, .diamonds {
color: red;
}
/* #7 — left aligns to start */
.left {
align-self: flex-start;
}
/* #8 — middle aligns to center AND #10 displays children in a column */
.middle {
align-self: center;
display: flex;
flex-direction: column;
gap: 5px;
}
/* #9 — right aligns to end */
.right {
align-self: flex-end;
}
.spade {
display: inline-block;
width: 48px;
height: 48px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23525252' d='M31.5 41.5a1 1 0 0 0 1-1a1 1 0 0 0-.95-1c-5.95-.56-4.95-6.35-4.95-6.35a8.44 8.44 0 0 0 5.9 2.39c6 0 8.5-5.93 8.5-10.62C41 12.18 28.61 4.12 25 2a2 2 0 0 0-2 0C19.39 4.12 7 12.18 7 24.88c0 4.69 2.55 10.62 8.5 10.62a8.44 8.44 0 0 0 5.9-2.39s1 5.79-4.95 6.35a1 1 0 0 0-.95 1a1 1 0 0 0 1 1Z'/%3E%3Cpath fill='%2345413c' d='M12.5 45.5a11.5 1.5 0 1 0 23 0a11.5 1.5 0 1 0-23 0' opacity='0.15'/%3E%3Cpath fill='%23656769' d='M23 7a2 2 0 0 1 2 0c3.35 2 14.23 9 15.81 20.15a14 14 0 0 0 .19-2.27C41 12.18 28.62 4.13 25 2a2 2 0 0 0-2 0C19.38 4.13 7 12.18 7 24.88a14 14 0 0 0 .19 2.27C8.77 16 19.65 9 23 7'/%3E%3Cpath fill='none' stroke='%2345413c' stroke-linecap='round' stroke-linejoin='round' d='M31.5 41.5a1 1 0 0 0 1-1a1 1 0 0 0-.95-1c-5.95-.56-4.95-6.35-4.95-6.35a8.44 8.44 0 0 0 5.9 2.39c6 0 8.5-5.93 8.5-10.62C41 12.18 28.61 4.12 25 2a2 2 0 0 0-2 0C19.39 4.12 7 12.18 7 24.88c0 4.69 2.55 10.62 8.5 10.62a8.44 8.44 0 0 0 5.9-2.39s1 5.79-4.95 6.35a1 1 0 0 0-.95 1a1 1 0 0 0 1 1Z' stroke-width='1'/%3E%3C/svg%3E");
}
.heart {
display: inline-block;
width: 48px;
height: 48px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%2345413c' d='M12.5 45.5a11.5 1.5 0 1 0 23 0a11.5 1.5 0 1 0-23 0' opacity='0.15'/%3E%3Cpath fill='%23ff6242' d='M24 11.93a10 10 0 0 1 10-10c7 0 10 7 10 12.5C44 29 30.17 38.35 25.51 41.09a3 3 0 0 1-3 0C17.83 38.35 4 29 4 14.43C4 8.9 7 1.93 14 1.93a10 10 0 0 1 10 10'/%3E%3Cpath fill='%23ff866e' d='M13.5 6.93a10.49 10.49 0 0 1 9.6 6.24a1 1 0 0 0 1.8 0a10.49 10.49 0 0 1 9.6-6.24c5 0 8.06 3.39 9.5 7.38c0-5.5-3-12.38-10-12.38a10 10 0 0 0-10 10a10 10 0 0 0-10-10c-6.95 0-10 6.88-10 12.38c1.44-3.99 4.5-7.38 9.5-7.38'/%3E%3Cpath fill='none' stroke='%2345413c' stroke-linecap='round' stroke-linejoin='round' d='M24 11.93a10 10 0 0 1 10-10c7 0 10 7 10 12.5C44 29 30.17 38.35 25.51 41.09a3 3 0 0 1-3 0C17.83 38.35 4 29 4 14.43C4 8.9 7 1.93 14 1.93a10 10 0 0 1 10 10' stroke-width='1'/%3E%3C/svg%3E");
}
.club {
display: inline-block;
width: 48px;
height: 48px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23353434' d='M34.05 16.05a10.5 10.5 0 1 0-20.1 0a10.5 10.5 0 1 0 7.51 18.73a5.1 5.1 0 0 1-5 5.68a1 1 0 0 0-.95 1a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1a1 1 0 0 0-.95-1a5.1 5.1 0 0 1-5-5.68a10.5 10.5 0 1 0 7.51-18.73Z'/%3E%3Cpath fill='%23000' d='M12.5 45.5a11.5 1.5 0 1 0 23 0a11.5 1.5 0 1 0-23 0' opacity='0.15'/%3E%3Cpath fill='%23656769' d='M24 7.5a10.5 10.5 0 0 1 10.2 8a10.3 10.3 0 0 0 .3-2.5a10.5 10.5 0 0 0-21 0a10.3 10.3 0 0 0 .3 2.5a10.5 10.5 0 0 1 10.2-8'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M34.05 16.05a10.5 10.5 0 1 0-20.1 0a10.5 10.5 0 1 0 7.51 18.73a5.1 5.1 0 0 1-5 5.68a1 1 0 0 0-.95 1a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1a1 1 0 0 0-.95-1a5.1 5.1 0 0 1-5-5.68a10.5 10.5 0 1 0 7.51-18.73Z' stroke-width='1'/%3E%3C/svg%3E");
}
.diamond {
display: inline-block;
width: 48px;
height: 48px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='M12.5 45.5a11.5 1.5 0 1 0 23 0a11.5 1.5 0 1 0-23 0' opacity='0.15'/%3E%3Cpath fill='%23ff6242' d='M23.2 42.1L9 23.26a1 1 0 0 1 0-1.2L23.2 3.21a1 1 0 0 1 1.6 0L39 22.06a1 1 0 0 1 0 1.2L24.8 42.1a1 1 0 0 1-1.6 0'/%3E%3Cpath fill='%23ff866e' d='M10.39 25.16L23.2 8.21a1 1 0 0 1 1.6 0l12.81 17L39 23.26a1 1 0 0 0 0-1.2L24.8 3.21a1 1 0 0 0-1.6 0L9 22.06a1 1 0 0 0 0 1.2Z'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M23.2 42.1L9 23.26a1 1 0 0 1 0-1.2L23.2 3.21a1 1 0 0 1 1.6 0L39 22.06a1 1 0 0 1 0 1.2L24.8 42.1a1 1 0 0 1-1.6 0' stroke-width='1'/%3E%3C/svg%3E");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment