<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Movie finder</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png"> <link rel="stylesheet" href="../../dist/ratchet.css"> <link rel="stylesheet" href="css/app.css"> <script src="../../dist/ratchet.js"></script> </head> <body> <header class="bar-title"> <h1 class="title">Movie finder</h1> </header> <nav class="bar-standard bar-header-secondary"> <form> <input type="search" placeholder="Search"> </form> </nav> <nav class="bar-tab"> <ul class="tab-inner"> <li class="tab-item active"> <a href="index.html" data-transition="fade"> <img class="tab-icon" src="../../docs/img/icon-hamburger.png"> <div class="tab-label">Movies</div> </a> </li> <li class="tab-item"> <a href="theaters.html" data-transition="fade"> <img class="tab-icon" src="../../docs/img/icon-hamburger.png"> <div class="tab-label">Theaters</div> </a> </li> <li class="tab-item"> <a href="settings.html" data-transition="fade"> <img class="tab-icon" src="../../docs/img/icon-hamburger.png"> <div class="tab-label">Settings</div> </a> </li> </ul> </nav> <div class="content"> <div class="slider"> <ul> <li> <img src="img/argo.png"> </li> <li> <img src="img/skyfall.png"> </li> <li> <img src="img/ralph.png"> </li> </ul> </div> <ul class="list"> <li class="list-divider">Recommended movies</li> <li> <a href="choose-theater.html"> <strong>Argo</strong> <p>Lorem ipsum dolor sit amet</p> <span class="chevron"></span> </a> </li> <li> <a href="choose-theater.html" data-transition="slide-in"> <strong>Skyfall: 007</strong> <p>Lorem ipsum dolor sit amet</p> <span class="chevron"></span> </a> </li> <li> <a href="choose-theater.html" data-transition="slide-in"> <strong>Wreck-it Ralph</strong> <p>Lorem ipsum dolor sit amet</p> <span class="chevron"></span> </a> </li> <li class="list-divider">Top movies</li> <li> <a href="choose-theater.html" data-transition="slide-in"> <strong>Movie 4</strong> <p>Lorem ipsum dolor sit amet</p> <span class="chevron"></span> </a> </li> <li> <a href="choose-theater.html" data-transition="slide-in"> <strong>Movie 5</strong> <p>Lorem ipsum dolor sit amet</p> <span class="chevron"></span> </a> </li> <li> <a href="choose-theater.html" data-transition="slide-in"> <strong>Movie 6</strong> <p>Lorem ipsum dolor sit amet</p> <span class="chevron"></span> </a> </li> <li> <a href="choose-theater.html" data-transition="slide-in"> <strong>Movie 7</strong> <p>Lorem ipsum dolor sit amet</p> <span class="chevron"></span> </a> </li> <li> <a href="choose-theater.html" data-transition="slide-in"> <strong>Movie 8</strong> <p>Lorem ipsum dolor sit amet</p> <span class="chevron"></span> </a> </li> <li> <a href="choose-theater.html" data-transition="slide-in"> <strong>Movie 9</strong> <p>Lorem ipsum dolor sit amet</p> <span class="chevron"></span> </a> </li> <li> <a href="choose-theater.html" data-transition="slide-in"> <strong>Movie 10</strong> <p>Lorem ipsum dolor sit amet</p> <span class="chevron"></span> </a> </li> <li> <a href="choose-theater.html" data-transition="slide-in"> <strong>Movie 11</strong> <p>Lorem ipsum dolor sit amet</p> <span class="chevron"></span> </a> </li> <li> <a href="choose-theater.html" data-transition="slide-in"> <strong>Movie 12</strong> <p>Lorem ipsum dolor sit amet</p> <span class="chevron"></span> </a> </li> </ul> </div> </body> </html>