Card

card.markdown

Card

To be completed!

A Pen by Mohamed Moughamir on CodePen.

License.

index.html

<div class="card">
	<div class="card-content">
		<header class="card-content_header">
			<a href="" class="card-account_link">
			<img src="//via.placeholder.com/250x250&text=Flan" alt="Flan" class="card-avatar">
				<span class="card-user">
				<strong class="card-username">Flan</strong>
				<span>&rlm;</span>
			</span>
				<span class="card-usertag">
				<b>Flan</b>
			</span>
			</a>
		</header>
		<article class="card-content_text">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, illo recusandae quam iste laudantium mollitia dolore deleniti amet earum enim nam ratione ex sed labore tempora tenetur autem dolorum facilis?</p>
		</article>
		<div class="card-content_video">
			<div class="video-container">
				<div class="play">
					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 191.255 191.255" style="enable-background:new 0 0 191.255 191.255;" xml:space="preserve" width="32px" height="32px">
						<path d="M162.929,66.612c-2.814-1.754-6.514-0.896-8.267,1.917s-0.895,6.513,1.917,8.266c6.544,4.081,10.45,11.121,10.45,18.833  s-3.906,14.752-10.45,18.833l-98.417,61.365c-6.943,4.329-15.359,4.542-22.512,0.573c-7.154-3.97-11.425-11.225-11.425-19.406  V34.262c0-8.181,4.271-15.436,11.425-19.406c7.153-3.969,15.569-3.756,22.512,0.573l57.292,35.723  c2.813,1.752,6.513,0.895,8.267-1.917c1.753-2.812,0.895-6.513-1.917-8.266L64.512,5.247c-10.696-6.669-23.661-7-34.685-0.883  C18.806,10.48,12.226,21.657,12.226,34.262v122.73c0,12.605,6.58,23.782,17.602,29.898c5.25,2.913,10.939,4.364,16.616,4.364  c6.241,0,12.467-1.754,18.068-5.247l98.417-61.365c10.082-6.287,16.101-17.133,16.101-29.015S173.011,72.899,162.929,66.612z" fill="#45b8ff"/>
					</svg>
				</div>
			</div>
		</div>
	</div>
</div>


<div class="loading">
<div class="card">
	<div class="card-content">
		<header class="card-content_header">
			<a href="" class="card-account_link">
				<div class="card-avatar">
				</div>
			
				<span class="card-user">
				<span class="text-placeholder"></span>
				<span>&rlm;</span>
			</span>
				<span class="card-usertag">
				<span class="text-placeholder"></span>
			</span>
			</a>
		</header>
		<article class="card-content_text">
			<div class="text-placeholder"></div>
			<div class="text-placeholder"></div>
			<div class="text-placeholder"></div>
		</article>
		<div class="card-content_video">
			<div class="video-container">
			</div>
		</div>
	</div>
</div>

</div>

style.scss

@import url('//fonts.googleapis.com/css?family=Open+Sans');
$placeholder: #D3D3D3;
body{
	background: #f5f5f5;
	font-family: 'Open Sans', sans-serif;
}
.card{
	position: relative;
	margin: 0 auto;
	display: block;
	background: #fff;
	width: 580px;
	height: 410px;
	border: 1px solid #e6ecf0;
	border-radius: 3px;
	padding: 9px 12px;
	&-content{
		margin-left: 58px;
		width: auto;
		height: 100%;
		background: #fBfBfB;
		&_header{
			width: 100%;
		}
		&_text{
			p{
				white-space: pre-wrap;
				word-wrap: break-word;
				font-size: 14px;
				line-height: 20px;
			}
		}
		&_video{
			margin-top: 10px;
			background: black;
		}
	}
	&-account{
		&_link{
			text-decoration: none;
		}
	}
	&-avatar{
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: #D3D3D3;
		overflow: hidden;
		margin:{
			top: 3px;
			left: -58px;
		}
		float: left;
		&-image{
			width:100%;
			height: 100%;
		}
	}
	&-user{
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-wrap: normal;
		&name{
			color: #14171a;
			font-size: 14px;
			font-weight: bold;
			&-tag{
				font-size: .9em;
			}
		}
		&tag{
			font-size: 14px;
			color: #657786;
			b{
				font-weight: normal;
				&::before{
					content: '@';
				}
			}
		}
	}
}

.video{
	&-container{
		border-radius: 5px;
  	display: inline-block;
  	overflow: hidden;
  	position: relative;
  	vertical-align: top;
  	width: 100%;
		max-width: 506px;
		min-height: 275px;
	}
	&-player{
	}
}

.play{
  background: rgba(255, 255, 255, 0.25);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
	transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
	&:hover{
		background: rgba(200, 200, 200, 0.30);
		path {
			fill: lighten(#45b8ff, 5%);
		}
	}
}
span.text-placeholder{
	display: inline-block;
	width: 15%;
}
.text-placeholder{
	display: block;
	height: 12px;
	margin: 4px 0;
	width: 100%;
	background: $placeholder;
	&:nth-child(2){
		width: 80%;
	}
	&:nth-child(3){
		width: 60%;
	}
}
.loading{
	.card{
		&-content{
			&_video {
				background: $placeholder;
			}
		}
	}
}