Skip to content

Instantly share code, notes, and snippets.

@Igcorreia

Igcorreia/Finally-I-can-reproduce-in-CSS-what-I-managed-to-design-in-Photoshop!-Tks-@chrome-and-@greensock-#html5.markdown

Created April 24, 2015 22:39
Show Gist options
  • Save Igcorreia/c4c42e401d6d97d40d44 to your computer and use it in GitHub Desktop.
Save Igcorreia/c4c42e401d6d97d40d44 to your computer and use it in GitHub Desktop.
Download ZIP
Finally I can reproduce in CSS what I managed to design in Photoshop! Tks @chrome and @greensock #html5
Raw
Finally-I-can-reproduce-in-CSS-what-I-managed-to-design-in-Photoshop!-Tks-@chrome-and-@greensock-#html5.markdown

Finally I can reproduce in CSS what I managed to design in Photoshop! Tks @chrome and @greensock #html5

Hi and Welcome to Codepen! My name is Ignacio and I am looking for a Dribble invitation. Please contact me via twitter if you have 1 more, I you like to get it hehe :) Finally I can reproduce in CSS what I managed to design in Photoshop Took the web 8 years to reach what the computers can do for the last 20 :/ Still not all browsers allow for the creatives to reproduce everything. We still have browser compatibility problems.

A Pen by Ignacio Correia on CodePen.

License.

