css: Timeline scribble

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="apple-moible-web-app-capable" content="yes">
<meta name="apple-moible-web-app-status-bar-style" content="black">	
<title>Timeline scribble</title>
	
	

<style>
/* Variables */
/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700);
@font-face{
		font-family:"minizhuanshu";
			src:url("http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.eot");/*IE 9 Compat Modes*/
			src:local("迷你繁篆书"),
			url("webfont/fonts/3pdwg6wqe1jpcgh.eot?#iefix") format("embedded-opentype"),/*IE6-IE8 */
			/*src: local('minizhuanshu'), 
			local('minizhuanshu'),*/       
				url("http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.woff2") format("woff2"),
				url("http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.otf") format("opentype"),
				url("http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.woff") format("woff"),/*Modern Browsers*/
				url("http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.ttf") format("truetype"),/*Safari,Android,iOS */
				url("http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.svg#minizhuanshu") format("svg");/*Legacy iOS */
		font-weight:normal;
		font-style:normal;/*字体样式*/
		font-display: swap; /* 先匹配到的已经能够使用的字体,字体成功载入后切换字体*/
}
	
body {
  font-family: "minizhuanshu";
  font-size: 1em;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* Layout */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Styling */
.timeline {
  margin: 4em auto;
  position: relative;
  max-width: 46em;
}
.timeline:before {
  background-color: black;
  content: '';
  margin-left: -1px;
  position: absolute;
  top: 0;
  left: 2em;
  width: 2px;
  height: 100%;
}

.timeline-event {
  position: relative;
}
.timeline-event:hover .timeline-event-icon {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background-color: #a83279;
}
.timeline-event:hover .timeline-event-thumbnail {
  -moz-box-shadow: inset 40em 0 0 0 #a83279;
  -webkit-box-shadow: inset 40em 0 0 0 #a83279;
  box-shadow: inset 40em 0 0 0 #a83279;
}

.timeline-event-copy {
  padding: 2em;
  position: relative;
  top: -1.875em;
  left: 4em;
  width: 80%;
}
.timeline-event-copy h3 {
  font-size: 1.75em;
}
.timeline-event-copy h4 {
  font-size: 1.2em;
  margin-bottom: 1.2em;
}
.timeline-event-copy strong {
  font-weight: 700;
}
.timeline-event-copy p:not(.timeline-event-thumbnail) {
  padding-bottom: 1.2em;
}

.timeline-event-icon {
  -moz-transition: -moz-transform 0.2s ease-in;
  -o-transition: -o-transform 0.2s ease-in;
  -webkit-transition: -webkit-transform 0.2s ease-in;
  transition: transform 0.2s ease-in;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: black;
  outline: 10px solid white;
  display: block;
  margin: 0.5em 0.5em 0.5em -0.5em;
  position: absolute;
  top: 0;
  left: 2em;
  width: 1em;
  height: 1em;
}

.timeline-event-thumbnail {
  -moz-transition: box-shadow 0.5s ease-in 0.1s;
  -o-transition: box-shadow 0.5s ease-in 0.1s;
  -webkit-transition: box-shadow 0.5s ease-in;
  -webkit-transition-delay: 0.1s;
  transition: box-shadow 0.5s ease-in 0.1s;
  color: white;
  font-size: 0.75em;
  background-color: black;
  -moz-box-shadow: inset 0 0 0 0em #ef795a;
  -webkit-box-shadow: inset 0 0 0 0em #ef795a;
  box-shadow: inset 0 0 0 0em #ef795a;
  display: inline-block;
  margin-bottom: 1.2em;
  padding: 0.25em 1em 0.2em 1em;
}
</style>


	
	
</head>

<body>
<ul class="timeline">
  <li class="timeline-event">
    <label class="timeline-event-icon"></label>
    <div class="timeline-event-copy">
      <p class="timeline-event-thumbnail">April 2011 - 涂聚文</p>
      <h3>Geovin Du,你好! 涂聚文</h3>
      <h4>Geovin Du,你好! 涂聚文</h4>
      <p><strong>天下为公，天下为公</strong><br>明朝（1368-1644年）由朱元璋建立，推翻元朝统治。初期郑和下西洋彰显国力，中期修筑长城防御蒙古，晚期遭遇小冰河期与内忧外患。最终李自成攻破北京，崇祯帝自缢，存续276年，是中国历史上最后一个由汉族建立的大一统王朝。</p>
      <p><strong>国庆节快乐！</strong><br>金朝（1115-1234年）由女真族建立，完颜阿骨打统一东北后灭辽、北宋，定都中都。全盛时期疆域涵盖中国北方及西伯利亚东部，推行汉法改革并创制女真文字。后期受蒙古压迫南迁开封，最终被蒙宋联军所灭，存续119年，深刻影响了中国北方的政治格局与文化融合进程。</p>
    </div>
  </li>
  <li class="timeline-event">
    <label class="timeline-event-icon"></label>
    <div class="timeline-event-copy">
      <p class="timeline-event-thumbnail">November 2009 - März 2011</p>
      <h3>Geovin Du,你好! 涂聚文</h3>
      <h4>Geovin Du,你好! 涂聚文</h4>
      <p>元朝（1271-1368年）由蒙古孛儿只斤氏建立，忽必烈定都大都。疆域空前辽阔，行省制奠定后世版图基础，促进民族融合与中外交流。因实行四等人制及财政危机引发红巾军起义，最终被明朝取代，存续97年。</p>
    </div>
  </li>
  <li class="timeline-event">
    <label class="timeline-event-icon"></label>
    <div class="timeline-event-copy">
      <p class="timeline-event-thumbnail">April 2011 - 涂聚文</p>
      <h3>Geovin Du,你好! 涂聚文</h3>
      <h4>IT-Consultant</h4>
      <p><strong>Geovin Du,你好! 涂聚文</strong><br>清朝（1636-1912年）由满族建立，入关后统一全国并奠定现代版图。前期康乾盛世国力鼎盛，晚期因闭关锁国遭列强入侵，陷入半殖民地危机。经辛亥革命推翻帝制，存续近三百年，是中国最后一个封建王朝。</p>
    </div>
  </li>
</ul>
  
</body>
</html>