Add quotes design

index.html

@@ -120,31 +120,26 @@
 				<p class="tagline2">TodoMVC is a common learning application for popular JavaScript MV* frameworks</p>
 			</div>
 			<div class="span6">
-				<h2>Introduction</h2>
-				<p>
-					Developers these days are spoiled with choice when it comes to selecting an
-					<strong>MV* framework</strong>
-					for structuring and organizing JavaScript web apps. Backbone, Spine, Ember (SproutCore 2.0), JavaScriptMVC... the list of new and stable solutions goes on and on, but just how do you
-					<strong>decide</strong>
-					on which to use in a sea of so many options?
-				</p>
-				<p>
-					To help solve this problem, we created
-					<a href="http://github.com/addyosmani/todomvc">TodoMVC</a>
-					- a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
-				</p>
-				<p>
-					Solutions look and feel the same, have a common simple feature-set and make it
-					<strong>easy</strong>
-					for you to compare the syntax and structure of different frameworks so you can select the one you feel the most comfortable with.
-				</p>
+				<h2>Title</h2>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 			</div>
 		</div>
 		<hr>
 		<div class="row">
 			<div class="span4">
-				<h2>Labs</h2>
-				<p>[text about labs? or something else?]</p>
+				<h2>Thoughts on the project</h2>
+				<blockquote class="quote speech-bubble">
+					<p>Modern JavaScript developers realise an MVC framework is essential for managing the complexity of their apps. TodoMVC is a fabulous community contribution that helps developers compare frameworks on the basis of actual project code, not just claims and anecdotes.</p>
+					<footer>
+						<img src="http://gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=40" width="40" height="40" alt="Michael Mahemoff">
+						<a href="https://github.com/mahemoff">Michael Mahemoff</a>
+					</footer>
+				</blockquote>
 			</div>
 			<div class="span4">
 				<h2>Selecting a Framework</h2>
@@ -262,7 +257,7 @@
 		</div>
 		<hr>
 		<footer class="credit">
-			<p>Brought to you by<a href="https://github.com/addyosmani"><img src="http://www.gravatar.com/avatar/96270e4c3e5e9806cf7245475c00b275?s=40" width="40" height="40" alt="Sindre Sorhus">Addy Osmani</a> and <a href="https://github.com/sindresorhus"><img src="http://www.gravatar.com/avatar/d36a92237c75c5337c17b60d90686bf9.png?s=40" width="40" height="40" alt="Sindre Sorhus">Sindre Sorhus</a></p>
+			<p>Brought to you by<a href="https://github.com/addyosmani"><img src="http://gravatar.com/avatar/96270e4c3e5e9806cf7245475c00b275?s=40" width="40" height="40" alt="Sindre Sorhus">Addy Osmani</a> and <a href="https://github.com/sindresorhus"><img src="http://gravatar.com/avatar/d36a92237c75c5337c17b60d90686bf9.png?s=40" width="40" height="40" alt="Sindre Sorhus">Sindre Sorhus</a></p>
 		</footer>
 	</div>
 	<script src="assets/jquery.min.js"></script>

site/css/main.css

@@ -181,6 +181,49 @@ p .label {
 	padding: 9px 70px 9px 15px;
 }
 
+.quote {
+	border: none;
+	margin: 20px 0;
+}
+
+.quote p {
+	font-size: 17px;
+	line-height: 1.3;
+}
+
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+
+.quote footer {
+	position: absolute;
+	bottom: -60px;
+	left: 12px;
+}
+
+.quote footer img {
+	border-radius: 3px;
+}
+
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
 .popover-title a {
 	font-size: 13px;
 	line-height: 18px;
@@ -189,6 +232,33 @@ p .label {
 	right: 20px;
 }
 
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	left: 20px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+/*
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	width: 0;
+	top: 16px;
+	left: -50px;
+	bottom: auto;
+	border-width: 10px 50px 10px 0;
+	border-color: transparent rgba(255, 255, 255, .5);
+}*/
+
 .zocial.red {
 	background-color: #a82400;
 }