Permalink
Browse files

Add quotes design

  • Loading branch information...
1 parent 1d8e427 commit 884949102f764055c6ce2f0069b236993a8f6d30 @sindresorhus sindresorhus committed Jul 20, 2012
Showing with 86 additions and 21 deletions.
  1. +16 −21 index.html
  2. +70 −0 site/css/main.css
View
@@ -120,31 +120,26 @@ <h2 style="text-align:center;font-weight:300">Scroll down for 30 more framework
<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 @@ <h2 style="text-align:center;font-weight:300">Scroll down for 30 more framework
</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>
View
@@ -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;
}

0 comments on commit 8849491

Please sign in to comment.