<li>
<p><em>10<sup>th</sup> September 2016</em></p>
<p><strong>Relocated</strong> to <strong><a href="https://www.google.com/maps/place/Lviv,+Lviv+Oblast,+Ukraine,+79000/@49.8327787,23.9421957,12z/data=!3m1!4b1!4m5!3m4!1s0x473add7c09109a57:0x4223c517012378e2!8m2!3d49.839683!4d24.029717" rel="external">Lviv</a></strong> <sup><em id="lviv-rent-months"></em></sup></p>
</li>
inner list:
<li>
<p><em>1<sup>st</sup> October 2016 – 31<sup>st</sup> December 2016</em></p>
<p><strong>Full Stack Developer</strong> at <strong><a href="https://www.dutchstar.com/" rel="external">Dutchstar</a></strong></p>
<ul>
<li>built, tested, and deployed applications written with React + Redux and Phalcon + MySQL</li>
</ul>
</li>
details:
<li class="details">
<input type="checkbox" id="other">
<label for="other" class="summary">I also do some other things from time to time 🎉</label>
<div>
<ul>
<li>occasionally I give lectures in <strong><a href="https://academy.binary-studio.com/" rel="external">Binary Studio Academy</a></strong></li>
<li>sometimes I'm being <em>mentored</em> by those whom I <em>mentor</em></li>
<li>I'm good at kitchen talks about pretty much anything</li>
<li>I can play video games with you so that we become a better team</li>
</ul>
</div>
</li>
Sometimes an event that spawns across longer period of time might have its own events or projects. Of course, those could be listed in a detailed event manner, but it is probably better to use ordered lists instead (would draw a number 1...X before each item). .inverted ordered list would draw a white number in a black square before each item. Enclosed events may also be detailed and/or collapsible. .highlighted event will have a subtle gray background.
Example: