CSS Grid: Info Card

css-grid-info-card.markdown

CSS Grid: Info Card

Coffee card design and info inspired by VCR Malaysia Background image: https://www.pexels.com/photo/person-holding-a-golden-scoop-3737652/

A Pen by Olivia Ng on CodePen.

License.

index.pug

main
	.coffee-card
		h1.name Kaw Kaw 
			br
			| Mountain
		.info Haw flakes / Mixed Berries / Chocolate / Raisins
		.location 
			strong Papua New Guinea
			|, Eastern Highland
		.type
			.checkbox
				input(type="checkbox" id="espresso" checked)
				label(for="espresso") Espresso
			.checkbox
				input(type="checkbox" id="filter")
				label(for="filter") Filter
		.date
			span.side-title Roast Date
			| 20.08.2020
		.weight
			span.side-title Net Wt.
			| 250G
			
		.footnote Roasted in Malaysia
		.site www.vcr.my
		.pattern
		.square.one
		.square.two
		.strip
		
	.coffee-card
		h1.name Santa
			br 
			| Barbara
		.info Dark Chocolate / Praline / Hazelnut / Caramel
		.location
			| Bahia,
			strong Brazil
		.type
			.checkbox
				input(type="checkbox" id="espresso")
				label(for="espresso") Espresso
			.checkbox
				input(type="checkbox" id="filter" checked)
				label(for="filter") Filter
		.date
			span.side-title Roast Date
			| 20.08.2020
		.weight
			span.side-title Net Wt.
			| 250G
			
		.footnote Roasted in Malaysia
		.site www.vcr.my
		.pattern.pattern-two
		.square.one
		.square.two
		.strip

script.js

//☕️

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

body {
	background: url("https://assets.codepen.io/567707/bg-coffee-bag.jpg") no-repeat
		center center / cover;
	font-family: "Roboto Mono", sans-serif;
	width: 100%;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 14px;
	min-height: 100vh;
	display: flex;
	align-items: center;
}

* {
	box-sizing: border-box;
}

strong {
	font-weight: 500;
}

main {
	line-height: 0;
	position: relative;
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	padding: 3% 5%;
	@media (min-width: 1600px) {
		margin: auto;
		transform: translateX(-20%);
	}
	img {
		width: 100%;
		height: 100vh;
		object-fit: cover;
		object-position: top left;
		max-width: 1400px;
		@media (min-width: 1100px) {
			height: auto;
		}
	}
}

.coffee-card {
	flex: 1;
	max-width: 430px;
	min-width: 380px;
	display: grid;
	grid-template-columns: 1.2fr 1fr min-content;
	grid-auto-rows: min-content;
	background: #fdfdfd;
	margin: 2rem;
	line-height: 1.5;
	position: relative;
	box-shadow: 0 4px 0 -2px #ddd, 1px 1px 0 0 #f7f7f7;

	&:before,
	&:after {
		z-index: -1;
		position: absolute;
		content: "";
		bottom: 35px;
		left: 10px;
		width: 50%;
		top: 80%;
		max-width: 300px;
		background: #777;
		box-shadow: 0 35px 20px #777;
		transform: rotate(-4deg);
	}
	&::after {
		transform: rotate(4deg);
		right: 10px;
		left: auto;
	}

	> * {
		padding: 0.6rem 1.2rem;
	}
	h1 {
		font-size: clamp(2.2rem, 4.2vw, 3rem);
		line-height: 1;
		font-weight: 500;
	}
	.name {
		grid-column: 1 / -1;
		grid-row: 2;
		padding-bottom: 1.2rem;
	}

	.info,
	.location,
	.type,
	.pattern {
		grid-column: 1 / span 2;
	}
	.date,
	.weight {
		transform: rotate(180deg);
		writing-mode: vertical-lr;
		padding: 1.2rem 0;
	}
	.date,
	.weight,
	.footnote,
	.site {
		font-size: 85%;
	}
	.date {
		grid-row: 3 / span 4;
		grid-column: 3 / 4;
	}
	.footnote {
		grid-column: 1 / 2;
	}
	.weight {
		grid-row: 7 / span 1;
		grid-column: 3 / 4;
		min-height: 10rem;
	}
	.pattern {
		grid-row: 6 / span 2;
		min-height: 16.5rem;
		background-repeat: repeat;
	}
}

.side-title {
	display: inline-block;
	margin-bottom: 0.75rem;
	border-bottom: 0.5px dashed;
	padding: 0 0.8rem 0.75rem;
}

.name,
.info,
.location,
.weight {
	border-bottom: 0.5px dashed;
}
.info,
.location,
.type,
.footnote {
	border-right: 0.5px dashed;
}

.checkbox {
	display: inline-block;
	pointer-events: none;
	&:nth-child(1) {
		margin-right: 30px;
	}
	input {
		height: 0;
		width: 0;
		overflow: hidden;
		position: absolute;
		z-index: -1;
		&:checked + label:after {
			content: "";
			position: absolute;
			width: 22px;
			height: 5px;
			background: black;
			left: 3px;
			transform: rotate(-45deg);
			top: 10px;
			border-radius: 5px;
		}
	}
	label {
		padding: 5px 20px 5px 30px;
		position: relative;
		&:before {
			content: "";
			position: absolute;
			border: 1px dashed;
			width: 18px;
			height: 18px;
			left: 0;
		}
	}
}

//decorative
.strip {
	grid-column: 1 / 3;
	grid-row: 1;
}

.square {
	background: black;
	&.one {
		grid-row: 1;
		grid-column: 3/4;
		height: 2.5rem;
	}
	&.two {
	}
}

.pattern {
	background-image: repeating-radial-gradient(
			circle at 60%,
			#eee,
			#eee 3px,
			transparent 4px,
			#eee 5px
		),
		repeating-radial-gradient(
			circle at 45%,
			#999,
			#999 3px,
			transparent 4px,
			#999 5px
		);
	background-size: 200%;
}

.pattern-one {
	background-image: radial-gradient(#999 15%, transparent 16%),
		radial-gradient(#bbbbbb 15%, transparent 16%),
		linear-gradient(45deg, transparent 48%, #666 48%, #666 52%, transparent 52%),
		linear-gradient(-45deg, #fff 48%, #999 48%, #999 52%, #fff 52%);
	background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
	background-position: 0 0, 10px 10px, 0 0, 0 0;
}

.pattern-two {
	background-image: repeating-radial-gradient(
		ellipse at right,
		#888 10%,
		#888 1px,
		transparent 1px,
		transparent 3px,
		#888 3px,
		#888 4px,
		transparent 4px,
		transparent 5px,
		#888 5px,
		#888 6px,
		transparent 6px,
		#888 6px,
		#888 7px,
		transparent 7px,
		transparent 8px,
		#888 8px,
		#888 9px,
		transparent 9px,
		transparent 10px
	);
	background-size: 20px 40px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet" />