ozzNwR

index.html

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<div class="container-fluid b1">
  <h1 class="text-center">孙中山</h1>
  <h3 class="text-center"><em>中国近代民主革命的伟大先行者</em></h3>

  <div id="pic">
    <img src="http://www.gzzxws.gov.cn/gzws/gzws/ml/hqcc/201107/W020110720464217405067.jpg" class="img-responsive imgbox">
    <p class="text-center imgtextbox">
      1924年4月，孙中山在广州大元帅府办公室书写《国民政府建国大纲》
    </p>
  </div>
  <div id="maintext">
    <h4>以下是孙中山先生的事迹：</h4>
    <ul>
      <li>
        <strong>1866</strong> - 孙中山生于大清帝国广东省广州府香山县翠亨村，名文，幼名帝象，谱名德明
      </li>
      <li>
        <strong>1871</strong> - 长兄孙德彰与同乡前往檀香山谋生，最初他在农场打工，后来向檀香山政府领地，自己开垦经营农场，事业有成。
      </li>
      <li>
        <strong>1884</strong> - 孙转学香港中央书院（今皇仁书院）。
      </li>
      <li>
        <strong>1886</strong> - 孙持喜嘉理博士介绍信，入广州博济医院附设医科学校习医，开始鼓吹革命。
      </li>
      <li>
        <strong>1894</strong> - 孙中山长女孙娫诞生。
      </li>
      <li>
        <strong>1905</strong> - 自日本经西贡往马赛、巴黎。孙先抵越南河内，继续策划革命起义，1907年5月，孙命余丑发动潮州黄冈起义，历六日而败，是为第三次起义。
      </li>
      <li>
        <strong>1908</strong> - 黄兴由法属印度支那率革命军进攻钦州，发动钦廉上思之役，是为第七次起义。
      </li>
      <li>
        <strong>1911</strong> - 赵声、黄兴等人领导广州黄花岗起义。
      </li>
      <li>
        <strong>1911</strong> - 在同盟会中部总会推动下，共进会与湖北新军革命团体文学社具体执行、共同策划发起武昌起义。
      </li>
      <li>
        <strong>1925</strong> - 病故。
      </li>
    </ul>
    
    <p class="commenttext">
      “三百万台湾刚醒同胞，微先生何人领导；四十年祖国未竟事业，舍我辈其谁分担”
    </p>
    <p class="commentfrom"><i>
      — 北京大学台湾同学会
    </i></p>
    
    <h4 class="endbigsize">
      如果你有时间，你可以在<a href="https://zh.wikipedia.org/wiki/孫中山">维基</a>上阅读更多关于他的伟大事迹。
    </h4>
    
  </div>
  
</div>

ozznwr.markdown

ozzNwR

A Pen by jieniu on CodePen.

License.

style.css

.b1{
  background-color:lightgray;
}
#pic{
  background-color:white;
  border-radius:3px;
  margin-right:50px;
  margin-left:50px;
}

#maintext {
  margin-right:120px;
  margin-left:120px;
}
.commenttext{
  margin-left:23px;
  font-size: 20px;
  font-family: 仿宋;
}
.commentfrom{
  margin-left:23px;
  color:gray;
}

.imgbox{
  padding-left:2px;
  padding-right:2px;
}
.imgtextbox {
  margin-top:10px;
  margin-bottom:40px;  
  padding-bottom:10px;
}
.endbigsize{
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />