A Pen by François Lesenne.

index.html

<p class="lines-text-after-before">Reduce testing the browser</p>
	<header class="title"><h1>Text supported by the media</h1></header>
	<br>
	<section>
		<header>
			<h2>quote</h2>
			<p>Self-love, self-glory and beauty of itself, gives the jealousy of others, poverty and other disease more ...</p>
			<h3>Fran&ccedil;ois Lesenne</h3>
		</header>
	</section>
	<hr>
	<section>
		<header>
			<h2>quote</h2>
			<p>The infinitely large fascinates us, the infinitely small scares us, while we 	are small! 
			<br>
				Avont we afraid of us?</p>
			<h3>Fran&ccedil;ois Lesenne</h3>
		</header>
	</section>
	<hr>
	<section>
		<header>
			<h2>quote</h2>
			<p>born slave none of ...</p>
			<h3>Fran&ccedil;ois Lesenne</h3>
		</header>
	</section>
	<footer>
		<p>&copy; 2014 \ <a href="//macreart.com" target="_blank">Macreart</a> \ Fran&ccedil;ois Lesenne</p>
	</footer>

script.js

// TEXT SUPPORTED BY THE MEDIA

// Inspired by https://codepen.io/tg/pen/hgewc and https://codepen.io/frxnz/pen/ajGsh

// Author Joël Lesenne  <https://joellesenne.dev>

style.css

@import url(http://fonts.googleapis.com/css?family=Rye);
@import url(http://fonts.googleapis.com/css?family=Oswald|Open+Sans:400,300);
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

* {
  margin: 0;
  padding: 0;
  border: 0 none;
  position: relative; }

html,
body {
  width: 100%;
  height: 100%;
  text-rendering: optimizeLegibility; }

body {
  background-color: RGBA(243, 241, 237, 1);
  font-size: 62.5%;
  text-align: center;
  -webkit-font-smoothing: antialiased; }

header.title {
  display: block;
  margin: 3% auto;
  width: 90%;
  background-color: RGBA(201, 213, 219, 1);
  height: auto;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  -webkit-box-shadow: 1px 1px 0px RGBA(201, 213, 219, 1), 2px 2px 0px RGBA(201, 213, 219, 1), 3px 3px 0px RGBA(201, 213, 219, 1), 4px 4px 0px RGBA(201, 213, 219, 1), 1px -1px 0px RGBA(201, 213, 219, 1), 2px -2px 0px RGBA(201, 213, 219, 1), 3px -3px 0px RGBA(201, 213, 219, 1), 4px -4px 0px RGBA(201, 213, 219, 1), -1px -1px 0px RGBA(201, 213, 219, 1), -2px -2px 0px RGBA(201, 213, 219, 1), -3px -3px 0px RGBA(201, 213, 219, 1), -4px -4px 0px RGBA(201, 213, 219, 1), -1px 1px 0px RGBA(201, 213, 219, 1), -2px 2px 0px RGBA(201, 213, 219, 1), -3px 3px 0px RGBA(201, 213, 219, 1), -4px 4px 0px RGBA(201, 213, 219, 1);
  box-shadow: 1px 1px 0px RGBA(201, 213, 219, 1), 2px 2px 0px RGBA(201, 213, 219, 1), 3px 3px 0px RGBA(201, 213, 219, 1), 4px 4px 0px RGBA(201, 213, 219, 1), 1px -1px 0px RGBA(201, 213, 219, 1), 2px -2px 0px RGBA(201, 213, 219, 1), 3px -3px 0px RGBA(201, 213, 219, 1), 4px -4px 0px RGBA(201, 213, 219, 1), -1px -1px 0px RGBA(201, 213, 219, 1), -2px -2px 0px RGBA(201, 213, 219, 1), -3px -3px 0px RGBA(201, 213, 219, 1), -4px -4px 0px RGBA(201, 213, 219, 1), -1px 1px 0px RGBA(201, 213, 219, 1), -2px 2px 0px RGBA(201, 213, 219, 1), -3px 3px 0px RGBA(201, 213, 219, 1), -4px 4px 0px RGBA(201, 213, 219, 1);
  border: dashed RGBA(233, 238, 242, 1) 2px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px; }
  @media all and (min-width: 50em) {
    header.title {
      margin: 0 auto;
      width: 80%; } }

.lines-text-after-before, h2 {
  display: table;
  white-space: nowrap; }
  .lines-text-after-before:after, h2:after, .lines-text-after-before:before, h2:before {
    content: '';
    display: table-cell;
    width: 50%;
    background: linear-gradient(transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 2px));
    background-clip: padding; }
  .lines-text-after-before:after, h2:after {
    border-left: 1em solid transparent; }
  .lines-text-after-before:before, h2:before {
    border-right: 1em solid transparent; }

section {
  display: block;
  margin: 3% auto; }

h1, h2, h3 {
  font-family: 'Rye', cursive;
  text-transform: uppercase;
  text-align: center;
  font-weight: 400;
  line-height: 1.5;
  text-shadow: 1px 1px 0px white;
  -webkit-transition: all 0.8s;
  transition: all 0.8s; }

h1 {
  padding: 10px;
  font-size: 2.5em;
  color: RGBA(51, 61, 61, 1); }
  @media all and (min-width: 50em) {
    h1 {
      padding: 15px;
      font-size: 4.5em; } }

h2 {
  padding: 0 15%;
  font-size: 2.5em;
  color: RGBA(51, 61, 61, 1); }
  @media all and (min-width: 50em) {
    h2 {
      padding: 0 30%;
      font-size: 3.5em; } }

h3 {
  padding: 15px 0;
  font-size: 1.3em;
  color: RGBA(194, 215, 232, 1); }
  @media all and (min-width: 50em) {
    h3 {
      padding: 0 35%;
      font-size: 1.5em; } }

p {
  padding: 3% 25%;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.5em;
  font-weight: 100;
  line-height: 1.2;
  text-shadow: 1px 1px 0px white;
  color: RGBA(51, 61, 61, 1);
  -webkit-transition: all 0.8s;
  transition: all 0.8s; }
  @media all and (min-width: 50em) {
    p {
      padding: 3% 30%;
      font-size: 2em; } }

footer {
  margine: 0;
  padding: 0;
  display: block; }

footer p {
  padding: 3%;
  display: inline; }

footer p a {
  text-decoration: none;
  color: RGBA(80, 166, 233, 1);
  box-shadow: 0 2px 0px RGBA(80, 166, 233, 1);
  -webkit-transition: all 0.8s;
  transition: all 0.8s; }

footer p a:hover {
  color: RGBA(194, 215, 232, 1);
  box-shadow: 0 2px 0px RGBA(194, 215, 232, 1); }

TEXT-SUPPORTED-BY-THE-MEDIA.markdown

TEXT SUPPORTED BY THE MEDIA

TEXT SUPPORTED BY THE MEDIA. Inspired by http://codepen.io/tg/pen/hgewc and https://codepen.io/frxnz/pen/ajGsh. Coding by https://joellesenne.dev

A Pen by Joël Lesenne on CodePen.

License.