patrick91 · January 30, 2014 22:16
diff --git a/jsbin.AXiFehu.css b/jsbin.AXiFehu.css
 body {
  color: #424242;
  
  font: 21px/32px "Courier New";
 }

 h1 {
  font-weight: normal;  
  font-family: Garamond;
  
  font-size: 30px;

  text-align: center;
  color: #777;
 }

 h1 span {
  color: #212121;
 }

 h1 span:before {
  content: '';
  display: inline-block;
  
  height: 40px;
  width: 2px;
  background: #212112;
  
  position: relative;
  top: 10px;
  margin-left: -2px;
  margin-right: -2px;

  -webkit-transform: rotate(20deg);
 }

 article {
  width: 70%;
  margin: 0 auto 100px;
  max-width: 700px;
 }

 p {
  margin-bottom: 20px;
 }
diff --git a/jsbin.AXiFehu.html b/jsbin.AXiFehu.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta name="description" content="Hidden memories" />
 <meta charset=utf-8 />
 <title>JS Bin</title>
 </head>
 <body>
  <header>
    <h1>Hidden Memori<span>es</span></h1>
  </header>
  
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati maiores ut cumque quasi distinctio! Reprehenderit totam voluptates placeat tempore voluptatibus omnis soluta molestiae eligendi accusamus ducimus cumque eos architecto consequatur!</p>
    <p>Fugiat voluptatem <strong>maiores</strong> necessitatibus eos quibusdam inventore quo quisquam officia alias voluptatum architecto unde aliquam reprehenderit! Animi vitae voluptates adipisci eveniet ipsum in aperiam nulla aliquam incidunt laboriosam rem quaerat.</p>
    <p>Similique odit praesentium illum! Pariatur tempora quo eligendi voluptatem inventore incidunt qui nostrum id placeat consectetur. Hic dicta consequatur neque beatae rerum animi et saepe sunt quasi optio quis aspernatur.</p>
    <p>Inventore nesciunt fugit at sunt hic voluptas minus illum expedita vitae quaerat dolorum qui suscipit ut assumenda eaque ipsa vel incidunt exercitationem omnis tempore ea fuga velit doloremque facere nam?</p>
    <p>Tempora laborum beatae totam praesentium facere a perspiciatis aliquam voluptates vero quis odit dolores suscipit! Nesciunt similique suscipit neque aliquid veniam adipisci rerum ullam enim iusto magni ut itaque a.</p>
    <p>At nisi accusamus voluptate hic dolor quia nostrum officiis ab officia assumenda impedit similique exercitationem voluptas distinctio est aliquid eum! Laboriosam voluptatem ad minus excepturi ea aspernatur iusto officiis nisi.</p>
    <p>Dignissimos voluptate aspernatur distinctio temporibus repudiandae autem quos itaque cum aperiam magni quia minus commodi nostrum iusto suscipit ducimus corrupti in molestias? Error unde aperiam soluta minima nostrum tenetur autem.</p>
    <p>Veritatis commodi aut placeat repellat deleniti itaque sapiente accusantium nisi? Maiores totam esse cumque vel sunt nemo at possimus reiciendis adipisci consectetur ipsa animi sequi dolore mollitia itaque quae nihil.</p>
    <p>Cumque impedit ex quod corporis ut voluptates placeat sapiente deleniti consequuntur at hic molestias saepe in dolorum optio? Eligendi temporibus quibusdam magni explicabo minus neque natus ratione illum porro sequi.</p>
    <p>Quasi corporis illum numquam eum deserunt molestiae quidem blanditiis assumenda ipsum reiciendis deleniti accusamus voluptate tempore veritatis omnis expedita voluptatibus laudantium quam amet alias. Repellendus delectus natus nihil aliquam itaque.</p>
  </article>
 </body>
 </html>
	body {
	color: #424242;

	font: 21px/32px "Courier New";
	}

	h1 {
	font-weight: normal;
	font-family: Garamond;

	font-size: 30px;

	text-align: center;
	color: #777;
	}

	h1 span {
	color: #212121;
	}

	h1 span:before {
	content: '';
	display: inline-block;

	height: 40px;
	width: 2px;
	background: #212112;

	position: relative;
	top: 10px;
	margin-left: -2px;
	margin-right: -2px;

	-webkit-transform: rotate(20deg);
	}

	article {
	width: 70%;
	margin: 0 auto 100px;
	max-width: 700px;
	}

	p {
	margin-bottom: 20px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Hidden memories" />
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<header>
	<h1>Hidden Memori<span>es</span></h1>
	</header>

	<article>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati maiores ut cumque quasi distinctio! Reprehenderit totam voluptates placeat tempore voluptatibus omnis soluta molestiae eligendi accusamus ducimus cumque eos architecto consequatur!</p>
	<p>Fugiat voluptatem <strong>maiores</strong> necessitatibus eos quibusdam inventore quo quisquam officia alias voluptatum architecto unde aliquam reprehenderit! Animi vitae voluptates adipisci eveniet ipsum in aperiam nulla aliquam incidunt laboriosam rem quaerat.</p>
	<p>Similique odit praesentium illum! Pariatur tempora quo eligendi voluptatem inventore incidunt qui nostrum id placeat consectetur. Hic dicta consequatur neque beatae rerum animi et saepe sunt quasi optio quis aspernatur.</p>
	<p>Inventore nesciunt fugit at sunt hic voluptas minus illum expedita vitae quaerat dolorum qui suscipit ut assumenda eaque ipsa vel incidunt exercitationem omnis tempore ea fuga velit doloremque facere nam?</p>
	<p>Tempora laborum beatae totam praesentium facere a perspiciatis aliquam voluptates vero quis odit dolores suscipit! Nesciunt similique suscipit neque aliquid veniam adipisci rerum ullam enim iusto magni ut itaque a.</p>
	<p>At nisi accusamus voluptate hic dolor quia nostrum officiis ab officia assumenda impedit similique exercitationem voluptas distinctio est aliquid eum! Laboriosam voluptatem ad minus excepturi ea aspernatur iusto officiis nisi.</p>
	<p>Dignissimos voluptate aspernatur distinctio temporibus repudiandae autem quos itaque cum aperiam magni quia minus commodi nostrum iusto suscipit ducimus corrupti in molestias? Error unde aperiam soluta minima nostrum tenetur autem.</p>
	<p>Veritatis commodi aut placeat repellat deleniti itaque sapiente accusantium nisi? Maiores totam esse cumque vel sunt nemo at possimus reiciendis adipisci consectetur ipsa animi sequi dolore mollitia itaque quae nihil.</p>
	<p>Cumque impedit ex quod corporis ut voluptates placeat sapiente deleniti consequuntur at hic molestias saepe in dolorum optio? Eligendi temporibus quibusdam magni explicabo minus neque natus ratione illum porro sequi.</p>
	<p>Quasi corporis illum numquam eum deserunt molestiae quidem blanditiis assumenda ipsum reiciendis deleniti accusamus voluptate tempore veritatis omnis expedita voluptatibus laudantium quam amet alias. Repellendus delectus natus nihil aliquam itaque.</p>
	</article>
	</body>
	</html>