HOME | DD
Ikue — Creative Calendar: Day 12
#advent #adventcalendar #calendar #adventcalendar2016 #creativecalendar #creativecalendar2016
Published: 2016-12-12 23:49:09 +0000 UTC; Views: 918; Favourites: 3; Downloads: 0
Redirect to original
Description
body div#devskin13123534 .list { max-width:815px; display:block; position:relative; text-align:left; margin:0 auto; } body div#devskin13123534 .colm { display:block; float:left; width:33.33%; list-style-position:inside; } body div#devskin13123534 br { display:none!important; } body div#devskin13123534 * { margin:0; padding:0; border:none; } body div#devskin13123534 .gr1, body div#devskin13123534 .gr2, body div#devskin13123534 .gr3, body div#devskin13123534 .gr-top { display:none; } body div#devskin13123534 .gr-box { font-family:'Montserrat', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-weight:700; font-size:13px; line-height:1.5em; color:#776e64; text-transform:uppercase; overflow:visible; } body div#devskin13123534 .text br { display:none; } body div#devskin13123534 div { display:block; } body div#devskin13123534 .header { border-bottom:1px solid #dae3e8; background:#ffffff; padding:40px 20px; width:100%; white-space:nowrap; margin:0 -20px 60px -20px; } body div#devskin13123534 .header-content { margin:0 auto; max-width:978px; } body div#devskin13123534 .header-content ul { margin:0 0 12em 0; padding:0; list-style:none; width:100%; } body div#devskin13123534 .header-content ul, body div#devskin13123534 .header-content ol { list-style:none; list-style-image:none; margin:0; padding:0; } body div#devskin13123534 .header-content ul:before, body div#devskin13123534 .header-content ul:after { display:table; content:''; } body div#devskin13123534 .header-content:after, body div#devskin13123534 .header-content ul:after { clear:both; } body div#devskin13123534 .header-content:before, body div#devskin13123534 .header-content ul:before, body div#devskin13123534 .header-content:after, body div#devskin13123534 .header-content ul:after { display:table; content:''; } body div#devskin13123534 ul { list-style-type:disc; } body div#devskin13123534 ul, body div#devskin13123534 ol { margin:0 0 1em 0; padding:0 0 0 30px; } body div#devskin13123534 .header-content li { width:33.33%; text-align:center; float:left; margin:0; position:relative; } body div#devskin13123534 .header-content li.active a { border-color:#cdd5d9; color:#cdd5d9; } body div#devskin13123534 .header-content li.active a:hover { background:#cdd5d9; color:#fff; } body div#devskin13123534 .header-content li a { border:3px solid transparent; padding:12px 30px; font-weight:600; color:#cdd5d9; font-size:15px; float:none; transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -ms-transition:all 0.4s; -o-transition:all 0.4s; } body div#devskin13123534 .header-content li a:hover { border:3px solid #cdd5d9; } body div#devskin13123534 .gr-body { background:#edf0f2; font-family:'Montserrat', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-weight:700; font-size:13px; line-height:1.5em; color:#776e64; text-transform:uppercase; } body div#devskin13123534 .text { padding:0 20px; margin:0 auto; } body div#devskin13123534 .grid { display:block; margin:0 auto; width:830px; height:auto; position:relative; } body div#devskin13123534 .clear { clear:both!important; } body div#devskin13123534 .box.span-y-2 { height:326px; } body div#devskin13123534 .box.span-x-2 { width:326px; } body div#devskin13123534 .boxx.span-y-3 { height:492px; } body div#devskin13123534 .boxx.span-x-3 { width:492px; } body div#devskin13123534 .boxx { margin:3px!important; } body div#devskin13123534 .box.blk { background:#262626; color:#fff; font-size:22px; line-height:28px; text-align:center; vertical-align:middle; } body div#devskin13123534 .box.blk span.big { display:block; height:250px; width:250px; margin:-125px 0 0 -125px; vertical-align:middle; position:absolute; top:50%; left:50%; } body div#devskin13123534 .box span.small a { display:block; height:108px; width:160px; background:#cdd5d9; padding:55px 0 0 0; margin:-81px 0 0 -81px; vertical-align:middle; position:absolute; top:50%; left:50%; white-space:normal; line-height:25px; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; } body div#devskin13123534 .box span.small a:hover { background:#b2bdc1; } body div#devskin13123534 span.small a.back { line-height:160px!important; padding:0!important; height:160px!important; width:160px!important; color:transparent; font-size:0; position:relative; margin:0; left:0; top:0; box-shadow:inset 0 0 0 50px #fff; -moz-box-shadow:inset 0 0 0 50px #fff; -webkit-box-shadow:inset 0 0 0 50px #fff; } body div#devskin13123534 span.small a.back:before { content:''; display:inline-block; height:60px; width:60px; background:url(https://www.da-files.com/ikue/journals/advent/arrow-down-invert.svg) no-repeat center center; background-color:transparent; background-size:100% auto; margin-top:-30px; margin-left:-30px; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); position:absolute; top:50%; left:50%; } body div#devskin13123534 span.small a.next { line-height:160px!important; padding:0!important; height:160px!important; width:160px!important; color:transparent; font-size:0; position:relative; margin:0; left:0; top:0; box-shadow:inset 0 0 0 50px #fff; -moz-box-shadow:inset 0 0 0 50px #fff; -webkit-box-shadow:inset 0 0 0 50px #fff; } body div#devskin13123534 span.small a.next:before { content:''; display:inline-block; height:60px; width:60px; background:url(https://www.da-files.com/ikue/journals/advent/arrow-down-invert.svg) no-repeat center center; background-color:transparent; background-size:100% auto; margin-top:-30px; margin-left:-30px; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; transform:rotate(-90deg); -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -o-transform:rotate(-90deg); position:absolute; top:50%; left:50%; } body div#devskin13123534 .box span.small a.link { display:block; height:160px; width:100%!important; margin:0; padding:0; vertical-align:middle; background:#262626; white-space:normal; line-height:160px; font-size:25px; position:relative; left:0; top:0; text-align:center; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; } body div#devskin13123534 .box span.small a.link:hover { background:#141616; } body div#devskin13123534 .box span.small a.link:after { content:''; display:inline-block; height:25px; width:25px; background:url(https://www.da-files.com/ikue/journals/advent/arrow-down.svg) no-repeat center center; background-size:100% auto; vertical-align:middle; margin:-3px 0 0 10px; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; } body div#devskin13123534 .box.blk .blue { color:#087083; } body div#devskin13123534 .box.blk .mint { color:#acdde0; } body div#devskin13123534 .box.blk .pink { color:#ff2a75; } /* The wrapper */ body div#devskin13123534 .box p { display:none; } body div#devskin13123534 .box { width:160px; height:160px; float:left; background:#ffffff; position:relative; overflow:hidden; margin:3px!important; color:#cdd5d9; font-family:'Montserrat', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-weight:700; font-size:32px; text-transform:uppercase; } body div#devskin13123534 .box.social { display:block; width:160px; height:160px; background:#fff; padding:0; overflow:hidden; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; position:relative; line-height:0; font-family:'Montserrat', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-weight:700; font-size:16px; text-transform:uppercase; color:#fff; } body div#devskin13123534 .share { display:inline-block; width:100%; height:54.5px; margin:0; padding:17px 20%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; overflow:hidden; position:relative; } body div#devskin13123534 .tweet { background:rgb(0, 182, 241); background:rgba(0, 182, 241, 0.5); } body div#devskin13123534 .tweet:before { content:'Tweet'; text-align:center; line-height:54.5px; display:block; height:100%; width:100%; background:rgb(0, 182, 241); background:rgba(0, 182, 241, 1); position:absolute; top:0; left:0; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; } body div#devskin13123534 .like { background:rgb(59, 89, 153); background:rgba(59, 89, 153, 0.3); } body div#devskin13123534 .like:before { content:'Like'; text-align:center; line-height:54.5px; display:block; height:100%; width:100%; background:rgb(59, 89, 153); background:rgba(59, 89, 153, 1); position:absolute; top:0; left:0; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; z-index:99; } body div#devskin13123534 .plus { background:rgb(221, 75, 57); background:rgba(221, 75, 57, 0.5); } body div#devskin13123534 .plus:before { content:'+1'; text-align:center; line-height:54.5px; display:block; height:100%; width:100%; background:rgb(221, 75, 57); background:rgba(221, 75, 57, 1); position:absolute; top:0; left:0; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; } body div#devskin13123534 .tweet:hover:before, body div#devskin13123534 .like:hover:before, body div#devskin13123534 .plus:hover:before { top:100%; } body div#devskin13123534 .boxx { width:160px; height:160px; float:right; background:#ffffff; position:relative; overflow:hidden; color:#cdd5d9; font-family:'Montserrat', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-weight:700; font-size:32px; text-transform:uppercase; } body div#devskin13123534 .skins { background:#087083; } body div#devskin13123534 .vector { background:#acdde0; } body div#devskin13123534 .wall { background:#ff2a75; } body div#devskin13123534 .logo { transition:all 20s ease; -moz-transition:all 20s ease; -webkit-transition:all 20s ease; -ms-transition:all 20s ease; -o-transition:all 20s ease; box-shadow:inset 5px 0 0 #fff, inset -5px 0 0 #fff; -moz-box-shadow:inset 5px 0 0 #fff, inset -5px 0 0 #fff; -webkit-box-shadow:inset 5px 0 0 #fff, inset -5px 0 0 #fff; background:rgb(205, 213, 217); background:rgba(205, 213, 217, 1); } body div#devskin13123534 .logo.skins { background:#087083; } body div#devskin13123534 .logo.vector { background:#acdde0; } body div#devskin13123534 .logo.wall { background:#ff2a75; } /* The blocks that would be hovered */ body div#devskin13123534 .b-block__hoverer { position:absolute; z-index:1; width:71%; height:71%; transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); opacity:0; filter:alpha(opacity=0); _zoom:1; transition:opacity 0.0s ease-in; -moz-transition:opacity 0.0s ease-in; -webkit-transition:opacity 0.0s ease-in; -ms-transition:opacity 0.0s ease-in; -o-transition:opacity 0.0s ease-in; font-size:22px; color:#fff; } body div#devskin13123534 .b-block__hoverer small { display:block; width:100%; font-size:15px; line-height:15px; margin-top:15px; } body div#devskin13123534 .b-block__hoverer a.butt { display:block; font-size:15px; width:75px; height:24px; border:3px solid #fff; color:#fff; margin:0 auto; padding:6px 0 0 0; transition:all 0.2s; -moz-transition:all 0.2s; -webkit-transition:all 0.2s; -ms-transition:all 0.2s; -o-transition:all 0.2s; } body div#devskin13123534 .box.skins .b-block__hoverer a.butt:hover { background:#fff; color:#087083; } body div#devskin13123534 .box.vector .b-block__hoverer a.butt:hover { background:#fff; color:#acdde0; } body div#devskin13123534 .box.wall .b-block__hoverer a.butt:hover { background:#fff; color:#ff2a75; } /* Positioning for hoverers */ body div#devskin13123534 .b-block__hoverer:nth-child(1) { top:0; right:0; transform-origin:100% 0; -moz-transform-origin:100% 0; -webkit-transform-origin:100% 0; -ms-transform-origin:100% 0; -o-transform-origin:100% 0; } body div#devskin13123534 .b-block__hoverer:nth-child(2) { bottom:0; right:0; transform-origin:100% 100%; -moz-transform-origin:100% 100%; -webkit-transform-origin:100% 100%; -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; } body div#devskin13123534 .b-block__hoverer:nth-child(3) { bottom:0; left:0; transform-origin:0 100%; -moz-transform-origin:0 100%; -webkit-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; } body div#devskin13123534 .b-block__hoverer:nth-child(4) { top:0; left:0; transform-origin:0 0; -moz-transform-origin:0 0; -webkit-transform-origin:0 0; -ms-transform-origin:0 0; -o-transform-origin:0 0; } /* Enlarge the hoverer to cover the whole area */ body div#devskin13123534 .b-block__hoverer:hover { z-index:9; width:100%; height:100%; transform:none; -moz-transform:none; -webkit-transform:none; -ms-transform:none; -o-transform:none; opacity:1; filter:alpha(opacity=100); _zoom:1; transition:opacity 0.3s 0.1s ease-in; -moz-transition:opacity 0.3s 0.1s ease-in; -webkit-transition:opacity 0.3s 0.1s ease-in; -ms-transition:opacity 0.3s 0.1s ease-in; -o-transition:opacity 0.3s 0.1s ease-in; } /* Styles for content block */ body div#devskin13123534 .b-block__content.small { font-size:15px; display:block; line-height:32px; } body div#devskin13123534 .b-block__content.small.desc { font-size:15px; display:block; line-height:20px; height:160px; width:266px; padding:20px 30px; color:#7eb5b3; } body div#devskin13123534 .b-block__content.small.desc span.user { font-size:15px; line-height:15px; padding:10px 0 0 0; } body div#devskin13123534 .b-block__content.small.desc span.name:before { content:''; display:block; height:32px; width:32px; background:url(https://www.da-files.com/ikue/journals/advent/user-3.svg) no-repeat center center; background-color:transparent; background-size:100% auto; vertical-align:middle; margin:0 auto 10px auto; opacity:0.6; filter:alpha(opacity=60); _zoom:1; } body div#devskin13123534 .b-block__content.small span.name { font-size:32px; display:block; line-height:32px; white-space:normal!important; padding:35px 0 15px 0; } body div#devskin13123534 .b-block__content.small span.smaller { font-size:20px; display:block; line-height:32px; white-space:normal!important; padding:35px 0 15px 0; } body div#devskin13123534 .b-block__content.small span.date { font-size:32px; display:block; line-height:42px; white-space:normal!important; } body div#devskin13123534 .b-block__content.small .icon { display:block; height:64px; width:65px; background:rgb(0, 0, 0); background:rgba(0,0,0,0.15); color:transparent; font-size:0; margin:15px auto 12px auto; padding:10px; background-color:rgb(255, 255, 255); background-color:rgba(255,255,255,0.15)!important; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; } body div#devskin13123534 .b-block__content.small .icon.skins { background:url(https://www.da-files.com/ikue/journals/advent/browser-new-window.svg) no-repeat center center; background-size:48px auto; } body div#devskin13123534 .b-block__content.small .icon.vector { background:url(https://www.da-files.com/ikue/journals/advent/compose-2.svg) no-repeat center center; background-size:48px auto; } body div#devskin13123534 .b-block__content.small .icon.wall { background:url(https://www.da-files.com/ikue/journals/advent/image.svg) no-repeat center center; background-size:48px auto; } body div#devskin13123534 .b-block__content { position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; line-height:160px; background:transparent; color:#FFF; transition:all .3s ease; -moz-transition:all .3s ease; -webkit-transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; box-shadow:0 -160px 0 0 rgba(0,0,0,0.1), 160px 0 0 0 rgba(0,0,0,0.1), 0 160px 0 0 rgba(0,0,0,0.1), -160px 0 0 0 rgba(0,0,0,0.1); -moz-box-shadow:0 -160px 0 0 rgba(0,0,0,0.1), 160px 0 0 0 rgba(0,0,0,0.1), 0 160px 0 0 rgba(0,0,0,0.1), -160px 0 0 0 rgba(0,0,0,0.1); -webkit-box-shadow:0 -160px 0 0 rgba(0,0,0,0.1), 160px 0 0 0 rgba(0,0,0,0.1), 0 160px 0 0 rgba(0,0,0,0.1), -160px 0 0 0 rgba(0,0,0,0.1); } body div#devskin13123534 .b-block__content a { color:#fff; } body div#devskin13123534 a.external { text-decoration:none; } body div#devskin13123534 .user-symbol:hover { color:#fff; } /* Move the content block while hovering different blocks */ body div#devskin13123534 .b-block__hoverer:nth-child(1):hover ~ .b-block__content { transform:translate(0, 100%); -moz-transform:translate(0, 100%); -webkit-transform:translate(0, 100%); -ms-transform:translate(0, 100%); -o-transform:translate(0, 100%); } body div#devskin13123534 .b-block__hoverer:nth-child(2):hover ~ .b-block__content { transform:translate(-100%, 0); -moz-transform:translate(-100%, 0); -webkit-transform:translate(-100%, 0); -ms-transform:translate(-100%, 0); -o-transform:translate(-100%, 0); } body div#devskin13123534 .b-block__hoverer:nth-child(3):hover ~ .b-block__content { transform:translate(0, -100%); -moz-transform:translate(0, -100%); -webkit-transform:translate(0, -100%); -ms-transform:translate(0, -100%); -o-transform:translate(0, -100%); } body div#devskin13123534 .b-block__hoverer:nth-child(4):hover ~ .b-block__content { transform:translate(100%, 0); -moz-transform:translate(100%, 0); -webkit-transform:translate(100%, 0); -ms-transform:translate(100%, 0); -o-transform:translate(100%, 0); } body div#devskin13123534 a.download { display:block; height:160px; width:100%; background:#262626; color:#fff; font-size:32px; line-height:160px; text-align:center; vertical-align:middle; float:left; position:relative; } body div#devskin13123534 a.download:after { content:''; display:block; height:4px; width:632px; background:#fff; position:absolute; bottom:50px; left:50%; margin-left:-315px; opacity:0; filter:alpha(opacity=0); _zoom:1; transition:opacity 0.3s; -moz-transition:opacity 0.3s; -webkit-transition:opacity 0.3s; -ms-transition:opacity 0.3s; -o-transition:opacity 0.3s; } body div#devskin13123534 a.download:hover:after { opacity:1; filter:alpha(opacity=100); _zoom:1; } body div#devskin13123534 a .icon { display:inline-block; position:relative; height:32px; width:32px; background:url(https://www.da-files.com/ikue/journals/advent/arrow-down.svg) no-repeat; background-size:100% auto; vertical-align:middle; margin:-4px 0 0 20px; } body div#devskin13123534 .bottom a { display:block; padding:40px 20px; width:100%; background:#fff; color:#cdd5d9; font-size:15px; text-align:center; vertical-align:middle; float:left; position:relative; margin:60px 0 0 0; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; } body div#devskin13123534 .bottom a:before { content:''; display:inline-block; height:22px; width:22px; background:url(https://www.da-files.com/ikue/journals/advent/speech-bubble-right-inverse.svg) no-repeat center center; background-color:#cdd5d9; background-size:100% auto; vertical-align:middle; margin:0 10px 0 0; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; } body div#devskin13123534 .bottom a:hover { text-decoration:none; color:#b2bdc1; } body div#devskin13123534 .bottom a:hover:before { background-color:#b2bdc1; } /* Just for aestetics */ body div#devskin13123534 { text-align:center; } body div#devskin13123534 .off { display:none!important; } body div#devskin13123534 .soon:before { content:'Check Back Later For More Goodies'; text-shadow:0 0 15px #b2bdc1; display:block; width:160px; height:160px; font-size:12px; background:rgb(205, 213, 217); background:rgba(205, 213, 217, 0.8); position:absolute; top:0px; left:0px; padding:45px 30px; line-height:22px; opacity:0; filter:alpha(opacity=0); _zoom:1; color:#fff; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; z-index:99; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } body div#devskin13123534 .soon:hover:before { opacity:1; filter:alpha(opacity=100); _zoom:1; top:0px; } body div#devskin13123534 .horz .embedded-deviation img { max-width:none!important; vertical-align:top; height:auto!important; width:auto!important; max-height:492px!important; min-height:100%!important; min-width:492px!important; } body div#devskin13123534 .right .embedded-deviation img { float:right; clear:both; } body div#devskin13123534 .vert .embedded-deviation img { max-width:none!important; vertical-align:top; height:auto!important; width:auto!important; max-width:492px!important; min-width:100%!important; min-height:492px!important; } body div#devskin13123534 a.embedded-deviation:before { content:''; display:block; position:absolute; top:0; left:0; height:492px; width:492px; background-color:rgb(20, 22, 22); background-color:rgba(20, 22, 22,0.6); background-image:url(https://www.da-files.com/ikue/journals/advent/eye-2.svg); background-repeat:no-repeat; background-position:center center; background-size:74px auto; opacity:0; filter:alpha(opacity=0); _zoom:1; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; } body div#devskin13123534 a.embedded-deviation:hover:before { background-size:64px auto; opacity:1; filter:alpha(opacity=100); _zoom:1; }
Thelma A.Ariel87-Stock iconResourceDec 12
