casprwang · March 12, 2017 20:41
diff --git a/fluid.html b/fluid.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <title></title>

  <style>
    header {
      background: purple;
      color: white;
      padding: 10vmin 1rem;
      text-align: center;
      margin: 0 0 8vmin 0;
    }
    
    header h1 {
      margin: 0;
      font-size: 5rem;
      font-size: calc(24px + (48 - 24) * ((100vw - 300px) / (1600 - 300)));
    }
    
    p {
      max-width: 600px;
      margin: 0 auto 1rem;
      padding: 0 1rem;
      text-indent: 1rem;
    }
    
    body {
      margin: 0;
      font-family: 'Open Sans', sans-serif;
    }
    
    h1 {
      font-family: 'Montserrat', sans-serif;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>

 </head>

 <body>
  <header>
    <h1>Fluid Header</h1>
  </header>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus nisi voluptate delectus illo consequatur voluptas aut, enim nesciunt, veniam beatae voluptates sint id at corrupti magnam velit unde debitis minus!</p>
  <p>Quae quia numquam dolore porro neque magnam saepe magni, aut, ut itaque explicabo facere exercitationem nam cumque voluptatibus molestias adipisci labore fugit maiores qui, similique dignissimos non, consectetur! Ullam, ratione.</p>
  <p>Explicabo pariatur, provident doloribus minima ex ut, impedit accusantium maxime culpa sequi voluptate necessitatibus earum. Recusandae minima dicta, earum praesentium! Dolorum in enim, sunt ullam sed provident accusamus culpa numquam.</p>
  <p>Est corporis non illum dolorum inventore dolores consectetur quod reiciendis asperiores similique quas excepturi vero vel accusantium delectus cupiditate veritatis dolorem voluptatem, veniam cumque laboriosam, nesciunt eum nisi consequuntur placeat.</p>
  <p>Minus sapiente eos ad deleniti quia necessitatibus, itaque quibusdam, nisi explicabo soluta facere sed harum iste nihil vel asperiores dolor adipisci rerum ea nobis voluptatum cum illum velit doloremque reiciendis!</p>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title></title>

	<style>
	header {
	background: purple;
	color: white;
	padding: 10vmin 1rem;
	text-align: center;
	margin: 0 0 8vmin 0;
	}

	header h1 {
	margin: 0;
	font-size: 5rem;
	font-size: calc(24px + (48 - 24) * ((100vw - 300px) / (1600 - 300)));
	}

	p {
	max-width: 600px;
	margin: 0 auto 1rem;
	padding: 0 1rem;
	text-indent: 1rem;
	}

	body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	}

	h1 {
	font-family: 'Montserrat', sans-serif;
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	</style>

	</head>

	<body>
	<header>
	<h1>Fluid Header</h1>
	</header>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus nisi voluptate delectus illo consequatur voluptas aut, enim nesciunt, veniam beatae voluptates sint id at corrupti magnam velit unde debitis minus!</p>
	<p>Quae quia numquam dolore porro neque magnam saepe magni, aut, ut itaque explicabo facere exercitationem nam cumque voluptatibus molestias adipisci labore fugit maiores qui, similique dignissimos non, consectetur! Ullam, ratione.</p>
	<p>Explicabo pariatur, provident doloribus minima ex ut, impedit accusantium maxime culpa sequi voluptate necessitatibus earum. Recusandae minima dicta, earum praesentium! Dolorum in enim, sunt ullam sed provident accusamus culpa numquam.</p>
	<p>Est corporis non illum dolorum inventore dolores consectetur quod reiciendis asperiores similique quas excepturi vero vel accusantium delectus cupiditate veritatis dolorem voluptatem, veniam cumque laboriosam, nesciunt eum nisi consequuntur placeat.</p>
	<p>Minus sapiente eos ad deleniti quia necessitatibus, itaque quibusdam, nisi explicabo soluta facere sed harum iste nihil vel asperiores dolor adipisci rerum ea nobis voluptatum cum illum velit doloremque reiciendis!</p>
	</body>

	</html>