Line 1: | Line 1: | ||
{{BUHW2016}} | {{BUHW2016}} | ||
<html> | <html> | ||
+ | |||
+ | |||
+ | <style> | ||
+ | .timeline{list-style:none;padding:0;position:relative} | ||
+ | .timeline:before{top:0;bottom:0;position:absolute;content:"";width:2px;background-color:#f1f1f1;left:40px;margin-left:-1.5px} | ||
+ | .timeline>li{margin-bottom:50px;position:relative;min-height:50px} | ||
+ | .timeline>li:before,.timeline>li:after{content:" ";display:table} | ||
+ | .timeline>li:after{clear:both} | ||
+ | .timeline>li .timeline-panel{width:100%;float:right;padding:0 20px 0 100px;position:relative;text-align:left} | ||
+ | .timeline>li .timeline-panel:before{border-left-width:0;border-right-width:15px;left:-15px;right:auto} | ||
+ | .timeline>li .timeline-panel:after{border-left-width:0;border-right-width:14px;left:-14px;right:auto} | ||
+ | .timeline>li .timeline-image{left:0;margin-left:0;width:80px;height:80px;position:absolute;z-index:100;background-color:#fed136;color:#fff;border-radius:100%;border:7px solid #f1f1f1;text-align:center} | ||
+ | .timeline>li .timeline-image h4{font-size:10px;margin-top:12px;line-height:14px} | ||
+ | .timeline>li.timeline-inverted>.timeline-panel{float:right;text-align:left;padding:0 20px 0 100px} | ||
+ | .timeline>li.timeline-inverted>.timeline-panel:before{border-left-width:0;border-right-width:15px;left:-15px;right:auto} | ||
+ | .timeline>li.timeline-inverted>.timeline-panel:after{border-left-width:0;border-right-width:14px;left:-14px;right:auto} | ||
+ | .timeline>li:last-child{margin-bottom:0}.timeline .timeline-heading h4{margin-top:0;color:inherit} | ||
+ | .timeline .timeline-heading h4.subheading{text-transform:none} | ||
+ | .timeline .timeline-body>p,.timeline .timeline-body>ul{margin-bottom:0} | ||
+ | @media (min-width:768px){.timeline:before{left:50%} | ||
+ | .timeline>li{margin-bottom:100px;min-height:100px} | ||
+ | .timeline>li .timeline-panel{width:41%;float:left;padding:0 20px 20px 30px;text-align:right} | ||
+ | .timeline>li .timeline-image{width:100px;height:100px;left:50%;margin-left:-50px} | ||
+ | .timeline>li .timeline-image h4{font-size:13px;margin-top:16px;line-height:18px} | ||
+ | .timeline>li.timeline-inverted>.timeline-panel{float:right;text-align:left;padding:0 30px 20px 20px} | ||
+ | } | ||
+ | @media (min-width:992px){ | ||
+ | .timeline>li{min-height:150px} | ||
+ | .timeline>li .timeline-panel{padding:0 20px 20px} | ||
+ | .timeline>li .timeline-image{width:150px;height:150px;margin-left:-75px} | ||
+ | .timeline>li .timeline-image h4{font-size:18px;margin-top:30px;line-height:26px} | ||
+ | .timeline>li.timeline-inverted>.timeline-panel{padding:0 20px 20px} | ||
+ | } | ||
+ | @media (min-width:1200px){ | ||
+ | .timeline>li{min-height:170px} | ||
+ | .timeline>li .timeline-panel{padding:0 20px 20px 100px} | ||
+ | .timeline>li .timeline-image{width:170px;height:170px;margin-left:-85px} | ||
+ | .timeline>li .timeline-image h4{margin-top:40px} | ||
+ | .timeline>li.timeline-inverted>.timeline-panel{padding:0 100px 20px 20px} | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
Revision as of 22:02, 29 June 2016
Timeline
About
Lorem ipsum dolor sit amet consectetur.
-
2009-2011
Our Humble Beginnings
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
-
March 2011
An Agency is Born
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
-
December 2012
Transition to Full Service
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
-
July 2014
Phase Two Expansion
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
-
Be Part
Of Our
Story!