Raw
index.html
<div id="sliderWrapper">
<span class="play fa-stack">
<i class="fa fa-play fa-inverse"></i>
</span>
<span class="stop fa-stack">
<i class="fa fa-stop fa-inverse"></i>
</span>
<div id="slider"></div>
</div>
<div id="events">
<div id="wrapper">
<div id="header">
<div class="container">
<h1>Events this Week</h1>
<h2>Pack's that include events</h2>
</div>
</div>
<div id="scroller">
<div id="events-list">
<ul>
<li class="event event-01">
<div class="content-wrapper">
<div class="thumb">
<div class="line"></div>
<div class="shadow">
<div class="tags">
<i class="fa fa-tags"></i>
<span>Exterior</span>
</div>
</div>
</div>
<div class="event-content">
<div class="top"><h3>Nature Exploration</h3><h4>leisure</h4>
<div class="details">
<div class="date"><i class="fa fa-calendar"></i> <span>20 / 02 / 1986</span></div>
<div class="hour"><i class="fa fa-clock-o"></i> <span>8 PM</span></div>
<div class="mini-icons">
<i class="fa fa-eye"></i><i class="fa fa-qrcode"></i><i class="fa fa-camera"></i><i class="fa fa-film"></i>
<div class="clear"></div>
</div>
</div>
</div>
<div class="prices">
<div class="section">
<div class="label">Discount</div>
<div class="price">30%</div>
</div>
<div class="section shadow-left">
<div class="label">Discount</div>
<div class="price">$100</div>
</div>
<div class="section shadow-left">
<div class="label">Points</div>
<div class="price">100</div>
</div>
</div>
<div class="bottom"><a href="#">Event Details <i class="fa fa-chevron-right"></i></a></div>
</div> <div class="clear"></div>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div id="timeline"></div>
</div>
</div>
</div>
<div id="copy">
<a href="https://www.behance.net/gallery/24675953/Algarvepass-Web-Design" target="_blank">Inspired by: Algarvepass</a>
<br />
<a href="https://twitter.com/igcorreia" target="_blank">Crafted by: <b>@igcorreia</b> | Searching for a Dribbble invite :)</a>
</div>
Raw
script.js
/*
* Hi and Welcome to Codepen!
*
* My name is Ignacio and I am looking for a Dribble invitation.
* Please contact me via twitter if you have 1,
* I would like to have 1 hehe :)
*
*
* Finally I can reproduce in CSS what I managed to design in Photoshop.
* Still not all browsers allow for the creatives to reproduce everything.
* We still have browser compatibility problems.
*
* I will keep publishing examples to help push the web foward.
* PLEASE Like, Heart or Share if you like, and don't forget to follow.
* Thanks.
*
* Now let's animate it :)
*/
$(document).ready(function(){
var event = $('.event')
,tl = new TimelineLite({onUpdate:updateSlider,onComplete:restart})
,wid = $(window).width()
,PowVal = ''
,PowOut = 'Back'+PowVal+'.easeOut'
,PowIn = 'Back'+PowVal+'.easeIn'
,PowInOut = 'Back'+PowVal+'.easeInOut'
,playButton = $('.play')
,stopButton = $('.stop')
,eventContent = $('.content-wrapper')
,thumb = $('.thumb')
,contentItems = $('.top h3,.top h4, .details > div')
,tags = $('.tags')
,pricesLabels = $('.section .label')
,pricesPrices = $('.section .price')
,bottomLink = $('.bottom a')
,speed = 0.8;
tl.set(event, {left:wid})
.set(thumb,{backgroundSize:'320px 320px'})
.set(tags, {left:200,autoAlpha:0})
.set(bottomLink, {right:200,autoAlpha:0})
.set(contentItems, {left:200,autoAlpha:0})
.set(pricesLabels,{scale:0})
.set(pricesPrices,{scale:0})
.to(event, speed,{left:0,ease:PowOut},1,'intro')
.staggerTo(contentItems, speed,{left:0,autoAlpha:1,ease:Elastic.easeInOut},0.2,'-=0.6')
.to(tags, speed,{left:30,autoAlpha:1,ease:Elastic.easeInOut},'-=0.6')
.staggerTo(pricesLabels, speed,{scale:1,ease:Elastic.easeInOut},0.2,'-=0.6')
.staggerTo(pricesPrices, speed,{scale:1,ease:Elastic.easeInOut},0.2,'-=1')
.to(bottomLink, speed,{right:0,autoAlpha:1,ease:Elastic.easeInOut},'-=0.6')
.to(event, speed,{left:-wid,ease:PowIn},8);
tl.play();
$("#slider").slider({
range: false, min: 0, max: 100, step:.1,
slide: function ( event, ui ) {
tl.pause(); tl.progress( ui.value/100 );
}});
function updateSlider() {
$("#slider").slider("value", tl.progress() *100);
}
$(playButton).click(function(){
tl.stop();
tl.restart();
})
$(stopButton).click(function(){
tl.stop();
})
function restart(){
tl.stop();
tl.restart();
}
});
Raw
style.less
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
html{height: 100%; width: 100%; min-height:100%;
background-image: url('data:image/jpg;base64,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aGVuUHJpbnRpbmdib29sAAAAAA5jcm9wUmVjdEJvdHRvbWxvbmcAAAAAAAAADGNyb3BSZWN0TGVmdGxvbmcAAAAAAAAADWNyb3BSZWN0UmlnaHRsb25nAAAAAAAAAAtjcm9wUmVjdFRvcGxvbmcAAAAAADhCSU0D7QAAAAAAEABIAAAAAQACAEgAAAABAAI4QklNBCYAAAAAAA4AAAAAAAAAAAAAP4AAADhCSU0EDQAAAAAABAAAAB44QklNBBkAAAAAAAQAAAAeOEJJTQPzAAAAAAAJAAAAAAAAAAABADhCSU0nEAAAAAAACgABAAAAAAAAAAI4QklNA/UAAAAAAEgAL2ZmAAEAbGZmAAYAAAAAAAEAL2ZmAAEAoZmaAAYAAAAAAAEAMgAAAAEAWgAAAAYAAAAAAAEANQAAAAEALQAAAAYAAAAAAAE4QklNA/gAAAAAAHAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAOEJJTQQIAAAAAAAQAAAAAQAAAkAAAAJAAAAAADhCSU0EHgAAAAAABAAAAAA4QklNBBoAAAAAA10AAAAGAAAAAAAAAAAAAAA1AAAANgAAABQAYQBsAGcAYQByAHYAZQAtAHAAYQBzAHMALQBsAGEAcgBnAGUAXwAyAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAA2AAAANQAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAABAAAAABAAAAAAAAbnVsbAAAAAIAAAAGYm91bmRzT2JqYwAAAAEAAAAAAABSY3QxAAAABAAAAABUb3AgbG9uZwAAAAAAAAAATGVmdGxvbmcAAAAAAAAAAEJ0b21sb25nAAAANQAAAABSZ2h0bG9uZwAAADYAAAAGc2xpY2VzVmxMcwAAAAFPYmpjAAAAAQAAAAAABXNsaWNlAAAAEgAAAAdzbGljZUlEbG9uZwAAAAAAAAAHZ3JvdXBJRGxvbmcAAAAAAAAABm9yaWdpbmVudW0AAAAMRVNsaWNlT3JpZ2luAAAADWF1dG9HZW5lcmF0ZWQAAAAAVHlwZWVu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ZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmM3MTU5NWVhLWRjYjUtMTFlNC1hMTUwLWNmM2UzMDVhZGM3NCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2MTFhYzQ3Ni0xNTI5LWEyNDQtYTY0My04MjBkNDliM2NkY2MiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0iOUYwQUYzNUFFMzREM0I5OERBMDZDOTY5NTdFNDFFNUIiIGRjOmZvcm1hdD0iaW1hZ2UvanBlZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOkhpc3Rvcnk9IjIwMTUtMDQtMDdUMDA6MzY6MTYrMDE6MDAmI3g5O0ZpbGUgYWxnYXJ2ZS1wYXNzLWxhcmdlXzIuanBnIG9wZW5lZCYjeEE7MjAxNS0wNC0wN1QwMDozNjo1NyswMTowMCYjeDk7RmlsZSBDOlxVc2Vyc1xpZ25hY2lvLmNvcnJlaWFcRGVza3RvcFxwYXR0ZXJuLmpwZyBzYXZlZCYjeEE7IiB4bXA6Q3JlYXRlRGF0ZT0iMjAxNS0wNC0wN1QwMDozNjoxMCswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTUtMDQtMDdUMDA6MzY6NTcrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTUtMDQtMDdUMDA6MzY6NTcrMDE6MDAiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowYmU1ZDI1ZC1lODBjLWE3NDUtOGQ4Yy05Y2U3ZGJlMDkzZDIiIHN0RXZ0OndoZW49IjIwMTUtMDQtMDdUMDA6MzY6NTcrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE0IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NjExYWM0NzYtMTUyOS1hMjQ0LWE2NDMtODIwZDQ5YjNjZGNjIiBzdEV2dDp3aGVuPSIyMDE1LTA0LTA3VDAwOjM2OjU3KzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDxwaG90b3Nob3A6RG9jdW1lbnRBbmNlc3RvcnM+IDxyZGY6QmFnPiA8cmRmOmxpPjlGMEFGMzVBRTM0RDNCOThEQTA2Qzk2OTU3RTQxRTVCPC9yZGY6bGk+IDwvcmRmOkJhZz4gPC9waG90b3Nob3A6RG9jdW1lbnRBbmNlc3RvcnM+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDw/eHBhY2tldCBlbmQ9InciPz7/7gAOQWRvYmUAZEAAAAAB/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQEBAQECAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wAARCAA1ADYDAREAAhEBAxEB/90ABAAH/8QBogAAAAYCAwEAAAAAAAAAAAAABwgGBQQJAwoCAQALAQAABgMBAQEAAAAAAAAAAAAGBQQDBwIIAQkACgsQAAIBAwQBAwMCAwMDAgYJdQECAwQRBRIGIQcTIgAIMRRBMiMVCVFCFmEkMxdScYEYYpElQ6Gx8CY0cgoZwdE1J+FTNoLxkqJEVHNFRjdHYyhVVlcassLS4vJkg3SThGWjs8PT4yk4ZvN1Kjk6SElKWFlaZ2hpanZ3eHl6hYaHiImKlJWWl5iZmqSlpqeoqaq0tba3uLm6xMXGx8jJytTV1tfY2drk5ebn6Onq9PX29/j5+hEAAgEDAgQEAwUEBAQGBgVtAQIDEQQhEgUxBgAiE0FRBzJhFHEIQoEjkRVSoWIWMwmxJMHRQ3LwF+GCNCWSUxhjRPGisiY1GVQ2RWQnCnODk0Z0wtLi8lVldVY3hIWjs8PT4/MpGpSktMTU5PSVpbXF1eX1KEdXZjh2hpamtsbW5vZnd4eXp7fH1+f3SFhoeIiYqLjI2Oj4OUlZaXmJmam5ydnp+So6SlpqeoqaqrrK2ur6/9oADAMBAAIRAxEAPwDe8JOo8n/bn3o9NuQaUPXRLfQHn8XJ/wBj791TrnHrcgA/65tcA/4n/X9+63Q+nUtgYwALkn+n+8+/dbUEEEjHWUWAW1ufrz/gfr/Tke99OVHr13cf1H+39+69UevWAkagbi2v634/P59+631//9De7P1P+uf97966Y65rEzj0n6/7x/rn/H37ra/EOp8caxiwAv8Ak/1976e68/1X/Y/8R791VvhPXD3rprrx+nv3W1+IdYCPQB+b/T8/n3vp7r//0d79U1sfqef+J/PvXTND6dT1jEYFvz9bG/8AyL6e/dbUGox1y976d64P+P8AY+/dUYihz1w966b68fp791tSAQScdYz+pP8AkL/eve+ndS8dQp1//9LfLsqAWA1f6/v3Xuvaz/h/vP8AxX37r3XYfkXAt/vv8ffuqt8J6wzyMGXTwLH6/wDE82966a6w+Vx/qT/tv+IN/fuvddGdjxZbn6Dm/wDh+T791oiop1n0zeHkjV9VH9OQTxf+nv3XqDhTHX//098pv1H/AGH+9e/deqBxPXH37rVR69dj37rTcD1HnPK/6x/3v3rpogjJGOsFwOf9h791rqbBT2UyPf8AqAb/AJ/23v3V1GRjHWY3LDmwHAF/rwfoP9j731cgVGMdf//U3yyRqPP1tb/be9Hpt/Lrr37qoNCD11Y+916vrHUWcepR/h9B9frx79XqrEMpHWenpwi6nIJ/CsRf/bH6+9ceqqvkOpVr83tb6D8H/kXvfTwFBTrg36kP4BYk/gek+/db6//V3yDq1cBbX/qf6H/D+vvR6bfy675/oP8Abn/inv3VOuxe44H+34/2PH09+691wk0+WPy2B506LkfpP6jx+PfuvCnnw6lH8fT/AAt/sf8Aebf7x7306tKY6483976dOnTjj1iN9K/0uf8Aif8AD3rqnX//2Q==');
overflow:hidden;}
@white:#ffffff;
@black:#151515;
@link:#383838;
@linkhover:#000;
@transition:all 0.3s ease-in-out 0s;
@orange:#e32411;
@orangeligth:#e84315;
@ligthgrey:#e0e0e2;
body{
font-family: 'Lato', sans-serif;
background: transparent;
margin: 0; padding: 0;
height: 100%; width: 100%; min-height:100%;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(204,204,204,0.94) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(204,204,204,0.94))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(204,204,204,0.94) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(204,204,204,0.94) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(204,204,204,0.94) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(204,204,204,0.94) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#f0cccccc',GradientType=0 ); /* IE6-9 */
&:after{
/* content:'123';
position: absolute;
width: 100%;
height: 100%;
background: #000;
left:0;
top:0;
z-index:0;*/
}
.clear{
float:none;
clear:both;
}
#work{
position:absolute;
background:@link;
width: 300px;
left:50%;
margin-left: -150px;
padding:10px 0;
top:10px;
color:@white;
text-align:center;
}
#events{
width: 100%;
height: 100%;
min-height:100%;
#wrapper{
position: absolute;
height: 400px;
top:40%;
margin-top:-200px;
/*background: rgba(00,00,00,0.1);*/
width: 100%;
#header{
height: 80px;
/*border-bottom:1px solid @black;*/
.container{
width: 700px;
text-shadow: 0 -1px 1px #EDEDED;
margin: 0 auto;
text-shadow: 0 0 1px 0px #000;
h1{
margin: 0;padding: 0;
text-transform:uppercase;
font-size:30px;
font-weight:900;
color:@black;
cursor:default;
}
h2{
cursor:default;
margin: 0;padding: 8px 0;
text-transform:uppercase;
font-size:15px;
font-weight:700;
color:@black;
}
}
}
}
#scroller{
#events-list{
ul{
li{
position:relative;
&:before{
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 61%, rgba(0,0,0,0) 68%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.38)), color-stop(61%,rgba(0,0,0,0)), color-stop(68%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.38) 0%,rgba(0,0,0,0) 61%,rgba(0,0,0,0) 68%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.38) 0%,rgba(0,0,0,0) 61%,rgba(0,0,0,0) 68%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.38) 0%,rgba(0,0,0,0) 61%,rgba(0,0,0,0) 68%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0.38) 0%,rgba(0,0,0,0) 61%,rgba(0,0,0,0) 68%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
content:'';
position:absolute;
height: 80px;
width: 960px;
display:block;
z-index:0;
top:362px;
opacity:0.3;
margin-left: -140px;
}
width: 700px;
margin: 0 auto;
&:after{
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
position: absolute;
content: '15';
width: 30px;
height: 30px;
line-height: 30px;
font-size: 13px;
font-weight: 400;
text-align: center;
border-radius: 50%;
bottom: -42px;
z-index: 10;
margin-left: 30px;
text-shadow: 0 -1px 1px #ededed;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), 0 0 3px rgba(255, 255, 255, 0.4) inset, 0 0 1px 0px rgba(255, 255, 255, 0.35) inset;
color: #838383;
}
.content-wrapper{
transform-origin: 48px 100%;
transform: rotate(0deg);
.thumb{
background: url('http://lorempixel.com/400/400/nature/5') no-repeat center center transparent;
width: 320px;
height: 320px;
clip-path: polygon(0% 0%, 100% 0%, 100% 84%,92% 92%,24% 92%,14% 100%, 14% 92%, 0% 92%);
-ms-clip-path: polygon(0% 0%, 100% 0%, 100% 84%,92% 92%,24% 92%,14% 100%, 14% 92%, 0% 92%);
-moz-clip-path: polygon(0% 0%, 100% 0%, 100% 84%,92% 92%,24% 92%,14% 100%, 14% 92%, 0% 92%);
-o-clip-path: polygon(0% 0%, 100% 0%, 100% 84%,92% 92%,24% 92%,14% 100%, 14% 92%, 0% 92%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 84%,92% 92%,24% 92%,14% 100%, 14% 92%, 0% 92%);
float:left;
img{
}
.line{
height: 20px;
width: 100%;
background: @orange;
box-shadow:0 0 1px 1px rgba(255, 255, 255, 0.3) inset,
0 1px 0px 1px rgba(255, 145, 0, 0.07) inset;
}
.shadow{
width: 320px;
height: 120px;
position: relative;
top: 180px;
z-index:1;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(40%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 40%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 40%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 40%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 40%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
.tags{
position:absolute;
bottom:45px;
left:10px;
cursor:default;
color:@ligthgrey;
text-transform:uppercase;
text-shadow: 0 1px 1px #000,0 0px 3px #000;
font-size:11px;
span{
}
}
}
}
.event-content{
overflow:hidden;
float:left;
width: 380px;
height: 248px;
margin-top:20px;
.top{
position:relative;
overflow:hidden;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(238,238,238,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(247,247,247,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(238,238,238,1) 0%,rgba(247,247,247,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#f7f7f7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-image: url('data:image/jpg;base64,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aGVuUHJpbnRpbmdib29sAAAAAA5jcm9wUmVjdEJvdHRvbWxvbmcAAAAAAAAADGNyb3BSZWN0TGVmdGxvbmcAAAAAAAAADWNyb3BSZWN0UmlnaHRsb25nAAAAAAAAAAtjcm9wUmVjdFRvcGxvbmcAAAAAADhCSU0D7QAAAAAAEABIAAAAAQACAEgAAAABAAI4QklNBCYAAAAAAA4AAAAAAAAAAAAAP4AAADhCSU0EDQAAAAAABAAAAB44QklNBBkAAAAAAAQAAAAeOEJJTQPzAAAAAAAJAAAAAAAAAAABADhCSU0nEAAAAAAACgABAAAAAAAAAAI4QklNA/UAAAAAAEgAL2ZmAAEAbGZmAAYAAAAAAAEAL2ZmAAEAoZmaAAYAAAAAAAEAMgAAAAEAWgAAAAYAAAAAAAEANQAAAAEALQAAAAYAAAAAAAE4QklNA/gAAAAAAHAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAOEJJTQQIAAAAAAAQAAAAAQAAAkAAAAJAAAAAADhCSU0EHgAAAAAABAAAAAA4QklNBBoAAAAAA10AAAAGAAAAAAAAAAAAAAA1AAAANgAAABQAYQBsAGcAYQByAHYAZQAtAHAAYQBzAHMALQBsAGEAcgBnAGUAXwAyAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAA2AAAANQAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAABAAAAABAAAAAAAAbnVsbAAAAAIAAAAGYm91bmRzT2JqYwAAAAEAAAAAAABSY3QxAAAABAAAAABUb3AgbG9uZwAAAAAAAAAATGVmdGxvbmcAAAAAAAAAAEJ0b21sb25nAAAANQAAAABSZ2h0bG9uZwAAADYAAAAGc2xpY2VzVmxMcwAAAAFPYmpjAAAAAQAAAAAABXNsaWNlAAAAEgAAAAdzbGljZUlEbG9uZwAAAAAAAAAHZ3JvdXBJRGxvbmcAAAAAAAAABm9yaWdpbmVudW0AAAAMRVNsaWNlT3JpZ2luAAAADWF1dG9HZW5lcmF0ZWQAAAAAVHlwZWVu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ZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmM3MTU5NWVhLWRjYjUtMTFlNC1hMTUwLWNmM2UzMDVhZGM3NCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2MTFhYzQ3Ni0xNTI5LWEyNDQtYTY0My04MjBkNDliM2NkY2MiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0iOUYwQUYzNUFFMzREM0I5OERBMDZDOTY5NTdFNDFFNUIiIGRjOmZvcm1hdD0iaW1hZ2UvanBlZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOkhpc3Rvcnk9IjIwMTUtMDQtMDdUMDA6MzY6MTYrMDE6MDAmI3g5O0ZpbGUgYWxnYXJ2ZS1wYXNzLWxhcmdlXzIuanBnIG9wZW5lZCYjeEE7MjAxNS0wNC0wN1QwMDozNjo1NyswMTowMCYjeDk7RmlsZSBDOlxVc2Vyc1xpZ25hY2lvLmNvcnJlaWFcRGVza3RvcFxwYXR0ZXJuLmpwZyBzYXZlZCYjeEE7IiB4bXA6Q3JlYXRlRGF0ZT0iMjAxNS0wNC0wN1QwMDozNjoxMCswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTUtMDQtMDdUMDA6MzY6NTcrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTUtMDQtMDdUMDA6MzY6NTcrMDE6MDAiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowYmU1ZDI1ZC1lODBjLWE3NDUtOGQ4Yy05Y2U3ZGJlMDkzZDIiIHN0RXZ0OndoZW49IjIwMTUtMDQtMDdUMDA6MzY6NTcrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE0IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NjExYWM0NzYtMTUyOS1hMjQ0LWE2NDMtODIwZDQ5YjNjZGNjIiBzdEV2dDp3aGVuPSIyMDE1LTA0LTA3VDAwOjM2OjU3KzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDxwaG90b3Nob3A6RG9jdW1lbnRBbmNlc3RvcnM+IDxyZGY6QmFnPiA8cmRmOmxpPjlGMEFGMzVBRTM0RDNCOThEQTA2Qzk2OTU3RTQxRTVCPC9yZGY6bGk+IDwvcmRmOkJhZz4gPC9waG90b3Nob3A6RG9jdW1lbnRBbmNlc3RvcnM+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDw/eHBhY2tldCBlbmQ9InciPz7/7gAOQWRvYmUAZEAAAAAB/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQEBAQECAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wAARCAA1ADYDAREAAhEBAxEB/90ABAAH/8QBogAAAAYCAwEAAAAAAAAAAAAABwgGBQQJAwoCAQALAQAABgMBAQEAAAAAAAAAAAAGBQQDBwIIAQkACgsQAAIBAwQBAwMCAwMDAgYJdQECAwQRBRIGIQcTIgAIMRRBMiMVCVFCFmEkMxdScYEYYpElQ6Gx8CY0cgoZwdE1J+FTNoLxkqJEVHNFRjdHYyhVVlcassLS4vJkg3SThGWjs8PT4yk4ZvN1Kjk6SElKWFlaZ2hpanZ3eHl6hYaHiImKlJWWl5iZmqSlpqeoqaq0tba3uLm6xMXGx8jJytTV1tfY2drk5ebn6Onq9PX29/j5+hEAAgEDAgQEAwUEBAQGBgVtAQIDEQQhEgUxBgAiE0FRBzJhFHEIQoEjkRVSoWIWMwmxJMHRQ3LwF+GCNCWSUxhjRPGisiY1GVQ2RWQnCnODk0Z0wtLi8lVldVY3hIWjs8PT4/MpGpSktMTU5PSVpbXF1eX1KEdXZjh2hpamtsbW5vZnd4eXp7fH1+f3SFhoeIiYqLjI2Oj4OUlZaXmJmam5ydnp+So6SlpqeoqaqrrK2ur6/9oADAMBAAIRAxEAPwDe8JOo8n/bn3o9NuQaUPXRLfQHn8XJ/wBj791TrnHrcgA/65tcA/4n/X9+63Q+nUtgYwALkn+n+8+/dbUEEEjHWUWAW1ufrz/gfr/Tke99OVHr13cf1H+39+69UevWAkagbi2v634/P59+631//9De7P1P+uf97966Y65rEzj0n6/7x/rn/H37ra/EOp8caxiwAv8Ak/1976e68/1X/Y/8R791VvhPXD3rprrx+nv3W1+IdYCPQB+b/T8/n3vp7r//0d79U1sfqef+J/PvXTND6dT1jEYFvz9bG/8AyL6e/dbUGox1y976d64P+P8AY+/dUYihz1w966b68fp791tSAQScdYz+pP8AkL/eve+ndS8dQp1//9LfLsqAWA1f6/v3Xuvaz/h/vP8AxX37r3XYfkXAt/vv8ffuqt8J6wzyMGXTwLH6/wDE82966a6w+Vx/qT/tv+IN/fuvddGdjxZbn6Dm/wDh+T791oiop1n0zeHkjV9VH9OQTxf+nv3XqDhTHX//098pv1H/AGH+9e/deqBxPXH37rVR69dj37rTcD1HnPK/6x/3v3rpogjJGOsFwOf9h791rqbBT2UyPf8AqAb/AJ/23v3V1GRjHWY3LDmwHAF/rwfoP9j731cgVGMdf//U3yyRqPP1tb/be9Hpt/Lrr37qoNCD11Y+916vrHUWcepR/h9B9frx79XqrEMpHWenpwi6nIJ/CsRf/bH6+9ceqqvkOpVr83tb6D8H/kXvfTwFBTrg36kP4BYk/gek+/db6//V3yDq1cBbX/qf6H/D+vvR6bfy675/oP8Abn/inv3VOuxe44H+34/2PH09+691wk0+WPy2B506LkfpP6jx+PfuvCnnw6lH8fT/AAt/sf8Aebf7x7306tKY6483976dOnTjj1iN9K/0uf8Aif8AD3rqnX//2Q==');
h3{
position:relative;
cursor:default;
text-transform:uppercase;
font-weight: 900;
padding: 20px 20px 0;
font-size:20px;
}
h4{
position:relative;
cursor:default;
text-transform:uppercase;
font-weight: 700;
padding: 5px 20px 0;
font-size:13px;
}
.details{
cursor:default;
padding: 40px 20px 0;
font-size:11px;
text-shadow: 0 -1px 0 rgba(255,255,225,0.5);
color:@black;
font-weight: 700;
.date{padding: 0 0 8px;position: relative;}
.hour{padding: 0 0 8px;position: relative;}
.mini-icons{
position: relative;
padding:0 0 16px 0;
i{
float: left;
padding: 4px 4px 3px;
background: rgba(94, 94, 94, 0.47);
vertical-align: middle;
margin-right: 2px;
color: #D0D0D0;
text-shadow: 0 0px 1px rgba(0, 0, 0, 1);
font-size: 11px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25) inset;
}
}
}
}
.prices{
cursor:default;
background: rgb(231,50,19); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(231,50,19,1) 0%, rgba(235,91,2,1) 50%, rgba(250,189,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(231,50,19,1)), color-stop(50%,rgba(235,91,2,1)), color-stop(100%,rgba(250,189,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(231,50,19,1) 0%,rgba(235,91,2,1) 50%,rgba(250,189,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(231,50,19,1) 0%,rgba(235,91,2,1) 50%,rgba(250,189,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(231,50,19,1) 0%,rgba(235,91,2,1) 50%,rgba(250,189,0,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(231,50,19,1) 0%,rgba(235,91,2,1) 50%,rgba(250,189,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e73213', endColorstr='#fabd00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
clip-path: polygon(0% 25%, 96% 25%,101% 0, 101% 84%,5% 84%, 0% 100%);
-ms-clip-path: polygon(0% 25%, 96% 25%,101% 0, 101% 84%,5% 84%, 0% 100%);
-moz-clip-path: polygon(0% 25%, 96% 25%,101% 0, 101% 84%,5% 84%, 0% 100%);
-o-clip-path: polygon(0% 25%, 96% 25%,101% 0, 101% 84%,5% 84%, 0% 100%);
-webkit-clip-path: polygon(0% 25%, 96% 25%,101% 0, 101% 84%,5% 84%, 0% 100%);
overflow: hidden;
position:relative;
height: 107px;
margin-top:-30px;
overflow:hidden;
.section{
float: left;
width: 33.33333333333%;
text-align: center;
height: 90px;
border-left:1px solid rgba(255,255,255,0.05);
margin-left:-1px;
color:@white;
text-transform:uppercase;
text-shadow: 0 0 3px rgba(00,00,00,0.6),0 0 7px rgba(00,00,00,0.5),0 0 9px rgba(00,00,00,0.8);
&.shadow-left{
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.18)), color-stop(55%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.18) 0%,rgba(0,0,0,0) 55%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(0,0,0,0.18) 0%,rgba(0,0,0,0) 55%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.18) 0%,rgba(0,0,0,0) 55%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(0,0,0,0.18) 0%,rgba(0,0,0,0) 55%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.label{
padding:40px 0 0 ;
font-weight: 300;
font-size:14px;
}
.price{
padding:6px 0 0;
font-weight: 900;
font-size:18px;
letter-spacing: 1.1px;
}
}
}
.bottom{
position:absolute;
top:270px;
width: 380px;
text-align:right;
height: 30px;
z-index:18;
a{
display:block;
padding:0 15px 0 0;
text-decoration:none;
color:@orangeligth;
text-transform:uppercase;
font-size:9px;
font-weight: 700;
text-shadow: 0 -1px 0 rgba(255,255,225,0.5);
position: relative;
}
}
}
}
}
}
}
#timeline{
position: absolute;
height: 1px;
bottom:-30px;
margin-top:0;
background:#efefef;
box-shadow:0 1px 0 #bebebe, 0 0 5px rgba(0, 0, 0, 0.14), /*0 50px 0 rgba(190, 190, 190, 0.43)*/;
width: 100%;
}
}
}
#copy{
position:absolute;
bottom:0;
height: 60px;
width: 100%;
text-align:center;
text-transform:uppercase;
line-height: 20px;
font-size:10px;
font-weight:400;
a{
color:@link;
text-decoration:none;
transition:@transition;
b{
font-weight: 700;
}
&:hover{
color:@linkhover
}
}
}
}
#sliderWrapper{
z-index: 9999999;
position:absolute;
bottom: 60px;
width: 580px;
left:50%;
margin-left:-280px;
.play{
cursor: pointer;
text-align: center;
position: absolute;
margin-top: 0;
left: 0;
margin-left: -75px;
font-size: 11px;
}
.stop{
cursor: pointer;
text-align: center;
position: absolute;
margin-top: 0;
left: 0;
margin-left: -35px;
font-size: 11px;
}
#slider{
width: 580px;
margin:10px;
box-shadow: none;
border:0 none;
height: 1px;
background: rgb(231,50,19); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(231,50,19,1) 0%, rgba(235,91,2,1) 50%, rgba(250,189,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(231,50,19,1)), color-stop(50%,rgba(235,91,2,1)), color-stop(100%,rgba(250,189,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(231,50,19,1) 0%,rgba(235,91,2,1) 50%,rgba(250,189,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(231,50,19,1) 0%,rgba(235,91,2,1) 50%,rgba(250,189,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(231,50,19,1) 0%,rgba(235,91,2,1) 50%,rgba(250,189,0,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(231,50,19,1) 0%,rgba(235,91,2,1) 50%,rgba(250,189,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e73213', endColorstr='#fabd00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
span{
cursor:pointer;
background: rgb(231,50,19); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(231,50,19,1) 0%, rgba(235,91,2,1) 50%, rgba(250,189,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(231,50,19,1)), color-stop(50%,rgba(235,91,2,1)), color-stop(100%,rgba(250,189,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(231,50,19,1) 0%,rgba(235,91,2,1) 50%,rgba(250,189,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(231,50,19,1) 0%,rgba(235,91,2,1) 50%,rgba(250,189,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(231,50,19,1) 0%,rgba(235,91,2,1) 50%,rgba(250,189,0,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(231,50,19,1) 0%,rgba(235,91,2,1) 50%,rgba(250,189,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e73213', endColorstr='#fabd00',GradientType=1 );
border-radius:50%;
box-shadow:0 0 4px rgba(00,00,00,0.5);
margin-top:-5px;
border:0 none;
outline:none;
&:focus{
border:0 none;
outline:none;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment