framework7rails 0.9.7 → 1.0.0

data/Framework7-0.9.6/kitchen-sink/list-view.html

@@ -0,0 +1,318 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">List View</div>
+    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="list-view" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p>Framework7 allows you to be flexible with list views (table views). You can make them as navigation menus, you can use there icons, inputs, and any elements inside of the list, and even make them nested:</p>
+      </div>
+      <div class="content-block-title">Data list, with icons</div>
+      <div class="list-block">
+        <ul>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Ivan Petrov</div>
+                <div class="item-after">CEO</div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">John Doe</div>
+                <div class="item-after"><span class="badge">5</span></div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Jenna Smith</div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block-title">Links</div>
+      <div class="list-block">
+        <ul>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Ivan Petrov</div>
+                <div class="item-after">CEO</div>
+              </div></a></li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">John Doe</div>
+                <div class="item-after">Cleaner</div>
+              </div></a></li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Jenna Smith</div>
+              </div></a></li>
+        </ul>
+      </div>
+      <div class="content-block-title">Links, no icons</div>
+      <div class="list-block">
+        <ul>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-inner">
+                <div class="item-title">Ivan Petrov</div>
+              </div></a></li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-inner">
+                <div class="item-title">John Doe</div>
+              </div></a></li>
+          <li>
+            <div class="item-divider">Divider Here</div>
+          </li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-inner">
+                <div class="item-title">Ivan Petrov</div>
+              </div></a></li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-inner">
+                <div class="item-title">Jenna Smith</div>
+              </div></a></li>
+        </ul>
+      </div>
+      <div class="content-block-title">Grouped with sticky titles</div>
+      <div class="list-block">
+        <div class="list-group">
+          <ul>
+            <li class="list-group-title">A</li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Aaron </div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Abbie</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Adam</div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="list-group">
+          <ul>
+            <li class="list-group-title">B</li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Bailey</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Barclay</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Bartolo</div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="list-group">
+          <ul>
+            <li class="list-group-title">C</li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Caiden</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Calvin</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Candy</div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="content-block-title">Mixed and nested</div>
+      <div class="list-block">
+        <ul>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Ivan Petrov</div>
+                <div class="item-after">CEO</div>
+              </div></a></li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Two icons here</div>
+              </div></a></li>
+          <li>
+            <div class="item-content">
+              <div class="item-inner">
+                <div class="item-title">No icons here</div>
+              </div>
+            </div>
+            <ul>
+              <li><a href="#" class="item-link item-content">
+                  <div class="item-media"><i class="icon icon-f7"></i></div>
+                  <div class="item-inner">
+                    <div class="item-title">Ivan Petrov</div>
+                    <div class="item-after">CEO</div>
+                  </div></a></li>
+              <li><a href="#" class="item-link item-content">
+                  <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
+                  <div class="item-inner">
+                    <div class="item-title">Two icons here</div>
+                  </div></a></li>
+              <li>
+                <div class="item-content">
+                  <div class="item-inner">
+                    <div class="item-title">No icons here</div>
+                  </div>
+                </div>
+              </li>
+              <li><a href="#" class="item-link item-content">
+                  <div class="item-media"><i class="icon icon-f7"></i></div>
+                  <div class="item-inner">
+                    <div class="item-title">Ultra long text goes here, no, it is really really long</div>
+                  </div></a></li>
+              <li>
+                <div class="item-content">
+                  <div class="item-media"><i class="icon icon-f7"></i></div>
+                  <div class="item-inner">
+                    <div class="item-title">With switch</div>
+                    <div class="item-after">
+                      <label class="label-switch">
+                        <input type="checkbox"/>
+                        <div class="checkbox"></div>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Ultra long text goes here, no, it is really really long</div>
+              </div></a></li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">With switch</div>
+                <div class="item-after">
+                  <label class="label-switch">
+                    <input type="checkbox"/>
+                    <div class="checkbox"></div>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block-title">Mixed, inset</div>
+      <div class="list-block inset">
+        <ul>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Ivan Petrov</div>
+                <div class="item-after">CEO</div>
+              </div></a></li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Two icons here</div>
+              </div></a></li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Ultra long text goes here, no, it is really really long</div>
+              </div></a></li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">With switch</div>
+                <div class="item-after">
+                  <label class="label-switch">
+                    <input type="checkbox"/>
+                    <div class="checkbox"></div>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+        <div class="list-block-label">
+          <p>Here comes some useful information about list above</p>
+        </div>
+      </div>
+      <div class="content-block-title">Tablet inset</div>
+      <div class="list-block tablet-inset">
+        <ul>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Ivan Petrov</div>
+                <div class="item-after">CEO</div>
+              </div></a></li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Two icons here</div>
+              </div></a></li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><i class="icon icon-f7"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Ultra long text goes here, no, it is really really long</div>
+              </div></a></li>
+        </ul>
+        <div class="list-block-label">
+          <p>This list block will look like "inset" only on tablets (iPad)</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/login-screen-embedded.html

