New Perspective

Talkin' Points

Type info

Code

	<div class="wrapper">
		<div class="container">
			<header>
				<h1><span class="ron">new perspective</span><br/>
					<span class="gold">donald byrd</span>
					<span class="pink">band & voices</span>
				</h1>
			</header>
			<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: '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-light.woff2') format('woff2'),
	         url('../fonts/trade-gothic-web/TradeGothicLTStd-light.woff') format('woff');
	    font-weight: normal;
	    font-style: normal;
	}

	@font-face {
		font-family: 'aurora_condensedregular';
		src: url('../fonts/aurora_condensed_regular-webfont.woff2') format('woff2'),
 			 url('../fonts/aurora_condensed_regular-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}

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

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

	html {
		font-size: 1vw;
	}

	body {
		background-color: #ccc;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	img {
		max-width: 100%
	}

	.group:after {
		content: '';
		display: table;
		clear: both;
	}

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

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

	.container{
		position: relative;
		height: 0;
  		padding-bottom: 100%;
		background-image: url(new-perspective.jpg);
  		background-size: cover;
  		background-color: #fff;
  	}

  	header {
  		padding-top: 19.5%;
  		padding-left: 2%;
  		float: left;
  	}

  	/* ------------ typogrphy ----------- */

	h1 {
  		font-family: 'aurora_condensedregular';
		font-size: 8.8659em;
		letter-spacing: -0.015em;

  		font-weight: normal;
  		font-style: normal;
  		line-height: 0.75;
  		color: #000;

  		text-align: right;
	}

  	.ron {
  		color: #6f0e08;
  	}

  	.pink {
  		color: #e08007;
  	}

  	.gold {
  		color: #cc2a76;
  	}

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

  	footer {
		position: absolute;
		top: 14%;
		left: 12%;
		width: 19%;
		height: 6.3333%;
		color: #999;
	}

	.rectangle {
		position: relative;
		display: block;
		width: 63.6363%;
		height: 47.3684%; /* 18px / 38px */
		border: 1px solid #999;
		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 #999;
		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;
	/*	letter-spacing: 0.3vw; */
		font-weight: 600;
		color: #999;
		float: left;
	}


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

	@media (min-width: 180px) {

		.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: 52px;
			letter-spacing: -0.5px;
		}

		.label {
			font-size: 12px;
		}

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

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