index.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!doctype html>
  2. <html class="no-js" lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>COIN - Illyse</title>
  7. <link rel="stylesheet" href="css/foundation.css" />
  8. <link rel="stylesheet" href="css/illyse.css" />
  9. <link rel="stylesheet" href="stylesheets/offcanvas.css">
  10. <script src="js/vendor/modernizr.js"></script>
  11. <link rel="icon" type="image/png" href="img/coinitem.png" />
  12. <link rel="icon" type="image/x-icon" href="favicon.ico" />
  13. </head>
  14. <body class="off-canvas-wrap">
  15. <div class="large-12 columns inner-wrap">
  16. <header class="row">
  17. <h1><a href="index.html">COIN est un Outil pour un Internet Neutre</a></h1>
  18. </header>
  19. <p class="show-for-small">
  20. <a class="left-off-canvas-toggle button">Menu</a>
  21. </p>
  22. <div class="row">
  23. <div class="large-3 columns">
  24. <nav id="sidebox" class="hide-for-small">
  25. <h3 id="nav">Navigation</h3>
  26. <ul class="side-nav">
  27. <li class="active"><a href="index.html">Tableau de bord</a></li>
  28. <li><a href="infos.html">Mes informations personnelles</a></li>
  29. <li><a href="abo.html">Mes abonnements</a></li>
  30. <li><a href="contact.html">Contact / Support</a></li>
  31. </ul>
  32. </nav>
  33. </div>
  34. <div class="large-9 columns">
  35. <!-- Partie à inclure -->
  36. <div class="row">
  37. <h2>Tableau de bord</h2>
  38. <div class="large-6 columns">
  39. <h3>Alertes</h3>
  40. <div class="panel">Ici les news de santé des serveurs, etc.</div>
  41. </div>
  42. <div class="large-6 columns">
  43. <h3>Stats</h3>
  44. <div class="panel">Use MOAR bandwidth !</div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. <aside class="left-off-canvas-menu"> <ul class="off-canvas-list"> <li><label>Foundation</label></li> <li><a href="#">The Psychohistorians</a></li> <li><a href="#">The Encyclopedists</a></li> <li><a href="#">The Mayors</a></li> <li><a href="#">The Traders</a></li> <li><a href="#">The Merchant Princes</a></li> </ul> </aside>
  50. <script src="js/vendor/jquery.js"></script>
  51. <script src="js/foundation.min.js"></script>
  52. <script src="js/foundation/foundation.offcanvas.js"></script>
  53. <script>
  54. $(document).foundation();
  55. </script>
  56. </body>
  57. </html>