@@ -0,0 +1,36 @@
+
+<div class="pages navbar-through">
+  <div data-page="login-screen-embedded" class="page no-toolbar no-navbar no-swipeback">
+    <div class="page-content login-screen-content">
+      <div class="login-screen-title">Framework7</div>
+      <form>
+        <div class="list-block">
+          <ul>
+            <li class="item-content">
+              <div class="item-inner">
+                <div class="item-title label">Username</div>
+                <div class="item-input">
+                  <input type="text" name="username" placeholder="Your username"/>
+                </div>
+              </div>
+            </li>
+            <li class="item-content">
+              <div class="item-inner">
+                <div class="item-title label">Password</div>
+                <div class="item-input">
+                  <input type="password" name="password" placeholder="Your password"/>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="list-block">
+          <ul>
+            <li><a href="#" class="item-link list-button">Sign In</a></li>
+          </ul>
+          <div class="list-block-label">Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/login-screen.html

@@ -0,0 +1,21 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Login Screen</div>
+    <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="login-screen" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p>Framework7 comes with ready to use Login Screen layout. It could be used inside of page or inside of popup (Embedded) or as a standalone overlay:</p>
+      </div>
+      <div class="content-block row">
+        <div class="col-50"><a href="login-screen-embedded.html" class="button">Embedded Into Page</a></div>
+        <div class="col-50"><a href="#" class="button open-login-screen">As Overlay</a></div>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/media-lists.html

