Playing Cards with HTML+CSS

index.html

<section class="cardholder">
	<div class="cards hearts">
		<span class="a">♥</span>
	</div>
	<div class="cards hearts">
		<span class="b">♥</span>
		<span class="b">♥</span>
	</div>
	<div class="cards hearts">
		<span class="c">♥</span>
		<span class="c">♥</span>
		<span class="c">♥</span>
	</div>
	<div class="cards diamonds">
		<span class="a">♦</span>
	</div>
	<div class="cards diamonds">
		<span class="b">♦</span>
		<span class="b">♦</span>
	</div>
	<div class="cards diamonds">
		<span class="c">♦</span>
		<span class="c">♦</span>
		<span class="c">♦</span>
	</div>
	<div class="cards spreads">
		<span class="a">♠</span>
	</div>
	<div class="cards spreads">
		<span class="b">♠</span>
		<span class="b">♠</span>
	</div>
	<div class="cards spreads">
		<span class="c">♠</span>
		<span class="c">♠</span>
		<span class="c">♠</span>
	</div>
	<div class="cards clubs">
		<span class="a">♣</span>
	</div>
	<div class="cards clubs">
		<span class="b">♣</span>
		<span class="b">♣</span>
	</div>
	<div class="cards clubs">
		<span class="c">♣</span>
		<span class="c">♣</span>
		<span class="c">♣</span>
	</div>
</section>

playing-cards.markdown

Playing Cards

A Pen by Shafayat Hossain on CodePen.

License.

style.less

.cardholder
{
	.cards
	{
		margin-left:10px;
		margin-top:10px;
	}
}
.cards
{
	display:block;
	float:left;
	height :300px;
	width :200px;
	border :solid 2px;
	border-radius: 5px;
	position :relative ;
	font-size :30px;
	background-color:#fff11h;
	text-align:center;
	box-sizing:border-box;
	.a
	{
		position:absolute;
		box-sizing:border-box;
		display:block;
		height:80px;
		width:80px;
		font-size:80px;
		top:50%;
		left:50%;
		margin-top:-40px;
		margin-left:-40px;
		transform:scale(2.5);
	}
	&:before,&:after
	{
		content:"";
    	display :block ;
		height :50px;
		width :50px;
		position :absolute ;
		text-align:center;
		font-size:50px;
		box-sizing:border-box;
	}
	&:before
	{
		top:0;
    	left:0;
	}
	&:after
	{
		bottom:0;
    	right:0;
		transform:rotate(180deg);
	}
	&.hearts
	{
		color:red;
		&:before,&:after
		{
			content:"♥";
		}
	}
	&.diamonds
	{
		color:red;
		&:before,&:after
		{
			content:"♦";
		}
	}
	&.spreads
	{
		&:before,&:after
		{
			content:"♠";
		}
	}
	&.clubs
	{
		&:before,&:after
		{
			content:"♣";
		}
	}
	.b
	{
		display:inline-block;
		box-sizing:border-box;
		width:100%;
		height:50%;
		line-height:200px;
		//margin-left:-20px;
		font-size:80px;
		text-align:center;
		&:first-child
		{
			&:before
			{
				font-size:40px;
				position:absolute;
				content:"2";
				width:100%;
				text-align:right;
			}	
		}
		&:nth-child(2)
		{
			transform:rotate(180deg);
			&:after
			{
				content:"2";
				font-size:40px;
				position:absolute;
				width:100%;
				text-align:right;
			}	
		}
		&:before
		{
			right:10px;
			top:-80px;
		}
		&:after
		{
			left:-10px;
			bottom:20px;
		}
	}
	.c
	{
		display:inline-block;
		box-sizing:border-box;
		width:100%;
		height:33.3%;
		line-height:100px;
		//margin-left:-20px;
		font-size:80px;
		text-align:center;
		&:first-child
		{
			&:before
			{
				font-size:40px;
				position:absolute;
				content:"3";
				width:100%;
				text-align:right;
			}	
		}
		&:nth-child(3)
		{
			transform:rotate(180deg);
			&:after
			{
				content:"3";
				font-size:40px;
				position:absolute;
				width:100%;
				text-align:right;
			}	
		}
		&:before
		{
			right:10px;
			top:-30px;
		}
		&:after
		{
			left:-10px;
			bottom:20px;
		}
	}
}