https://dailyui.co/ #012
Just finished my e-commerce shop card for DailyUI challenge. I mixed some of my old codepens in a single shot. I know that it's not good for conversion, marketing and usability but I focused more on animations.
Love it on Dribbble to boost my ego and complete all the 100 dailyui https://dribbble.com/shots/2552804-Daily-UI-012-E-Commerce-Shop-Single-Item
A Pen by Fabio Ottaviani on CodePen.
| <!-- | |
| Follow me on | |
| Dribbble: https://dribbble.com/supahfunk | |
| Twitter: https://twitter.com/supahfunk | |
| Codepen: https://codepen.io/supah/ | |
| --> | |
| <div class="shop-card"> | |
| <div class="title"> | |
| Nike Metcon 2 | |
| </div> | |
| <div class="desc"> | |
| Men's training shoe | |
| </div> | |
| <div class="slider"> | |
| <figure data-color="#E24938, #A30F22"> | |
| <img src="http://www.supah.it/dribbble/012/1.jpg" /> | |
| </figure> | |
| <figure data-color="#6CD96A, #00986F"> | |
| <img src="http://www.supah.it/dribbble/012/2.jpg" /> | |
| </figure> | |
| <figure data-color="#4795D1, #006EB8"> | |
| <img src="http://www.supah.it/dribbble/012/3.jpg" /> | |
| </figure> | |
| <figure data-color="#292a2f, #131519"> | |
| <img src="http://www.supah.it/dribbble/012/4.jpg" /> | |
| </figure> | |
| </div> | |
| <div class="cta"> | |
| <div class="price">$130</div> | |
| <button class="btn">Add to cart<span class="bg"></span></button> | |
| </div> | |
| </div> | |
| <div class="bg"></div> | |
| <a class="the-most" target="_blank" href="https://codepen.io/2016/popular/pens/"> | |
| <img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/themost-2016.png"> | |
| </a> |
| function background(c1, c2) { | |
| return { | |
| background: '-moz-linear-gradient(15deg, ' + c1 + ' 50%, ' + c2 + ' 50.1%)', | |
| background: '-o-linear-gradient(15deg, ' + c1 + ', ' + c2 + ' 50.1%)', | |
| background: '-webkit-linear-gradient(15deg, ' + c1 + ' 50%, ' + c2 + ')', | |
| background: '-ms-linear-gradient(15deg, ' + c1 + ' 50%, ' + c2 + ' 50.1%)', | |
| background: 'linear-gradient(15deg, ' + c1 + ' 50%,' + c2 + ' 50.1%)' | |
| } | |
| } | |
| function changeBg(c1, c2) { | |
| $('div.bg').css(background(c1, c2)).fadeIn(700, function() { | |
| $('body').css(background(c1, c2)); | |
| $('.bg').hide(); | |
| }) | |
| $('span.bg').css({ | |
| background: '-moz-linear-gradient(135deg, ' + c1 + ', ' + c2 + ')', | |
| background: '-o-linear-gradient(135deg, ' + c1 + ', ' + c2 + ')', | |
| background: '-webkit-linear-gradient(135deg, ' + c1 + ', ' + c2 + ')', | |
| background: '-ms-linear-gradient(135deg, ' + c1 + ', ' + c2 + ')', | |
| background: 'linear-gradient(135deg, ' + c1 + ',' + c2 + ')' | |
| }); | |
| } | |
| $slider = $('.slider'); | |
| $slider.slick({ | |
| arrows: false, | |
| dots: true, | |
| infinite: true, | |
| speed: 600, | |
| fade: true, | |
| focusOnSelect: true, | |
| customPaging: function(slider, i) { | |
| var color = $(slider.$slides[i]).data('color').split(',')[1]; | |
| return '<a><svg width="100%" height="100%" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6.215" stroke="' + color + '"></circle></svg><span style="background:' + color + '"></span></a>'; | |
| } | |
| }).on('beforeChange', function(event, slick, currentSlide, nextSlide) { | |
| colors = $('figure', $slider).eq(nextSlide).data('color').split(','); | |
| color1 = colors[0]; | |
| color2 = colors[1]; | |
| $('.price, .btn').css({ | |
| color: color1 | |
| }); | |
| changeBg(color1, color2); | |
| $('.btn').css({ | |
| borderColor: color2 | |
| }); | |
| }); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js "></script> |
| /*-------------------- | |
| Mixins | |
| ---------------------*/ | |
| @mixin center { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| /*-------------------- | |
| Body | |
| ---------------------*/ | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| body, | |
| html { | |
| height: 100%; | |
| font-family: 'Open Sans Condensed', sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(15deg, #d33f34 50%, #a61322 50.1%); | |
| } | |
| /*-------------------- | |
| Shop Card | |
| ---------------------*/ | |
| .shop-card { | |
| @include center; | |
| width: 350px; | |
| background: #f5f5f5; | |
| box-shadow: 0 10px 20px rgba(0,0,0,.3); | |
| overflow: hidden; | |
| border-radius: 5px; | |
| padding: 25px; | |
| text-align: center; | |
| z-index: 2; | |
| figure { | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| outline: none!important; | |
| & img { | |
| margin: -95px 0 -60px; | |
| width: 100%; | |
| } | |
| } | |
| .title { | |
| font-weight: 900; | |
| text-transform: uppercase; | |
| font-size: 30px; | |
| color: #23211f; | |
| margin-bottom: 5px; | |
| } | |
| .desc { | |
| font-size: 17px; | |
| opacity: .8; | |
| margin-bottom: 3px; | |
| } | |
| .cta { | |
| padding: 20px 20px 5px; | |
| &::after { | |
| content: ''; | |
| display: table; | |
| clear: both; | |
| } | |
| } | |
| .price { | |
| float: left; | |
| color: #FF3100; | |
| font-size: 22px; | |
| font-weight: 900; | |
| padding-top: 2px; | |
| transition: color .3s ease-in-out; | |
| margin-top: 4px; | |
| } | |
| .btn { | |
| position: relative; | |
| z-index: 1; | |
| float: right; | |
| display: inline-block; | |
| font-size: 13px; | |
| font-weight: 900; | |
| text-transform: uppercase; | |
| color: #FF3100; | |
| padding: 12px 18px; | |
| cursor: pointer; | |
| transition: all .3s ease-in-out; | |
| line-height: .95; | |
| border: none; | |
| background: none; | |
| outline: none; | |
| border: 1px solid #FF3100; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| & .bg { | |
| width: 101%; | |
| height: 101%; | |
| display: block!important; | |
| z-index: -1; | |
| opacity: 0; | |
| transition: all .3s ease-in-out; | |
| background: linear-gradient(135deg, #a61322, #d33f34); | |
| } | |
| &:hover { | |
| color: #fff!important; | |
| border: 1px solid transparent!important; | |
| & .bg { | |
| opacity: 1; | |
| } | |
| } | |
| } | |
| } | |
| /*-------------------- | |
| Slick Dots | |
| ---------------------*/ | |
| .slick-dots { | |
| bottom: -30px; | |
| a { | |
| position: relative; | |
| display: block; | |
| width: 16px; | |
| height: 16px; | |
| } | |
| span { | |
| @include center; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| } | |
| circle { | |
| fill: none; | |
| stroke-width: 1; | |
| stroke-linecap: round; | |
| stroke-dasharray: 39 39; | |
| stroke-dashoffset: 39; | |
| transition: all .9s ease-in-out; | |
| transition: stroke-dashoffset 0.5s; | |
| } | |
| .slick-active circle { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| /*-------------------- | |
| Background | |
| --------------------*/ | |
| .bg { | |
| @include center; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(15deg, #d33f34 50%, #a61322 50.1%); | |
| z-index: 1; | |
| display: none; | |
| } | |
| .the-most { | |
| position: fixed; | |
| z-index: 1; | |
| bottom: 0; | |
| left: 0; | |
| width: 50vw; | |
| max-width: 200px; | |
| padding: 10px; | |
| img { | |
| max-width: 100%; | |
| } | |
| } |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet" /> |