@@ -0,0 +1,173 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Media Lists</div>
+    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="media-lists" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p>Media Lists are almost the same as Data Lists, but with a more flexible layout for visualization of more complex data, like products, services, userc, etc. You can even use them in <a href="#" data-popover=".popover-music" class="open-popover">popovers</a></p>
+      </div>
+      <div class="content-block-title">Songs</div>
+      <div class="list-block media-list">
+        <ul>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><img src="http://hhhhold.com/160/d/jpg?1" width="80"/></div>
+              <div class="item-inner">
+                <div class="item-title-row">
+                  <div class="item-title">Yellow Submarine</div>
+                  <div class="item-after">$15</div>
+                </div>
+                <div class="item-subtitle">Beatles</div>
+                <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
+              </div></a></li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><img src="http://hhhhold.com/160/d/jpg?2" width="80"/></div>
+              <div class="item-inner">
+                <div class="item-title-row">
+                  <div class="item-title">Don't Stop Me Now</div>
+                  <div class="item-after">$22</div>
+                </div>
+                <div class="item-subtitle">Queen</div>
+                <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
+              </div></a></li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><img src="http://hhhhold.com/160/d/jpg?3" width="80"/></div>
+              <div class="item-inner">
+                <div class="item-title-row">
+                  <div class="item-title">Billie Jean</div>
+                  <div class="item-after">$16</div>
+                </div>
+                <div class="item-subtitle">Michael Jackson</div>
+                <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
+              </div></a></li>
+        </ul>
+      </div>
+      <div class="content-block-title">Mail App (With Swipe to delete and overswipes)</div>
+      <div class="list-block media-list">
+        <ul>
+          <li class="swipeout">
+            <div class="swipeout-content"><a href="#" class="item-link item-content">
+                <div class="item-inner">
+                  <div class="item-title-row">
+                    <div class="item-title">Facebook</div>
+                    <div class="item-after">17:14</div>
+                  </div>
+                  <div class="item-subtitle">New messages from John Doe</div>
+                  <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
+                </div></a></div>
+            <div class="swipeout-actions-left"><a href="#" class="bg-green swipeout-overswipe demo-reply">Reply</a><a href="#" class="demo-forward bg-blue">Forward</a></div>
+            <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="demo-mark bg-orange">Mark</a><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a></div>
+          </li>
+          <li class="swipeout">
+            <div class="swipeout-content"><a href="#" class="item-link item-content">
+                <div class="item-inner">
+                  <div class="item-title-row">
+                    <div class="item-title">John Doe (via Twitter)</div>
+                    <div class="item-after">17:11</div>
+                  </div>
+                  <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
+                  <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
+                </div></a></div>
+            <div class="swipeout-actions-left"><a href="#" class="bg-green swipeout-overswipe demo-reply">Reply</a><a href="#" class="demo-forward bg-blue">Forward</a></div>
+            <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="demo-mark bg-orange">Mark</a><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a></div>
+          </li>
+          <li class="swipeout">
+            <div class="swipeout-content"><a href="#" class="item-link item-content">
+                <div class="item-inner">
+                  <div class="item-title-row">
+                    <div class="item-title">Facebook</div>
+                    <div class="item-after">16:48</div>
+                  </div>
+                  <div class="item-subtitle">New messages from John Doe</div>
+                  <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
+                </div></a></div>
+            <div class="swipeout-actions-left"><a href="#" class="bg-green swipeout-overswipe demo-reply">Reply</a><a href="#" class="demo-forward bg-blue">Forward</a></div>
+            <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="demo-mark bg-orange">Mark</a><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a></div>
+          </li>
+          <li class="swipeout">
+            <div class="swipeout-content"><a href="#" class="item-link item-content">
+                <div class="item-inner">
+                  <div class="item-title-row">
+                    <div class="item-title">John Doe (via Twitter)</div>
+                    <div class="item-after">15:32</div>
+                  </div>
+                  <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
+                  <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
+                </div></a></div>
+            <div class="swipeout-actions-left"><a href="#" class="bg-green swipeout-overswipe demo-reply">Reply</a><a href="#" class="demo-forward bg-blue">Forward</a></div>
+            <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="demo-mark bg-orange">Mark</a><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a></div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block-title">Something more simple</div>
+      <div class="list-block media-list">
+        <ul>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><img src="http://hhhhold.com/88/d/jpg?13" width="44"/></div>
+              <div class="item-inner">
+                <div class="item-title-row">
+                  <div class="item-title">Yellow Submarine</div>
+                </div>
+                <div class="item-subtitle">Beatles</div>
+              </div>
+            </div>
+          </li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><img src="http://hhhhold.com/88/d/jpg?23" width="44"/></div>
+              <div class="item-inner">
+                <div class="item-title-row">
+                  <div class="item-title">Don't Stop Me Now</div>
+                </div>
+                <div class="item-subtitle">Queen</div>
+              </div></a></li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><img src="http://hhhhold.com/88/d/jpg?33" width="44"/></div>
+              <div class="item-inner">
+                <div class="item-title-row">
+                  <div class="item-title">Billie Jean</div>
+                </div>
+                <div class="item-subtitle">Michael Jackson</div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block-title">Inset</div>
+      <div class="list-block media-list inset">
+        <ul>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><img src="http://hhhhold.com/88/d/jpg?13" width="44"/></div>
+              <div class="item-inner">
+                <div class="item-title-row">
+                  <div class="item-title">Yellow Submarine</div>
+                </div>
+                <div class="item-subtitle">Beatles</div>
+              </div></a></li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><img src="http://hhhhold.com/88/d/jpg?23" width="44"/></div>
+              <div class="item-inner">
+                <div class="item-title-row">
+                  <div class="item-title">Don't Stop Me Now</div>
+                </div>
+                <div class="item-subtitle">Queen</div>
+              </div></a></li>
+          <li><a href="#" class="item-link item-content">
+              <div class="item-media"><img src="http://hhhhold.com/88/d/jpg?33" width="44"/></div>
+              <div class="item-inner">
+                <div class="item-title-row">
+                  <div class="item-title">Billie Jean</div>
+                </div>
+                <div class="item-subtitle">Michael Jackson</div>
+              </div></a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/messages.html

