Lee-Way

Talkin' Points

Type info

Code

	<div class="wrapper">
		<div class="container">

			<img src="images/lee-morgan.png" alt="Picture of Lee Morgan playing the trumpet">
			<h1><span>lee-<br /></span>way</h1>

			<div class="band">
				<ul>
					<li>Lee Morgan</li>
					<li>Jackie McLean</li>
					<li>Bobby Timmons</li>
					<li>Paul Chambers</li>
					<li>Art Blakey</li>
				</ul>
			</div>

			<footer class="logo">
				<span class="rectangle"></span>
				<span class="elipse"></span>
				<span class="label">Blue Note</span>
			</footer>

		</div>
	</div>

	@font-face {
		font-family: 'league gothic';
		src: url("../fonts/leaguegothic-regular-webfont.woff2") format("woff2"),
			 url("../../fonts/leaguegothic-regular-webfont.woff") format("woff");
		font-weight: normal;
		font-style: normal;
	}

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

	@font-face {
		font-family: 'clarendon';
		src: url("../fonts/clarendon-web/ClarendonLTStd.woff2") format("woff22"),
			 url("../fonts/clarendon-web/ClarendonLTStd.woff") format("woff");
		font-weight: normal;
		font-style: normal;
	}

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

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

	body {
		background-color: #ccc;
	}


	ul {
		list-style: none;
	}

	img {
		max-width: 100%
	}


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


	.wrapper {
		width: 100%;
  		max-width: 600px;
  		margin: 1rem auto;
  		border: 5px solid #fff;
  	}

	.container{
		position: relative;
		height: 0;
  		padding-bottom: 100%;
  		background-color: #dc2c15;
  		background: url("images/sleeve.gif");
  		background-size: cover;
	}

	img {
    	position: absolute;
    	bottom: 0;
    	left: 62.5%;
    	display: block;
    	width: 30%; /* required to make image fluid */
    	clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
  	}

 	h1 {
		position: absolute;
		bottom: 18.5%;
		left: 10.5%;
		font-family: 'clarendon';
		color: #fff;
		font-size: 44px;
		line-height: 0.65;
		letter-spacing: 0.031em;
	}

	h1 span {
		padding-left: 15%;
	}

	.band {
		padding-top: 11.33%;
		padding-left: 71.8333%;
	}

	.band li {
		font-family: 'league gothic';
		font-weight: bold;
		line-height: 1;
		letter-spacing: 0.5px;
		color: #211d1d;
	}

	li:first-of-type {
		color: #eefff2;
	}

	li:nth-child(2) {
		padding-left: 10%;
	}

	footer {
		position: absolute;
		top: 11.33%;
		left: 5%;
		width: 19%;
		height: 6.3333%;
		color: #000;
	}

	.rectangle {
		position: relative;
		display: block;
		width: 63.6363%;
		height: 47.3684%; /* 18px / 38px */
		border: 1px solid #000;
		float: right;
	}


	.rectangle:after {
		content: 'The Finest in Jazz';
		position: absolute;
		bottom: 0;
		font-size: 2px;
		padding-left: 2%;
	}

	.elipse {
		display: block;
		width: 36.3636%;
		height: 52.6315%; /* 20px / 38px */
		margin-top: 15%;
		margin-right: 0.01%;
		border-radius: 20px / 10px;
		border: 1px solid #000;
		margin-bottom: 8px;
		float: left;
	}

	.elipse:after {
		content: '';
		padding: 2%;
	}

	.label {
		padding-top: 3%;
		padding-left: 1%;
		font-family: 'Trade Gothic';
		text-transform: uppercase;
		font-size: 2px;
		font-weight: 600;
		color: #000;

		float: left;
	}


	/* ------------ queries and locks ------------ */


	@media (min-width: 180px) {

		h1 {
			font-size: calc(0.2714 * 100vw + -4.852px);
		}

		.band li {
			font-size: calc(0.0523 * 100vw + -1.414px);
		}

		.label {
			font-size: calc(0.0238 * 100vw + -2.28px);
		}

		.rectangle:after {
			font-size: calc(0.0166 * 100vw + -0.988px);
		}

	}

	@media (min-width: 600px) {

		h1 {
			font-size: 158px;
		}

		.band li {
			font-size: 30px;
		}

		.label {
			font-size: 12px;
		}

		.rectangle:after {
			font-size: 9px;
		}
	}