myBolg
/
订阅我的博客.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>订阅博客</title>
<link href="bootstrap-3.3.0/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap-3.3.0/css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="bootstrap-3.3.0/css/font-awesome.css" rel="stylesheet" type="text/css">
<style>
html,body {
  height:100%;
  font-family: 'microsoft yahei',Arial,sans-serif;
}

.headerbg{
  background: orange;
  color: #fff;
  padding: 5%;
}


</style>
</head>

<body>
 <!-- navigation panel -->
  <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header active">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="首页.html"><span class="glyphicon glyphicon-home"> 首页</span> </a> </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
       <li><a href="空间.html"><span class="glyphicon glyphicon-user"> 空间</span></a></li>
        <li><a href="aa/相册.html"><span class="glyphicon glyphicon-star"> 相册</span></a></li>
        <li><a href="留言板.html"><span class="glyphicon glyphicon-envelope" > 留言板</span></a></li>
        <li><a href="live/我的爱好.html"><span class="glyphicon glyphicon-home"> 我的爱好</span> </a></li>
        <li><a href="简介.html"><span class="glyphicon glyphicon-heart-empty" > 关注我吧！</span></a></li>
        <li><a href="订阅我的博客.html"><span class="glyphicon glyphicon-star"> 订阅我的博客</span></a></li>
      </ul>
   </div></div></div>
   <br><br>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12 text-center headerbg">
        <h1>欢迎订阅我的博客</h1>
        <p>首先应该敢于做梦，然后敢于行动。因为，如果不尝试，你永远不知道自己有多棒！</p>

        <br><br>

        <form class="col-lg-12">
          <div class="input-group input-group-lg col-sm-offset-4 col-sm-4">
            <input type="text" class="center-block form-control input-lg" title="Enter you email." placeholder="输入邮箱地址">
            <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">订阅</button></span>
          </div>
        </form>
    </div>
  </div>
</div>

<div class="container">

  <hr>

  <div class="row">
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading"><h3>青春（塞缪尔·厄尔曼）一</h3></div>
        <div class="panel-body">
       		 Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life.
			<br>青春不是年华，而是心境；青春不是桃面、丹唇、柔膝，而是深沉的意志，恢宏的想象，炙热的情感；青春是生命的深泉在涌流。<br>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading"><h3>青春（塞缪尔·厄尔曼）二</h3></div>
        <div class="panel-body">
        Youth means a tempera-mental predominance of courage over timidity, of the appetite for adventure over the love of ease. This often exists in a man of 60 more than a boy of 20. Nobody grows old merely by a number of years. We grow old by deserting our ideals.
            <br>青春气贯长虹，勇锐盖过怯弱，进取压倒苟安。如此锐气，二十后生而有之，六旬男子则更多见。年岁有加，并非垂老；理想丢弃，方堕暮年。<br>

        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading"><h3>青春（塞缪尔·厄尔曼）三</h3></div>
        <div class="panel-body">
        Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul. Worry, fear, self-distrust bows the heart and turns the spring back to dust.
			<br>岁月悠悠，衰微只及肌肤；热忱抛却，颓废必致灵魂。忧烦，惶恐，丧失自信，定使心灵扭曲，意气如灰。<br>

        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <br><br>
    <div class="col-lg-12 text-center">
        <a href="#"><i class="fa fa-dribbble fa-2x"></i></a>
        <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
        <a href="#"><i class="fa fa-facebook fa-2x"></i></a>
        <a href="#"><i class="fa fa-weixin fa-2x"></i></a>
        <a href="#"><i class="fa fa-qq fa-2x"></i></a>
        <a href="#"><i class="fa fa-dig fa-2x"></i></a>
        <a href="#"><i class="fa fa-github fa-2x"></i></a>
    </div>
    <br><br>
  </div>

  <div class="row">
    <div class="col-lg-12 text-center text-primary">
     <footer>
    <hr />
    <div class="container">
      <p class="text-right">Copyright &copy; 13软件5班——叶炳基——1321001562.com 2015</p>
    </div>
  </footer>
    </div>
  </div>

</div>

<script src="bootstrap-3.3.0/js/jquery-2.1.1.js"></script>
<script src="bootstrap-3.3.0/js/bootstrap.js"></script>

</body>
</html>