card

In this example below you will see how to do a card with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jmanhart, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jmanhart ©
  • HTML
  • CSS
  • JavaScript
    <div id="content">
	<div class="card--container">
		<div class="card--body">
			<div class="card--content">
				<div class="icon"></div>
				<span class="card--title">This is a title and cool oh yeah great</span>
				<span class="card--author">By John Manhart</span>
			</div>
			<div class="card--meta">
				<span class="card--tag">750k</span>
				<span class="card--tag">works with This</span>
			</div>
		</div>
	</div>
</div>


/*Downloaded from https://www.codeseek.co/jmanhart/card-egpYyx */
    html, body {
	background-color: rgba(0, 0, 0, 0);
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#content {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* #45d0a4 */

.card--container {
	background: #45d045;
  background: linear-gradient(135deg, #45d045 0%, #45d0a4 100%);
	width: 20em;
	height: 25em;
	box-sizing: content-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	border-radius: 1em;
}
.card--body {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.card--content {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0em 2em;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-around;
}

.card--meta {
	background: rgba(0,0,0,0.2);
	width: 100%;
	box-sizing: border-box;
	padding: 0em 2em;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}
.icon {
	height: 4em;
	width: 4em;
	padding: 0em 0em;
	margin: 0em 0em;
	background: rgba(0,0,0,0.2);
}
.card--title{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	margin: 0em 0em;
	color: rgba(255, 255, 255, 1);
	font-size: 1.75em;
	line-height: 1.15em;
}
.card--author{
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
	color: rgba(255,255,255,0.6);
	font-size: 1.00em;
	line-height: 1.15em;
}
.card--tag{
	font-family: 'Open Sans', sans-serif;
	margin: 2.00em 0em;
	color: rgba(255, 255, 255, 1);
	font-size: 0.75em;
	line-height: 1.15em;
}


/*Downloaded from https://www.codeseek.co/jmanhart/card-egpYyx */
    

Comments