Skip to content

Instantly share code, notes, and snippets.

@BenjaminGalliot
Last active May 22, 2020 13:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BenjaminGalliot/fc1a4d77a2597f5e3dd3135ca284c5fa to your computer and use it in GitHub Desktop.
Save BenjaminGalliot/fc1a4d77a2597f5e3dd3135ca284c5fa to your computer and use it in GitHub Desktop.
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 5 Transitional//FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
margin: 2em 3em 3em 5em;
}
.container {
display: inline-block;
margin-bottom: 2em;
clear: both;
/* overflow: hidden; */
border: 5px solid black;
width: 98%;
}
.original {
display: block;
width: 48%;
float: right;
writing-mode: vertical-rl;
line-height: 1.7em;
text-indent: 2em;
text-orientation: upright;
font-size: 2em;
column-count: auto;
column-width: auto;
column-gap: 2em;
border: 2px solid blue;
}
.translation {
display: block;
width: 48%;
float: left;
text-align: justify;
font-size: 1.3em;
border: 2px solid red;
}
</style>
<title></title>
</head>
<body>
<div class="container">
<div class="original">
<h2>那實</h2>
<p>媽人身觀水:排麗的處省保學所微片利雲期重作。皮連現呢三知三,應觀天地我票大這,說同孩度告。同說子紅務官基教時……身認學,般品微海為下國自想臺到樹大又好主只課戰光到才地。造月大組過你器個程立如不重馬西注政老好未房意持級試線個一更定於認愛身先名車題新切民,直議一:不意待合廠高年話車,我許眼畫長滿去以亮用眼,叫業男四去花,推知合官高供說臺大他優果條大,生人商人一導住酒也要定結戲前:人屋萬學四,界這好須為使們路、小不標和一影有進時我的未而,與流力以受假。依股現樹大德須種當清一會不,說實服……夠向約光食行。男密背告多器比常觀負本此化庭保高……法史國我得紀水高我創己喜基香演過力花看……密以兒一:一格出家難成般陸畫資出臺話算怕非來科球完比亞,路是麼檢質公了心一前?
病達用民風進選離交,少區對對資投麼文。了這地,香傳面性傳過氣?的子品地,大參汽出不人問以,要子畫因車角展童土必聲活東生爸麼心的鄉美重女,打廣只,外戲今變點年小室……影你顧不我陸,十地臺處夫個工麼後要要企出府魚一界,的風列中明那創;日我完手我:但為密,情人往管才才記有下學工思所取不一己一全及親!活指基氣一了,春加有友!正轉我我車就風山益仍這特班管二地案?聯藝進?
</p>
</div>
<div class="translation">
<h2>Lorem ipsum </h2>
<p class="prose">Dolor sit amet, consectetur adipiscing elit. Proin ornare vel justo a interdum. Donec ullamcorper tellus at quam bibendum faucibus. Morbi ullamcorper ligula ut mollis molestie. Nam facilisis laoreet orci eget mollis. Proin a ante cursus, accumsan mauris non, lobortis nisl. Sed fermentum massa eros, quis porttitor tortor lobortis quis. Nam laoreet lectus est, ac finibus lacus faucibus sed. Nunc id lectus viverra, placerat felis non, facilisis dolor.
In semper lacus nibh, ac eleifend massa cursus tristique. Ut vehicula vestibulum porttitor. Duis ultrices leo ac ipsum consectetur, vitae pellentesque nisl bibendum. Morbi lobortis pretium nisi vestibulum egestas. Ut pellentesque elit in lorem dictum cursus. Suspendisse blandit pellentesque purus, non tempor ante egestas vitae. Nunc fermentum neque nec massa malesuada dapibus. Phasellus sodales erat et ornare malesuada. Nullam nulla dolor, lacinia ut pretium ut, pretium sed dolor. Donec fringilla laoreet imperdiet. Donec in convallis justo. Duis facilisis mollis aliquet. Pellentesque urna sem, egestas euismod lacus in, porta auctor est. Sed faucibus pulvinar ligula, at semper orci rutrum at. Integer justo dui, semper ac vehicula et, sodales ut tellus. Ut sem massa, egestas vitae ultricies sit amet, tempor ut ex.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam a feugiat ex. Sed commodo est ac tempus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce varius commodo augue. Suspendisse tincidunt ipsum ac orci tristique, a gravida diam pharetra. Curabitur vel placerat mi. Donec id pellentesque erat.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In at rutrum urna, ac egestas dui. Donec a porttitor ante. Nullam vitae nunc ac justo tempor tempus. Sed congue et arcu et sodales. Donec imperdiet gravida turpis eu cursus. Vestibulum ac massa ac dui rutrum fermentum. Nullam dui ligula, sodales at aliquet sit amet, convallis dictum nulla. Fusce sodales quis mi vitae vulputate. Integer et tristique ligula, eu gravida nisl. Suspendisse vitae viverra erat, sed faucibus ipsum. Fusce venenatis condimentum dolor congue dictum. Proin ipsum risus, volutpat ac turpis sed, finibus aliquet dui.
Vivamus iaculis sed metus a scelerisque. Cras scelerisque arcu augue, eget condimentum est faucibus et. Suspendisse sollicitudin tincidunt leo nec blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt ullamcorper ligula ac sollicitudin. In velit tellus, scelerisque ut rutrum non, viverra eu neque. In posuere ullamcorper euismod. Duis at tellus ullamcorper, faucibus risus vitae, luctus velit. Integer vel velit libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur aliquet id ante eget bibendum. Suspendisse vulputate dolor tincidunt dui varius, ut rhoncus elit fringilla. Duis quis urna ligula. Nulla aliquam magna eget turpis tristique ullamcorper.
Maecenas id dictum ex. Aliquam vehicula non risus et dictum. Vivamus porttitor porttitor dolor in bibendum. Donec accumsan mi eget finibus tempus. In vitae mi porta, tempor felis quis, consequat massa. Quisque a libero ullamcorper, pretium tortor sed, auctor quam. Donec fermentum mauris nec tortor luctus, id vehicula ex imperdiet. In hac habitasse platea dictumst.
</p>
</div>
</div>
<div class="container">
<div class="original">
<h2>那實</h2>
<p>媽人身觀水:排麗的處省保學所微片利雲期重作。皮連現呢三知三,應觀天地我票大這,說同孩度告。同說子紅務官基教時……身認學,般品微海為下國自想臺到樹大又好主只課戰光到才地。造月大組過你器個程立如不重馬西注政老好未房意持級試線個一更定於認愛身先名車題新切民,直議一:不意待合廠高年話車,我許眼畫長滿去以亮用眼,叫業男四去花,推知合官高供說臺大他優果條大,生人商人一導住酒也要定結戲前:人屋萬學四,界這好須為使們路、小不標和一影有進時我的未而,與流力以受假。依股現樹大德須種當清一會不,說實服……夠向約光食行。男密背告多器比常觀負本此化庭保高……法史國我得紀水高我創己喜基香演過力花看……密以兒一:一格出家難成般陸畫資出臺話算怕非來科球完比亞,路是麼檢質公了心一前?
病達用民風進選離交,少區對對資投麼文。了這地,香傳面性傳過氣?的子品地,大參汽出不人問以,要子畫因車角展童土必聲活東生爸麼心的鄉美重女,打廣只,外戲今變點年小室……影你顧不我陸,十地臺處夫個工麼後要要企出府魚一界,的風列中明那創;日我完手我:但為密,情人往管才才記有下學工思所取不一己一全及親!活指基氣一了,春加有友!正轉我我車就風山益仍這特班管二地案?聯藝進?
想戲方加解到公實;我靈很的想形細人開飛生天一門現家待然險院應物總;書步有院好史新量要故子轉一取。語兒在一究。苦導高唱規而紀爸爸南史青,價光電育國想福情快是藝不即點全非道巴力出西當有進情洲人上證兩這這海外法立思有中會念麼親美大那要車家就的回運,文負車高頭視否的,任理技關文一會腳行兩情低,期水半張看!一對回工會!轉非健流兩傳人打比家金要型下前力的的正我樣光顯分與的,月演有難:一法家水。業清大?色學策課樣還理水知是職度來來至樂……就準是客製;費間計:水作能已;最先速老路他……美起人親力史何寫說手我……學的成質!倒個文公我天下、而口的;利戲心去力代,到成水信球就所不直自錢運河備那發雲的里們,通下為點由活考推實論食、一心選開一部兒壓我德受達成動阿保我死案經兒化代。
負源統非道那直女來們母真只,心頭國不人而!而車遊,歌平包。加有禮禮在,東公許回準。
</p>
</div>
<div class="translation">
<h2>Lorem ipsum </h2>
<p class="prose">Dolor sit amet, consectetur adipiscing elit. Proin ornare vel justo a interdum. Donec ullamcorper tellus at quam bibendum faucibus. Morbi ullamcorper ligula ut mollis molestie. Nam facilisis laoreet orci eget mollis. Proin a ante cursus, accumsan mauris non, lobortis nisl. Sed fermentum massa eros, quis porttitor tortor lobortis quis. Nam laoreet lectus est, ac finibus lacus faucibus sed. Nunc id lectus viverra, placerat felis non, facilisis dolor.
In semper lacus nibh, ac eleifend massa cursus tristique. Ut vehicula vestibulum porttitor. Duis ultrices leo ac ipsum consectetur, vitae pellentesque nisl bibendum. Morbi lobortis pretium nisi vestibulum egestas. Ut pellentesque elit in lorem dictum cursus. Suspendisse blandit pellentesque purus, non tempor ante egestas vitae. Nunc fermentum neque nec massa malesuada dapibus. Phasellus sodales erat et ornare malesuada. Nullam nulla dolor, lacinia ut pretium ut, pretium sed dolor. Donec fringilla laoreet imperdiet. Donec in convallis justo. Duis facilisis mollis aliquet. Pellentesque urna sem, egestas euismod lacus in, porta auctor est. Sed faucibus pulvinar ligula, at semper orci rutrum at. Integer justo dui, semper ac vehicula et, sodales ut tellus. Ut sem massa, egestas vitae ultricies sit amet, tempor ut ex.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam a feugiat ex. Sed commodo est ac tempus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce varius commodo augue. Suspendisse tincidunt ipsum ac orci tristique, a gravida diam pharetra. Curabitur vel placerat mi. Donec id pellentesque erat.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In at rutrum urna, ac egestas dui. Donec a porttitor ante. Nullam vitae nunc ac justo tempor tempus. Sed congue et arcu et sodales. Donec imperdiet gravida turpis eu cursus. Vestibulum ac massa ac dui rutrum fermentum. Nullam dui ligula, sodales at aliquet sit amet, convallis dictum nulla. Fusce sodales quis mi vitae vulputate. Integer et tristique ligula, eu gravida nisl. Suspendisse vitae viverra erat, sed faucibus ipsum. Fusce venenatis condimentum dolor congue dictum. Proin ipsum risus, volutpat ac turpis sed, finibus aliquet dui.
Vivamus iaculis sed metus a scelerisque. Cras scelerisque arcu augue, eget condimentum est faucibus et. Suspendisse sollicitudin tincidunt leo nec blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt ullamcorper ligula ac sollicitudin. In velit tellus, scelerisque ut rutrum non, viverra eu neque. In posuere ullamcorper euismod. Duis at tellus ullamcorper, faucibus risus vitae, luctus velit. Integer vel velit libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur aliquet id ante eget bibendum. Suspendisse vulputate dolor tincidunt dui varius, ut rhoncus elit fringilla. Duis quis urna ligula. Nulla aliquam magna eget turpis tristique ullamcorper.
Maecenas id dictum ex. Aliquam vehicula non risus et dictum. Vivamus porttitor porttitor dolor in bibendum. Donec accumsan mi eget finibus tempus. In vitae mi porta, tempor felis quis, consequat massa. Quisque a libero ullamcorper, pretium tortor sed, auctor quam. Donec fermentum mauris nec tortor luctus, id vehicula ex imperdiet. In hac habitasse platea dictumst.
</p>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment