Commit 88494910 authored by Sindre Sorhus's avatar Sindre Sorhus

Add quotes design

parent 1d8e4275
...@@ -120,31 +120,26 @@ ...@@ -120,31 +120,26 @@
<p class="tagline2">TodoMVC is a common learning application for popular JavaScript MV* frameworks</p> <p class="tagline2">TodoMVC is a common learning application for popular JavaScript MV* frameworks</p>
</div> </div>
<div class="span6"> <div class="span6">
<h2>Introduction</h2> <h2>Title</h2>
<p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Developers these days are spoiled with choice when it comes to selecting an tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
<strong>MV* framework</strong> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
<strong>decide</strong> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
on which to use in a sea of so many options? proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</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>
</div> </div>
</div> </div>
<hr> <hr>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h2>Labs</h2> <h2>Thoughts on the project</h2>
<p>[text about labs? or something else?]</p> <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>
<div class="span4"> <div class="span4">
<h2>Selecting a Framework</h2> <h2>Selecting a Framework</h2>
...@@ -262,7 +257,7 @@ ...@@ -262,7 +257,7 @@
</div> </div>
<hr> <hr>
<footer class="credit"> <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> </footer>
</div> </div>
<script src="assets/jquery.min.js"></script> <script src="assets/jquery.min.js"></script>
......
...@@ -181,6 +181,49 @@ p .label { ...@@ -181,6 +181,49 @@ p .label {
padding: 9px 70px 9px 15px; 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 { .popover-title a {
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
...@@ -189,6 +232,33 @@ p .label { ...@@ -189,6 +232,33 @@ p .label {
right: 20px; 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 { .zocial.red {
background-color: #a82400; background-color: #a82400;
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment