/templates/home/index.html

https://bitbucket.org/frank418/tblog · HTML · 123 lines · 83 code · 31 blank · 9 comment · 0 complexity · 5ca08f58bfc50599c86657bf74c15436 MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <title>tblog &middot; Frank Yang</title>
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <meta name="description" content="">
    8. 

  8.     <meta name="author" content="">
    9. 

  9. 

  10.     <!-- Le styles -->
    11. 

  11.     <link href="/static/style/bootstrap.min.css" rel="stylesheet">
    12. 

  12.     <style type="text/css">
    13. 

  13.         body {
    14. 

  14.             padding-top: 20px;
    15. 

  15.             padding-bottom: 40px;
    16. 

  16.         }
    17. 

  17. 

  18.             /* Custom container */
    19. 

  19.         .container-narrow {
    20. 

  20.             margin: 0 auto;
    21. 

  21.             max-width: 700px;
    22. 

  22.         }
    23. 

  23. 

  24.         .container-narrow > hr {
    25. 

  25.             margin: 30px 0;
    26. 

  26.         }
    27. 

  27. 

  28.             /* Main marketing message and sign up button */
    29. 

  29.         .jumbotron {
    30. 

  30.             margin: 60px 0;
    31. 

  31.             text-align: center;
    32. 

  32.         }
    33. 

  33. 

  34.         .jumbotron h1 {
    35. 

  35.             font-size: 72px;
    36. 

  36.             line-height: 1;
    37. 

  37.         }
    38. 

  38. 

  39.         .jumbotron .btn {
    40. 

  40.             font-size: 21px;
    41. 

  41.             padding: 14px 24px;
    42. 

  42.         }
    43. 

  43. 

  44.             /* Supporting marketing content */
    45. 

  45.         .marketing {
    46. 

  46.             margin: 60px 0;
    47. 

  47.         }
    48. 

  48. 

  49.         .marketing p + h4 {
    50. 

  50.             margin-top: 28px;
    51. 

  51.         }
    52. 

  52.     </style>
    53. 

  53.     <link href="/static/style/bootstrap-responsive.min.css" rel="stylesheet">
    54. 

  54. 

  55.     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    56. 

  56.     <!--[if lt IE 9]>
    57. 

  57.     <script src="/static/js/html5shiv.js"></script>
    58. 

  58.     <![endif]-->
    59. 

  59. 

  60. </head>
    61. 

  61. 

  62. <body>
    63. 

  63. 

  64. <div class="container-narrow">
    65. 

  65. 

  66.     <div class="masthead">
    67. 

  67.         <ul class="nav nav-pills pull-right">
    68. 

  68.             <li class="active"><a href="#">Home</a></li>
    69. 

  69.             <li><a href="http://0418.me">Flask Blog</a></li>
    70. 

  70.         </ul>
    71. 

  71.         <h3 class="muted">Tornado Blog by Frank</h3>
    72. 

  72.     </div>
    73. 

  73. 

  74.     <hr>
    75. 

  75. 

  76.     <div class="jumbotron">
    77. 

  77.         <h1>开始用Tornado重写博客系统！</h1>
    78. 

  78.         <a class="btn btn-large btn-success" href="http://git.0418.me/tblog">查看源码</a>
    79. 

  79.     </div>
    80. 

  80. 

  81.     <hr>
    82. 

  82. 

  83.     <div class="row-fluid marketing">
    84. 

  84.         <div class="span6">
    85. 

  85.             <h4>Tornado</h4>
    86. 

  86. 

  87.             <p>强力异步网络框架兼Web开发框架</p>
    88. 

  88. 

  89.             <h4>WTForms</h4>
    90. 

  90. 

  91.             <p>给力的表单生成及验证库</p>
    92. 

  92. 

  93.         </div>
    94. 

  94. 

  95.         <div class="span6">
    96. 

  96.             <h4>SQLAlchemy</h4>
    97. 

  97. 

  98.             <p>Python程序员都知道！</p>
    99. 

  99. 

  100.             <h4>Bootstrap</h4>
    101. 

  101. 

  102.             <p>毫无艺术细胞的程序员都能使用的UI框架</p>
    103. 

  103. 

  104.         </div>
    105. 

  105.     </div>
    106. 

  106. 

  107.     <hr>
    108. 

  108. 

  109.     <div class="footer">
    110. 

  110.         <p>&copy; Frank Yang 2013</p>
    111. 

  111.     </div>
    112. 

  112. 

  113. </div>
    114. 

  114. <!-- /container -->
    115. 

  115. 

  116. <!-- Le javascript
    117. 

  117. ================================================== -->
    118. 

  118. <!-- Placed at the end of the document so the pages load faster -->
    119. 

  119. <script src="/static/js/jquery.js"></script>
    120. 

  120. <script src="/static/js/bootstrap.min.js"></script>
    121. 

  121. 

  122. </body>
    123. 

  123. </html>
    124.