Speakin' My Piece

Talkin' Points

Type info

Code

	<div class="container">
		<div class="sub-1">
			<h1>
				<span class="speakin">speakin'</span><br />
				<span class="my-piece">my piece</span>
			</h1>
			<h2 class="quintet">horace parlan quintet</h2>
		</div>

		<ul>
			<li>Stanley Turrentine</li>
			<li>Tommy Turrentine</li>
			<li>George Tucker</li>
			<li>Al Harwood</li>
		</ul>

		<b></b>
		<b></b>
		<b></b>
		<b></b>
		<img src="images/horace-parlan.jpg" alt="Horace Parlan">
		<b></b>
		<b></b>
		
	</div>

	/* fonts
	--------------------------------------------------------------------- */

	@font-face {
		font-family: 'Trade Gothic';
	    src: url('fonts/trade-gothic-web/TradeGothicLTStd.woff2') format('woff2');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'Bulletin';
	    src: url('fonts/bulletin_typewriter_mn_regular-webfont.woff2') format('woff2');
		font-weight: normal;
		font-style: normal;
	}


	/* reset
	--------------------------------------------------------------------- */

	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	body {
		padding-top: 3rem;
	}

	img {
		display: block;
		max-width: 100%;
	}

	ul {
		list-style: none;
	}


	/* type
	--------------------------------------------------------------------- */

	h1, h2 {
		font-family: bulletin;
		font-size: 32px;
		font-weight: 400;
		color: #901c1c;
	}

	li {
		font-family: 'trade gothic';
	}

	/* layout
	--------------------------------------------------------------------- */

	.container {
		width: 600px;
		height: 600px;
		margin: 0 auto;
		background: url('images/worn-white-sleeve.jpg');
		background-repeat: no-repeat;

		display: grid;
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: 20px 400px 90px 90px;

		overflow: hidden;
	}

	.sub-1 {
		grid-column: 3 / 8;
		grid-row: 3 / 5;
		margin-top: 3em;
		text-align: right;
		line-height: 1;
	}

	.sub-1 .speakin {
		margin-right: 12%;
	}
	.sub-1 .my-piece {
		margin-right: 27.5%;
	}

	.sub-1 .quintet {
		margin-right: 5.5%;
	}

	ul {
		padding-top: 1.5%;
		padding-left: 1.5%;
		grid-column: 1 / 7;
		grid-row: 3;
	}

	li {
		display: inline-block;
		font-size: 0.9rem;
	}

	b {
		display: block;
		width: 75px;
		height: 258px;
		background: #000;
		opacity: 0.9	;

		grid-row: 2 / 3;
	}

	/* ---------- block positioning ---------- */

	img {
		margin-top: 110px;
		margin-left: -6px;
		transform: rotate(5deg);
		grid-column: 5;
	}

	b:nth-of-type(1) {
		margin-top: 140px;
		margin-left: -2px
		transform: rotate(-3deg);
		grid-column: 1;
	}

	b:nth-of-type(2) {
		margin-top: 50px;
		margin-left: 4px;
		transform: rotate(2deg);
		grid-column: 2;
	}

	b:nth-of-type(3) {
		margin-top: 80px;
		transform: rotate(4deg);
		grid-column: 3;
	}

	b:nth-of-type(4) {
		transform: rotate(2deg);
		grid-column: 4;
	}

	b:nth-of-type(5) {
		margin-top: 190px;
		margin-left: -10px;
		grid-column: 6;
	}

	b:nth-of-type(6) {
		transform: rotate(5deg);
		margin-top: 80px;
		margin-left: 5px;
		grid-column: 7;
	}