@@ -0,0 +1,84 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Messages</div>
+    <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="messages" class="page no-toolbar toolbar-fixed">
+    <div class="toolbar messagebar">
+      <div class="toolbar-inner"><a href="#" class="link icon-only"><i class="icon icon-camera"></i></a>
+        <textarea placeholder="Message"></textarea><a href="#" class="link">Send</a>
+      </div>
+    </div>
+    <div class="page-content messages-content">
+      <div class="messages">
+        <div class="messages-date">Sunday, Feb 9,<span>12:58</span></div>
+        <div class="message message-sent">
+          <div class="message-text">Hi, Kate</div>
+        </div>
+        <div class="message message-sent">
+          <div class="message-text">How are you?</div>
+        </div>
+        <div class="message message-received message-with-avatar">
+          <div class="message-name">Kate Johnson</div>
+          <div class="message-text">Hi, i am good</div>
+          <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
+        </div>
+        <div class="message message-received message-with-avatar">
+          <div class="message-name">Blue Ninja</div>
+          <div class="message-text">Hi there, I am also fine, thanks! And how are you?</div>
+          <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)" class="message-avatar"></div>
+        </div>
+        <div class="message message-sent">
+          <div class="message-text">Hey, Blue Ninja! Glad to see you ;)</div>
+        </div>
+        <div class="message message-sent">
+          <div class="message-text">What do you think about my new logo?</div>
+        </div>
+        <div class="messages-date">Wednesday, Feb 12,<span>19:33</span></div>
+        <div class="message message-sent">
+          <div class="message-text">Hey? Any thoughts about my new logo?</div>
+        </div>
+        <div class="messages-date">Thursday, Feb 13,<span>11:20</span></div>
+        <div class="message message-sent">
+          <div class="message-text">Alo...</div>
+        </div>
+        <div class="message message-sent">
+          <div class="message-text">Are you there?</div>
+        </div>
+        <div class="message message-received message-with-avatar">
+          <div class="message-name">Blue Ninja</div>
+          <div class="message-text">Hi, i am here</div>
+          <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)" class="message-avatar"></div>
+        </div>
+        <div class="message message-received message-with-avatar">
+          <div class="message-name">Blue Ninja</div>
+          <div class="message-text">Your logo is great</div>
+          <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)" class="message-avatar"></div>
+        </div>
+        <div class="message message-received message-with-avatar">
+          <div class="message-name">Kate Johnson</div>
+          <div class="message-text">Leave me alone!</div>
+          <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
+        </div>
+        <div class="message message-sent">
+          <div class="message-text">:(</div>
+        </div>
+        <div class="message message-sent">
+          <div class="message-text">Hey, look, cutest kitten ever!</div>
+        </div>
+        <div class="message message-sent">
+          <div class="message-text"><img src="http://placekitten.com/g/300/400"/></div>
+        </div>
+        <div class="message message-received message-with-avatar">
+          <div class="message-name">Blue Ninja</div>
+          <div class="message-text">Yep</div>
+          <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)" class="message-avatar"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>