|
|
Line 67: |
Line 67: |
| | | |
| <div class="timeline" style="width:800px;"> | | <div class="timeline" style="width:800px;"> |
| + | <ul class="intervals" style="list-style-type: none; padding: 0; display: block;"> |
| + | <li class="first" style="/* The width depends on the number of intervals. For example 100 / 7 = 14.29% -- then subtract a little bit for room for the borders */ background: #fff; border-right: 1px solid #ccc; color: #999; float: left; font-size: 1.2em; font-weight: bold; margin: 0; padding: 5px 0; text-align: center; border-left: 1px solid #ccc; width: 49%;">19<sup style="font-size:50%;">TH</sup> Century</li> |
| + | <li class="last" style="background: #fff; border-right: 1px solid #ccc; color: #999; float: left; font-size: 1.2em; font-weight: bold; margin: 0; padding: 5px 0; text-align: center; width: 49%;">20<sup style="font-size:50%;">TH</sup> Century</li> |
| + | </ul><br style="clear:both"> <!-- end .intervals --> |
| <ul class="events" style="list-style-type: none; margin: 0; padding: 0 0 20px 0;"> | | <ul class="events" style="list-style-type: none; margin: 0; padding: 0 0 20px 0;"> |
− | <li style="-webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; background: #eee; border: 1px solid #ddd; color: #707070; font-size: 1.2em; font-weight: bold; margin-bottom: 6px; padding: 3px 0; position: relative; text-align: center; width: 42.48%; left: 57.2%;">Design & Typography <em style="color: #aaa; font-weight: normal; font-size: 0.9em;">(2007 - 2009)</em></li> | + | <li style="-webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; background: #eee; border: 1px solid #ddd; color: #707070; font-size: 0.8em; margin-bottom: 3px; padding: 1px 0 0 3px; position: relative; text-align:left; overflow:hidden; width: 16%; left: 32%;">[[Liath Leac-An-Teintein|Nathan Greystone]]</li> |
− | <li style="-webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; background: #eee; border: 1px solid #ddd; color: #707070; font-size: 1.2em; font-weight: bold; margin-bottom: 6px; padding: 3px 0; position: relative; text-align: center; width: 56.68%; left: 43%;">Photography <em style="color: #aaa; font-weight: normal; font-size: 0.9em;">(2006 - 2009)</em></li>
| + | <li style="-webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; background: #eee; border: 1px solid #ddd; color: #707070; font-size: 0.8em; margin-bottom: 3px; padding: 1px 0 0 3px; position: relative; text-align: left; overflow:hidden; width: 12%; left: 32%;">[[Doctor Woof|Dr Thaddius Wolf]]</li> |
− | <li style="-webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; background: #eee; border: 1px solid #ddd; color: #707070; font-size: 1.2em; font-weight: bold; margin-bottom: 6px; padding: 3px 0; position: relative; text-align: center; width: 71.3%; left: 28.4%;">Object Oriented Programming <em style="color: #aaa; font-weight: normal; font-size: 0.9em;">(2005 - 2009)</em></li>
| + | </ul><!-- end .events --> |
− | <li style="-webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; background: #eee; border: 1px solid #ddd; color: #707070; font-size: 1.2em; font-weight: bold; margin-bottom: 6px; padding: 3px 0; position: relative; text-align: center; width: 85.5%; left: 14.2%;">Web Development <em style="color: #aaa; font-weight: normal; font-size: 0.9em;">(2004 - 2009)</em></li> | + | |
− | <li style="-webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; background: #eee; border: 1px solid #ddd; color: #707070; font-size: 1.2em; font-weight: bold; margin-bottom: 6px; padding: 3px 0; position: relative; text-align: center; width: 42.75%; left: 0;">3D Modeling and Rendering <em style="color: #aaa; font-weight: normal; font-size: 0.9em;">(2003 - 2006)</em></li>
| + | |
− | <li style="-webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; background: #eee; border: 1px solid #ddd; color: #707070; font-size: 1.2em; font-weight: bold; margin-bottom: 6px; padding: 3px 0; position: relative; text-align: center; width: 99.5%; left: 0;">Drawing & Illustration <em style="color: #aaa; font-weight: normal; font-size: 0.9em;">(2003 - 2009)</em></li>
| + | |
− | </ul> <!-- end .events -->
| + | |
− | | + | |
− | <ul class="intervals" style="list-style-type: none; padding: 0; display: block;">
| + | |
− | <li class="first" style="/* The width depends on the number of intervals. For example 100 / 7 = 14.29% -- then subtract a little bit for room for the borders */ background: #fff; border-right: 1px solid #ccc; color: #999; float: left; font-size: 1.2em; margin: 0; padding: 15px 0; text-align: center; border-left: 1px solid #ccc; width: 33%;">2003</li>
| + | |
− | <li style="background: #fff; border-right: 1px solid #ccc; color: #999; float: left; font-size: 1.2em; margin: 0; padding: 15px 0; text-align: center; width: 33%;">2004</li>
| + | |
− | <li class="last" style="background: #fff; border-right: 1px solid #ccc; color: #999; float: left; font-size: 1.2em; margin: 0; padding: 15px 0; text-align: center; width: 33%;">2009</li>
| + | |
− | </ul> <!-- end .intervals --> | + | |
| </div> <!-- end .timeline --> | | </div> <!-- end .timeline --> |