<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Sektion66/pen/dviJG?limit=all&page=42&q=service" />
<link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css'>
<style class="cp-pen-styles">html,
body,
p {
margin: 40px;
padding: 0px;
width: 100%;
display: block;
background-color: #eee;
}
#wrapper {
background-color: #ccc;
position: absolute;
}
#wrapper a {
color: #000;
text-decoration: none;
}
#wrapper .dd-header {
margin: 1px 1px 1px 0;
padding: 0;
width: 600px;
height: auto;
background-color: #fff;
list-style-type: none;
overflow: hidden;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
border-left: 10px solid #000;
}
#wrapper .dd-header.select {
border-left: 10px solid #9cbe4f;
background-color: #000;
}
#wrapper .dd-header.select .icon-beaker,
#wrapper .dd-header.select .icon-bar-chart {
color: #9cbe4f;
text-shadow: 0px 0px 1px #fff004;
font-size: 50px;
}
#wrapper .dd-header.select .dd-main {
color: #9cbe4f;
font-size: 14px;
}
#wrapper .dd-header.select .dd-sub {
color: #ccc;
font-size: 24px;
}
#wrapper .dd-header:hover {
border-left: 10px solid #9cbe4f;
/*background-color: #000;
.icon-beaker {
color:@green;
text-shadow:0px 0px 1px #fff004;
font-size:50px;
}
.dd-main {
color:@green;
font-size:14px;
}
.dd-sub {
color:#fff;
font-size:24px;
}*/
}
#wrapper .dd-header .hidden {
display: none;
list-style-type: none;
background-color: #fff;
border: 1px solid #fff;
}
#wrapper .dd-header .hidden p {
margin: 14px 0 14px -24px;
padding: 0;
width: 100%;
background-color: #fff;
}
#wrapper .dd-header div {
height: 100px;
position: relative;
}
.icon-beaker,
.icon-bar-chart {
padding: 0 20px 0 20px;
font-size: 20px;
text-shadow: 0px 0px 1px #333333;
line-height: 90px;
text-decoration: none;
left: 20px;
text-align: center;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.dd-content {
position: absolute;
left: 100px;
bottom: 87px;
}
.dd-main {
padding-top: 20px;
color: #333;
margin: 0;
font-size: 26px;
font-weight: normal;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.dd-sub {
margin: 0;
font-size: 14px;
font-weight: normal;
color: #666;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
</style></head><body>
<div id="wrapper">
<ul class="dd-header">
<li>
<div>
<a href ="#">
<i class="icon-beaker"></i>
<div class="dd-content">
<H2 class="dd-main">Exceptional Service</H2>
<H3 class="dd-sub">Personalized to your needs</H3>
</div>
</a>
</div>
<ul class="hidden">
<li>
<p>Integer porta est eu dui tincidunt ornare accumsan eros euismod. Pellentesque accumsan, mauris ac dictum sagittis, eros ligula volutpat felis, nec accumsan libero libero sed metus. Nullam lacus magna, convallis non sollicitudin id, sollicitudin nec nulla. Morbi ornare egestas urna, eget consectetur mauris aliquam ut. Praesent lacinia pellentesque accumsan. Donec interdum placerat nulla quis adipiscing. Curabitur consectetur eros ut mauris rhoncus</p>
<p>Integer porta est eu dui tincidunt ornare accumsan eros euismod. Pellentesque accumsan, mauris ac dictum sagittis, eros ligula volutpat felis, nec accumsan libero libero sed metus. Nullam lacus magna, convallis non sollicitudin id, sollicitudin nec nulla. Morbi ornare egestas urna, eget consectetur mauris aliquam ut. Praesent lacinia pellentesque accumsan. Donec interdum placerat nulla quis adipiscing. Curabitur consectetur eros ut mauris rhoncus</p>
</li>
</ul>
</li>
</ul>
<ul class="dd-header">
<li>
<div>
<a href ="#">
<i class="icon-bar-chart"></i>
<div class="dd-content">
<H2 class="dd-main">Kangaroos</H2>
<H3 class="dd-sub">They can be dangerous!</H3>
</div>
</a>
</div>
<ul class="hidden">
<li>
<p>Integer porta est eu dui tincidunt ornare accumsan eros euismod. Pellentesque accumsan, mauris ac dictum sagittis, eros ligula volutpat felis, nec accumsan libero libero sed metus. Nullam lacus magna, convallis non sollicitudin id, sollicitudin nec nulla. Morbi ornare egestas urna, eget consectetur mauris aliquam ut. Praesent lacinia pellentesque accumsan. Donec interdum placerat nulla quis adipiscing. Curabitur consectetur eros ut mauris rhoncus</p>
<p>Integer porta est eu dui tincidunt ornare accumsan eros euismod. Pellentesque accumsan, mauris ac dictum sagittis, eros ligula volutpat felis, nec accumsan libero libero sed metus. Nullam lacus magna, convallis non sollicitudin id, sollicitudin nec nulla. Morbi ornare egestas urna, eget consectetur mauris aliquam ut. Praesent lacinia pellentesque accumsan. Donec interdum placerat nulla quis adipiscing. Curabitur consectetur eros ut mauris rhoncus</p>
</li>
</ul>
</li>
</ul>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script >$('ul.dd-header').click(function(e) {
var $el = $(this).find('ul.hidden');
var $opened = $('.toggledDown').not($el);
$opened.toggleClass('toggledDown');
$opened.slideToggle();
$el.toggleClass('toggledDown');
$el.stop().slideToggle();
if( $(this).hasClass('select') ) {
$(this).removeClass('select').addClass('hidden');
} else {
$(this).siblings().removeClass('select').addClass('hidden');
$(this).removeClass('hidden').addClass('select');
}
});
//# sourceURL=pen.js
</script>
</body></html>
