Created
May 2, 2017 02:11
Revisions
-
CodeMyUI created this gist
May 2, 2017 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,45 @@ <div class="entries"> <div class="entry"> <div class="title">2011</div> <div class="body"> <p>Neque sunt voluptatibus repellat pariatur ut enim. Eveniet rerum suscipit eveniet amet dignissimos. Doloremque et distinctio quod molestiae ut.</p> </div> </div> <div class="entry"> <div class="title">2012</div> <div class="body"> <p>Quo nobis cumque dolor iure voluptatem voluptatem alias soluta.</p> </div> </div> <div class="entry"> <div class="title big">2013</div> <div class="body"> <p>Rerum sit libero possimus amet excepturi. Exercitationem enim dolores sunt praesentium dolorum praesentium.</p> </div> </div> <div class="entry"> <div class="title">2014</div> <div class="body"> <p>Voluptatibus veniam ea reprehenderit atque. Reiciendis non laborum adipisci ipsa pariatur omnis. Sed ipsam repudiandae velit. Omnis libero nostrum aperiam nemo dolor ea eos eius. Esse a non itaque quidem.</p> </div> </div> <div class="entry"> <div class="title">2015</div> <div class="body"> <p>VAdipisci totam omnis cum et suscipit excepturi et excepturi. Inventore sequi sit ut aliquid. Modi aut dolores dignissimos.</p> <p>Delectus facere officia consequuntur molestias deserunt illo. Placeat laudantium beatae natus excepturi ab nihil voluptates.</p> </div> </div> <div class="entry"> <div class="title big">2016</div> <div class="body"> <p>Impedit dolorem commodi explicabo fugit aut alias voluptatem. Magnam earum rerum quae dicta quibusdam aliquam ut.</p> </div> </div> <div class="entry"> <div class="title">2017</div> <div class="body"> <p>Qui facere eos aut suscipit doloremque quos...</p> </div> </div> </div> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ //http://stackoverflow.com/a/40324360/3798034 This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,75 @@ body { background-color:#1D1D1D; min-height:100vh; margin:0; font-family: 'Droid Sans', sans-serif; &:before { content: ''; position: fixed; top:0px; left:50%; bottom:0px; transform:translateX(-50%); width:4px; background-color:#fff; } .entries { width:calc(100% - 80px); max-width:800px; margin:auto; position: relative; left:-5px; .entry { width:calc(50% - 80px); float:left; padding:20px; clear:both; text-align:right; &:not(:first-child) { margin-top:-60px; } .title { font-size:32px; margin-bottom:12px; position: relative; color:#fff; &:before { content: ''; position: absolute; width:8px; height:8px; border:4px solid #ffffff; background-color:#1D1D1D; border-radius:100%; top:50%; transform:translateY(-50%); right:-73px; z-index:1000; } &.big:before { width:24px; height:24px; transform:translate(8px,-50%); } } .body { color:#aaa; p { line-height:1.4em; } } &:nth-child(2n) { text-align:left; float:right; .title { &:before { left:-63px; } &.big:before { transform:translate(-8px,-50%); } } } } } } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" /> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,8 @@ Timeline -------- For V. Berezovsky http://stackoverflow.com/questions/40321731/style-chain-css A [Pen](http://codepen.io/k-ya/pen/bwPBjY) by [Atticus Koya](http://codepen.io/k-ya) on [CodePen](http://codepen.io/). [License](http://codepen.io/k-ya/pen/bwPBjY/license).