CodePen Challenge - The Gnarly Grid

codepen-challenge-the-gnarly-grid.markdown

CodePen Challenge - The Gnarly Grid

A Pen by substance on CodePen.

License.

index.pug

- function makeText() { 
- const lorem = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum veritatis eaque necessitatibus, explicabo vero hic, perspiciatis unde minus error consectetur, quos sunt officiis ad repellendus pariatur eligendi tempora praesentium tenetur';
- const loremArray = lorem.split(' ');
- const amountOfText = Math.floor(Math.random() * (30 - 10) + 10);
- const text = loremArray.slice(0, amountOfText);
- return text.join(' ') + '.';
- }

- for (let i = 1; i < 20; i++)
	.card(
		style='background-image:url(' + `https://picsum.photos/id/${i + 19 * i}/600/300` + ');'
	)
		div
			h2 Card Title
			p #{makeText()}

scripts

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

style.scss

html {
	font: 500 100%/1.4 system-ui;
}

body {
	margin: 0;
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.card {
		width: 32.7%;
		height: 400px;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		position: relative;
		margin-bottom: 1rem;
		overflow: hidden;
		transition: all 0.4s ease-in-out;
		@media screen and (max-width: 1200px) {
			width: 49%;
		}
		@media screen and (max-width: 800px) {
			width: 100%;
		}
		&:before {
			content: " ";
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 0;
			background: linear-gradient(
				to bottom,
				rgba(0, 0, 0, 0) 0%,
				rgba(0, 0, 0, 0.65) 100%
			);
		}
		div {
			position: absolute;
			bottom: 25px;
			left: 0;
			color: #fff;
			padding-left: 25px;
			h2 {
				font-size: 51.5px;
				color: #fff;
				line-height: 50px !important;
				text-shadow: 0 0.5px 0.5px rgb(0 0 0 / 80%);
				text-transform: uppercase;
				margin: 0 0 0.5rem;
			}
			p {
				margin: 0;
				text-shadow: 0 0.5px 0.5px rgb(0 0 0 / 80%);
			}
		}
	}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/s3colors/1.0/s3-colors.min.css" rel="stylesheet" />

Very Dope Organized Display of images - the responsiveness is badass. Seems to look perfect and collapse properly on all types of droids, iphones, tablets. and tested on 3 browsers.