Feelin' The Spirit

Talkin' Points

Type info

Code

	<div class="wrapper">
		<div class="container filter">
			<h1>
				<span class="feelin">Feelin'</span><br />
				<span class="spirit">The Spirit</span>
			</h1>
			<h2>Grant Green</h2>

			<ul class="band">
				<li>Herbie Hancock</li>
				<li>Butch Warren</li>
				<li>Billy Higgins</li>
				<li>Garvin Masseaux</li>
			</ul>

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

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

	@font-face {
		font-family: 'Trade Gothic Bold';
	    src: url('../fonts/trade-gothic-web/TradeGothicLTStd-Bd2.woff2') format('woff2'),
	         url('../fonts/trade-gothic-web/TradeGothicLTStd-Bd2.woff') format('woff');
	    font-weight: bold;
	    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: 'Trade Gothic Light';
	    src: url('../fonts/trade-gothic-web/TradeGothicLTStd-Light.woff2') format('woff2'),
	         url('../fonts/trade-gothic-web/TradeGothicLTStd-Light.woff') format('woff');
	    font-weight: normal;
	    font-style: normal;
	}


	/* ----------- reset & basics --------- */

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

	body {
		background-color: #ccc;
	}

	ul {
		list-style-type: none;
	}

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

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

	.container{
		position: relative;
		height: 0;
  		padding-bottom: 100%;
 		background-image: url('images/feelin-the-spirit.jpg');
  		background-repeat: no-repeat;
  		background-size: cover;
  	}

  	.container:after {
		content: '';
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-image: url('images/worn-sleeve.jpg');
  		background-repeat: no-repeat;
  		background-size: cover;

  		mix-blend-mode: lighten;
  		opacity: 0.95;
  	}

  	/* ------------ typography ---------------------- */

  	h1,
	h2,
	li {
  		font-size: 6px;
  	}

	h1,
	h2 {
  		font-family: 'Trade Gothic Bold';
  		line-height: 1;
		text-transform: uppercase;
  	}

  	h1 {
  		margin-top: 1%;
  		color: #e694c8;
  	}

  	.feelin {
  		margin-left: 18.33%;
  	}

  	.spirit {
  		margin-left: 11.25%;
  	}

	h2 {
  		margin-left: 18.33%;
  		color: #fff;
  	}

  	li {
  		font-family: 'Trade Gothic Light';
  		line-height: 1;
  		text-transform: uppercase;
  		letter-spacing: 0.0325em;
  		color: #83acd6;
  		font-weight: 200;
  	}

  	li:nth-of-type(1) {
  		margin-left: 11.75%;
  	}

  	li:nth-of-type(2) {
  		margin-left: 11.75%;
	}

  	li:nth-of-type(3) {
  		margin-left: 15%;
  	}

  	li:nth-of-type(4) {
  		margin-left: 6.75%;
  	}

  	/* ------------------ filters ------------- */

  	.filter {
		-webkit-filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5);
		filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5);
		opacity: 0.95;
	}

  	/* ------------------- logo --------------------*/

	footer {
		position: absolute;
		top: 26.5%;
		left: 25.25%;
		width: 19%;
		height: 6.3333%;
		color: #83acd6;
	}

	.rectangle {
		position: relative;
		display: block;
		width: 63.6363%;
		height: 47.3684%; /* 18px / 38px */
		background-color: #83acd6;
		float: right;
	}


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

	.elipse {
		display: block;
		width: 36.3636%;
		height: 52.6315%;
		margin-top: 15%;
		margin-right: 0.01%;
		border-radius: 20px / 10px;
		background-color: #83acd6;
		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: 400;
		color: #83acd6;

		float: left;
	}

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

	@media (min-width: 180px) {

		h1,
		h2,
		li {
			font-size: calc( 0.038 * 100vw + -0.84px);
		}

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

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

	}

	@media (min-width: 600px) {

		h1,
		h2,
		li {
			font-size: 22px;
		}

		.label {
			font-size: 12px;
		}

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