diff --git a/22-loader-with-pure-css/README.md b/22-loader-with-pure-css/README.md new file mode 100644 index 00000000..b0f92dc0 --- /dev/null +++ b/22-loader-with-pure-css/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/bojankrsmanovic/pen/dpzZkm. + + Inspired from http://codepen.io/iremlopsum/pen/WxqyNq All props to Irem Lopsum. I used his values and colors. This is however almost-like replica with pure CSS. Duno why really, just wanted to try. PS. Only works in chrome for now (!= firefox IE). \ No newline at end of file diff --git a/22-loader-with-pure-css/config.rb b/22-loader-with-pure-css/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/22-loader-with-pure-css/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/22-loader-with-pure-css/css/style.css b/22-loader-with-pure-css/css/style.css new file mode 100644 index 00000000..34d6364e --- /dev/null +++ b/22-loader-with-pure-css/css/style.css @@ -0,0 +1,688 @@ +*, +*:before, +*:after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.wrapper { + position: absolute; + left: 50%; + top: 50%; + margin: -100px; + width: 200px; + height: 200px; + background-color: transparent; + border: none; + -webkit-user-select: none; +} +.wrapper .box-wrap { + width: 70%; + height: 70%; + margin: calc((100% - 70%)/2) calc((100% - 70%)/2); + position: relative; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.wrapper .box-wrap .box { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + background: rgba(135, 0, 0, 0.6); + background: -webkit-linear-gradient(left, #141562, #486FBC, #EAB5A1, #8DD6FF, #4973C9, #D07CA7, #F4915E, #F5919E, #B46F89, #141562, #486FBC); + background: linear-gradient(to right, #141562, #486FBC, #EAB5A1, #8DD6FF, #4973C9, #D07CA7, #F4915E, #F5919E, #B46F89, #141562, #486FBC); + background-position: 0% 50%; + background-size: 1000% 1000%; + visibility: hidden; +} +.wrapper .box-wrap .box.one { + -webkit-animation: moveGradient 15s infinite, oneMove 3.5s infinite; + animation: moveGradient 15s infinite, oneMove 3.5s infinite; +} +.wrapper .box-wrap .box.two { + -webkit-animation: moveGradient 15s infinite, twoMove 3.5s .15s infinite; + animation: moveGradient 15s infinite, twoMove 3.5s .15s infinite; +} +.wrapper .box-wrap .box.three { + -webkit-animation: moveGradient 15s infinite, threeMove 3.5s .3s infinite; + animation: moveGradient 15s infinite, threeMove 3.5s .3s infinite; +} +.wrapper .box-wrap .box.four { + -webkit-animation: moveGradient 15s infinite, fourMove 3.5s .575s infinite; + animation: moveGradient 15s infinite, fourMove 3.5s .575s infinite; +} +.wrapper .box-wrap .box.five { + -webkit-animation: moveGradient 15s infinite, fiveMove 3.5s .725s infinite; + animation: moveGradient 15s infinite, fiveMove 3.5s .725s infinite; +} +.wrapper .box-wrap .box.six { + -webkit-animation: moveGradient 15s infinite, sixMove 3.5s .875s infinite; + animation: moveGradient 15s infinite, sixMove 3.5s .875s infinite; +} + +@-webkit-keyframes moveGradient { + to { + background-position: 100% 50%; + } +} + +@keyframes moveGradient { + to { + background-position: 100% 50%; + } +} +@-webkit-keyframes oneMove { + 0% { + visibility: visible; + -webkit-clip-path: inset(0% 35% 70% round 5%); + clip-path: inset(0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 14.2857% { + -webkit-clip-path: inset(0% 35% 70% round 5%); + clip-path: inset(0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 28.5714% { + -webkit-clip-path: inset(35% round 5%); + clip-path: inset(35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 42.8571% { + -webkit-clip-path: inset(35% 70% 35% 0 round 5%); + clip-path: inset(35% 70% 35% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 57.1428% { + -webkit-clip-path: inset(35% 70% 35% 0 round 5%); + clip-path: inset(35% 70% 35% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 71.4285% { + -webkit-clip-path: inset(0% 70% 70% 0 round 5%); + clip-path: inset(0% 70% 70% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 85.7142% { + -webkit-clip-path: inset(0% 70% 70% 0 round 5%); + clip-path: inset(0% 70% 70% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 100% { + -webkit-clip-path: inset(0% 35% 70% round 5%); + clip-path: inset(0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} +@keyframes oneMove { + 0% { + visibility: visible; + -webkit-clip-path: inset(0% 35% 70% round 5%); + clip-path: inset(0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 14.2857% { + -webkit-clip-path: inset(0% 35% 70% round 5%); + clip-path: inset(0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 28.5714% { + -webkit-clip-path: inset(35% round 5%); + clip-path: inset(35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 42.8571% { + -webkit-clip-path: inset(35% 70% 35% 0 round 5%); + clip-path: inset(35% 70% 35% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 57.1428% { + -webkit-clip-path: inset(35% 70% 35% 0 round 5%); + clip-path: inset(35% 70% 35% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 71.4285% { + -webkit-clip-path: inset(0% 70% 70% 0 round 5%); + clip-path: inset(0% 70% 70% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 85.7142% { + -webkit-clip-path: inset(0% 70% 70% 0 round 5%); + clip-path: inset(0% 70% 70% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 100% { + -webkit-clip-path: inset(0% 35% 70% round 5%); + clip-path: inset(0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} +@-webkit-keyframes twoMove { + 0% { + visibility: visible; + -webkit-clip-path: inset(0% 70% 70% 0 round 5%); + clip-path: inset(0% 70% 70% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 14.2857% { + -webkit-clip-path: inset(0% 70% 70% 0 round 5%); + clip-path: inset(0% 70% 70% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 28.5714% { + -webkit-clip-path: inset(0% 35% 70% round 5%); + clip-path: inset(0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 42.8571% { + -webkit-clip-path: inset(0% 35% 70% round 5%); + clip-path: inset(0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 57.1428% { + -webkit-clip-path: inset(35% round 5%); + clip-path: inset(35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 71.4285% { + -webkit-clip-path: inset(35% 70% 35% 0 round 5%); + clip-path: inset(35% 70% 35% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 85.7142% { + -webkit-clip-path: inset(35% 70% 35% 0 round 5%); + clip-path: inset(35% 70% 35% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 100% { + -webkit-clip-path: inset(0% 70% 70% 0 round 5%); + clip-path: inset(0% 70% 70% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} +@keyframes twoMove { + 0% { + visibility: visible; + -webkit-clip-path: inset(0% 70% 70% 0 round 5%); + clip-path: inset(0% 70% 70% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 14.2857% { + -webkit-clip-path: inset(0% 70% 70% 0 round 5%); + clip-path: inset(0% 70% 70% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 28.5714% { + -webkit-clip-path: inset(0% 35% 70% round 5%); + clip-path: inset(0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 42.8571% { + -webkit-clip-path: inset(0% 35% 70% round 5%); + clip-path: inset(0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 57.1428% { + -webkit-clip-path: inset(35% round 5%); + clip-path: inset(35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 71.4285% { + -webkit-clip-path: inset(35% 70% 35% 0 round 5%); + clip-path: inset(35% 70% 35% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 85.7142% { + -webkit-clip-path: inset(35% 70% 35% 0 round 5%); + clip-path: inset(35% 70% 35% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 100% { + -webkit-clip-path: inset(0% 70% 70% 0 round 5%); + clip-path: inset(0% 70% 70% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} +@-webkit-keyframes threeMove { + 0% { + visibility: visible; + -webkit-clip-path: inset(35% 70% 35% 0 round 5%); + clip-path: inset(35% 70% 35% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 14.2857% { + -webkit-clip-path: inset(35% 70% 35% 0 round 5%); + clip-path: inset(35% 70% 35% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 28.5714% { + -webkit-clip-path: inset(0% 70% 70% 0 round 5%); + clip-path: inset(0% 70% 70% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 42.8571% { + -webkit-clip-path: inset(0% 70% 70% 0 round 5%); + clip-path: inset(0% 70% 70% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 57.1428% { + -webkit-clip-path: inset(0% 35% 70% round 5%); + clip-path: inset(0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 71.4285% { + -webkit-clip-path: inset(0% 35% 70% round 5%); + clip-path: inset(0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 85.7142% { + -webkit-clip-path: inset(35% round 5%); + clip-path: inset(35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 100% { + -webkit-clip-path: inset(35% 70% 35% 0 round 5%); + clip-path: inset(35% 70% 35% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} +@keyframes threeMove { + 0% { + visibility: visible; + -webkit-clip-path: inset(35% 70% 35% 0 round 5%); + clip-path: inset(35% 70% 35% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 14.2857% { + -webkit-clip-path: inset(35% 70% 35% 0 round 5%); + clip-path: inset(35% 70% 35% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 28.5714% { + -webkit-clip-path: inset(0% 70% 70% 0 round 5%); + clip-path: inset(0% 70% 70% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 42.8571% { + -webkit-clip-path: inset(0% 70% 70% 0 round 5%); + clip-path: inset(0% 70% 70% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 57.1428% { + -webkit-clip-path: inset(0% 35% 70% round 5%); + clip-path: inset(0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 71.4285% { + -webkit-clip-path: inset(0% 35% 70% round 5%); + clip-path: inset(0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 85.7142% { + -webkit-clip-path: inset(35% round 5%); + clip-path: inset(35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 100% { + -webkit-clip-path: inset(35% 70% 35% 0 round 5%); + clip-path: inset(35% 70% 35% 0 round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} +@-webkit-keyframes fourMove { + 0% { + visibility: visible; + -webkit-clip-path: inset(35% 0% 35% 70% round 5%); + clip-path: inset(35% 0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 14.2857% { + -webkit-clip-path: inset(35% 0% 35% 70% round 5%); + clip-path: inset(35% 0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 28.5714% { + -webkit-clip-path: inset(35% round 5%); + clip-path: inset(35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 42.8571% { + -webkit-clip-path: inset(70% 35% 0% 35% round 5%); + clip-path: inset(70% 35% 0% 35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 57.1428% { + -webkit-clip-path: inset(70% 35% 0% 35% round 5%); + clip-path: inset(70% 35% 0% 35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 71.4285% { + -webkit-clip-path: inset(70% 0 0 70% round 5%); + clip-path: inset(70% 0 0 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 85.7142% { + -webkit-clip-path: inset(70% 0 0 70% round 5%); + clip-path: inset(70% 0 0 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 100% { + -webkit-clip-path: inset(35% 0% 35% 70% round 5%); + clip-path: inset(35% 0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} +@keyframes fourMove { + 0% { + visibility: visible; + -webkit-clip-path: inset(35% 0% 35% 70% round 5%); + clip-path: inset(35% 0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 14.2857% { + -webkit-clip-path: inset(35% 0% 35% 70% round 5%); + clip-path: inset(35% 0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 28.5714% { + -webkit-clip-path: inset(35% round 5%); + clip-path: inset(35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 42.8571% { + -webkit-clip-path: inset(70% 35% 0% 35% round 5%); + clip-path: inset(70% 35% 0% 35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 57.1428% { + -webkit-clip-path: inset(70% 35% 0% 35% round 5%); + clip-path: inset(70% 35% 0% 35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 71.4285% { + -webkit-clip-path: inset(70% 0 0 70% round 5%); + clip-path: inset(70% 0 0 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 85.7142% { + -webkit-clip-path: inset(70% 0 0 70% round 5%); + clip-path: inset(70% 0 0 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 100% { + -webkit-clip-path: inset(35% 0% 35% 70% round 5%); + clip-path: inset(35% 0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} +@-webkit-keyframes fiveMove { + 0% { + visibility: visible; + -webkit-clip-path: inset(70% 0 0 70% round 5%); + clip-path: inset(70% 0 0 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 14.2857% { + -webkit-clip-path: inset(70% 0 0 70% round 5%); + clip-path: inset(70% 0 0 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 28.5714% { + -webkit-clip-path: inset(35% 0% 35% 70% round 5%); + clip-path: inset(35% 0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 42.8571% { + -webkit-clip-path: inset(35% 0% 35% 70% round 5%); + clip-path: inset(35% 0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 57.1428% { + -webkit-clip-path: inset(35% round 5%); + clip-path: inset(35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 71.4285% { + -webkit-clip-path: inset(70% 35% 0% 35% round 5%); + clip-path: inset(70% 35% 0% 35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 85.7142% { + -webkit-clip-path: inset(70% 35% 0% 35% round 5%); + clip-path: inset(70% 35% 0% 35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 100% { + -webkit-clip-path: inset(70% 0 0 70% round 5%); + clip-path: inset(70% 0 0 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} +@keyframes fiveMove { + 0% { + visibility: visible; + -webkit-clip-path: inset(70% 0 0 70% round 5%); + clip-path: inset(70% 0 0 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 14.2857% { + -webkit-clip-path: inset(70% 0 0 70% round 5%); + clip-path: inset(70% 0 0 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 28.5714% { + -webkit-clip-path: inset(35% 0% 35% 70% round 5%); + clip-path: inset(35% 0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 42.8571% { + -webkit-clip-path: inset(35% 0% 35% 70% round 5%); + clip-path: inset(35% 0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 57.1428% { + -webkit-clip-path: inset(35% round 5%); + clip-path: inset(35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 71.4285% { + -webkit-clip-path: inset(70% 35% 0% 35% round 5%); + clip-path: inset(70% 35% 0% 35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 85.7142% { + -webkit-clip-path: inset(70% 35% 0% 35% round 5%); + clip-path: inset(70% 35% 0% 35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 100% { + -webkit-clip-path: inset(70% 0 0 70% round 5%); + clip-path: inset(70% 0 0 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} +@-webkit-keyframes sixMove { + 0% { + visibility: visible; + -webkit-clip-path: inset(70% 35% 0% 35% round 5%); + clip-path: inset(70% 35% 0% 35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 14.2857% { + -webkit-clip-path: inset(70% 35% 0% 35% round 5%); + clip-path: inset(70% 35% 0% 35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 28.5714% { + -webkit-clip-path: inset(70% 0 0 70% round 5%); + clip-path: inset(70% 0 0 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 42.8571% { + -webkit-clip-path: inset(70% 0 0 70% round 5%); + clip-path: inset(70% 0 0 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 57.1428% { + -webkit-clip-path: inset(35% 0% 35% 70% round 5%); + clip-path: inset(35% 0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 71.4285% { + -webkit-clip-path: inset(35% 0% 35% 70% round 5%); + clip-path: inset(35% 0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 85.7142% { + -webkit-clip-path: inset(35% round 5%); + clip-path: inset(35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 100% { + -webkit-clip-path: inset(70% 35% 0% 35% round 5%); + clip-path: inset(70% 35% 0% 35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} +@keyframes sixMove { + 0% { + visibility: visible; + -webkit-clip-path: inset(70% 35% 0% 35% round 5%); + clip-path: inset(70% 35% 0% 35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 14.2857% { + -webkit-clip-path: inset(70% 35% 0% 35% round 5%); + clip-path: inset(70% 35% 0% 35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 28.5714% { + -webkit-clip-path: inset(70% 0 0 70% round 5%); + clip-path: inset(70% 0 0 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 42.8571% { + -webkit-clip-path: inset(70% 0 0 70% round 5%); + clip-path: inset(70% 0 0 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 57.1428% { + -webkit-clip-path: inset(35% 0% 35% 70% round 5%); + clip-path: inset(35% 0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 71.4285% { + -webkit-clip-path: inset(35% 0% 35% 70% round 5%); + clip-path: inset(35% 0% 35% 70% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 85.7142% { + -webkit-clip-path: inset(35% round 5%); + clip-path: inset(35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 100% { + -webkit-clip-path: inset(70% 35% 0% 35% round 5%); + clip-path: inset(70% 35% 0% 35% round 5%); + -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} diff --git a/22-loader-with-pure-css/index.html b/22-loader-with-pure-css/index.html new file mode 100644 index 00000000..d0b70fd1 --- /dev/null +++ b/22-loader-with-pure-css/index.html @@ -0,0 +1,35 @@ + + + + + #22 - Loader with pure CSS + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ + + + + + diff --git a/22-loader-with-pure-css/license.md b/22-loader-with-pure-css/license.md new file mode 100644 index 00000000..1f95acf6 --- /dev/null +++ b/22-loader-with-pure-css/license.md @@ -0,0 +1,10 @@ + + diff --git a/22-loader-with-pure-css/scss/style.scss b/22-loader-with-pure-css/scss/style.scss new file mode 100644 index 00000000..cb79ddc6 --- /dev/null +++ b/22-loader-with-pure-css/scss/style.scss @@ -0,0 +1,355 @@ +$w-size: 200px; +$w-margin: -$w-size/2; +$b-size: 70%; //This is % based on $w-size. Use any value you want (that makes sense) and any unit that you would like (test it) +$box-wrapper-width: $b-size; +$box-wrapper-height: $b-size; +$box-wrapper-margin: calc((100% - #{$box-wrapper-height})/2) calc((100% - #{$box-wrapper-width})/2); + +//clip-path: inset() doesn't work on firefox and IE, if anyone feels like making it work with SVG clipping, please drop me a link in comments, would like to see it. :) + +*, +*:before, +*:after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + + +.wrapper { + position: absolute; + left: 50%; + top: 50%; + margin: $w-margin; + width: $w-size; + height: $w-size; + background-color: transparent; + border: none; + -webkit-user-select: none; + + .box-wrap { + width: $box-wrapper-width; + height: $box-wrapper-height; + margin: $box-wrapper-margin; + position: relative; + transform: rotate(-45deg); + + .box { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + background: rgba(135, 0, 0, .6); + background: linear-gradient(to right, #141562, #486FBC, #EAB5A1, #8DD6FF, #4973C9, #D07CA7, #F4915E, #F5919E, #B46F89, #141562, #486FBC); + background-position: 0% 50%; + background-size: 1000% 1000%; + visibility: hidden; + + &.one { + animation: + moveGradient 15s infinite, + oneMove 3.5s infinite; + } + + &.two { + animation: + moveGradient 15s infinite, + twoMove 3.5s .15s infinite; + } + + &.three { + animation: + moveGradient 15s infinite, + threeMove 3.5s .3s infinite; + } + + &.four { + animation: + moveGradient 15s infinite, + fourMove 3.5s .575s infinite; + } + + &.five { + animation: + moveGradient 15s infinite, + fiveMove 3.5s .725s infinite; + } + + &.six { + animation: + moveGradient 15s infinite, + sixMove 3.5s .875s infinite; + } + } + } +} + +@keyframes moveGradient { + + to { + background-position: 100% 50% + } +} + +@keyframes oneMove { + + 0% { + visibility: visible; + clip-path: inset(0% 35% 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 14.2857% { + clip-path: inset(0% 35% 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 28.5714% { + clip-path: inset(35% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 42.8571% { + clip-path: inset(35% 70% 35% 0 round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 57.1428% { + clip-path: inset(35% 70% 35% 0 round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 71.4285% { + clip-path: inset(0% 70% 70% 0 round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 85.7142% { + clip-path: inset(0% 70% 70% 0 round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 100% { + clip-path: inset(0% 35% 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} + +@keyframes twoMove { + + 0% { + visibility: visible; + clip-path: inset(0% 70% 70% 0 round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 14.2857% { + clip-path: inset(0% 70% 70% 0 round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 28.5714% { + clip-path: inset(0% 35% 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 42.8571% { + clip-path: inset(0% 35% 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 57.1428% { + clip-path: inset(35% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 71.4285% { + clip-path: inset(35% 70% 35% 0 round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 85.7142% { + clip-path: inset(35% 70% 35% 0 round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 100% { + clip-path: inset(0% 70% 70% 0 round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} + +@keyframes threeMove { + + 0% { + visibility: visible; + clip-path: inset(35% 70% 35% 0 round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 14.2857% { + clip-path: inset(35% 70% 35% 0 round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 28.5714% { + clip-path: inset(0% 70% 70% 0 round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 42.8571% { + clip-path: inset(0% 70% 70% 0 round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 57.1428% { + clip-path: inset(0% 35% 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 71.4285% { + clip-path: inset(0% 35% 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 85.7142% { + clip-path: inset(35% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 100% { + clip-path: inset(35% 70% 35% 0 round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} + +@keyframes fourMove { + + 0% { + visibility: visible; + clip-path: inset(35% 0% 35% 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 14.2857% { + clip-path: inset(35% 0% 35% 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 28.5714% { + clip-path: inset(35% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 42.8571% { + clip-path: inset(70% 35% 0% 35% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 57.1428% { + clip-path: inset(70% 35% 0% 35% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + 71.4285% { + clip-path: inset(70% 0 0 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 85.7142% { + clip-path: inset(70% 0 0 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 100% { + clip-path: inset(35% 0% 35% 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} + +@keyframes fiveMove { + + 0% { + visibility: visible; + clip-path: inset(70% 0 0 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 14.2857% { + clip-path: inset(70% 0 0 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 28.5714% { + clip-path: inset(35% 0% 35% 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 42.8571% { + clip-path: inset(35% 0% 35% 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 57.1428% { + clip-path: inset(35% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 71.4285% { + clip-path: inset(70% 35% 0% 35% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 85.7142% { + clip-path: inset(70% 35% 0% 35% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 100% { + clip-path: inset(70% 0 0 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} + +@keyframes sixMove { + + 0% { + visibility: visible; + clip-path: inset(70% 35% 0% 35% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 14.2857% { + clip-path: inset(70% 35% 0% 35% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 28.5714% { + clip-path: inset(70% 0 0 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 42.8571% { + clip-path: inset(70% 0 0 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 57.1428% { + clip-path: inset(35% 0% 35% 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 71.4285% { + clip-path: inset(35% 0% 35% 70% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 85.7142% { + clip-path: inset(35% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } + + 100% { + clip-path: inset(70% 35% 0% 35% round 5%); + animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); + } +} \ No newline at end of file diff --git a/3d-device-sketch/README.md b/3d-device-sketch/README.md new file mode 100644 index 00000000..59e9efad --- /dev/null +++ b/3d-device-sketch/README.md @@ -0,0 +1,4 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/iulianghel/pen/ORXaQb. + + 3d fun with drawing a smarphone sketch. +Inspired by this dribbble: https://dribbble.com/shots/2944774-Mobile-App-Login-form \ No newline at end of file diff --git a/3d-device-sketch/css/style.css b/3d-device-sketch/css/style.css new file mode 100644 index 00000000..82bf5e43 --- /dev/null +++ b/3d-device-sketch/css/style.css @@ -0,0 +1,461 @@ +@-webkit-keyframes phone-shape { + 0% { + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; + } + 25% { + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgba(255, 255, 255, 0.95); + } + 50% { + border-top-color: rgba(255, 255, 255, 0.95); + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgba(255, 255, 255, 0.95); + } + 75% { + border-top-color: rgba(255, 255, 255, 0.95); + border-right-color: rgba(255, 255, 255, 0.95); + border-bottom-color: transparent; + border-left-color: rgba(255, 255, 255, 0.95); + } + 100% { + border-top-color: rgba(255, 255, 255, 0.95); + border-right-color: rgba(255, 255, 255, 0.95); + border-bottom-color: rgba(255, 255, 255, 0.95); + border-left-color: rgba(255, 255, 255, 0.95); + } +} +@keyframes phone-shape { + 0% { + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; + } + 25% { + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgba(255, 255, 255, 0.95); + } + 50% { + border-top-color: rgba(255, 255, 255, 0.95); + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgba(255, 255, 255, 0.95); + } + 75% { + border-top-color: rgba(255, 255, 255, 0.95); + border-right-color: rgba(255, 255, 255, 0.95); + border-bottom-color: transparent; + border-left-color: rgba(255, 255, 255, 0.95); + } + 100% { + border-top-color: rgba(255, 255, 255, 0.95); + border-right-color: rgba(255, 255, 255, 0.95); + border-bottom-color: rgba(255, 255, 255, 0.95); + border-left-color: rgba(255, 255, 255, 0.95); + } +} +@-webkit-keyframes stroke-vertical { + 0% { + height: 0%; + opacity: 0; + } + 100% { + height: calc(100% + 4px ); + opacity: 1; + } +} +@keyframes stroke-vertical { + 0% { + height: 0%; + opacity: 0; + } + 100% { + height: calc(100% + 4px ); + opacity: 1; + } +} +@-webkit-keyframes stroke-horizontal { + 0% { + width: 0%; + opacity: 0; + } + 100% { + width: calc(100% + 4px ); + opacity: 1; + } +} +@keyframes stroke-horizontal { + 0% { + width: 0%; + opacity: 0; + } + 100% { + width: calc(100% + 4px ); + opacity: 1; + } +} +@-webkit-keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-webkit-keyframes phone-rotate { + 0% { + -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); + transform: rotateX(0) rotateY(0) rotateZ(0); + } + 100% { + -webkit-transform: rotateX(50deg) rotateY(0) rotateZ(-42deg); + transform: rotateX(50deg) rotateY(0) rotateZ(-42deg); + } +} +@keyframes phone-rotate { + 0% { + -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); + transform: rotateX(0) rotateY(0) rotateZ(0); + } + 100% { + -webkit-transform: rotateX(50deg) rotateY(0) rotateZ(-42deg); + transform: rotateX(50deg) rotateY(0) rotateZ(-42deg); + } +} +@-webkit-keyframes show-display { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0); + } + 100% { + -webkit-transform: translateZ(75px); + transform: translateZ(75px); + box-shadow: -50px 40px 50px 0 rgba(0, 0, 0, 0.4); + } +} +@keyframes show-display { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0); + } + 100% { + -webkit-transform: translateZ(75px); + transform: translateZ(75px); + box-shadow: -50px 40px 50px 0 rgba(0, 0, 0, 0.4); + } +} +div { + box-sizing: border-box; +} +iframe, +div, +:before, +:after { + -webkit-transition: all 3s; + transition: all 3s; + -webkit-animation-fill-mode: forwards!important; + animation-fill-mode: forwards!important; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} +body { + overflow: hidden; + background: -webkit-radial-gradient(#00c2ea, #0058a7); + background: radial-gradient(#00c2ea, #0058a7); + height: 100vh; +} +body .container { + -webkit-perspective: 2400px; + perspective: 2400px; + position: absolute; + left: 0; + top: 0; + width: 100vw; + height: 100vh; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} +@media (max-width: 979px) { + body .container { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } +} +@media (max-width: 767px) { + body .container { + -webkit-transform: scale(0.6); + transform: scale(0.6); + } +} +@media (max-width: 479px) { + body .container { + -webkit-transform: scale(0.45); + transform: scale(0.45); + } +} +body .container .phone-shape { + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); + transform: rotateX(0) rotateY(0) rotateZ(0); + position: relative; + border: 2px solid rgba(255, 255, 255, 0.95); + border-color: transparent; + border-radius: 56px; + width: 428px; + height: 869px; + margin: 0 auto; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-transform: rotateX(50deg) rotateY(0) rotateZ(-45deg); + transform: rotateX(50deg) rotateY(0) rotateZ(-45deg); + -webkit-animation: 0.3s phone-shape 4.2s, 8.4s phone-rotate; + animation: 0.3s phone-shape 4.2s, 8.4s phone-rotate; +} +body .container .phone-shape .phone-display { + z-index: 99; + position: absolute; + border: 2px solid rgba(255, 255, 255, 0.95); + border-color: transparent; + top: 100px; + bottom: 100px; + right: 25px; + left: 25px; + padding: 0; + -webkit-animation: 0.3s phone-shape 4.8s; + animation: 0.3s phone-shape 4.8s; +} +body .container .phone-shape .phone-display .iframe-container { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0.001; + -webkit-animation: 1.8s fade-in 6.6s, 1.8s show-display 7.2s; + animation: 1.8s fade-in 6.6s, 1.8s show-display 7.2s; +} +body .container .phone-shape .phone-display .iframe-container iframe { + position: absolute; + border: none; + background: transparent; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: block; + pointer-events: all; + margin: 0; + padding: 0; + -webkit-transform: translateZ(1px); + transform: translateZ(1px); + box-shadow: 0px 0px 50px 0 rgba(0, 0, 0, 0); +} +body .container .phone-shape .phone-display .iframe-container:before { + content: " "; + font-size: 0; + position: absolute; + top: 0; + left: -4px; + width: 4px; + height: 100%; + background: rgba(0, 0, 0, 0.8); + -webkit-transform: rotateY(90deg) translateX(2px) translateZ(2px); + transform: rotateY(90deg) translateX(2px) translateZ(2px); +} +body .container .phone-shape .phone-display .iframe-container:after { + content: " "; + font-size: 0; + position: absolute; + left: 0; + bottom: -4px; + height: 4px; + width: 100%; + background: rgba(0, 0, 0, 0.8); + -webkit-transform: rotateX(90deg) translateY(-2px) translateX(0) translateZ(2px); + transform: rotateX(90deg) translateY(-2px) translateX(0) translateZ(2px); +} +body .container .phone-shape .phone-hole { + position: absolute; + width: 14px; + height: 14px; + left: 50%; + margin-left: -7px; + border: 2px solid rgba(255, 255, 255, 0.95); + border-color: transparent; + border-radius: 50%; + top: 46px; + -webkit-animation: 0.3s phone-shape 5.4s; + animation: 0.3s phone-shape 5.4s; +} +body .container .phone-shape .phone-button { + position: absolute; + width: 60px; + height: 60px; + left: 50%; + margin-left: -30px; + border: 2px solid rgba(255, 255, 255, 0.95); + border-color: transparent; + border-radius: 50%; + bottom: 24px; + -webkit-animation: 0.3s phone-shape 6s; + animation: 0.3s phone-shape 6s; +} +body .container .graphic-guides { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; +} +body .container .graphic-guides .top, +body .container .graphic-guides .right, +body .container .graphic-guides .bottom, +body .container .graphic-guides .center, +body .container .graphic-guides .left { + position: absolute; + background: rgba(255, 255, 255, 0.4); + opacity: 0; +} +body .container .graphic-guides .top { + -webkit-animation: 0.6s stroke-horizontal 0.6s; + animation: 0.6s stroke-horizontal 0.6s; + height: 2px; + left: -2px; + top: -2px; +} +body .container .graphic-guides .right { + height: calc(100% + 4px ); + -webkit-animation: 0.6s stroke-vertical 3s; + animation: 0.6s stroke-vertical 3s; + width: 2px; + right: -2px; + top: -2px; +} +body .container .graphic-guides .bottom { + -webkit-animation: 0.6s stroke-horizontal 1.2s; + animation: 0.6s stroke-horizontal 1.2s; + height: 2px; + left: -2px; + bottom: -2px; +} +body .container .graphic-guides .left { + height: calc(100% + 4px ); + -webkit-animation: 0.6s stroke-vertical 1.8s; + animation: 0.6s stroke-vertical 1.8s; + width: 2px; + left: -2px; + top: -2px; +} +body .container .graphic-guides .center { + -webkit-animation: 0.6s stroke-vertical 2.4s; + animation: 0.6s stroke-vertical 2.4s; + width: 2px; + left: 50%; + margin-left: -1px; + top: -2px; +} +body .container .graphic-guides .top:before, +body .container .graphic-guides .bottom:before { + content: " "; + font-size: 0; + position: absolute; + top: 0; + left: -60px; + width: 60px; + height: inherit; + background: -webkit-linear-gradient(left, transparent 0%, rgba(255, 255, 255, 0.4) 100%); + background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.4) 100%); +} +body .container .graphic-guides .top:after, +body .container .graphic-guides .bottom:after { + content: " "; + font-size: 0; + position: absolute; + top: 0; + right: -60px; + width: 60px; + height: inherit; + background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.4) 0%, transparent 100%); + background: linear-gradient(to right, rgba(255, 255, 255, 0.4) 0%, transparent 100%); +} +body .container .graphic-guides .right:before, +body .container .graphic-guides .center:before, +body .container .graphic-guides .left:before { + content: " "; + font-size: 0; + position: absolute; + right: 0; + top: -60px; + height: 60px; + width: inherit; + background: -webkit-linear-gradient(top, transparent 0%, rgba(255, 255, 255, 0.4) 100%); + background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.4) 100%); +} +body .container .graphic-guides .right:after, +body .container .graphic-guides .center:after, +body .container .graphic-guides .left:after { + content: " "; + font-size: 0; + position: absolute; + right: 0; + bottom: -60px; + height: 60px; + width: inherit; + background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, transparent 100%); + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, transparent 100%); +} +body.flat .container .phone-shape { + -webkit-transform: rotateX(0) rotateY(0) rotateZ(0) !important; + transform: rotateX(0) rotateY(0) rotateZ(0) !important; +} +body .controls { + position: absolute; + top: 20px; + right: 20px; +} +body .controls span { + cursor: default; + font-family: sans-serif; + padding: 8px 20px; + border-radius: 2px; + background: rgba(255, 255, 255, 0.6); + color: #333; +} +body.flat .controls span { + background: #fff; +} diff --git a/3d-device-sketch/index.html b/3d-device-sketch/index.html new file mode 100644 index 00000000..01dd3aff --- /dev/null +++ b/3d-device-sketch/index.html @@ -0,0 +1,51 @@ + + + + + 3d device sketch + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + diff --git a/3d-device-sketch/less/style.less b/3d-device-sketch/less/style.less new file mode 100644 index 00000000..2d92e4e8 --- /dev/null +++ b/3d-device-sketch/less/style.less @@ -0,0 +1,363 @@ +// autoprefixer: Android 2.3;Android >= 4;Chrome >= 20;Firefox >= 24;iOS >= 6;Opera >= 12;Safari >= 6 +// +// style variables +@sketchColor: fade(white, 95%); +@sketchWidth: 2px; +@sketchStyle: solid; +@sketchBorder: @sketchWidth @sketchStyle @sketchColor; +@holeSize: 14px; +@buttonSize: 60px; +@sketchFadeLength: 60px; +@guidesColor: fade(@sketchColor, 40%); +@displayThickness: 4px; +// time variables +@step: .6s; +// Animations +@keyframes phone-shape { + 0% { + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; + } + 25% { + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: @sketchColor; + } + 50% { + border-top-color: @sketchColor; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: @sketchColor; + } + 75% { + border-top-color: @sketchColor; + border-right-color: @sketchColor; + border-bottom-color: transparent; + border-left-color: @sketchColor; + } + 100% { + border-top-color: @sketchColor; + border-right-color: @sketchColor; + border-bottom-color: @sketchColor; + border-left-color: @sketchColor; + } +} + +@keyframes stroke-vertical { + 0% { + height: 0%; + opacity: 0; + } + 100% { + height: ~"calc(100% + " @sketchWidth*2 ~")"; + opacity: 1; + } +} + +@keyframes stroke-horizontal { + 0% { + width: 0%; + opacity: 0; + } + 100% { + width: ~"calc(100% + " @sketchWidth*2 ~")"; + opacity: 1; + } +} + +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes phone-rotate { + 0% { + transform: rotateX(0) rotateY(0) rotateZ(0); + } + 100% { + transform: rotateX(50deg) rotateY(0) rotateZ(-42deg); + } +} + +@keyframes show-display { + 0% { + transform: translateZ(0); + box-shadow: 0 0 50px 0 fade(black, 0%); + } + 100% { + transform: translateZ(75px); + box-shadow: -50px 40px 50px 0 fade(black, 40%); + } +} + +// Animations end +.gradientHorizontal (@startColor, @endColor) { + background: linear-gradient(to right, @startColor 0%, @endColor 100%); +} + +.gradientVertical (@startColor, @endColor) { + background: linear-gradient(to bottom, @startColor 0%, @endColor 100%); +} + +div { + box-sizing: border-box; +} + +iframe, +div, +:before, +:after { + transition: all 3s; + animation-fill-mode: forwards!important; + transform-style: preserve-3d; +} + +body { + overflow: hidden; + background: radial-gradient(rgb(0, 194, 234), rgb(0, 88, 167)); + height: 100vh; + .container { + perspective: 2400px; + position: absolute; + left: 0; + top: 0; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + @media (max-width: 979px) { + transform: scale(.8); + } + @media (max-width: 767px) { + transform: scale(.6); + } + @media (max-width: 479px) { + transform: scale(.45); + } + .phone-shape { + transform-style: preserve-3d; + transform: rotateX(0) rotateY(0) rotateZ(0); + position: relative; + border: @sketchBorder; + border-color: transparent; + border-radius: 56px; + width: 428px; + height: 869px; + margin: 0 auto; + flex-shrink: 0; + flex-grow: 0; + transform: rotateX(50deg) rotateY(0) rotateZ(-45deg); + animation: @step/2 phone-shape @step*7, @step*14 phone-rotate; + .phone-display { + z-index: 99; + position: absolute; + border: @sketchBorder; + border-color: transparent; + top: 100px; + bottom: 100px; + right: 25px; + left: 25px; + padding: 0; + animation: @step/2 phone-shape @step*8; + .iframe-container { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0.001; + animation: @step*3 fade-in @step*11, @step*3 show-display @step*12; + iframe { + position: absolute; + border: none; + background: transparent; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: block; + pointer-events: all; + margin: 0; + padding: 0; + transform: translateZ(1px); + box-shadow: 0px 0px 50px 0 fade(black, 0%); + } + &:before { + content: " "; + font-size: 0; + position: absolute; + top: 0; + left: -@displayThickness; + width: @displayThickness; + height: 100%; + background: fade(black, 80%); + transform: rotateY(90deg) translateX(@displayThickness/2) translateZ(@displayThickness/2); + } + &:after { + content: " "; + font-size: 0; + position: absolute; + left: 0; + bottom: -@displayThickness; + height: @displayThickness; + width: 100%; + background: fade(black, 80%); + transform: rotateX(90deg) translateY(-@displayThickness/2) translateX(0) translateZ(@displayThickness/2); + } + } + } + .circles(@size) { + position: absolute; + width: @size; + height: @size; + left: 50%; + margin-left: -@size/2; + border: @sketchBorder; + border-color: transparent; + border-radius: 50%; + } + .phone-hole { + .circles(@holeSize); + top: 46px; + animation: @step/2 phone-shape @step*9; + } + .phone-button { + .circles(@buttonSize); + bottom: 24px; + animation: @step/2 phone-shape @step*10; + } + } + .graphic-guides { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + .top, + .right, + .bottom, + .center, + .left { + position: absolute; + background: @guidesColor; + opacity: 0; + } + .guideEnds() { + content: " "; + font-size: 0; + position: absolute; + } + .top { + animation: @step stroke-horizontal @step; + height: @sketchWidth; + left: -@sketchWidth; + top: -@sketchWidth; + } + .right { + height: ~"calc(100% + " @sketchWidth*2 ~")"; + animation: @step stroke-vertical @step*5; + width: @sketchWidth; + right: -@sketchWidth; + top: -@sketchWidth; + } + .bottom { + animation: @step stroke-horizontal @step*2; + height: @sketchWidth; + left: -@sketchWidth; + bottom: -@sketchWidth; + } + .left { + height: ~"calc(100% + " @sketchWidth*2 ~")"; + animation: @step stroke-vertical @step*3; + width: @sketchWidth; + left: -@sketchWidth; + top: -@sketchWidth; + } + .center { + animation: @step stroke-vertical @step*4; + width: @sketchWidth; + left: 50%; + margin-left: -@sketchWidth/2; + top: -@sketchWidth; + } + .top, + .bottom { + &:before { + .guideEnds; + top: 0; + left: -@sketchFadeLength; + width: @sketchFadeLength; + height: inherit; + .gradientHorizontal(transparent, @guidesColor); + } + &:after { + .guideEnds; + top: 0; + right: -@sketchFadeLength; + width: @sketchFadeLength; + height: inherit; + .gradientHorizontal(@guidesColor, transparent); + } + } + .right, + .center, + .left { + &:before { + .guideEnds; + right: 0; + top: -@sketchFadeLength; + height: @sketchFadeLength; + width: inherit; + .gradientVertical(transparent, @guidesColor); + } + &:after { + .guideEnds; + right: 0; + bottom: -@sketchFadeLength; + height: @sketchFadeLength; + width: inherit; + .gradientVertical(@guidesColor, transparent); + } + } + } + } + &.flat { + .container { + .phone-shape { + transform: rotateX(0) rotateY(0) rotateZ(0)!important; + .phone-display { + iframe {} + } + } + } + } + .controls { + position: absolute; + top: 20px; + right: 20px; + span { + cursor: default; + font-family: sans-serif; + padding: 8px 20px; + border-radius: 2px; + background: fade(white, 60%); + color: #333; + } + } + &.flat { + .container {} + .controls { + span { + background: #fff; + } + } + } +} \ No newline at end of file diff --git a/3d-device-sketch/license.md b/3d-device-sketch/license.md new file mode 100644 index 00000000..03c0b6a4 --- /dev/null +++ b/3d-device-sketch/license.md @@ -0,0 +1,10 @@ + + diff --git a/3d-portfolio-template-master/README.md b/3d-portfolio-template-master/README.md new file mode 100755 index 00000000..a1fa70dc --- /dev/null +++ b/3d-portfolio-template-master/README.md @@ -0,0 +1,12 @@ +3D Portfolio Template +========= + +A portfolio template, with a filter that triggers 3D rotating sections. + +[Article on CodyHouse](http://codyhouse.co/gem/3d-portfolio-template/) + +[Demo](http://codyhouse.co/demo/3d-portfolio-template/index.html) + +[Terms](http://codyhouse.co/terms/) + +Images: [Unsplash](https://unsplash.com/) diff --git a/3d-portfolio-template-master/css/reset.css b/3d-portfolio-template-master/css/reset.css new file mode 100755 index 00000000..bae9a91e --- /dev/null +++ b/3d-portfolio-template-master/css/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, main { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/3d-portfolio-template-master/css/style.css b/3d-portfolio-template-master/css/style.css new file mode 100755 index 00000000..c456cd18 --- /dev/null +++ b/3d-portfolio-template-master/css/style.css @@ -0,0 +1,622 @@ +/* -------------------------------- + +Primary style + +-------------------------------- */ +*, *::after, *::before { + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +body { + font-size: 1.6rem; + color: #edeade; + background-color: #43202f; + font-family: sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + color: #72a987; + text-decoration: none; +} + +/* -------------------------------- + +Portfolio Navigation + +-------------------------------- */ +.cd-3d-portfolio-navigation { + width: 100%; + height: 25vh; + text-align: center; + display: table; +} +.cd-3d-portfolio-navigation .cd-wrapper { + display: table-cell; + width: 100%; + vertical-align: middle; +} +.cd-3d-portfolio-navigation h1 { + font-size: 2rem; + margin-bottom: .6em; + font-family: "Lora", serif; + font-weight: bold; +} +.cd-3d-portfolio-navigation li { + display: inline-block; + margin: 0 .3em; +} +.cd-3d-portfolio-navigation li a { + display: inline-block; + color: #edeade; + border: 2px solid #391b28; + padding: .6em; + -webkit-transition: all .2s; + transition: all .2s; +} +.cd-3d-portfolio-navigation li a:hover { + border-color: #72a987; +} +.cd-3d-portfolio-navigation li .selected { + color: #edeade; + background: #72a987; + border-color: #72a987; + cursor: default; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); +} +@media only screen and (min-width: 768px) { + .cd-3d-portfolio-navigation h1 { + font-size: 3.2rem; + } +} + +/* -------------------------------- + +Portfolio Projects + +-------------------------------- */ +.cd-3d-portfolio { + overflow: hidden; +} +.cd-3d-portfolio .close-project { + /* this is the 'X' icon - visible when a project has been selected */ + position: absolute; + z-index: 2; + top: 24px; + right: 5%; + /* replace text with image */ + color: transparent; + white-space: nowrap; + text-indent: 100%; + overflow: hidden; + height: 48px; + width: 48px; + border-radius: 50%; + background: rgba(0, 0, 0, 0.6); + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform .3s 0s; + transition: -webkit-transform .3s 0s; + transition: transform .3s 0s; + transition: transform .3s 0s, -webkit-transform .3s 0s; +} +.cd-3d-portfolio .close-project:hover { + background: black; +} +.cd-3d-portfolio .close-project::after, .cd-3d-portfolio .close-project::before { + /* the 'X' lines */ + content: ''; + position: absolute; + width: 18px; + height: 2px; + top: 50%; + left: 50%; + background: #edeade; +} +.cd-3d-portfolio .close-project::before { + -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); + -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform: translateX(-50%) translateY(-50%) rotate(45deg); +} +.cd-3d-portfolio .close-project::after { + -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg); + -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg); + transform: translateX(-50%) translateY(-50%) rotate(-45deg); +} +.cd-3d-portfolio .project-is-open .open .close-project { + /* show the 'X' icon when a project has been selected */ + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition-delay: 0.6s; + transition-delay: 0.6s; + -webkit-transition: background 0.3s, -webkit-transform 0.3s 0.6s; + transition: background 0.3s, -webkit-transform 0.3s 0.6s; + transition: transform 0.3s 0.6s, background 0.3s; + transition: transform 0.3s 0.6s, background 0.3s, -webkit-transform 0.3s 0.6s; +} + +.cd-3d-portfolio .projects { + /* used to render its children in a 3D space - add perspective */ + -webkit-perspective: 1000px; + perspective: 1000px; +} +.cd-3d-portfolio .projects .row { + height: 25vh; + position: relative; + z-index: 1; + /* position its children in a 3d space */ + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + /* Force hardware acceleration */ + will-change: transform; + -webkit-transform: translateZ(-50vw); + transform: translateZ(-50vw); + -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); + transition: -webkit-transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); + transition: transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); + transition: transform 0.6s cubic-bezier(0.5, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); + pointer-events: none; +} +.cd-3d-portfolio .projects .row:nth-of-type(2) { + -webkit-transition-delay: .1s; + transition-delay: .1s; +} +.cd-3d-portfolio .projects .row:nth-of-type(3) { + -webkit-transition-delay: .2s; + transition-delay: .2s; +} +.cd-3d-portfolio .projects .row::after { + /* this is used to create the row bottom face */ + content: ''; + position: absolute; + z-index: 1; + bottom: 0; + left: 0; + height: 100vw; + width: 100%; + background: #0f070b; + -webkit-transform: translateZ(50vw) rotateX(90deg); + transform: translateZ(50vw) rotateX(90deg); + -webkit-transform-origin: bottom center; + -ms-transform-origin: bottom center; + transform-origin: bottom center; + -webkit-transition: visibility 0s 0.6s; + transition: visibility 0s 0.6s; +} +.cd-3d-portfolio .projects .row:last-of-type::after { + /* use its ::after element as top face (rather than bottom face) */ + top: 0; + bottom: auto; + -webkit-transform: translateZ(50vw) rotateX(-90deg); + transform: translateZ(50vw) rotateX(-90deg); + -webkit-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; +} +.cd-3d-portfolio .projects:not(.project-has-transition) .row:nth-of-type(2) { + /* increase z-index of the second row - this way the back faces of the first and thirdv rows won't be visible (only of no project has been selected) */ + z-index: 2; +} +.no-preserve3d .cd-3d-portfolio .projects .row { + /* fallback for browsers that don't support the preser3d property */ + -webkit-transform: translateZ(0); + transform: translateZ(0); +} +.cd-3d-portfolio .projects .row > li { + /* this is the single project */ + position: absolute; + z-index: 1; + height: 100%; + width: 100%; + -webkit-transform: translateZ(50vw); + transform: translateZ(50vw); + will-change: transform; + overflow: hidden; +} +.cd-3d-portfolio .projects .row > li.selected { + /* this the project on the visible face of the parallelepiped */ + pointer-events: auto; +} +.cd-3d-portfolio .projects .row > li.front-face { + -webkit-transform: translateZ(50vw); + transform: translateZ(50vw); +} +.cd-3d-portfolio .projects .row > li.right-face { + -webkit-transform: rotateY(90deg) translateZ(50vw); + transform: rotateY(90deg) translateZ(50vw); +} +.cd-3d-portfolio .projects .row > li.left-face { + -webkit-transform: rotateY(-90deg) translateZ(50vw); + transform: rotateY(-90deg) translateZ(50vw); +} +.cd-3d-portfolio .projects .row > li.back-face { + -webkit-transform: rotateY(180deg) translateZ(50vw); + transform: rotateY(180deg) translateZ(50vw); +} +.cd-3d-portfolio .projects .row > li.hidden { + opacity: 0; + visibility: hidden; +} +.no-preserve3d .cd-3d-portfolio .projects .row > li { + opacity: 0; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + -webkit-transition: opacity .4s; + transition: opacity .4s; +} +.no-preserve3d .cd-3d-portfolio .projects .row > li.front-face, .no-preserve3d .cd-3d-portfolio .projects .row > li.right-face, .no-preserve3d .cd-3d-portfolio .projects .row > li.left-face, .no-preserve3d .cd-3d-portfolio .projects .row > li.back-face { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); +} +.no-preserve3d .cd-3d-portfolio .projects .row > li.selected { + opacity: 1; +} +.cd-3d-portfolio .projects .project-wrapper { + position: absolute; + top: 0; + left: 0; + height: 100vh; + width: 100%; +} +.cd-3d-portfolio .projects .project-image { + position: relative; + z-index: 2; + /* vertically center its content */ + display: table; + width: 100%; + height: 25%; + cursor: pointer; + /* force hardware acceleration */ + -webkit-transform: translateZ(0); + transform: translateZ(0); + will-change: transform; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transition: -webkit-transform 0.6s; + transition: -webkit-transform 0.6s; + transition: transform 0.6s; + transition: transform 0.6s, -webkit-transform 0.6s; +} +.cd-3d-portfolio .projects .project-image::before, .cd-3d-portfolio .projects .project-image::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; +} +.cd-3d-portfolio .projects .project-image::before { + /* this is the project background image */ + z-index: 1; + height: 240%; + background-color: #201017; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; +} +.cd-3d-portfolio .projects .project-image::after { + /* this is the project image cover layer - this is visible only during a rotation of the parallelepiped (while the project is disappearing) */ + z-index: 3; + height: 100%; + background: black; + opacity: 0; + -webkit-transition: opacity .5s; + transition: opacity .5s; +} +.cd-3d-portfolio .projects .row > li:not(.selected) .project-image::after { + opacity: 1; +} +.cd-3d-portfolio .projects .row:nth-of-type(2) > li:not(.selected) .project-image::after { + -webkit-transition-delay: .1s; + transition-delay: .1s; +} +.cd-3d-portfolio .projects .row:nth-of-type(3) > li:not(.selected) .project-image::after { + -webkit-transition-delay: .2s; + transition-delay: .2s; +} +.cd-3d-portfolio .projects .row > li.project-1 .project-image::before { + /* set project background image */ + background-image: url(../img/photo-1.jpg); +} +.cd-3d-portfolio .projects .row > li.project-2 .project-image::before { + background-image: url(../img/photo-2.jpg); +} +.cd-3d-portfolio .projects .row > li.project-3 .project-image::before { + background-image: url(../img/photo-3.jpg); +} +.cd-3d-portfolio .projects .row > li.project-4 .project-image::before { + background-image: url(../img/photo-4.jpg); +} +.cd-3d-portfolio .projects .row > li.project-5 .project-image::before { + background-image: url(../img/photo-5.jpg); +} +.cd-3d-portfolio .projects .row > li.project-6 .project-image::before { + background-image: url(../img/photo-6.jpg); +} +.cd-3d-portfolio .projects .row > li.project-7 .project-image::before { + background-image: url(../img/photo-7.jpg); +} +.cd-3d-portfolio .projects .row > li.project-8 .project-image::before { + background-image: url(../img/photo-8.jpg); +} +.cd-3d-portfolio .projects .row > li.project-9 .project-image::before { + background-image: url(../img/photo-9.jpg); +} +.cd-3d-portfolio .projects .project-title { + position: relative; + z-index: 2; + /* vertically center inside its parent */ + display: table-cell; + vertical-align: middle; + text-align: center; + /* force hardware acceleration */ + -webkit-transform: translateZ(0); + transform: translateZ(0); + will-change: transform; + -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); + transition: -webkit-transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); + transition: transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); + transition: transform 0.6s cubic-bezier(0.5, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); +} +.cd-3d-portfolio .projects h2 { + color: #edeade; + font-size: 2.2rem; + font-weight: bold; + font-family: "Lora", serif; +} +.cd-3d-portfolio .projects .project-content { + position: absolute; + z-index: 1; + /* place the content right below the project image */ + top: 60%; + width: 100%; + background: white; + box-shadow: 0 -5px 0 white; +} +.cd-3d-portfolio .projects .project-content > div { + opacity: 0; + -webkit-transform: translateY(25%); + -ms-transform: translateY(25%); + transform: translateY(25%); + -webkit-transition: all 0.6s cubic-bezier(0.5, 0, 0.1, 1); + transition: all 0.6s cubic-bezier(0.5, 0, 0.1, 1); +} +.cd-3d-portfolio .projects .project-content p { + width: 90%; + max-width: 800px; + margin: 2em auto; + line-height: 1.6; + color: #694d59; +} +.cd-3d-portfolio .projects.project-has-transition .row > li { + /* the project-has-transition class is used to add a transition to the tranform property of the single projects - it's added when a project is selected (before opening it) and removed when a project is colsed (when the closing animation is finished) */ + -webkit-transition: opacity 0s 0.6s, -webkit-transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); + transition: opacity 0s 0.6s, -webkit-transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); + transition: transform 0.6s cubic-bezier(0.5, 0, 0.1, 1), opacity 0s 0.6s; + transition: transform 0.6s cubic-bezier(0.5, 0, 0.1, 1), opacity 0s 0.6s, -webkit-transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); +} +.cd-3d-portfolio .projects.project-has-transition .row > li.selected.open { + overflow: visible; +} +.cd-3d-portfolio .projects.project-has-transition .row > li:not(.selected) { + opacity: 0; +} +.cd-3d-portfolio .projects.project-has-transition .row::after { + /* hide the bottom/top parallelepiped face when a project is selected */ + visibility: hidden; + -webkit-transition: visibility 0s; + transition: visibility 0s; +} +.cd-3d-portfolio .projects.project-is-open .row > li { + /* the project-is-open class is used when a project is selected - it's added when a project is selected (before opening it) and removed when a project is closed (before the closing animation begins) */ + -webkit-transition: opacity 0s, -webkit-transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); + transition: opacity 0s, -webkit-transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); + transition: transform 0.6s cubic-bezier(0.5, 0, 0.1, 1), opacity 0s; + transition: transform 0.6s cubic-bezier(0.5, 0, 0.1, 1), opacity 0s, -webkit-transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); +} +.cd-3d-portfolio .projects.project-is-open .row > li.selected.open .project-wrapper { + /* selected project on the visible face of the parallelepiped */ + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.cd-3d-portfolio .projects.project-is-open .row > li.selected .project-image { + /* projects on the visible face of the parallelepiped */ + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); +} +.cd-3d-portfolio .projects.project-is-open .row > li.selected.open .project-image { + cursor: auto; +} +.cd-3d-portfolio .projects.project-is-open .row > li.selected.open .project-title { + -webkit-transform: translateY(70%); + -ms-transform: translateY(70%); + transform: translateY(70%); +} +.cd-3d-portfolio .projects.project-is-open .row > li.selected.open .project-content > div { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); +} +.cd-3d-portfolio .projects.project-is-open .row:first-of-type .selected.open.front-face { + /* if the project selected is inside the first row */ + -webkit-transform: translateZ(50vw) translateY(-100%); + transform: translateZ(50vw) translateY(-100%); +} +.cd-3d-portfolio .projects.project-is-open .row:first-of-type .selected.open.right-face { + -webkit-transform: rotateY(90deg) translateZ(50vw) translateY(-100%); + transform: rotateY(90deg) translateZ(50vw) translateY(-100%); +} +.cd-3d-portfolio .projects.project-is-open .row:first-of-type .selected.open.left-face { + -webkit-transform: rotateY(-90deg) translateZ(50vw) translateY(-100%); + transform: rotateY(-90deg) translateZ(50vw) translateY(-100%); +} +.cd-3d-portfolio .projects.project-is-open .row:first-of-type .selected.open.back-face { + -webkit-transform: rotateY(180deg) translateZ(50vw) translateY(-100%); + transform: rotateY(180deg) translateZ(50vw) translateY(-100%); +} +.cd-3d-portfolio .projects.project-is-open .row:first-of-type .selected:not(.open).front-face { + /* if the project selected is not inside the first row */ + -webkit-transform: translateZ(50vw) translateY(300%); + transform: translateZ(50vw) translateY(300%); +} +.cd-3d-portfolio .projects.project-is-open .row:first-of-type .selected:not(.open).right-face { + -webkit-transform: rotateY(90deg) translateZ(50vw) translateY(300%); + transform: rotateY(90deg) translateZ(50vw) translateY(300%); +} +.cd-3d-portfolio .projects.project-is-open .row:first-of-type .selected:not(.open).left-face { + -webkit-transform: rotateY(-90deg) translateZ(50vw) translateY(300%); + transform: rotateY(-90deg) translateZ(50vw) translateY(300%); +} +.cd-3d-portfolio .projects.project-is-open .row:first-of-type .selected:not(.open).back-face { + -webkit-transform: rotateY(180deg) translateZ(50vw) translateY(300%); + transform: rotateY(180deg) translateZ(50vw) translateY(300%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(2) .selected.open.front-face { + /* if the project selected is inside the second row */ + -webkit-transform: translateZ(50vw) translateY(-200%); + transform: translateZ(50vw) translateY(-200%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(2) .selected.open.right-face { + -webkit-transform: rotateY(90deg) translateZ(50vw) translateY(-200%); + transform: rotateY(90deg) translateZ(50vw) translateY(-200%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(2) .selected.open.left-face { + -webkit-transform: rotateY(-90deg) translateZ(50vw) translateY(-200%); + transform: rotateY(-90deg) translateZ(50vw) translateY(-200%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(2) .selected.open.back-face { + -webkit-transform: rotateY(180deg) translateZ(50vw) translateY(-200%); + transform: rotateY(180deg) translateZ(50vw) translateY(-200%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(2) .selected:not(.open).front-face { + /* if the project selected is not inside the second row */ + -webkit-transform: translateZ(50vw) translateY(200%); + transform: translateZ(50vw) translateY(200%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(2) .selected:not(.open).right-face { + -webkit-transform: rotateY(90deg) translateZ(50vw) translateY(200%); + transform: rotateY(90deg) translateZ(50vw) translateY(200%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(2) .selected:not(.open).left-face { + -webkit-transform: rotateY(-90deg) translateZ(50vw) translateY(200%); + transform: rotateY(-90deg) translateZ(50vw) translateY(200%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(2) .selected:not(.open).back-face { + -webkit-transform: rotateY(180deg) translateZ(50vw) translateY(200%); + transform: rotateY(180deg) translateZ(50vw) translateY(200%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(3) .selected.open.front-face { + /* if the project selected is inside the third row */ + -webkit-transform: translateZ(50vw) translateY(-300%); + transform: translateZ(50vw) translateY(-300%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(3) .selected.open.right-face { + -webkit-transform: rotateY(90deg) translateZ(50vw) translateY(-300%); + transform: rotateY(90deg) translateZ(50vw) translateY(-300%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(3) .selected.open.left-face { + -webkit-transform: rotateY(-90deg) translateZ(50vw) translateY(-300%); + transform: rotateY(-90deg) translateZ(50vw) translateY(-300%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(3) .selected.open.back-face { + -webkit-transform: rotateY(180deg) translateZ(50vw) translateY(-300%); + transform: rotateY(180deg) translateZ(50vw) translateY(-300%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(3) .selected:not(.open).front-face { + /* if the project selected is not inside the third row */ + -webkit-transform: translateZ(50vw) translateY(100%); + transform: translateZ(50vw) translateY(100%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(3) .selected:not(.open).right-face { + -webkit-transform: rotateY(90deg) translateZ(50vw) translateY(100%); + transform: rotateY(90deg) translateZ(50vw) translateY(100%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(3) .selected:not(.open).left-face { + -webkit-transform: rotateY(-90deg) translateZ(50vw) translateY(100%); + transform: rotateY(-90deg) translateZ(50vw) translateY(100%); +} +.cd-3d-portfolio .projects.project-is-open .row:nth-of-type(3) .selected:not(.open).back-face { + -webkit-transform: rotateY(180deg) translateZ(50vw) translateY(100%); + transform: rotateY(180deg) translateZ(50vw) translateY(100%); +} +.no-preserve3d .cd-3d-portfolio .projects.project-is-open .row.row:first-of-type > li.selected { + -webkit-transform: translateY(300%); + -ms-transform: translateY(300%); + transform: translateY(300%); +} +.no-preserve3d .cd-3d-portfolio .projects.project-is-open .row.row:first-of-type > li.selected.open { + -webkit-transform: translateY(-100%); + -ms-transform: translateY(-100%); + transform: translateY(-100%); +} +.no-preserve3d .cd-3d-portfolio .projects.project-is-open .row.row:nth-of-type(2) > li.selected { + -webkit-transform: translateY(200%); + -ms-transform: translateY(200%); + transform: translateY(200%); +} +.no-preserve3d .cd-3d-portfolio .projects.project-is-open .row.row:nth-of-type(2) > li.selected.open { + -webkit-transform: translateY(-200%); + -ms-transform: translateY(-200%); + transform: translateY(-200%); +} +.no-preserve3d .cd-3d-portfolio .projects.project-is-open .row.row:nth-of-type(3) > li.selected { + -webkit-transform: translateY(100%); + -ms-transform: translateY(100%); + transform: translateY(100%); +} +.no-preserve3d .cd-3d-portfolio .projects.project-is-open .row.row:nth-of-type(3) > li.selected.open { + -webkit-transform: translateY(-300%); + -ms-transform: translateY(-300%); + transform: translateY(-300%); +} +@media only screen and (min-width: 768px) { + .cd-3d-portfolio .projects h2 { + font-size: 3.5rem; + } + .cd-3d-portfolio .projects p { + font-size: 2rem; + } +} + +/* -------------------------------- + +Back to top + +-------------------------------- */ +.cd-top { + position: fixed; + z-index: 3; + bottom: 40px; + right: 5%; + display: inline-block; + height: 48px; + width: 48px; + /* replace text with image */ + overflow: hidden; + text-indent: 100%; + white-space: nowrap; + background: rgba(0, 0, 0, 0.6) url(../img/cd-icon-arrow.svg) no-repeat center center; + visibility: hidden; + opacity: 0; + -webkit-transition: opacity .3s, visibility .3s; + transition: opacity .3s, visibility .3s; +} +.cd-top.is-visible { + /* the button becomes visible */ + visibility: visible; + opacity: 1; +} +.cd-top:hover { + background-color: black; + opacity: 1; +} diff --git a/3d-portfolio-template-master/img/cd-icon-arrow.svg b/3d-portfolio-template-master/img/cd-icon-arrow.svg new file mode 100755 index 00000000..9a09dc62 --- /dev/null +++ b/3d-portfolio-template-master/img/cd-icon-arrow.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/3d-portfolio-template-master/img/photo-1.jpg b/3d-portfolio-template-master/img/photo-1.jpg new file mode 100755 index 00000000..b965bc59 Binary files /dev/null and b/3d-portfolio-template-master/img/photo-1.jpg differ diff --git a/3d-portfolio-template-master/img/photo-2.jpg b/3d-portfolio-template-master/img/photo-2.jpg new file mode 100755 index 00000000..fa82fb9e Binary files /dev/null and b/3d-portfolio-template-master/img/photo-2.jpg differ diff --git a/3d-portfolio-template-master/img/photo-3.jpg b/3d-portfolio-template-master/img/photo-3.jpg new file mode 100755 index 00000000..cb7565b6 Binary files /dev/null and b/3d-portfolio-template-master/img/photo-3.jpg differ diff --git a/3d-portfolio-template-master/img/photo-4.jpg b/3d-portfolio-template-master/img/photo-4.jpg new file mode 100755 index 00000000..83d63d73 Binary files /dev/null and b/3d-portfolio-template-master/img/photo-4.jpg differ diff --git a/3d-portfolio-template-master/img/photo-5.jpg b/3d-portfolio-template-master/img/photo-5.jpg new file mode 100755 index 00000000..82e67cf6 Binary files /dev/null and b/3d-portfolio-template-master/img/photo-5.jpg differ diff --git a/3d-portfolio-template-master/img/photo-6.jpg b/3d-portfolio-template-master/img/photo-6.jpg new file mode 100755 index 00000000..8e21b6fd Binary files /dev/null and b/3d-portfolio-template-master/img/photo-6.jpg differ diff --git a/3d-portfolio-template-master/img/photo-7.jpg b/3d-portfolio-template-master/img/photo-7.jpg new file mode 100755 index 00000000..89f2ac23 Binary files /dev/null and b/3d-portfolio-template-master/img/photo-7.jpg differ diff --git a/3d-portfolio-template-master/img/photo-8.jpg b/3d-portfolio-template-master/img/photo-8.jpg new file mode 100755 index 00000000..caf8f890 Binary files /dev/null and b/3d-portfolio-template-master/img/photo-8.jpg differ diff --git a/3d-portfolio-template-master/img/photo-9.jpg b/3d-portfolio-template-master/img/photo-9.jpg new file mode 100755 index 00000000..14b272b3 Binary files /dev/null and b/3d-portfolio-template-master/img/photo-9.jpg differ diff --git a/3d-portfolio-template-master/index.html b/3d-portfolio-template-master/index.html new file mode 100755 index 00000000..3fa8905a --- /dev/null +++ b/3d-portfolio-template-master/index.html @@ -0,0 +1,388 @@ + + + + + + + + + + + 3D Portfolio Template | CodyHouse + + +
+ + +
+ + + + + +
+ + Top +
+ + + + + + \ No newline at end of file diff --git a/3d-portfolio-template-master/js/jquery-3.0.0.min.js b/3d-portfolio-template-master/js/jquery-3.0.0.min.js new file mode 100755 index 00000000..62d410d9 --- /dev/null +++ b/3d-portfolio-template-master/js/jquery-3.0.0.min.js @@ -0,0 +1,4 @@ +/*! jQuery v3.0.0 | (c) jQuery Foundation | jquery.org/license */ +!function(a,b){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){"use strict";var c=[],d=a.document,e=Object.getPrototypeOf,f=c.slice,g=c.concat,h=c.push,i=c.indexOf,j={},k=j.toString,l=j.hasOwnProperty,m=l.toString,n=m.call(Object),o={};function p(a,b){b=b||d;var c=b.createElement("script");c.text=a,b.head.appendChild(c).parentNode.removeChild(c)}var q="3.0.0",r=function(a,b){return new r.fn.init(a,b)},s=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,t=/^-ms-/,u=/-([a-z])/g,v=function(a,b){return b.toUpperCase()};r.fn=r.prototype={jquery:q,constructor:r,length:0,toArray:function(){return f.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:f.call(this)},pushStack:function(a){var b=r.merge(this.constructor(),a);return b.prevObject=this,b},each:function(a){return r.each(this,a)},map:function(a){return this.pushStack(r.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(f.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:h,sort:c.sort,splice:c.splice},r.extend=r.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||r.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(r.isPlainObject(d)||(e=r.isArray(d)))?(e?(e=!1,f=c&&r.isArray(c)?c:[]):f=c&&r.isPlainObject(c)?c:{},g[b]=r.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},r.extend({expando:"jQuery"+(q+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===r.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){var b=r.type(a);return("number"===b||"string"===b)&&!isNaN(a-parseFloat(a))},isPlainObject:function(a){var b,c;return a&&"[object Object]"===k.call(a)?(b=e(a))?(c=l.call(b,"constructor")&&b.constructor,"function"==typeof c&&m.call(c)===n):!0:!1},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?j[k.call(a)]||"object":typeof a},globalEval:function(a){p(a)},camelCase:function(a){return a.replace(t,"ms-").replace(u,v)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b){var c,d=0;if(w(a)){for(c=a.length;c>d;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(s,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(w(Object(a))?r.merge(c,"string"==typeof a?[a]:a):h.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:i.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;c>d;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,e,f=0,h=[];if(w(a))for(d=a.length;d>f;f++)e=b(a[f],f,c),null!=e&&h.push(e);else for(f in a)e=b(a[f],f,c),null!=e&&h.push(e);return g.apply([],h)},guid:1,proxy:function(a,b){var c,d,e;return"string"==typeof b&&(c=a[b],b=a,a=c),r.isFunction(a)?(d=f.call(arguments,2),e=function(){return a.apply(b||this,d.concat(f.call(arguments)))},e.guid=a.guid=a.guid||r.guid++,e):void 0},now:Date.now,support:o}),"function"==typeof Symbol&&(r.fn[Symbol.iterator]=c[Symbol.iterator]),r.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(a,b){j["[object "+b+"]"]=b.toLowerCase()});function w(a){var b=!!a&&"length"in a&&a.length,c=r.type(a);return"function"===c||r.isWindow(a)?!1:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var x=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ha(),z=ha(),A=ha(),B=function(a,b){return a===b&&(l=!0),0},C={}.hasOwnProperty,D=[],E=D.pop,F=D.push,G=D.push,H=D.slice,I=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},J="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",K="[\\x20\\t\\r\\n\\f]",L="(?:\\\\.|[\\w-]|[^\x00-\\xa0])+",M="\\["+K+"*("+L+")(?:"+K+"*([*^$|!~]?=)"+K+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+L+"))|)"+K+"*\\]",N=":("+L+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+M+")*)|.*)\\)|)",O=new RegExp(K+"+","g"),P=new RegExp("^"+K+"+|((?:^|[^\\\\])(?:\\\\.)*)"+K+"+$","g"),Q=new RegExp("^"+K+"*,"+K+"*"),R=new RegExp("^"+K+"*([>+~]|"+K+")"+K+"*"),S=new RegExp("="+K+"*([^\\]'\"]*?)"+K+"*\\]","g"),T=new RegExp(N),U=new RegExp("^"+L+"$"),V={ID:new RegExp("^#("+L+")"),CLASS:new RegExp("^\\.("+L+")"),TAG:new RegExp("^("+L+"|[*])"),ATTR:new RegExp("^"+M),PSEUDO:new RegExp("^"+N),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+K+"*(even|odd|(([+-]|)(\\d*)n|)"+K+"*(?:([+-]|)"+K+"*(\\d+)|))"+K+"*\\)|)","i"),bool:new RegExp("^(?:"+J+")$","i"),needsContext:new RegExp("^"+K+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+K+"*((?:-\\d)?\\d*)"+K+"*\\)|)(?=[^-]|$)","i")},W=/^(?:input|select|textarea|button)$/i,X=/^h\d$/i,Y=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,$=/[+~]/,_=new RegExp("\\\\([\\da-f]{1,6}"+K+"?|("+K+")|.)","ig"),aa=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},ba=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\x80-\uFFFF\w-]/g,ca=function(a,b){return b?"\x00"===a?"\ufffd":a.slice(0,-1)+"\\"+a.charCodeAt(a.length-1).toString(16)+" ":"\\"+a},da=function(){m()},ea=ta(function(a){return a.disabled===!0},{dir:"parentNode",next:"legend"});try{G.apply(D=H.call(v.childNodes),v.childNodes),D[v.childNodes.length].nodeType}catch(fa){G={apply:D.length?function(a,b){F.apply(a,H.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function ga(a,b,d,e){var f,h,j,k,l,o,r,s=b&&b.ownerDocument,w=b?b.nodeType:9;if(d=d||[],"string"!=typeof a||!a||1!==w&&9!==w&&11!==w)return d;if(!e&&((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,p)){if(11!==w&&(l=Z.exec(a)))if(f=l[1]){if(9===w){if(!(j=b.getElementById(f)))return d;if(j.id===f)return d.push(j),d}else if(s&&(j=s.getElementById(f))&&t(b,j)&&j.id===f)return d.push(j),d}else{if(l[2])return G.apply(d,b.getElementsByTagName(a)),d;if((f=l[3])&&c.getElementsByClassName&&b.getElementsByClassName)return G.apply(d,b.getElementsByClassName(f)),d}if(c.qsa&&!A[a+" "]&&(!q||!q.test(a))){if(1!==w)s=b,r=a;else if("object"!==b.nodeName.toLowerCase()){(k=b.getAttribute("id"))?k=k.replace(ba,ca):b.setAttribute("id",k=u),o=g(a),h=o.length;while(h--)o[h]="#"+k+" "+sa(o[h]);r=o.join(","),s=$.test(a)&&qa(b.parentNode)||b}if(r)try{return G.apply(d,s.querySelectorAll(r)),d}catch(x){}finally{k===u&&b.removeAttribute("id")}}}return i(a.replace(P,"$1"),b,d,e)}function ha(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ia(a){return a[u]=!0,a}function ja(a){var b=n.createElement("fieldset");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ka(a,b){var c=a.split("|"),e=c.length;while(e--)d.attrHandle[c[e]]=b}function la(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&a.sourceIndex-b.sourceIndex;if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function na(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function oa(a){return function(b){return"label"in b&&b.disabled===a||"form"in b&&b.disabled===a||"form"in b&&b.disabled===!1&&(b.isDisabled===a||b.isDisabled!==!a&&("label"in b||!ea(b))!==a)}}function pa(a){return ia(function(b){return b=+b,ia(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function qa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=ga.support={},f=ga.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=ga.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=n.documentElement,p=!f(n),v!==n&&(e=n.defaultView)&&e.top!==e&&(e.addEventListener?e.addEventListener("unload",da,!1):e.attachEvent&&e.attachEvent("onunload",da)),c.attributes=ja(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ja(function(a){return a.appendChild(n.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Y.test(n.getElementsByClassName),c.getById=ja(function(a){return o.appendChild(a).id=u,!n.getElementsByName||!n.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c?[c]:[]}},d.filter.ID=function(a){var b=a.replace(_,aa);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(_,aa);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return"undefined"!=typeof b.getElementsByClassName&&p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=Y.test(n.querySelectorAll))&&(ja(function(a){o.appendChild(a).innerHTML="",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+K+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+K+"*(?:value|"+J+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ja(function(a){a.innerHTML="";var b=n.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+K+"*[*^$|!~]?="),2!==a.querySelectorAll(":enabled").length&&q.push(":enabled",":disabled"),o.appendChild(a).disabled=!0,2!==a.querySelectorAll(":disabled").length&&q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=Y.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ja(function(a){c.disconnectedMatch=s.call(a,"*"),s.call(a,"[s!='']:x"),r.push("!=",N)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=Y.test(o.compareDocumentPosition),t=b||Y.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===n||a.ownerDocument===v&&t(v,a)?-1:b===n||b.ownerDocument===v&&t(v,b)?1:k?I(k,a)-I(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,g=[a],h=[b];if(!e||!f)return a===n?-1:b===n?1:e?-1:f?1:k?I(k,a)-I(k,b):0;if(e===f)return la(a,b);c=a;while(c=c.parentNode)g.unshift(c);c=b;while(c=c.parentNode)h.unshift(c);while(g[d]===h[d])d++;return d?la(g[d],h[d]):g[d]===v?-1:h[d]===v?1:0},n):n},ga.matches=function(a,b){return ga(a,null,null,b)},ga.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(S,"='$1']"),c.matchesSelector&&p&&!A[b+" "]&&(!r||!r.test(b))&&(!q||!q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return ga(b,n,null,[a]).length>0},ga.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},ga.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&C.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},ga.escape=function(a){return(a+"").replace(ba,ca)},ga.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},ga.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=ga.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=ga.selectors={cacheLength:50,createPseudo:ia,match:V,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(_,aa),a[3]=(a[3]||a[4]||a[5]||"").replace(_,aa),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||ga.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&ga.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return V.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&T.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(_,aa).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+K+")"+a+"("+K+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=ga.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(O," ")+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h,t=!1;if(q){if(f){while(p){m=b;while(m=m[p])if(h?m.nodeName.toLowerCase()===r:1===m.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){m=q,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n&&j[2],m=n&&q.childNodes[n];while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if(1===m.nodeType&&++t&&m===b){k[a]=[w,n,t];break}}else if(s&&(m=b,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n),t===!1)while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if((h?m.nodeName.toLowerCase()===r:1===m.nodeType)&&++t&&(s&&(l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),k[a]=[w,t]),m===b))break;return t-=e,t===d||t%d===0&&t/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||ga.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ia(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=I(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ia(function(a){var b=[],c=[],d=h(a.replace(P,"$1"));return d[u]?ia(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ia(function(a){return function(b){return ga(a,b).length>0}}),contains:ia(function(a){return a=a.replace(_,aa),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ia(function(a){return U.test(a||"")||ga.error("unsupported lang: "+a),a=a.replace(_,aa).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:oa(!1),disabled:oa(!0),checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return X.test(a.nodeName)},input:function(a){return W.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:pa(function(){return[0]}),last:pa(function(a,b){return[b-1]}),eq:pa(function(a,b,c){return[0>c?c+b:c]}),even:pa(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:pa(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:pa(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:pa(function(a,b,c){for(var d=0>c?c+b:c;++db;b++)d+=a[b].value;return d}function ta(a,b,c){var d=b.dir,e=b.next,f=e||d,g=c&&"parentNode"===f,h=x++;return b.first?function(b,c,e){while(b=b[d])if(1===b.nodeType||g)return a(b,c,e)}:function(b,c,i){var j,k,l,m=[w,h];if(i){while(b=b[d])if((1===b.nodeType||g)&&a(b,c,i))return!0}else while(b=b[d])if(1===b.nodeType||g)if(l=b[u]||(b[u]={}),k=l[b.uniqueID]||(l[b.uniqueID]={}),e&&e===b.nodeName.toLowerCase())b=b[d]||b;else{if((j=k[f])&&j[0]===w&&j[1]===h)return m[2]=j[2];if(k[f]=m,m[2]=a(b,c,i))return!0}}}function ua(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function va(a,b,c){for(var d=0,e=b.length;e>d;d++)ga(a,b[d],c);return c}function wa(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(c&&!c(f,d,e)||(g.push(f),j&&b.push(h)));return g}function xa(a,b,c,d,e,f){return d&&!d[u]&&(d=xa(d)),e&&!e[u]&&(e=xa(e,f)),ia(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||va(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:wa(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=wa(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?I(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=wa(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):G.apply(g,r)})}function ya(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=ta(function(a){return a===b},h,!0),l=ta(function(a){return I(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];f>i;i++)if(c=d.relative[a[i].type])m=[ta(ua(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;f>e;e++)if(d.relative[a[e].type])break;return xa(i>1&&ua(m),i>1&&sa(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(P,"$1"),c,e>i&&ya(a.slice(i,e)),f>e&&ya(a=a.slice(e)),f>e&&sa(a))}m.push(c)}return ua(m)}function za(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,o,q,r=0,s="0",t=f&&[],u=[],v=j,x=f||e&&d.find.TAG("*",k),y=w+=null==v?1:Math.random()||.1,z=x.length;for(k&&(j=g===n||g||k);s!==z&&null!=(l=x[s]);s++){if(e&&l){o=0,g||l.ownerDocument===n||(m(l),h=!p);while(q=a[o++])if(q(l,g||n,h)){i.push(l);break}k&&(w=y)}c&&((l=!q&&l)&&r--,f&&t.push(l))}if(r+=s,c&&s!==r){o=0;while(q=b[o++])q(t,u,g,h);if(f){if(r>0)while(s--)t[s]||u[s]||(u[s]=E.call(i));u=wa(u)}G.apply(i,u),k&&!f&&u.length>0&&r+b.length>1&&ga.uniqueSort(i)}return k&&(w=y,j=v),t};return c?ia(f):f}return h=ga.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=ya(b[c]),f[u]?d.push(f):e.push(f);f=A(a,za(e,d)),f.selector=a}return f},i=ga.select=function(a,b,e,f){var i,j,k,l,m,n="function"==typeof a&&a,o=!f&&g(a=n.selector||a);if(e=e||[],1===o.length){if(j=o[0]=o[0].slice(0),j.length>2&&"ID"===(k=j[0]).type&&c.getById&&9===b.nodeType&&p&&d.relative[j[1].type]){if(b=(d.find.ID(k.matches[0].replace(_,aa),b)||[])[0],!b)return e;n&&(b=b.parentNode),a=a.slice(j.shift().value.length)}i=V.needsContext.test(a)?0:j.length;while(i--){if(k=j[i],d.relative[l=k.type])break;if((m=d.find[l])&&(f=m(k.matches[0].replace(_,aa),$.test(j[0].type)&&qa(b.parentNode)||b))){if(j.splice(i,1),a=f.length&&sa(j),!a)return G.apply(e,f),e;break}}}return(n||h(a,o))(f,b,!p,e,!b||$.test(a)&&qa(b.parentNode)||b),e},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ja(function(a){return 1&a.compareDocumentPosition(n.createElement("fieldset"))}),ja(function(a){return a.innerHTML="","#"===a.firstChild.getAttribute("href")})||ka("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ja(function(a){return a.innerHTML="",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ka("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),ja(function(a){return null==a.getAttribute("disabled")})||ka(J,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),ga}(a);r.find=x,r.expr=x.selectors,r.expr[":"]=r.expr.pseudos,r.uniqueSort=r.unique=x.uniqueSort,r.text=x.getText,r.isXMLDoc=x.isXML,r.contains=x.contains,r.escapeSelector=x.escape;var y=function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&r(a).is(c))break;d.push(a)}return d},z=function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c},A=r.expr.match.needsContext,B=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i,C=/^.[^:#\[\.,]*$/;function D(a,b,c){if(r.isFunction(b))return r.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return r.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(C.test(b))return r.filter(b,a,c);b=r.filter(b,a)}return r.grep(a,function(a){return i.call(b,a)>-1!==c&&1===a.nodeType})}r.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?r.find.matchesSelector(d,a)?[d]:[]:r.find.matches(a,r.grep(b,function(a){return 1===a.nodeType}))},r.fn.extend({find:function(a){var b,c,d=this.length,e=this;if("string"!=typeof a)return this.pushStack(r(a).filter(function(){for(b=0;d>b;b++)if(r.contains(e[b],this))return!0}));for(c=this.pushStack([]),b=0;d>b;b++)r.find(a,e[b],c);return d>1?r.uniqueSort(c):c},filter:function(a){return this.pushStack(D(this,a||[],!1))},not:function(a){return this.pushStack(D(this,a||[],!0))},is:function(a){return!!D(this,"string"==typeof a&&A.test(a)?r(a):a||[],!1).length}});var E,F=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/,G=r.fn.init=function(a,b,c){var e,f;if(!a)return this;if(c=c||E,"string"==typeof a){if(e="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:F.exec(a),!e||!e[1]&&b)return!b||b.jquery?(b||c).find(a):this.constructor(b).find(a);if(e[1]){if(b=b instanceof r?b[0]:b,r.merge(this,r.parseHTML(e[1],b&&b.nodeType?b.ownerDocument||b:d,!0)),B.test(e[1])&&r.isPlainObject(b))for(e in b)r.isFunction(this[e])?this[e](b[e]):this.attr(e,b[e]);return this}return f=d.getElementById(e[2]),f&&(this[0]=f,this.length=1),this}return a.nodeType?(this[0]=a,this.length=1,this):r.isFunction(a)?void 0!==c.ready?c.ready(a):a(r):r.makeArray(a,this)};G.prototype=r.fn,E=r(d);var H=/^(?:parents|prev(?:Until|All))/,I={children:!0,contents:!0,next:!0,prev:!0};r.fn.extend({has:function(a){var b=r(a,this),c=b.length;return this.filter(function(){for(var a=0;c>a;a++)if(r.contains(this,b[a]))return!0})},closest:function(a,b){var c,d=0,e=this.length,f=[],g="string"!=typeof a&&r(a);if(!A.test(a))for(;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&r.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?r.uniqueSort(f):f)},index:function(a){return a?"string"==typeof a?i.call(r(a),this[0]):i.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(r.uniqueSort(r.merge(this.get(),r(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function J(a,b){while((a=a[b])&&1!==a.nodeType);return a}r.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return y(a,"parentNode")},parentsUntil:function(a,b,c){return y(a,"parentNode",c)},next:function(a){return J(a,"nextSibling")},prev:function(a){return J(a,"previousSibling")},nextAll:function(a){return y(a,"nextSibling")},prevAll:function(a){return y(a,"previousSibling")},nextUntil:function(a,b,c){return y(a,"nextSibling",c)},prevUntil:function(a,b,c){return y(a,"previousSibling",c)},siblings:function(a){return z((a.parentNode||{}).firstChild,a)},children:function(a){return z(a.firstChild)},contents:function(a){return a.contentDocument||r.merge([],a.childNodes)}},function(a,b){r.fn[a]=function(c,d){var e=r.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=r.filter(d,e)),this.length>1&&(I[a]||r.uniqueSort(e),H.test(a)&&e.reverse()),this.pushStack(e)}});var K=/\S+/g;function L(a){var b={};return r.each(a.match(K)||[],function(a,c){b[c]=!0}),b}r.Callbacks=function(a){a="string"==typeof a?L(a):r.extend({},a);var b,c,d,e,f=[],g=[],h=-1,i=function(){for(e=a.once,d=b=!0;g.length;h=-1){c=g.shift();while(++h-1)f.splice(c,1),h>=c&&h--}),this},has:function(a){return a?r.inArray(a,f)>-1:f.length>0},empty:function(){return f&&(f=[]),this},disable:function(){return e=g=[],f=c="",this},disabled:function(){return!f},lock:function(){return e=g=[],c||b||(f=c=""),this},locked:function(){return!!e},fireWith:function(a,c){return e||(c=c||[],c=[a,c.slice?c.slice():c],g.push(c),b||i()),this},fire:function(){return j.fireWith(this,arguments),this},fired:function(){return!!d}};return j};function M(a){return a}function N(a){throw a}function O(a,b,c){var d;try{a&&r.isFunction(d=a.promise)?d.call(a).done(b).fail(c):a&&r.isFunction(d=a.then)?d.call(a,b,c):b.call(void 0,a)}catch(a){c.call(void 0,a)}}r.extend({Deferred:function(b){var c=[["notify","progress",r.Callbacks("memory"),r.Callbacks("memory"),2],["resolve","done",r.Callbacks("once memory"),r.Callbacks("once memory"),0,"resolved"],["reject","fail",r.Callbacks("once memory"),r.Callbacks("once memory"),1,"rejected"]],d="pending",e={state:function(){return d},always:function(){return f.done(arguments).fail(arguments),this},"catch":function(a){return e.then(null,a)},pipe:function(){var a=arguments;return r.Deferred(function(b){r.each(c,function(c,d){var e=r.isFunction(a[d[4]])&&a[d[4]];f[d[1]](function(){var a=e&&e.apply(this,arguments);a&&r.isFunction(a.promise)?a.promise().progress(b.notify).done(b.resolve).fail(b.reject):b[d[0]+"With"](this,e?[a]:arguments)})}),a=null}).promise()},then:function(b,d,e){var f=0;function g(b,c,d,e){return function(){var h=this,i=arguments,j=function(){var a,j;if(!(f>b)){if(a=d.apply(h,i),a===c.promise())throw new TypeError("Thenable self-resolution");j=a&&("object"==typeof a||"function"==typeof a)&&a.then,r.isFunction(j)?e?j.call(a,g(f,c,M,e),g(f,c,N,e)):(f++,j.call(a,g(f,c,M,e),g(f,c,N,e),g(f,c,M,c.notifyWith))):(d!==M&&(h=void 0,i=[a]),(e||c.resolveWith)(h,i))}},k=e?j:function(){try{j()}catch(a){r.Deferred.exceptionHook&&r.Deferred.exceptionHook(a,k.stackTrace),b+1>=f&&(d!==N&&(h=void 0,i=[a]),c.rejectWith(h,i))}};b?k():(r.Deferred.getStackHook&&(k.stackTrace=r.Deferred.getStackHook()),a.setTimeout(k))}}return r.Deferred(function(a){c[0][3].add(g(0,a,r.isFunction(e)?e:M,a.notifyWith)),c[1][3].add(g(0,a,r.isFunction(b)?b:M)),c[2][3].add(g(0,a,r.isFunction(d)?d:N))}).promise()},promise:function(a){return null!=a?r.extend(a,e):e}},f={};return r.each(c,function(a,b){var g=b[2],h=b[5];e[b[1]]=g.add,h&&g.add(function(){d=h},c[3-a][2].disable,c[0][2].lock),g.add(b[3].fire),f[b[0]]=function(){return f[b[0]+"With"](this===f?void 0:this,arguments),this},f[b[0]+"With"]=g.fireWith}),e.promise(f),b&&b.call(f,f),f},when:function(a){var b=arguments.length,c=b,d=Array(c),e=f.call(arguments),g=r.Deferred(),h=function(a){return function(c){d[a]=this,e[a]=arguments.length>1?f.call(arguments):c,--b||g.resolveWith(d,e)}};if(1>=b&&(O(a,g.done(h(c)).resolve,g.reject),"pending"===g.state()||r.isFunction(e[c]&&e[c].then)))return g.then();while(c--)O(e[c],h(c),g.reject);return g.promise()}});var P=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;r.Deferred.exceptionHook=function(b,c){a.console&&a.console.warn&&b&&P.test(b.name)&&a.console.warn("jQuery.Deferred exception: "+b.message,b.stack,c)};var Q=r.Deferred();r.fn.ready=function(a){return Q.then(a),this},r.extend({isReady:!1,readyWait:1,holdReady:function(a){a?r.readyWait++:r.ready(!0)},ready:function(a){(a===!0?--r.readyWait:r.isReady)||(r.isReady=!0,a!==!0&&--r.readyWait>0||Q.resolveWith(d,[r]))}}),r.ready.then=Q.then;function R(){d.removeEventListener("DOMContentLoaded",R),a.removeEventListener("load",R),r.ready()}"complete"===d.readyState||"loading"!==d.readyState&&!d.documentElement.doScroll?a.setTimeout(r.ready):(d.addEventListener("DOMContentLoaded",R),a.addEventListener("load",R));var S=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===r.type(c)){e=!0;for(h in c)S(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,r.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){ +return j.call(r(a),c)})),b))for(;i>h;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},T=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function U(){this.expando=r.expando+U.uid++}U.uid=1,U.prototype={cache:function(a){var b=a[this.expando];return b||(b={},T(a)&&(a.nodeType?a[this.expando]=b:Object.defineProperty(a,this.expando,{value:b,configurable:!0}))),b},set:function(a,b,c){var d,e=this.cache(a);if("string"==typeof b)e[r.camelCase(b)]=c;else for(d in b)e[r.camelCase(d)]=b[d];return e},get:function(a,b){return void 0===b?this.cache(a):a[this.expando]&&a[this.expando][r.camelCase(b)]},access:function(a,b,c){return void 0===b||b&&"string"==typeof b&&void 0===c?this.get(a,b):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d=a[this.expando];if(void 0!==d){if(void 0!==b){r.isArray(b)?b=b.map(r.camelCase):(b=r.camelCase(b),b=b in d?[b]:b.match(K)||[]),c=b.length;while(c--)delete d[b[c]]}(void 0===b||r.isEmptyObject(d))&&(a.nodeType?a[this.expando]=void 0:delete a[this.expando])}},hasData:function(a){var b=a[this.expando];return void 0!==b&&!r.isEmptyObject(b)}};var V=new U,W=new U,X=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,Y=/[A-Z]/g;function Z(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(Y,"-$&").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:X.test(c)?JSON.parse(c):c}catch(e){}W.set(a,b,c)}else c=void 0;return c}r.extend({hasData:function(a){return W.hasData(a)||V.hasData(a)},data:function(a,b,c){return W.access(a,b,c)},removeData:function(a,b){W.remove(a,b)},_data:function(a,b,c){return V.access(a,b,c)},_removeData:function(a,b){V.remove(a,b)}}),r.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=W.get(f),1===f.nodeType&&!V.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=r.camelCase(d.slice(5)),Z(f,d,e[d])));V.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){W.set(this,a)}):S(this,function(b){var c;if(f&&void 0===b){if(c=W.get(f,a),void 0!==c)return c;if(c=Z(f,a),void 0!==c)return c}else this.each(function(){W.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){W.remove(this,a)})}}),r.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=V.get(a,b),c&&(!d||r.isArray(c)?d=V.access(a,b,r.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=r.queue(a,b),d=c.length,e=c.shift(),f=r._queueHooks(a,b),g=function(){r.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return V.get(a,c)||V.access(a,c,{empty:r.Callbacks("once memory").add(function(){V.remove(a,[b+"queue",c])})})}}),r.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.lengthf;f++)d=a[f],d.style&&(c=d.style.display,b?("none"===c&&(e[f]=V.get(d,"display")||null,e[f]||(d.style.display="")),""===d.style.display&&ba(d)&&(e[f]=fa(d))):"none"!==c&&(e[f]="none",V.set(d,"display",c)));for(f=0;g>f;f++)null!=e[f]&&(a[f].style.display=e[f]);return a}r.fn.extend({show:function(){return ga(this,!0)},hide:function(){return ga(this)},toggle:function(a){return"boolean"==typeof a?a?this.show():this.hide():this.each(function(){ba(this)?r(this).show():r(this).hide()})}});var ha=/^(?:checkbox|radio)$/i,ia=/<([a-z][^\/\0>\x20\t\r\n\f]+)/i,ja=/^$|\/(?:java|ecma)script/i,ka={option:[1,""],thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};ka.optgroup=ka.option,ka.tbody=ka.tfoot=ka.colgroup=ka.caption=ka.thead,ka.th=ka.td;function la(a,b){var c="undefined"!=typeof a.getElementsByTagName?a.getElementsByTagName(b||"*"):"undefined"!=typeof a.querySelectorAll?a.querySelectorAll(b||"*"):[];return void 0===b||b&&r.nodeName(a,b)?r.merge([a],c):c}function ma(a,b){for(var c=0,d=a.length;d>c;c++)V.set(a[c],"globalEval",!b||V.get(b[c],"globalEval"))}var na=/<|&#?\w+;/;function oa(a,b,c,d,e){for(var f,g,h,i,j,k,l=b.createDocumentFragment(),m=[],n=0,o=a.length;o>n;n++)if(f=a[n],f||0===f)if("object"===r.type(f))r.merge(m,f.nodeType?[f]:f);else if(na.test(f)){g=g||l.appendChild(b.createElement("div")),h=(ia.exec(f)||["",""])[1].toLowerCase(),i=ka[h]||ka._default,g.innerHTML=i[1]+r.htmlPrefilter(f)+i[2],k=i[0];while(k--)g=g.lastChild;r.merge(m,g.childNodes),g=l.firstChild,g.textContent=""}else m.push(b.createTextNode(f));l.textContent="",n=0;while(f=m[n++])if(d&&r.inArray(f,d)>-1)e&&e.push(f);else if(j=r.contains(f.ownerDocument,f),g=la(l.appendChild(f),"script"),j&&ma(g),c){k=0;while(f=g[k++])ja.test(f.type||"")&&c.push(f)}return l}!function(){var a=d.createDocumentFragment(),b=a.appendChild(d.createElement("div")),c=d.createElement("input");c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),b.appendChild(c),o.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,b.innerHTML="",o.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var pa=d.documentElement,qa=/^key/,ra=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,sa=/^([^.]*)(?:\.(.+)|)/;function ta(){return!0}function ua(){return!1}function va(){try{return d.activeElement}catch(a){}}function wa(a,b,c,d,e,f){var g,h;if("object"==typeof b){"string"!=typeof c&&(d=d||c,c=void 0);for(h in b)wa(a,h,c,d,b[h],f);return a}if(null==d&&null==e?(e=c,d=c=void 0):null==e&&("string"==typeof c?(e=d,d=void 0):(e=d,d=c,c=void 0)),e===!1)e=ua;else if(!e)return a;return 1===f&&(g=e,e=function(a){return r().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=r.guid++)),a.each(function(){r.event.add(this,b,e,d,c)})}r.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q=V.get(a);if(q){c.handler&&(f=c,c=f.handler,e=f.selector),e&&r.find.matchesSelector(pa,e),c.guid||(c.guid=r.guid++),(i=q.events)||(i=q.events={}),(g=q.handle)||(g=q.handle=function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(K)||[""],j=b.length;while(j--)h=sa.exec(b[j])||[],n=p=h[1],o=(h[2]||"").split(".").sort(),n&&(l=r.event.special[n]||{},n=(e?l.delegateType:l.bindType)||n,l=r.event.special[n]||{},k=r.extend({type:n,origType:p,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&r.expr.match.needsContext.test(e),namespace:o.join(".")},f),(m=i[n])||(m=i[n]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,o,g)!==!1||a.addEventListener&&a.addEventListener(n,g)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),r.event.global[n]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q=V.hasData(a)&&V.get(a);if(q&&(i=q.events)){b=(b||"").match(K)||[""],j=b.length;while(j--)if(h=sa.exec(b[j])||[],n=p=h[1],o=(h[2]||"").split(".").sort(),n){l=r.event.special[n]||{},n=(d?l.delegateType:l.bindType)||n,m=i[n]||[],h=h[2]&&new RegExp("(^|\\.)"+o.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&p!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,o,q.handle)!==!1||r.removeEvent(a,n,q.handle),delete i[n])}else for(n in i)r.event.remove(a,n+b[j],c,d,!0);r.isEmptyObject(i)&&V.remove(a,"handle events")}},dispatch:function(a){var b=r.event.fix(a),c,d,e,f,g,h,i=new Array(arguments.length),j=(V.get(this,"events")||{})[b.type]||[],k=r.event.special[b.type]||{};for(i[0]=b,c=1;cc;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?r(e,this).index(i)>-1:r.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h\x20\t\r\n\f]*)[^>]*)\/>/gi,ya=/\s*$/g;function Ca(a,b){return r.nodeName(a,"table")&&r.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a:a}function Da(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function Ea(a){var b=Aa.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function Fa(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(V.hasData(a)&&(f=V.access(a),g=V.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;d>c;c++)r.event.add(b,e,j[e][c])}W.hasData(a)&&(h=W.access(a),i=r.extend({},h),W.set(b,i))}}function Ga(a,b){var c=b.nodeName.toLowerCase();"input"===c&&ha.test(a.type)?b.checked=a.checked:"input"!==c&&"textarea"!==c||(b.defaultValue=a.defaultValue)}function Ha(a,b,c,d){b=g.apply([],b);var e,f,h,i,j,k,l=0,m=a.length,n=m-1,q=b[0],s=r.isFunction(q);if(s||m>1&&"string"==typeof q&&!o.checkClone&&za.test(q))return a.each(function(e){var f=a.eq(e);s&&(b[0]=q.call(this,e,f.html())),Ha(f,b,c,d)});if(m&&(e=oa(b,a[0].ownerDocument,!1,a,d),f=e.firstChild,1===e.childNodes.length&&(e=f),f||d)){for(h=r.map(la(e,"script"),Da),i=h.length;m>l;l++)j=e,l!==n&&(j=r.clone(j,!0,!0),i&&r.merge(h,la(j,"script"))),c.call(a[l],j,l);if(i)for(k=h[h.length-1].ownerDocument,r.map(h,Ea),l=0;i>l;l++)j=h[l],ja.test(j.type||"")&&!V.access(j,"globalEval")&&r.contains(k,j)&&(j.src?r._evalUrl&&r._evalUrl(j.src):p(j.textContent.replace(Ba,""),k))}return a}function Ia(a,b,c){for(var d,e=b?r.filter(b,a):a,f=0;null!=(d=e[f]);f++)c||1!==d.nodeType||r.cleanData(la(d)),d.parentNode&&(c&&r.contains(d.ownerDocument,d)&&ma(la(d,"script")),d.parentNode.removeChild(d));return a}r.extend({htmlPrefilter:function(a){return a.replace(xa,"<$1>")},clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=r.contains(a.ownerDocument,a);if(!(o.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||r.isXMLDoc(a)))for(g=la(h),f=la(a),d=0,e=f.length;e>d;d++)Ga(f[d],g[d]);if(b)if(c)for(f=f||la(a),g=g||la(h),d=0,e=f.length;e>d;d++)Fa(f[d],g[d]);else Fa(a,h);return g=la(h,"script"),g.length>0&&ma(g,!i&&la(a,"script")),h},cleanData:function(a){for(var b,c,d,e=r.event.special,f=0;void 0!==(c=a[f]);f++)if(T(c)){if(b=c[V.expando]){if(b.events)for(d in b.events)e[d]?r.event.remove(c,d):r.removeEvent(c,d,b.handle);c[V.expando]=void 0}c[W.expando]&&(c[W.expando]=void 0)}}}),r.fn.extend({detach:function(a){return Ia(this,a,!0)},remove:function(a){return Ia(this,a)},text:function(a){return S(this,function(a){return void 0===a?r.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=a)})},null,a,arguments.length)},append:function(){return Ha(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ca(this,a);b.appendChild(a)}})},prepend:function(){return Ha(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ca(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return Ha(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return Ha(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(r.cleanData(la(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return r.clone(this,a,b)})},html:function(a){return S(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!ya.test(a)&&!ka[(ia.exec(a)||["",""])[1].toLowerCase()]){a=r.htmlPrefilter(a);try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(r.cleanData(la(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=[];return Ha(this,arguments,function(b){var c=this.parentNode;r.inArray(this,a)<0&&(r.cleanData(la(this)),c&&c.replaceChild(b,this))},a)}}),r.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){r.fn[a]=function(a){for(var c,d=[],e=r(a),f=e.length-1,g=0;f>=g;g++)c=g===f?this:this.clone(!0),r(e[g])[b](c),h.apply(d,c.get());return this.pushStack(d)}});var Ja=/^margin/,Ka=new RegExp("^("+$+")(?!px)[a-z%]+$","i"),La=function(b){var c=b.ownerDocument.defaultView;return c&&c.opener||(c=a),c.getComputedStyle(b)};!function(){function b(){if(i){i.style.cssText="box-sizing:border-box;position:relative;display:block;margin:auto;border:1px;padding:1px;top:1%;width:50%",i.innerHTML="",pa.appendChild(h);var b=a.getComputedStyle(i);c="1%"!==b.top,g="2px"===b.marginLeft,e="4px"===b.width,i.style.marginRight="50%",f="4px"===b.marginRight,pa.removeChild(h),i=null}}var c,e,f,g,h=d.createElement("div"),i=d.createElement("div");i.style&&(i.style.backgroundClip="content-box",i.cloneNode(!0).style.backgroundClip="",o.clearCloneStyle="content-box"===i.style.backgroundClip,h.style.cssText="border:0;width:8px;height:0;top:0;left:-9999px;padding:0;margin-top:1px;position:absolute",h.appendChild(i),r.extend(o,{pixelPosition:function(){return b(),c},boxSizingReliable:function(){return b(),e},pixelMarginRight:function(){return b(),f},reliableMarginLeft:function(){return b(),g}}))}();function Ma(a,b,c){var d,e,f,g,h=a.style;return c=c||La(a),c&&(g=c.getPropertyValue(b)||c[b],""!==g||r.contains(a.ownerDocument,a)||(g=r.style(a,b)),!o.pixelMarginRight()&&Ka.test(g)&&Ja.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f)),void 0!==g?g+"":g}function Na(a,b){return{get:function(){return a()?void delete this.get:(this.get=b).apply(this,arguments)}}}var Oa=/^(none|table(?!-c[ea]).+)/,Pa={position:"absolute",visibility:"hidden",display:"block"},Qa={letterSpacing:"0",fontWeight:"400"},Ra=["Webkit","Moz","ms"],Sa=d.createElement("div").style;function Ta(a){if(a in Sa)return a;var b=a[0].toUpperCase()+a.slice(1),c=Ra.length;while(c--)if(a=Ra[c]+b,a in Sa)return a}function Ua(a,b,c){var d=_.exec(b);return d?Math.max(0,d[2]-(c||0))+(d[3]||"px"):b}function Va(a,b,c,d,e){for(var f=c===(d?"border":"content")?4:"width"===b?1:0,g=0;4>f;f+=2)"margin"===c&&(g+=r.css(a,c+aa[f],!0,e)),d?("content"===c&&(g-=r.css(a,"padding"+aa[f],!0,e)),"margin"!==c&&(g-=r.css(a,"border"+aa[f]+"Width",!0,e))):(g+=r.css(a,"padding"+aa[f],!0,e),"padding"!==c&&(g+=r.css(a,"border"+aa[f]+"Width",!0,e)));return g}function Wa(a,b,c){var d,e=!0,f=La(a),g="border-box"===r.css(a,"boxSizing",!1,f);if(a.getClientRects().length&&(d=a.getBoundingClientRect()[b]),0>=d||null==d){if(d=Ma(a,b,f),(0>d||null==d)&&(d=a.style[b]),Ka.test(d))return d;e=g&&(o.boxSizingReliable()||d===a.style[b]),d=parseFloat(d)||0}return d+Va(a,b,c||(g?"border":"content"),e,f)+"px"}r.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=Ma(a,"opacity");return""===c?"1":c}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":"cssFloat"},style:function(a,b,c,d){if(a&&3!==a.nodeType&&8!==a.nodeType&&a.style){var e,f,g,h=r.camelCase(b),i=a.style;return b=r.cssProps[h]||(r.cssProps[h]=Ta(h)||h),g=r.cssHooks[b]||r.cssHooks[h],void 0===c?g&&"get"in g&&void 0!==(e=g.get(a,!1,d))?e:i[b]:(f=typeof c,"string"===f&&(e=_.exec(c))&&e[1]&&(c=da(a,b,e),f="number"),null!=c&&c===c&&("number"===f&&(c+=e&&e[3]||(r.cssNumber[h]?"":"px")),o.clearCloneStyle||""!==c||0!==b.indexOf("background")||(i[b]="inherit"),g&&"set"in g&&void 0===(c=g.set(a,c,d))||(i[b]=c)),void 0)}},css:function(a,b,c,d){var e,f,g,h=r.camelCase(b);return b=r.cssProps[h]||(r.cssProps[h]=Ta(h)||h),g=r.cssHooks[b]||r.cssHooks[h],g&&"get"in g&&(e=g.get(a,!0,c)),void 0===e&&(e=Ma(a,b,d)),"normal"===e&&b in Qa&&(e=Qa[b]),""===c||c?(f=parseFloat(e),c===!0||isFinite(f)?f||0:e):e}}),r.each(["height","width"],function(a,b){r.cssHooks[b]={get:function(a,c,d){return c?!Oa.test(r.css(a,"display"))||a.getClientRects().length&&a.getBoundingClientRect().width?Wa(a,b,d):ca(a,Pa,function(){return Wa(a,b,d)}):void 0},set:function(a,c,d){var e,f=d&&La(a),g=d&&Va(a,b,d,"border-box"===r.css(a,"boxSizing",!1,f),f);return g&&(e=_.exec(c))&&"px"!==(e[3]||"px")&&(a.style[b]=c,c=r.css(a,b)),Ua(a,c,g)}}}),r.cssHooks.marginLeft=Na(o.reliableMarginLeft,function(a,b){return b?(parseFloat(Ma(a,"marginLeft"))||a.getBoundingClientRect().left-ca(a,{marginLeft:0},function(){return a.getBoundingClientRect().left}))+"px":void 0}),r.each({margin:"",padding:"",border:"Width"},function(a,b){r.cssHooks[a+b]={expand:function(c){for(var d=0,e={},f="string"==typeof c?c.split(" "):[c];4>d;d++)e[a+aa[d]+b]=f[d]||f[d-2]||f[0];return e}},Ja.test(a)||(r.cssHooks[a+b].set=Ua)}),r.fn.extend({css:function(a,b){return S(this,function(a,b,c){var d,e,f={},g=0;if(r.isArray(b)){for(d=La(a),e=b.length;e>g;g++)f[b[g]]=r.css(a,b[g],!1,d);return f}return void 0!==c?r.style(a,b,c):r.css(a,b)},a,b,arguments.length>1)}});function Xa(a,b,c,d,e){return new Xa.prototype.init(a,b,c,d,e)}r.Tween=Xa,Xa.prototype={constructor:Xa,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||r.easing._default,this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(r.cssNumber[c]?"":"px")},cur:function(){var a=Xa.propHooks[this.prop];return a&&a.get?a.get(this):Xa.propHooks._default.get(this)},run:function(a){var b,c=Xa.propHooks[this.prop];return this.options.duration?this.pos=b=r.easing[this.easing](a,this.options.duration*a,0,1,this.options.duration):this.pos=b=a,this.now=(this.end-this.start)*b+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),c&&c.set?c.set(this):Xa.propHooks._default.set(this),this}},Xa.prototype.init.prototype=Xa.prototype,Xa.propHooks={_default:{get:function(a){var b;return 1!==a.elem.nodeType||null!=a.elem[a.prop]&&null==a.elem.style[a.prop]?a.elem[a.prop]:(b=r.css(a.elem,a.prop,""),b&&"auto"!==b?b:0)},set:function(a){r.fx.step[a.prop]?r.fx.step[a.prop](a):1!==a.elem.nodeType||null==a.elem.style[r.cssProps[a.prop]]&&!r.cssHooks[a.prop]?a.elem[a.prop]=a.now:r.style(a.elem,a.prop,a.now+a.unit)}}},Xa.propHooks.scrollTop=Xa.propHooks.scrollLeft={set:function(a){a.elem.nodeType&&a.elem.parentNode&&(a.elem[a.prop]=a.now)}},r.easing={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2},_default:"swing"},r.fx=Xa.prototype.init,r.fx.step={};var Ya,Za,$a=/^(?:toggle|show|hide)$/,_a=/queueHooks$/;function ab(){Za&&(a.requestAnimationFrame(ab),r.fx.tick())}function bb(){return a.setTimeout(function(){Ya=void 0}),Ya=r.now()}function cb(a,b){var c,d=0,e={height:a};for(b=b?1:0;4>d;d+=2-b)c=aa[d],e["margin"+c]=e["padding"+c]=a;return b&&(e.opacity=e.width=a),e}function db(a,b,c){for(var d,e=(gb.tweeners[b]||[]).concat(gb.tweeners["*"]),f=0,g=e.length;g>f;f++)if(d=e[f].call(c,b,a))return d}function eb(a,b,c){var d,e,f,g,h,i,j,k,l="width"in b||"height"in b,m=this,n={},o=a.style,p=a.nodeType&&ba(a),q=V.get(a,"fxshow");c.queue||(g=r._queueHooks(a,"fx"),null==g.unqueued&&(g.unqueued=0,h=g.empty.fire,g.empty.fire=function(){g.unqueued||h()}),g.unqueued++,m.always(function(){m.always(function(){g.unqueued--,r.queue(a,"fx").length||g.empty.fire()})}));for(d in b)if(e=b[d],$a.test(e)){if(delete b[d],f=f||"toggle"===e,e===(p?"hide":"show")){if("show"!==e||!q||void 0===q[d])continue;p=!0}n[d]=q&&q[d]||r.style(a,d)}if(i=!r.isEmptyObject(b),i||!r.isEmptyObject(n)){l&&1===a.nodeType&&(c.overflow=[o.overflow,o.overflowX,o.overflowY],j=q&&q.display,null==j&&(j=V.get(a,"display")),k=r.css(a,"display"),"none"===k&&(j?k=j:(ga([a],!0),j=a.style.display||j,k=r.css(a,"display"),ga([a]))),("inline"===k||"inline-block"===k&&null!=j)&&"none"===r.css(a,"float")&&(i||(m.done(function(){o.display=j}),null==j&&(k=o.display,j="none"===k?"":k)),o.display="inline-block")),c.overflow&&(o.overflow="hidden",m.always(function(){o.overflow=c.overflow[0],o.overflowX=c.overflow[1],o.overflowY=c.overflow[2]})),i=!1;for(d in n)i||(q?"hidden"in q&&(p=q.hidden):q=V.access(a,"fxshow",{display:j}),f&&(q.hidden=!p),p&&ga([a],!0),m.done(function(){p||ga([a]),V.remove(a,"fxshow");for(d in n)r.style(a,d,n[d])})),i=db(p?q[d]:0,d,m),d in q||(q[d]=i.start,p&&(i.end=i.start,i.start=0))}}function fb(a,b){var c,d,e,f,g;for(c in a)if(d=r.camelCase(c),e=b[d],f=a[c],r.isArray(f)&&(e=f[1],f=a[c]=f[0]),c!==d&&(a[d]=f,delete a[c]),g=r.cssHooks[d],g&&"expand"in g){f=g.expand(f),delete a[d];for(c in f)c in a||(a[c]=f[c],b[c]=e)}else b[d]=e}function gb(a,b,c){var d,e,f=0,g=gb.prefilters.length,h=r.Deferred().always(function(){delete i.elem}),i=function(){if(e)return!1;for(var b=Ya||bb(),c=Math.max(0,j.startTime+j.duration-b),d=c/j.duration||0,f=1-d,g=0,i=j.tweens.length;i>g;g++)j.tweens[g].run(f);return h.notifyWith(a,[j,f,c]),1>f&&i?c:(h.resolveWith(a,[j]),!1)},j=h.promise({elem:a,props:r.extend({},b),opts:r.extend(!0,{specialEasing:{},easing:r.easing._default},c),originalProperties:b,originalOptions:c,startTime:Ya||bb(),duration:c.duration,tweens:[],createTween:function(b,c){var d=r.Tween(a,j.opts,b,c,j.opts.specialEasing[b]||j.opts.easing);return j.tweens.push(d),d},stop:function(b){var c=0,d=b?j.tweens.length:0;if(e)return this;for(e=!0;d>c;c++)j.tweens[c].run(1);return b?(h.notifyWith(a,[j,1,0]),h.resolveWith(a,[j,b])):h.rejectWith(a,[j,b]),this}}),k=j.props;for(fb(k,j.opts.specialEasing);g>f;f++)if(d=gb.prefilters[f].call(j,a,k,j.opts))return r.isFunction(d.stop)&&(r._queueHooks(j.elem,j.opts.queue).stop=r.proxy(d.stop,d)),d;return r.map(k,db,j),r.isFunction(j.opts.start)&&j.opts.start.call(a,j),r.fx.timer(r.extend(i,{elem:a,anim:j,queue:j.opts.queue})),j.progress(j.opts.progress).done(j.opts.done,j.opts.complete).fail(j.opts.fail).always(j.opts.always)}r.Animation=r.extend(gb,{tweeners:{"*":[function(a,b){var c=this.createTween(a,b);return da(c.elem,a,_.exec(b),c),c}]},tweener:function(a,b){r.isFunction(a)?(b=a,a=["*"]):a=a.match(K);for(var c,d=0,e=a.length;e>d;d++)c=a[d],gb.tweeners[c]=gb.tweeners[c]||[],gb.tweeners[c].unshift(b)},prefilters:[eb],prefilter:function(a,b){b?gb.prefilters.unshift(a):gb.prefilters.push(a)}}),r.speed=function(a,b,c){var e=a&&"object"==typeof a?r.extend({},a):{complete:c||!c&&b||r.isFunction(a)&&a,duration:a,easing:c&&b||b&&!r.isFunction(b)&&b};return r.fx.off||d.hidden?e.duration=0:e.duration="number"==typeof e.duration?e.duration:e.duration in r.fx.speeds?r.fx.speeds[e.duration]:r.fx.speeds._default,null!=e.queue&&e.queue!==!0||(e.queue="fx"),e.old=e.complete,e.complete=function(){r.isFunction(e.old)&&e.old.call(this),e.queue&&r.dequeue(this,e.queue)},e},r.fn.extend({fadeTo:function(a,b,c,d){return this.filter(ba).css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=r.isEmptyObject(a),f=r.speed(b,c,d),g=function(){var b=gb(this,r.extend({},a),f);(e||V.get(this,"finish"))&&b.stop(!0)};return g.finish=g,e||f.queue===!1?this.each(g):this.queue(f.queue,g)},stop:function(a,b,c){var d=function(a){var b=a.stop;delete a.stop,b(c)};return"string"!=typeof a&&(c=b,b=a,a=void 0),b&&a!==!1&&this.queue(a||"fx",[]),this.each(function(){var b=!0,e=null!=a&&a+"queueHooks",f=r.timers,g=V.get(this);if(e)g[e]&&g[e].stop&&d(g[e]);else for(e in g)g[e]&&g[e].stop&&_a.test(e)&&d(g[e]);for(e=f.length;e--;)f[e].elem!==this||null!=a&&f[e].queue!==a||(f[e].anim.stop(c),b=!1,f.splice(e,1));!b&&c||r.dequeue(this,a)})},finish:function(a){return a!==!1&&(a=a||"fx"),this.each(function(){var b,c=V.get(this),d=c[a+"queue"],e=c[a+"queueHooks"],f=r.timers,g=d?d.length:0;for(c.finish=!0,r.queue(this,a,[]),e&&e.stop&&e.stop.call(this,!0),b=f.length;b--;)f[b].elem===this&&f[b].queue===a&&(f[b].anim.stop(!0),f.splice(b,1));for(b=0;g>b;b++)d[b]&&d[b].finish&&d[b].finish.call(this);delete c.finish})}}),r.each(["toggle","show","hide"],function(a,b){var c=r.fn[b];r.fn[b]=function(a,d,e){return null==a||"boolean"==typeof a?c.apply(this,arguments):this.animate(cb(b,!0),a,d,e)}}),r.each({slideDown:cb("show"),slideUp:cb("hide"),slideToggle:cb("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){r.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),r.timers=[],r.fx.tick=function(){var a,b=0,c=r.timers;for(Ya=r.now();b1)},removeAttr:function(a){return this.each(function(){r.removeAttr(this,a)})}}),r.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return"undefined"==typeof a.getAttribute?r.prop(a,b,c):(1===f&&r.isXMLDoc(a)||(e=r.attrHooks[b.toLowerCase()]||(r.expr.match.bool.test(b)?hb:void 0)),void 0!==c?null===c?void r.removeAttr(a,b):e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:(a.setAttribute(b,c+""),c):e&&"get"in e&&null!==(d=e.get(a,b))?d:(d=r.find.attr(a,b),null==d?void 0:d))},attrHooks:{type:{set:function(a,b){if(!o.radioValue&&"radio"===b&&r.nodeName(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}},removeAttr:function(a,b){var c,d=0,e=b&&b.match(K);if(e&&1===a.nodeType)while(c=e[d++])a.removeAttribute(c); +}}),hb={set:function(a,b,c){return b===!1?r.removeAttr(a,c):a.setAttribute(c,c),c}},r.each(r.expr.match.bool.source.match(/\w+/g),function(a,b){var c=ib[b]||r.find.attr;ib[b]=function(a,b,d){var e,f,g=b.toLowerCase();return d||(f=ib[g],ib[g]=e,e=null!=c(a,b,d)?g:null,ib[g]=f),e}});var jb=/^(?:input|select|textarea|button)$/i,kb=/^(?:a|area)$/i;r.fn.extend({prop:function(a,b){return S(this,r.prop,a,b,arguments.length>1)},removeProp:function(a){return this.each(function(){delete this[r.propFix[a]||a]})}}),r.extend({prop:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return 1===f&&r.isXMLDoc(a)||(b=r.propFix[b]||b,e=r.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b]},propHooks:{tabIndex:{get:function(a){var b=r.find.attr(a,"tabindex");return b?parseInt(b,10):jb.test(a.nodeName)||kb.test(a.nodeName)&&a.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),o.optSelected||(r.propHooks.selected={get:function(a){var b=a.parentNode;return b&&b.parentNode&&b.parentNode.selectedIndex,null},set:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex)}}),r.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){r.propFix[this.toLowerCase()]=this});var lb=/[\t\r\n\f]/g;function mb(a){return a.getAttribute&&a.getAttribute("class")||""}r.fn.extend({addClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).addClass(a.call(this,b,mb(this)))});if("string"==typeof a&&a){b=a.match(K)||[];while(c=this[i++])if(e=mb(c),d=1===c.nodeType&&(" "+e+" ").replace(lb," ")){g=0;while(f=b[g++])d.indexOf(" "+f+" ")<0&&(d+=f+" ");h=r.trim(d),e!==h&&c.setAttribute("class",h)}}return this},removeClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).removeClass(a.call(this,b,mb(this)))});if(!arguments.length)return this.attr("class","");if("string"==typeof a&&a){b=a.match(K)||[];while(c=this[i++])if(e=mb(c),d=1===c.nodeType&&(" "+e+" ").replace(lb," ")){g=0;while(f=b[g++])while(d.indexOf(" "+f+" ")>-1)d=d.replace(" "+f+" "," ");h=r.trim(d),e!==h&&c.setAttribute("class",h)}}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):r.isFunction(a)?this.each(function(c){r(this).toggleClass(a.call(this,c,mb(this),b),b)}):this.each(function(){var b,d,e,f;if("string"===c){d=0,e=r(this),f=a.match(K)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else void 0!==a&&"boolean"!==c||(b=mb(this),b&&V.set(this,"__className__",b),this.setAttribute&&this.setAttribute("class",b||a===!1?"":V.get(this,"__className__")||""))})},hasClass:function(a){var b,c,d=0;b=" "+a+" ";while(c=this[d++])if(1===c.nodeType&&(" "+mb(c)+" ").replace(lb," ").indexOf(b)>-1)return!0;return!1}});var nb=/\r/g,ob=/[\x20\t\r\n\f]+/g;r.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=r.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,r(this).val()):a,null==e?e="":"number"==typeof e?e+="":r.isArray(e)&&(e=r.map(e,function(a){return null==a?"":a+""})),b=r.valHooks[this.type]||r.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=r.valHooks[e.type]||r.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(nb,""):null==c?"":c)}}}),r.extend({valHooks:{option:{get:function(a){var b=r.find.attr(a,"value");return null!=b?b:r.trim(r.text(a)).replace(ob," ")}},select:{get:function(a){for(var b,c,d=a.options,e=a.selectedIndex,f="select-one"===a.type,g=f?null:[],h=f?e+1:d.length,i=0>e?h:f?e:0;h>i;i++)if(c=d[i],(c.selected||i===e)&&!c.disabled&&(!c.parentNode.disabled||!r.nodeName(c.parentNode,"optgroup"))){if(b=r(c).val(),f)return b;g.push(b)}return g},set:function(a,b){var c,d,e=a.options,f=r.makeArray(b),g=e.length;while(g--)d=e[g],(d.selected=r.inArray(r.valHooks.option.get(d),f)>-1)&&(c=!0);return c||(a.selectedIndex=-1),f}}}}),r.each(["radio","checkbox"],function(){r.valHooks[this]={set:function(a,b){return r.isArray(b)?a.checked=r.inArray(r(a).val(),b)>-1:void 0}},o.checkOn||(r.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})});var pb=/^(?:focusinfocus|focusoutblur)$/;r.extend(r.event,{trigger:function(b,c,e,f){var g,h,i,j,k,m,n,o=[e||d],p=l.call(b,"type")?b.type:b,q=l.call(b,"namespace")?b.namespace.split("."):[];if(h=i=e=e||d,3!==e.nodeType&&8!==e.nodeType&&!pb.test(p+r.event.triggered)&&(p.indexOf(".")>-1&&(q=p.split("."),p=q.shift(),q.sort()),k=p.indexOf(":")<0&&"on"+p,b=b[r.expando]?b:new r.Event(p,"object"==typeof b&&b),b.isTrigger=f?2:3,b.namespace=q.join("."),b.rnamespace=b.namespace?new RegExp("(^|\\.)"+q.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=e),c=null==c?[b]:r.makeArray(c,[b]),n=r.event.special[p]||{},f||!n.trigger||n.trigger.apply(e,c)!==!1)){if(!f&&!n.noBubble&&!r.isWindow(e)){for(j=n.delegateType||p,pb.test(j+p)||(h=h.parentNode);h;h=h.parentNode)o.push(h),i=h;i===(e.ownerDocument||d)&&o.push(i.defaultView||i.parentWindow||a)}g=0;while((h=o[g++])&&!b.isPropagationStopped())b.type=g>1?j:n.bindType||p,m=(V.get(h,"events")||{})[b.type]&&V.get(h,"handle"),m&&m.apply(h,c),m=k&&h[k],m&&m.apply&&T(h)&&(b.result=m.apply(h,c),b.result===!1&&b.preventDefault());return b.type=p,f||b.isDefaultPrevented()||n._default&&n._default.apply(o.pop(),c)!==!1||!T(e)||k&&r.isFunction(e[p])&&!r.isWindow(e)&&(i=e[k],i&&(e[k]=null),r.event.triggered=p,e[p](),r.event.triggered=void 0,i&&(e[k]=i)),b.result}},simulate:function(a,b,c){var d=r.extend(new r.Event,c,{type:a,isSimulated:!0});r.event.trigger(d,null,b)}}),r.fn.extend({trigger:function(a,b){return this.each(function(){r.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];return c?r.event.trigger(a,b,c,!0):void 0}}),r.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(a,b){r.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),r.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),o.focusin="onfocusin"in a,o.focusin||r.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){r.event.simulate(b,a.target,r.event.fix(a))};r.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=V.access(d,b);e||d.addEventListener(a,c,!0),V.access(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=V.access(d,b)-1;e?V.access(d,b,e):(d.removeEventListener(a,c,!0),V.remove(d,b))}}});var qb=a.location,rb=r.now(),sb=/\?/;r.parseXML=function(b){var c;if(!b||"string"!=typeof b)return null;try{c=(new a.DOMParser).parseFromString(b,"text/xml")}catch(d){c=void 0}return c&&!c.getElementsByTagName("parsererror").length||r.error("Invalid XML: "+b),c};var tb=/\[\]$/,ub=/\r?\n/g,vb=/^(?:submit|button|image|reset|file)$/i,wb=/^(?:input|select|textarea|keygen)/i;function xb(a,b,c,d){var e;if(r.isArray(b))r.each(b,function(b,e){c||tb.test(a)?d(a,e):xb(a+"["+("object"==typeof e&&null!=e?b:"")+"]",e,c,d)});else if(c||"object"!==r.type(b))d(a,b);else for(e in b)xb(a+"["+e+"]",b[e],c,d)}r.param=function(a,b){var c,d=[],e=function(a,b){var c=r.isFunction(b)?b():b;d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(null==c?"":c)};if(r.isArray(a)||a.jquery&&!r.isPlainObject(a))r.each(a,function(){e(this.name,this.value)});else for(c in a)xb(c,a[c],b,e);return d.join("&")},r.fn.extend({serialize:function(){return r.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=r.prop(this,"elements");return a?r.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!r(this).is(":disabled")&&wb.test(this.nodeName)&&!vb.test(a)&&(this.checked||!ha.test(a))}).map(function(a,b){var c=r(this).val();return null==c?null:r.isArray(c)?r.map(c,function(a){return{name:b.name,value:a.replace(ub,"\r\n")}}):{name:b.name,value:c.replace(ub,"\r\n")}}).get()}});var yb=/%20/g,zb=/#.*$/,Ab=/([?&])_=[^&]*/,Bb=/^(.*?):[ \t]*([^\r\n]*)$/gm,Cb=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,Db=/^(?:GET|HEAD)$/,Eb=/^\/\//,Fb={},Gb={},Hb="*/".concat("*"),Ib=d.createElement("a");Ib.href=qb.href;function Jb(a){return function(b,c){"string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(K)||[];if(r.isFunction(c))while(d=f[e++])"+"===d[0]?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function Kb(a,b,c,d){var e={},f=a===Gb;function g(h){var i;return e[h]=!0,r.each(a[h]||[],function(a,h){var j=h(b,c,d);return"string"!=typeof j||f||e[j]?f?!(i=j):void 0:(b.dataTypes.unshift(j),g(j),!1)}),i}return g(b.dataTypes[0])||!e["*"]&&g("*")}function Lb(a,b){var c,d,e=r.ajaxSettings.flatOptions||{};for(c in b)void 0!==b[c]&&((e[c]?a:d||(d={}))[c]=b[c]);return d&&r.extend(!0,a,d),a}function Mb(a,b,c){var d,e,f,g,h=a.contents,i=a.dataTypes;while("*"===i[0])i.shift(),void 0===d&&(d=a.mimeType||b.getResponseHeader("Content-Type"));if(d)for(e in h)if(h[e]&&h[e].test(d)){i.unshift(e);break}if(i[0]in c)f=i[0];else{for(e in c){if(!i[0]||a.converters[e+" "+i[0]]){f=e;break}g||(g=e)}f=f||g}return f?(f!==i[0]&&i.unshift(f),c[f]):void 0}function Nb(a,b,c,d){var e,f,g,h,i,j={},k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];f=k.shift();while(f)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0]]||j["* "+h[0]])){g===!0?g=j[e]:j[e]!==!0&&(f=h[0],k.unshift(h[1]));break}if(g!==!0)if(g&&a["throws"])b=g(b);else try{b=g(b)}catch(l){return{state:"parsererror",error:g?l:"No conversion from "+i+" to "+f}}}return{state:"success",data:b}}r.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:qb.href,type:"GET",isLocal:Cb.test(qb.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Hb,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":r.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(a,b){return b?Lb(Lb(a,r.ajaxSettings),b):Lb(r.ajaxSettings,a)},ajaxPrefilter:Jb(Fb),ajaxTransport:Jb(Gb),ajax:function(b,c){"object"==typeof b&&(c=b,b=void 0),c=c||{};var e,f,g,h,i,j,k,l,m,n,o=r.ajaxSetup({},c),p=o.context||o,q=o.context&&(p.nodeType||p.jquery)?r(p):r.event,s=r.Deferred(),t=r.Callbacks("once memory"),u=o.statusCode||{},v={},w={},x="canceled",y={readyState:0,getResponseHeader:function(a){var b;if(k){if(!h){h={};while(b=Bb.exec(g))h[b[1].toLowerCase()]=b[2]}b=h[a.toLowerCase()]}return null==b?null:b},getAllResponseHeaders:function(){return k?g:null},setRequestHeader:function(a,b){return null==k&&(a=w[a.toLowerCase()]=w[a.toLowerCase()]||a,v[a]=b),this},overrideMimeType:function(a){return null==k&&(o.mimeType=a),this},statusCode:function(a){var b;if(a)if(k)y.always(a[y.status]);else for(b in a)u[b]=[u[b],a[b]];return this},abort:function(a){var b=a||x;return e&&e.abort(b),A(0,b),this}};if(s.promise(y),o.url=((b||o.url||qb.href)+"").replace(Eb,qb.protocol+"//"),o.type=c.method||c.type||o.method||o.type,o.dataTypes=(o.dataType||"*").toLowerCase().match(K)||[""],null==o.crossDomain){j=d.createElement("a");try{j.href=o.url,j.href=j.href,o.crossDomain=Ib.protocol+"//"+Ib.host!=j.protocol+"//"+j.host}catch(z){o.crossDomain=!0}}if(o.data&&o.processData&&"string"!=typeof o.data&&(o.data=r.param(o.data,o.traditional)),Kb(Fb,o,c,y),k)return y;l=r.event&&o.global,l&&0===r.active++&&r.event.trigger("ajaxStart"),o.type=o.type.toUpperCase(),o.hasContent=!Db.test(o.type),f=o.url.replace(zb,""),o.hasContent?o.data&&o.processData&&0===(o.contentType||"").indexOf("application/x-www-form-urlencoded")&&(o.data=o.data.replace(yb,"+")):(n=o.url.slice(f.length),o.data&&(f+=(sb.test(f)?"&":"?")+o.data,delete o.data),o.cache===!1&&(f=f.replace(Ab,""),n=(sb.test(f)?"&":"?")+"_="+rb++ +n),o.url=f+n),o.ifModified&&(r.lastModified[f]&&y.setRequestHeader("If-Modified-Since",r.lastModified[f]),r.etag[f]&&y.setRequestHeader("If-None-Match",r.etag[f])),(o.data&&o.hasContent&&o.contentType!==!1||c.contentType)&&y.setRequestHeader("Content-Type",o.contentType),y.setRequestHeader("Accept",o.dataTypes[0]&&o.accepts[o.dataTypes[0]]?o.accepts[o.dataTypes[0]]+("*"!==o.dataTypes[0]?", "+Hb+"; q=0.01":""):o.accepts["*"]);for(m in o.headers)y.setRequestHeader(m,o.headers[m]);if(o.beforeSend&&(o.beforeSend.call(p,y,o)===!1||k))return y.abort();if(x="abort",t.add(o.complete),y.done(o.success),y.fail(o.error),e=Kb(Gb,o,c,y)){if(y.readyState=1,l&&q.trigger("ajaxSend",[y,o]),k)return y;o.async&&o.timeout>0&&(i=a.setTimeout(function(){y.abort("timeout")},o.timeout));try{k=!1,e.send(v,A)}catch(z){if(k)throw z;A(-1,z)}}else A(-1,"No Transport");function A(b,c,d,h){var j,m,n,v,w,x=c;k||(k=!0,i&&a.clearTimeout(i),e=void 0,g=h||"",y.readyState=b>0?4:0,j=b>=200&&300>b||304===b,d&&(v=Mb(o,y,d)),v=Nb(o,v,y,j),j?(o.ifModified&&(w=y.getResponseHeader("Last-Modified"),w&&(r.lastModified[f]=w),w=y.getResponseHeader("etag"),w&&(r.etag[f]=w)),204===b||"HEAD"===o.type?x="nocontent":304===b?x="notmodified":(x=v.state,m=v.data,n=v.error,j=!n)):(n=x,!b&&x||(x="error",0>b&&(b=0))),y.status=b,y.statusText=(c||x)+"",j?s.resolveWith(p,[m,x,y]):s.rejectWith(p,[y,x,n]),y.statusCode(u),u=void 0,l&&q.trigger(j?"ajaxSuccess":"ajaxError",[y,o,j?m:n]),t.fireWith(p,[y,x]),l&&(q.trigger("ajaxComplete",[y,o]),--r.active||r.event.trigger("ajaxStop")))}return y},getJSON:function(a,b,c){return r.get(a,b,c,"json")},getScript:function(a,b){return r.get(a,void 0,b,"script")}}),r.each(["get","post"],function(a,b){r[b]=function(a,c,d,e){return r.isFunction(c)&&(e=e||d,d=c,c=void 0),r.ajax(r.extend({url:a,type:b,dataType:e,data:c,success:d},r.isPlainObject(a)&&a))}}),r._evalUrl=function(a){return r.ajax({url:a,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,"throws":!0})},r.fn.extend({wrapAll:function(a){var b;return this[0]&&(r.isFunction(a)&&(a=a.call(this[0])),b=r(a,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstElementChild)a=a.firstElementChild;return a}).append(this)),this},wrapInner:function(a){return r.isFunction(a)?this.each(function(b){r(this).wrapInner(a.call(this,b))}):this.each(function(){var b=r(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=r.isFunction(a);return this.each(function(c){r(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(a){return this.parent(a).not("body").each(function(){r(this).replaceWith(this.childNodes)}),this}}),r.expr.pseudos.hidden=function(a){return!r.expr.pseudos.visible(a)},r.expr.pseudos.visible=function(a){return!!(a.offsetWidth||a.offsetHeight||a.getClientRects().length)},r.ajaxSettings.xhr=function(){try{return new a.XMLHttpRequest}catch(b){}};var Ob={0:200,1223:204},Pb=r.ajaxSettings.xhr();o.cors=!!Pb&&"withCredentials"in Pb,o.ajax=Pb=!!Pb,r.ajaxTransport(function(b){var c,d;return o.cors||Pb&&!b.crossDomain?{send:function(e,f){var g,h=b.xhr();if(h.open(b.type,b.url,b.async,b.username,b.password),b.xhrFields)for(g in b.xhrFields)h[g]=b.xhrFields[g];b.mimeType&&h.overrideMimeType&&h.overrideMimeType(b.mimeType),b.crossDomain||e["X-Requested-With"]||(e["X-Requested-With"]="XMLHttpRequest");for(g in e)h.setRequestHeader(g,e[g]);c=function(a){return function(){c&&(c=d=h.onload=h.onerror=h.onabort=h.onreadystatechange=null,"abort"===a?h.abort():"error"===a?"number"!=typeof h.status?f(0,"error"):f(h.status,h.statusText):f(Ob[h.status]||h.status,h.statusText,"text"!==(h.responseType||"text")||"string"!=typeof h.responseText?{binary:h.response}:{text:h.responseText},h.getAllResponseHeaders()))}},h.onload=c(),d=h.onerror=c("error"),void 0!==h.onabort?h.onabort=d:h.onreadystatechange=function(){4===h.readyState&&a.setTimeout(function(){c&&d()})},c=c("abort");try{h.send(b.hasContent&&b.data||null)}catch(i){if(c)throw i}},abort:function(){c&&c()}}:void 0}),r.ajaxPrefilter(function(a){a.crossDomain&&(a.contents.script=!1)}),r.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(a){return r.globalEval(a),a}}}),r.ajaxPrefilter("script",function(a){void 0===a.cache&&(a.cache=!1),a.crossDomain&&(a.type="GET")}),r.ajaxTransport("script",function(a){if(a.crossDomain){var b,c;return{send:function(e,f){b=r(" + + + + + + diff --git a/action-button-with-checkbox-trick-no-js/less/style.less b/action-button-with-checkbox-trick-no-js/less/style.less new file mode 100644 index 00000000..5b5a3264 --- /dev/null +++ b/action-button-with-checkbox-trick-no-js/less/style.less @@ -0,0 +1,625 @@ +@import 'https://fonts.googleapis.com/css?family=Roboto:400,900'; +body { font-family: 'Roboto', sans-serif; font-size: 62.5%; } + + +//VARIBLES ---------------------------------------------------------------------- +@col__black: #160128; +@col__grey: #747474; +@col__white: #FFF; +@col__lightblu: #5873fe; +@col__purple: #871cde; +@col__darkblu: #192541; +@col__yellow: #ecc54d; + + +//USEFUL LESS MIXIN ------------------------------------------------------------- +.u-box-sizing (@type: border-box) { + -webkit-box-sizing: @type; + -moz-box-sizing: @type; + box-sizing: @type; +} +.u-gradient (@startColor: @col__black, @endColor: @col__white) { + background-color: @startColor; + background: -webkit-gradient(linear, left top, right bottom, from(@startColor), to(@endColor)); + background: -moz-linear-gradient(top, @startColor, @endColor); +} +.u-border-radius (@radius: 5px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} +.u-box-shadow (@string) { + -webkit-box-shadow: @string; + -moz-box-shadow: @string; + box-shadow: @string; +} +.u-inner-shadow (@x: 0, @y: 1px, @blur: 2px, @alpha: 0.25) { + -webkit-box-shadow: inset @x @y @blur rgba(255, 255, 255, @alpha); + -moz-box-shadow: inset @x @y @blur rgba(255, 255, 255, @alpha); + box-shadow: inset @x @y @blur rgba(255, 255, 255, @alpha); +} +.u-horizontal-center (@mleft) { + left : 50%; + margin-left: @mleft; +} +.u-transform (@handler) { + transform : @handler; + -webkit-transform: @handler; +} +.u-border (@border_size: 1px, @border_color: @col__white) { + border: solid @border_size @border_color; + -moz-border: solid @border_size @border_color; + -webkit-border: solid @border_size @border_color; +} + + +//RESET ------------------------------------------------------------------------ +body { background: darken(desaturate(@col__purple, 40%), 30%); } +input { display: none; } //important for hide the input checkbox +ul { padding: 0; } +li { list-style-type: none; } + + +//CONTAINER MOBILE VIEW --------------------------------------------------------- +.c-mobile-view { + position: relative; + margin: 120px auto 0; + width: 320px; + height: 568px; + background: url('https://dl.dropboxusercontent.com/u/11581980/__/mobile-codepen.jpg'); + background-position: bottom; + background-size: cover; + .u-animation-fadein (@duration: .5s, @delay: .1s,); + .u-box-shadow (0 0 60px rgba(0,0,0,.6);); + .u-border-radius (@radius: 30px); + &:before { + position: absolute; + content: ''; + display: block; + top: 0; + width: 100%; + height: 100%; + .u-inner-shadow (@x: 0, @y: -1px, @blur: 3px, @alpha: 0.2); + .u-border-radius (@radius: 30px); + .u-box-sizing (@type: border-box); + } +} +.c-mobile-view__inner { + overflow: hidden; + width: 100%; + height: 100%; + .u-border-radius (@radius: 30px); +} + + +//PIN ------------------------------------------------------------------------ +.c-pin { + position: absolute; + width: 36px; + height: 36px; + top: 120px; + left: 160px; + z-index: -1; + .u-border-radius (@radius: 50%); + .u-border (4px, @col__lightblu); + .u-animation-infinite (@duration: 1.5s); +} + + +//BUTTON ------------------------------------------------------------------------ +.c-button { + cursor: pointer; + font-size: 1.2em; +} +.c-mobile__button { + position: absolute; + width: 68px; + height: 68px; + bottom: -26px; + line-height: 60px; + text-align: center; + z-index: 2; + color: @col__white; + border: solid 6px rgba(255,255,255,.2); + .u-animation-fadein (@duration: .5s, @delay: .4s,); + .u-gradient (@startColor: @col__lightblu, @endColor: @col__purple); + .u-box-shadow (0 0 10px darken(@col__white, 75%)); + .u-horizontal-center (@mleft: -34px); + .u-border-radius (@radius: 50%); + .u-box-sizing (@type: border-box); + .u-trans(@duration: 0.4s); + &:hover { + width: 80px; + height: 80px; + line-height: 77px; + bottom: -26px; + border: solid 4px rgba(255,255,255,.2); + .u-horizontal-center (@mleft: -40px); + } + .c-mobile__button__plus { + .u-trans(); + } +} + +input[name=u-mobile__button]:checked ~ .c-mobile__button .c-mobile__button__plus { + .u-transform(@handler: rotate(45deg)); + .u-trans(@duration:.6s); +} + + +//TOPBAR ------------------------------------------------------------------------ +.c-mobile__topbar { + position: relative; + overflow: hidden; + width: 100%; + height: 10%; + .u-trans(); + .u-border-radius (@radius: 0 0 0 100%); + .u-gradient (@startColor: @col__lightblu, @endColor: @col__purple); + & a { + text-decoration: none; + color: @col__white; + letter-spacing: 3px; + font-size: 1.4em; + z-index: 1; + .u-trans(); + &:hover { .u-trans(); color: @col__yellow; } + } + & ul { text-align: right; padding-top: 40px; } + & li { margin: 30px 30px 40px 0; } +} + +//EXPAND TOPBAR ON MENU CLICK +input[name=u-topbar__button]:checked ~ .c-mobile-view__inner .c-mobile__topbar { + height: 50%; + .u-trans(@duration:.6s); +} + + +//ANCHOR HOVER EFFCET ------------------------------------------------------------------- +.u-link__effect { + position: relative; + &:after { + position: absolute; + content: ''; + display: block; + right: 0; + width: 0; + bottom: -4px; + height: 2px; + background: @col__yellow; + .u-trans(@duration: 0.4s); + } + &:hover:after { + width: 100%; + .u-trans(); + } +} + + +//TOPBAR BUTTON ---------------------------------------------------------------- +.c-topbar__button--menu { + position: absolute; + right: 32px; + top: 32px; + z-index: 1; + color: @col__white; + .u-transform (scale(1)); + .u-trans(); +} + +.c-topbar__button--close { + position: absolute; + right: 32px; + top: 32px; + z-index: 1; + cursor: pointer; + color: @col__white; + .u-transform (scale(0)); + .u-trans(); +} + +//HIDE/SHOW MENU BUTTON ON CLICK +input[name=u-topbar__button]:checked ~ .c-mobile-view__inner .c-topbar__button--menu { + .u-transform (scale(0)); + .u-trans(@duration:.6s); +} + +//SHOW/HIDE CLOSE BUTTON ON CLICK +input[name=u-topbar__button]:checked ~ .c-mobile-view__inner .c-topbar__button--close { + .u-transform (scale(1)); + .u-trans(@duration:.6s); +} + + +//SWITCHER CARDS BUTTON ---------------------------------------------------------------- +.c-switcher__button { + position: absolute; + left: 20px; + bottom: 20px; + color: @col__white; +} + +.c-switcher__button--cards { + .u-transform (rotate(0)); + .u-trans(@duration:.6s); +} + +//ROTATE SWITCHER BUTTON ON CLICK +input[name=u-cards-switcher__button]:checked ~ .c-switcher__button .c-switcher__button--cards { + .u-transform (rotate(180deg)); + .u-trans(@duration:.6s); +} + +//SWITCH CARDS ON CLICK +input[name=u-cards-switcher__button]:checked ~ .c-mobile-view__inner .c-card--back { + z-index: 1; + opacity: 1; + bottom: 60px; + .u-trans(@duration:.6s); + .u-transform (scale(1)); +} + +input[name=u-cards-switcher__button]:checked ~ .c-mobile-view__inner .c-card--front { + z-index: 0; + opacity: .7; + bottom: 30px; + .u-trans(@duration:.6s); + .u-transform (scale(0.9)); +} + +//HIDE CARDS ON CLICK +.c-hide__button, .c-show__button { + position: absolute; + right: 20px; + bottom: 20px; + color: @col__white; +} + +.c-show__button--cards { + .u-transform (scale(1)); + .u-trans(@duration:.6s); +} +.c-hide__button--cards { + .u-transform (scale(0)); + .u-trans(@duration:.6s); +} + + +//HIDE/SHOW EYE BUTTON ON CLICK +input[name=u-cards-hide__button]:checked ~ .c-show__button .c-show__button--cards { + .u-transform (scale(0)); + .u-trans(@duration:.6s); +} + +//SHOW/HIDE EYE SLASH BUTTON ON CLICK +input[name=u-cards-hide__button]:checked ~ .c-hide__button .c-hide__button--cards { + .u-transform (scale(1)); + .u-trans(@duration:.6s); +} + +//HIDE/SHOW CARDS ON CLICK +input[name=u-cards-hide__button]:checked ~ .c-mobile-view__inner .c-card { + opacity: 0; + .u-trans(@duration:.6s); +} + + +// CARDS ------------------------------------------------------------------------ +.cards__inner { + position: relative; +} + +.c-card { + position: absolute; + bottom: 60px; + width: ~"calc(100% - 40px)"; //for use calc on LESS, close value inside ~"" + margin: 0 20px; + overflow: hidden; + opacity: 1; + .u-trans(@duration:.8s); + .u-box-shadow (0 0 10px 0 fade(@col__black, 90)); + .u-border-radius (@radius: 20px); +} + +.c-card--back { + bottom: 30px; + opacity: 0.7; + .u-transform (scale(0.9)); + .c-card__details__bottom { background: @col__purple; } + .c-card__details__top { + h1 { color: @col__purple; } + } +} + +.c-card__details { + position: relative; + height: 150px; +} + +.c-card__details__top { + .u-box-sizing; + position: absolute; + height: 110px; + top: 0; + width: 100%; + padding: 20px; + background: @col__black; + .u-border-radius (@radius: 20px 20px 0 0); + h1 { font-size: 1.6em; color: @col__lightblu; font-size: 1.6em; margin: 0; } + p { color: @col__white; font-size: 1.1em; margin: 6px 0; } + p:last-child { color: @col__grey; font-size: 1em; margin: 14px 0; } +} + +.c-card__details__bottom { + position: absolute; + height: 40px; + width: 100%; + bottom: 0; + text-align: center; + line-height: 40px; + font-size: 1.6em; + font-weight: 900; + background: fade(@col__lightblu, 80%); + .u-border-radius (@radius: 0 0 20px 20px); + & span { font-size: 0.7em; padding-left: 6px; } +} + + +// OVERLAY ---------------------------------------------------------------------- +.c-overlay { + position: absolute; + top: 0; + width: 100%; + height: 100%; + background: fade(@col__black, 80%); + opacity: 0; + .u-border-radius (@radius: 30px); + .u-trans(@duration:.4s, @easing: ease-in-out) +} + +//SHOW BLACK OVERLAY ON + CLICK +input[name=u-mobile__button]:checked ~ .c-overlay { + opacity: 1; + z-index: 1; + .u-trans(@easing: ease-in-out); +} + + +//OVERLAY INNER BUTTONS ------------------------------------------------------------------ +.c-overlay__inner { + position: relative; + width: 100%; + height: 100%; +} + +.c-overlay-inner__button { + position: absolute; + left: ~"calc(50% - 30px)"; + width: 60px; + height: 60px; + text-align: center; + line-height: 60px; + background: @col__white; + color: @col__purple; + .u-border-radius (@radius: 50%); + .u-transform (scale(0)); + &:hover { + color: @col__yellow; + .u-trans(); + } + &.button__1 { + transition-delay: .1s; + -webkit-transition-delay: .1s; + -moz-transition-delay: .1s; + bottom: 80px; + } + &.button__2 { + transition-delay: .2s; + -webkit-transition-delay: .2s; + -moz-transition-delay: .2s; + bottom: 160px; + } +} + +//SHOW BUTTONS INSIDE OVERLAY ON CLICK +input[name=u-mobile__button]:checked ~ .c-overlay .c-overlay-inner__button { + z-index: 1; + .u-transform (scale(1)); + .u-trans(@duration: .6s); +} + +// INSTRUCTION ----------------------------------------------------- +.c-bubble__info { + position: absolute; + width: 100px; + height: 100px; + background: @col__white; + margin: 20px; + .u-border-radius (@radius: 50%); + + &.c-bubble--plus { + left: ~"calc(50% - 70px)"; + bottom: -160px; + .u-transform (scale(0)); + .u-trans(@duration: .4s, @delay: 0); + } + &.c-bubble--switch { + left: -45px; + .u-transform (scale(0)); + .u-trans(@duration: .4s, @delay: 0); + } + &.c-bubble--hide { + right: -45px; + .u-transform (scale(0)); + .u-trans(@duration: .4s, @delay: 0); + } + &.c-bubble--menu { + right: -130px; + top: -30px; + .u-transform (scale(0)); + .u-trans(@duration: .4s, @delay: 0); + } +} + +//SHOW/HIDE INSTRUCTION BUBBLE +input[name=u-instruction__button]:checked + label ~ .c-mobile-view .c-bubble--menu { + .u-transform (scale(1)); + .u-trans (@duration: .4s, @delay: 0s); +} +input[name=u-instruction__button]:checked + label ~ .c-mobile-view .c-bubble--plus { + .u-transform (scale(1)); + .u-trans (@duration: .4s, @delay: .5s); +} +input[name=u-instruction__button]:checked + label ~ .c-mobile-view .c-bubble--switch { + .u-transform (scale(1)); + .u-trans (@duration: .4, @delay: 1s); +} +input[name=u-instruction__button]:checked + label ~ .c-mobile-view .c-bubble--hide { + .u-transform (scale(1)); + .u-trans (@duration: .4s, @delay: 1.5s); +} + +// BUBBLE INNER CONTAINER ------------------------------------------------------ +.c-bubble__inner { + position: relative; + width: 100px; + height: 100px; + text-align: center; + &:before { + content: ''; + display: block; + position: absolute; + width: 30px; + height: 30px; + z-index: -1; + background: @col__white; + .u-horizontal-center (-15px); + .u-transform (rotate(45deg)); + } + span { + display: block; + font-size: 2.4em; + padding-top: 26px; + font-weight: 900; + } + span:last-child { font-size: 1.2em; padding-top: 0; font-weight: 400; + } +} + +.c-bubble__info.c-bubble--menu .c-bubble__inner:before { + left: 0px; + top: 35px; + margin-left: 0; +} + +// INSTRUCTION BUTTON ----------------------------------------------------------- +.c-instruction__button { + position: fixed; + bottom: 20px; + left: 20px; + width: 80px; + height: 40px; + background: @col__white; + overflow: hidden; + .u-border-radius (@radius: 3px); +} + +.c-button__instruction__toggle { + position: absolute; + left: 0; + width: 40px; + height: 40px; + background: @col__purple; + .u-box-sizing; + .u-trans (@duration: .2s, @easing: ease-in-out); + .u-border-radius (@radius: 4px); + .u-border (@border_size: 2px, @border_color: @col__white) +} + +.c-button__off { + position: absolute; + line-height: 40px; + width: 40px; + text-align: center; + color: @col__grey; +} +.c-button__on { + .c-button__off; + right: 0; +} + +input[name=u-instruction__button]:checked + label .c-button__instruction__toggle { + left: 40px; + background: @col__lightblu; + .u-trans (@duration: .2s, @easing: ease-in-out); +} + +.c-instruction__text { + position: fixed; + bottom: 15px; + left: 120px; + width: 260px; + font-size: 1.4em; + line-height: 1.8em; + color: @col__lightblu; +} + + +// TRANSITIONS + ANIMATIONS ----------------------------------------------------- +.u-trans(@property : all, @duration: 0.3s, @easing : cubic-bezier(0.68, -0.55, 0.265, 1.55), @delay : 0 ) { + transition-property: @property; + transition-duration: @duration; + transition-timing-function: @easing; + transition-delay: @delay; + -webkit-transition-property: @property; + -webkit-transition-duration: @duration; + -webkit-transition-timing-function: @easing; + -webkit-transition-delay: @delay; +} +@keyframes animation-fadein { + from { transform: scale(0); opacity: 0; } + to { transform: scale(1); opacity: 1; } +} +@-webkit-keyframes animation-fadein { + from { -webkit-transform: scale(0); opacity: 0; } + to { -webkit-transform: scale(1); opacity: 1; } +} + +.u-animation-fadein (@duration: 1s, @delay: 1s,) { + opacity : 0; + animation-name : animation-fadein; + animation-duration : @duration; + animation-delay : @delay; + animation-fill-mode : forwards; + animation-timing-function : cubic-bezier(0.68, -0.55, 0.265, 1.55); + -webkit-animation-name : animation-fadein; + -webkit-animation-duration : @duration; + -webkit-animation-delay : @delay; + -webkit-animation-fill-mode: forwards; + -webkit-animation-timing-function : cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +@keyframes animation-fadein-infinite { + from { transform: scale(0); opacity: 1; } + to { transform: scale(1); opacity: 0; } +} +@-webkit-keyframes animation-fadein-infinite { + from { -webkit-transform: scale(0); opacity: 1; } + to { -webkit-transform: scale(1); opacity: 0; } +} + +.u-animation-infinite (@duration: 1.5s) { + opacity : 0; + animation-name : animation-fadein-infinite; + animation-duration : @duration; + animation-timing-function : easy-in-out; + animation-iteration-count : infinite; + -webkit-animation-name : animation-fadein-infinite; + -webkit-animation-duration : @duration; + -webkit-animation-timing-function: easy-in-out; + -webkit-animation-iteration-count: infinite; +} \ No newline at end of file diff --git a/action-button-with-checkbox-trick-no-js/license.md b/action-button-with-checkbox-trick-no-js/license.md new file mode 100644 index 00000000..cd871253 --- /dev/null +++ b/action-button-with-checkbox-trick-no-js/license.md @@ -0,0 +1,10 @@ + + diff --git a/adjustment-loaders/README.md b/adjustment-loaders/README.md new file mode 100644 index 00000000..60f3de4a --- /dev/null +++ b/adjustment-loaders/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/mrspok407/pen/Gqbmow. + + Based on dribbble shot by Harika Deng https://dribbble.com/shots/2906732-Loading-Gif \ No newline at end of file diff --git a/adjustment-loaders/config.rb b/adjustment-loaders/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/adjustment-loaders/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/adjustment-loaders/css/style.css b/adjustment-loaders/css/style.css new file mode 100644 index 00000000..c6b84cfc --- /dev/null +++ b/adjustment-loaders/css/style.css @@ -0,0 +1,1976 @@ +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +body { + height: 100vh; + background-color: #EE5555; + overflow: hidden; +} + +.cont { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 100vh; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.box { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + position: relative; + -webkit-box-flex: 0; + -webkit-flex: 0 0 calc(100% / 3); + -ms-flex: 0 0 calc(100% / 3); + flex: 0 0 calc(100% / 3); +} + +.dot { + position: absolute; + -webkit-transform-origin: left center; + transform-origin: left center; +} +.dot:after { + content: ''; + position: absolute; + right: 0; + top: 0; + width: 20px; + height: 20px; + background-color: #fff; + border-radius: 50%; +} + +.box:nth-child(1) .dot:nth-child(1) { + -webkit-transform: rotate(22.5deg); + transform: rotate(22.5deg); +} +.box:nth-child(1) .dot:nth-child(1):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +@-webkit-keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(2) { + width: 65px; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +.box:nth-child(1) .dot:nth-child(2):after { + width: 20px; + height: 20px; + height: 40px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.09375s; + animation-delay: 0.09375s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(3) { + -webkit-transform: rotate(67.5deg); + transform: rotate(67.5deg); +} +.box:nth-child(1) .dot:nth-child(3):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.1875s; + animation-delay: 0.1875s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(4) { + width: 65px; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} +.box:nth-child(1) .dot:nth-child(4):after { + width: 20px; + height: 20px; + height: 40px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.28125s; + animation-delay: 0.28125s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(5) { + -webkit-transform: rotate(112.5deg); + transform: rotate(112.5deg); +} +.box:nth-child(1) .dot:nth-child(5):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.375s; + animation-delay: 0.375s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(6) { + width: 65px; + -webkit-transform: rotate(135deg); + transform: rotate(135deg); +} +.box:nth-child(1) .dot:nth-child(6):after { + width: 20px; + height: 20px; + height: 40px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.46875s; + animation-delay: 0.46875s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(7) { + -webkit-transform: rotate(157.5deg); + transform: rotate(157.5deg); +} +.box:nth-child(1) .dot:nth-child(7):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.5625s; + animation-delay: 0.5625s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(8) { + width: 65px; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +.box:nth-child(1) .dot:nth-child(8):after { + width: 20px; + height: 20px; + height: 40px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.65625s; + animation-delay: 0.65625s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(9) { + -webkit-transform: rotate(202.5deg); + transform: rotate(202.5deg); +} +.box:nth-child(1) .dot:nth-child(9):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.75s; + animation-delay: 0.75s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(10) { + width: 65px; + -webkit-transform: rotate(225deg); + transform: rotate(225deg); +} +.box:nth-child(1) .dot:nth-child(10):after { + width: 20px; + height: 20px; + height: 40px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.84375s; + animation-delay: 0.84375s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(11) { + -webkit-transform: rotate(247.5deg); + transform: rotate(247.5deg); +} +.box:nth-child(1) .dot:nth-child(11):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.9375s; + animation-delay: 0.9375s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(12) { + width: 65px; + -webkit-transform: rotate(270deg); + transform: rotate(270deg); +} +.box:nth-child(1) .dot:nth-child(12):after { + width: 20px; + height: 20px; + height: 40px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.03125s; + animation-delay: 1.03125s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(13) { + -webkit-transform: rotate(292.5deg); + transform: rotate(292.5deg); +} +.box:nth-child(1) .dot:nth-child(13):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.125s; + animation-delay: 1.125s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(14) { + width: 65px; + -webkit-transform: rotate(315deg); + transform: rotate(315deg); +} +.box:nth-child(1) .dot:nth-child(14):after { + width: 20px; + height: 20px; + height: 40px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.21875s; + animation-delay: 1.21875s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(15) { + -webkit-transform: rotate(337.5deg); + transform: rotate(337.5deg); +} +.box:nth-child(1) .dot:nth-child(15):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.3125s; + animation-delay: 1.3125s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(1) .dot:nth-child(16) { + width: 65px; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); +} +.box:nth-child(1) .dot:nth-child(16):after { + width: 20px; + height: 20px; + height: 40px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.40625s; + animation-delay: 1.40625s; +} +@keyframes load { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 90% { + -webkit-transform: scale(0.25); + transform: scale(0.25); + opacity: 0.25; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.box:nth-child(2) .dot:nth-child(1) { + width: 65px; + -webkit-transform: rotate(15deg); + transform: rotate(15deg); +} +.box:nth-child(2) .dot:nth-child(1):after { + width: 10px; + width: 35px; + height: 10px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +.box:nth-child(2) .dot:nth-child(2) { + width: 65px; + width: 25px; + -webkit-transform: rotate(30deg); + transform: rotate(30deg); +} +.box:nth-child(2) .dot:nth-child(2):after { + width: 10px; + height: 10px; + height: 20px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.04167s; + animation-delay: 0.04167s; +} +.box:nth-child(2) .dot:nth-child(3) { + width: 65px; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +.box:nth-child(2) .dot:nth-child(3):after { + width: 10px; + width: 35px; + height: 10px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.08333s; + animation-delay: 0.08333s; +} +.box:nth-child(2) .dot:nth-child(4) { + width: 65px; + width: 25px; + -webkit-transform: rotate(60deg); + transform: rotate(60deg); +} +.box:nth-child(2) .dot:nth-child(4):after { + width: 10px; + height: 10px; + height: 20px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.125s; + animation-delay: 0.125s; +} +.box:nth-child(2) .dot:nth-child(5) { + width: 65px; + -webkit-transform: rotate(75deg); + transform: rotate(75deg); +} +.box:nth-child(2) .dot:nth-child(5):after { + width: 10px; + width: 35px; + height: 10px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.16667s; + animation-delay: 0.16667s; +} +.box:nth-child(2) .dot:nth-child(6) { + width: 65px; + width: 25px; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} +.box:nth-child(2) .dot:nth-child(6):after { + width: 10px; + height: 10px; + height: 20px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.20833s; + animation-delay: 0.20833s; +} +.box:nth-child(2) .dot:nth-child(7) { + width: 65px; + -webkit-transform: rotate(105deg); + transform: rotate(105deg); +} +.box:nth-child(2) .dot:nth-child(7):after { + width: 10px; + width: 35px; + height: 10px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; +} +.box:nth-child(2) .dot:nth-child(8) { + width: 65px; + width: 25px; + -webkit-transform: rotate(120deg); + transform: rotate(120deg); +} +.box:nth-child(2) .dot:nth-child(8):after { + width: 10px; + height: 10px; + height: 20px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.29167s; + animation-delay: 0.29167s; +} +.box:nth-child(2) .dot:nth-child(9) { + width: 65px; + -webkit-transform: rotate(135deg); + transform: rotate(135deg); +} +.box:nth-child(2) .dot:nth-child(9):after { + width: 10px; + width: 35px; + height: 10px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.33333s; + animation-delay: 0.33333s; +} +.box:nth-child(2) .dot:nth-child(10) { + width: 65px; + width: 25px; + -webkit-transform: rotate(150deg); + transform: rotate(150deg); +} +.box:nth-child(2) .dot:nth-child(10):after { + width: 10px; + height: 10px; + height: 20px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.375s; + animation-delay: 0.375s; +} +.box:nth-child(2) .dot:nth-child(11) { + width: 65px; + -webkit-transform: rotate(165deg); + transform: rotate(165deg); +} +.box:nth-child(2) .dot:nth-child(11):after { + width: 10px; + width: 35px; + height: 10px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.41667s; + animation-delay: 0.41667s; +} +.box:nth-child(2) .dot:nth-child(12) { + width: 65px; + width: 25px; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +.box:nth-child(2) .dot:nth-child(12):after { + width: 10px; + height: 10px; + height: 20px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.45833s; + animation-delay: 0.45833s; +} +.box:nth-child(2) .dot:nth-child(13) { + width: 65px; + -webkit-transform: rotate(195deg); + transform: rotate(195deg); +} +.box:nth-child(2) .dot:nth-child(13):after { + width: 10px; + width: 35px; + height: 10px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; +} +.box:nth-child(2) .dot:nth-child(14) { + width: 65px; + width: 25px; + -webkit-transform: rotate(210deg); + transform: rotate(210deg); +} +.box:nth-child(2) .dot:nth-child(14):after { + width: 10px; + height: 10px; + height: 20px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.54167s; + animation-delay: 0.54167s; +} +.box:nth-child(2) .dot:nth-child(15) { + width: 65px; + -webkit-transform: rotate(225deg); + transform: rotate(225deg); +} +.box:nth-child(2) .dot:nth-child(15):after { + width: 10px; + width: 35px; + height: 10px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.58333s; + animation-delay: 0.58333s; +} +.box:nth-child(2) .dot:nth-child(16) { + width: 65px; + width: 25px; + -webkit-transform: rotate(240deg); + transform: rotate(240deg); +} +.box:nth-child(2) .dot:nth-child(16):after { + width: 10px; + height: 10px; + height: 20px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.625s; + animation-delay: 0.625s; +} +.box:nth-child(2) .dot:nth-child(17) { + width: 65px; + -webkit-transform: rotate(255deg); + transform: rotate(255deg); +} +.box:nth-child(2) .dot:nth-child(17):after { + width: 10px; + width: 35px; + height: 10px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.66667s; + animation-delay: 0.66667s; +} +.box:nth-child(2) .dot:nth-child(18) { + width: 65px; + width: 25px; + -webkit-transform: rotate(270deg); + transform: rotate(270deg); +} +.box:nth-child(2) .dot:nth-child(18):after { + width: 10px; + height: 10px; + height: 20px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.70833s; + animation-delay: 0.70833s; +} +.box:nth-child(2) .dot:nth-child(19) { + width: 65px; + -webkit-transform: rotate(285deg); + transform: rotate(285deg); +} +.box:nth-child(2) .dot:nth-child(19):after { + width: 10px; + width: 35px; + height: 10px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.75s; + animation-delay: 0.75s; +} +.box:nth-child(2) .dot:nth-child(20) { + width: 65px; + width: 25px; + -webkit-transform: rotate(300deg); + transform: rotate(300deg); +} +.box:nth-child(2) .dot:nth-child(20):after { + width: 10px; + height: 10px; + height: 20px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.79167s; + animation-delay: 0.79167s; +} +.box:nth-child(2) .dot:nth-child(21) { + width: 65px; + -webkit-transform: rotate(315deg); + transform: rotate(315deg); +} +.box:nth-child(2) .dot:nth-child(21):after { + width: 10px; + width: 35px; + height: 10px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.83333s; + animation-delay: 0.83333s; +} +.box:nth-child(2) .dot:nth-child(22) { + width: 65px; + width: 25px; + -webkit-transform: rotate(330deg); + transform: rotate(330deg); +} +.box:nth-child(2) .dot:nth-child(22):after { + width: 10px; + height: 10px; + height: 20px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.875s; + animation-delay: 0.875s; +} +.box:nth-child(2) .dot:nth-child(23) { + width: 65px; + -webkit-transform: rotate(345deg); + transform: rotate(345deg); +} +.box:nth-child(2) .dot:nth-child(23):after { + width: 10px; + width: 35px; + height: 10px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.91667s; + animation-delay: 0.91667s; +} +.box:nth-child(2) .dot:nth-child(24) { + width: 65px; + width: 25px; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); +} +.box:nth-child(2) .dot:nth-child(24):after { + width: 10px; + height: 10px; + height: 20px; + -webkit-animation: load 1s infinite linear; + animation: load 1s infinite linear; + -webkit-animation-delay: 0.95833s; + animation-delay: 0.95833s; +} + +.box:nth-child(3) .dot:nth-child(1) { + width: 55px; + -webkit-transform: rotate(25.71429deg); + transform: rotate(25.71429deg); +} +.box:nth-child(3) .dot:nth-child(1):after { + background-color: #fff; + width: 35px; + height: 35px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +.box:nth-child(3) .dot:nth-child(2) { + width: 55px; + width: 35px; + -webkit-transform: rotate(51.42857deg); + transform: rotate(51.42857deg); +} +.box:nth-child(3) .dot:nth-child(2):after { + background-color: #fff; + width: 35px; + height: 35px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.10714s; + animation-delay: 0.10714s; +} +.box:nth-child(3) .dot:nth-child(3) { + width: 55px; + -webkit-transform: rotate(77.14286deg); + transform: rotate(77.14286deg); +} +.box:nth-child(3) .dot:nth-child(3):after { + background-color: #fff; + width: 35px; + height: 35px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.21429s; + animation-delay: 0.21429s; +} +.box:nth-child(3) .dot:nth-child(4) { + width: 55px; + width: 35px; + -webkit-transform: rotate(102.85714deg); + transform: rotate(102.85714deg); +} +.box:nth-child(3) .dot:nth-child(4):after { + background-color: #fff; + width: 35px; + height: 35px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.32143s; + animation-delay: 0.32143s; +} +.box:nth-child(3) .dot:nth-child(5) { + width: 55px; + -webkit-transform: rotate(128.57143deg); + transform: rotate(128.57143deg); +} +.box:nth-child(3) .dot:nth-child(5):after { + background-color: #fff; + width: 35px; + height: 35px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.42857s; + animation-delay: 0.42857s; +} +.box:nth-child(3) .dot:nth-child(6) { + width: 55px; + width: 35px; + -webkit-transform: rotate(154.28571deg); + transform: rotate(154.28571deg); +} +.box:nth-child(3) .dot:nth-child(6):after { + background-color: #fff; + width: 35px; + height: 35px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.53571s; + animation-delay: 0.53571s; +} +.box:nth-child(3) .dot:nth-child(7) { + width: 55px; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +.box:nth-child(3) .dot:nth-child(7):after { + background-color: #fff; + width: 35px; + height: 35px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.64286s; + animation-delay: 0.64286s; +} +.box:nth-child(3) .dot:nth-child(8) { + width: 55px; + width: 35px; + -webkit-transform: rotate(205.71429deg); + transform: rotate(205.71429deg); +} +.box:nth-child(3) .dot:nth-child(8):after { + background-color: #fff; + width: 35px; + height: 35px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.75s; + animation-delay: 0.75s; +} +.box:nth-child(3) .dot:nth-child(9) { + width: 55px; + -webkit-transform: rotate(231.42857deg); + transform: rotate(231.42857deg); +} +.box:nth-child(3) .dot:nth-child(9):after { + background-color: #fff; + width: 35px; + height: 35px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.85714s; + animation-delay: 0.85714s; +} +.box:nth-child(3) .dot:nth-child(10) { + width: 55px; + width: 35px; + -webkit-transform: rotate(257.14286deg); + transform: rotate(257.14286deg); +} +.box:nth-child(3) .dot:nth-child(10):after { + background-color: #fff; + width: 35px; + height: 35px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.96429s; + animation-delay: 0.96429s; +} +.box:nth-child(3) .dot:nth-child(11) { + width: 55px; + -webkit-transform: rotate(282.85714deg); + transform: rotate(282.85714deg); +} +.box:nth-child(3) .dot:nth-child(11):after { + background-color: #fff; + width: 35px; + height: 35px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.07143s; + animation-delay: 1.07143s; +} +.box:nth-child(3) .dot:nth-child(12) { + width: 55px; + width: 35px; + -webkit-transform: rotate(308.57143deg); + transform: rotate(308.57143deg); +} +.box:nth-child(3) .dot:nth-child(12):after { + background-color: #fff; + width: 35px; + height: 35px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.17857s; + animation-delay: 1.17857s; +} +.box:nth-child(3) .dot:nth-child(13) { + width: 55px; + -webkit-transform: rotate(334.28571deg); + transform: rotate(334.28571deg); +} +.box:nth-child(3) .dot:nth-child(13):after { + background-color: #fff; + width: 35px; + height: 35px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.28571s; + animation-delay: 1.28571s; +} +.box:nth-child(3) .dot:nth-child(14) { + width: 55px; + width: 35px; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); +} +.box:nth-child(3) .dot:nth-child(14):after { + background-color: #fff; + width: 35px; + height: 35px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.39286s; + animation-delay: 1.39286s; +} + +.box:nth-child(4) .dot:nth-child(1) { + width: 50px; + -webkit-transform: rotate(30deg); + transform: rotate(30deg); +} +.box:nth-child(4) .dot:nth-child(1):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +.box:nth-child(4) .dot:nth-child(2) { + width: 50px; + width: 30px; + -webkit-transform: rotate(60deg); + transform: rotate(60deg); +} +.box:nth-child(4) .dot:nth-child(2):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.125s; + animation-delay: 0.125s; +} +.box:nth-child(4) .dot:nth-child(3) { + width: 50px; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} +.box:nth-child(4) .dot:nth-child(3):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; +} +.box:nth-child(4) .dot:nth-child(4) { + width: 50px; + width: 30px; + -webkit-transform: rotate(120deg); + transform: rotate(120deg); +} +.box:nth-child(4) .dot:nth-child(4):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.375s; + animation-delay: 0.375s; +} +.box:nth-child(4) .dot:nth-child(5) { + width: 50px; + -webkit-transform: rotate(150deg); + transform: rotate(150deg); +} +.box:nth-child(4) .dot:nth-child(5):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; +} +.box:nth-child(4) .dot:nth-child(6) { + width: 50px; + width: 30px; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +.box:nth-child(4) .dot:nth-child(6):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.625s; + animation-delay: 0.625s; +} +.box:nth-child(4) .dot:nth-child(7) { + width: 50px; + -webkit-transform: rotate(210deg); + transform: rotate(210deg); +} +.box:nth-child(4) .dot:nth-child(7):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.75s; + animation-delay: 0.75s; +} +.box:nth-child(4) .dot:nth-child(8) { + width: 50px; + width: 30px; + -webkit-transform: rotate(240deg); + transform: rotate(240deg); +} +.box:nth-child(4) .dot:nth-child(8):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.875s; + animation-delay: 0.875s; +} +.box:nth-child(4) .dot:nth-child(9) { + width: 50px; + -webkit-transform: rotate(270deg); + transform: rotate(270deg); +} +.box:nth-child(4) .dot:nth-child(9):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1s; + animation-delay: 1s; +} +.box:nth-child(4) .dot:nth-child(10) { + width: 50px; + width: 30px; + -webkit-transform: rotate(300deg); + transform: rotate(300deg); +} +.box:nth-child(4) .dot:nth-child(10):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.125s; + animation-delay: 1.125s; +} +.box:nth-child(4) .dot:nth-child(11) { + width: 50px; + -webkit-transform: rotate(330deg); + transform: rotate(330deg); +} +.box:nth-child(4) .dot:nth-child(11):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.25s; + animation-delay: 1.25s; +} +.box:nth-child(4) .dot:nth-child(12) { + width: 50px; + width: 30px; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); +} +.box:nth-child(4) .dot:nth-child(12):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.375s; + animation-delay: 1.375s; +} + +.box:nth-child(5) p { + position: absolute; + bottom: 0; + text-align: center; + margin-bottom: 10px; + color: #fff; + font-family: 'Roboto', sans-serif; + font-size: 16px; + letter-spacing: 1px; +} +@media screen and (max-height: 620px) { + .box:nth-child(5) p { + line-height: 14px; + margin-bottom: 0; + font-size: 14px; + } +} +.box:nth-child(5) .dot:nth-child(1) { + width: 55px; + -webkit-transform: rotate(12deg); + transform: rotate(12deg); +} +.box:nth-child(5) .dot:nth-child(1):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +.box:nth-child(5) .dot:nth-child(2) { + width: 55px; + width: 95px; + -webkit-transform: rotate(24deg); + transform: rotate(24deg); +} +.box:nth-child(5) .dot:nth-child(2):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.05s; + animation-delay: 0.05s; +} +.box:nth-child(5) .dot:nth-child(3) { + width: 55px; + -webkit-transform: rotate(36deg); + transform: rotate(36deg); +} +.box:nth-child(5) .dot:nth-child(3):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; +} +.box:nth-child(5) .dot:nth-child(4) { + width: 55px; + width: 95px; + width: 75px; + -webkit-transform: rotate(48deg); + transform: rotate(48deg); +} +.box:nth-child(5) .dot:nth-child(4):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; +} +.box:nth-child(5) .dot:nth-child(5) { + width: 55px; + -webkit-transform: rotate(60deg); + transform: rotate(60deg); +} +.box:nth-child(5) .dot:nth-child(5):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; +} +.box:nth-child(5) .dot:nth-child(6) { + width: 55px; + width: 95px; + -webkit-transform: rotate(72deg); + transform: rotate(72deg); +} +.box:nth-child(5) .dot:nth-child(6):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; +} +.box:nth-child(5) .dot:nth-child(7) { + width: 55px; + -webkit-transform: rotate(84deg); + transform: rotate(84deg); +} +.box:nth-child(5) .dot:nth-child(7):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; +} +.box:nth-child(5) .dot:nth-child(8) { + width: 55px; + width: 95px; + width: 75px; + -webkit-transform: rotate(96deg); + transform: rotate(96deg); +} +.box:nth-child(5) .dot:nth-child(8):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.35s; + animation-delay: 0.35s; +} +.box:nth-child(5) .dot:nth-child(9) { + width: 55px; + -webkit-transform: rotate(108deg); + transform: rotate(108deg); +} +.box:nth-child(5) .dot:nth-child(9):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; +} +.box:nth-child(5) .dot:nth-child(10) { + width: 55px; + width: 95px; + -webkit-transform: rotate(120deg); + transform: rotate(120deg); +} +.box:nth-child(5) .dot:nth-child(10):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.45s; + animation-delay: 0.45s; +} +.box:nth-child(5) .dot:nth-child(11) { + width: 55px; + -webkit-transform: rotate(132deg); + transform: rotate(132deg); +} +.box:nth-child(5) .dot:nth-child(11):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; +} +.box:nth-child(5) .dot:nth-child(12) { + width: 55px; + width: 95px; + width: 75px; + -webkit-transform: rotate(144deg); + transform: rotate(144deg); +} +.box:nth-child(5) .dot:nth-child(12):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.55s; + animation-delay: 0.55s; +} +.box:nth-child(5) .dot:nth-child(13) { + width: 55px; + -webkit-transform: rotate(156deg); + transform: rotate(156deg); +} +.box:nth-child(5) .dot:nth-child(13):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.6s; + animation-delay: 0.6s; +} +.box:nth-child(5) .dot:nth-child(14) { + width: 55px; + width: 95px; + -webkit-transform: rotate(168deg); + transform: rotate(168deg); +} +.box:nth-child(5) .dot:nth-child(14):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.65s; + animation-delay: 0.65s; +} +.box:nth-child(5) .dot:nth-child(15) { + width: 55px; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +.box:nth-child(5) .dot:nth-child(15):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.7s; + animation-delay: 0.7s; +} +.box:nth-child(5) .dot:nth-child(16) { + width: 55px; + width: 95px; + width: 75px; + -webkit-transform: rotate(192deg); + transform: rotate(192deg); +} +.box:nth-child(5) .dot:nth-child(16):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.75s; + animation-delay: 0.75s; +} +.box:nth-child(5) .dot:nth-child(17) { + width: 55px; + -webkit-transform: rotate(204deg); + transform: rotate(204deg); +} +.box:nth-child(5) .dot:nth-child(17):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.8s; + animation-delay: 0.8s; +} +.box:nth-child(5) .dot:nth-child(18) { + width: 55px; + width: 95px; + -webkit-transform: rotate(216deg); + transform: rotate(216deg); +} +.box:nth-child(5) .dot:nth-child(18):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.85s; + animation-delay: 0.85s; +} +.box:nth-child(5) .dot:nth-child(19) { + width: 55px; + -webkit-transform: rotate(228deg); + transform: rotate(228deg); +} +.box:nth-child(5) .dot:nth-child(19):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.9s; + animation-delay: 0.9s; +} +.box:nth-child(5) .dot:nth-child(20) { + width: 55px; + width: 95px; + width: 75px; + -webkit-transform: rotate(240deg); + transform: rotate(240deg); +} +.box:nth-child(5) .dot:nth-child(20):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.95s; + animation-delay: 0.95s; +} +.box:nth-child(5) .dot:nth-child(21) { + width: 55px; + -webkit-transform: rotate(252deg); + transform: rotate(252deg); +} +.box:nth-child(5) .dot:nth-child(21):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1s; + animation-delay: 1s; +} +.box:nth-child(5) .dot:nth-child(22) { + width: 55px; + width: 95px; + -webkit-transform: rotate(264deg); + transform: rotate(264deg); +} +.box:nth-child(5) .dot:nth-child(22):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.05s; + animation-delay: 1.05s; +} +.box:nth-child(5) .dot:nth-child(23) { + width: 55px; + -webkit-transform: rotate(276deg); + transform: rotate(276deg); +} +.box:nth-child(5) .dot:nth-child(23):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.1s; + animation-delay: 1.1s; +} +.box:nth-child(5) .dot:nth-child(24) { + width: 55px; + width: 95px; + width: 75px; + -webkit-transform: rotate(288deg); + transform: rotate(288deg); +} +.box:nth-child(5) .dot:nth-child(24):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; +} +.box:nth-child(5) .dot:nth-child(25) { + width: 55px; + -webkit-transform: rotate(300deg); + transform: rotate(300deg); +} +.box:nth-child(5) .dot:nth-child(25):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.2s; + animation-delay: 1.2s; +} +.box:nth-child(5) .dot:nth-child(26) { + width: 55px; + width: 95px; + -webkit-transform: rotate(312deg); + transform: rotate(312deg); +} +.box:nth-child(5) .dot:nth-child(26):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.25s; + animation-delay: 1.25s; +} +.box:nth-child(5) .dot:nth-child(27) { + width: 55px; + -webkit-transform: rotate(324deg); + transform: rotate(324deg); +} +.box:nth-child(5) .dot:nth-child(27):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.3s; + animation-delay: 1.3s; +} +.box:nth-child(5) .dot:nth-child(28) { + width: 55px; + width: 95px; + width: 75px; + -webkit-transform: rotate(336deg); + transform: rotate(336deg); +} +.box:nth-child(5) .dot:nth-child(28):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.35s; + animation-delay: 1.35s; +} +.box:nth-child(5) .dot:nth-child(29) { + width: 55px; + -webkit-transform: rotate(348deg); + transform: rotate(348deg); +} +.box:nth-child(5) .dot:nth-child(29):after { + width: 15px; + height: 15px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.4s; + animation-delay: 1.4s; +} +.box:nth-child(5) .dot:nth-child(30) { + width: 55px; + width: 95px; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); +} +.box:nth-child(5) .dot:nth-child(30):after { + width: 15px; + height: 15px; + width: 10px; + height: 10px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.45s; + animation-delay: 1.45s; +} + +.box:nth-child(6) .dot:nth-child(1) { + width: 85px; + -webkit-transform: rotate(20deg); + transform: rotate(20deg); +} +.box:nth-child(6) .dot:nth-child(1):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +.box:nth-child(6) .dot:nth-child(2) { + width: 85px; + -webkit-transform: rotate(40deg); + transform: rotate(40deg); +} +.box:nth-child(6) .dot:nth-child(2):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.08333s; + animation-delay: 0.08333s; +} +.box:nth-child(6) .dot:nth-child(3) { + width: 85px; + width: 55px; + -webkit-transform: rotate(60deg); + transform: rotate(60deg); +} +.box:nth-child(6) .dot:nth-child(3):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.16667s; + animation-delay: 0.16667s; +} +.box:nth-child(6) .dot:nth-child(4) { + width: 85px; + -webkit-transform: rotate(80deg); + transform: rotate(80deg); +} +.box:nth-child(6) .dot:nth-child(4):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; +} +.box:nth-child(6) .dot:nth-child(5) { + width: 85px; + -webkit-transform: rotate(100deg); + transform: rotate(100deg); +} +.box:nth-child(6) .dot:nth-child(5):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.33333s; + animation-delay: 0.33333s; +} +.box:nth-child(6) .dot:nth-child(6) { + width: 85px; + width: 55px; + -webkit-transform: rotate(120deg); + transform: rotate(120deg); +} +.box:nth-child(6) .dot:nth-child(6):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.41667s; + animation-delay: 0.41667s; +} +.box:nth-child(6) .dot:nth-child(7) { + width: 85px; + -webkit-transform: rotate(140deg); + transform: rotate(140deg); +} +.box:nth-child(6) .dot:nth-child(7):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; +} +.box:nth-child(6) .dot:nth-child(8) { + width: 85px; + -webkit-transform: rotate(160deg); + transform: rotate(160deg); +} +.box:nth-child(6) .dot:nth-child(8):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.58333s; + animation-delay: 0.58333s; +} +.box:nth-child(6) .dot:nth-child(9) { + width: 85px; + width: 55px; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +.box:nth-child(6) .dot:nth-child(9):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.66667s; + animation-delay: 0.66667s; +} +.box:nth-child(6) .dot:nth-child(10) { + width: 85px; + -webkit-transform: rotate(200deg); + transform: rotate(200deg); +} +.box:nth-child(6) .dot:nth-child(10):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.75s; + animation-delay: 0.75s; +} +.box:nth-child(6) .dot:nth-child(11) { + width: 85px; + -webkit-transform: rotate(220deg); + transform: rotate(220deg); +} +.box:nth-child(6) .dot:nth-child(11):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.83333s; + animation-delay: 0.83333s; +} +.box:nth-child(6) .dot:nth-child(12) { + width: 85px; + width: 55px; + -webkit-transform: rotate(240deg); + transform: rotate(240deg); +} +.box:nth-child(6) .dot:nth-child(12):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 0.91667s; + animation-delay: 0.91667s; +} +.box:nth-child(6) .dot:nth-child(13) { + width: 85px; + -webkit-transform: rotate(260deg); + transform: rotate(260deg); +} +.box:nth-child(6) .dot:nth-child(13):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1s; + animation-delay: 1s; +} +.box:nth-child(6) .dot:nth-child(14) { + width: 85px; + -webkit-transform: rotate(280deg); + transform: rotate(280deg); +} +.box:nth-child(6) .dot:nth-child(14):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.08333s; + animation-delay: 1.08333s; +} +.box:nth-child(6) .dot:nth-child(15) { + width: 85px; + width: 55px; + -webkit-transform: rotate(300deg); + transform: rotate(300deg); +} +.box:nth-child(6) .dot:nth-child(15):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.16667s; + animation-delay: 1.16667s; +} +.box:nth-child(6) .dot:nth-child(16) { + width: 85px; + -webkit-transform: rotate(320deg); + transform: rotate(320deg); +} +.box:nth-child(6) .dot:nth-child(16):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.25s; + animation-delay: 1.25s; +} +.box:nth-child(6) .dot:nth-child(17) { + width: 85px; + -webkit-transform: rotate(340deg); + transform: rotate(340deg); +} +.box:nth-child(6) .dot:nth-child(17):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.33333s; + animation-delay: 1.33333s; +} +.box:nth-child(6) .dot:nth-child(18) { + width: 85px; + width: 55px; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); +} +.box:nth-child(6) .dot:nth-child(18):after { + width: 20px; + height: 20px; + -webkit-animation: load 1.5s infinite linear; + animation: load 1.5s infinite linear; + -webkit-animation-delay: 1.41667s; + animation-delay: 1.41667s; +} diff --git a/adjustment-loaders/index.html b/adjustment-loaders/index.html new file mode 100644 index 00000000..6e7d3903 --- /dev/null +++ b/adjustment-loaders/index.html @@ -0,0 +1,169 @@ + + + + + Adjustment Loaders + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Play around with map settings in CSS. Just a little adjustments could change the behaviour drastically. Fork and show what you come up with :)

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + diff --git a/adjustment-loaders/index.jade b/adjustment-loaders/index.jade new file mode 100644 index 00000000..433f0d39 --- /dev/null +++ b/adjustment-loaders/index.jade @@ -0,0 +1,34 @@ +// Change this variables also in CSS +- var dotsNum1 = 16 +- var dotsNum2 = 24 +- var dotsNum3 = 14 +- var dotsNum4 = 12 +- var dotsNum5 = 30 +- var dotsNum6 = 18 + +.cont + .box + .loader + - for (var x = 1; x <= dotsNum1; x++) + .dot + .box + .loader + - for (var x = 1; x <= dotsNum2; x++) + .dot + .box + .loader + - for (var x = 1; x <= dotsNum3; x++) + .dot + .box + .loader + - for (var x = 1; x <= dotsNum4; x++) + .dot + .box + .loader + - for (var x = 1; x <= dotsNum5; x++) + .dot + p Play around with map settings in CSS. Just a little adjustments could change the behaviour drastically. Fork and show what you come up with :) + .box + .loader + - for (var x = 1; x <= dotsNum6; x++) + .dot \ No newline at end of file diff --git a/adjustment-loaders/js/index.js b/adjustment-loaders/js/index.js new file mode 100644 index 00000000..2d9e1be3 --- /dev/null +++ b/adjustment-loaders/js/index.js @@ -0,0 +1 @@ +// Hi \ No newline at end of file diff --git a/adjustment-loaders/license.md b/adjustment-loaders/license.md new file mode 100644 index 00000000..c5b22217 --- /dev/null +++ b/adjustment-loaders/license.md @@ -0,0 +1,10 @@ + + diff --git a/adjustment-loaders/scss/style.scss b/adjustment-loaders/scss/style.scss new file mode 100644 index 00000000..01d1744d --- /dev/null +++ b/adjustment-loaders/scss/style.scss @@ -0,0 +1,255 @@ +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +$bgClr: #EE5555; + +$dotClr: ( + loader-1: #fff, + loader-2: #fff, + loader-3: #fff, + loader-4: #fff, + loader-5: #fff, + loader-6: #fff +); +$dotDiam: ( + loader-1: 20px, + loader-2: 10px, + loader-3: 35px, + loader-4: 15px, + loader-5: 15px, + loader-6: 20px +); +// Change number of dots also in html +$dotNum: ( + loader-1: 16, + loader-2: 24, + loader-3: 14, + loader-4: 12, + loader-5: 30, + loader-6: 18 +); +$dotDistr: ( + loader-1: 85px, + loader-2: 65px, + loader-3: 55px, + loader-4: 50px, + loader-5: 55px, + loader-6: 85px +); + +$animSpd: ( + loader-1: 1.5s, + loader-2: 1s, + loader-3: 1.5s, + loader-4: 1.5s, + loader-5: 1.5s, + loader-6: 1.5s +); + +$boxesInRow: 3; + +@mixin mediaMaxH($height) { + @media screen and (max-height: $height) { + @content; + } +} + +body { + height: 100vh; + background-color: $bgClr; + overflow: hidden; +} + +.cont { + display: flex; + height: 100vh; + flex-wrap: wrap; +} + +.box { + display: flex; + justify-content: center; + align-items: center; + position: relative; + flex: 0 0 calc(100% / #{$boxesInRow}); +} + +.dot { + position: absolute; + transform-origin: left center; + &:after { + content: ''; + position: absolute; + right: 0; + top: 0; + width: map-get($dotDiam, loader-1); + height: map-get($dotDiam, loader-1); + background-color: map-get($dotClr, loader-1); + border-radius: 50%; + } +} + +.box:nth-child(1) { + @for $i from 1 through map-get($dotNum, loader-1) { + .dot:nth-child(#{$i}) { + @if ($i % 2 == 0) { + width: map-get($dotDistr, loader-1) - 20px; + } + transform: rotate((360deg / map-get($dotNum, loader-1)) * $i); + &:after { + width: map-get($dotDiam, loader-1); + height: map-get($dotDiam, loader-1); + @if ($i % 2 == 0) { + height: map-get($dotDiam, loader-1) + 20px; + } + animation: load map-get($animSpd, loader-1) infinite linear; + animation-delay: (map-get($animSpd, loader-1) / map-get($dotNum, loader-1)) * ($i - 1); + @keyframes load { + 0% { + transform: scale(1); + opacity: 1 + } + 90% { + transform: scale(.25); + opacity: .25 + } + 100% { + transform: scale(1); + opacity: 1 + } + } + } + } + } +} + +.box:nth-child(2) { + @for $i from 1 through map-get($dotNum, loader-2) { + .dot:nth-child(#{$i}) { + width: map-get($dotDistr, loader-2); + @if ($i % 2 == 0) { + width: map-get($dotDistr, loader-2) - 40px; + } + transform: rotate((360deg / map-get($dotNum, loader-2)) * $i); + &:after { + width: map-get($dotDiam, loader-2); + @if ($i % 2 != 0) { + width: map-get($dotDiam, loader-2) + 25px; + } + height: map-get($dotDiam, loader-2); + @if ($i % 2 == 0) { + height: map-get($dotDiam, loader-2) + 10px; + } + animation: load map-get($animSpd, loader-2) infinite linear; + animation-delay: (map-get($animSpd, loader-2) / map-get($dotNum, loader-2)) * ($i - 1); + } + } + } +} + +.box:nth-child(3) { + @for $i from 1 through map-get($dotNum, loader-3) { + .dot:nth-child(#{$i}) { + width: map-get($dotDistr, loader-3); + @if ($i % 2 == 0) { + width: map-get($dotDistr, loader-3) - 20px; + } + transform: rotate((360deg / map-get($dotNum, loader-3)) * $i); + &:after { + background-color: map-get($dotClr, loader-3); + width: map-get($dotDiam, loader-3); + height: map-get($dotDiam, loader-3); + animation: load map-get($animSpd, loader-3) infinite linear; + animation-delay: (map-get($animSpd, loader-3) / map-get($dotNum, loader-3)) * ($i - 1); + } + } + } +} + +.box:nth-child(4) { + @for $i from 1 through map-get($dotNum, loader-4) { + .dot:nth-child(#{$i}) { + width: map-get($dotDistr, loader-4); + @if ($i % 2 == 0) { + width: map-get($dotDistr, loader-4) - 20px; + } + transform: rotate((360deg / map-get($dotNum, loader-4)) * $i); + &:after { + width: map-get($dotDiam, loader-4); + height: map-get($dotDiam, loader-4); + animation: load map-get($animSpd, loader-4) infinite linear; + animation-delay: (map-get($animSpd, loader-4) / map-get($dotNum, loader-4)) * ($i - 1); + } + } + } +} + +.box:nth-child(5) { + p { + position: absolute; + bottom: 0; + text-align: center; + margin-bottom: 10px; + color: #fff; + font: { + family: 'Roboto', sans-serif; + size: 16px; + } + letter-spacing: 1px; + @include mediaMaxH(620px) { + line-height: 14px; + margin-bottom: 0; + font: { + size: 14px; + } + } + } + + @for $i from 1 through map-get($dotNum, loader-5) { + .dot:nth-child(#{$i}) { + width: map-get($dotDistr, loader-5); + @if ($i % 2 == 0) { + width: map-get($dotDistr, loader-5) + 40px; + } + @if ($i % 4 == 0) { + width: map-get($dotDistr, loader-5) + 20px; + } + transform: rotate((360deg / map-get($dotNum, loader-5)) * $i); + &:after { + width: map-get($dotDiam, loader-5); + height: map-get($dotDiam, loader-5); + @if ($i % 2 == 0) { + width: map-get($dotDiam, loader-5) - 5px; + height: map-get($dotDiam, loader-5) - 5px; + } + animation: load map-get($animSpd, loader-5) infinite linear; + animation-delay: (map-get($animSpd, loader-5) / map-get($dotNum, loader-5)) * ($i - 1); + } + } + } +} + +.box:nth-child(6) { + @for $i from 1 through map-get($dotNum, loader-6) { + .dot:nth-child(#{$i}) { + width: map-get($dotDistr, loader-6); + @if ($i % 3 == 0) { + width: map-get($dotDistr, loader-6) - 30px; + } + transform: rotate((360deg / map-get($dotNum, loader-6)) * $i); + &:after { + width: map-get($dotDiam, loader-6); + height: map-get($dotDiam, loader-6); + animation: load map-get($animSpd, loader-6) infinite linear; + animation-delay: (map-get($animSpd, loader-6) / map-get($dotNum, loader-6)) * ($i - 1); + } + } + } +} \ No newline at end of file diff --git a/animated-progress-bar/README.md b/animated-progress-bar/README.md new file mode 100644 index 00000000..303d6773 --- /dev/null +++ b/animated-progress-bar/README.md @@ -0,0 +1,10 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/Thibaut/pen/ouKvy. + + By [CSSFlow](http://www.cssflow.com): free UI elements and widgets coded with HTML5, CSS3, and Sass. + +View the original article and download the Sass/SCSS source at: +[www.cssflow.com/snippets/animated-progress-bar](http://www.cssflow.com/snippets/animated-progress-bar) + +Original PSD by [Vin Thomas](http://365psd.com/day/2-117/). + +Tested in Firefox 4, Safari 5.1, Chrome 13, Opera 10, IE 9 (and newer). \ No newline at end of file diff --git a/animated-progress-bar/css/reset.css b/animated-progress-bar/css/reset.css new file mode 100644 index 00000000..3b2627d6 --- /dev/null +++ b/animated-progress-bar/css/reset.css @@ -0,0 +1 @@ +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} diff --git a/animated-progress-bar/css/style.css b/animated-progress-bar/css/style.css new file mode 100644 index 00000000..4dc7423f --- /dev/null +++ b/animated-progress-bar/css/style.css @@ -0,0 +1,103 @@ +/* + * Copyright (c) 2012-2013 Thibaut Courouble + * http://www.cssflow.com + * Licensed under the MIT License + * + * Sass/SCSS source: http://goo.gl/UhXKg + * PSD by Vin Thomas: http://goo.gl/n1M2e + */ + +body { + font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif; + color: #404040; + background: #2a2a2a; +} + +.container { + margin: 60px auto; + width: 400px; + text-align: center; +} + +.container .progress { + margin: 0 auto; + width: 400px; +} + +.progress { + padding: 4px; + background: rgba(0, 0, 0, 0.25); + border-radius: 6px; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); +} + +.progress-bar { + height: 16px; + border-radius: 4px; + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); + background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); + background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); + -webkit-transition: 0.4s linear; + -moz-transition: 0.4s linear; + -o-transition: 0.4s linear; + transition: 0.4s linear; + -webkit-transition-property: width, background-color; + -moz-transition-property: width, background-color; + -o-transition-property: width, background-color; + transition-property: width, background-color; + -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); + box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); +} + +/* + * Note: using adjacent or general sibling selectors combined with + * pseudo classes doesn't work in Safari 5.0 and Chrome 12. + * See this article for more info and a potential fix: + * http://css-tricks.com/webkit-sibling-bug/ + */ + +#five:checked ~ .progress > .progress-bar { + width: 5%; + background-color: #f63a0f; +} + +#twentyfive:checked ~ .progress > .progress-bar { + width: 25%; + background-color: #f27011; +} + +#fifty:checked ~ .progress > .progress-bar { + width: 50%; + background-color: #f2b01e; +} + +#seventyfive:checked ~ .progress > .progress-bar { + width: 75%; + background-color: #f2d31b; +} + +#onehundred:checked ~ .progress > .progress-bar { + width: 100%; + background-color: #86e01e; +} + +.radio { + display: none; +} + +.label { + display: inline-block; + margin: 0 5px 20px; + padding: 3px 8px; + color: #aaa; + text-shadow: 0 1px black; + border-radius: 3px; + cursor: pointer; +} + +.radio:checked + .label { + color: white; + background: rgba(0, 0, 0, 0.25); +} diff --git a/animated-progress-bar/index.html b/animated-progress-bar/index.html new file mode 100644 index 00000000..54c8abf9 --- /dev/null +++ b/animated-progress-bar/index.html @@ -0,0 +1,46 @@ + + + + + Animated Progress Bar + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + +
+
+
+
+ + + + + + diff --git a/animated-progress-bar/license.md b/animated-progress-bar/license.md new file mode 100644 index 00000000..75e7d577 --- /dev/null +++ b/animated-progress-bar/license.md @@ -0,0 +1,10 @@ + + diff --git a/buttons-css-hover-effect/README.md b/buttons-css-hover-effect/README.md new file mode 100644 index 00000000..5b463918 --- /dev/null +++ b/buttons-css-hover-effect/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/deineko/pen/jrmmoQ. + + \ No newline at end of file diff --git a/buttons-css-hover-effect/css/normalize.css b/buttons-css-hover-effect/css/normalize.css new file mode 100644 index 00000000..8393ac44 --- /dev/null +++ b/buttons-css-hover-effect/css/normalize.css @@ -0,0 +1 @@ +/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input,select{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[disabled]{cursor:default}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none} diff --git a/buttons-css-hover-effect/css/style.css b/buttons-css-hover-effect/css/style.css new file mode 100644 index 00000000..a91d6bea --- /dev/null +++ b/buttons-css-hover-effect/css/style.css @@ -0,0 +1,41 @@ +@import 'https://fonts.googleapis.com/css?family=Comfortaa:300,400,700&subset=cyrillic,cyrillic-ext,latin-ext'; +body {background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAFfKj/FAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF4OXp8PX50NXZBLxR6QAAAEhJREFUeNpiYGJgYGACCCAGMAAIIDiDCSCAGLAAgABCEcbBBAggGIORQhogwNCcwIjddKgQI6ojUbkgWSYMo+BCjKiOR9PLBAAchAAxHFDBbwAAAABJRU5ErkJggg==')} +h1 {text-align:center;font-family:comfortaa;font-weight:900;font-size:3em;color:#fff;text-shadow:0em 0.05em 0 rgba(0,0,0,0.35)} +button {color:#454545;background:transparent;border-width:2px;border-style: solid;border-color: #454545;position:relative;margin:1em;display:inline-block;padding:0.5em 1em;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;text-align:center; +font-family:comfortaa;font-weight:bold} +button:before, button:after {content:'';display:block;position:absolute;border-color:#454545;box-sizing:border-box;border-style:solid;width:1em;height:1em;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out} +button:before {top:-6px;left:-6px;border-width:2px 0 0 2px;z-index:5;} +button:after {bottom:-6px;right:-6px;border-width:0 2px 2px 0;} +button:hover:before, button:hover:after {width:calc(100% + 12px); + height:calc(100% + 12px);border-color:#fff} +button:hover {color:#353535;background-color:#fff;border-color:#fff} +.panel {max-width:960px;text-align:center;position:relative;margin:auto;} + + +.pink button {color:#eb1777;border-color:#eb1777} +.pink button:before, .pink button:after {border-color:#eb1777} +.pink button:hover:before, .pink button:hover:after {border-color:#eb1777;} +.pink button:hover {color:#fff;background-color:#eb1777;border-color:#eb1777;} +.pink .panel {max-width:960px;text-align:center;position:relative;margin:auto;} + + +.blue button {color:#3bb4e5;border-color:#3bb4e5} +.blue button:before, .blue button:after {border-color:#3bb4e5} +.blue button:hover:before, .blue button:hover:after {width:calc(100% + 12px); + height:calc(100% + 12px);border-color:#3bb4e5;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)} +.blue button:hover {color:#3bb4e5;background-color:transparent;border-color:#3bb4e5} +.blue .panel {max-width:960px;text-align:center;position:relative;margin:auto;} + +.borderless button {border-color:rgba(0,0,0,0);color:#999} +.borderless button:hover {border-color:#353535;background-color:transparent;color:#353535} +.borderless button:before, .borderless button:after {border-color:transparent;} +.borderless button:hover:before, .borderless button:hover:after {width:calc(100% + 12px); height:calc(100% + 12px);border-color:#353535} + +.bw button {color:#fff;border-color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.1); +box-shadow:0 1px 3px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1) inset +} +.bw button:before, .bw button:after {border-color:#fff} +.bw button:hover:before, .bw button:hover:after {width:calc(100% + 12px); + height:calc(100% + 12px);border-color:#353535;} +.bw button:hover {color:#fff;background-color:#353535;border-color:#353535} +.blue .panel {max-width:960px;text-align:center;position:relative;margin:auto;} \ No newline at end of file diff --git a/buttons-css-hover-effect/index.html b/buttons-css-hover-effect/index.html new file mode 100644 index 00000000..dea6061d --- /dev/null +++ b/buttons-css-hover-effect/index.html @@ -0,0 +1,62 @@ + + + + + Buttons css hover effect + + + + + + + + + + + + + + + +

Buttons hover effects

+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+ + + + + + diff --git a/buttons-css-hover-effect/license.md b/buttons-css-hover-effect/license.md new file mode 100644 index 00000000..05c0ef14 --- /dev/null +++ b/buttons-css-hover-effect/license.md @@ -0,0 +1,10 @@ + + diff --git a/circular-calendar-display/README.md b/circular-calendar-display/README.md new file mode 100644 index 00000000..106626de --- /dev/null +++ b/circular-calendar-display/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/mattjuggins/pen/WGRRYx. + + A circular calendar and clock display, with and added weather and daily activity widget mock-ups. \ No newline at end of file diff --git a/circular-calendar-display/config.rb b/circular-calendar-display/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/circular-calendar-display/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/circular-calendar-display/css/style.css b/circular-calendar-display/css/style.css new file mode 100644 index 00000000..60136d0e --- /dev/null +++ b/circular-calendar-display/css/style.css @@ -0,0 +1,1800 @@ +#x1 { + background: #FF3B30; +} + +#x2 { + background: #FF9500; +} + +#x3 { + background: #FFCC00; +} + +#x4 { + background: #4CD964; +} + +#x5 { + background: #5AC8FA; +} + +#x6 { + background: #007AFF; +} + +#x7 { + background: #5856D6; +} + +.bar:nth-child(1) { + position: absolute; + top: 0px; + left: 0px; +} + +.bar:nth-child(2) { + position: absolute; + top: 0px; + left: 20px; +} + +.bar:nth-child(3) { + position: absolute; + top: 0px; + left: 40px; +} + +.bar:nth-child(4) { + position: absolute; + top: 0px; + left: 60px; +} + +.bar:nth-child(5) { + position: absolute; + top: 0px; + left: 80px; +} + +.bar:nth-child(6) { + position: absolute; + top: 0px; + left: 100px; +} + +.bar:nth-child(7) { + position: absolute; + top: 0px; + left: 120px; +} + +.day-name-dial, .month-dial, .day-dial { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} + +.head { + position: relative; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} + +.center-preview span, .hand-container, .day-name-preview span, .day-name-text span, .month-preview span, .month-text span, .day-preview span, .day-text span { + text-align: center; + moz-transform-origin: center center; + -o-transform-origin: center center; + -ms-transform-origin: center center; + -webkit-transform-origin: center center; + transform-origin: center center; +} + +* { + box-sizing: border-box; +} + +html, +body { + background: #292929; + border: 0; + font-family: 'Roboto Mono', monospace; + height: 100%; + margin: 0px; + width: 100%; +} + +h1 { + color: #555; + font-size: 25px; +} + +h2 { + color: #555; + font-size: 15px; +} + +.center-dial { + position: absolute; + top: calc(50% - 75px); + left: calc(50% - 75px); + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + -o-transition: all 0.5s; + transition: all 0.5s; + width: 150px; + height: 150px; + background-color: #202020; + border-radius: 50%; + color: #000; + box-shadow: 0px 2px 2px #000; + cursor: pointer; + overflow: hidden; +} + +.center-preview span { + position: absolute; + top: 0%; + left: calc(50% - 12.5px); + height: 150px; + width: 25px; +} + +.center-preview { + opacity: 0; + filter: alpha(opacity=0); +} +.center-preview .char1 { + -moz-transform: rotate(-40deg); + -o-transform: rotate(-40deg); + -ms-transform: rotate(-40deg); + -webkit-transform: rotate(-40deg); + transform: rotate(-40deg); +} +.center-preview .char2 { + -moz-transform: rotate(-20deg); + -o-transform: rotate(-20deg); + -ms-transform: rotate(-20deg); + -webkit-transform: rotate(-20deg); + transform: rotate(-20deg); +} +.center-preview .char3 { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); +} +.center-preview .char4 { + -moz-transform: rotate(20deg); + -o-transform: rotate(20deg); + -ms-transform: rotate(20deg); + -webkit-transform: rotate(20deg); + transform: rotate(20deg); +} +.center-preview .char5 { + -moz-transform: rotate(40deg); + -o-transform: rotate(40deg); + -ms-transform: rotate(40deg); + -webkit-transform: rotate(40deg); + transform: rotate(40deg); +} +.center-preview .char6 { + -moz-transform: rotate(60deg); + -o-transform: rotate(60deg); + -ms-transform: rotate(60deg); + -webkit-transform: rotate(60deg); + transform: rotate(60deg); +} + +.head { + width: 50px; + height: 50px; + background: #FFF; + border-radius: 50%; +} + +.torso { + position: relative; + top: calc(50% - 20px); + left: calc(50% - 50px); + width: 100px; + height: 100px; + background: #FFF; + border-radius: 50%; +} + +.hand-container { + position: absolute; + top: 0%; + left: calc(50% - 12.5px); + opacity: 0; + filter: alpha(opacity=0); + width: 25px; + height: 150px; + moz-transform-origin: center center; + -o-transform-origin: center center; + -ms-transform-origin: center center; + -webkit-transform-origin: center center; + transform-origin: center center; +} + +.hour-hand { + width: 10px; + height: 50px; + position: relative; + top: calc(50% - 45px); + left: calc(50% - 5px); + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + -o-transition: all 0.5s; + transition: all 0.5s; + background: #FFF; + border-radius: 5px; +} + +.minute-hand { + width: 10px; + height: 70px; + position: relative; + top: calc(50% - 65px); + left: calc(50% - 5px); + background: #CCC; + border-radius: 5px; +} + +.second-hand { + width: 2px; + height: 70px; + position: relative; + top: calc(50% - 69px); + left: calc(50% - 1px); + background: #AAA; + border-radius: 1px; +} + +.day-name-dial { + width: 250px; + height: 250px; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + -o-transition: all 0.5s; + transition: all 0.5s; +} + +.day-name-preview span { + position: absolute; + top: calc(-25% - 5px); + left: calc(50% - 12.5px); + height: 250px; + width: 25px; +} + +.day-name-preview { + opacity: 0; + filter: alpha(opacity=0); +} +.day-name-preview .char1 { + -moz-transform: rotate(-35deg); + -o-transform: rotate(-35deg); + -ms-transform: rotate(-35deg); + -webkit-transform: rotate(-35deg); + transform: rotate(-35deg); +} +.day-name-preview .char2 { + -moz-transform: rotate(-25deg); + -o-transform: rotate(-25deg); + -ms-transform: rotate(-25deg); + -webkit-transform: rotate(-25deg); + transform: rotate(-25deg); +} +.day-name-preview .char3 { + -moz-transform: rotate(-15deg); + -o-transform: rotate(-15deg); + -ms-transform: rotate(-15deg); + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); +} +.day-name-preview .char4 { + -moz-transform: rotate(-5deg); + -o-transform: rotate(-5deg); + -ms-transform: rotate(-5deg); + -webkit-transform: rotate(-5deg); + transform: rotate(-5deg); +} +.day-name-preview .char5 { + -moz-transform: rotate(5deg); + -o-transform: rotate(5deg); + -ms-transform: rotate(5deg); + -webkit-transform: rotate(5deg); + transform: rotate(5deg); +} +.day-name-preview .char6 { + -moz-transform: rotate(15deg); + -o-transform: rotate(15deg); + -ms-transform: rotate(15deg); + -webkit-transform: rotate(15deg); + transform: rotate(15deg); +} +.day-name-preview .char7 { + -moz-transform: rotate(25deg); + -o-transform: rotate(25deg); + -ms-transform: rotate(25deg); + -webkit-transform: rotate(25deg); + transform: rotate(25deg); +} +.day-name-preview .char8 { + -moz-transform: rotate(35deg); + -o-transform: rotate(35deg); + -ms-transform: rotate(35deg); + -webkit-transform: rotate(35deg); + transform: rotate(35deg); +} +.day-name-preview .char9 { + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} + +.day-name-text span { + position: absolute; + top: calc(-25% + 5px); + left: calc(50% - 6px); + height: 232px; + width: 12px; +} + +.day-name-text { + opacity: 0; + filter: alpha(opacity=0); +} +.day-name-text .char1 { + -moz-transform: rotate(-125.35714deg); + -o-transform: rotate(-125.35714deg); + -ms-transform: rotate(-125.35714deg); + -webkit-transform: rotate(-125.35714deg); + transform: rotate(-125.35714deg); +} +.day-name-text .char2 { + -moz-transform: rotate(-115.71429deg); + -o-transform: rotate(-115.71429deg); + -ms-transform: rotate(-115.71429deg); + -webkit-transform: rotate(-115.71429deg); + transform: rotate(-115.71429deg); +} +.day-name-text .char3 { + -moz-transform: rotate(-106.07143deg); + -o-transform: rotate(-106.07143deg); + -ms-transform: rotate(-106.07143deg); + -webkit-transform: rotate(-106.07143deg); + transform: rotate(-106.07143deg); +} +.day-name-text .char4 { + -moz-transform: rotate(-96.42857deg); + -o-transform: rotate(-96.42857deg); + -ms-transform: rotate(-96.42857deg); + -webkit-transform: rotate(-96.42857deg); + transform: rotate(-96.42857deg); +} +.day-name-text .char5 { + -moz-transform: rotate(-86.78571deg); + -o-transform: rotate(-86.78571deg); + -ms-transform: rotate(-86.78571deg); + -webkit-transform: rotate(-86.78571deg); + transform: rotate(-86.78571deg); +} +.day-name-text .char6 { + -moz-transform: rotate(-77.14286deg); + -o-transform: rotate(-77.14286deg); + -ms-transform: rotate(-77.14286deg); + -webkit-transform: rotate(-77.14286deg); + transform: rotate(-77.14286deg); +} +.day-name-text .char7 { + -moz-transform: rotate(-67.5deg); + -o-transform: rotate(-67.5deg); + -ms-transform: rotate(-67.5deg); + -webkit-transform: rotate(-67.5deg); + transform: rotate(-67.5deg); +} +.day-name-text .char8 { + -moz-transform: rotate(-57.85714deg); + -o-transform: rotate(-57.85714deg); + -ms-transform: rotate(-57.85714deg); + -webkit-transform: rotate(-57.85714deg); + transform: rotate(-57.85714deg); +} +.day-name-text .char9 { + -moz-transform: rotate(-48.21429deg); + -o-transform: rotate(-48.21429deg); + -ms-transform: rotate(-48.21429deg); + -webkit-transform: rotate(-48.21429deg); + transform: rotate(-48.21429deg); +} +.day-name-text .char10 { + -moz-transform: rotate(-38.57143deg); + -o-transform: rotate(-38.57143deg); + -ms-transform: rotate(-38.57143deg); + -webkit-transform: rotate(-38.57143deg); + transform: rotate(-38.57143deg); +} +.day-name-text .char11 { + -moz-transform: rotate(-28.92857deg); + -o-transform: rotate(-28.92857deg); + -ms-transform: rotate(-28.92857deg); + -webkit-transform: rotate(-28.92857deg); + transform: rotate(-28.92857deg); +} +.day-name-text .char12 { + -moz-transform: rotate(-19.28571deg); + -o-transform: rotate(-19.28571deg); + -ms-transform: rotate(-19.28571deg); + -webkit-transform: rotate(-19.28571deg); + transform: rotate(-19.28571deg); +} +.day-name-text .char13 { + -moz-transform: rotate(-9.64286deg); + -o-transform: rotate(-9.64286deg); + -ms-transform: rotate(-9.64286deg); + -webkit-transform: rotate(-9.64286deg); + transform: rotate(-9.64286deg); +} +.day-name-text .char14 { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); +} +.day-name-text .char15 { + -moz-transform: rotate(9.64286deg); + -o-transform: rotate(9.64286deg); + -ms-transform: rotate(9.64286deg); + -webkit-transform: rotate(9.64286deg); + transform: rotate(9.64286deg); +} +.day-name-text .char16 { + -moz-transform: rotate(19.28571deg); + -o-transform: rotate(19.28571deg); + -ms-transform: rotate(19.28571deg); + -webkit-transform: rotate(19.28571deg); + transform: rotate(19.28571deg); +} +.day-name-text .char17 { + -moz-transform: rotate(28.92857deg); + -o-transform: rotate(28.92857deg); + -ms-transform: rotate(28.92857deg); + -webkit-transform: rotate(28.92857deg); + transform: rotate(28.92857deg); +} +.day-name-text .char18 { + -moz-transform: rotate(38.57143deg); + -o-transform: rotate(38.57143deg); + -ms-transform: rotate(38.57143deg); + -webkit-transform: rotate(38.57143deg); + transform: rotate(38.57143deg); +} +.day-name-text .char19 { + -moz-transform: rotate(48.21429deg); + -o-transform: rotate(48.21429deg); + -ms-transform: rotate(48.21429deg); + -webkit-transform: rotate(48.21429deg); + transform: rotate(48.21429deg); +} +.day-name-text .char20 { + -moz-transform: rotate(57.85714deg); + -o-transform: rotate(57.85714deg); + -ms-transform: rotate(57.85714deg); + -webkit-transform: rotate(57.85714deg); + transform: rotate(57.85714deg); +} +.day-name-text .char21 { + -moz-transform: rotate(67.5deg); + -o-transform: rotate(67.5deg); + -ms-transform: rotate(67.5deg); + -webkit-transform: rotate(67.5deg); + transform: rotate(67.5deg); +} +.day-name-text .char22 { + -moz-transform: rotate(77.14286deg); + -o-transform: rotate(77.14286deg); + -ms-transform: rotate(77.14286deg); + -webkit-transform: rotate(77.14286deg); + transform: rotate(77.14286deg); +} +.day-name-text .char23 { + -moz-transform: rotate(86.78571deg); + -o-transform: rotate(86.78571deg); + -ms-transform: rotate(86.78571deg); + -webkit-transform: rotate(86.78571deg); + transform: rotate(86.78571deg); +} +.day-name-text .char24 { + -moz-transform: rotate(96.42857deg); + -o-transform: rotate(96.42857deg); + -ms-transform: rotate(96.42857deg); + -webkit-transform: rotate(96.42857deg); + transform: rotate(96.42857deg); +} +.day-name-text .char25 { + -moz-transform: rotate(106.07143deg); + -o-transform: rotate(106.07143deg); + -ms-transform: rotate(106.07143deg); + -webkit-transform: rotate(106.07143deg); + transform: rotate(106.07143deg); +} +.day-name-text .char26 { + -moz-transform: rotate(115.71429deg); + -o-transform: rotate(115.71429deg); + -ms-transform: rotate(115.71429deg); + -webkit-transform: rotate(115.71429deg); + transform: rotate(115.71429deg); +} +.day-name-text .char27 { + -moz-transform: rotate(125.35714deg); + -o-transform: rotate(125.35714deg); + -ms-transform: rotate(125.35714deg); + -webkit-transform: rotate(125.35714deg); + transform: rotate(125.35714deg); +} +.day-name-text .char28 { + -moz-transform: rotate(135deg); + -o-transform: rotate(135deg); + -ms-transform: rotate(135deg); + -webkit-transform: rotate(135deg); + transform: rotate(135deg); +} + +.month-dial { + width: 350px; + height: 350px; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + -o-transition: all 0.5s; + transition: all 0.5s; +} + +.month-preview span { + position: absolute; + top: calc(-25% + 20px); + left: calc(50% - 12.5px); + height: 350px; + width: 25px; +} + +.month-preview { + opacity: 0; + filter: alpha(opacity=0); +} +.month-preview .char1 { + -moz-transform: rotate(-30deg); + -o-transform: rotate(-30deg); + -ms-transform: rotate(-30deg); + -webkit-transform: rotate(-30deg); + transform: rotate(-30deg); +} +.month-preview .char2 { + -moz-transform: rotate(-15deg); + -o-transform: rotate(-15deg); + -ms-transform: rotate(-15deg); + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); +} +.month-preview .char3 { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); +} +.month-preview .char4 { + -moz-transform: rotate(15deg); + -o-transform: rotate(15deg); + -ms-transform: rotate(15deg); + -webkit-transform: rotate(15deg); + transform: rotate(15deg); +} +.month-preview .char5 { + -moz-transform: rotate(30deg); + -o-transform: rotate(30deg); + -ms-transform: rotate(30deg); + -webkit-transform: rotate(30deg); + transform: rotate(30deg); +} +.month-preview .char6 { + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} + +.month-text span { + position: absolute; + top: calc(-25% + 30px); + left: calc(50% - 6px); + height: 332px; + width: 12px; +} + +.month-text { + opacity: 0; + filter: alpha(opacity=0); +} +.month-text .char1 { + -moz-transform: rotate(-129.375deg); + -o-transform: rotate(-129.375deg); + -ms-transform: rotate(-129.375deg); + -webkit-transform: rotate(-129.375deg); + transform: rotate(-129.375deg); +} +.month-text .char2 { + -moz-transform: rotate(-123.75deg); + -o-transform: rotate(-123.75deg); + -ms-transform: rotate(-123.75deg); + -webkit-transform: rotate(-123.75deg); + transform: rotate(-123.75deg); +} +.month-text .char3 { + -moz-transform: rotate(-118.125deg); + -o-transform: rotate(-118.125deg); + -ms-transform: rotate(-118.125deg); + -webkit-transform: rotate(-118.125deg); + transform: rotate(-118.125deg); +} +.month-text .char4 { + -moz-transform: rotate(-112.5deg); + -o-transform: rotate(-112.5deg); + -ms-transform: rotate(-112.5deg); + -webkit-transform: rotate(-112.5deg); + transform: rotate(-112.5deg); +} +.month-text .char5 { + -moz-transform: rotate(-106.875deg); + -o-transform: rotate(-106.875deg); + -ms-transform: rotate(-106.875deg); + -webkit-transform: rotate(-106.875deg); + transform: rotate(-106.875deg); +} +.month-text .char6 { + -moz-transform: rotate(-101.25deg); + -o-transform: rotate(-101.25deg); + -ms-transform: rotate(-101.25deg); + -webkit-transform: rotate(-101.25deg); + transform: rotate(-101.25deg); +} +.month-text .char7 { + -moz-transform: rotate(-95.625deg); + -o-transform: rotate(-95.625deg); + -ms-transform: rotate(-95.625deg); + -webkit-transform: rotate(-95.625deg); + transform: rotate(-95.625deg); +} +.month-text .char8 { + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.month-text .char9 { + -moz-transform: rotate(-84.375deg); + -o-transform: rotate(-84.375deg); + -ms-transform: rotate(-84.375deg); + -webkit-transform: rotate(-84.375deg); + transform: rotate(-84.375deg); +} +.month-text .char10 { + -moz-transform: rotate(-78.75deg); + -o-transform: rotate(-78.75deg); + -ms-transform: rotate(-78.75deg); + -webkit-transform: rotate(-78.75deg); + transform: rotate(-78.75deg); +} +.month-text .char11 { + -moz-transform: rotate(-73.125deg); + -o-transform: rotate(-73.125deg); + -ms-transform: rotate(-73.125deg); + -webkit-transform: rotate(-73.125deg); + transform: rotate(-73.125deg); +} +.month-text .char12 { + -moz-transform: rotate(-67.5deg); + -o-transform: rotate(-67.5deg); + -ms-transform: rotate(-67.5deg); + -webkit-transform: rotate(-67.5deg); + transform: rotate(-67.5deg); +} +.month-text .char13 { + -moz-transform: rotate(-61.875deg); + -o-transform: rotate(-61.875deg); + -ms-transform: rotate(-61.875deg); + -webkit-transform: rotate(-61.875deg); + transform: rotate(-61.875deg); +} +.month-text .char14 { + -moz-transform: rotate(-56.25deg); + -o-transform: rotate(-56.25deg); + -ms-transform: rotate(-56.25deg); + -webkit-transform: rotate(-56.25deg); + transform: rotate(-56.25deg); +} +.month-text .char15 { + -moz-transform: rotate(-50.625deg); + -o-transform: rotate(-50.625deg); + -ms-transform: rotate(-50.625deg); + -webkit-transform: rotate(-50.625deg); + transform: rotate(-50.625deg); +} +.month-text .char16 { + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.month-text .char17 { + -moz-transform: rotate(-39.375deg); + -o-transform: rotate(-39.375deg); + -ms-transform: rotate(-39.375deg); + -webkit-transform: rotate(-39.375deg); + transform: rotate(-39.375deg); +} +.month-text .char18 { + -moz-transform: rotate(-33.75deg); + -o-transform: rotate(-33.75deg); + -ms-transform: rotate(-33.75deg); + -webkit-transform: rotate(-33.75deg); + transform: rotate(-33.75deg); +} +.month-text .char19 { + -moz-transform: rotate(-28.125deg); + -o-transform: rotate(-28.125deg); + -ms-transform: rotate(-28.125deg); + -webkit-transform: rotate(-28.125deg); + transform: rotate(-28.125deg); +} +.month-text .char20 { + -moz-transform: rotate(-22.5deg); + -o-transform: rotate(-22.5deg); + -ms-transform: rotate(-22.5deg); + -webkit-transform: rotate(-22.5deg); + transform: rotate(-22.5deg); +} +.month-text .char21 { + -moz-transform: rotate(-16.875deg); + -o-transform: rotate(-16.875deg); + -ms-transform: rotate(-16.875deg); + -webkit-transform: rotate(-16.875deg); + transform: rotate(-16.875deg); +} +.month-text .char22 { + -moz-transform: rotate(-11.25deg); + -o-transform: rotate(-11.25deg); + -ms-transform: rotate(-11.25deg); + -webkit-transform: rotate(-11.25deg); + transform: rotate(-11.25deg); +} +.month-text .char23 { + -moz-transform: rotate(-5.625deg); + -o-transform: rotate(-5.625deg); + -ms-transform: rotate(-5.625deg); + -webkit-transform: rotate(-5.625deg); + transform: rotate(-5.625deg); +} +.month-text .char24 { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); +} +.month-text .char25 { + -moz-transform: rotate(5.625deg); + -o-transform: rotate(5.625deg); + -ms-transform: rotate(5.625deg); + -webkit-transform: rotate(5.625deg); + transform: rotate(5.625deg); +} +.month-text .char26 { + -moz-transform: rotate(11.25deg); + -o-transform: rotate(11.25deg); + -ms-transform: rotate(11.25deg); + -webkit-transform: rotate(11.25deg); + transform: rotate(11.25deg); +} +.month-text .char27 { + -moz-transform: rotate(16.875deg); + -o-transform: rotate(16.875deg); + -ms-transform: rotate(16.875deg); + -webkit-transform: rotate(16.875deg); + transform: rotate(16.875deg); +} +.month-text .char28 { + -moz-transform: rotate(22.5deg); + -o-transform: rotate(22.5deg); + -ms-transform: rotate(22.5deg); + -webkit-transform: rotate(22.5deg); + transform: rotate(22.5deg); +} +.month-text .char29 { + -moz-transform: rotate(28.125deg); + -o-transform: rotate(28.125deg); + -ms-transform: rotate(28.125deg); + -webkit-transform: rotate(28.125deg); + transform: rotate(28.125deg); +} +.month-text .char30 { + -moz-transform: rotate(33.75deg); + -o-transform: rotate(33.75deg); + -ms-transform: rotate(33.75deg); + -webkit-transform: rotate(33.75deg); + transform: rotate(33.75deg); +} +.month-text .char31 { + -moz-transform: rotate(39.375deg); + -o-transform: rotate(39.375deg); + -ms-transform: rotate(39.375deg); + -webkit-transform: rotate(39.375deg); + transform: rotate(39.375deg); +} +.month-text .char32 { + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +.month-text .char33 { + -moz-transform: rotate(50.625deg); + -o-transform: rotate(50.625deg); + -ms-transform: rotate(50.625deg); + -webkit-transform: rotate(50.625deg); + transform: rotate(50.625deg); +} +.month-text .char34 { + -moz-transform: rotate(56.25deg); + -o-transform: rotate(56.25deg); + -ms-transform: rotate(56.25deg); + -webkit-transform: rotate(56.25deg); + transform: rotate(56.25deg); +} +.month-text .char35 { + -moz-transform: rotate(61.875deg); + -o-transform: rotate(61.875deg); + -ms-transform: rotate(61.875deg); + -webkit-transform: rotate(61.875deg); + transform: rotate(61.875deg); +} +.month-text .char36 { + -moz-transform: rotate(67.5deg); + -o-transform: rotate(67.5deg); + -ms-transform: rotate(67.5deg); + -webkit-transform: rotate(67.5deg); + transform: rotate(67.5deg); +} +.month-text .char37 { + -moz-transform: rotate(73.125deg); + -o-transform: rotate(73.125deg); + -ms-transform: rotate(73.125deg); + -webkit-transform: rotate(73.125deg); + transform: rotate(73.125deg); +} +.month-text .char38 { + -moz-transform: rotate(78.75deg); + -o-transform: rotate(78.75deg); + -ms-transform: rotate(78.75deg); + -webkit-transform: rotate(78.75deg); + transform: rotate(78.75deg); +} +.month-text .char39 { + -moz-transform: rotate(84.375deg); + -o-transform: rotate(84.375deg); + -ms-transform: rotate(84.375deg); + -webkit-transform: rotate(84.375deg); + transform: rotate(84.375deg); +} +.month-text .char40 { + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} +.month-text .char41 { + -moz-transform: rotate(95.625deg); + -o-transform: rotate(95.625deg); + -ms-transform: rotate(95.625deg); + -webkit-transform: rotate(95.625deg); + transform: rotate(95.625deg); +} +.month-text .char42 { + -moz-transform: rotate(101.25deg); + -o-transform: rotate(101.25deg); + -ms-transform: rotate(101.25deg); + -webkit-transform: rotate(101.25deg); + transform: rotate(101.25deg); +} +.month-text .char43 { + -moz-transform: rotate(106.875deg); + -o-transform: rotate(106.875deg); + -ms-transform: rotate(106.875deg); + -webkit-transform: rotate(106.875deg); + transform: rotate(106.875deg); +} +.month-text .char44 { + -moz-transform: rotate(112.5deg); + -o-transform: rotate(112.5deg); + -ms-transform: rotate(112.5deg); + -webkit-transform: rotate(112.5deg); + transform: rotate(112.5deg); +} +.month-text .char45 { + -moz-transform: rotate(118.125deg); + -o-transform: rotate(118.125deg); + -ms-transform: rotate(118.125deg); + -webkit-transform: rotate(118.125deg); + transform: rotate(118.125deg); +} +.month-text .char46 { + -moz-transform: rotate(123.75deg); + -o-transform: rotate(123.75deg); + -ms-transform: rotate(123.75deg); + -webkit-transform: rotate(123.75deg); + transform: rotate(123.75deg); +} +.month-text .char47 { + -moz-transform: rotate(129.375deg); + -o-transform: rotate(129.375deg); + -ms-transform: rotate(129.375deg); + -webkit-transform: rotate(129.375deg); + transform: rotate(129.375deg); +} +.month-text .char48 { + -moz-transform: rotate(135deg); + -o-transform: rotate(135deg); + -ms-transform: rotate(135deg); + -webkit-transform: rotate(135deg); + transform: rotate(135deg); +} + +.day-dial { + width: 450px; + height: 450px; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + -o-transition: all 0.5s; + transition: all 0.5s; +} + +.day-preview span { + position: absolute; + top: calc(-25% + 45px); + left: calc(50% - 12.5px); + height: 450px; + width: 25px; +} + +.day-preview { + opacity: 0; + filter: alpha(opacity=0); +} +.day-preview .char1 { + -moz-transform: rotate(-22.5deg); + -o-transform: rotate(-22.5deg); + -ms-transform: rotate(-22.5deg); + -webkit-transform: rotate(-22.5deg); + transform: rotate(-22.5deg); +} +.day-preview .char2 { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); +} +.day-preview .char3 { + -moz-transform: rotate(22.5deg); + -o-transform: rotate(22.5deg); + -ms-transform: rotate(22.5deg); + -webkit-transform: rotate(22.5deg); + transform: rotate(22.5deg); +} +.day-preview .char4 { + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} + +.day-text span { + position: absolute; + top: calc(-25% + 55px); + left: calc(50% - 6px); + height: 432px; + width: 12px; +} + +.day-text { + opacity: 0; + filter: alpha(opacity=0); +} +.day-text .char1 { + -moz-transform: rotate(-132.09677deg); + -o-transform: rotate(-132.09677deg); + -ms-transform: rotate(-132.09677deg); + -webkit-transform: rotate(-132.09677deg); + transform: rotate(-132.09677deg); +} +.day-text .char2 { + -moz-transform: rotate(-129.19355deg); + -o-transform: rotate(-129.19355deg); + -ms-transform: rotate(-129.19355deg); + -webkit-transform: rotate(-129.19355deg); + transform: rotate(-129.19355deg); +} +.day-text .char3 { + -moz-transform: rotate(-126.29032deg); + -o-transform: rotate(-126.29032deg); + -ms-transform: rotate(-126.29032deg); + -webkit-transform: rotate(-126.29032deg); + transform: rotate(-126.29032deg); +} +.day-text .char4 { + -moz-transform: rotate(-123.3871deg); + -o-transform: rotate(-123.3871deg); + -ms-transform: rotate(-123.3871deg); + -webkit-transform: rotate(-123.3871deg); + transform: rotate(-123.3871deg); +} +.day-text .char5 { + -moz-transform: rotate(-120.48387deg); + -o-transform: rotate(-120.48387deg); + -ms-transform: rotate(-120.48387deg); + -webkit-transform: rotate(-120.48387deg); + transform: rotate(-120.48387deg); +} +.day-text .char6 { + -moz-transform: rotate(-117.58065deg); + -o-transform: rotate(-117.58065deg); + -ms-transform: rotate(-117.58065deg); + -webkit-transform: rotate(-117.58065deg); + transform: rotate(-117.58065deg); +} +.day-text .char7 { + -moz-transform: rotate(-114.67742deg); + -o-transform: rotate(-114.67742deg); + -ms-transform: rotate(-114.67742deg); + -webkit-transform: rotate(-114.67742deg); + transform: rotate(-114.67742deg); +} +.day-text .char8 { + -moz-transform: rotate(-111.77419deg); + -o-transform: rotate(-111.77419deg); + -ms-transform: rotate(-111.77419deg); + -webkit-transform: rotate(-111.77419deg); + transform: rotate(-111.77419deg); +} +.day-text .char9 { + -moz-transform: rotate(-108.87097deg); + -o-transform: rotate(-108.87097deg); + -ms-transform: rotate(-108.87097deg); + -webkit-transform: rotate(-108.87097deg); + transform: rotate(-108.87097deg); +} +.day-text .char10 { + -moz-transform: rotate(-105.96774deg); + -o-transform: rotate(-105.96774deg); + -ms-transform: rotate(-105.96774deg); + -webkit-transform: rotate(-105.96774deg); + transform: rotate(-105.96774deg); +} +.day-text .char11 { + -moz-transform: rotate(-103.06452deg); + -o-transform: rotate(-103.06452deg); + -ms-transform: rotate(-103.06452deg); + -webkit-transform: rotate(-103.06452deg); + transform: rotate(-103.06452deg); +} +.day-text .char12 { + -moz-transform: rotate(-100.16129deg); + -o-transform: rotate(-100.16129deg); + -ms-transform: rotate(-100.16129deg); + -webkit-transform: rotate(-100.16129deg); + transform: rotate(-100.16129deg); +} +.day-text .char13 { + -moz-transform: rotate(-97.25806deg); + -o-transform: rotate(-97.25806deg); + -ms-transform: rotate(-97.25806deg); + -webkit-transform: rotate(-97.25806deg); + transform: rotate(-97.25806deg); +} +.day-text .char14 { + -moz-transform: rotate(-94.35484deg); + -o-transform: rotate(-94.35484deg); + -ms-transform: rotate(-94.35484deg); + -webkit-transform: rotate(-94.35484deg); + transform: rotate(-94.35484deg); +} +.day-text .char15 { + -moz-transform: rotate(-91.45161deg); + -o-transform: rotate(-91.45161deg); + -ms-transform: rotate(-91.45161deg); + -webkit-transform: rotate(-91.45161deg); + transform: rotate(-91.45161deg); +} +.day-text .char16 { + -moz-transform: rotate(-88.54839deg); + -o-transform: rotate(-88.54839deg); + -ms-transform: rotate(-88.54839deg); + -webkit-transform: rotate(-88.54839deg); + transform: rotate(-88.54839deg); +} +.day-text .char17 { + -moz-transform: rotate(-85.64516deg); + -o-transform: rotate(-85.64516deg); + -ms-transform: rotate(-85.64516deg); + -webkit-transform: rotate(-85.64516deg); + transform: rotate(-85.64516deg); +} +.day-text .char18 { + -moz-transform: rotate(-82.74194deg); + -o-transform: rotate(-82.74194deg); + -ms-transform: rotate(-82.74194deg); + -webkit-transform: rotate(-82.74194deg); + transform: rotate(-82.74194deg); +} +.day-text .char19 { + -moz-transform: rotate(-79.83871deg); + -o-transform: rotate(-79.83871deg); + -ms-transform: rotate(-79.83871deg); + -webkit-transform: rotate(-79.83871deg); + transform: rotate(-79.83871deg); +} +.day-text .char20 { + -moz-transform: rotate(-76.93548deg); + -o-transform: rotate(-76.93548deg); + -ms-transform: rotate(-76.93548deg); + -webkit-transform: rotate(-76.93548deg); + transform: rotate(-76.93548deg); +} +.day-text .char21 { + -moz-transform: rotate(-74.03226deg); + -o-transform: rotate(-74.03226deg); + -ms-transform: rotate(-74.03226deg); + -webkit-transform: rotate(-74.03226deg); + transform: rotate(-74.03226deg); +} +.day-text .char22 { + -moz-transform: rotate(-71.12903deg); + -o-transform: rotate(-71.12903deg); + -ms-transform: rotate(-71.12903deg); + -webkit-transform: rotate(-71.12903deg); + transform: rotate(-71.12903deg); +} +.day-text .char23 { + -moz-transform: rotate(-68.22581deg); + -o-transform: rotate(-68.22581deg); + -ms-transform: rotate(-68.22581deg); + -webkit-transform: rotate(-68.22581deg); + transform: rotate(-68.22581deg); +} +.day-text .char24 { + -moz-transform: rotate(-65.32258deg); + -o-transform: rotate(-65.32258deg); + -ms-transform: rotate(-65.32258deg); + -webkit-transform: rotate(-65.32258deg); + transform: rotate(-65.32258deg); +} +.day-text .char25 { + -moz-transform: rotate(-62.41935deg); + -o-transform: rotate(-62.41935deg); + -ms-transform: rotate(-62.41935deg); + -webkit-transform: rotate(-62.41935deg); + transform: rotate(-62.41935deg); +} +.day-text .char26 { + -moz-transform: rotate(-59.51613deg); + -o-transform: rotate(-59.51613deg); + -ms-transform: rotate(-59.51613deg); + -webkit-transform: rotate(-59.51613deg); + transform: rotate(-59.51613deg); +} +.day-text .char27 { + -moz-transform: rotate(-56.6129deg); + -o-transform: rotate(-56.6129deg); + -ms-transform: rotate(-56.6129deg); + -webkit-transform: rotate(-56.6129deg); + transform: rotate(-56.6129deg); +} +.day-text .char28 { + -moz-transform: rotate(-53.70968deg); + -o-transform: rotate(-53.70968deg); + -ms-transform: rotate(-53.70968deg); + -webkit-transform: rotate(-53.70968deg); + transform: rotate(-53.70968deg); +} +.day-text .char29 { + -moz-transform: rotate(-50.80645deg); + -o-transform: rotate(-50.80645deg); + -ms-transform: rotate(-50.80645deg); + -webkit-transform: rotate(-50.80645deg); + transform: rotate(-50.80645deg); +} +.day-text .char30 { + -moz-transform: rotate(-47.90323deg); + -o-transform: rotate(-47.90323deg); + -ms-transform: rotate(-47.90323deg); + -webkit-transform: rotate(-47.90323deg); + transform: rotate(-47.90323deg); +} +.day-text .char31 { + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.day-text .char32 { + -moz-transform: rotate(-42.09677deg); + -o-transform: rotate(-42.09677deg); + -ms-transform: rotate(-42.09677deg); + -webkit-transform: rotate(-42.09677deg); + transform: rotate(-42.09677deg); +} +.day-text .char33 { + -moz-transform: rotate(-39.19355deg); + -o-transform: rotate(-39.19355deg); + -ms-transform: rotate(-39.19355deg); + -webkit-transform: rotate(-39.19355deg); + transform: rotate(-39.19355deg); +} +.day-text .char34 { + -moz-transform: rotate(-36.29032deg); + -o-transform: rotate(-36.29032deg); + -ms-transform: rotate(-36.29032deg); + -webkit-transform: rotate(-36.29032deg); + transform: rotate(-36.29032deg); +} +.day-text .char35 { + -moz-transform: rotate(-33.3871deg); + -o-transform: rotate(-33.3871deg); + -ms-transform: rotate(-33.3871deg); + -webkit-transform: rotate(-33.3871deg); + transform: rotate(-33.3871deg); +} +.day-text .char36 { + -moz-transform: rotate(-30.48387deg); + -o-transform: rotate(-30.48387deg); + -ms-transform: rotate(-30.48387deg); + -webkit-transform: rotate(-30.48387deg); + transform: rotate(-30.48387deg); +} +.day-text .char37 { + -moz-transform: rotate(-27.58065deg); + -o-transform: rotate(-27.58065deg); + -ms-transform: rotate(-27.58065deg); + -webkit-transform: rotate(-27.58065deg); + transform: rotate(-27.58065deg); +} +.day-text .char38 { + -moz-transform: rotate(-24.67742deg); + -o-transform: rotate(-24.67742deg); + -ms-transform: rotate(-24.67742deg); + -webkit-transform: rotate(-24.67742deg); + transform: rotate(-24.67742deg); +} +.day-text .char39 { + -moz-transform: rotate(-21.77419deg); + -o-transform: rotate(-21.77419deg); + -ms-transform: rotate(-21.77419deg); + -webkit-transform: rotate(-21.77419deg); + transform: rotate(-21.77419deg); +} +.day-text .char40 { + -moz-transform: rotate(-18.87097deg); + -o-transform: rotate(-18.87097deg); + -ms-transform: rotate(-18.87097deg); + -webkit-transform: rotate(-18.87097deg); + transform: rotate(-18.87097deg); +} +.day-text .char41 { + -moz-transform: rotate(-15.96774deg); + -o-transform: rotate(-15.96774deg); + -ms-transform: rotate(-15.96774deg); + -webkit-transform: rotate(-15.96774deg); + transform: rotate(-15.96774deg); +} +.day-text .char42 { + -moz-transform: rotate(-13.06452deg); + -o-transform: rotate(-13.06452deg); + -ms-transform: rotate(-13.06452deg); + -webkit-transform: rotate(-13.06452deg); + transform: rotate(-13.06452deg); +} +.day-text .char43 { + -moz-transform: rotate(-10.16129deg); + -o-transform: rotate(-10.16129deg); + -ms-transform: rotate(-10.16129deg); + -webkit-transform: rotate(-10.16129deg); + transform: rotate(-10.16129deg); +} +.day-text .char44 { + -moz-transform: rotate(-7.25806deg); + -o-transform: rotate(-7.25806deg); + -ms-transform: rotate(-7.25806deg); + -webkit-transform: rotate(-7.25806deg); + transform: rotate(-7.25806deg); +} +.day-text .char45 { + -moz-transform: rotate(-4.35484deg); + -o-transform: rotate(-4.35484deg); + -ms-transform: rotate(-4.35484deg); + -webkit-transform: rotate(-4.35484deg); + transform: rotate(-4.35484deg); +} +.day-text .char46 { + -moz-transform: rotate(-1.45161deg); + -o-transform: rotate(-1.45161deg); + -ms-transform: rotate(-1.45161deg); + -webkit-transform: rotate(-1.45161deg); + transform: rotate(-1.45161deg); +} +.day-text .char47 { + -moz-transform: rotate(1.45161deg); + -o-transform: rotate(1.45161deg); + -ms-transform: rotate(1.45161deg); + -webkit-transform: rotate(1.45161deg); + transform: rotate(1.45161deg); +} +.day-text .char48 { + -moz-transform: rotate(4.35484deg); + -o-transform: rotate(4.35484deg); + -ms-transform: rotate(4.35484deg); + -webkit-transform: rotate(4.35484deg); + transform: rotate(4.35484deg); +} +.day-text .char49 { + -moz-transform: rotate(7.25806deg); + -o-transform: rotate(7.25806deg); + -ms-transform: rotate(7.25806deg); + -webkit-transform: rotate(7.25806deg); + transform: rotate(7.25806deg); +} +.day-text .char50 { + -moz-transform: rotate(10.16129deg); + -o-transform: rotate(10.16129deg); + -ms-transform: rotate(10.16129deg); + -webkit-transform: rotate(10.16129deg); + transform: rotate(10.16129deg); +} +.day-text .char51 { + -moz-transform: rotate(13.06452deg); + -o-transform: rotate(13.06452deg); + -ms-transform: rotate(13.06452deg); + -webkit-transform: rotate(13.06452deg); + transform: rotate(13.06452deg); +} +.day-text .char52 { + -moz-transform: rotate(15.96774deg); + -o-transform: rotate(15.96774deg); + -ms-transform: rotate(15.96774deg); + -webkit-transform: rotate(15.96774deg); + transform: rotate(15.96774deg); +} +.day-text .char53 { + -moz-transform: rotate(18.87097deg); + -o-transform: rotate(18.87097deg); + -ms-transform: rotate(18.87097deg); + -webkit-transform: rotate(18.87097deg); + transform: rotate(18.87097deg); +} +.day-text .char54 { + -moz-transform: rotate(21.77419deg); + -o-transform: rotate(21.77419deg); + -ms-transform: rotate(21.77419deg); + -webkit-transform: rotate(21.77419deg); + transform: rotate(21.77419deg); +} +.day-text .char55 { + -moz-transform: rotate(24.67742deg); + -o-transform: rotate(24.67742deg); + -ms-transform: rotate(24.67742deg); + -webkit-transform: rotate(24.67742deg); + transform: rotate(24.67742deg); +} +.day-text .char56 { + -moz-transform: rotate(27.58065deg); + -o-transform: rotate(27.58065deg); + -ms-transform: rotate(27.58065deg); + -webkit-transform: rotate(27.58065deg); + transform: rotate(27.58065deg); +} +.day-text .char57 { + -moz-transform: rotate(30.48387deg); + -o-transform: rotate(30.48387deg); + -ms-transform: rotate(30.48387deg); + -webkit-transform: rotate(30.48387deg); + transform: rotate(30.48387deg); +} +.day-text .char58 { + -moz-transform: rotate(33.3871deg); + -o-transform: rotate(33.3871deg); + -ms-transform: rotate(33.3871deg); + -webkit-transform: rotate(33.3871deg); + transform: rotate(33.3871deg); +} +.day-text .char59 { + -moz-transform: rotate(36.29032deg); + -o-transform: rotate(36.29032deg); + -ms-transform: rotate(36.29032deg); + -webkit-transform: rotate(36.29032deg); + transform: rotate(36.29032deg); +} +.day-text .char60 { + -moz-transform: rotate(39.19355deg); + -o-transform: rotate(39.19355deg); + -ms-transform: rotate(39.19355deg); + -webkit-transform: rotate(39.19355deg); + transform: rotate(39.19355deg); +} +.day-text .char61 { + -moz-transform: rotate(42.09677deg); + -o-transform: rotate(42.09677deg); + -ms-transform: rotate(42.09677deg); + -webkit-transform: rotate(42.09677deg); + transform: rotate(42.09677deg); +} +.day-text .char62 { + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +.day-text .char63 { + -moz-transform: rotate(47.90323deg); + -o-transform: rotate(47.90323deg); + -ms-transform: rotate(47.90323deg); + -webkit-transform: rotate(47.90323deg); + transform: rotate(47.90323deg); +} +.day-text .char64 { + -moz-transform: rotate(50.80645deg); + -o-transform: rotate(50.80645deg); + -ms-transform: rotate(50.80645deg); + -webkit-transform: rotate(50.80645deg); + transform: rotate(50.80645deg); +} +.day-text .char65 { + -moz-transform: rotate(53.70968deg); + -o-transform: rotate(53.70968deg); + -ms-transform: rotate(53.70968deg); + -webkit-transform: rotate(53.70968deg); + transform: rotate(53.70968deg); +} +.day-text .char66 { + -moz-transform: rotate(56.6129deg); + -o-transform: rotate(56.6129deg); + -ms-transform: rotate(56.6129deg); + -webkit-transform: rotate(56.6129deg); + transform: rotate(56.6129deg); +} +.day-text .char67 { + -moz-transform: rotate(59.51613deg); + -o-transform: rotate(59.51613deg); + -ms-transform: rotate(59.51613deg); + -webkit-transform: rotate(59.51613deg); + transform: rotate(59.51613deg); +} +.day-text .char68 { + -moz-transform: rotate(62.41935deg); + -o-transform: rotate(62.41935deg); + -ms-transform: rotate(62.41935deg); + -webkit-transform: rotate(62.41935deg); + transform: rotate(62.41935deg); +} +.day-text .char69 { + -moz-transform: rotate(65.32258deg); + -o-transform: rotate(65.32258deg); + -ms-transform: rotate(65.32258deg); + -webkit-transform: rotate(65.32258deg); + transform: rotate(65.32258deg); +} +.day-text .char70 { + -moz-transform: rotate(68.22581deg); + -o-transform: rotate(68.22581deg); + -ms-transform: rotate(68.22581deg); + -webkit-transform: rotate(68.22581deg); + transform: rotate(68.22581deg); +} +.day-text .char71 { + -moz-transform: rotate(71.12903deg); + -o-transform: rotate(71.12903deg); + -ms-transform: rotate(71.12903deg); + -webkit-transform: rotate(71.12903deg); + transform: rotate(71.12903deg); +} +.day-text .char72 { + -moz-transform: rotate(74.03226deg); + -o-transform: rotate(74.03226deg); + -ms-transform: rotate(74.03226deg); + -webkit-transform: rotate(74.03226deg); + transform: rotate(74.03226deg); +} +.day-text .char73 { + -moz-transform: rotate(76.93548deg); + -o-transform: rotate(76.93548deg); + -ms-transform: rotate(76.93548deg); + -webkit-transform: rotate(76.93548deg); + transform: rotate(76.93548deg); +} +.day-text .char74 { + -moz-transform: rotate(79.83871deg); + -o-transform: rotate(79.83871deg); + -ms-transform: rotate(79.83871deg); + -webkit-transform: rotate(79.83871deg); + transform: rotate(79.83871deg); +} +.day-text .char75 { + -moz-transform: rotate(82.74194deg); + -o-transform: rotate(82.74194deg); + -ms-transform: rotate(82.74194deg); + -webkit-transform: rotate(82.74194deg); + transform: rotate(82.74194deg); +} +.day-text .char76 { + -moz-transform: rotate(85.64516deg); + -o-transform: rotate(85.64516deg); + -ms-transform: rotate(85.64516deg); + -webkit-transform: rotate(85.64516deg); + transform: rotate(85.64516deg); +} +.day-text .char77 { + -moz-transform: rotate(88.54839deg); + -o-transform: rotate(88.54839deg); + -ms-transform: rotate(88.54839deg); + -webkit-transform: rotate(88.54839deg); + transform: rotate(88.54839deg); +} +.day-text .char78 { + -moz-transform: rotate(91.45161deg); + -o-transform: rotate(91.45161deg); + -ms-transform: rotate(91.45161deg); + -webkit-transform: rotate(91.45161deg); + transform: rotate(91.45161deg); +} +.day-text .char79 { + -moz-transform: rotate(94.35484deg); + -o-transform: rotate(94.35484deg); + -ms-transform: rotate(94.35484deg); + -webkit-transform: rotate(94.35484deg); + transform: rotate(94.35484deg); +} +.day-text .char80 { + -moz-transform: rotate(97.25806deg); + -o-transform: rotate(97.25806deg); + -ms-transform: rotate(97.25806deg); + -webkit-transform: rotate(97.25806deg); + transform: rotate(97.25806deg); +} +.day-text .char81 { + -moz-transform: rotate(100.16129deg); + -o-transform: rotate(100.16129deg); + -ms-transform: rotate(100.16129deg); + -webkit-transform: rotate(100.16129deg); + transform: rotate(100.16129deg); +} +.day-text .char82 { + -moz-transform: rotate(103.06452deg); + -o-transform: rotate(103.06452deg); + -ms-transform: rotate(103.06452deg); + -webkit-transform: rotate(103.06452deg); + transform: rotate(103.06452deg); +} +.day-text .char83 { + -moz-transform: rotate(105.96774deg); + -o-transform: rotate(105.96774deg); + -ms-transform: rotate(105.96774deg); + -webkit-transform: rotate(105.96774deg); + transform: rotate(105.96774deg); +} +.day-text .char84 { + -moz-transform: rotate(108.87097deg); + -o-transform: rotate(108.87097deg); + -ms-transform: rotate(108.87097deg); + -webkit-transform: rotate(108.87097deg); + transform: rotate(108.87097deg); +} +.day-text .char85 { + -moz-transform: rotate(111.77419deg); + -o-transform: rotate(111.77419deg); + -ms-transform: rotate(111.77419deg); + -webkit-transform: rotate(111.77419deg); + transform: rotate(111.77419deg); +} +.day-text .char86 { + -moz-transform: rotate(114.67742deg); + -o-transform: rotate(114.67742deg); + -ms-transform: rotate(114.67742deg); + -webkit-transform: rotate(114.67742deg); + transform: rotate(114.67742deg); +} +.day-text .char87 { + -moz-transform: rotate(117.58065deg); + -o-transform: rotate(117.58065deg); + -ms-transform: rotate(117.58065deg); + -webkit-transform: rotate(117.58065deg); + transform: rotate(117.58065deg); +} +.day-text .char88 { + -moz-transform: rotate(120.48387deg); + -o-transform: rotate(120.48387deg); + -ms-transform: rotate(120.48387deg); + -webkit-transform: rotate(120.48387deg); + transform: rotate(120.48387deg); +} +.day-text .char89 { + -moz-transform: rotate(123.3871deg); + -o-transform: rotate(123.3871deg); + -ms-transform: rotate(123.3871deg); + -webkit-transform: rotate(123.3871deg); + transform: rotate(123.3871deg); +} +.day-text .char90 { + -moz-transform: rotate(126.29032deg); + -o-transform: rotate(126.29032deg); + -ms-transform: rotate(126.29032deg); + -webkit-transform: rotate(126.29032deg); + transform: rotate(126.29032deg); +} +.day-text .char91 { + -moz-transform: rotate(129.19355deg); + -o-transform: rotate(129.19355deg); + -ms-transform: rotate(129.19355deg); + -webkit-transform: rotate(129.19355deg); + transform: rotate(129.19355deg); +} +.day-text .char92 { + -moz-transform: rotate(132.09677deg); + -o-transform: rotate(132.09677deg); + -ms-transform: rotate(132.09677deg); + -webkit-transform: rotate(132.09677deg); + transform: rotate(132.09677deg); +} +.day-text .char93 { + -moz-transform: rotate(135deg); + -o-transform: rotate(135deg); + -ms-transform: rotate(135deg); + -webkit-transform: rotate(135deg); + transform: rotate(135deg); +} + +.ring-back { + opacity: 0.1; + filter: alpha(opacity=10); + width: 100%; + height: 100%; + border: solid 10px transparent; + border-radius: 50%; +} +.ring-back:before { + position: absolute; + top: 5px; + right: 5px; + bottom: 5px; + left: 5px; + border-radius: 50%; + border: solid 35px #FFFFFF; + content: " "; +} + +.ring { + position: relative; + top: -100%; + width: 100%; + height: 100%; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + -o-transition: all 0.5s; + transition: all 0.5s; + border: solid 45px #202020; + border-radius: 50%; + border-bottom-color: transparent; + box-shadow: 0px -2px 2px #000; +} + +.side-ring { + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + -o-transition: all 0.5s; + transition: all 0.5s; + width: 200px; + height: 200px; + background-color: #202020; + border-radius: 50%; + box-shadow: 0px 2px 2px #000; + color: #000; + overflow: hidden; +} + +#weather { + position: absolute; + top: calc(50% - 100px); + left: calc(20% - 100px); +} + +#steps { + position: absolute; + top: calc(50% - 100px); + left: calc(80% - 100px); +} + +.fa-cloud { + opacity: 0; + filter: alpha(opacity=0); + position: absolute; + top: calc(50% - 40px); + left: calc(50% - 40px); + color: #555; + font-size: 80px; +} + +.temperature { + opacity: 0; + filter: alpha(opacity=0); + position: absolute; + top: 10%; + left: 55%; + color: #FFCC00; + font-size: 20px; +} + +.bars { + opacity: 0; + filter: alpha(opacity=0); + position: relative; + top: calc(50% - 70px); + left: calc(50% - 65px); + width: 140px; + height: 140px; +} + +.bar { + width: 18px; + height: 140px; + margin: 0px -4px; +} + +.day-letter { + position: relative; + top: 110px; + color: #555; + font-size: 18px; + text-align: center; +} + +.x { + position: absolute; + bottom: 30px; + left: 1px; + width: 16px; + height: 2px; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + -o-transition: all 0.5s; + transition: all 0.5s; +} diff --git a/circular-calendar-display/index.haml b/circular-calendar-display/index.haml new file mode 100644 index 00000000..bd45bd68 --- /dev/null +++ b/circular-calendar-display/index.haml @@ -0,0 +1,51 @@ +.center-dial + %h1{:class => "center-preview"} HELLO + .head + .torso + .hand-container#minutes + .minute-hand + .hand-container#hours + .hour-hand + .hand-container#seconds + .second-hand +.day-name-dial + .ring-back + .ring#r1 + %h1{:class => "day-name-preview"} DAY NAME + %h2{:class => "day-name-text"} MON TUE WED THU FRI SAT SUN +.month-dial + .ring-back + .ring#r2 + %h1{:class => "month-preview"} MONTH + %h2{:class => "month-text"} JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC +.day-dial + .ring-back + .ring#r3 + %h1{:class => "day-preview"} DAY + %h2{:class => "day-text"} 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 +.side-ring#weather + .fa.fa-cloud + %p{:class => "temperature"} 14°C +.side-ring#steps + .bars + .bar + .day-letter M + .x#x1 + .bar + .day-letter T + .x#x2 + .bar + .day-letter W + .x#x3 + .bar + .day-letter T + .x#x4 + .bar + .day-letter F + .x#x5 + .bar + .day-letter S + .x#x6 + .bar + .day-letter S + .x#x7 \ No newline at end of file diff --git a/circular-calendar-display/index.html b/circular-calendar-display/index.html new file mode 100644 index 00000000..46c617b7 --- /dev/null +++ b/circular-calendar-display/index.html @@ -0,0 +1,100 @@ + + + + + Circular Calendar Display + + + + + + + + + + + + + + + +
+

HELLO

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

DAY NAME

+

MON TUE WED THU FRI SAT SUN

+
+
+
+
+
+

MONTH

+

JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC

+
+
+
+
+
+

DAY

+

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

+
+
+
+
+

14°C

+
+
+
+
+
M
+
+
+
+
T
+
+
+
+
W
+
+
+
+
T
+
+
+
+
F
+
+
+
+
S
+
+
+
+
S
+
+
+
+
+ + + + + + + + + diff --git a/circular-calendar-display/js/index.js b/circular-calendar-display/js/index.js new file mode 100644 index 00000000..ac9b4ff5 --- /dev/null +++ b/circular-calendar-display/js/index.js @@ -0,0 +1,150 @@ +/* + * Cirulcar Calendar Display.js + * Matthew Juggins + * Change log: + * 25/09/16 - Quick fix to day of the week + */ + +$(function() { + + var date, dayName, day, month, year; + var range = 270, + sectionsDayName = 7, + sectionsDay = 31, + sectionsMonth = 12, + charactersDayName = 3, + charactersDay = 2, + charactersMonth = 3, + dayColor = '#FF2D55', + monthColor = '#007AFF', + dayNameColor = '#4CD964'; + + + // Rotate the selected ring the correct amount and illuminate the correct characters of the ring text + function rotateRing(input, sections, characters, ring, text, color) { + var sectionWidth = range / sections; + var initialRotation = 135 - (sectionWidth / 2); + var rotateAmount = initialRotation - sectionWidth * (input - 1); + var start = (characters * (input - 1)) + (input - 1) + 1; + + $(ring).css({ + '-webkit-transform': 'rotate(' + rotateAmount + 'deg)', + '-moz-transform': 'rotate(' + rotateAmount + 'deg)', + '-ms-transform': 'rotate(' + rotateAmount + 'deg)', + 'transform': 'rotate(' + rotateAmount + 'deg)' + }); + + for (var i = start; i < start + characters; i++) { + $(text).children('.char' + i).css({ + 'color': color + }); + } + } + + // Get a new date object every second and update the rotation of the clock handles + function clockRotation() { + setInterval(function() { + var date = new Date(); + var seconds = date.getSeconds(); + var minutes = date.getMinutes(); + var hours = date.getHours(); + var secondsRotation = seconds * 6; + var minutesRotation = minutes * 6; + var hoursRotation = hours * 30 + (minutes / 2); + $("#seconds").css({ + '-webkit-transform': 'rotate(' + secondsRotation + 'deg)', + '-moz-transform': 'rotate(' + secondsRotation + 'deg)', + '-ms-transform': 'rotate(' + secondsRotation + 'deg)', + 'transform': 'rotate(' + secondsRotation + 'deg)' + }); + $("#minutes").css({ + '-webkit-transform': 'rotate(' + minutesRotation + 'deg)', + '-moz-transform': 'rotate(' + minutesRotation + 'deg)', + '-ms-transform': 'rotate(' + minutesRotation + 'deg)', + 'transform': 'rotate(' + minutesRotation + 'deg)' + }); + $("#hours").css({ + '-webkit-transform': 'rotate(' + hoursRotation + 'deg)', + '-moz-transform': 'rotate(' + hoursRotation + 'deg)', + '-ms-transform': 'rotate(' + hoursRotation + 'deg)', + 'transform': 'rotate(' + hoursRotation + 'deg)' + }); + }, 1000); + } + + // Give column representing passed days and the current day this week a height + function loadBars() { + for(var i = 1; i <= dayName; i++){ + var newHeight = (Math.floor(Math.random() * 85) + 5); + var newTop = 110 - newHeight; + $("#x"+i).css({ + 'height' : newHeight + 'px', + }); + } + } + + function init() { + $(".center-preview").lettering(); + $(".day-name-preview").lettering(); + $(".day-name-text").lettering(); + $(".day-preview").lettering(); + $(".day-text").lettering(); + $(".month-preview").lettering(); + $(".month-text").lettering(); + $('.day-preview').fadeTo(10, 1); + $('.month-preview').fadeTo(10, 1); + $('.day-name-preview').fadeTo(10, 1); + $('.center-preview').fadeTo(10, 1); + + // Get date variables + date = new Date(); + dayName = date.getDay(); // Day of week (1-7) + day = date.getDate(); // Get current date (1-31) + month = date.getMonth() + 1; // Current month (1-12) + if (dayName == 0) { + dayName = 7; + } + // Fade in/out second dial and rotate. Also fade in and animate side elements. + setTimeout(function() { + $('.day-preview').fadeTo(500, 0); + $('.day-text').fadeTo(500, 1, function() { + rotateRing(day, sectionsDay, charactersDay, '#r3', '.day-text', dayColor); + }); + }, 500); + + // Fade in/out second dial and rotate. Also fade in and animate side elements. + setTimeout(function() { + $('.month-preview').fadeTo(500, 0); + $('.fa-cloud').fadeTo(500, 1); + $('.temperature').fadeTo(500, 1); + $('.bars').fadeTo(500, 1); + $('.month-text').fadeTo(500, 1, function() { + rotateRing(month, sectionsMonth, charactersMonth, '#r2', '.month-text', monthColor); + loadBars(); + }); + }, 1000); + + // Fade in/out first dial and rotate + setTimeout(function() { + $('.day-name-preview').fadeTo(500, 0); + $('.day-name-text').fadeTo(500, 1, function() { + rotateRing(dayName, sectionsDayName, charactersDayName, '#r1', '.day-name-text', dayNameColor); + }); + }, 1500); + + // Fade in/out center dial + setTimeout(function() { + $('.center-preview').fadeTo(500, 0); + $('.head').fadeTo(500, 0); + $('.torso').fadeTo(500, 0); + $(".hand-container").fadeTo(500, 1, function() { + //console.log("Clock faded in"); + }); + }, 2000); + + // Begin clock rotation now it is visible + clockRotation(); + } + + init(); +}); \ No newline at end of file diff --git a/circular-calendar-display/license.md b/circular-calendar-display/license.md new file mode 100644 index 00000000..d39437a2 --- /dev/null +++ b/circular-calendar-display/license.md @@ -0,0 +1,10 @@ + + diff --git a/circular-calendar-display/scss/style.scss b/circular-calendar-display/scss/style.scss new file mode 100644 index 00000000..5a108172 --- /dev/null +++ b/circular-calendar-display/scss/style.scss @@ -0,0 +1,380 @@ +// VARIABLES +$background-grey: #292929; +$ring-back: #FFFFFF; +$ring-preview-characters: 6; +$bar-colors: #FF3B30, #FF9500, #FFCC00, #4CD964, #5AC8FA, #007AFF, #5856D6; + +$center-dial-size: 150px; +$day-name-size: 250px; +$month-size: 350px; +$day-size: 450px; +$h1-size: 25px; +$h2-size: 12px; +$side-ring-size: 200px; + +// MIXINS +@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) { + position: $position; + top: $top; + right: $right; + bottom: $bottom; + left: $left; +} + +@mixin absolute($args...) { + @include position(absolute, $args...); +} + +@mixin relative($args...) { + @include position(relative, $args...); +} + +@mixin fixed($args...) { + @include position(fixed, $args...); +} + +@mixin opacity($opacity) { + opacity: $opacity; + $opacity-ie: $opacity * 100; + filter: alpha(opacity=$opacity-ie); //IE8 +} + +@mixin size($width, $height: $width) { + width: $width; + height: $height; +} + +@mixin transition($args...) { + -webkit-transition: $args; + -moz-transition: $args; + -ms-transition: $args; + -o-transition: $args; + transition: $args; +} + +@mixin transition-delay($delay) { + -webkit-transition-delay: $delay; + -moz-transition-delay: $delay; + -ms-transition-delay: $delay; + -o-transition-delay: $delay; + transition-delay: $delay; +} + +@mixin transform($transforms) { + -moz-transform: $transforms; + -o-transform: $transforms; + -ms-transform: $transforms; + -webkit-transform: $transforms; + transform: $transforms; +} + +@mixin transform-origin ($origin) { + moz-transform-origin: $origin; + -o-transform-origin: $origin; + -ms-transform-origin: $origin; + -webkit-transform-origin: $origin; + transform-origin: $origin; +} + +@mixin rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg) { + $angle-per-char: $angle-span / $num-letters; + @for $i from 1 through $num-letters { + .char#{$i} { + @include transform(rotate($angle-offset + $angle-per-char * $i)); + } + } +} + +// LOOPS +@each $current-color in $bar-colors { + $i: index($bar-colors, $current-color); + #x#{$i} { + background: $current-color; + } +} + +@for $i from 1 to 8 { + .bar:nth-child(#{$i}) { + @include absolute($top: 0px, $left: 20px * ($i - 1)); + } +} + +// PLACEHOLDERS +%center { + @include absolute($top: 50%, $left: 50%); + transform: translateX(-50%) translateY(-50%); +} + +%center-inside { + @include relative($top: 50%, $left: 50%); + transform: translateX(-50%) translateY(-50%); +} + +%ring-text { + text-align: center; + @include transform-origin(center center); +} + +// TYPICAL ELEMENTS +* { + box-sizing: border-box; +} + +html, +body { + background: $background-grey; + border: 0; + font-family: 'Roboto Mono', monospace; + height: 100%; + margin: 0px; + width: 100%; +} + +h1 { + color: #555; + font-size: 25px; +} + +h2{ + color: #555; + font-size: 15px; +} + +// CLASSES AND IDS IN ORDER OF APPEARANCE IN HTML + +.center-dial { + @include absolute($top: calc(50% - 75px), $left: calc(50% - 75px)); + @include transition(all .5s); + @include size($center-dial-size); + background-color: #202020; + border-radius: 50%; color: #000; + box-shadow: 0px 2px 2px #000; + cursor: pointer; + overflow: hidden; +} + +.center-preview span { + @extend %ring-text; + @include absolute($top: 0%, $left: calc(50% - 12.5px)); + height: $center-dial-size; + width: $h1-size; +} + +.center-preview { + @include opacity(0); + @include rotated-text($num-letters: 6, $angle-span: 120deg, $angle-offset: -60deg); +} + +.head { + @extend %center-inside; + @include size(50px, 50px); + background: #FFF; + border-radius: 50%; +} + +.torso { + @include relative($top: calc(50% - 20px), $left: calc(50% - 50px)); + @include size(100px, 100px); + background: #FFF; + border-radius: 50%; +} + +.hand-container { + @extend %ring-text; + @include absolute($top: 0%, $left: calc(50% - 12.5px)); + @include opacity(0); + @include size($h1-size, $center-dial-size); + @include transform-origin(center center); +} + +.hour-hand { + @include size(10px, 50px); + @include relative($top: calc(50% - 45px), $left: calc(50% - 5px)); + @include transition(all .5s); + background: #FFF; + border-radius: 5px; +} + +.minute-hand { + @include size(10px, 70px); + @include relative($top: calc(50% - 65px), $left: calc(50% - 5px)); + background: #CCC; + border-radius: 5px; +} + +.second-hand { + @include size(2px, 70px); + @include relative($top: calc(50% - 69px), $left: calc(50% - 1px)); + background: #AAA; + border-radius: 1px; +} + +.day-name-dial { + @extend %center; + @include size($day-name-size); + @include transition(all .5s); +} + +.day-name-preview span { + @extend %ring-text; + @include absolute($top: calc(-25% - 5px), $left: calc(50% - 12.5px)); + height: $day-name-size; + width: $h1-size; +} + +.day-name-preview { + @include opacity(0); + @include rotated-text($num-letters: 9, $angle-span: 90deg, $angle-offset: -45deg); +} + +.day-name-text span { + @extend %ring-text; + @include absolute($top: calc(-25% + 5px), $left: calc(50% - 6px)); + height: 232px; + width: $h2-size; +} + +.day-name-text { + @include opacity(0); + @include rotated-text($num-letters: 28, $angle-span: 270deg, $angle-offset: -135deg); +} + +.month-dial { + @extend %center; + @include size($month-size); + @include transition(all .5s); +} + +.month-preview span { + @extend %ring-text; + @include absolute($top: calc(-25% + 20px), $left: calc(50% - 12.5px)); + height: $month-size; + width: $h1-size; +} + +.month-preview{ + @include opacity(0); + @include rotated-text($num-letters: 6, $angle-span: 90deg, $angle-offset: -45deg); +} + +.month-text span { + @extend %ring-text; + @include absolute($top: calc(-25% + 30px), $left: calc(50% - 6px)); + height: 332px; + width: $h2-size; +} + +.month-text{ + @include opacity(0); + @include rotated-text($num-letters: 48, $angle-span: 270deg, $angle-offset: -135deg); +} + +.day-dial { + @extend %center; + @include size(450px, 450px); + @include transition(all .5s); +} + +.day-preview span { + @extend %ring-text; + @include absolute($top: calc(-25% + 45px), $left: calc(50% - 12.5px)); + height: $day-size; + width: $h1-size; +} + +.day-preview{ + @include opacity(0); + @include rotated-text($num-letters: 4, $angle-span: 90deg, $angle-offset: -45deg); +} + +.day-text span { + @extend %ring-text; + @include absolute($top: calc(-25% + 55px), $left: calc(50% - 6px)); + height: 432px; + width: $h2-size; +} + +.day-text{ + @include opacity(0); + @include rotated-text($num-letters: 93, $angle-span: 270deg, $angle-offset: -135deg); +} + +.ring-back { + @include opacity(.1); + @include size(100%, 100%); + border: solid 10px transparent; + border-radius: 50%; + + &:before { + @include absolute($top: 5px, $left: 5px, $bottom: 5px, $right: 5px); + border-radius: 50%; + border: solid 35px $ring-back; + content: " "; + } +} + +.ring { + @include relative($top: -100%); + @include size(100%, 100%); + @include transition(all .5s); + border: solid 45px #202020; + border-radius: 50%; + border-bottom-color: transparent; + box-shadow: 0px -2px 2px #000; +} + +.side-ring { + @include transition(all .5s); + @include size($side-ring-size); + background-color: #202020; + border-radius: 50%; + box-shadow: 0px 2px 2px #000; + color: #000; + overflow: hidden; +} + +#weather { + @include absolute($top: calc(50% - 100px), $left: calc(20% - 100px)); +} + +#steps { + @include absolute($top: calc(50% - 100px), $left: calc(80% - 100px)); +} + +.fa-cloud { + @include opacity(0); + @include absolute($top: calc(50% - 40px), $left: calc(50% - 40px)); + color: #555; + font-size: 80px; +} + +.temperature { + @include opacity(0); + @include absolute($top: 10%, $left: 55%); + color: #FFCC00; + font-size: 20px; +} + +.bars { + @include opacity(0); + @include relative($top: calc(50% - 70px), $left: calc(50% - 65px)); + @include size(140px, 140px); +} + +.bar { + @include size(18px, 140px); + margin: 0px -4px; +} + +.day-letter { + @include relative($top: 110px); + color: #555; + font-size: 18px; + text-align: center; +} + +.x { + @include absolute($bottom: 30px, $left: 1px); + @include size(16px, 2px); + @include transition (all .5s); +} \ No newline at end of file diff --git a/css-dropdown/README.md b/css-dropdown/README.md new file mode 100644 index 00000000..4bed523c --- /dev/null +++ b/css-dropdown/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/tadaima/pen/qaVxdP. + + A Sassy-Select emulation. \ No newline at end of file diff --git a/css-dropdown/config.rb b/css-dropdown/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/css-dropdown/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/css-dropdown/css/style.css b/css-dropdown/css/style.css new file mode 100644 index 00000000..d974c3a9 --- /dev/null +++ b/css-dropdown/css/style.css @@ -0,0 +1,122 @@ +.dropdown { + width: 15em; + position: relative; +} +.dropdown__trigger { + display: inline-block; + position: absolute; + top: 0; + width: 100%; + height: 4.2em; + padding: 1.4em; + box-sizing: border-box; + opacity: 0; + z-index: 2; + cursor: pointer; +} +.dropdown__trigger__icon { + position: absolute; + padding: 0.7em; + right: 0; + top: .2em; +} +.dropdown__trigger:focus { + top: -200em; +} +.dropdown__trigger:focus ~ .dropdown__trigger__icon .svg-icon { + opacity: .25; +} +.dropdown__trigger:focus ~ .dropdown__list__item--title { + height: 2.8em; +} +.dropdown__trigger:focus ~ .dropdown__list li .dropdown__list__item { + height: 2.8em; +} +.dropdown__trigger:focus ~ .dropdown__list li .dropdown__list__item:hover { + -webkit-transition-duration: 0.6s; + transition-duration: 0.6s; + opacity: 1; + background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0.1em, transparent 0.1em); + background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0.1em, transparent 0.1em); + background-position: 100% bottom; +} +.dropdown__trigger:focus ~ .dropdown__list li .dropdown__list__radio:checked + .dropdown__list__item { + padding: 0 0.7em; + border: 1px dashed rgba(255, 255, 255, 0.2); + border-top: 0; + border-bottom: 0; +} +.dropdown__list { + overflow: auto; + max-height: 15.4em; + width: 100%; + -webkit-transition: all 0.1s cubic-bezier(0.54, -0.24, 0.46, 1.28); + transition: all 0.1s cubic-bezier(0.54, -0.24, 0.46, 1.28); + -webkit-transition-delay: .15s; + transition-delay: .15s; +} +.dropdown__list__radio { + display: none; +} +.dropdown__list__radio:checked + .dropdown__list__item { + height: 2.8em; + padding: 0 2.8em 0 0.7em; + opacity: 1; + background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0.1em, transparent 0.1em); + background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0.1em, transparent 0.1em); + -webkit-animation: onActive 0.2s cubic-bezier(0.54, -0.24, 0.46, 1.28) forwards; + animation: onActive 0.2s cubic-bezier(0.54, -0.24, 0.46, 1.28) forwards; +} +.dropdown__list__item { + height: 0; + overflow: hidden; + padding: 0 0.7em; + -webkit-transition: all 0.1s cubic-bezier(0.54, -0.24, 0.46, 1.28); + transition: all 0.1s cubic-bezier(0.54, -0.24, 0.46, 1.28); + -webkit-transition-delay: .15s; + transition-delay: .15s; + color: #FFFFFF; + font-family: 'Playfair Display', serif; + font-style: italic; + cursor: pointer; + color: #FFFFFF; + background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0.1em, transparent 0.1em); + background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0.1em, transparent 0.1em); + background-size: .4em 1px; + background-repeat: repeat-x; + background-position: 0 bottom; + opacity: .5; +} +.dropdown__list__item--title { + z-index: 1; + position: relative; + pointer-events: none; + opacity: 1; + background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0.1em, transparent 0.1em); + background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0.1em, transparent 0.1em); +} + +.svg-icon { + -webkit-transition: all 0.5s cubic-bezier(0.54, -0.24, 0.46, 1.28); + transition: all 0.5s cubic-bezier(0.54, -0.24, 0.46, 1.28); +} + +@-webkit-keyframes onActive { + 0%, + 100% { + background-color: rgba(255, 255, 255, 0); + } + 50% { + background-color: rgba(255, 255, 255, 0.25); + } +} + +@keyframes onActive { + 0%, + 100% { + background-color: rgba(255, 255, 255, 0); + } + 50% { + background-color: rgba(255, 255, 255, 0.25); + } +} diff --git a/css-dropdown/index.html b/css-dropdown/index.html new file mode 100644 index 00000000..2eb28bee --- /dev/null +++ b/css-dropdown/index.html @@ -0,0 +1,208 @@ + + + + + CSS Dropdown + CSS Dropdown + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Dit icon. + For interactions. + + + + + Arrow icon. + For interactions. + + + + Eye icon. + For toggleable elements. + + + + Firefox icon. + Support for this browser. + + + + Chrome icon. + Support for this browser. + + + + Safari icon. + Support for this browser. + + + + Edge icon. + Support for this browser. + + + + iExplorer icon. + Support for this browser. + + + + +
+
+
+

CSS Dropdown

+
+
+
+

A Sassy-Select emulation.

+
+
+
+ + + +
+ + + +
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+
+
+
+

+ + Tadaima Studio. + A group of digital interface crafters. + + + + + + + + + + + + + +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/css-dropdown/index.jade b/css-dropdown/index.jade new file mode 100644 index 00000000..1f769749 --- /dev/null +++ b/css-dropdown/index.jade @@ -0,0 +1,111 @@ +svg.svg-icon__sprite + defs + symbol#dot(viewbox='0 0 32 32') + title Dit icon. + desc For interactions. + circle(cx='16' cy='16' r='14' fill='none' stroke-width='3') + circle(cx='16' cy='16' r='4' fill='none' stroke-width='3') + symbol#arrow(viewbox='0 0 32 32') + title Arrow icon. + desc For interactions. + path(d='M12.8 3c.4 0 .8.2 1.1.5s.5.7.5 1.1c0 .5-.2.8-.5 1.1l-8.5 8.5h24.9c.4 0 .8.2 1.1.5.3.3.5.7.5 1.1s-.2.8-.5 1.1c-.3.3-.7.5-1.1.5H5.5l8.5 8.5c.3.3.5.7.5 1.1 0 .4-.2.8-.5 1.1s-.7.5-1.1.5c-.4 0-.8-.2-1.1-.5L.5 17c-.3-.3-.5-.7-.5-1.1s.2-.8.5-1.1L11.7 3.5c.3-.3.7-.5 1.1-.5z') + symbol#eye(viewbox='0 0 32 32') + title Eye icon. + desc For toggleable elements. + path(d='M16 4c1.5 0 2.9.2 4.2.7 1.4.4 2.6 1 3.6 1.7s2 1.5 2.9 2.3 1.7 1.7 2.3 2.6 1.2 1.6 1.6 2.3c.5.7.8 1.3 1 1.7l.4.7c0 .1-.1.2-.2.4s-.3.5-.6 1.1-.6 1.1-1 1.6-.8 1.2-1.4 1.9c-.6.7-1.2 1.4-1.8 2s-1.3 1.2-2.2 1.9c-.8.6-1.7 1.2-2.6 1.6s-1.9.8-3 1.1c-.9.3-2.1.4-3.2.4-1.5 0-2.9-.2-4.2-.7s-2.6-1-3.6-1.7-2-1.5-2.9-2.3-1.7-1.7-2.3-2.5-1.2-1.6-1.6-2.3-.8-1.3-1-1.7l-.4-.7c0-.1.1-.2.2-.4s.3-.5.6-1.1.6-1.1 1-1.6.8-1.2 1.4-1.9 1.2-1.4 1.8-2 1.3-1.2 2.2-1.9S8.8 6 9.7 5.5c.9-.4 1.9-.8 3-1.1S14.9 4 16 4zm0 2.7c-1 0-1.9.1-2.9.4s-1.8.6-2.5 1c-.8.4-1.5.8-2.2 1.4-.7.6-1.3 1.1-1.9 1.7S5.5 12.4 5 13s-.9 1.2-1.2 1.7c-.3.5-.6.9-.8 1.4.3.5.5.9.8 1.4s.7 1 1.2 1.6l1.5 1.8s1.1 1.1 1.9 1.7c.7.6 1.5 1.1 2.2 1.5.8.4 1.6.7 2.5 1s1.9.4 2.9.4 1.9-.1 2.9-.4c.9-.3 1.8-.6 2.5-1s1.5-.9 2.2-1.5c.7-.6 1.3-1.1 1.9-1.7l1.5-1.8 1.2-1.6c.3-.5.6-.9.8-1.4-.3-.5-.5-.9-.8-1.4-.3-.5-.7-1-1.2-1.6l-1.5-1.8c-.5-.6-1.1-1.1-1.9-1.7-.7-.6-1.5-1.1-2.2-1.5-.8-.4-1.6-.7-2.5-1S17 6.7 16 6.7zm0 4c1.5 0 2.7.5 3.8 1.6 1 1 1.6 2.3 1.6 3.8s-.5 2.7-1.6 3.8c-1 1-2.3 1.6-3.8 1.6s-2.7-.5-3.8-1.6c-1-1-1.6-2.3-1.6-3.8s.5-2.7 1.6-3.8 2.3-1.6 3.8-1.6zm0 2.6c-.7 0-1.4.3-1.9.8s-.8 1.1-.8 1.9.3 1.4.8 1.9 1.1.8 1.9.8 1.4-.3 1.9-.8.8-1.1.8-1.9-.3-1.4-.8-1.9-1.2-.8-1.9-.8z') + symbol#firefox(viewbox='0 0 32 32') + title Firefox icon. + desc Support for this browser. + path(d='M31.8 10.6l-.4 2.4s-.5-4.4-1.2-6c-1-2.5-1.4-2.5-1.4-2.5.7 1.7.5 2.6.5 2.6S28.1 3.9 25 2.9c-3.4-1.1-5.3-.8-5.5-.8h-.1.1s3.8.7 4.5 1.6c0 0-1.6 0-3.2.5-.1 0 5.9.7 7.1 6.7 0 0-.7-1.4-1.5-1.6.5 1.6.4 4.7-.1 6.2-.1.2-.1-.8-1.1-1.3.3 2.3 0 5.9-1.6 6.9-.1.1 1-3.6.2-2.2-4.4 6.8-9.6 3.1-12 1.5 1.2.3 3.5 0 4.5-.8 1.1-.8 1.7-1.3 2.3-1.2.6.1 1-.5.5-1s-1.6-1.2-3-.8c-1.1.3-2.4 1.4-4.3.3-1.5-.9-1.7-1.7-1.7-2.2 0-.2.1-.4.1-.5.2-.5.7-.6 1-.8.5.1.9.2 1.4.5v-.6c0-.1 0-.3-.1-.7 0-.3-.1-.6-.2-.9 0-.1.4-.4.8-.7.4-.3.8-.5 1.2-.8.5-.2.7-.3.7-.4l.1-.1c.2-.1.4-.4.5-.9v-.1-.2-.1c-.1-.1-.3-.2-1.1-.2h-1.4c-1 0-1.6-1-1.8-1.4.2-1.4 1-2.4 2.1-3 .2-.1-2.8 0-4.2 1.8-1.1-.4-2.2-.4-3.1-.2-.2 0-.4 0-.7-.1-.6-.5-1.5-1.6-1.6-2.8 0 0-1.9 1.4-1.6 5.4v.2c-.5.6-.7 1.2-.7 1.3-.5.9-.9 2.3-1.3 4.4 0 0 .3-.8.8-1.8-.4 1.2-.7 3-.5 5.8 0 0 0-.6.2-1.5.1 1.7.7 3.8 2.1 6.3 2.8 4.7 7 7.1 11.7 7.5.8.1 1.7.1 2.5 0h.2c1-.1 1.9-.2 2.9-.4 13.1-3.2 11.7-19.1 11.7-19.1z') + symbol#chrome(viewbox='0 0 32 32') + title Chrome icon. + desc Support for this browser. + path(d='M8.2 14.1L3.7 6.3c2.9-3.6 7.4-6 12.4-6C21.9.3 27 3.4 29.7 8.1H16.1c-3.8 0-7 2.5-7.9 6zm13.6-3.7h9.1c.7 1.8 1.1 3.7 1.1 5.8 0 8.7-7 15.7-15.7 15.8l6.5-11.2c.9-1.3 1.4-2.9 1.4-4.6 0-2.3-.9-4.3-2.4-5.8zm-11.5 5.8c0-3.2 2.6-5.8 5.8-5.8s5.8 2.6 5.8 5.8-2.6 5.8-5.8 5.8-5.8-2.7-5.8-5.8zm8 7.8l-4.5 7.9C6.1 30.7.2 24.1.2 16.2c0-2.8.7-5.5 2-7.8l6.5 11.2c1.3 2.8 4.1 4.7 7.3 4.7.8 0 1.6-.1 2.3-.3z') + symbol#safari(viewbox='0 0 32 32') + title Safari icon. + desc Support for this browser. + path(d='M16.1.3C7.3.3.2 7.4.2 16.2S7.3 32 16.1 32s15.8-7.1 15.8-15.8S24.8.3 16.1.3zM29.9 15v-.3.3zm-2.2-6.4l-.2-.3c.1.1.2.2.2.3zm-.8-1.1l-.1-.2s0 .1.1.2zm-2-2l-.2-.1c.1 0 .2.1.2.1zm-1-.8l-.3-.2c.1.1.2.2.3.2zm-6.3-2.3h-.3.3zm-2.7 0h-.3.3zM8.6 4.5l-.4.2c.1 0 .2-.1.4-.2zm-1.2.9l-.2.1c.1 0 .1-.1.2-.1zm-2 1.9l-.1.2c0-.1.1-.1.1-.2zm-.7 1l-.3.3.3-.3zm-2.4 6.3v0zm0 2.8v0zm2.1 6.3l.3.3-.3-.3zm.3.4l2.5-1.7-.3-.4-2.5 1.7C3.3 22 2.5 20 2.3 17.8l1.5-.1v-.5l-1.5.1v-.9h3v-.5h-3V15l1.5.1v-.5l-1.5-.1c.2-2.2 1-4.2 2.1-5.9l2.5 1.7.3-.4-2.5-1.6c.2-.3.3-.5.5-.7l1.1.9.3-.4-1.1-.9c.2-.2.4-.5.6-.7l2.1 2.1.4-.4-2.1-2 .6-.6.9 1.2.4-.3-.9-1.2c.2-.2.5-.4.7-.5l1.7 2.5.3-.3-1.6-2.5c1.7-1.1 3.7-1.9 5.9-2.1l.1 1.5h.5L15 2.3h.9v3h.5v-3h.9l-.1 1.5h.5l.1-1.5c2.2.2 4.2 1 5.9 2.1L21.9 7l.4.3L24 4.8c.2.2.5.3.7.5l-.9 1.1.4.3.9-1.1.6.6-.8.8-10.8 7.2L6.9 25l-.8.8-.6-.6 1.1-.9-.3-.4-1.1.9c-.2-.3-.3-.5-.5-.7zm.7.9c0-.1-.1-.1-.1-.2l.1.2zm1.8 1.8l.2.2-.2-.2zm1 .8l.3.2c-.1-.1-.2-.1-.3-.2zm6.3 2.3h.3c0 .1-.2.1-.3 0zm2.8.1h.3-.3zm6.3-2.2l.3-.2c-.1.1-.2.1-.3.2zm1.2-.8l.2-.1c-.1 0-.2 0-.2.1zm1.1-1zm.8-1l.1-.2c0 .1 0 .2-.1.2zm.3-.2l-1.1-.9-.3.4 1.1.9-.6.6-2.1-2.1-.4.4 2.1 2.1-.6.6-.9-1.2-.4.3.9 1.1c-.2.2-.5.4-.7.5L22.3 25l-.4.3 1.7 2.5c-1.7 1.1-3.7 1.9-5.9 2.1l-.1-1.5h-.5l.1 1.5h-.9v-3h-.5v3h-.9l.1-1.5h-.5l-.1 1.5c-2.2-.2-4.2-1-5.9-2.1l1.7-2.5-.4-.3-1.6 2.5c-.2-.2-.5-.3-.7-.5l.9-1.1-.4-.3-.9 1.1-.6-.6.8-.8 10.8-7.2 7.2-10.8.8-.8.6.6-1.1.9.3.4 1.1-.8c.2.2.4.5.5.7L25 9.9l.3.4 2.5-1.7c1.1 1.7 1.9 3.7 2.1 5.9l-1.5.1v.5l1.5-.1v.9h-3v.5h3v.9l-1.5-.1v.5l1.5.1c-.2 2.2-1 4.2-2.1 5.9L25.3 22l-.3.4 2.5 1.7c-.2.2-.4.4-.5.7zm2.9-7.4v.3-.3zm-2.2 6.3c-.1.1-.1.2-.2.3l.2-.3z') + symbol#edge(viewbox='0 0 32 32') + title Edge icon. + desc Support for this browser. + path(d='M1.7 13.9C2.7 6.7 7.6.1 16.5 0c5.4.1 9.8 2.5 12.4 7.2 1.3 2.4 1.7 5 1.8 7.8v3.3H11c.1 8.1 12 7.8 17.1 4.3v6.6c-3 1.8-9.8 3.4-15 1.3-4.5-1.7-7.7-6.4-7.6-10.9-.3-5.9 2.8-9.8 7.5-12-1 1.2-1.8 2.6-2.2 5H22S22.7 6 15.7 6c-6.6.2-11.3 4-14 7.9z') + symbol#explorer(viewbox='0 0 32 32') + title iExplorer icon. + desc Support for this browser. + path(d='M23.8 17.5H31c.1-.5.1-1 .1-1.5 0-2.5-.7-4.8-1.8-6.8 1.2-3.2 1.1-5.9-.4-7.5-1.5-1.5-5.6-1.3-10.2.8h-1C11.3 2.5 6 6.9 4.6 12.7c2-2.5 4.1-4.4 6.9-5.7-.3.2-1.7 1.7-2 2-7.3 7.3-9.7 16.9-7.2 19.4 1.9 1.9 5.3 1.6 9.3-.4 1.8.9 3.9 1.5 6.1 1.5 5.9 0 10.9-3.8 12.8-9.1h-7.3c-1 1.9-3 3.1-5.2 3.1s-4.2-1.3-5.2-3.1c-.4-.8-.7-1.8-.7-2.8l11.7-.1zM12 14c.2-3 2.6-5.4 5.7-5.4s5.5 2.4 5.7 5.4H12zM28.8 3.3c1 1 1 3 .1 5.3-1.5-2.3-3.7-4.1-6.3-5.1 2.8-1.2 5.1-1.4 6.2-.2zM4.2 27.9c-1.3-1.3-.9-4.1.8-7.4 1.1 3 3.1 5.4 5.7 7-2.9 1.4-5.3 1.6-6.5.4z') + + main.flexy__item.flexy--items-center.flexy--justify-center.flexy--column + section.section.flexy__item.flexy--column.flexy--items-center.space--big + header.header.accessible-hide + h2 CSS Dropdown + article.section__article.flexy__item.flexy--column.flexy--items-center + header.header.accessible-hide + h3 A Sassy-Select emulation. + form + fieldset.dropdown + input.dropdown__trigger(type='text' readonly value='Select an option' id='dropdown__trigger') + input.dropdown__list__radio(type='radio' id='option-null' disabled checked name='radio-group' value='null') + label.dropdown__list__item.dropdown__list__item--title.flexy__child.flexy__item.flexy--items-center(for='option-null') Select a product + .dropdown__trigger__icon.flexy__item.flexy--items-center + svg(class='svg-icon stroke--white') + use.use(xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#dot') + ul.dropdown__list + - var n = 1 + while n < 10 + - randomNumber = Math.floor(Math.random() * 137) + 28 + li.flexy__item + input.dropdown__list__radio(type='radio' id='option-#{n}' name='radio-group' value='value_#{n}') + label.dropdown__list__item.flexy__child.flexy__item.flexy--items-center.flexy--between(for='option-#{n}') Product #{n} + span.dropdown__list__item--amount #{randomNumber} € + - n++ + header.header + h1 + a(href='http://tadaima.studio' title='Go to Tadaima') + svg.logo-tadaima.fill--white(xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 80 80') + title Tadaima Studio. + desc A group of digital interface crafters. + //- path.st5(d='M172.5,30.6c0-1.5,1.2-2.6,2.6-2.6c1.4,0,2.6,1.1,2.6,2.6c0,1.4-1.2,2.5-2.6,2.5 C173.7,33.1,172.5,32,172.5,30.6z M105.9,51.4c-1.7,0.5-2.6,0.7-3.9,0.7c-3.7,0-6.1-2.5-6.1-6.6v-6.2H92v-3.5h3.9v-4.9h3.8v4.9h5.6 v3.5h-5.6v6.2c0,2.1,1.1,3,3,3c0.9,0,1.8-0.2,2.6-0.4L105.9,51.4z M123.9,48h2.5v3.5h-6.4v-1.1c-1.3,0.9-2.9,1.5-4.8,1.5 c-4.4,0-7.9-3.7-7.9-8.2c0-4.6,3.5-8.3,7.9-8.3c1.9,0,3.5,0.5,4.8,1.5v-1.1h6.4v3.5h-2.5V48z M120.1,46.8v-6.2 c-1.4-1.3-2.8-1.8-4.3-1.8c-2.7,0-4.7,2.3-4.7,4.9c0,2.6,2,4.9,4.7,4.9C117.3,48.6,118.7,48.1,120.1,46.8z M147.6,51.6h-6.4v-1.1 c-1.3,1-2.9,1.5-4.8,1.5c-4.4,0-7.9-3.7-7.9-8.3c0-4.6,3.5-8.2,7.9-8.2c1.9,0,3.5,0.5,4.8,1.5v-5.5h-2.5v-3.5h6.4V48h2.5V51.6z M141.2,46.8v-6c-1.4-1.5-2.8-2-4.3-2c-2.7,0-4.7,2.3-4.7,4.9c0,2.6,2,4.9,4.7,4.9C138.5,48.6,139.9,48.1,141.2,46.8z M166.2,48h2.5 v3.5h-6.4v-1.1c-1.3,0.9-2.9,1.5-4.8,1.5c-4.4,0-7.9-3.7-7.9-8.2c0-4.6,3.5-8.3,7.9-8.3c1.9,0,3.5,0.5,4.8,1.5v-1.1h6.4v3.5h-2.5V48 z M162.4,46.8v-6.2c-1.4-1.3-2.8-1.8-4.3-1.8c-2.7,0-4.7,2.3-4.7,4.9c0,2.6,2,4.9,4.7,4.9C159.6,48.6,161,48.1,162.4,46.8z M179.7,51.6h-8.9V48h2.5v-8.7h-2.5v-3.5h6.3V48h2.6V51.6z M212.7,51.6h-8.9V48h2.5v-4.9c0-2.8-1.4-4.3-3.8-4.3 c-1.2,0-2.5,0.6-3.6,2.2c0.1,0.6,0.2,1.2,0.2,1.9V48h2.5v3.5h-8.9V48h2.5v-4.9c0-2.8-1.4-4.3-3.8-4.3c-1.1,0-2.4,0.6-3.4,2.1V48h2.6 v3.5h-8.9V48h2.5v-8.7h-2.5v-3.5h6.3v1.1c1.1-1,2.2-1.6,4.2-1.6c2.1,0,3.9,0.9,5.2,2.4c1.7-1.6,3.3-2.4,5.9-2.4c3.8,0,6.8,3,6.8,7.6 V48h2.6V51.6z M231.4,48h2.5v3.5h-6.4v-1.1c-1.3,0.9-2.9,1.5-4.8,1.5c-4.4,0-7.9-3.7-7.9-8.2c0-4.6,3.5-8.3,7.9-8.3 c1.9,0,3.5,0.5,4.8,1.5v-1.1h6.4v3.5h-2.5V48z M227.5,46.8v-6.2c-1.4-1.3-2.8-1.8-4.3-1.8c-2.7,0-4.7,2.3-4.7,4.9 c0,2.6,2,4.9,4.7,4.9C224.8,48.6,226.2,48.1,227.5,46.8z') + g + rect.st5(y='0', width='80', height='80') + lineargradient#SVGID_1_(gradientunits='userSpaceOnUse', x1='27.7468', y1='18.248', x2='52.244', y2='42.7452') + stop(offset='0', style='stop-color:#FF5572') + stop(offset='1', style='stop-color:#FF7555') + polyline.logo-tadaima--animated(style='fill:none;stroke:url(#SVGID_1_);stroke-width:2;stroke-miterlimit:10;', points='52,27 25,27 25,23 55,23 55,31 40,31 40,54 ') + lineargradient#SVGID_2_(gradientunits='userSpaceOnUse', x1='23.9948', y1='30.0043', x2='48.4901', y2='54.4996') + stop(offset='0', style='stop-color:#FF5572') + stop(offset='1', style='stop-color:#FF7555') + polyline.logo-tadaima--animated(style='fill:none;stroke:url(#SVGID_2_);stroke-width:2;stroke-miterlimit:10;', points='24,31 36,31 36,57 44,57 44,34 ') + + svg.svg-bg(xmlns='http://www.w3.org/2000/svg') + defs + circle#a(cx='1468', cy='133', r='35') + mask#h(x='0', y='0', width='70', height='70', fill='#fff') + use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#a') + circle#b(cx='236.5', cy='732.5', r='23.5') + mask#i(x='0', y='0', width='47', height='47', fill='#fff') + use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#b') + circle#c(cx='1120.5', cy='945.5', r='28.5') + mask#j(x='0', y='0', width='57', height='57', fill='#fff') + use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#c') + path#d(d='M1193.375 302.875l44.6 77.25h-89.2z') + mask#k(x='0', y='0', width='89.201', height='77.25', fill='#fff') + use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#d') + path#e(d='M1610.8 513.3l34.14 59.128h-68.278z') + mask#l(x='0', y='0', width='68.277', height='59.13', fill='#fff') + use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#e') + path#f(d='M51.045 967.864l38.314 66.362H12.73z') + mask#m(x='0', y='0', width='76.629', height='66.362', fill='#fff') + use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#f') + path#g(d='M46.045 311.097l26.5 45.897H19.546z') + mask#n(x='0', y='0', width='52.997', height='45.897', fill='#fff') + use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#g') + g(style='mix-blend-mode:overlay', fill='none', fill-rule='evenodd', opacity='.35', stroke='#FFF') + use.svg-bg_element(mask='url(#h)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#a') + use.svg-bg_element(mask='url(#i)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#b') + use.svg-bg_element.opacity-anim(mask='url(#j)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#c') + path.stroke-anim(d='M657.5 848.5l46 46', stroke-width='3', stroke-linecap='square') + path(d='M1360.5 1206.5l89-89M761.5 42.5l42-42', stroke-width='3', stroke-linecap='square') + use.svg-bg_element(mask='url(#k)', stroke-width='6', transform='rotate(90 1193.375 341.5)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#d') + use.svg-bg_element(mask='url(#l)', stroke-width='6', transform='rotate(45 1610.8 542.863)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#e') + use.svg-bg_element.rotate-anim(mask='url(#m)', stroke-width='6', transform='rotate(45 51.045 1001.045)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#f') + use.svg-bg_element(mask='url(#n)', stroke-width='6', transform='rotate(20 46.045 334.045)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#g') \ No newline at end of file diff --git a/css-dropdown/js/index.js b/css-dropdown/js/index.js new file mode 100644 index 00000000..a60e1c29 --- /dev/null +++ b/css-dropdown/js/index.js @@ -0,0 +1 @@ +// ¯\_(ツ)_/¯ \ No newline at end of file diff --git a/css-dropdown/license.md b/css-dropdown/license.md new file mode 100644 index 00000000..b6a60416 --- /dev/null +++ b/css-dropdown/license.md @@ -0,0 +1,10 @@ + + diff --git a/css-dropdown/scss/style.scss b/css-dropdown/scss/style.scss new file mode 100644 index 00000000..5eb1eb8b --- /dev/null +++ b/css-dropdown/scss/style.scss @@ -0,0 +1,125 @@ +$bezier: cubic-bezier(0.54,-0.24, 0.46, 1.28); +$white : #FFFFFF; +$black : #000000; +$red : #FF5572; +$coral : #FF6960; +$orange : #FF7555; +$gray : #404040; +$lineHeight: 1.4em; +$baseSize: $lineHeight; +$ultraFastDuration: .15s; +$fastDuration: .3s; +$normalDuration: .6s; +$slowDuration: .9s; + +.dropdown { + $itemHeight: $baseSize * 2; + width: 15em; + position: relative; + &__trigger { + display: inline-block; + position: absolute; + top: 0; + width: 100%; + height: $baseSize * 3; + padding: $baseSize; + box-sizing: border-box; + opacity: 0; + z-index: 2; + cursor: pointer; + &__icon { + position: absolute; + padding: ($baseSize / 2); + right: 0; + top: .2em; + } + &:focus { + top: -200em; + &~ .dropdown__trigger__icon .svg-icon { + opacity: .25; + } + &~ .dropdown__list__item--title { + height: $itemHeight; + } + &~ .dropdown__list { + li { + .dropdown__list__item { + height: $itemHeight; + &:hover { + transition-duration: $normalDuration; + opacity: 1; + background-image: linear-gradient(90deg, rgba($white, .8) .10em, transparent .10em); + background-position: 100% bottom; + } + } + .dropdown__list__radio:checked + .dropdown__list__item { + padding: 0 ($baseSize / 2); + border: 1px dashed rgba($white, .2); + border-top: 0; + border-bottom: 0; + } + } + } + } + } + &__list { + overflow: auto; + max-height: $itemHeight * 5.5; + width: 100%; + transition: all .1s $bezier; + transition-delay: .15s; + &__radio { + display: none; + &:checked { + &+ .dropdown__list__item { + height: $itemHeight; + padding: 0 ($baseSize * 2) 0 ($baseSize / 2); + opacity: 1; + background-image: linear-gradient(90deg, rgba($white, .8) .10em, transparent .10em); + animation: onActive .2s $bezier forwards; + } + } + } + &__item { + height: 0; + overflow: hidden; + padding: 0 ($baseSize / 2); + transition: all .1s $bezier; + transition-delay: .15s; + color: $white; + font-family: 'Playfair Display', serif; + font-style: italic; + cursor: pointer; + color: $white; + background-image: linear-gradient(90deg, rgba($white, .4) .10em, transparent .10em); + background-size: .4em 1px; + background-repeat: repeat-x; + background-position: 0 bottom; + opacity: .5; + &--title { + z-index: 1; + position: relative; + pointer-events: none; + opacity: 1; + background-image: linear-gradient(90deg, rgba($white, .8) .10em, transparent .10em); + } + &--amount { + + } + } + } +} +.svg-icon { + transition: all .5s $bezier; +} + + +@keyframes onActive { + 0%, + 100% { + background-color: rgba($white, 0); + } + 50% { + background-color: rgba($white, .25); + } +} \ No newline at end of file diff --git a/daily-ui-012-e-commerce-shop-single-item/README.md b/daily-ui-012-e-commerce-shop-single-item/README.md new file mode 100644 index 00000000..28a0e0d5 --- /dev/null +++ b/daily-ui-012-e-commerce-shop-single-item/README.md @@ -0,0 +1,10 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/supah/pen/mPbLqp. + + 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 \ No newline at end of file diff --git a/daily-ui-012-e-commerce-shop-single-item/config.rb b/daily-ui-012-e-commerce-shop-single-item/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/daily-ui-012-e-commerce-shop-single-item/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/daily-ui-012-e-commerce-shop-single-item/css/reset.css b/daily-ui-012-e-commerce-shop-single-item/css/reset.css new file mode 100644 index 00000000..3b2627d6 --- /dev/null +++ b/daily-ui-012-e-commerce-shop-single-item/css/reset.css @@ -0,0 +1 @@ +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} diff --git a/daily-ui-012-e-commerce-shop-single-item/css/style.css b/daily-ui-012-e-commerce-shop-single-item/css/style.css new file mode 100644 index 00000000..c899b7f9 --- /dev/null +++ b/daily-ui-012-e-commerce-shop-single-item/css/style.css @@ -0,0 +1,174 @@ +/*-------------------- +Mixins +---------------------*/ +/*-------------------- +Body +---------------------*/ +*, +*::before, +*::after { + box-sizing: border-box; +} + +body, +html { + height: 100%; + font-family: 'Open Sans Condensed', sans-serif; +} + +body { + background: -webkit-linear-gradient(75deg, #d33f34 50%, #a61322 50.1%); + background: linear-gradient(15deg, #d33f34 50%, #a61322 50.1%); +} + +/*-------------------- +Shop Card +---------------------*/ +.shop-card { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 350px; + background: #f5f5f5; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); + overflow: hidden; + border-radius: 5px; + padding: 25px; + text-align: center; + z-index: 2; +} +.shop-card figure { + margin: 0; + padding: 0; + overflow: hidden; + outline: none !important; +} +.shop-card figure img { + margin: -95px 0 -60px; + width: 100%; +} +.shop-card .title { + font-weight: 900; + text-transform: uppercase; + font-size: 30px; + color: #23211f; + margin-bottom: 5px; +} +.shop-card .desc { + font-size: 17px; + opacity: .8; + margin-bottom: 3px; +} +.shop-card .cta { + padding: 20px 20px 5px; +} +.shop-card .cta::after { + content: ''; + display: table; + clear: both; +} +.shop-card .price { + float: left; + color: #FF3100; + font-size: 22px; + font-weight: 900; + padding-top: 2px; + -webkit-transition: color .3s ease-in-out; + transition: color .3s ease-in-out; + margin-top: 4px; +} +.shop-card .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; + -webkit-transition: all .3s ease-in-out; + transition: all .3s ease-in-out; + line-height: .95; + border: none; + background: none; + outline: none; + border: 1px solid #FF3100; + border-radius: 20px; + overflow: hidden; +} +.shop-card .btn .bg { + width: 101%; + height: 101%; + display: block !important; + z-index: -1; + opacity: 0; + -webkit-transition: all .3s ease-in-out; + transition: all .3s ease-in-out; + background: -webkit-linear-gradient(315deg, #a61322, #d33f34); + background: linear-gradient(135deg, #a61322, #d33f34); +} +.shop-card .btn:hover { + color: #fff !important; + border: 1px solid transparent !important; +} +.shop-card .btn:hover .bg { + opacity: 1; +} + +/*-------------------- +Slick Dots +---------------------*/ +.slick-dots { + bottom: -30px; +} +.slick-dots a { + position: relative; + display: block; + width: 16px; + height: 16px; +} +.slick-dots span { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 6px; + height: 6px; + border-radius: 50%; +} +.slick-dots circle { + fill: none; + stroke-width: 1; + stroke-linecap: round; + stroke-dasharray: 39 39; + stroke-dashoffset: 39; + -webkit-transition: all .9s ease-in-out; + transition: all .9s ease-in-out; + -webkit-transition: stroke-dashoffset 0.5s; + transition: stroke-dashoffset 0.5s; +} +.slick-dots .slick-active circle { + stroke-dashoffset: 0; +} + +/*-------------------- +Background +--------------------*/ +.bg { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + background: -webkit-linear-gradient(75deg, #d33f34 50%, #a61322 50.1%); + background: linear-gradient(15deg, #d33f34 50%, #a61322 50.1%); + z-index: 1; + display: none; +} diff --git a/daily-ui-012-e-commerce-shop-single-item/index.html b/daily-ui-012-e-commerce-shop-single-item/index.html new file mode 100644 index 00000000..9323e20d --- /dev/null +++ b/daily-ui-012-e-commerce-shop-single-item/index.html @@ -0,0 +1,68 @@ + + + + + Daily UI #012: E-Commerce Shop (Single Item) + + + + + + + + + + + + + + + + + + + +
+
+ Nike Metcon 2 +
+
+ Men's training shoe +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
$130
+ +
+
+
+ + + + + + + + + diff --git a/daily-ui-012-e-commerce-shop-single-item/js/index.js b/daily-ui-012-e-commerce-shop-single-item/js/index.js new file mode 100644 index 00000000..799d7bc0 --- /dev/null +++ b/daily-ui-012-e-commerce-shop-single-item/js/index.js @@ -0,0 +1,49 @@ +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 ''; + } +}).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 + }); +}); \ No newline at end of file diff --git a/daily-ui-012-e-commerce-shop-single-item/license.md b/daily-ui-012-e-commerce-shop-single-item/license.md new file mode 100644 index 00000000..e4de3f99 --- /dev/null +++ b/daily-ui-012-e-commerce-shop-single-item/license.md @@ -0,0 +1,10 @@ + + diff --git a/daily-ui-012-e-commerce-shop-single-item/scss/style.scss b/daily-ui-012-e-commerce-shop-single-item/scss/style.scss new file mode 100644 index 00000000..5ed5c714 --- /dev/null +++ b/daily-ui-012-e-commerce-shop-single-item/scss/style.scss @@ -0,0 +1,182 @@ +/*-------------------- +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; +} diff --git a/dailyui-012-e-commerce-shop-3d-view/README.md b/dailyui-012-e-commerce-shop-3d-view/README.md new file mode 100644 index 00000000..2530c809 --- /dev/null +++ b/dailyui-012-e-commerce-shop-3d-view/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/PavelLaptev/pen/GZrKJY. + + \ No newline at end of file diff --git a/dailyui-012-e-commerce-shop-3d-view/config.rb b/dailyui-012-e-commerce-shop-3d-view/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/dailyui-012-e-commerce-shop-3d-view/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/dailyui-012-e-commerce-shop-3d-view/css/normalize.css b/dailyui-012-e-commerce-shop-3d-view/css/normalize.css new file mode 100644 index 00000000..8393ac44 --- /dev/null +++ b/dailyui-012-e-commerce-shop-3d-view/css/normalize.css @@ -0,0 +1 @@ +/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input,select{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[disabled]{cursor:default}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none} diff --git a/dailyui-012-e-commerce-shop-3d-view/css/style.css b/dailyui-012-e-commerce-shop-3d-view/css/style.css new file mode 100644 index 00000000..8eb1292a --- /dev/null +++ b/dailyui-012-e-commerce-shop-3d-view/css/style.css @@ -0,0 +1,170 @@ +@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700); +@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); +.left-top { + z-index: -1; + position: absolute; + padding: 40px 50px; + top: 0; + left: 0; +} + +.right-top { + color: #7c7b4e; + z-index: 10; + position: absolute; + padding: 50px 50px; + top: 0; + right: 0; + font-size: 12px; + opacity: 0.7; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + text-align: right; +} +.right-top a { + padding-bottom: 10px; + -webkit-transition: all 0.2s; + transition: all 0.2s; +} +.right-top a:hover { + color: white; +} + +.left-bottom { + z-index: 10; + position: absolute; + padding: 40px 60px; + bottom: 0; + left: 0; + -webkit-transform-origin: bottom left; + transform-origin: bottom left; + -webkit-transition: all 0.2s; + transition: all 0.2s; +} +.left-bottom_small { + z-index: -1; + -webkit-transform: scale(0.95); + transform: scale(0.95); + opacity: 0.5; +} +.left-bottom ul { + list-style: none; + margin-left: -40px; + color: #949184; + font-family: 'Montserrat', sans-serif; + font-size: 14px; + font-weight: 400; +} +.left-bottom li { + padding: 10px 0; +} +.left-bottom li span { + color: #c5c1af; +} + +a { + z-index: 10; + font-family: 'Montserrat', sans-serif; + color: #7c7b4e; + margin: 0 10px; +} + +.right-bottom { + z-index: 10; + position: absolute; + padding: 60px 50px; + bottom: 0; + right: 0; +} + +h1 { + font-family: 'Montserrat', sans-serif; + font-size: 52px; + color: #dddb6f; + font-weight: 700; + line-height: 0; +} + +h4 { + font-family: 'Montserrat', sans-serif; + font-size: 18px; + color: #aa956b; + font-weight: 400; + line-height: 0; +} + +h3 { + font-family: 'Montserrat', sans-serif; + font-size: 20px; + color: #a79d92; + font-weight: 400; + line-height: 0; +} + +p { + font-family: 'Montserrat', sans-serif; + font-size: 51px; + color: #fffffe; + font-weight: 400; + line-height: 0; +} + +button { + background: #a06643; + padding: 10px 40px; + border: none; + font-family: 'Montserrat', sans-serif; + font-size: 20px; + color: #fffffe; + font-weight: 400; + -webkit-transition: all 0.2s; + transition: all 0.2s; +} +button:hover { + background: #43a06c; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); +} + +body { + background: #7c7b4e; +} + +.card { + overflow: hidden; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + border-radius: 20px; + width: 840px; + height: 500px; + background: #231f20; +} + +.embed { + position: relative; + border-radius: 20px; + height: 500px; + width: 840px; +} + +iframe { + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-transform: scale(0.8); + transform: scale(0.8); + margin-top: -100px; +} + +.grad { + z-index: 9; + position: absolute; + bottom: -2px; + width: 100%; + height: 60px; + background: -webkit-linear-gradient(top, rgba(35, 31, 32, 0) 0%, #231f20 100%); + background: linear-gradient(to bottom, rgba(35, 31, 32, 0) 0%, #231f20 100%); +} diff --git a/dailyui-012-e-commerce-shop-3d-view/index.html b/dailyui-012-e-commerce-shop-3d-view/index.html new file mode 100644 index 00000000..9fa94e0b --- /dev/null +++ b/dailyui-012-e-commerce-shop-3d-view/index.html @@ -0,0 +1,57 @@ + + + + + DailyUI #012 — E-Commerce Shop (3d view) + + + + + + + + + + + + + + + +
+
+

M4 Sherman

+

medium tank

+
+ +
+
    +
  • Crew: 5
    • +
  • Battle weight: 68,500 lb
    • +
  • Maximum speed: 26 mph
    • +
  • Cross-country speed: 15-20 mph
    • +
  • Climbing power: 60°
    • +
+
+
+ about tank and + model +
+
+

Prise:

+

$ 49,997

+ +
+
+ + +
+
+ + + + + + + + diff --git a/dailyui-012-e-commerce-shop-3d-view/js/index.js b/dailyui-012-e-commerce-shop-3d-view/js/index.js new file mode 100644 index 00000000..f1aa6ca0 --- /dev/null +++ b/dailyui-012-e-commerce-shop-3d-view/js/index.js @@ -0,0 +1,3 @@ +$( '.card' ).hover(function() { + $('.left-bottom').toggleClass('left-bottom_small'); +}); \ No newline at end of file diff --git a/dailyui-012-e-commerce-shop-3d-view/license.md b/dailyui-012-e-commerce-shop-3d-view/license.md new file mode 100644 index 00000000..2324096f --- /dev/null +++ b/dailyui-012-e-commerce-shop-3d-view/license.md @@ -0,0 +1,10 @@ + + diff --git a/dailyui-012-e-commerce-shop-3d-view/scss/style.scss b/dailyui-012-e-commerce-shop-3d-view/scss/style.scss new file mode 100644 index 00000000..d4d5d0f5 --- /dev/null +++ b/dailyui-012-e-commerce-shop-3d-view/scss/style.scss @@ -0,0 +1,170 @@ +@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700); + +@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); + +@mixin centerer { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) ; +} + +.left-top{ + z-index:-1; + position:absolute; + padding:40px 50px; + top:0; + left:0; +} + +.right-top{ + color: #7c7b4e; + z-index:10; + position:absolute; + padding:50px 50px; + top:0; + right:0; + font-size:12px; + opacity:0.7; + display:flex; + text-align:right; + a{ + padding-bottom:10px; + &:hover{ + color:white; + } + transition: all 0.2s; + } +} + +.left-bottom{ + z-index:10; + position:absolute; + padding:40px 60px; + bottom:0; + left:0; + transform-origin: bottom left; + transition: all 0.2s; + &_small{ + z-index:-1; + transform: scale(0.95); + opacity:0.5; + } + ul{ + list-style:none; + margin-left:-40px; + color: #949184; + font-family: 'Montserrat', sans-serif; + font-size: 14px; + font-weight: 400; + } + li{ + padding:10px 0; + span{ + color: #c5c1af; + } + } +} + +a{ + z-index:10; + font-family: 'Montserrat', sans-serif; + color: #7c7b4e; + margin:0 10px; +} + +.right-bottom{ + z-index:10; + position:absolute; + padding:60px 50px; + bottom:0; + right:0; +} + +h1{ + font-family: 'Montserrat', sans-serif; + font-size: 52px; + color: #dddb6f; + font-weight: 700; + line-height:0; +} + +h4{ + font-family: 'Montserrat', sans-serif; + font-size: 18px; + color: #aa956b; + font-weight: 400; + line-height:0; +} + +h3{ + font-family: 'Montserrat', sans-serif; + font-size: 20px; + color: #a79d92; + font-weight: 400; + line-height:0; +} + +p{ + font-family: 'Montserrat', sans-serif; + font-size: 51px; + color: #fffffe; + font-weight: 400; + line-height:0; +} + +button{ + background: #a06643; + padding:10px 40px; + border:none; + font-family: 'Montserrat', sans-serif; + font-size: 20px; + color: #fffffe; + font-weight: 400; + transition: all 0.2s; + &:hover{ + background: #43a06c; + box-shadow: 0 10px 20px rgba(0,0,0,0.4); + } +} + +body{ + background: #7c7b4e; +} + +.card{ + overflow:hidden; + @include centerer; + border-radius: 20px; + width: 840px; + height: 500px; + background: #231f20; + // &:hover{ + // box-shadow: 0 10px 20px rgba(0,0,0,0.4); + // } +} + +.embed{ + position:relative; + border-radius: 20px; + height:500px; + width:840px; + // background: lighten(#231f20, 20%); +} + +iframe{ + + transform-origin: top left; + transform: scale(0.8); + margin-top:-100px; + // margin-left:40px; +} + +.grad{ + z-index:9; + position:absolute; + bottom:-2px; + width:100%; + height: 60px; + background: linear-gradient(to bottom, rgba(35,31,32,0) 0%, rgba(35,31,32,1) 100%); +} \ No newline at end of file diff --git a/donut-chart-dial-svg-animation/README.md b/donut-chart-dial-svg-animation/README.md new file mode 100644 index 00000000..77a9507a --- /dev/null +++ b/donut-chart-dial-svg-animation/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/ettrics/pen/qaXVAd. + + Flat Donut Chart Dial SVG Animation built with vanillaJS. No jquery required. diff --git a/donut-chart-dial-svg-animation/config.rb b/donut-chart-dial-svg-animation/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/donut-chart-dial-svg-animation/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/donut-chart-dial-svg-animation/css/normalize.css b/donut-chart-dial-svg-animation/css/normalize.css new file mode 100644 index 00000000..8393ac44 --- /dev/null +++ b/donut-chart-dial-svg-animation/css/normalize.css @@ -0,0 +1 @@ +/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input,select{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[disabled]{cursor:default}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none} diff --git a/donut-chart-dial-svg-animation/css/style.css b/donut-chart-dial-svg-animation/css/style.css new file mode 100644 index 00000000..6e885e3b --- /dev/null +++ b/donut-chart-dial-svg-animation/css/style.css @@ -0,0 +1,31 @@ +body { + background: #18222F; +} + +.wrapper { + position: absolute; + width: 400px; + height: 400px; + margin: auto; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.container { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding: 0 20px; +} diff --git a/donut-chart-dial-svg-animation/index.html b/donut-chart-dial-svg-animation/index.html new file mode 100644 index 00000000..4d2a6ccc --- /dev/null +++ b/donut-chart-dial-svg-animation/index.html @@ -0,0 +1,35 @@ + + + + + Donut Chart Dial SVG Animation + + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + diff --git a/donut-chart-dial-svg-animation/js/index.js b/donut-chart-dial-svg-animation/js/index.js new file mode 100644 index 00000000..485fb153 --- /dev/null +++ b/donut-chart-dial-svg-animation/js/index.js @@ -0,0 +1,182 @@ +// +// Library +// + +var Dial = function(container) { + this.container = container; + this.size = this.container.dataset.size; + this.strokeWidth = this.size / 8; + this.radius = (this.size / 2) - (this.strokeWidth / 2); + this.value = this.container.dataset.value; + this.direction = this.container.dataset.arrow; + this.svg; + this.defs; + this.slice; + this.overlay; + this.text; + this.arrow; + this.create(); +} + +Dial.prototype.create = function() { + this.createSvg(); + this.createDefs(); + this.createSlice(); + this.createOverlay(); + this.createText(); + this.createArrow(); + this.container.appendChild(this.svg); +}; + +Dial.prototype.createSvg = function() { + var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svg.setAttribute('width', this.size + 'px'); + svg.setAttribute('height', this.size + 'px'); + this.svg = svg; +}; + +Dial.prototype.createDefs = function() { + var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); + var linearGradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient"); + linearGradient.setAttribute('id', 'gradient'); + var stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop"); + stop1.setAttribute('stop-color', '#6E4AE2'); + stop1.setAttribute('offset', '0%'); + linearGradient.appendChild(stop1); + var stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop"); + stop2.setAttribute('stop-color', '#78F8EC'); + stop2.setAttribute('offset', '100%'); + linearGradient.appendChild(stop2); + var linearGradientBackground = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient"); + linearGradientBackground.setAttribute('id', 'gradient-background'); + var stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop"); + stop1.setAttribute('stop-color', 'rgba(0, 0, 0, 0.2)'); + stop1.setAttribute('offset', '0%'); + linearGradientBackground.appendChild(stop1); + var stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop"); + stop2.setAttribute('stop-color', 'rgba(0, 0, 0, 0.05)'); + stop2.setAttribute('offset', '100%'); + linearGradientBackground.appendChild(stop2); + defs.appendChild(linearGradient); + defs.appendChild(linearGradientBackground); + this.svg.appendChild(defs); + this.defs = defs; +}; + +Dial.prototype.createSlice = function() { + var slice = document.createElementNS("http://www.w3.org/2000/svg", "path"); + slice.setAttribute('fill', 'none'); + slice.setAttribute('stroke', 'url(#gradient)'); + slice.setAttribute('stroke-width', this.strokeWidth); + slice.setAttribute('transform', 'translate(' + this.strokeWidth / 2 + ',' + this.strokeWidth / 2 + ')'); + slice.setAttribute('class', 'animate-draw'); + this.svg.appendChild(slice); + this.slice = slice; +}; + +Dial.prototype.createOverlay = function() { + var r = this.size - (this.size / 2) - this.strokeWidth / 2; + var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); + circle.setAttribute('cx', this.size / 2); + circle.setAttribute('cy', this.size / 2); + circle.setAttribute('r', r); + circle.setAttribute('fill', 'url(#gradient-background)'); + this.svg.appendChild(circle); + this.overlay = circle; +}; + +Dial.prototype.createText = function() { + var fontSize = this.size / 3.5; + var text = document.createElementNS("http://www.w3.org/2000/svg", "text"); + text.setAttribute('x', (this.size / 2) + fontSize / 7.5); + text.setAttribute('y', (this.size / 2) + fontSize / 4); + text.setAttribute('font-family', 'Century Gothic, Lato'); + text.setAttribute('font-size', fontSize); + text.setAttribute('fill', '#78F8EC'); + text.setAttribute('text-anchor', 'middle'); + var tspanSize = fontSize / 3; + text.innerHTML = 0 + '%'; + this.svg.appendChild(text); + this.text = text; +}; + +Dial.prototype.createArrow = function() { + var arrowSize = this.size / 10; + var arrowYOffset, m; + if(this.direction === 'up') { + arrowYOffset = arrowSize / 2; + m = -1; + } + else if(this.direction === 'down') { + arrowYOffset = 0; + m = 1; + } + var arrowPosX = ((this.size / 2) - arrowSize / 2); + var arrowPosY = (this.size - this.size / 3) + arrowYOffset; + var arrowDOffset = m * (arrowSize / 1.5); + var arrow = document.createElementNS("http://www.w3.org/2000/svg", "path"); + arrow.setAttribute('d', 'M 0 0 ' + arrowSize + ' 0 ' + arrowSize / 2 + ' ' + arrowDOffset + ' 0 0 Z'); + arrow.setAttribute('fill', '#97F8F0'); + arrow.setAttribute('opacity', '0.6'); + arrow.setAttribute('transform', 'translate(' + arrowPosX + ',' + arrowPosY + ')'); + this.svg.appendChild(arrow); + this.arrow = arrow; +}; + +Dial.prototype.animateStart = function() { + var v = 0; + var self = this; + var intervalOne = setInterval(function() { + var p = +(v / self.value).toFixed(2); + var a = (p < 0.95) ? 2 - (2 * p) : 0.05; + v += a; + // Stop + if(v >= +self.value) { + v = self.value; + clearInterval(intervalOne); + } + self.setValue(v); + }, 10); +}; + +Dial.prototype.animateReset = function() { + this.setValue(0); +}; + +Dial.prototype.polarToCartesian = function(centerX, centerY, radius, angleInDegrees) { + var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0; + return { + x: centerX + (radius * Math.cos(angleInRadians)), + y: centerY + (radius * Math.sin(angleInRadians)) + }; +} + +Dial.prototype.describeArc = function(x, y, radius, startAngle, endAngle){ + var start = this.polarToCartesian(x, y, radius, endAngle); + var end = this.polarToCartesian(x, y, radius, startAngle); + var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; + var d = [ + "M", start.x, start.y, + "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y + ].join(" "); + return d; +} + +Dial.prototype.setValue = function(value) { + var c = (value / 100) * 360; + if(c === 360) + c = 359.99; + var xy = this.size / 2 - this.strokeWidth / 2; + var d = this.describeArc(xy, xy, xy, 180, 180 + c); + this.slice.setAttribute('d', d); + var tspanSize = (this.size / 3.5) / 3; + this.text.innerHTML = Math.floor(value) + '%'; +}; + +// +// Usage +// + +var containers = document.getElementsByClassName("chart"); +var dial = new Dial(containers[0]); +dial.animateStart(); \ No newline at end of file diff --git a/donut-chart-dial-svg-animation/license.md b/donut-chart-dial-svg-animation/license.md new file mode 100644 index 00000000..5dbfa939 --- /dev/null +++ b/donut-chart-dial-svg-animation/license.md @@ -0,0 +1,10 @@ + + diff --git a/donut-chart-dial-svg-animation/scss/style.scss b/donut-chart-dial-svg-animation/scss/style.scss new file mode 100644 index 00000000..a89ddc74 --- /dev/null +++ b/donut-chart-dial-svg-animation/scss/style.scss @@ -0,0 +1,21 @@ +body { + background: #18222F; +} + +.wrapper { + position: absolute; + width: 400px; + height: 400px; + margin: auto; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-direction: row; +} + +.container { + flex: 1; + padding: 0 20px; +} \ No newline at end of file diff --git a/fullscreen-background-video-with-mix-blend-mode-overlay-text/README.md b/fullscreen-background-video-with-mix-blend-mode-overlay-text/README.md new file mode 100644 index 00000000..66399113 --- /dev/null +++ b/fullscreen-background-video-with-mix-blend-mode-overlay-text/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/dudleystorey/pen/kkYawX. + + Shows full-screen video with effective, legible text overlay using mix-blend-mode, inspired by work at [Everlane](https://ca.everlane.com/modern-oxford). [Full explanatory article](http://thenewcode.com/1136/Fullscreen-Background-Video-with-mix-blend-mode-Overlay-Text). Video by [Maximilian Kempe](http://vimeo.com/114966584), licensed under Creative Commons. Freeware Moderne Sans font by [Marius Kempken](https://www.behance.net/MarKempken). diff --git a/fullscreen-background-video-with-mix-blend-mode-overlay-text/config.rb b/fullscreen-background-video-with-mix-blend-mode-overlay-text/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/fullscreen-background-video-with-mix-blend-mode-overlay-text/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/fullscreen-background-video-with-mix-blend-mode-overlay-text/css/style.css b/fullscreen-background-video-with-mix-blend-mode-overlay-text/css/style.css new file mode 100644 index 00000000..fba29fad --- /dev/null +++ b/fullscreen-background-video-with-mix-blend-mode-overlay-text/css/style.css @@ -0,0 +1,79 @@ +@font-face { + font-family: Moderne Sans; + src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/moderne_sans.woff2); +} +* { + box-sizing: border-box; +} + +body { + margin: 0; + background: #000; + background-size: cover; +} + +video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: center; + object-position: center; +} + +div#fashion { + min-height: 100vh; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +header { + position: fixed; + width: 100%; + text-align: center; + color: white; + -webkit-transition: .4s; + transition: .4s; +} + +header:hover { + background: rgba(255, 255, 255, 0.8); + color: #000; +} + +h1 { + font-family: Moderne Sans, sans-serif; + text-align: center; + font-size: 2rem; + width: 100%; + letter-spacing: .5rem; +} + +nav a { + text-decoration: none; + color: inherit; + padding: 1rem; +} + +h2 { + font-family: Century Schoolbook, Century Schoolbook L, Georgia, serif; + font-size: 8vmin; + text-align: center; + margin: 2rem 3rem 0; + mix-blend-mode: overlay; + color: #fff; + font-weight: 100; +} diff --git a/fullscreen-background-video-with-mix-blend-mode-overlay-text/index.html b/fullscreen-background-video-with-mix-blend-mode-overlay-text/index.html new file mode 100644 index 00000000..7deb62b4 --- /dev/null +++ b/fullscreen-background-video-with-mix-blend-mode-overlay-text/index.html @@ -0,0 +1,40 @@ + + + + + Fullscreen Background Video with Mix-Blend-Mode Overlay Text + + + + + + + + + + + + + + + +
+

ZIGGY

+
+
+

There’s a brand new dance but I don’t know its name…

+
+ + + + + + diff --git a/fullscreen-background-video-with-mix-blend-mode-overlay-text/license.md b/fullscreen-background-video-with-mix-blend-mode-overlay-text/license.md new file mode 100644 index 00000000..8998be89 --- /dev/null +++ b/fullscreen-background-video-with-mix-blend-mode-overlay-text/license.md @@ -0,0 +1,10 @@ + + diff --git a/fullscreen-background-video-with-mix-blend-mode-overlay-text/scss/style.scss b/fullscreen-background-video-with-mix-blend-mode-overlay-text/scss/style.scss new file mode 100644 index 00000000..174e439d --- /dev/null +++ b/fullscreen-background-video-with-mix-blend-mode-overlay-text/scss/style.scss @@ -0,0 +1,59 @@ +@font-face { + font-family: Moderne Sans; + src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/moderne_sans.woff2) +} +* { + box-sizing: border-box; +} +body { + margin: 0; + background: #000; + background-size: cover; +} +video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} +div#fashion { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} +header { + position: fixed; + width: 100%; + text-align: center; + color: white; + transition: .4s; +} +header:hover { + background: rgba(255,255,255,0.8); + color: #000; +} +h1 { + font-family: Moderne Sans, sans-serif; + text-align: center; + font-size: 2rem; + width: 100%; + letter-spacing: .5rem; +} +nav a { + text-decoration: none; + color: inherit; + padding: 1rem; +} +h2 { + font-family: Century Schoolbook, Century Schoolbook L, Georgia, serif; + font-size: 8vmin; + text-align: center; + margin: 2rem 3rem 0; + mix-blend-mode: overlay; + color: #fff; + font-weight: 100; +} \ No newline at end of file diff --git a/image-hover/README.md b/image-hover/README.md new file mode 100644 index 00000000..bbce252a --- /dev/null +++ b/image-hover/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/littlesnippets/pen/gwZyPp. + + Rounded images with icon on hover \ No newline at end of file diff --git a/image-hover/css/style.css b/image-hover/css/style.css new file mode 100644 index 00000000..b98745a1 --- /dev/null +++ b/image-hover/css/style.css @@ -0,0 +1,110 @@ +@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); +.snip1566 { + position: relative; + display: inline-block; + margin: 20px; + max-width: 190px; + width: 100%; + color: #bbb; + font-size: 16px; + box-shadow: none !important; + -webkit-transform: translateZ(0); + transform: translateZ(0); +} + +.snip1566 *, +.snip1566:before, +.snip1566:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: all 0.3s linear; + transition: all 0.3s linear; +} + +.snip1566:before, +.snip1566:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 50%; + content: ''; + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + z-index: -1; + border: 2px solid #bbb; + border-color: transparent #bbb; +} + +.snip1566 img { + max-width: 100%; + backface-visibility: hidden; + vertical-align: top; + border-radius: 50%; + padding: 10px; +} + +.snip1566 figcaption { + position: absolute; + top: 5px; + bottom: 5px; + left: 5px; + right: 5px; + opacity: 0; + background-color: rgba(0, 0, 0, 0.9); + border-radius: 50%; +} + +.snip1566 i { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + font-size: 4em; + z-index: 1; +} + +.snip1566 a { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1; +} + +.snip1566:hover figcaption, +.snip1566.hover figcaption { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); +} + +.snip1566:hover:before, +.snip1566.hover:before, +.snip1566:hover:after, +.snip1566.hover:after { + border-width: 10px; +} + +.snip1566:hover:before, +.snip1566.hover:before { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} + +.snip1566:hover:after, +.snip1566.hover:after { + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} + + +/* Demo purposes only */ + +body { + background-color: #212121; + text-align: center; +} \ No newline at end of file diff --git a/image-hover/index.html b/image-hover/index.html new file mode 100644 index 00000000..8c020f34 --- /dev/null +++ b/image-hover/index.html @@ -0,0 +1,44 @@ + + + + + #1566 - Image Hover + + + + + + + + + + + + + + +
+ sq-sample14 +
+ +
+
sq-sample17 +
+ +
+
sq-sample19 +
+ +
+
sq-sample20 +
+ +
+ + + + + + + + diff --git a/image-hover/js/index.js b/image-hover/js/index.js new file mode 100644 index 00000000..db1b2e99 --- /dev/null +++ b/image-hover/js/index.js @@ -0,0 +1,6 @@ +/* Demo purposes only */ +$(".hover").mouseleave( + function () { + $(this).removeClass("hover"); + } +); \ No newline at end of file diff --git a/image-hover/license.md b/image-hover/license.md new file mode 100644 index 00000000..9c094e6a --- /dev/null +++ b/image-hover/license.md @@ -0,0 +1,7 @@ +Copyright (c) 2016 by LittleSnippets.net (http://codepen.io/littlesnippets/pen/gwZyPp) + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/jquery-to-do-app/README.md b/jquery-to-do-app/README.md new file mode 100644 index 00000000..74227ae2 --- /dev/null +++ b/jquery-to-do-app/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/du5rte/pen/XJPyZy. + + My jQuery 'To Do App' , practicing my newly learnt skills from treehouse Interactive Web Pages with JavaScript and jQuery Basics \ No newline at end of file diff --git a/jquery-to-do-app/config.rb b/jquery-to-do-app/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/jquery-to-do-app/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/jquery-to-do-app/css/normalize.css b/jquery-to-do-app/css/normalize.css new file mode 100644 index 00000000..8393ac44 --- /dev/null +++ b/jquery-to-do-app/css/normalize.css @@ -0,0 +1 @@ +/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input,select{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[disabled]{cursor:default}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none} diff --git a/jquery-to-do-app/css/style.css b/jquery-to-do-app/css/style.css new file mode 100644 index 00000000..ea2f7949 --- /dev/null +++ b/jquery-to-do-app/css/style.css @@ -0,0 +1,192 @@ +h3, input, .delete-btn { + font-family: "Nunito", sans-serif; + font-size: 1em; + line-height: 1.5; +} + +body { + font: 100%; + font-weight: 100; + color: #5C6BC0; + padding: 1.5em; + background: #252d5e; +} +@media only screen and (max-device-width: 480px) { + body { + font-size: 80%; + } +} + +h3 { + padding-bottom: 1.125em; + margin-bottom: 1.125em; + font-weight: 400; + border-bottom: 0.1875em solid; +} + +ul { + list-style: none; + padding: 0; + margin: 0; +} + +li { + position: relative; + padding: 1.125em 0; + border-bottom: 1px dashed; +} + +input { + color: inherit; + outline: none; + border: none; + background: none; +} + +input[type="text"] { + padding: 0 0.375em; + text-transform: capitalize; + width: 80%; +} + +input[type="checkbox"] { + position: relative; + -webkit-appearance: none; + width: 1em; + height: 1em; + vertical-align: middle; + bottom: 0.125em; +} +input[type="checkbox"]:before, input[type="checkbox"]:after { + display: block; + position: absolute; + box-sizing: border-box; + cursor: pointer; + font: 1em FontAwesome; + width: 1em; + height: 1em; +} +input[type="checkbox"]:before { + content: ""; + border: 0.125em solid; + border-radius: 0.3125em; + box-shadow: inset 0em 0.0625em 0.0625em rgba(0, 0, 0, 0.67), 0em 0.0625em 0em rgba(255, 255, 255, 0.4); + opacity: .3; +} +input[type="checkbox"]:after { + content: "\f00c"; + bottom: 0.0625em; + left: 0.0625em; + opacity: 0; +} +input[type="checkbox"]:hover:after { + opacity: 1; +} +input[type="checkbox"]:checked:after { + opacity: 1; +} +input[type="checkbox"]:checked:before { + opacity: 0; + background: -webkit-linear-gradient(#252d5e, transparent); + background: linear-gradient(#252d5e, transparent); +} +@media only screen and (max-device-width: 480px) { + input[type="checkbox"]:checked:before { + opacity: 1; + } + input[type="checkbox"]:checked:after { + opacity: 1; + color: #ebebeb; + } +} + +.todo { + margin: auto; + box-shadow: 0 0 1em rgba(0, 0, 0, 0.55); +} +@media only screen and (min-device-width: 480px) { + .todo { + max-width: 26.25em; + min-width: 18.75em; + } +} +.todo > div { + position: relative; + padding: 3em 3em 4.5em; +} +.todo__uncompleted { + background: #ebebeb; + border-top-right-radius: 0.3125em; + border-top-left-radius: 0.3125em; + color: #5C6BC0; + border-color: #5C6BC0; +} +.todo__uncompleted li:hover { + color: #4150a8; +} +.todo__uncompleted li:hover input[type="checkbox"]:after { + color: #5C6BC0; + opacity: 1; +} +.todo__uncompleted li:hover input[type="checkbox"]:hover:after { + color: #4150a8; + opacity: 1; +} +.todo__completed { + background-color: #303b7c; + color: #252d5e; + border-color: #252d5e; + border-bottom-right-radius: 0.3125em; + border-bottom-left-radius: 0.3125em; +} +.todo__completed input[type="text"] { + text-decoration: line-through; +} +.todo__completed input[type="text"]:focus { + color: #4150a8; + text-decoration: none; +} +.todo__completed li:hover { + color: #4150a8; +} +.todo__completed li:hover input[type="checkbox"]:checked:after { + color: #ebebeb; + opacity: 0.8; +} +.todo__completed li:hover input[type="checkbox"]:checked:hover:after { + opacity: 1; +} +.todo__completed li:hover input[type="checkbox"]:checked:before { + opacity: 1; +} + +#displayTask { + display: none; +} +#displayTask .delete-btn { + display: none; +} +#displayTask input[type="checkbox"] { + display: none; +} + +.delete-btn { + position: absolute; + font-family: FontAwesome; + cursor: pointer; + right: -0.5em; + visibility: hidden; + -webkit-transition: .2s ease-in; + transition: .2s ease-in; +} +.delete-btn:after { + content: "\f040"; +} +.delete-btn:hover:after { + content: "\f00d"; +} + +li:hover .delete-btn { + right: 0.5em; + visibility: visible; +} diff --git a/jquery-to-do-app/index.html b/jquery-to-do-app/index.html new file mode 100644 index 00000000..4400cc97 --- /dev/null +++ b/jquery-to-do-app/index.html @@ -0,0 +1,66 @@ + + + + + jQuery - To Do App + + + + + + + + + + + + + + + + + + + + + +
+
+

TO DO

+
    +
  • + + +
    • +
  • + + +
    • +
  • + +
    • +
+
+
+

COMPLETED

+
    +
  • + + +
    • +
  • + + +
    • +
+
+
+ + + + + + + + + diff --git a/jquery-to-do-app/index.jade b/jquery-to-do-app/index.jade new file mode 100644 index 00000000..3a7d4e44 --- /dev/null +++ b/jquery-to-do-app/index.jade @@ -0,0 +1,28 @@ +// My Version of a 'to do App'. +// Practicing my newly learnt skills from treehouse Interactive Web Pages with JavaScript and jQuery Basics + +.todo + .todo__uncompleted + h3 TO DO + ul.todo__uncompleted-list + li + input(type="checkbox") + input(type="text", value="Go Running") + span.delete-btn + li + input(type="checkbox") + input(type="text", value="Grocery Shopping") + span.delete-btn + li#displayTask + input(type="text", value=" ") + .todo__completed + h3 COMPLETED + ul.todo__completed-list + li + input(type="checkbox", checked) + input(type="text", value="See The Doctor") + span.delete-btn + li + input(type="checkbox", checked) + input(type="text", value="Pay Electricity Bill") + span.delete-btn \ No newline at end of file diff --git a/jquery-to-do-app/js/index.js b/jquery-to-do-app/js/index.js new file mode 100644 index 00000000..38be7950 --- /dev/null +++ b/jquery-to-do-app/js/index.js @@ -0,0 +1,68 @@ +var $todoapp = $('.todo') +var $displayTask = $('#displayTask'); +var $deleteButton = $(''); + + +//Show $displayTask +$('.todo__uncompleted').hover(function() { + $displayTask.show("slowly") + }, + //Hide $displayTask + function() { + $displayTask.hide("slowly"); + }); + +//Create new Task +function newTasks() { + var $new = $('
    • '); + //Add before $displayTask + $displayTask.before( $new ); + //Focus on the created item + $new.children('input[type="text"]').focus(); + } + //When clicked or focused create a newTask() + $displayTask.click(newTasks).focusin(newTasks); + $displayTask.children("input:text").focus(newTasks); + +//Focus in $displayTask to create a new item when Pressed Enter +$todoapp.on("keypress", "input:text", function() { + $(this).each(function() { + if (event.keyCode === 13 || event.keyCode === 9) { + if ( $(this).val() === '') { + $('.todo__uncompleted-list').effect("shake", function(){ + $displayTask.focusin(); + }); + } else { + $displayTask.focusin(); + } + } + }) + }) + //Clicking .delete button remove its parent + .on("click", ".delete-btn", function() { + $(this).each(function () { + $(this).parent().remove(); + }) + }) + //Toggles tasks between completedList and todoList + .on("click", "input:checkbox", function() { + $(this).each(function() { + //when checked move to the .todo__completed
      list + if ($(this).prop('checked') === true) { + $(this).parent().appendTo('.todo__completed-list'); + $(this).prop('checked', true); + //Else move to the .todo__uncompleted
        list before $displayTask + } else { + $displayTask.before( $(this).parent() ); + $(this).prop('checked', false); + } + }) + }) + //Removes empty
      • on focusout + .on("blur", "input:text", function() { + $(this).each(function() { + if ($(this).val() === '' || $(this).val() === 'undefined' ) { + $(this).parent().remove(); + } + }) + }); \ No newline at end of file diff --git a/jquery-to-do-app/license.md b/jquery-to-do-app/license.md new file mode 100644 index 00000000..0a492e6b --- /dev/null +++ b/jquery-to-do-app/license.md @@ -0,0 +1,10 @@ + + diff --git a/jquery-to-do-app/scss/style.scss b/jquery-to-do-app/scss/style.scss new file mode 100644 index 00000000..d99e519d --- /dev/null +++ b/jquery-to-do-app/scss/style.scss @@ -0,0 +1,221 @@ +//utilities +@function em($u) {@return ($u/16)+em;} +@function color($shades, $shade: 'base') { + @return map-get(map-get($color, $shades), $shade); +} + +//config +$font-primary: 'Nunito', sans-serif; +$font-icons: FontAwesome; +$color-primary: #5C6BC0; +$border-radius: em(5); +$color: ( + light: ( + base : hsl(0, 0%, 92%), + ), + primary: ( + light : lighten($color-primary, 60%), + base : $color-primary, + dark : darken($color-primary, 10%), + x-dark : darken($color-primary, 30%), + ) +); + +// Extends +%text-base { + font-family: $font-primary; + font-size: 1em; + line-height: 1.5; +} + +// global styles + +body { + font: 100%; + font-weight: 100; + color: color(primary); + padding: em(24); + background: color(primary, x-dark); + //media handheld + @media only screen and (max-device-width:480px) { + font-size: 80%; + } +} + + + +//header +h3 { + @extend %text-base; + padding-bottom: em(18); + margin-bottom: em(18); + font-weight: 400; + border-bottom: em(3) solid; +} +ul { + list-style: none; + padding:0; + margin:0; +} +//li items +li { + position: relative; + padding: em(18) 0; + border-bottom: 1px dashed; +} +//inputs +input { + @extend %text-base; + color: inherit; + outline: none; + border: none; + background: none; +} +input[type="text"] { + padding: 0 em(6); + text-transform: capitalize; + width: 80%; +} +//checkbox +input[type="checkbox"] { + position: relative; + -webkit-appearance: none; + //visibility: hidden; + width: 1em; + height: 1em; + vertical-align: middle; + bottom: em(2); + &:before, &:after { + //visibility: visible; + display: block; + position: absolute; + box-sizing: border-box; + cursor: pointer; + font: 1em $font-icons; + width: 1em; + height: 1em; + } + &:before { + content: ""; + border: em(2) solid; + border-radius: $border-radius; + box-shadow: inset em(0) em(1) em(1) hsla(0, 0%, 0%, 0.67), + em(0) em(1) em(0) hsla(0, 0%, 100%, 0.4); + opacity: .3; + } //Check-'sign' + &:after { + content: "\f00c"; + bottom: em(1); + left: em(1); + opacity: 0; + } + &:hover { + &:after {opacity: 1;} + } + &:checked { + &:after {opacity: 1;} + &:before { + opacity: 0; + background: linear-gradient(color(primary, x-dark), transparent); + } + @media only screen and (max-device-width:480px) { + &:before{opacity: 1;} + &:after{opacity: 1; color: color(light);} + } + } +} + + +// todo app +.todo { + margin: auto; + box-shadow: 0 0 1em hsla(0, 0%, 0%, 0.55); + @media only screen and (min-device-width:480px) { + max-width: em(420); + min-width: em(300); + } + > div { + position: relative; + padding: em(48) em(48) em(72); + } + + //uncompleted + &__uncompleted { + background: color(light); + border-top-right-radius: $border-radius; + border-top-left-radius: $border-radius; + color: color(primary); + border-color: color(primary); + li:hover { + color: color(primary, dark); + input[type="checkbox"] { + &:after { + color: color(primary); + opacity: 1; + } + &:hover:after { + color: color(primary, dark); + opacity: 1; + } + } + } + } + //completed + &__completed { + background-color: lighten(color(primary, x-dark), 8%); + color: color(primary, x-dark); + border-color: color(primary, x-dark); + border-bottom-right-radius: $border-radius; + border-bottom-left-radius: $border-radius; + input[type="text"] { + text-decoration: line-through; + &:focus { + color: color(primary, dark); + text-decoration: none; + } + } + li:hover { + color: color(primary, dark); + input[type="checkbox"]:checked { + &:after { + color: color(light); + opacity: 0.8; + } + &:hover:after { + opacity: 1; + } + &:before { + opacity: 1; + } + } + } + } + +} +//#displayTask +#displayTask { + display: none; + .delete-btn { display: none; } + input[type="checkbox"] { display: none; } +} +//.delete-btn +.delete-btn { + position: absolute; + @extend %text-base; + font-family: $font-icons; + cursor: pointer; + right: -0.5em; + visibility: hidden; + transition: .2s ease-in; + &:after { + content: "\f040"; + } + &:hover:after { + content: "\f00d"; + } + +} +li:hover .delete-btn { + right: 0.5em; + visibility: visible; +} diff --git a/log-in-sign-up/README.md b/log-in-sign-up/README.md new file mode 100644 index 00000000..2098b4e3 --- /dev/null +++ b/log-in-sign-up/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/Anna_Batura/pen/QEAqyE. + + \ No newline at end of file diff --git a/log-in-sign-up/config.rb b/log-in-sign-up/config.rb new file mode 100644 index 00000000..77619a22 --- /dev/null +++ b/log-in-sign-up/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "sass" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/log-in-sign-up/css/style.css b/log-in-sign-up/css/style.css new file mode 100644 index 00000000..5da89f14 --- /dev/null +++ b/log-in-sign-up/css/style.css @@ -0,0 +1,249 @@ +@charset "UTF-8"; +@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto); +body { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + font-family: "Roboto", sans-serif; + background-color: #5356ad; + overflow: hidden; +} + +.table { + display: table; + width: 100%; + height: 100%; +} + +.table-cell { + display: table-cell; + vertical-align: middle; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} + +.container { + position: relative; + width: 600px; + margin: 30px auto 0; + height: 320px; + background-color: #999ede; + top: 50%; + margin-top: -160px; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +.container .box { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; +} +.container .box:before, .container .box:after { + content: " "; + position: absolute; + left: 152px; + top: 50px; + background-color: #9297e0; + transform: rotateX(52deg) rotateY(15deg) rotateZ(-38deg); + width: 300px; + height: 285px; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +.container .box:after { + background-color: #a5aae4; + top: -10px; + left: 80px; + width: 320px; + height: 180px; +} +.container .container-forms { + position: relative; +} +.container .btn { + cursor: pointer; + text-align: center; + margin: 0 auto; + width: 60px; + color: #fff; + background-color: #ff73b3; + opacity: 1; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +.container .btn:hover { + opacity: 0.7; +} +.container .btn, .container input { + padding: 10px 15px; +} +.container input { + margin: 0 auto 15px; + display: block; + width: 220px; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -webkit-transition: all 0.3s; + transition: all 0.3s; +} +.container .container-forms .container-info { + text-align: left; + font-size: 0; +} +.container .container-forms .container-info .info-item { + text-align: center; + font-size: 16px; + width: 300px; + height: 320px; + display: inline-block; + vertical-align: top; + color: #fff; + opacity: 1; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -webkit-transition: all 0.3s; + transition: all 0.3s; +} +.container .container-forms .container-info .info-item p { + font-size: 20px; + margin: 20px; +} +.container .container-forms .container-info .info-item .btn { + background-color: transparent; + border: 1px solid #fff; +} +.container .container-forms .container-info .info-item .table-cell { + padding-right: 35px; +} +.container .container-forms .container-info .info-item:nth-child(2) .table-cell { + padding-left: 35px; + padding-right: 0; +} +.container .container-form { + overflow: hidden; + position: absolute; + left: 30px; + top: -30px; + width: 305px; + height: 380px; + background-color: #fff; + box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2); + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +.container .container-form:before { + content: "✔"; + position: absolute; + left: 160px; + top: -50px; + color: #5356ad; + font-size: 130px; + opacity: 0; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +.container .container-form .btn { + position: relative; + box-shadow: 0 0 10px 1px #ff73b3; + margin-top: 30px; +} +.container .form-item { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 1; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +.container .form-item.sign-up { + position: absolute; + left: -100%; + opacity: 0; +} +.container.log-in .box:before { + position: absolute; + left: 180px; + top: 62px; + height: 265px; +} +.container.log-in .box:after { + top: 22px; + left: 192px; + width: 324px; + height: 220px; +} +.container.log-in .container-form { + left: 265px; +} +.container.log-in .container-form .form-item.sign-up { + left: 0; + opacity: 1; +} +.container.log-in .container-form .form-item.log-in { + left: -100%; + opacity: 0; +} +.container.active { + width: 260px; + height: 140px; + margin-top: -70px; +} +.container.active .container-form { + left: 30px; + width: 200px; + height: 200px; +} +.container.active .container-form:before { + content: "✔"; + position: absolute; + left: 51px; + top: 5px; + color: #5356ad; + font-size: 130px; + opacity: 1; +} +.container.active input, .container.active .btn, .container.active .info-item { + display: none; + opacity: 0; + padding: 0px; + margin: 0 auto; + height: 0; +} +.container.active .form-item { + height: 100%; +} +.container.active .container-forms .container-info .info-item { + height: 0%; + opacity: 0; +} + +.rabbit { + width: 50px; + height: 50px; + position: absolute; + bottom: 20px; + right: 20px; + z-index: 3; + fill: #fff; +} diff --git a/log-in-sign-up/index.html b/log-in-sign-up/index.html new file mode 100644 index 00000000..c9befe91 --- /dev/null +++ b/log-in-sign-up/index.html @@ -0,0 +1,81 @@ + + + + + Log in / Sign up + + + + + + + + + + + + + + +
        +
        +
        +
        +
        +
        +
        +

        + Have an account? +

        +
        + Log in +
        +
        +
        +
        +
        +
        +
        +

        + Don't have an account? +

        +
        + Sign up +
        +
        +
        +
        +
        +
        + + +
        +
        +
        + + + + + + + + + diff --git a/log-in-sign-up/index.slim b/log-in-sign-up/index.slim new file mode 100644 index 00000000..017ecf03 --- /dev/null +++ b/log-in-sign-up/index.slim @@ -0,0 +1,32 @@ +.container + .box + .container-forms + .container-info + .info-item + .table + .table-cell + p Have an account? + .btn Log in + .info-item + .table + .table-cell + p Don't have an account? + .btn Sign up + .container-form + .form-item.log-in + .table + .table-cell + input type="text" name="Username" placeholder="Username" + input type="Password" name="Password" placeholder="Password" + .btn Log in + .form-item.sign-up + .table + .table-cell + input type="text" name="email" placeholder="Email" + input type="text" name="fullName" placeholder="Full Name" + input type="text" name="Username" placeholder="Username" + input type="Password" name="Password" placeholder="Password" + .btn Sign up +a.box-item href="http://codepen.io/Anna_Batura/" target="_blank" + svg class="rabbit" viewBox="0 0 600 600" version="1.2" + path id="rabbit" d="m 335.94313,30.576451 c -9.79312,-0.146115 -17.39091,4.439466 -17.39091,13.789758 0,11.508038 -2.91019,60.415461 1.40532,76.238951 4.31553,15.82355 21.58583,38.97215 34.51834,54.67597 10.06946,12.22726 4.34772,41.69626 4.34772,56.0813 0,14.38499 -2.89751,25.9107 -8.65153,25.9107 -5.75402,0 -14.35971,5.75217 -20.11373,11.50612 -5.75395,5.75402 -11.51588,12.95631 -18.70841,7.20229 -7.19251,-5.75402 -20.15388,-11.49441 -43.16987,-15.80992 -23.01609,-4.31551 -61.84129,-0.0234 -86.29583,8.60763 -24.45458,8.63104 -76.25857,56.11061 -90.643535,77.6882 -14.385056,21.5775 -15.799189,87.73247 -14.36068,97.80193 1.438509,10.06953 -2.908267,17.28255 -10.100778,8.65153 -7.192459,-8.63104 -12.911438,-4.30381 -12.911438,-4.30381 0,0 -7.202292,14.37045 -7.202292,21.56298 0,7.19244 2.854564,14.36068 2.854564,14.36068 0,0 -11.506099,8.65056 -11.506099,14.40458 0,5.75397 11.515881,15.83044 18.708391,24.46146 7.192546,8.63097 31.651182,25.89997 41.720624,24.46148 10.069543,-1.43851 28.775063,-0.0121 35.967573,4.3038 7.19253,4.31551 24.44687,10.06761 46.02443,11.5061 21.57752,1.43851 81.97845,5.75307 97.80193,5.75307 15.82357,0 20.1675,-2.86435 27.35996,-10.05688 7.19253,-7.19245 -5.78527,-15.84115 -10.10079,-25.9107 -4.31551,-10.06946 14.40363,-7.16912 20.15765,-8.60763 5.75402,-1.43849 21.59424,-11.5061 31.66376,-11.5061 10.06953,0 8.6165,10.05589 21.56298,15.80993 12.94654,5.75393 31.63939,24.43902 46.02443,27.31602 14.38497,2.87695 47.47173,0.0121 58.97979,-4.30381 11.50797,-4.31551 10.06946,-14.37044 0,-21.56297 -10.06955,-7.19244 -34.50663,-20.16742 -38.82214,-27.35994 -4.31551,-7.19246 -5.74329,-15.81969 1.44924,-23.01224 7.19251,-7.19252 14.35876,-4.30292 25.86678,-10.05685 11.50806,-5.75402 15.80992,-23.04354 15.80992,-33.11301 0,-10.06953 1.36928,-21.01352 5.75307,-27.31602 3.67345,-5.28128 5.10015,-22.13212 5.30499,-33.64009 0.21874,-12.28864 -5.29329,-15.24871 -9.60881,-22.44122 -4.31543,-7.19246 4.30285,-17.25917 10.05687,-17.25917 5.75402,0 31.65108,-4.33602 41.72062,-8.65153 10.06946,-4.31546 20.16744,-23.03273 27.35995,-31.66377 7.19246,-8.63095 1.41799,-27.31512 -8.65154,-33.06907 -10.06954,-5.75402 -10.07746,-21.59431 -18.70841,-31.66377 -8.63103,-10.06953 -18.68507,-31.62961 -27.31604,-38.82213 -8.63101,-7.19253 -28.77502,-12.95535 -35.96755,-12.95535 -7.19253,0 -11.50612,9e-4 -11.50612,-5.75306 0,-5.75402 -1.44924,-12.9203 -1.44924,-25.86678 0,-12.94655 -16.24344,-68.464566 -37.3729,-102.149659 -4.40799,-7.027282 -11.5581,-5.405316 -20.15765,-2.898485 -5.69412,1.659863 -8.60761,4.35564 -8.60761,23.056136 0,18.700566 -11.50515,-0.03133 -17.25917,-10.100794 -5.75403,-10.069512 -15.86265,-21.58444 -28.80918,-24.461458 -2.42749,-0.539415 -4.76669,-0.800692 -7.02665,-0.834399 z" \ No newline at end of file diff --git a/log-in-sign-up/js/index.js b/log-in-sign-up/js/index.js new file mode 100644 index 00000000..606f36c9 --- /dev/null +++ b/log-in-sign-up/js/index.js @@ -0,0 +1,6 @@ +$(".info-item .btn").click(function(){ + $(".container").toggleClass("log-in"); +}); +$(".container-form .btn").click(function(){ + $(".container").addClass("active"); +}); \ No newline at end of file diff --git a/log-in-sign-up/license.md b/log-in-sign-up/license.md new file mode 100644 index 00000000..6cfa67e4 --- /dev/null +++ b/log-in-sign-up/license.md @@ -0,0 +1,10 @@ + + diff --git a/log-in-sign-up/sass/style.sass b/log-in-sign-up/sass/style.sass new file mode 100644 index 00000000..36955a90 --- /dev/null +++ b/log-in-sign-up/sass/style.sass @@ -0,0 +1,195 @@ +@import "compass/css3" +@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto) +$width: 600px +$height: 320px +$padding: 10px 15px +body + position: absolute + left: 0 + top: 0 + width: 100% + height: 100% + font-family: 'Roboto', sans-serif + background-color: #5356ad + overflow: hidden +.table + display: table + width: 100% + height: 100% +.table-cell + display: table-cell + vertical-align: middle + @include transition(all 0.5s) +.container + position: relative + width: $width + margin: 30px auto 0 + height: $height + background-color: #999ede + top: 50% + margin-top: -160px + @include transition(all 0.5s) + .box + position: absolute + left: 0 + top: 0 + width: 100% + height: 100% + overflow: hidden + &:before, &:after + content: " " + position: absolute + left: 152px + top: 50px + background-color: #9297e0 + transform: rotateX(52deg) rotateY(15deg) rotateZ(-38deg) + width: 300px + height: 285px + @include transition(all 0.5s) + &:after + background-color: #a5aae4 + top: -10px + left: 80px + width: 320px + height: 180px + .container-forms + position: relative + .btn + cursor: pointer + text-align: center + margin: 0 auto + width: 60px + color: #fff + background-color: #ff73b3 + opacity: 1 + @include transition(all 0.5s) + &:hover + opacity: 0.7 + + .btn, input + padding: $padding + input + margin: 0 auto 15px + display: block + width: $width/2-80px + @include transition(all 0.3s) + .container-forms + .container-info + text-align: left + font-size: 0 + .info-item + text-align: center + font-size: 16px + width: $width/2 + height: $height + display: inline-block + vertical-align: top + color: #fff + opacity: 1 + @include transition(all 0.3s) + p + font-size: 20px + margin: 20px + .btn + background-color: transparent + border: 1px solid #fff + .table-cell + padding-right: 35px + &:nth-child(2) + .table-cell + padding-left: 35px + padding-right: 0 + + .container-form + overflow: hidden + position: absolute + left: 30px + top: -30px + width: 305px + height: $height + 60px + background-color: #fff + box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2) + @include transition(all 0.5s) + &:before + content: "✔" + position: absolute + left: 160px + top: -50px + color: #5356ad + font-size: 130px + opacity: 0 + @include transition(all 0.5s) + .btn + position: relative + box-shadow: 0 0 10px 1px #ff73b3 + margin-top: 30px + .form-item + position: absolute + left: 0 + top: 0 + width: 100% + height: 100% + opacity: 1 + @include transition(all 0.5s) + &.sign-up + position: absolute + left: -100% + opacity: 0 + &.log-in + .box + &:before + position: absolute + left: 180px + top: 62px + height: 265px + &:after + top: 22px + left: 192px + width: 324px + height: 220px + .container-form + left: 265px + .form-item + &.sign-up + left: 0 + opacity: 1 + &.log-in + left: -100% + opacity: 0 + &.active + width: 260px + height: 140px + margin-top: -70px + .container-form + left: 30px + width: 200px + height: 200px + &:before + content: "✔" + position: absolute + left: 51px + top: 5px + color: #5356ad + font-size: 130px + opacity: 1 + input, .btn, .info-item + display: none + opacity: 0 + padding: 0px + margin: 0 auto + height: 0 + .form-item + height: 100% + .container-forms + .container-info + .info-item + height: 0% + opacity: 0 +.rabbit + width: 50px + height: 50px + position: absolute + bottom: 20px + right: 20px + z-index: 3 + fill: #fff \ No newline at end of file diff --git a/masked-image-animation/README.md b/masked-image-animation/README.md new file mode 100644 index 00000000..6cf7b675 --- /dev/null +++ b/masked-image-animation/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/origine/pen/dpXxOX. + + Cool mask animation, as seen on http://ludmillamaury.com/. Shout out to @manuelodelain ! \ No newline at end of file diff --git a/masked-image-animation/css/style.css b/masked-image-animation/css/style.css new file mode 100644 index 00000000..5e5556ca --- /dev/null +++ b/masked-image-animation/css/style.css @@ -0,0 +1,73 @@ +html, +body { + margin: 0; + font-family: 'Catamaran', sans-serif; + overflow: hidden; +} +.🍕 { + position: relative; + text-align: center; + height: 100%; +} +.🍗 { + cursor: pointer; + display: inline-block; + position: absolute; + top: 50%; + left: 10%; + transform: translateY(-50%); + padding: 20px 15px 15px 20px; + font-size: 25px; + letter-spacing: 0.075em; + border: 2px solid #ffd208; + z-index: 4; +} +.🍗:before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + bottom: -6px; + right: -6px; + border: 2px solid #9C08FF; +} +.🍗:after { + content: ''; + position: absolute; + top: 4px; + left: 4px; + right: 0; + bottom: 0; + background-color: #fff; + z-index: -1; +} +.🍜 { + position: relative; + display: inline-block; +} +.🍜 img { + display: block; + width: 100%; + height: auto; +} +.color-overlay, +.white-overlay { + position: absolute; + z-index: 2; + transform-origin: right; +} +.color-overlay { + background-color: #05203e; + top: 0; + right: 0; + bottom: 0; + left: 0; +} +.white-overlay { + display: block; + top: -1px; + right: -1px; + bottom: -1px; + left: -1px; + background-color: #fff; +} diff --git a/masked-image-animation/index.html b/masked-image-animation/index.html new file mode 100644 index 00000000..896b5fd9 --- /dev/null +++ b/masked-image-animation/index.html @@ -0,0 +1,40 @@ + + + + + Masked image animation + + + + + + + + + + + + + + +
        +
        Hover me
        + +
        +
        +
        +
        + +
        +
        + +
        + + + + + + + + + diff --git a/masked-image-animation/js/index.js b/masked-image-animation/js/index.js new file mode 100644 index 00000000..2c54e6ff --- /dev/null +++ b/masked-image-animation/js/index.js @@ -0,0 +1,48 @@ +// Tried to remake the animation as seen in the menu ludmillamaury.com (dev by the one and only twitter.com/manuelodelain) + +var $hoverMe = $('.🍗'); +var $colorOverlay = $('.color-overlay'); +var $whiteOverlay = $('.white-overlay'); +var isAnimated = false; + +$hoverMe.on('mouseenter', showImage); +$hoverMe.on('mouseleave', hideImage); + +function showImage() { + if (isAnimated) { + TweenMax.killAll(); + isAnimated = false; + } else { + isAnimated = true; + } + + TweenMax.to($whiteOverlay, 1, { + scaleX: 0, + ease:Quart.easeInOut + }); + TweenMax.fromTo($colorOverlay, 1, + {scaleX: 1}, + {scaleX: 0, ease:Quart.easeInOut, delay: 0.2, onComplete: function() { + $whiteOverlay[0].style.transformOrigin = "left 50% 0px"; + isAnimated = false; + }} + ); +} + +function hideImage() { + if (isAnimated) { + TweenMax.killAll(); + isAnimated = false; + } else { + isAnimated = true; + } + + TweenMax.to($whiteOverlay, 0.8, { + scaleX: 1, + ease:Quart.easeInOut, + onComplete: function() { + $whiteOverlay[0].style.transformOrigin = "right"; + isAnimated = false; + } + }); +} \ No newline at end of file diff --git a/masked-image-animation/less/style.less b/masked-image-animation/less/style.less new file mode 100644 index 00000000..7514cb97 --- /dev/null +++ b/masked-image-animation/less/style.less @@ -0,0 +1,81 @@ +html, body { + margin: 0; + font-family: 'Catamaran', sans-serif; + overflow: hidden; +} + +.🍕 { + position: relative; + text-align: center; + height: 100%; +} + +.🍗 { + cursor: pointer; + display: inline-block; + position: absolute; + top: 50%; + left: 10%; + transform: translateY(-50%); + padding: 20px 15px 15px 20px; + font-size: 25px; + letter-spacing: 0.075em; + border: 2px solid #ffd208; + z-index: 4; + + &:before { + content:''; + position: absolute; + width: 100%; + height: 100%; + bottom: -6px; + right: -6px; + border: 2px solid #9C08FF; + } + + &:after { + content:''; + position: absolute; + top: 4px; + left: 4px; + right: 0; + bottom: 0; + background-color: #fff; + z-index: -1; + } +} + +.🍜 { + position: relative; + display: inline-block; + + img { + display: block; + width: 100%; + height: auto; + } +} + +.color-overlay, +.white-overlay { + position: absolute; + z-index: 2; + transform-origin: right; +} + +.color-overlay { + background-color: #05203e; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.white-overlay { + display: block; + top: -1px; + right: -1px; + bottom: -1px; + left: -1px; + background-color: #fff; +} \ No newline at end of file diff --git a/masked-image-animation/license.md b/masked-image-animation/license.md new file mode 100644 index 00000000..499d8f84 --- /dev/null +++ b/masked-image-animation/license.md @@ -0,0 +1,8 @@ + +Copyright (c) 2016 by Thomas Aufresne (http://codepen.io/origine/pen/dpXxOX) + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/meet-moody-balloon/README.md b/meet-moody-balloon/README.md new file mode 100644 index 00000000..f9c4653c --- /dev/null +++ b/meet-moody-balloon/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/crsten/pen/BLkNEm. + + \ No newline at end of file diff --git a/meet-moody-balloon/babel/index.babel b/meet-moody-balloon/babel/index.babel new file mode 100644 index 00000000..79eb2929 --- /dev/null +++ b/meet-moody-balloon/babel/index.babel @@ -0,0 +1,21 @@ +var myIcons = new SVGMorpheus('#Smiles',{ + iconId: 'smile3', + duration: 250, + rotation: 'none' +}); + +function percentageToHsl(percentage, hue0, hue1) { + var hue = (percentage * (hue1 - hue0)) + hue0; + return 'hsla(' + hue + ', 100%, 50%,0.5)'; +} + +var color = percentageToHsl(0.5, 0, 120); +document.querySelector('.bubble').style.background = color; +var input = document.querySelector('input'); + +input.addEventListener('input',function(){ + var color = percentageToHsl((this.value / 100), 0, 120); + document.querySelector('.bubble').style.background = color; + document.querySelector('.bubble').style.left = (this.value) + '%'; + myIcons.to('smile' + Math.round(this.value / 20)); +}) \ No newline at end of file diff --git a/meet-moody-balloon/config.rb b/meet-moody-balloon/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/meet-moody-balloon/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/meet-moody-balloon/css/style.css b/meet-moody-balloon/css/style.css new file mode 100644 index 00000000..11661516 --- /dev/null +++ b/meet-moody-balloon/css/style.css @@ -0,0 +1,88 @@ +body { + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + min-height: 100vh; + background: #222; +} + +div { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +input { + width: 100%; + min-width: 500px; + margin-top: 2em; +} + +.bubble { + position: absolute; + left: 50%; + -webkit-transform: translateX(-53%) rotate(45deg); + transform: translateX(-53%) rotate(45deg); + top: -160%; + background: rgba(255, 255, 255, 0.8); + padding: 1em; + border-radius: 50% 50% 5px 50%; + box-shadow: 0 20px 20px -5px rgba(0, 0, 0, 0.3); + -webkit-animation: pulse 2500ms infinite; + animation: pulse 2500ms infinite; +} +.bubble svg { + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +@-webkit-keyframes pulse { + 0% { + -webkit-transform: translateX(-53%) rotate(45deg) translateY(0); + transform: translateX(-53%) rotate(45deg) translateY(0); + } + 50% { + -webkit-transform: translateX(-61%) rotate(45deg) translateY(-10px); + transform: translateX(-61%) rotate(45deg) translateY(-10px); + } + 100% { + -webkit-transform: translateX(-53%) rotate(45deg) translateY(0); + transform: translateX(-53%) rotate(45deg) translateY(0); + } +} + +@keyframes pulse { + 0% { + -webkit-transform: translateX(-53%) rotate(45deg) translateY(0); + transform: translateX(-53%) rotate(45deg) translateY(0); + } + 50% { + -webkit-transform: translateX(-61%) rotate(45deg) translateY(-10px); + transform: translateX(-61%) rotate(45deg) translateY(-10px); + } + 100% { + -webkit-transform: translateX(-53%) rotate(45deg) translateY(0); + transform: translateX(-53%) rotate(45deg) translateY(0); + } +} diff --git a/meet-moody-balloon/index.html b/meet-moody-balloon/index.html new file mode 100644 index 00000000..cabcc059 --- /dev/null +++ b/meet-moody-balloon/index.html @@ -0,0 +1,70 @@ + + + + + Meet moody-balloon + + + + + + + + + + + + + + +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + +
        + +
        + + + + + + + + diff --git a/meet-moody-balloon/js/index.js b/meet-moody-balloon/js/index.js new file mode 100644 index 00000000..0589a2f5 --- /dev/null +++ b/meet-moody-balloon/js/index.js @@ -0,0 +1,23 @@ +'use strict'; + +var myIcons = new SVGMorpheus('#Smiles', { + iconId: 'smile3', + duration: 250, + rotation: 'none' +}); + +function percentageToHsl(percentage, hue0, hue1) { + var hue = percentage * (hue1 - hue0) + hue0; + return 'hsla(' + hue + ', 100%, 50%,0.5)'; +} + +var color = percentageToHsl(0.5, 0, 120); +document.querySelector('.bubble').style.background = color; +var input = document.querySelector('input'); + +input.addEventListener('input', function () { + var color = percentageToHsl(this.value / 100, 0, 120); + document.querySelector('.bubble').style.background = color; + document.querySelector('.bubble').style.left = this.value + '%'; + myIcons.to('smile' + Math.round(this.value / 20)); +}); \ No newline at end of file diff --git a/meet-moody-balloon/license.md b/meet-moody-balloon/license.md new file mode 100644 index 00000000..64dcbdfd --- /dev/null +++ b/meet-moody-balloon/license.md @@ -0,0 +1,10 @@ + + diff --git a/meet-moody-balloon/scss/style.scss b/meet-moody-balloon/scss/style.scss new file mode 100644 index 00000000..3886056a --- /dev/null +++ b/meet-moody-balloon/scss/style.scss @@ -0,0 +1,48 @@ +body{ + margin:0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #222; +} + +div{ + position: relative; + display: flex; + flex-direction: column; + align-items: center; +} +input{ + width: 100%; + min-width: 500px; + margin-top: 2em; +} + +.bubble{ + position: absolute; + left:50%; + transform: translateX(-53%) rotate(45deg); + top: -160%; + //transition: left 100ms; + background: rgba(white,0.8); + padding: 1em; + border-radius: 50% 50% 5px 50%; + box-shadow: 0 20px 20px -5px rgba(black,0.3); + animation: pulse 2500ms infinite; + svg{ + transform: rotate(-45deg); + } +} + +@keyframes pulse { + 0% { + transform: translateX(-53%) rotate(45deg) translateY(0); + } + 50%{ + transform: translateX(-61%) rotate(45deg) translateY(-10px); + } + 100%{ + transform: translateX(-53%) rotate(45deg) translateY(0); + } +} \ No newline at end of file diff --git a/mobile-calendar-ui/README.md b/mobile-calendar-ui/README.md new file mode 100644 index 00000000..ab9c1542 --- /dev/null +++ b/mobile-calendar-ui/README.md @@ -0,0 +1,8 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/abisz/pen/zBLJqg. + + CSS Implementation of an existing design for practice purposes +all credits for the concept go to: +https://dribbble.com/shots/1945593-Login-Home-Screen + +watch timelapse video of process: +https://www.youtube.com/watch?v=VFRRqfhvejI \ No newline at end of file diff --git a/mobile-calendar-ui/config.rb b/mobile-calendar-ui/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/mobile-calendar-ui/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/mobile-calendar-ui/css/reset.css b/mobile-calendar-ui/css/reset.css new file mode 100644 index 00000000..3b2627d6 --- /dev/null +++ b/mobile-calendar-ui/css/reset.css @@ -0,0 +1 @@ +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} diff --git a/mobile-calendar-ui/css/style.css b/mobile-calendar-ui/css/style.css new file mode 100644 index 00000000..dc998c67 --- /dev/null +++ b/mobile-calendar-ui/css/style.css @@ -0,0 +1,256 @@ +html, +body { + height: 100%; + font-family: 'Roboto'; +} + +.container { + height: calc(100% - 60px); + max-width: 400px; + min-height: 600px; + margin: 30px auto 0; + box-shadow: 0px 0px 5px #202020; + box-sizing: border-box; + position: relative; +} + +a { + color: #202020; + text-decoration: none; +} + +.icon.right { + float: right; +} + +.icon::after { + font-family: 'FontAwesome'; + color: #fff; + font-size: 24px; +} + +.icon.burger::after { + content: '\f0c9'; +} + +.icon.search::after { + content: '\f002'; +} + +.icon.arrow-left::after { + float: left; + content: '\f053'; +} + +.icon.arrow-right::after { + content: '\f054'; +} + +.top-view { + height: 50%; + background: url(https://unsplash.it/1080/720/?random) no-repeat; + background-size: cover; + color: #fff; +} +.top-view h1 { + font-weight: 100; + font-size: 26px; + text-align: center; + margin: 10px 0; + letter-spacing: 1.5px; +} + +.color-layer { + background-color: rgba(107, 23, 102, 0.2); + height: 100%; + width: 100%; + padding: 20px 20px 0 20px; + box-sizing: border-box; + position: relative; +} + +.navbar { + padding: 10px; + display: block; +} + +.header { + position: relative; + box-sizing: border-box; +} + +.profile-container { + width: 100px; + height: 100px; + margin: 30px auto; + position: relative; +} + +.profile { + border-radius: 50%; + width: 40px; + height: auto; +} +.profile.main { + display: block; + height: 100%; + width: 100%; + position: relative; +} + +.notifications { + position: absolute; + border-radius: 50%; + background-color: #78D9C5; + width: 30px; + height: 30px; + text-align: center; + top: 0; + right: 0; + font-weight: 300; +} +.notifications span { + font-size: 14px; + display: block; + position: relative; + top: 50%; + margin-top: -7px; +} + +.month-selection { + text-align: center; + position: absolute; + width: calc(100% - 40px); + padding: 10px 0; + bottom: 20px; + box-sizing: border-box; +} +.month-selection span.month { + text-transform: uppercase; + font-weight: 300; + letter-spacing: 2px; + font-size: 14px; +} + +.bottom-view { + height: 50%; + overflow: hidden; +} + +.week-container { + padding: 5px 20px; +} + +ul.week { + display: block; + width: 100%; + margin-bottom: 2px; +} + +li.day { + display: inline-block; + width: 13%; + height: 0; + padding: 0 0 13%; + font-weight: 300; + box-sizing: border-box; + position: relative; +} +li.day.current { + background-color: #dadada; + border-radius: 50%; +} +li.day span { + display: block; + text-align: center; + width: 100%; + font-size: 14px; + position: absolute; + top: 50%; + margin-top: -7px; +} +li.day.day-names span { + color: #909090; + letter-spacing: 1px; + text-transform: uppercase; +} + +.point::after { + width: 4px; + height: 4px; + background-color: #fc3768; + content: ''; + position: absolute; + bottom: 15%; + left: 50%; + margin-left: -2px; + border-radius: 50%; +} + +.entry { + padding: 20px; + border-top: 1px solid #dadada; +} +.entry img { + display: inline-block; + margin-right: 15px; +} + +.text { + display: inline-block; +} + +.title { + font-size: 16px; +} +.title .name { + font-weight: 500; +} + +.time { + color: #909090; + font-weight: 300; + font-size: 14px; + display: block; + margin-top: 10px; +} + +.actionbutton { + position: absolute; + width: 50px; + height: 50px; + background-color: #fc3768; + bottom: 15px; + right: 15px; + box-shadow: 0 0 10px #505050; + border-radius: 50%; +} + +.actionbutton::after { + content: '+'; + font-size: 40px; + position: absolute; + top: 50%; + margin-top: -20px; + width: 100%; + text-align: center; + display: block; + color: #fff; + font-weight: 100; +} + +.credits, .video { + position: absolute; + bottom: 10px; + color: #909090; + font-size: 100%; + text-decoration: underline; +} + +.credits { + left: 10px; +} + +.video { + right: 10px; +} diff --git a/mobile-calendar-ui/index.html b/mobile-calendar-ui/index.html new file mode 100644 index 00000000..fd464b6a --- /dev/null +++ b/mobile-calendar-ui/index.html @@ -0,0 +1,104 @@ + + + + + Mobile Calendar UI + + + + + + + + + + + + + + + + + +
        +
        +
        +
        + + +
        +
        +

        Good Morning!

        +
        + + +
        3
        +
        +
        +
        + + + February +
        +
        +
        +
        +
        +
          +
        • sun
          • +
        • mon
          • +
        • tue
          • +
        • wed
          • +
        • thu
          • +
        • fri
          • +
        • sat
          • +
        +
          +
        • 7
          • +
        • 8
          • +
        • 9
          • +
        • 10
          • +
        • 11
          • +
        • 12
          • +
        • 13
          • +
        +
        +
        + +
        + +
        + Catch up with Tom + 8 - 10am +
        +
        + +
        + +
        + New subpage for Janet + 11 - 12am Hangouts +
        +
        + +
        + +
        + Lunch with Friedrich + 12am Restaurant +
        +
        +
        +
        +
        +
        + +original concept + +watch process video + + + + + + diff --git a/mobile-calendar-ui/license.md b/mobile-calendar-ui/license.md new file mode 100644 index 00000000..888d95bf --- /dev/null +++ b/mobile-calendar-ui/license.md @@ -0,0 +1,10 @@ + + diff --git a/mobile-calendar-ui/scss/style.scss b/mobile-calendar-ui/scss/style.scss new file mode 100644 index 00000000..4efe1e1e --- /dev/null +++ b/mobile-calendar-ui/scss/style.scss @@ -0,0 +1,277 @@ +// Variables +$black: #202020; +$white: #fff; +$grey: #909090; +$light-grey: #dadada; +$turquoise: #78D9C5; +$pink: #fc3768; + +html, +body { + height: 100%; + font-family: 'Roboto'; + +} + +.container { + height: calc(100% - 60px); + max-width: 400px; + min-height: 600px; + margin: 30px auto 0; + box-shadow: 0px 0px 5px $black; + box-sizing: border-box; + position: relative; +} + +a { + color: $black; + text-decoration: none; +} + +.icon.right { + float: right; +} + +.icon::after { + font-family: 'FontAwesome'; + color: $white; + font-size: 24px; +} + +.icon.burger::after { + content: '\f0c9'; +} + +.icon.search::after { + content: '\f002'; +} + +.icon.arrow-left::after { + float: left; + content: '\f053'; +} + +.icon.arrow-right::after { + content: '\f054'; +} + +// Top View +.top-view { + height: 50%; + background: url(https://unsplash.it/1080/720/?random) no-repeat; + background-size: cover; + color: $white; + h1 { + font-weight: 100; + font-size: 26px; + text-align: center; + margin: 10px 0; + letter-spacing: 1.5px; + } +} + +.color-layer { + background-color: rgba(107, 23, 102, 0.2); + height: 100%; + width: 100%; + padding: 20px 20px 0 20px; + box-sizing: border-box; + position: relative; +} + +.navbar { + padding: 10px; + display: block; +} + +.header { + position: relative; + box-sizing: border-box; +} + +.profile-container { + width: 100px; + height: 100px; + margin: 30px auto; + position: relative; +} + +.profile { + border-radius: 50%; + width: 40px; + height: auto; + &.main { + display: block; + height: 100%; + width: 100%; + position: relative; + } +} + +.notifications { + position: absolute; + border-radius: 50%; + background-color: $turquoise; + width: 30px; + height: 30px; + text-align: center; + top: 0; + right: 0; + font-weight: 300; + span { + font-size: 14px; + display: block; + position: relative; + top: 50%; + margin-top: -7px; + } +} + +.month-selection { + text-align: center; + position: absolute; + width: calc(100% - 40px); + padding: 10px 0; + bottom: 20px; + box-sizing: border-box; + span.month { + text-transform: uppercase; + font-weight: 300; + letter-spacing: 2px; + font-size: 14px; + } +} + +// Bottom View +.bottom-view { + height: 50%; + overflow: hidden; +} + +.week-container { + //background-color: red; + padding: 5px 20px; +} + +ul.week { + display: block; + width: 100%; + margin-bottom: 2px; +} + +li.day { + display: inline-block; + width: 13%; + height: 0; + padding: 0 0 13%; + font-weight: 300; + box-sizing: border-box; + position: relative; + + &.current { + background-color: $light-grey; + border-radius: 50%; + } + + span { + display: block; + text-align: center; + width: 100%; + font-size: 14px; + position: absolute; + top: 50%; + margin-top: -7px; + } + + &.day-names span { + color: $grey; + letter-spacing: 1px; + text-transform: uppercase; + } +} + +.point::after{ + width:4px; + height: 4px; + background-color: $pink; + content: ''; + position: absolute; + bottom: 15%; + left: 50%; + margin-left: -2px; + border-radius: 50%; + } + +.entry{ + padding: 20px; + border-top: 1px solid $light-grey; + + img{ + display: inline-block; + margin-right: 15px; + } + +} + +.text{ + display: inline-block; + +} + + +.title{ + font-size: 16px; + + .name{ + font-weight: 500; + } +} + +.time{ + color: $grey; + font-weight: 300; + font-size: 14px; + display: block; + margin-top: 10px; +} + +.actionbutton{ + position: absolute; + width: 50px; + height: 50px; + background-color: $pink; + bottom: 15px; + right: 15px; + box-shadow: 0 0 10px #505050; + border-radius: 50%; + +} +.actionbutton::after{ + content: '+'; + font-size: 40px; + position: absolute; + top: 50%; + margin-top: -20px; + width: 100%; + text-align: center; + display: block; + color: $white; + font-weight: 100; +} + +.credits, .video{ + position: absolute; + bottom:10px; + color: $grey; + font-size: 100%; + text-decoration: underline; +} + +.credits { + left: 10px; +} + +.video{ + right: 10px; + +} \ No newline at end of file diff --git a/mobile-lock-screen-pin-code/README.md b/mobile-lock-screen-pin-code/README.md new file mode 100644 index 00000000..6c09d86f --- /dev/null +++ b/mobile-lock-screen-pin-code/README.md @@ -0,0 +1,4 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/Benny29390/pen/Lkwbxz. + + Full working example of a lock screen made with awesome HTML, jQuery and CSS. +It's not really safe, but JSFuck made it safe for a "normal" user. \ No newline at end of file diff --git a/mobile-lock-screen-pin-code/css/style.css b/mobile-lock-screen-pin-code/css/style.css new file mode 100644 index 00000000..b37c29f9 --- /dev/null +++ b/mobile-lock-screen-pin-code/css/style.css @@ -0,0 +1,286 @@ +@import 'https://fonts.googleapis.com/css?family=Titillium+Web:400,700'; +body { + position: relative; + background-color: #33444e; + font-family: 'Titillium Web', sans-serif; + -webkit-font-smoothing: antialiased; + height: 100%; + width: 100%; +} +#restartbtn { + text-align: center; + color: #fff; + cursor: pointer; + margin: 20px; +} +.table { + display: table; + height: 100%; + width: 100%; + position: relative; +} + +.cell { + display: table-cell; + vertical-align: middle; + position: relative; + width: 100%; + text-align: center; +} + + +/*------ +# Pincode +----*/ + +#pincode { + position: fixed; + overflow: hidden; + height: 667px; + width: 375px; + z-index: 9999; + background-color: #33444e; + background-image: url("https://hd.unsplash.com/photo-1471047283799-ebd97acc0bc3"); + background-size: cover; + background-position: center; + color: #fff; + border-radius: 10px; + text-align: center; + -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6); + box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6); + top: 50%; + left: 50%; + margin-top: -335px; + /* Negative half of height. */ + margin-left: -188px; + /* Negative half of width. */ +} + +#numbers { + max-width: 300px; + padding: 0 20px; + margin: 0 auto; + position: relative; + display: block; + -webkit-transition: all 1s ease-out; + -moz-transition: all 1s ease-out; + transition: all 1s ease-out; + opacity: 1; +} + +#numbers.hide { + opacity: 0.3; +} + +#pincode button { + width: 70px; + height: 70px; + margin-bottom: 10px; + background-color: rgba(0, 0, 0, 0.35); + border: 0; + color: #fff; + font-size: 25px; + line-height: 50px; + border-radius: 100%; + opacity: 1; + outline: 0; + border: 1px solid #33444e; +} + +#pincode button:active { + background-color: rgba(0, 0, 0, 0.6); + outline: 0; +} + +#fields { + max-width: 200px; + padding: 0 20px; + margin: 50px auto; + position: relative; + display: block; +} + +#fields .numberfield { + text-align: center; +} + +#fields .numberfield span { + height: 10px; + width: 10px; + border: 2px solid #fff; + background-color: transparent; + border-radius: 100%; + position: relative; + display: inline-block; + text-align: center; +} + +#fields .numberfield.active span { + background-color: #fff; +} + +#fields .numberfield.right span { + background-color: #33444e; + border-color: #33444e; + transition: all .5s ease-in-out; + -webkit-transition: all .5s ease-in-out; +} + + +/*------ +# Toast Grid +----*/ + +.grid { + list-style: none; + margin-left: -20px; +} + +.grid__col--1-of-3, +.grid__col--2-of-6, +.grid__col--4-of-12 { + width: 33.33333%; +} + +.grid__col--1-of-4, +.grid__col--2-of-8, +.grid__col--3-of-12 { + width: 25%; +} + +.grid__col { + box-sizing: border-box; + display: inline-block; + margin-right: -.25em; + min-height: 1px; + padding-left: 20px; + vertical-align: top; +} + +.grid__col--centered { + display: block; + margin-left: auto; + margin-right: auto; +} + +.grid__col--d-first { + float: left; +} + +.grid__col--d-last { + float: right; +} + +.grid--no-gutter { + margin-left: 0; + width: 100%; +} + +.grid--no-gutter .grid__col { + padding-left: 0; +} + +.grid--no-gutter .grid__col--span-all { + margin-left: 0; + width: 100%; +} + +.grid__col--ab { + vertical-align: bottom; +} + +.grid__col--am { + vertical-align: middle; +} + +.miss { + -webkit-animation: miss .8s ease-out 1; + animation: miss .8s ease-out 1; +} + +@-webkit-keyframes miss { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + 10% { + -webkit-transform: translate(-25px, 0); + transform: translate(-25px, 0); + } + 20% { + -webkit-transform: translate(25px, 0); + transform: translate(25px, 0); + } + 30% { + -webkit-transform: translate(-20px, 0); + transform: translate(-20px, 0); + } + 40% { + -webkit-transform: translate(20px, 0); + transform: translate(20px, 0); + } + 50% { + -webkit-transform: translate(-10px, 0); + transform: translate(-10px, 0); + } + 60% { + -webkit-transform: translate(10px, 0); + transform: translate(10px, 0); + } + 70% { + -webkit-transform: translate(-5px, 0); + transform: translate(-5px, 0); + } + 80% { + -webkit-transform: translate(5px, 0); + transform: translate(5px, 0); + } + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } +} + +@keyframes miss { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + 10% { + -webkit-transform: translate(-25px, 0); + transform: translate(-25px, 0); + } + 20% { + -webkit-transform: translate(25px, 0); + transform: translate(25px, 0); + } + 30% { + -webkit-transform: translate(-20px, 0); + transform: translate(-20px, 0); + } + 40% { + -webkit-transform: translate(20px, 0); + transform: translate(20px, 0); + } + 50% { + -webkit-transform: translate(-10px, 0); + transform: translate(-10px, 0); + } + 60% { + -webkit-transform: translate(10px, 0); + transform: translate(10px, 0); + } + 70% { + -webkit-transform: translate(-5px, 0); + transform: translate(-5px, 0); + } + 80% { + -webkit-transform: translate(5px, 0); + transform: translate(5px, 0); + } + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } +} \ No newline at end of file diff --git a/mobile-lock-screen-pin-code/index.html b/mobile-lock-screen-pin-code/index.html new file mode 100644 index 00000000..b68546dd --- /dev/null +++ b/mobile-lock-screen-pin-code/index.html @@ -0,0 +1,73 @@ + + + + + Mobile lock screen pin code + + + + + + + + + + + + + + + +
        +
        +
        + +
        +

        + Please enter the correct PIN-Code.
        It is: 1234 / Also try a wrong code +

        +
        + +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        +
        +
        +
        + +
        +
        +
        + +
        +
        +
        + +
        +
        +
        + +
        +
        + +
        +
        +
        +
        RESTART
        + + + + + + + + + diff --git a/mobile-lock-screen-pin-code/js/index.js b/mobile-lock-screen-pin-code/js/index.js new file mode 100644 index 00000000..b79c8a4e --- /dev/null +++ b/mobile-lock-screen-pin-code/js/index.js @@ -0,0 +1,52 @@ +jQuery(document).ready(function($) { + $(document).ready(function() { + + // http://www.jsfuck.com/ + var pin = (+!![] + []) + (!+[] + !![] + []) + (!+[] + !![] + !![] + []) + (!+[] + !![] + !![] + !![] + []); + var enterCode = ""; + enterCode.toString(); + + $("#numbers button").click(function() { + + var clickedNumber = $(this).text().toString(); + enterCode = enterCode + clickedNumber; + var lengthCode = parseInt(enterCode.length); + lengthCode--; + $("#fields .numberfield:eq(" + lengthCode + ")").addClass("active"); + + if (lengthCode == 3) { + + // Check the PIN + if (enterCode == pin) { + // Right PIN! + $("#fields .numberfield").addClass("right"); + $("#numbers").addClass("hide"); + $("#anleitung p").html("Amazing!
        You entered the correct Code!"); + + } else { + // Wrong PIN! + $("#fields").addClass("miss"); + enterCode = ""; + setTimeout(function() { + $("#fields .numberfield").removeClass("active"); + }, 200); + setTimeout(function() { + $("#fields").removeClass("miss"); + }, 500); + + } + + } else {} + + }); + + $("#restartbtn").click(function(){ + enterCode = ""; + $("#fields .numberfield").removeClass("active"); + $("#fields .numberfield").removeClass("right"); + $("#numbers").removeClass("hide"); + $("#anleitung p").html("Please enter the correct PIN-Code.
        It is: 1234 / Also try a wrong code"); + }); + + }); +}); \ No newline at end of file diff --git a/mobile-lock-screen-pin-code/license.md b/mobile-lock-screen-pin-code/license.md new file mode 100644 index 00000000..512f2ac2 --- /dev/null +++ b/mobile-lock-screen-pin-code/license.md @@ -0,0 +1,10 @@ + + diff --git a/news-cards-css-only/README.md b/news-cards-css-only/README.md new file mode 100644 index 00000000..01f03ce1 --- /dev/null +++ b/news-cards-css-only/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/mauriceconchis/pen/YWBxAg. + + Pure CSS news cards with revealing content on hover. Please feel free to drop a comment with some suggestion for improvement. \ No newline at end of file diff --git a/news-cards-css-only/config.rb b/news-cards-css-only/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/news-cards-css-only/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/news-cards-css-only/css/style.css b/news-cards-css-only/css/style.css new file mode 100644 index 00000000..0be8d5d2 --- /dev/null +++ b/news-cards-css-only/css/style.css @@ -0,0 +1,276 @@ +@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700); +* { + box-sizing: border-box; +} + +body { + background-image: -webkit-linear-gradient(left, #034378, #2d4e68); + background-image: linear-gradient(to right, #034378, #2d4e68); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + height: 100vh; + font-family: "Open Sans", sans-serif; +} + +a { + text-decoration: none; +} + +h1 { + font-family: "Open Sans", sans-serif; + font-weight: 300; +} + +.row { + max-width: 900px; + margin: 50px auto 0; +} + +.card { + float: left; + padding: 0 1.7rem; + width: 50%; +} +.card .menu-content { + margin: 0; + padding: 0; + list-style-type: none; +} +.card .menu-content::before, .card .menu-content::after { + content: ''; + display: table; +} +.card .menu-content::after { + clear: both; +} +.card .menu-content li { + display: inline-block; +} +.card .menu-content a { + color: #fff; +} +.card .menu-content span { + position: absolute; + left: 50%; + top: 0; + font-size: 10px; + font-weight: 700; + font-family: 'Open Sans'; + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); +} +.card .wrapper { + background-color: #fff; + min-height: 540px; + position: relative; + overflow: hidden; + box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2); +} +.card .wrapper:hover .data { + -webkit-transform: translateY(0); + transform: translateY(0); +} +.card .data { + position: absolute; + bottom: 0; + width: 100%; + -webkit-transform: translateY(calc(70px + 1em)); + transform: translateY(calc(70px + 1em)); + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; +} +.card .data .content { + padding: 1em; + position: relative; + z-index: 1; +} +.card .author { + font-size: 12px; +} +.card .title { + margin-top: 10px; +} +.card .text { + height: 70px; + margin: 0; +} +.card input[type='checkbox'] { + display: none; +} +.card input[type='checkbox']:checked + .menu-content { + -webkit-transform: translateY(-60px); + transform: translateY(-60px); +} + +.example-1 .wrapper { + background: url(https://hd.unsplash.com/photo-1463415268136-e52a5af54519) center/cover no-repeat; +} +.example-1 .date { + position: absolute; + top: 0; + left: 0; + background-color: #77d7b9; + color: #fff; + padding: 0.8em; +} +.example-1 .date span { + display: block; + text-align: center; +} +.example-1 .date .day { + font-weight: 700; + font-size: 24px; + text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18); +} +.example-1 .date .month { + text-transform: uppercase; +} +.example-1 .date .month, +.example-1 .date .year { + font-size: 12px; +} +.example-1 .content { + background-color: #fff; + box-shadow: 0 5px 30px 10px rgba(0, 0, 0, 0.3); +} +.example-1 .title a { + color: gray; +} +.example-1 .menu-button { + position: absolute; + z-index: 999; + top: 16px; + right: 16px; + width: 25px; + text-align: center; + cursor: pointer; +} +.example-1 .menu-button span { + width: 5px; + height: 5px; + background-color: gray; + color: gray; + position: relative; + display: inline-block; + border-radius: 50%; +} +.example-1 .menu-button span::after, .example-1 .menu-button span::before { + content: ''; + display: block; + width: 5px; + height: 5px; + background-color: currentColor; + position: absolute; + border-radius: 50%; +} +.example-1 .menu-button span::before { + left: -10px; +} +.example-1 .menu-button span::after { + right: -10px; +} +.example-1 .menu-content { + text-align: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: -1; + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; + -webkit-transform: translateY(0); + transform: translateY(0); +} +.example-1 .menu-content li { + width: 33.333333%; + float: left; + background-color: #77d7b9; + height: 60px; + position: relative; +} +.example-1 .menu-content a { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + font-size: 24px; +} +.example-1 .menu-content span { + top: -10px; +} + +.example-2 .wrapper { + background: url(https://wallpaperdoc.xyz/wp-content/uploads/2016/07/Stranger-Things-Bicycle-Lights-Children.jpg) center/cover no-repeat; +} +.example-2 .wrapper:hover .menu-content span { + -webkit-transform: translate(-50%, -10px); + transform: translate(-50%, -10px); + opacity: 1; +} +.example-2 .header { + color: #fff; + padding: 1em; +} +.example-2 .header::before, .example-2 .header::after { + content: ''; + display: table; +} +.example-2 .header::after { + clear: both; +} +.example-2 .header .date { + float: left; + font-size: 12px; +} +.example-2 .menu-content { + float: right; +} +.example-2 .menu-content li { + margin: 0 5px; + position: relative; +} +.example-2 .menu-content span { + -webkit-transition: all 0.3s; + transition: all 0.3s; + opacity: 0; +} +.example-2 .data { + color: #fff; + -webkit-transform: translateY(calc(70px + 4em)); + transform: translateY(calc(70px + 4em)); +} +.example-2 .title a { + color: #fff; +} +.example-2 .button { + display: block; + width: 100px; + margin: 2em auto 1em; + text-align: center; + font-size: 12px; + color: #fff; + line-height: 1; + position: relative; + font-weight: 700; +} +.example-2 .button::after { + content: '\2192'; + opacity: 0; + position: absolute; + right: 0; + top: 50%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); + -webkit-transition: all 0.3s; + transition: all 0.3s; +} +.example-2 .button:hover::after { + -webkit-transform: translate(5px, -50%); + transform: translate(5px, -50%); + opacity: 1; +} diff --git a/news-cards-css-only/index.html b/news-cards-css-only/index.html new file mode 100644 index 00000000..5a48d1cd --- /dev/null +++ b/news-cards-css-only/index.html @@ -0,0 +1,79 @@ + + + + + News Cards - CSS only + + + + + + + + + + + + + + + +
        +
        +
        +
        + 12 + Aug + 2016 +
        +
        +
        + Jane Doe +

        Everything You Need to Know About Gold Medals

        +

        Olympic gold medals contain only about 1.34 percent gold, with the rest composed of sterling silver.

        + +
        + +
          +
        • + +
          • +
        • 47
          • +
        • 8
          • +
        +
        +
        +
        +
        +
        +
        +
        + 12 + Aug + 2016 +
        +
          +
        • + +
          • +
        • 18
          • +
        • 3
          • +
        +
        +
        +
        + Jane Doe +

        Stranger Things: The sound of the Upside Down

        +

        The antsy bingers of Netflix will eagerly anticipate the digital release of the Survive soundtrack, out today.

        + Read more +
        +
        +
        +
        +
        + + + + + + diff --git a/news-cards-css-only/license.md b/news-cards-css-only/license.md new file mode 100644 index 00000000..fd00d2ba --- /dev/null +++ b/news-cards-css-only/license.md @@ -0,0 +1,10 @@ + + diff --git a/news-cards-css-only/scss/style.scss b/news-cards-css-only/scss/style.scss new file mode 100644 index 00000000..6b706fd0 --- /dev/null +++ b/news-cards-css-only/scss/style.scss @@ -0,0 +1,285 @@ +@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700); +// Variables +$regal-blue: #034378; +$san-juan: #2d4e68; +$bermuda: #77d7b9; +$white: #fff; +$black: #000; +$open-sans: 'Open Sans', +sans-serif; +// clear-fix mixin +@mixin cf { + &::before, + &::after { + content: ''; + display: table; + } + &::after { + clear: both; + } +} + +* { + box-sizing: border-box; +} + +body { + background-image: linear-gradient(to right, $regal-blue, $san-juan); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + height: 100vh; + font-family: $open-sans; +} + +a { + text-decoration: none; +} + +h1 { + font-family: $open-sans; + font-weight: 300; +} + +.row { + max-width: 900px; + margin: 50px auto 0; +} + +// Base styles +.card { + float: left; + padding: 0 1.7rem; + width: 50%; + .menu-content { + @include cf; + margin: 0; + padding: 0; + list-style-type: none; + li { + display: inline-block; + } + a { + color: $white; + } + span { + position: absolute; + left: 50%; + top: 0; + font-size: 10px; + font-weight: 700; + font-family: 'Open Sans'; + transform: translate(-50%, 0); + } + } + .wrapper { + background-color: $white; + min-height: 540px; + position: relative; + overflow: hidden; + box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.2); + &:hover { + .data { + transform: translateY(0); + } + } + } + .data { + position: absolute; + bottom: 0; + width: 100%; + transform: translateY(calc(70px + 1em)); + transition: transform 0.3s; + .content { + padding: 1em; + position: relative; + z-index: 1; + } + } + .author { + font-size: 12px; + } + .title { + margin-top: 10px; + } + .text { + height: 70px; + margin: 0; + } + input[type='checkbox'] { + display: none; + } + input[type='checkbox']:checked + .menu-content { + transform: translateY(-60px); + } +} + +// First example styles +.example-1 { + .wrapper { + background: url(https://hd.unsplash.com/photo-1463415268136-e52a5af54519) center / cover no-repeat; + } + .date { + position: absolute; + top: 0; + left: 0; + background-color: $bermuda; + color: $white; + padding: 0.8em; + span { + display: block; + text-align: center; + } + .day { + font-weight: 700; + font-size: 24px; + text-shadow: 2px 3px 2px rgba($black, 0.18); + } + .month { + text-transform: uppercase; + } + .month, + .year { + font-size: 12px; + } + } + .content { + background-color: $white; + box-shadow: 0 5px 30px 10px rgba($black, 0.3); + } + .title { + a { + color: lighten($black, 50%); + } + } + .menu-button { + position: absolute; + z-index: 999; + top: 16px; + right: 16px; + width: 25px; + text-align: center; + cursor: pointer; + span { + width: 5px; + height: 5px; + background-color: lighten($black, 50%); + color: lighten($black, 50%); + position: relative; + display: inline-block; + border-radius: 50%; + &::after, + &::before { + content: ''; + display: block; + width: 5px; + height: 5px; + background-color: currentColor; + position: absolute; + border-radius: 50%; + } + &::before { + left: -10px; + } + &::after { + right: -10px; + } + } + } + .menu-content { + text-align: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: -1; + transition: transform 0.3s; + transform: translateY(0); + li { + width: 33.333333%; + float: left; + background-color: $bermuda; + height: 60px; + position: relative; + } + a { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + } + span { + top: -10px; + } + } +} + +// Second example styles +.example-2 { + .wrapper { + background: url(https://wallpaperdoc.xyz/wp-content/uploads/2016/07/Stranger-Things-Bicycle-Lights-Children.jpg) center / cover no-repeat; + &:hover { + .menu-content { + span { + transform: translate(-50%, -10px); + opacity: 1; + } + } + } + } + .header { + @include cf; + color: $white; + padding: 1em; + .date { + float: left; + font-size: 12px; + } + } + .menu-content { + float: right; + li { + margin: 0 5px; + position: relative; + } + span { + transition: all 0.3s; + opacity: 0; + } + } + .data { + color: $white; + transform: translateY(calc(70px + 4em)); + } + .title { + a { + color: $white; + } + } + .button { + display: block; + width: 100px; + margin: 2em auto 1em; + text-align: center; + font-size: 12px; + color: $white; + line-height: 1; + position: relative; + font-weight: 700; + &::after { + content: '\2192'; + opacity: 0; + position: absolute; + right: 0; + top: 50%; + transform: translate(0, -50%); + transition: all 0.3s; + } + &:hover { + &::after { + transform: translate(5px, -50%); + opacity: 1; + } + } + } +} \ No newline at end of file diff --git a/pagination-indicators/README.md b/pagination-indicators/README.md new file mode 100644 index 00000000..3fd75ba9 --- /dev/null +++ b/pagination-indicators/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/thykka/pen/bZJWNV. + + \ No newline at end of file diff --git a/pagination-indicators/config.rb b/pagination-indicators/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/pagination-indicators/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/pagination-indicators/css/normalize.css b/pagination-indicators/css/normalize.css new file mode 100644 index 00000000..8393ac44 --- /dev/null +++ b/pagination-indicators/css/normalize.css @@ -0,0 +1 @@ +/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input,select{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[disabled]{cursor:default}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none} diff --git a/pagination-indicators/css/style.css b/pagination-indicators/css/style.css new file mode 100644 index 00000000..d15054d6 --- /dev/null +++ b/pagination-indicators/css/style.css @@ -0,0 +1,96 @@ +.pindicator { + background-color: white; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin: 2rem auto 0; + width: 30rem; +} + +.pindicator .bullet { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + position: relative; + text-align: center; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} + +.pindicator .bullet::before, +.pindicator .bullet::after { + content: ''; + display: block; + position: absolute; + height: .5rem; + top: 1.25rem; + -webkit-transform: translate3d(0, 0, -1px); + transform: translate3d(0, 0, -1px); +} + +.pindicator .bullet::before { + background-color: lightgray; + width: 100%; +} + +.pindicator .bullet::after { + background-color: black; + -webkit-transition: opacity .25s ease-out; + transition: opacity .25s ease-out; + opacity: 0; + width: 100%; +} + +.pindicator .bullet:first-child::before, +.pindicator .bullet:first-child::after { + left: 50%; + width: 50%; +} + +.pindicator .bullet:last-child::before, +.pindicator .bullet:last-child::after { + width: 50%; +} + +.pindicator .icon { + background-color: lightgray; + border-radius: 100%; + color: transparent; + cursor: pointer; + font-size: 1.5rem; + display: inline-block; + height: 2em; + line-height: 2; + text-align: center; + -webkit-transition: background-color .25s ease-out; + transition: background-color .25s ease-out; + width: 2em; +} + +.pindicator .text { + color: lightgray; + font-size: .75rem; + margin-top: 1rem; + text-transform: uppercase; + -webkit-transition: background-color .25s ease-out; + transition: background-color .25s ease-out; +} + +.pindicator .past .icon, +.pindicator .current .icon { + background-color: black; + color: white; +} + +.pindicator .past::after, +.pindicator .current::after { + opacity: 1; +} + +.pindicator .past .text, +.pindicator .current .text, +.pindicator .next .text { + color: black; +} diff --git a/pagination-indicators/index.html b/pagination-indicators/index.html new file mode 100644 index 00000000..5d4c51a9 --- /dev/null +++ b/pagination-indicators/index.html @@ -0,0 +1,53 @@ + + + + + pagination indicators + + + + + + + + + + + + + + + +
        +
        + 1 +
        Step 1
        +
        +
        + 2 +
        Step 2
        +
        + +
        + 4 +
        Step 4
        +
        +
        + 5 +
        Step 5
        +
        +
        + 6 +
        Step 6
        +
        +
        + + + + + + + diff --git a/pagination-indicators/js/index.js b/pagination-indicators/js/index.js new file mode 100644 index 00000000..2d59bf12 --- /dev/null +++ b/pagination-indicators/js/index.js @@ -0,0 +1,57 @@ +console.clear(); +(function() { + "use strict"; + + var bulletClasses = { + elements: { + container: ".pindicator", + bullet: ".bullet", + }, + helpers: { + past: "past", + current: "current", + next: "next", + future: "future", + } + }; + + var bulletEls; + document.addEventListener("DOMContentLoaded", initBullets); + + function initBullets() { + bulletEls = Array.prototype.slice.call( + document.body.querySelectorAll(bulletClasses.elements.bullet) + ); + bulletEls.forEach(function(el) { + el.addEventListener("mousedown", function(event) { + gotoPage(bulletEls.indexOf(this) + 1); + }); + el.addEventListener("touchstart", function(event) { + event.preventDefault(); + gotoPage(bulletEls.indexOf(this) + 1); + }); + }); + } + + function gotoPage(pageNum) { + bulletEls.forEach(function(e) { + e.classList.remove.apply(e.classList, + Object.keys(bulletClasses.helpers).map(function(e){ + return bulletClasses.helpers[e]; + }) + ) + }); + bulletEls[pageNum - 1].classList.add(bulletClasses.helpers.current); + if(pageNum > 1) { + for(var i = 0; i < pageNum; i++) { + bulletEls[i].classList.add(bulletClasses.helpers.past); + } + } + if(pageNum < bulletEls.length) { + bulletEls[pageNum].classList.add(bulletClasses.helpers.next); + for(var i = bulletEls.length - 1; i >= pageNum; i--) { + bulletEls[i].classList.add(bulletClasses.helpers.future); + } + } + } +})(); \ No newline at end of file diff --git a/pagination-indicators/license.md b/pagination-indicators/license.md new file mode 100644 index 00000000..06f87ad7 --- /dev/null +++ b/pagination-indicators/license.md @@ -0,0 +1,10 @@ + + diff --git a/pagination-indicators/scss/style.scss b/pagination-indicators/scss/style.scss new file mode 100644 index 00000000..7271f97b --- /dev/null +++ b/pagination-indicators/scss/style.scss @@ -0,0 +1,78 @@ +.pindicator { + background-color: white; + display: flex; + margin: 2rem auto 0; + width: 30rem; +} +.pindicator .bullet { + flex: 1; + position: relative; + text-align: center; + transform-style: preserve-3d; +} +.pindicator .bullet::before, +.pindicator .bullet::after { + content: ''; + display: block; + position: absolute; + height: .5rem; + top: 1.25rem; + transform: translate3d(0,0,-1px); +} +.pindicator .bullet::before { + background-color: lightgray; + width: 100%; +} +.pindicator .bullet::after { + background-color: black; + transition: opacity .25s ease-out; + opacity: 0; + width: 100%; +} + +.pindicator .bullet:first-child::before, +.pindicator .bullet:first-child::after { + left: 50%; + width: 50%; +} +.pindicator .bullet:last-child::before, +.pindicator .bullet:last-child::after { + width: 50%; +} + +.pindicator .icon { + background-color: lightgray; + border-radius: 100%; + color: transparent; + cursor: pointer; + font-size: 1.5rem; + display: inline-block; + height: 2em; + line-height: 2; + text-align: center; + transition: background-color .25s ease-out; + width: 2em; +} +.pindicator .text { + color: lightgray; + font-size: .75rem; + margin-top: 1rem; + text-transform: uppercase; + transition: background-color .25s ease-out; +} +.pindicator .past .icon, +.pindicator .current .icon { + background-color: black; + color: white; +} + +.pindicator .past::after, +.pindicator .current::after { + opacity: 1; +} + +.pindicator .past .text, +.pindicator .current .text, +.pindicator .next .text,{ + color: black; +} \ No newline at end of file diff --git a/progress-bar/README.md b/progress-bar/README.md new file mode 100644 index 00000000..9d6a666d --- /dev/null +++ b/progress-bar/README.md @@ -0,0 +1,4 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/andytran/pen/ZWKdzQ. + + # Interactive Progress Bar +Developed by [Andy Tran](http://andytran.me) | Designed by [Tahir Yousaf](https://dribbble.com/shots/2503230-Progress-Bar) \ No newline at end of file diff --git a/progress-bar/config.rb b/progress-bar/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/progress-bar/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/progress-bar/css/reset.css b/progress-bar/css/reset.css new file mode 100644 index 00000000..3b2627d6 --- /dev/null +++ b/progress-bar/css/reset.css @@ -0,0 +1 @@ +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} diff --git a/progress-bar/css/style.css b/progress-bar/css/style.css new file mode 100644 index 00000000..cd9381ad --- /dev/null +++ b/progress-bar/css/style.css @@ -0,0 +1,170 @@ +body { + background: #E8DFD9; +} + +.squares { + position: fixed; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.boxes { + position: fixed; + top: 50%; + left: 50%; + width: 90%; + max-width: 790px; + height: 180px; + font-family: "Open Sans", sans-serif; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.box { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + background: #FFF; + width: 100%; + height: 100%; + border-radius: 20px; + box-shadow: 40px 0 65px rgba(212, 197, 186, 0.4); + padding: 0 80px; + box-sizing: border-box; + opacity: 0; + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: scale(1.2, 1.2); + transform: scale(1.2, 1.2); +} +.box:nth-child(1), .box:nth-child(2) { + position: absolute; +} +.box:nth-child(1) { + left: 3%; + width: 94%; +} +.box:nth-child(2) { + left: 2%; + width: 96%; +} + +.progress { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; +} + +.bar { + position: absolute; + top: 50%; + left: 50%; + background: #E8DFD8; + width: 100%; + height: 3px; + border-radius: 10px; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + overflow: hidden; +} +.bar__fill { + display: block; + background: #BD8044; + height: 100%; +} + +.point { + position: relative; + color: #AC9585; + cursor: pointer; +} +.point:before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 120px; + height: 120px; + border-radius: 100%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + -webkit-transition: 0.3s ease; + transition: 0.3s ease; +} +.show-radius .point:before { + background: rgba(0, 0, 0, 0.1); +} +.point--complete, .point--active { + color: #BA7C3F; +} + +.bullet { + z-index: 1; + position: relative; + background: #AC9585; + width: 8px; + height: 8px; + border-radius: 100%; + -webkit-transition: 0.3s ease; + transition: 0.3s ease; +} +.point--complete .bullet, .point--active .bullet { + background: #FFFFFF; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 6px #BD8044; +} +.point--active .bullet { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 10px #BD8044; +} + +.label { + position: absolute; + top: 100%; + left: 50%; + margin: 20px 0 0 0; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); +} + +.radius-toggle { + position: absolute; + top: 20px; + left: 20px; + display: block; + background: #FFF; + border: 0; + border-radius: 4px; + box-shadow: 40px 0 65px rgba(212, 197, 186, 0.4); + padding: 10px; + color: #BA7C3F; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; +} diff --git a/progress-bar/index.html b/progress-bar/index.html new file mode 100644 index 00000000..acef4ad7 --- /dev/null +++ b/progress-bar/index.html @@ -0,0 +1,59 @@ + + + + + Progress Bar + + + + + + + + + + + + + + + + + +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        +
        + +
        +
        +
        + +
        +
        +
        + +
        +
        +
        +
        + + + + + + + + + + diff --git a/progress-bar/index.jade b/progress-bar/index.jade new file mode 100644 index 00000000..32c17948 --- /dev/null +++ b/progress-bar/index.jade @@ -0,0 +1,23 @@ +img.squares(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/squares.png") + +.boxes + .box + .box + .box + .progress + .bar + .bar__fill(style="width: 33%;") + .point.point--complete + .bullet + label.label Select + .point.point--active + .bullet + label.label Review + .point + .bullet + label.label Payment + .point + .bullet + label.label Success + +button.radius-toggle Toggle Click Radius \ No newline at end of file diff --git a/progress-bar/js/index.js b/progress-bar/js/index.js new file mode 100644 index 00000000..6ee2394c --- /dev/null +++ b/progress-bar/js/index.js @@ -0,0 +1,83 @@ +var $boxOne = $('.box:nth-child(1)'), + $boxTwo = $('.box:nth-child(2)'), + $boxThree = $('.box:nth-child(3)'); + +var boxOne = new TimelineMax(), + boxTwo = new TimelineMax(), + boxThree = new TimelineMax(); + +boxOne.to($boxOne, 0.6, { + opacity: 0.25, + scale: 1, + ease: Back.easeOut +}).to($boxOne, 0.6, { + rotation: 4, + ease: Back.easeOut +}, 2); + +boxTwo.to($boxTwo, 0.6, { + opacity: 0.5, + scale: 1, + ease: Back.easeOut +}, 0.6).to($boxTwo, 0.6, { + rotation: -4, + ease: Back.easeOut +}, 1.8); + +boxThree.to($boxThree, 0.6, { + opacity: 1, + scale: 1, + ease: Back.easeOut +}, 1.2); + +/** + * Point Animation + */ +$('.point').on('click', function(e) { + var getTotalPoints = $('.point').length, + getIndex = $(this).index(), + getCompleteIndex = $('.point--active').index(); + + TweenMax.to($('.bar__fill'), 0.6, { + width: (getIndex - 1) / (getTotalPoints - 1) * 100 + '%' + }); + + if (getIndex => getCompleteIndex) { + $('.point--active').addClass('point--complete').removeClass('point--active'); + + $(this).addClass('point--active'); + $(this).prevAll().addClass('point--complete'); + $(this).nextAll().removeClass('point--complete'); + } +}); + +/* + Demo Purposes +*/ +var progressAnimation = function() { + var getTotalPoints = $('.point').length, + getIndex = Math.floor(Math.random() * 4) + 1, + getCompleteIndex = $('.point--active').index(); + + TweenMax.to($('.bar__fill'), 0.6, { + width: (getIndex - 1) / (getTotalPoints - 1) * 100 + '%' + }); + + if (getIndex => getCompleteIndex) { + $('.point--active').addClass('point--complete').removeClass('point--active'); + + $('.point:nth-child(' + (getIndex + 1) + ')').addClass('point--active'); + $('.point:nth-child(' + (getIndex + 1) + ')').prevAll().addClass('point--complete'); + $('.point:nth-child(' + (getIndex + 1) + ')').nextAll().removeClass('point--complete'); + } +}; + +var animateProgress = setInterval(progressAnimation, 1200); + +$(document).hover(function() { + clearInterval(animateProgress) +}); + +$('.radius-toggle').on('click', function() { + $('body').toggleClass('show-radius') +}); \ No newline at end of file diff --git a/progress-bar/license.md b/progress-bar/license.md new file mode 100644 index 00000000..b59c57ad --- /dev/null +++ b/progress-bar/license.md @@ -0,0 +1,10 @@ + + diff --git a/progress-bar/scss/style.scss b/progress-bar/scss/style.scss new file mode 100644 index 00000000..76d61edc --- /dev/null +++ b/progress-bar/scss/style.scss @@ -0,0 +1,161 @@ +$black: #000; +$white: #FFF; + +$width: 790px; +$height: 180px; + +body { + background: #E8DFD9; +} + +.squares { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.boxes { + position: fixed; + top: 50%; + left: 50%; + width: 90%; + max-width: $width; + height: $height; + font-family: "Open Sans", sans-serif; + transform: translate(-50%, -50%); +} + +.box { + position: relative; + display: flex; + align-items: center; + flex-direction: row; + background: $white; + width: 100%; + height: 100%; + border-radius: 20px; + box-shadow: 40px 0 65px rgba(#D4C5BA, 0.4); + padding: 0 80px; + box-sizing: border-box; + opacity: 0; + transform-origin: center; + transform: scale(1.2, 1.2); + + &:nth-child(1), + &:nth-child(2) { + position: absolute; + } + + &:nth-child(1) { + left: 3%; + width: 94%; + } + + &:nth-child(2) { + left: 2%; + width: 96%; + } +} + +.progress { + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; +} + +.bar { + position: absolute; + top: 50%; + left: 50%; + background: #E8DFD8; + width: 100%; + height: 3px; + border-radius: 10px; + transform: translate(-50%, -50%); + overflow: hidden; + + &__fill { + display: block; + background: #BD8044; + height: 100%; + } +} + +.point { + position: relative; + color: #AC9585; + cursor: pointer; + + &:before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 120px; + height: 120px; + border-radius: 100%; + transform: translate(-50%, -50%); + transition: 0.3s ease; + + .show-radius & { + background: rgba(#000, 0.1); + } + } + + &--complete, + &--active { + color: #BA7C3F; + } +} + +.bullet { + z-index: 1; + position: relative; + background: #AC9585; + width: 8px; + height: 8px; + border-radius: 100%; + transition: 0.3s ease; + + .point--complete &, + .point--active & { + background: #FFFFFF; + box-shadow: 0 2px 4px rgba(#000, 0.2), + 0 0 0 6px #BD8044; + } + + .point--active & { + box-shadow: 0 2px 4px rgba(#000, 0.2), + 0 0 0 10px #BD8044; + } +} + +.label { + position: absolute; + top: 100%; + left: 50%; + margin: 20px 0 0 0; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + transform: translate(-50%, 0); +} + +.radius-toggle { + position: absolute; + top: 20px; + left: 20px; + display: block; + background: $white; + border: 0; + border-radius: 4px; + box-shadow: 40px 0 65px rgba(#D4C5BA, 0.4); + padding: 10px; + color: #BA7C3F; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; +} \ No newline at end of file diff --git a/react-dailyui-010-social-share/README.md b/react-dailyui-010-social-share/README.md new file mode 100644 index 00000000..4a3691fc --- /dev/null +++ b/react-dailyui-010-social-share/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/jackoliver/pen/BzXEWd. + + Day 10 of 100! 10% of the way through baby! Awesome. Today is a social share button. click the button and see what happens. :D \ No newline at end of file diff --git a/react-dailyui-010-social-share/babel/index.babel b/react-dailyui-010-social-share/babel/index.babel new file mode 100644 index 00000000..c0747839 --- /dev/null +++ b/react-dailyui-010-social-share/babel/index.babel @@ -0,0 +1,79 @@ +// Data Object +var data = { + title: 'ReactJS Daily UI Collection', + author: 'Jack-Edward Oliver', + image: 'http://static1.squarespace.com/static/55acc005e4b098e615cd80e2/5777cee5b8a79b6f0197ecba/5794e1a320099e05310a2d50/1469374903360/IMG_3270.jpg?format=750w', + url: 'http://codepen.io/collection/DoLZRm/', + share: [ + { + type: 'facebook', + count: 24, + url: 'https://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://codepen.io/collection/DoLZRm/' + }, + { + type: 'twitter', + count: 11, + url: 'https://twitter.com/intent/tweet?hashtags=react,ui,dev&text=ReactJS%20Daily%20UI%20on%20Codepen&tw_p=tweetbutton&url=http://codepen.io/collection/DoLZRm/&via=mrjackolai' + } + ] +}; + +// Components +var App = React.createClass({ + getDefaultProps: function() { + return (data); + }, + render: function() { + return ( +
        + + +
        + ); + } +}); + +var Image = React.createClass({ + render: function() { + return ( +
        +
        +

        {this.props.title}

        +

        by {this.props.author}

        +
        +
        + ); + } +}); + +var Buttons = React.createClass({ + render: function() { + var buttons = this.props.data.share.map(function(button, i) { + return +

        {this.props.name}

        +

        {this.props.desc}

        +

        Tags

        +
          + {this.props.tags.map(tag =>
        • {tag}
          • )} +
        + + + + ) + } +} + +class Gallery extends React.Component { + render() { + return ( +
        + { + this.props.data.map( data => + + ) + } +
        + ) + } +} + +class Tile extends React.Component { + _handleClick() { + this.props._openImageView(this.props.id) + } + render() { + return ( +
        +
        +

        {this.props.name}

        + {/*

        {this.props.desc}

        */} +
        + {this.props.name} +
        + ) + } +} + +const Image = (props) => ( + {props.name} +) + +// Render app +ReactDOM.render(, document.getElementById('app')) \ No newline at end of file diff --git a/react-gallery-v2/config.rb b/react-gallery-v2/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/react-gallery-v2/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/react-gallery-v2/css/normalize.css b/react-gallery-v2/css/normalize.css new file mode 100644 index 00000000..8393ac44 --- /dev/null +++ b/react-gallery-v2/css/normalize.css @@ -0,0 +1 @@ +/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input,select{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[disabled]{cursor:default}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none} diff --git a/react-gallery-v2/css/style.css b/react-gallery-v2/css/style.css new file mode 100644 index 00000000..fe9e86be --- /dev/null +++ b/react-gallery-v2/css/style.css @@ -0,0 +1,239 @@ +@import "https://fonts.googleapis.com/css?family=Oswald:300|Slabo+27px"; +body, html, #app { + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +:root { + font-family: 'Slabo 27px'; + font-size: 14px; + color: #333333; +} + +@media screen and (min-width: 768px) { + :root { + font-size: 16px; + } +} +@media screen and (min-width: 1024px) { + :root { + font-size: 18px; + } +} +@media screen and (min-width: 1440px) { + :root { + font-size: 23px; + } +} +.gallery { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 34px; +} + +.gallery-tile { + min-width: 200px; + max-width: 28vw; + margin: 0.25em; + overflow: hidden; + position: relative; + cursor: pointer; +} +.gallery-tile img { + width: 100%; + height: 100%; + -webkit-transition: -webkit-transform 300ms ease-in-out, -webkit-filter 300ms ease-in-out; + transition: -webkit-transform 300ms ease-in-out, -webkit-filter 300ms ease-in-out; + transition: transform 300ms ease-in-out, filter 300ms ease-in-out; + transition: transform 300ms ease-in-out, filter 300ms ease-in-out, -webkit-transform 300ms ease-in-out, -webkit-filter 300ms ease-in-out; +} +.gallery-tile .picture-info { + position: absolute; + z-index: 1; + color: #ffffff; + width: 100%; + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; + opacity: 0; + -webkit-transition: opacity 300ms ease-in-out, -webkit-filter 300ms ease-in-out; + transition: opacity 300ms ease-in-out, -webkit-filter 300ms ease-in-out; + transition: opacity 300ms ease-in-out, filter 300ms ease-in-out; + transition: opacity 300ms ease-in-out, filter 300ms ease-in-out, -webkit-filter 300ms ease-in-out; +} +.gallery-tile .picture-info > * { + margin: 0.5rem 1.25rem; +} +.gallery-tile .picture-info h2 { + font-family: 'Oswald'; + font-size: 2.5rem; + font-weight: 300; + text-transform: uppercase; + letter-spacing: 0.1em; +} +.gallery-tile:hover img { + -webkit-transform: scale(1.1); + transform: scale(1.1); + -webkit-filter: brightness(80%); + filter: brightness(80%); +} +.gallery-tile:hover .picture-info { + opacity: 1; +} + +.imageview-wrapper { + width: 100%; + height: 100vh; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +.imageview { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.imageview > * { + margin: 3em; +} + +.imageview-image { + width: 25em; + height: 25em; + box-shadow: 0 20px 40px -5px rgba(66, 66, 66, 0.7); +} + +.imageview-info { + max-width: 260px; + text-align: right; + position: relative; +} +.imageview-info button { + font-family: 'Oswald'; + font-size: 1.5rem; + font-weight: 300; + text-transform: uppercase; + letter-spacing: 0.1em; + color: #e74c3c; + border: none; + background: none; + outline: none; + margin: 0; + padding: 0; + position: absolute; + top: -2em; + right: -1em; +} +.imageview-info button:hover { + -webkit-animation: swell 300ms ease-in-out; + animation: swell 300ms ease-in-out; +} +.imageview-info h2 { + font-family: 'Oswald'; + font-size: 2.5rem; + font-weight: 300; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-top: 0; +} +.imageview-info h3 { + font-family: 'Oswald'; + font-size: 1.5rem; + font-weight: 300; + text-transform: uppercase; + letter-spacing: 0.1em; +} +.imageview-info ul { + list-style: none; +} + +.fadeIn { + -webkit-animation: fade 300ms ease-in-out forwards; + animation: fade 300ms ease-in-out forwards; +} + +@-webkit-keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-webkit-keyframes swell { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes swell { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} diff --git a/react-gallery-v2/index.html b/react-gallery-v2/index.html new file mode 100644 index 00000000..2e65be76 --- /dev/null +++ b/react-gallery-v2/index.html @@ -0,0 +1,31 @@ + + + + + React Gallery v2 + + + + + + + + + + + + + + + + +
        + + + + + + + + + diff --git a/react-gallery-v2/index.jade b/react-gallery-v2/index.jade new file mode 100644 index 00000000..4b9f0fed --- /dev/null +++ b/react-gallery-v2/index.jade @@ -0,0 +1 @@ +#app \ No newline at end of file diff --git a/react-gallery-v2/js/index.js b/react-gallery-v2/js/index.js new file mode 100644 index 00000000..8cbb027f --- /dev/null +++ b/react-gallery-v2/js/index.js @@ -0,0 +1,235 @@ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var App = function (_React$Component) { + _inherits(App, _React$Component); + + function App() { + _classCallCheck(this, App); + + var _this = _possibleConstructorReturn(this, _React$Component.call(this)); + + _this.state = { + data: [], + activeID: 0, + imageView: false + }; + return _this; + } + + App.prototype.componentWillMount = function componentWillMount() { + this._loadData('https://s3-us-west-2.amazonaws.com/s.cdpn.io/735173/rpg-2-data.json'); + }; + + App.prototype.componentWillUnmount = function componentWillUnmount() { + this._loadData.abort(); + }; + // Fetch data, then clone it to state using destructuring + // XHR Fallback + + App.prototype._loadData = function _loadData(url) { + var _this2 = this; + + fetch(url, { + method: 'GET' + }).then(function (response) { + return response.json(); + }).then(function (json) { + return _this2.setState({ + data: [].concat(json.gallery) + }); + }).catch(function (err) { + console.log(err.message); + try { + (function () { + var xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.responseType = 'json'; + + xhr.onload = function () { + var json = xhr.response; + _this2.setState({ + data: [].concat(json.gallery) + }); + }; + + xhr.onerror = function () { + throw new Error('XMLHttpRequest Failed...'); + }; + + xhr.send(); + })(); + } catch (e) { + console.log(e.message); + } + }); + }; + + App.prototype._openImageView = function _openImageView(id) { + this.setState({ + activeID: id, + imageView: true + }); + }; + + App.prototype._closeImageView = function _closeImageView() { + this.setState({ + imageView: false + }); + }; + + App.prototype.render = function render() { + return React.createElement( + 'div', + { className: 'wrapper' }, + this.state.imageView ? React.createElement(ImageView, _extends({}, this.state.data[this.state.activeID], { + _closeImageView: this._closeImageView.bind(this) })) : React.createElement(Gallery, { data: this.state.data, + _openImageView: this._openImageView.bind(this) }) + ); + }; + + return App; +}(React.Component); + +var ImageView = function (_React$Component2) { + _inherits(ImageView, _React$Component2); + + function ImageView() { + _classCallCheck(this, ImageView); + + return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments)); + } + + ImageView.prototype.render = function render() { + return React.createElement( + 'div', + { className: 'imageview-wrapper fadeIn' }, + React.createElement( + 'div', + { className: 'imageview' }, + React.createElement(Image, { CSSClass: 'imageview-image', + src: this.props.src, + alt: this.props.name }), + React.createElement( + 'div', + { className: 'imageview-info' }, + React.createElement( + 'button', + { className: 'imageview-close', onClick: this.props._closeImageView }, + 'x' + ), + React.createElement( + 'h2', + null, + this.props.name + ), + React.createElement( + 'p', + null, + this.props.desc + ), + React.createElement( + 'h3', + null, + 'Tags' + ), + React.createElement( + 'ul', + null, + this.props.tags.map(function (tag) { + return React.createElement( + 'li', + null, + tag + ); + }) + ) + ) + ) + ); + }; + + return ImageView; +}(React.Component); + +var Gallery = function (_React$Component3) { + _inherits(Gallery, _React$Component3); + + function Gallery() { + _classCallCheck(this, Gallery); + + return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments)); + } + + Gallery.prototype.render = function render() { + var _this5 = this; + + return React.createElement( + 'div', + { className: 'gallery fadeIn' }, + this.props.data.map(function (data) { + return React.createElement(Tile, { key: data.id, + id: data.id, + src: data.src, + name: data.name, + desc: data.desc, + _openImageView: _this5.props._openImageView }); + }) + ); + }; + + return Gallery; +}(React.Component); + +var Tile = function (_React$Component4) { + _inherits(Tile, _React$Component4); + + function Tile() { + _classCallCheck(this, Tile); + + return _possibleConstructorReturn(this, _React$Component4.apply(this, arguments)); + } + + Tile.prototype._handleClick = function _handleClick() { + this.props._openImageView(this.props.id); + }; + + Tile.prototype.render = function render() { + return React.createElement( + 'div', + { className: 'gallery-tile', onClick: this._handleClick.bind(this) }, + React.createElement( + 'div', + { className: 'picture-info' }, + React.createElement( + 'h2', + null, + this.props.name + ) + ), + React.createElement(Image, { + CSSClass: 'tile-image', + src: this.props.src, + alt: this.props.name }) + ); + }; + + return Tile; +}(React.Component); + +var Image = function Image(props) { + return React.createElement('img', { + className: props.CSSClass, + src: props.src, + alt: props.name }); +}; + +// Render app +ReactDOM.render(React.createElement(App, null), document.getElementById('app')); \ No newline at end of file diff --git a/react-gallery-v2/license.md b/react-gallery-v2/license.md new file mode 100644 index 00000000..c2eac198 --- /dev/null +++ b/react-gallery-v2/license.md @@ -0,0 +1,10 @@ + + diff --git a/react-gallery-v2/scss/style.scss b/react-gallery-v2/scss/style.scss new file mode 100644 index 00000000..0ede0d35 --- /dev/null +++ b/react-gallery-v2/scss/style.scss @@ -0,0 +1,156 @@ +// Import fonts +@import 'https://fonts.googleapis.com/css?family=Oswald:300|Slabo+27px'; + +// Sassy stuff +$white: #ffffff; +$black: #333333; +$red: #e74c3c; +$transblack: rgba(66,66,66,0.7); + +@mixin header-font($size) { + font: { + family:'Oswald'; + size: $size; + weight: 300; + } + text-transform: uppercase; + letter-spacing: 0.1em; +} + +// Base Stuff inc responsive text +body, html, #app { + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +:root { + font: { + family: 'Slabo 27px'; + size: 14px; + } + color: $black; +} +// Tablet +@media screen and (min-width:768px){ + :root { font-size: 16px; } +} +// Desktop +@media screen and (min-width:1024px){ + :root { font-size: 18px; } +} +// Large Desktop +@media screen and (min-width:1440px){ + :root { font-size: 23px; } +} + +// Main Styles +.gallery { + display: flex; + flex-flow: row wrap; + justify-content: center; + padding: 34px; +} +.gallery-tile { + min-width: 200px; + max-width: 28vw; + margin: 0.25em; + overflow: hidden; + position: relative; + cursor: pointer; + img { + width: 100%; + height: 100%; + transition: transform 300ms ease-in-out, filter 300ms ease-in-out; + } + .picture-info { + & > * { + margin: 0.5rem 1.25rem; + } + h2 { + @include header-font(2.5rem); + } + position: absolute; + z-index: 1; + color: $white; + width: 100%; + height: 100%; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: flex-start; + opacity: 0; + transition: opacity 300ms ease-in-out, + filter 300ms ease-in-out; + } + &:hover { + img { + transform: scale(1.1); + filter: brightness(80%); + } + .picture-info { + opacity: 1; + } + } + +} +.imageview-wrapper { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} +.imageview { + display: flex; + justify-content: center; +} +.imageview > * { margin: 3em; } +.imageview-image { + width: 25em; + height: 25em; + box-shadow: 0 20px 40px -5px $transblack; +} +.imageview-info { + max-width: 260px; + text-align: right; + position: relative; + button { + @include header-font(1.5rem); + color: $red; + border: none; + background: none; + outline: none; + margin: 0; + padding: 0; + position: absolute; + top: -2em; + right: -1em; + &:hover { + animation: swell 300ms ease-in-out; + } + } + h2 { + @include header-font(2.5rem); + margin-top: 0; + } + h3 { + @include header-font(1.5rem); + } + ul { + list-style: none; + } +} + +.fadeIn { animation: fade 300ms ease-in-out forwards; } + +@keyframes fade { + 0% { opacity: 0; } + 100% { opacity: 1; } +} +@keyframes swell { + 0% { transform: scale(1); } + 50% { transform: scale(1.3); } + 100% { transform: scale(1); } +} \ No newline at end of file diff --git a/responsive-breaking-bad-card-ui/README.md b/responsive-breaking-bad-card-ui/README.md new file mode 100644 index 00000000..b280178e --- /dev/null +++ b/responsive-breaking-bad-card-ui/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/eslamaboudesheesh/pen/ZOdGEp. + + \ No newline at end of file diff --git a/responsive-breaking-bad-card-ui/config.rb b/responsive-breaking-bad-card-ui/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/responsive-breaking-bad-card-ui/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/responsive-breaking-bad-card-ui/css/style.css b/responsive-breaking-bad-card-ui/css/style.css new file mode 100644 index 00000000..e66333b6 --- /dev/null +++ b/responsive-breaking-bad-card-ui/css/style.css @@ -0,0 +1,285 @@ +@charset "UTF-8"; +@import url(http://fonts.googleapis.com/css?family=Lato:400,300,700); +@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); +body { + background: #313131; +} + +@media (max-width: 768px) { + .container { + width: 250px !important; + height: 950px !important; + overflow: hidden; + } + .container .about-movie { + display: inline-block !important; + } + .container .about-movie p { + width: 49% !important; + padding-left: 15px; + padding-right: 15px; + } +} +.movie-card { + font: 14px/22px "Lato", Arial, sans-serif; + color: #A9A8A3; + padding: 40px 0; +} +.movie-card .container { + margin: 0 auto; + width: 680px; + height: 640px; + background: #F0F0ED; + border-radius: 5px; + position: relative; +} +.movie-card .container a img { + max-width: 550px; + max-height: 250px; +} +.movie-card .container .back-cover { + height: 342px; + margin: 0; + position: relative; + overflow: hidden; + z-index: 1; + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} +.movie-card .container .back-cover:before { + content: " "; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: url("http://laughingsquid.com/wp-content/uploads/bbillo2.jpg"); + z-index: -1; + background-repeat: no-repeat; + background-size: cover; + transform: skewY(-3.2deg); + transform-origin: 0 0; +} +.movie-card .container .cover { + position: absolute; + top: 160px; + left: 40px; + z-index: 2; +} +.movie-card .container .cover:hover { + opacity: 0.9; + cursor: pointer; +} +.movie-card .container .details { + padding: 238px 0 0 268px; +} +.movie-card .container .details .title1 { + color: #eee; + font-size: 44px; + margin-bottom: 16px; + position: relative; +} +.movie-card .container .details .title1 span { + position: absolute; + top: 3px; + margin-left: 12px; + background: #C4AF3D; + border-radius: 5px; + color: #544C21; + font-size: 14px; + padding: 0px 4px; +} +.movie-card .container .title2 { + color: white; + font-size: 15px; + font-weight: 600; + margin-bottom: 15px; +} +.movie-card .container .likes { + margin-left: 30px; + display: inline-block; + padding-bottom: 19px; +} +.movie-card .container .likes:before { + content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/icon_like.png"); + position: relative; + top: 2px; + padding-right: 7px; +} +.movie-card .container .about-movie { + display: inline-flex; + bottom: 0px; + height: 200px; + font-size: 16px; + line-height: 26px; + color: #B1B0AC; +} +.movie-card .container .about-movie .colum-one { + padding-left: 50px; + padding-top: 90px; + width: 220px; + float: left; + text-align: left; +} +.movie-card .container .about-movie .colum-one .colum-catogary { + text-align: left; + margin-left: -20px; +} +.movie-card .container .about-movie .colum-one .colum-catogary span { + padding: 1px 8px; + font-size: 14px; + background: white; + border-radius: 10px; + margin-left: 2px; +} +.movie-card .container .about-movie .colum-one .colum-catogary span:hover { + background: #999; + color: white; + cursor: pointer; +} +.movie-card .container .about-movie .colum-second { + padding-left: 38px; + padding-top: 21px; + margin-left: -39px; + width: 480px; + float: left; +} +.movie-card .container .about-movie .colum-second p { + width: 76%; +} +.movie-card .container .about-movie .colum-second p a { + text-decoration: none; + color: #6e6ed8; +} + +/*start rate system style */ +fieldset { + border-color: #fff; + border-style: none; +} + +.starRating { + margin-left: -22px; +} + +.starRating > * { + float: left; +} + +/* +some animtion do when load window + +*/ +@-webkit-keyframes pulse { + 50% { + color: #5e5e5e; + text-shadow: 0 0 15px #777777; + } +} +@keyframes pulse { + 50% { + color: #5e5e5e; + text-shadow: 0 0 15px #777777; + } +} +.starRating label { + height: 40px; + width: 15%; + position: relative; + cursor: pointer; +} + +.starRatinglabel:nth-of-type(5):after { + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; +} + +.starRating label:nth-of-type(4):after { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; +} + +.starRating label:nth-of-type(3):after { + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; +} + +.starRating label:nth-of-type(2):after { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; +} + +.starRating label:nth-of-type(1):after { + -webkit-animation-delay: 0.05s; + animation-delay: 0.05s; +} + +.starRating label:after { + -webkit-transition: all 0.4s ease-out; + transition: all 0.4s ease-out; + position: absolute; + content: "☆"; + color: #444; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + font-size: 40px; + -webkit-animation: 1s pulse ease; + animation: 1s pulse ease; +} + +.starRating label:hover:after { + color: #5e5e5e; + text-shadow: 0 0 15px #5e5e5e; +} + +.starRating input { + display: none; +} + +/* " +" This will only work on IE7 or above. In IE6, the style will not be applied to any elements so used "~ " this meaning select any element after the input radio button +show + + http://jsfiddle.net/7c05m7tv/ + https://css-tricks.com/almanac/selectors/a/adjacent-sibling/ + http://jsfiddle.net/7c05m7tv/70/ + +*/ +.starRating input:checked + label:after, +.starRating input:checked ~ label:after { + content: "★"; + color: #F9BF3B; + text-shadow: 0 0 20px #F9BF3B; +} + +.myName { + position: absolute; + top: 1em; + left: 1em; + padding: 5px 15px; + color: #FFF; + font-family: arial; + width: 30%; +} + +.myName a { + color: #FFF; + text-decoration: none; + font-size: 1.3em; + font-weight: normal; + float: left; + margin-top: 3%; + margin-left: 3%; +} + +.myName a:hover { + text-decoration: underline; +} + +.myName img { + width: 50px; + border-radius: 50%; + float: left; +} diff --git a/responsive-breaking-bad-card-ui/index.html b/responsive-breaking-bad-card-ui/index.html new file mode 100644 index 00000000..d9a95c80 --- /dev/null +++ b/responsive-breaking-bad-card-ui/index.html @@ -0,0 +1,113 @@ + + + + + Responsive Breaking Bad Card UI + + + + + + + + + + + + + + +
        + +
        + + cover + +
        +
        + +
        Breaking Bad TV-14
        + +
        TV Series (2008–2013)
        + + +
        + + + +
        + +
        +
        + +
        + + + + + + + + + + + + + + + + + + + + + + +
        + + +
        + Crime + Drama + Thriller +
        + +
        + +
        +
        + +
        + +

        When chemistry teacher Walter White is diagnosed with Stage III cancer and given only two years to live, he decides he has nothing to lose.A high school chemistry teacher diagnosed with inoperable lung cancer turns to manufacturing and selling + methamphetamine in order to secure his family's financial future... + read more + +

        +
        +
        + +
        + +
        + + + + + + + + + + + +
        + + Eslam UI +
        + + + + + + diff --git a/responsive-breaking-bad-card-ui/license.md b/responsive-breaking-bad-card-ui/license.md new file mode 100644 index 00000000..2151ee0c --- /dev/null +++ b/responsive-breaking-bad-card-ui/license.md @@ -0,0 +1,10 @@ + + diff --git a/responsive-breaking-bad-card-ui/scss/style.scss b/responsive-breaking-bad-card-ui/scss/style.scss new file mode 100644 index 00000000..f429ba5a --- /dev/null +++ b/responsive-breaking-bad-card-ui/scss/style.scss @@ -0,0 +1,293 @@ +@import url(http://fonts.googleapis.com/css?family=Lato:400,300,700); +@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); +body { + background: #313131; +} + +@media (max-width: 768px) { + .container { + width: 250px !important; + height: 950px !important; + overflow: hidden; + .about-movie { + display: inline-block !important; + p { + width: 49% !important; + padding-left: 15px; + padding-right: 15px; + } + } + } +} + +.movie-card { + font: 14px/22px "Lato", Arial, sans-serif; + color: #A9A8A3; + padding: 40px 0; + .container { + margin: 0 auto; + width: 680px; + height: 640px; + background: #F0F0ED; + border-radius: 5px; + position: relative; + a { + img { + max-width: 550px; + max-height: 250px; + } + } + .back-cover { + height: 342px; + margin: 0; + position: relative; + overflow: hidden; + z-index: 1; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + &:before { + content: " "; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: url("http://laughingsquid.com/wp-content/uploads/bbillo2.jpg"); + z-index: -1; + background-repeat: no-repeat; + background-size: cover; + transform: skewY(-3.2deg); + transform-origin: 0 0; + } + } + .cover { + position: absolute; + top: 160px; + left: 40px; + z-index: 2; + &:hover { + opacity: 0.9; + cursor: pointer; + } + } + .details { + padding: 238px 0 0 268px; + .title1 { + color: #eee; + font-size: 44px; + margin-bottom: 16px; + position: relative; + span { + position: absolute; + top: 3px; + margin-left: 12px; + background: #C4AF3D; + border-radius: 5px; + color: #544C21; + font-size: 14px; + padding: 0px 4px; + } + } + } // end details + .title2 { + color: white; + font-size: 15px; + font-weight: 600; + margin-bottom: 15px; + } + .likes { + margin-left: 30px; + display: inline-block; + padding-bottom: 19px; + &:before { + content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/icon_like.png"); + position: relative; + top: 2px; + padding-right: 7px; + } + } + .about-movie { + display: inline-flex; + bottom: 0px; + height: 200px; + font-size: 16px; + line-height: 26px; + color: #B1B0AC; + .colum-one { + padding-left: 50px; + padding-top: 90px; + width: 220px; + float: left; + text-align: left; + .colum-catogary { + text-align: left; + margin-left: -20px; + span { + padding: 1px 8px; + font-size: 14px; + background: white; + border-radius: 10px; + margin-left: 2px; + &:hover { + background: #999; + color: white; + cursor: pointer; + } + } + } + } + .colum-second { + padding-left: 38px; + padding-top: 21px; + margin-left: -39px; + width: 480px; + float: left; + p { + width: 76%; + a { + text-decoration: none; + color: #6e6ed8; + } + } + } + } + } //container end +} //movie-card end + +/*start rate system style */ + +fieldset { + border-color: #fff; + border-style: none; +} + +.starRating { + margin-left: -22px; +} + +.starRating > * { + float: left; +} + + +/* +some animtion do when load window + +*/ + +@-webkit-keyframes pulse { + 50% { + color: #5e5e5e; + text-shadow: 0 0 15px #777777; + } +} + +@keyframes pulse { + 50% { + color: #5e5e5e; + text-shadow: 0 0 15px #777777; + } +} + +.starRating label { + height: 40px; + width: 15%; + position: relative; + cursor: pointer; +} + +.starRatinglabel:nth-of-type(5):after { + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; +} + +.starRating label:nth-of-type(4):after { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; +} + +.starRating label:nth-of-type(3):after { + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; +} + +.starRating label:nth-of-type(2):after { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; +} + +.starRating label:nth-of-type(1):after { + -webkit-animation-delay: 0.05s; + animation-delay: 0.05s; +} + +.starRating label:after { + -webkit-transition: all 0.4s ease-out; + transition: all 0.4s ease-out; + position: absolute; + content: "☆"; + color: #444; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + font-size: 40px; + -webkit-animation: 1s pulse ease; + animation: 1s pulse ease; +} + +.starRating label:hover:after { + color: #5e5e5e; + text-shadow: 0 0 15px #5e5e5e; +} + +.starRating input { + display: none; +} + + +/* " +" This will only work on IE7 or above. In IE6, the style will not be applied to any elements so used "~ " this meaning select any element after the input radio button +show + + http://jsfiddle.net/7c05m7tv/ + https://css-tricks.com/almanac/selectors/a/adjacent-sibling/ + http://jsfiddle.net/7c05m7tv/70/ + +*/ + +.starRating input:checked + label:after, +.starRating input:checked ~ label:after { + content: "★"; + color: #F9BF3B; + text-shadow: 0 0 20px #F9BF3B; +} + + + + + +.myName{ + position: absolute; + top: 1em; + left: 1em; + padding: 5px 15px; + color: #FFF; + font-family: arial; + width: 30%; +} +.myName a{ + color: #FFF; + text-decoration: none; + font-size: 1.3em; + font-weight: normal; + float: left; + margin-top: 3%; + margin-left: 3%; +} +.myName a:hover{text-decoration: underline;} +.myName img{ + width: 50px; + border-radius: 50%; + float: left; +} \ No newline at end of file diff --git a/simple-card-ui/README.md b/simple-card-ui/README.md new file mode 100644 index 00000000..a50aa4c5 --- /dev/null +++ b/simple-card-ui/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/ArnaudBalland/pen/zKRKqZ. + + \ No newline at end of file diff --git a/simple-card-ui/config.rb b/simple-card-ui/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/simple-card-ui/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/simple-card-ui/css/style.css b/simple-card-ui/css/style.css new file mode 100644 index 00000000..bab009f9 --- /dev/null +++ b/simple-card-ui/css/style.css @@ -0,0 +1,189 @@ +@import "https://fonts.googleapis.com/css?family=Roboto"; +*, +*:before, +*:after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body { + height: 100%; + width: 100%; + font-size: 16px; + font-family: "Roboto", sans-serif; +} + +a { + color: inherit; + text-decoration: none; +} + +.card { + background: #2d2d2d; + position: relative; + height: 300px; + width: 600px; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5); + box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5); +} + +.card-header { + background: transparent; + padding: 0 20px; + width: 100%; + height: 80px; + line-height: 80px; +} +.card-header h3 { + color: #fff; + font-size: 1.4rem; + text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.65); +} + +.card-content { + position: relative; + height: 160px; + width: 100%; +} + +.projects { + background: transparent; + width: 100%; + height: 100%; +} + +.project { + position: relative; + display: block; + float: left; + height: 112px; + width: 30%; + margin-left: 1.6666%; + margin-right: 1.6666%; + overflow: hidden; +} +.project img { + width: 100%; +} +.project:hover .project-details { + top: 85%; + opacity: 1; +} +.project .project-details { + background: rgba(0, 0, 0, 0.8); + padding: 10px; + opacity: 0; + position: absolute; + width: 100%; + top: 100%; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + transform: translateY(-50%); + -webkit-transition: top .5s ease, opacity .3s ease; + -moz-transition: top .5s ease, opacity .3s ease; + transition: top .5s ease, opacity .3s ease; +} +.project .project-details p { + color: #fff; +} + +.card-footer { + color: #fff; + background: rgba(0, 0, 0, 0.65); + position: absolute; + height: 60px; + width: 100%; + bottom: 0; + border-top: 2px solid rgba(0, 0, 0, 0.5); + -webkit-border-radius: 0 0 10px 10px; + -moz-border-radius: 0 0 10px 10px; + border-radius: 0 0 10px 10px; + overflow: hidden; +} + +.profile { + width: 60%; + float: left; +} +.profile .profile-group { + margin-left: 135px; +} +.profile .name { + font-size: 1.8rem; + text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); + text-transform: capitalize; +} +.profile .job { + color: #a5a5a5; + position: relative; + margin-top: -5px; + margin-left: 10px; + font-size: 1rem; +} + +.skills { + width: 40%; + float: right; + padding: 10px; +} +.skills .skills-group { + float: right; +} +.skills .skill { + width: 40px; + height: 40px; + float: left; + margin-right: 2px; +} +.skills .skill img { + width: 100%; +} + +.card-img { + background: #f9f9f9; + border: 2px solid #111; + position: absolute; + bottom: -25px; + left: 25px; + width: 100px; + height: 100px; + margin-right: 10px; + float: left; + -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.7); + -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.7); + -o-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.7); + box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.7); + overflow: hidden; +} +.card-img img { + width: 100%; +} + +.canvas-container { + position: absolute; + top: 0; + width: 600px; + height: 300px; + border-radius: 10px; + overflow: hidden; + z-index: -1; +} + +#circles { + position: absolute; + top: 0; + left: 0; + height: 300px; + width: 600px; + z-index: -1; +} diff --git a/simple-card-ui/index.html b/simple-card-ui/index.html new file mode 100644 index 00000000..6ef5c7e2 --- /dev/null +++ b/simple-card-ui/index.html @@ -0,0 +1,101 @@ + + + + + Simple Card UI + + + + + + + + + + + + + + +
        +
        +

        Last works

        +
        + +
        +
        + +
        + + +
        +

        Project 1

        +
        +         +
        + +
        + + +
        +

        Project 2

        +
        +         +
        + +
        + + +
        +

        Project 3

        +
        +         +
        + +
        +
        + +
        +
        +
        +
        +
        Name
        +
        Web developer
        +
        +
        +
        +
        +
        + +
        + +
        + +
        + +
        + +
        + +
        + +
        + +
        +
        +
        +
        +
        + card-img +
        +
        + +
        +
        + + + + + + + diff --git a/simple-card-ui/js/index.js b/simple-card-ui/js/index.js new file mode 100644 index 00000000..14cdcf19 --- /dev/null +++ b/simple-card-ui/js/index.js @@ -0,0 +1,69 @@ +//Create canvas and initialize context +var canvas = document.getElementById("circles"); +var ctx = canvas.getContext("2d"); + +//Set the dimensions of canvas equal to the dimensions of the card +var W = canvas.width = 600; +var H = canvas.height = 300; + +//Number of circles +var circleNbr = 10; + +// Gradient - http://www.planwallpaper.com/static/images/6942095-abstract-background-wallpaper.jpg; + var bgColor1 = 'rgba(153, 83, 85, 1)'; + var bgColor2 = 'rgba(52, 9, 80, 1)'; + +//Create an array of circles +var circles = []; +for(var i = 0; i < circleNbr; i++ ){ + circles.push(new circle()); +} + +//Function to create a circle +function circle() { + //Random Position + this.x = Math.random()*W; + this.y = Math.random()*H; + + //Random Velocities + this.vx = 0.2 + Math.random()*0.5; + this.vy = -this.vx; + + //Random Radius + this.r = 3 + Math.random()*10; + + //Random opacity color + this.color = "rgba(200, 116, 82,"+(Math.random()*(1 - .5) + .5).toFixed(1)+")"; +} + +//Function to draw the gradient background with the circles +function draw() { + + var grd = ctx.createLinearGradient(0, 0, W, H); + grd.addColorStop(0, bgColor1); + grd.addColorStop(1, bgColor2); + + //Fill the canvas with the gradient + ctx.fillStyle = grd; + ctx.fillRect(0, 0, W, H); + + //Fill the canvas with the circles + for(var j = 0; j < circles.length; j++) { + var c = circles[j]; + + //Draw the circle + ctx.beginPath(); + ctx.arc(c.x, c.y, c.r, Math.PI*2, false); + ctx.fillStyle = c.color; + ctx.fill(); + + //Velocity + c.x -= c.vx; + c.y += c.vy; + + //When the circles are out of the canvas + if(c.x < -20) c.x = W+20; + if(c.y < -20) c.y = H+20; + } +} +setInterval(draw, 30); \ No newline at end of file diff --git a/simple-card-ui/license.md b/simple-card-ui/license.md new file mode 100644 index 00000000..f48c5c58 --- /dev/null +++ b/simple-card-ui/license.md @@ -0,0 +1,10 @@ + + diff --git a/simple-card-ui/scss/style.scss b/simple-card-ui/scss/style.scss new file mode 100644 index 00000000..c4ffceb3 --- /dev/null +++ b/simple-card-ui/scss/style.scss @@ -0,0 +1,204 @@ +@import 'https://fonts.googleapis.com/css?family=Roboto'; + +$font-family: 'Roboto', sans-serif; + +*, +*:before, +*:after{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body{ + height: 100%; + width: 100%; + font-size: 16px; + font-family: $font-family; +} + +a{ + color: inherit; + text-decoration: none; +} + +.card{ + background: #2d2d2d; + position: relative; + height: 300px; + width: 600px; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .5); + -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .5); + box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .5); +} + +.card-header{ + background: transparent; + padding: 0 20px; + width: 100%; + height: 80px; + line-height: 80px; + + h3{ + color: #fff; + font-size: 1.4rem; + text-shadow: 1px 1px 0px rgba(0, 0, 0, .65); + } +} + +.card-content{ + position: relative; + height: 160px; + width: 100%; +} + +.projects{ + background: transparent; + width: 100%; + height: 100%; +} + +.project{ + position: relative; + display: block; + float: left; + height: 112px; + width: 30%; + margin-left: 1.6666%; + margin-right: 1.6666%; + overflow: hidden; + + img{ + width: 100%; + } + + &:hover .project-details{ + top: 85%; + opacity: 1; + } + + .project-details{ + background: rgba(0,0,0,.8); + padding: 10px; + opacity: 0; + position: absolute; + width: 100%; + top: 100%; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + transform: translateY(-50%); + -webkit-transition: top .5s ease, opacity .3s ease; + -moz-transition: top .5s ease, opacity .3s ease; + transition: top .5s ease, opacity .3s ease; + + & p{ + color: #fff; + } + } +} + +.card-footer{ + color: #fff; + background: rgba(0,0,0,.65); + position: absolute; + height: 60px; + width: 100%; + bottom: 0; + border-top: 2px solid rgba(0,0,0,.5); + -webkit-border-radius: 0 0 10px 10px; + -moz-border-radius: 0 0 10px 10px; + border-radius: 0 0 10px 10px; + overflow: hidden; +} + +.profile{ + width: 60%; + float: left; + + .profile-group{ + margin-left: 135px; + } + + .name{ + font-size: 1.8rem; + text-shadow: 1px 1px 0px rgba(0,0,0,.5); + text-transform: capitalize; + } + + .job{ + color: #a5a5a5; + position: relative; + margin-top: -5px; + margin-left: 10px; + font-size: 1rem; + } +} + +.skills{ + width: 40%; + float: right; + padding: 10px; + + .skills-group{ + float: right; + } + + .skill{ + width: 40px; + height: 40px; + float: left; + margin-right: 2px; + + img{ + width: 100%; + } + } +} + +.card-img{ + background: #f9f9f9; + border: 2px solid #111; + position: absolute; + bottom: -25px; + left: 25px; + width: 100px; + height: 100px; + margin-right: 10px; + float: left; + -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, .7); + -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, .7); + -o-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, .7); + box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, .7); + overflow: hidden; + + img{ + width: 100%; + } +} + +.canvas-container{ + position: absolute; + top: 0; + width: 600px; + height: 300px; + border-radius: 10px; + overflow: hidden; + z-index: -1; +} + +#circles{ + position:absolute; + top: 0; + left: 0; + height: 300px; + width: 600px; + z-index: -1; +} \ No newline at end of file diff --git a/svg-alarm-ui/README.md b/svg-alarm-ui/README.md new file mode 100644 index 00000000..e579f2e1 --- /dev/null +++ b/svg-alarm-ui/README.md @@ -0,0 +1,5 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/chrisgannon/pen/rrpLkK. + + This is an exploration of an alarm UI that displays both analogue and digital clocks. + +This is designed to be mobile first - it's also a rough prototype so I haven't cleaned any of the code and, to be honest, I'm a bit stuck with the direction of it so any suggestions are welcome! \ No newline at end of file diff --git a/svg-alarm-ui/css/style.css b/svg-alarm-ui/css/style.css new file mode 100644 index 00000000..409b7a6d --- /dev/null +++ b/svg-alarm-ui/css/style.css @@ -0,0 +1,66 @@ +body { + background-color: #212121; + overflow: hidden; + text-align: center; +} + +body, +html { + height: 100%; + width: 100%; + margin: 0; + padding: 0; +} + +svg { + position: absolute; + width: 100%; + height: 100%; + visibility: hidden; + transform: translate(-50%, 0%); +} + +.timeLabel, +.meridianLabel, +.bellBtnLabel, +.digitalTimeLabel { + font-family: 'din-condensed-web', sans-serif; + text-anchor: middle; + fill: #7e7e7e; + font-size: 40px; +} + +.nextDayBtn, +.prevDayBtn { + cursor: pointer; + font-size: 21px; +} + +.bellBtn text, +.nextDayBtn text, +.prevDayBtn text { + font-size: 21px; + fill: #D6DADD; +} + +.meridianLabel { + font-size: 72px; + fill: #D6DADD; +} + +.timeLabelGroup { + cursor: pointer; +} + +.timeLabelBtn .timeLabelGroup { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.bellBtn { + cursor: pointer; +} + +text { + user-select: none; + -webkit-user-select: none; +} \ No newline at end of file diff --git a/svg-alarm-ui/index.html b/svg-alarm-ui/index.html new file mode 100644 index 00000000..995c2517 --- /dev/null +++ b/svg-alarm-ui/index.html @@ -0,0 +1,76 @@ + + + + + SVG Alarm UI + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -- + + + + + + + + SET ALARM + + + + + + + + + + + + diff --git a/svg-alarm-ui/js/index.js b/svg-alarm-ui/js/index.js new file mode 100644 index 00000000..e3a79bbf --- /dev/null +++ b/svg-alarm-ui/js/index.js @@ -0,0 +1,392 @@ +var xmlns = "http://www.w3.org/2000/svg", + xlinkns = "http://www.w3.org/1999/xlink", + select = function(s) { + return document.querySelector(s); + }, + selectAll = function(s) { + return document.querySelectorAll(s); + }, + bellBtnHitCirc = select('.bellBtnHitCirc'), + alarmSVG = select('.alarmSVG'), + bellBtnLabel = select('.bellBtnLabel'), + alarmBell = select('.alarmBell'), + bellBtn = select('.bellBtn'), + clockGroup = select('.clockGroup'), + dottedLine = select('.dottedLine'), + meridianLabel = select('.meridianLabel'), + hourHand = select('.hourHand'), + minuteHand = select('.minuteHand'), + timeLabel = select('.timeLabel'), + timeLabelGroup = select('.timeLabelGroup'), + timeScaleGroup = select('.timeScaleGroup'), + timeScaleMarkerGroup = select('.timeScaleMarkerGroup'), + maxMinutes = 1440, + maxHours = 24, + timeScaleInterval = 60, + minutesInHour = 60, + centerX = 160, + minuteHandMaxRotation = 360 * maxHours, + timeStep = 5, + hourRotationStep = 360 / 12, + timeScaleMarkerColor = '#7e7e7e', + multiplier = 2, + timeScaleMarkers = 5, + maxDrag = maxMinutes * multiplier, + alarmBellOffsetX = 151, + alarmSetPosX, + alarmIsSet = false, + initTime = 7.5, + selectedColor = '#3498DB', + pt + +TweenMax.set('svg', { + visibility: 'visible' +}) +TweenMax.set([hourHand, minuteHand], { + transformOrigin: '50% 100%' +}) + +TweenMax.set('.timeScaleHit', { + width: maxDrag +}) +TweenMax.set(clockGroup, { + y: -20 +}) + +/* TweenMax.set(bellBtn, { + svgOrigin:'160 350', + scale:3 +}) */ + +TweenMax.set(alarmBell, { + attr: { + x: alarmBellOffsetX + } +}) + +function makeTimeScale() { + + var marker, labelGroup + + for (var i = 0; i <= maxMinutes; i++) { + //console.log(i % 5) + marker = document.createElementNS(xmlns, 'line'); + timeScaleMarkerGroup.appendChild(marker); + + var posX = centerX + (i * multiplier); + + if (i % timeScaleInterval == 0) { + + labelGroup = timeLabelGroup.cloneNode(true); + timeScaleMarkerGroup.appendChild(labelGroup); + labelGroup.querySelector('.timeLabelBtn').setAttribute('data-btnId', i / minutesInHour); + TweenMax.set(marker, { + attr: { + x1: posX, + x2: posX, + y1: 460, + y2: 440 + }, + stroke: timeScaleMarkerColor, + strokeWidth: 1 + }) + + TweenMax.set(labelGroup, { + x: posX, + y: 435 + }) + + labelGroup.querySelector('.timeLabel').textContent = String(i / minutesInHour); + + //every 30 minutes + } else if (i % (minutesInHour / 2) == 0) { + + TweenMax.set(marker, { + attr: { + x1: posX, + x2: posX, + y1: 460, + y2: 445 + }, + stroke: timeScaleMarkerColor, + strokeWidth: 1 + }) + //every timeScaleMarkers minutes (5) + } else if (i % timeScaleMarkers == 0) { + + TweenMax.set(marker, { + attr: { + x1: posX, + x2: posX, + y1: 460, + y2: 450 + }, + stroke: timeScaleMarkerColor, + strokeWidth: 1 + }) + } else { + + timeScaleMarkerGroup.removeChild(marker); + } + + } +} + + +var timeDraggable = Draggable.create(timeScaleGroup, { + type: 'x', + bounds: { + maxX: 0, + minX: (-maxDrag) + }, + onDrag: dragUpdate, + onThrowUpdate: dragUpdate, + snap: function(endValue) { + return Math.round(endValue / timeStep) * timeStep; + }, + throwProps: true, + dragClickables: true, + maxDuration: 0.8, + overshootTolerance: 0 +}) + +function dragUpdate() { + + /* if(alarmIsSet){ + return; + } */ + var dragPosX = Math.round(timeScaleGroup._gsTransform.x / multiplier), + minuteHandPercent = Math.abs(dragPosX / maxMinutes), + minuteHandRotation = minuteHandPercent * minuteHandMaxRotation, + hourHandPercent = Math.abs((dragPosX / maxMinutes) * maxHours), + hourHandRotation = hourHandPercent * hourRotationStep, + digitalMinutes, digitalTime, + digitalHours; + + //console.log(hourHandPercent) + + TweenMax.to(minuteHand, 0.5, { + rotation: minuteHandRotation, + ease: Elastic.easeOut.config(0.3, 0.8) + }) + /*TweenMax.to(clockDragger,0.1, { + rotation:-minuteHandRotation + })*/ + TweenMax.to(hourHand, 0.5, { + rotation: hourHandRotation, + ease: Elastic.easeOut.config(0.3, 0.8) + }) + + //console.log((minuteHandRotation % 360)/6 ) + digitalMinutes = Math.round((minuteHandRotation % 360) / 6); + //digitalMinutes = digitalMinutes % timeStep; + //console.log(digitalMinutes); + digitalMinutes = (digitalMinutes == 60) ? '00' : digitalMinutes; + digitalMinutes = (digitalMinutes >= 0 && digitalMinutes < 10) ? '0' + digitalMinutes : digitalMinutes; + + digitalHours = digitalHours = Math.floor(hourHandPercent); + digitalHours = (digitalHours >= 0 && digitalHours < 10) ? '0' + digitalHours : digitalHours; + digitalHours = (digitalHours > 23) ? '00' : digitalHours; + + digitalTime = digitalHours + ':' + digitalMinutes; + //console.log(digitalMinutes) + // meridianLabel.textContent = (hourHandPercent >=(maxHours/2) && hourHandPercent < maxHours) ? digitalTime+ ' PM' :digitalTime+ ' AM'; + + //dotted line raise + var diff = Math.abs(hourHandPercent - Math.round(hourHandPercent)); + // + TweenMax.to(dottedLine, 0.1, { + attr: { + y2: (diff > 0.2) ? 445 : 400 + } + }) + + + meridianLabel.textContent = (hourHandPercent >= (maxHours / 2) && hourHandPercent < maxHours) ? digitalTime : digitalTime; + + +} + + + +function getLiveSnap(step) { + timeDraggable[0].vars.snap = null; + timeStep = step * multiplier; + //timeDraggable[0].vars.throwProps = false; + timeDraggable[0].vars.liveSnap = function(endValue) { + return Math.round(endValue / timeStep) * timeStep; + } + + timeDraggable[0].update(true); +} + +function getSnap(step) { + timeDraggable[0].vars.liveSnap = null; + timeStep = step * multiplier; + + timeDraggable[0].vars.snap = function(endValue) { + return Math.round(endValue / timeStep) * timeStep; + } + + timeDraggable[0].update(true); +} + +/* function clickNextDay(e){ + TweenMax.to(timeScaleGroup, 0.1, { + x:0, + onComplete:dragUpdate + }) +} */ + +function init() { + + //send it to 06:30 to start with + TweenMax.to(timeScaleGroup, 1, { + x: -initTime * (timeScaleInterval * multiplier), + onUpdate: dragUpdate, + ease: Power3.easeOut + }) + getSnap(timeStep); + +} + + + +function docClick(e) { + + var klass = e.target.getAttribute('class'); + //console.log(e.target.getAttribute('class')) + if (klass) { + if (klass == "timeLabelBtn") { + var btnId = Number(e.target.getAttribute('data-btnId')); + //console.log(btnId); + + TweenMax.to(timeScaleGroup, 0.41, { + x: -btnId * (timeScaleInterval * multiplier), + onUpdate: dragUpdate, + ease: Power3.easeOut + }) + + +/* pt = alarmSVG.createSVGPoint(); + var loc = cursorPoint(e); + //console.log(loc.x) + var circ = document.createElementNS(xmlns, 'circle'); + circ.setAttribute('cx', loc.x); + circ.setAttribute('cy', loc.y); + circ.setAttribute('r', 6); + circ.setAttribute('fill', '#7e7e7e'); + alarmSVG.appendChild(circ); + TweenMax.to(circ, 0.6, { + attr: { + r: 40 + }, + alpha: 0, + onComplete: function() { + alarmSVG.removeChild(this.target) + } + }) */ + } + } +} +document.onclick = docClick; + +function clickBellBtn(e) { + pt = alarmSVG.createSVGPoint(); + var loc = cursorPoint(e); + //console.log(loc.x) + var circ = document.createElementNS(xmlns, 'circle'); + circ.setAttribute('cx', loc.x); + circ.setAttribute('cy', loc.y); + circ.setAttribute('r', 6); + circ.setAttribute('fill', '#7e7e7e'); + bellBtnHitCirc.appendChild(circ); + TweenMax.to(circ, 0.6, { + attr: { + r: 40 + }, + alpha: 0, + onComplete: function() { + bellBtnHitCirc.removeChild(this.target) + } + }) + + alarmIsSet = !alarmIsSet; + + //unset it all + if (!alarmIsSet) { + TweenMax.set(['.meridianLabel'], { + fill: '#D6DADD' + }) + TweenMax.to('.bellBtnRect', 1, { + width: 105, + attr: { + x: 108 + }, + ease: Elastic.easeOut.config(0.6, 0.255), + onStart: function() { + bellBtnLabel.textContent = 'SET ALARM'; + } + }) + TweenMax.set(alarmBell, { + x: -2000 + }) + timeDraggable[0].enable(); + document.onclick = docClick; + dragUpdate(); + TweenMax.to([clockGroup,'.timeScaleMarkerGroup'],0.6, { + alpha: 1 + }) + TweenMax.set('.timeLabelGroup', { + cursor: 'pointer' + }) + + } else { + timeDraggable[0].disable(); + document.onclick = null; + TweenMax.set(['.meridianLabel'], { + fill: selectedColor + }) + TweenMax.set('.timeScaleMarkerGroup', { + alpha: 0.2 + }) + + TweenMax.set('.timeLabelGroup', { + cursor: 'auto' + }) + alarmSetPosX = timeScaleGroup._gsTransform.x; + var tl = new TimelineMax(); + tl.set(alarmBell, { + x: -alarmSetPosX, + alpha: 1 + }) + .from(alarmBell, 0.9, { + scale: 0, + transformOrigin: '50% 0%', + ease: Elastic.easeOut.config(0.86, 0.55), + onComplete: dragUpdate + }) + .to('.bellBtnRect', 1, { + width: 130, + attr: { + x: 95.5 + }, + ease: Elastic.easeOut.config(0.6, 0.255), + onStart: function() { + bellBtnLabel.textContent = 'UNSET ALARM'; + } + }) + + } + +} + +function cursorPoint(evt) { + pt.x = evt.clientX; + pt.y = evt.clientY; + return pt.matrixTransform(alarmSVG.getScreenCTM().inverse()); +} + +bellBtn.onclick = clickBellBtn; +makeTimeScale(); +init(); \ No newline at end of file diff --git a/svg-alarm-ui/license.md b/svg-alarm-ui/license.md new file mode 100644 index 00000000..23eccb22 --- /dev/null +++ b/svg-alarm-ui/license.md @@ -0,0 +1,10 @@ + + diff --git a/svg-image-clipping-with-drop-shadow/README.md b/svg-image-clipping-with-drop-shadow/README.md new file mode 100644 index 00000000..586c8a7d --- /dev/null +++ b/svg-image-clipping-with-drop-shadow/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/schliflo/pen/qadbpQ. + + \ No newline at end of file diff --git a/svg-image-clipping-with-drop-shadow/config.rb b/svg-image-clipping-with-drop-shadow/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/svg-image-clipping-with-drop-shadow/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/svg-image-clipping-with-drop-shadow/css/reset.css b/svg-image-clipping-with-drop-shadow/css/reset.css new file mode 100644 index 00000000..3b2627d6 --- /dev/null +++ b/svg-image-clipping-with-drop-shadow/css/reset.css @@ -0,0 +1 @@ +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} diff --git a/svg-image-clipping-with-drop-shadow/css/style.css b/svg-image-clipping-with-drop-shadow/css/style.css new file mode 100644 index 00000000..da06bc87 --- /dev/null +++ b/svg-image-clipping-with-drop-shadow/css/style.css @@ -0,0 +1,32 @@ +.clip-triangles { + width: 90vw; + height: 0; + padding-bottom: 56.1%; + margin: 5vw; + -webkit-filter: drop-shadow(0 0 1vw rgba(0, 0, 0, 0.33)); + filter: drop-shadow(0 0 1vw rgba(0, 0, 0, 0.33)); + position: relative; +} +.clip-triangles-image { + position: absolute; + width: 100%; + height: 0; + padding-bottom: 100%; + -webkit-clip-path: url(#triangles01_clip); + clip-path: url(#triangles01_clip); + background-image: url(https://images.unsplash.com/photo-1467321638755-7246fd0dc1f3?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=1920&h=1080&q=60&cs=tinysrgb); + background-size: cover; + background-position: top center; +} + +body { + background: #424242; + font-family: monospace; + color: #dedede; +} + +h1 { + text-align: center; + font-size: 4.2vw; + margin: 5vw; +} diff --git a/svg-image-clipping-with-drop-shadow/index.html b/svg-image-clipping-with-drop-shadow/index.html new file mode 100644 index 00000000..d9a3df4a --- /dev/null +++ b/svg-image-clipping-with-drop-shadow/index.html @@ -0,0 +1,46 @@ + + + + + svg image clipping with drop shadow + + + + + + + + + + + + + + + +

        SVG clipped image with dropshadow

        + +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + diff --git a/svg-image-clipping-with-drop-shadow/license.md b/svg-image-clipping-with-drop-shadow/license.md new file mode 100644 index 00000000..8d44323e --- /dev/null +++ b/svg-image-clipping-with-drop-shadow/license.md @@ -0,0 +1,10 @@ + + diff --git a/svg-image-clipping-with-drop-shadow/scss/style.scss b/svg-image-clipping-with-drop-shadow/scss/style.scss new file mode 100644 index 00000000..d63cd949 --- /dev/null +++ b/svg-image-clipping-with-drop-shadow/scss/style.scss @@ -0,0 +1,31 @@ +.clip-triangles { + width: 90vw; + height: 0; + padding-bottom: 56.1%; + margin: 5vw; + filter: drop-shadow(0 0 1vw rgba(0, 0, 0, 0.33)); + position: relative; + + &-image { + position: absolute; + width: 100%; + height: 0; + padding-bottom: 100%; + clip-path: url(#triangles01_clip); + background-image: url(https://images.unsplash.com/photo-1467321638755-7246fd0dc1f3?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=1920&h=1080&q=60&cs=tinysrgb); + background-size: cover; + background-position: top center; + } +} + +body { + background: #424242; + font-family: monospace; + color: #dedede; +} + +h1 { + text-align: center; + font-size: 4.2vw; + margin: 5vw; +} \ No newline at end of file diff --git a/svg-interactive-roadtrip-map-prototype/README.md b/svg-interactive-roadtrip-map-prototype/README.md new file mode 100644 index 00000000..76af6de9 --- /dev/null +++ b/svg-interactive-roadtrip-map-prototype/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/dudleystorey/pen/zKBVPm. + + Uses the Web Animation API, JavaScript, CSS / SMIL animation and SVG to create an interactive roadtrip map. Photographs by [Reinis Traidas](https://www.flickr.com/photos/reinis/3208158827/), [Kathrin & Stefan Marks](https://www.flickr.com/photos/ks_marks/4513100525), and [Jocelyn Kinghorn](https://www.flickr.com/photos/joceykinghorn/11157483815) \ No newline at end of file diff --git a/svg-interactive-roadtrip-map-prototype/config.rb b/svg-interactive-roadtrip-map-prototype/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/svg-interactive-roadtrip-map-prototype/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/svg-interactive-roadtrip-map-prototype/css/style.css b/svg-interactive-roadtrip-map-prototype/css/style.css new file mode 100644 index 00000000..ae0757b9 --- /dev/null +++ b/svg-interactive-roadtrip-map-prototype/css/style.css @@ -0,0 +1,164 @@ +@font-face { + src: url(http://thenewcode.com/assets/fonts/libertad.woff); + font-family: Libertad; +} +* { + box-sizing: border-box; +} + +body { + margin: 0; + background: #006994; + min-height: 100vh; + font-family: Libertad, sans-serif; +} + +svg { + margin-left: 2rem; + width: 33%; + height: auto; + display: inline-block; +} + +#description { + display: inline-block; + background: rgba(0, 0, 0, 0.6); + color: #fff; + width: 50%; + margin: 1rem 3rem 0; + vertical-align: top; + -webkit-transition: 0.8s cubic-bezier(0.14, 0.39, 0.41, 1.29); + transition: 0.8s cubic-bezier(0.14, 0.39, 0.41, 1.29); +} + +#description * { + opacity: 0; +} + +#description p { + margin-bottom: 2rem; +} + +#description.active * { + -webkit-animation: fadein 3s forwards; + animation: fadein 3s forwards; +} + +#description.active img { + -webkit-animation-delay: .4s; + animation-delay: .4s; +} + +#description.active h1 { + -webkit-animation-delay: 1s; + animation-delay: 1s; +} + +#description.active p { + -webkit-animation-delay: 2s; + animation-delay: 2s; +} + +@-webkit-keyframes fadein { + to { + opacity: 1; + } +} + +@keyframes fadein { + to { + opacity: 1; + } +} +#description h1, +#description p { + margin-left: 2rem; + margin-right: 2rem; +} + +#description img { + width: 100%; +} + +@-webkit-keyframes lookit { + to { + stroke-width: 20px; + stroke: rgba(255, 255, 255, 0.2); + } +} + +@keyframes lookit { + to { + stroke-width: 20px; + stroke: rgba(255, 255, 255, 0.2); + } +} +text { + font-family: Libertad, sans-serif; + font-size: 48px; + font-weight: 400; + fill: #fff; +} + +circle { + fill: #000; +} + +circle.outline { + fill: none; + stroke-width: 5px; + stroke: #fff; + -webkit-transition: .4s; + transition: .4s; + -webkit-animation: lookit 1.8s infinite alternate cubic-bezier(0.85, 0, 0.32, 0.83); + animation: lookit 1.8s infinite alternate cubic-bezier(0.85, 0, 0.32, 0.83); +} + +a:hover circle:not(.outline), +a:focus circle { + fill: #f00; +} + +.travel { + fill: none; + stroke: #f00; + stroke-width: 12px; + -webkit-transition: .4s opacity; + transition: .4s opacity; +} + +#ni { + stroke-dasharray: 240; + stroke-dashoffset: 240; +} + +#si { + stroke-dasharray: 1250; + stroke-dashoffset: 1250; +} + +.hide { + opacity: 0; +} + +@media all and (max-width: 790px) { + #nzmap { + display: none; + } + + #description { + width: 100%; + margin: 0; + } + + #description * { + opacity: 1; + } + + #description > div { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + } +} diff --git a/svg-interactive-roadtrip-map-prototype/index.html b/svg-interactive-roadtrip-map-prototype/index.html new file mode 100644 index 00000000..77842205 --- /dev/null +++ b/svg-interactive-roadtrip-map-prototype/index.html @@ -0,0 +1,61 @@ + + + + + SVG Interactive Roadtrip Map Prototype + + + + + + + + + + + + + + + + + + + + + + diff --git a/svg-interactive-roadtrip-map-prototype/js/index.js b/svg-interactive-roadtrip-map-prototype/js/index.js new file mode 100644 index 00000000..041aa283 --- /dev/null +++ b/svg-interactive-roadtrip-map-prototype/js/index.js @@ -0,0 +1,74 @@ + var nzmap = document.getElementById("nzmap"), + prevLoc, pathDist, locName, + si = document.getElementById("si"), + ni = document.getElementById("ni"), + locale = document.getElementById("locale"), + map = document.getElementById("map"), + description = document.getElementById("description"); + + function pathTravel(travelPath, pathDist) { + travelPath.animate([ + { strokeDashoffset: pathDist }, + { strokeDashoffset: '0' } + ], { + duration: pathDist * 5, + fill: 'forwards' + }); + } + + function fillDesc(locName, desc) { + var imageURL = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/", + fileName = locName.split("."), + longDesc = ''; + longDesc += "

        "+locName+"

        "; + longDesc += "

        "+desc+"

        "; + return longDesc; + } + + nzmap.addEventListener("click", function(e) { + var loc = e.target.parentNode; + e.preventDefault(); + var desc = loc.querySelector("desc").textContent; + if (loc.nodeName == "a") { + var locName = loc.querySelector("text").textContent; + if (locName == "Rotorua") { + si.classList.add("hide"); + ni.classList.add("hide"); + } + if (locName == "Taranaki") { + if (prevLoc == "Fiordland") { + si.classList.add("hide"); + } + if (prevLoc !== "Taranaki") { + ni.classList.remove("hide"); + travelPath = ni; + pathDist = travelPath.pathLength.baseVal; + pathTravel(travelPath, pathDist); + } + } + if (locName == "Fiordland" && prevLoc !== "Fiordland") { + travelPath = si; + travelPath.classList.remove("hide"); + pathDist = travelPath.pathLength.baseVal; + pathTravel(travelPath, pathDist); + } + description.classList.remove("active"); + description.innerHTML = ""; + prevLoc = locName; + description.insertAdjacentHTML("afterbegin", fillDesc(locName, desc)); + description.classList.add("active"); + } +}); + +function showHide() { + var locs = nzmap.getElementsByTagName("text"), + descs = nzmap.getElementsByTagName("desc"); + for (var i = 0; i < locs.length; i++) { + description.insertAdjacentHTML("afterbegin", "
        "+fillDesc(locs[i].textContent, descs[i].textContent)+"
        "); + } +} + +var screencheck = window.matchMedia("(max-width: 790px)"); +window.addEventListener("load", function() { + if (screencheck.matches) { showHide(); } +}); \ No newline at end of file diff --git a/svg-interactive-roadtrip-map-prototype/license.md b/svg-interactive-roadtrip-map-prototype/license.md new file mode 100644 index 00000000..2d6d78d3 --- /dev/null +++ b/svg-interactive-roadtrip-map-prototype/license.md @@ -0,0 +1,10 @@ + + diff --git a/svg-interactive-roadtrip-map-prototype/scss/style.scss b/svg-interactive-roadtrip-map-prototype/scss/style.scss new file mode 100644 index 00000000..ed911da6 --- /dev/null +++ b/svg-interactive-roadtrip-map-prototype/scss/style.scss @@ -0,0 +1,140 @@ +@font-face { + src: url(http://thenewcode.com/assets/fonts/libertad.woff); + font-family: Libertad; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + background: #006994; + min-height: 100vh; + font-family: Libertad, sans-serif; +} + +svg { + margin-left: 2rem; + width: 33%; + height: auto; + display: inline-block; +} + +#description { + display: inline-block; + background: rgba(0, 0, 0, 0.6); + color: #fff; + width: 50%; + margin: 1rem 3rem 0; + vertical-align: top; + transition: .8s cubic-bezier(.14, .39, .41, 1.29); +} + +#description * { + opacity: 0; +} + +#description p { + margin-bottom: 2rem; +} + +#description.active * { + animation: fadein 3s forwards; +} + +#description.active img { + animation-delay: .4s; +} + +#description.active h1 { + animation-delay: 1s; +} + +#description.active p { + animation-delay: 2s; +} + +@keyframes fadein { + to { + opacity: 1; + } +} + +#description h1, +#description p { + margin-left: 2rem; + margin-right: 2rem; +} + +#description img { + width: 100%; +} + +@keyframes lookit { + to { + stroke-width: 20px; + stroke: rgba(255, 255, 255, 0.2); + } +} + +text { + font-family: Libertad, sans-serif; + font-size: 48px; + font-weight: 400; + fill: #fff; +} + +circle { + fill: #000; +} + +circle.outline { + fill: none; + stroke-width: 5px; + stroke: #fff; + transition: .4s; + animation: lookit 1.8s infinite alternate cubic-bezier(.85, 0, .32, .83); +} + +a:hover circle:not(.outline), +a:focus circle { + fill: #f00; +} + +.travel { + fill: none; + stroke: #f00; + stroke-width: 12px; + transition: .4s opacity; +} + +#ni { + stroke-dasharray: 240; + stroke-dashoffset: 240; +} + +#si { + stroke-dasharray: 1250; + stroke-dashoffset: 1250; +} + +.hide { + opacity: 0; +} + +@media all and (max-width: 790px) { + #nzmap { + display: none; + } + #description { + width: 100%; + margin: 0; + } + #description * { + opacity: 1; + } + #description > div { + flex: 1; + } +} \ No newline at end of file diff --git a/timeline-ui/README.md b/timeline-ui/README.md new file mode 100644 index 00000000..51c03ed7 --- /dev/null +++ b/timeline-ui/README.md @@ -0,0 +1,4 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/abisz/pen/qaEOEm. + + CSS implementation of dribble sketch for training purposes +original design: https://dribbble.com/shots/1980532-Timeline-Profile/ \ No newline at end of file diff --git a/timeline-ui/config.rb b/timeline-ui/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/timeline-ui/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/timeline-ui/css/normalize.css b/timeline-ui/css/normalize.css new file mode 100644 index 00000000..8393ac44 --- /dev/null +++ b/timeline-ui/css/normalize.css @@ -0,0 +1 @@ +/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input,select{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[disabled]{cursor:default}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none} diff --git a/timeline-ui/css/style.css b/timeline-ui/css/style.css new file mode 100644 index 00000000..cd3b0eaf --- /dev/null +++ b/timeline-ui/css/style.css @@ -0,0 +1,179 @@ +.container { + max-width: 350px; + max-height: 630px; + overflow: hidden; + margin: 30px auto 0; + box-shadow: 0 0 40px #a0a0a0; + font-family: 'Open Sans', sans-serif; +} + +.navbar { + background: #B97CFC; + color: #fff; + padding: 1em 0.5em; +} +.navbar a { + color: #fff; + text-decoration: none; + font-size: 1.3em; + float: left; +} +.navbar span { + font-size: 1.1em; + font-weight: 300; + display: block; + text-align: center; +} + +.profile-pic { + width: 30px; + height: 30px; + display: inline-block; + float: right; + position: relative; +} +.profile-pic img { + width: 100%; + border-radius: 50%; +} + +.notification { + position: absolute; + width: 5px; + height: 5px; + border-radius: 50%; + top: 2px; + right: 2px; + background: #F93B69; +} + +.header { + background: url(https://unsplash.it/1080/720?image=1044); + background-size: cover; + color: #fff; + position: relative; +} + +.color-overlay { + padding: 3em 2em; + box-sizing: border-box; + background: rgba(123, 94, 155, 0.5); +} + +.actionbutton { + position: absolute; + background: #F93B69; + width: 50px; + height: 50px; + font-size: 3em; + font-weight: 300; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + bottom: -25px; + right: 20px; + box-shadow: 0 0 8px #202020; +} + +.day-number { + font-size: 4em; + display: inline-block; + margin-right: 15px; +} + +.date-right { + display: inline-block; +} + +.day-name { + font-size: 1.6em; +} + +.month { + text-transform: uppercase; + font-weight: 300; + font-size: 0.6em; + letter-spacing: 2px; + margin-top: 2px; +} + +.timeline ul { + padding: 1em 0 0 2em; + margin: 0; + list-style: none; + position: relative; +} +.timeline ul::before { + content: ' '; + height: 100%; + width: 1px; + background-color: #d9d9d9; + position: absolute; + top: 0; + left: 2.5em; + z-index: -1; +} +.timeline li div { + display: inline-block; + margin: 1em 0; + vertical-align: top; +} +.timeline .bullet { + width: 1em; + height: 1em; + box-sizing: border-box; + border-radius: 50%; + background: #fff; + z-index: 1; + margin-right: 1em; +} +.timeline .bullet.pink { + border: 2px solid #F93B69; +} +.timeline .bullet.green { + border: 2px solid #B0E8E2; +} +.timeline .bullet.orange { + border: 2px solid #EB8B6E; +} +.timeline .time { + width: 20%; + font-size: 0.75em; + padding-top: 0.25em; +} +.timeline .desc { + width: 50%; +} +.timeline h3 { + font-size: 0.9em; + font-weight: 400; + margin: 0; +} +.timeline h4 { + margin: 0; + font-size: 0.7em; + font-weight: 400; + color: #808080; +} +.timeline .people img { + width: 30px; + height: 30px; + border-radius: 50%; +} + +.credits, .video { + position: absolute; + bottom: 10px; + color: #808080; + font-size: 100%; + text-decoration: underline; +} + +.credits { + left: 10px; +} + +.video { + right: 10px; +} diff --git a/timeline-ui/index.html b/timeline-ui/index.html new file mode 100644 index 00000000..08d22b21 --- /dev/null +++ b/timeline-ui/index.html @@ -0,0 +1,96 @@ + + + + + Timeline UI + + + + + + + + + + + + + + + + + +
        +
        + + + +
        + +
        +
        + Timeline +
        + +
        +
        +
        8
        +
        +
        Monday
        +
        February 2015
        +
        +
        +
        +
        +
        + +
        +
          +
        • +
          +
          5pm
          +
          +

          New Icon

          +

          Mobile App

          +
          +
          • +
        • +
          +
          3 - 4pm
          +
          +

          Design Stand Up

          +

          Hangouts

          +
          + + + +
          +
          +
          • +
        • +
          +
          12pm
          +
          +

          Lunch Break

          +
          +
          • +
        • +
          +
          9 - 11am
          +
          +

          Finish Home Screen

          +

          Web App

          +
          +
          • +
        +
        +
        + +original concept + +watch process video + + + + + + diff --git a/timeline-ui/license.md b/timeline-ui/license.md new file mode 100644 index 00000000..bad66bae --- /dev/null +++ b/timeline-ui/license.md @@ -0,0 +1,10 @@ + + diff --git a/timeline-ui/scss/style.scss b/timeline-ui/scss/style.scss new file mode 100644 index 00000000..40eb155b --- /dev/null +++ b/timeline-ui/scss/style.scss @@ -0,0 +1,209 @@ +$black: #202020; +$white: #fff; +$dark-grey: #808080; +$light-grey: #d9d9d9; +$purple: #B97CFC; +$pink: #F93B69; +$green: #B0E8E2; +$orange: #EB8B6E; + +body { + //background: radial-gradient(circle, $white , lighten($dark-grey, 40)); +} + +.container { + max-width: 350px; + max-height: 630px; + overflow: hidden; + margin: 30px auto 0; + box-shadow: 0 0 40px lighten($black, 50); + font-family: 'Open Sans', sans-serif; +} + +.navbar { + background: $purple; + color: $white; + padding: 1em 0.5em; + + a { + color: $white; + text-decoration: none; + font-size: 1.3em; + float: left; + } + + span { + font-size: 1.1em; + font-weight: 300; + display: block; + text-align: center; + } +} + +.profile-pic { + width: 30px; + height: 30px; + display: inline-block; + float: right; + position: relative; + + img { + width: 100%; + border-radius: 50%; + } +} + +.notification { + position: absolute; + width: 5px; + height: 5px; + border-radius: 50%; + top: 2px; + right: 2px; + background: $pink; +} + +.header { + background: url(https://unsplash.it/1080/720?image=1044); + background-size: cover; + color: $white; + position: relative; +} + +.color-overlay { + padding: 3em 2em; + box-sizing: border-box; + background: rgba(123, 94, 155, 0.5) ; +} + +.actionbutton { + position: absolute; + background: $pink; + width: 50px; + height: 50px; + font-size: 3em; + font-weight: 300; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + bottom: -25px; + right: 20px; + box-shadow: 0 0 8px #202020; +} + +.day-number { + font-size: 4em; + display: inline-block; + margin-right: 15px; +} + +.date-right { + display: inline-block; +} + +.day-name { + font-size: 1.6em; +} + +.month { + text-transform: uppercase; + font-weight: 300; + font-size: 0.6em; + letter-spacing: 2px; + margin-top: 2px; +} + +.timeline { + + ul { + padding: 1em 0 0 2em; + margin: 0; + list-style: none; + position: relative; + + &::before { + content: ' '; + height: 100%; + width: 1px; + background-color: $light-grey; + position: absolute; + top: 0; + left: 2.5em; + z-index: -1; + } + } + + li div{ + display: inline-block; + margin: 1em 0; + vertical-align: top; + } + + .bullet { + width: 1em; + height: 1em; + box-sizing: border-box; + border-radius: 50%; + background: $white; + z-index: 1; + margin-right: 1em; + + &.pink { + border: 2px solid $pink; + } + + &.green { + border: 2px solid $green; + } + + &.orange { + border: 2px solid $orange; + } + } + + .time { + width: 20%; + font-size: 0.75em; + padding-top: 0.25em; + } + + .desc { + width: 50%; + } + + h3 { + font-size: 0.9em; + font-weight: 400; + margin: 0; + } + + h4 { + margin: 0; + font-size: 0.7em; + font-weight: 400; + color: $dark-grey; + } + + .people img{ + width: 30px; + height: 30px; + border-radius: 50%; + } +} + +.credits, .video{ + position: absolute; + bottom:10px; + color: $dark-grey; + font-size: 100%; + text-decoration: underline; +} + +.credits { + left: 10px; +} + +.video{ + right: 10px; +} \ No newline at end of file diff --git a/timeline/README.md b/timeline/README.md new file mode 100644 index 00000000..032ef215 --- /dev/null +++ b/timeline/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/OutOfNutella/pen/JKgzXk. + + \ No newline at end of file diff --git a/timeline/config.rb b/timeline/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/timeline/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/timeline/css/style.css b/timeline/css/style.css new file mode 100644 index 00000000..8cd53048 --- /dev/null +++ b/timeline/css/style.css @@ -0,0 +1,271 @@ +body { + margin: 0; + padding: 0; + background: #e6e6e6; + color: #323232; + font-family: 'Open Sans', sans-serif; + font-size: 112.5%; + line-height: 1.6em; +} + +/* ================ The Timeline ================ */ +.timeline { + position: relative; + width: 660px; + margin: 0 auto; + margin-top: 20px; + padding: 1em 0; + list-style-type: none; +} + +.timeline:before { + position: absolute; + left: 50%; + top: 0; + content: ' '; + display: block; + width: 6px; + height: 100%; + margin-left: -3px; + background: #505050; + background: -moz-linear-gradient(top, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(100%, #7db9e8)); + background: -webkit-linear-gradient(top, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%); + background: -o-linear-gradient(top, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%); + background: -ms-linear-gradient(top, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%); + background: linear-gradient(to bottom, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%); + z-index: 5; +} + +.timeline li { + padding: 1em 0; +} + +.timeline li:after { + content: ""; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +.timeline .direction-l { + position: relative; + width: 300px; + float: left; + text-align: right; +} + +.timeline .direction-r { + position: relative; + width: 300px; + float: right; +} + +.timeline .flag-wrapper { + position: relative; + display: inline-block; + text-align: center; +} + +.timeline .flag { + position: relative; + display: inline; + background: #f8f8f8; + padding: 6px 10px; + border-radius: 5px; + font-weight: 600; + text-align: left; +} + +.timeline .direction-l .flag { + -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15); + -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15); + box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15); +} + +.timeline .direction-r .flag { + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15); +} + +.timeline .direction-l .flag:before, +.timeline .direction-r .flag:before { + position: absolute; + top: 50%; + right: -40px; + content: ' '; + display: block; + width: 12px; + height: 12px; + margin-top: -10px; + background: #fff; + border-radius: 10px; + border: 4px solid #ff5050; + z-index: 10; +} + +.timeline .direction-r .flag:before { + left: -40px; +} + +.timeline .direction-l .flag:after { + content: ""; + position: absolute; + left: 100%; + top: 50%; + height: 0; + width: 0; + margin-top: -8px; + border: solid transparent; + border-left-color: #f8f8f8; + border-width: 8px; + pointer-events: none; +} + +.timeline .direction-r .flag:after { + content: ""; + position: absolute; + right: 100%; + top: 50%; + height: 0; + width: 0; + margin-top: -8px; + border: solid transparent; + border-right-color: #f8f8f8; + border-width: 8px; + pointer-events: none; +} + +.timeline .time-wrapper { + display: inline; + line-height: 1em; + font-size: 0.66666em; + color: #fa5050; + vertical-align: middle; +} + +.timeline .direction-l .time-wrapper { + float: left; +} + +.timeline .direction-r .time-wrapper { + float: right; +} + +.timeline .time { + display: inline-block; + padding: 4px 6px; + background: #f8f8f8; +} + +.timeline .desc { + margin: 1em 0.75em 0 0; + font-size: 0.77777em; + font-style: italic; + line-height: 1.5em; +} + +.timeline .direction-r .desc { + margin: 1em 0 0 0.75em; +} + +/* ================ Timeline Media Queries ================ */ +@media screen and (max-width: 660px) { + .timeline { + width: 100%; + padding: 4em 0 1em 0; + } + + .timeline li { + padding: 2em 0; + } + + .timeline .direction-l, + .timeline .direction-r { + float: none; + width: 100%; + text-align: center; + } + + .timeline .flag-wrapper { + text-align: center; + } + + .timeline .flag { + background: white; + z-index: 15; + } + + .timeline .direction-l .flag:before, + .timeline .direction-r .flag:before { + position: absolute; + top: -30px; + left: 50%; + content: ' '; + display: block; + width: 12px; + height: 12px; + margin-left: -9px; + background: #fff; + border-radius: 10px; + border: 4px solid #ff5050; + z-index: 10; + } + + .timeline .direction-l .flag:after, + .timeline .direction-r .flag:after { + content: ""; + position: absolute; + left: 50%; + top: -8px; + height: 0; + width: 0; + margin-left: -8px; + border: solid transparent; + border-bottom-color: white; + border-width: 8px; + pointer-events: none; + } + + .timeline .time-wrapper { + display: block; + position: relative; + margin: 4px 0 0 0; + z-index: 14; + } + + .timeline .direction-l .time-wrapper { + float: none; + } + + .timeline .direction-r .time-wrapper { + float: none; + } + + .timeline .desc { + position: relative; + margin: 1em 0 0 0; + padding: 1em; + background: whitesmoke; + -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); + z-index: 15; + } + + .timeline .direction-l .desc, + .timeline .direction-r .desc { + position: relative; + margin: 1em 1em 0 1em; + padding: 1em; + z-index: 15; + } +} +@media screen and (min-width: 400px) and (max-width: 660px) { + .timeline .direction-l .desc, + .timeline .direction-r .desc { + margin: 1em 4em 0 4em; + } +} diff --git a/timeline/index.html b/timeline/index.html new file mode 100644 index 00000000..2149fe30 --- /dev/null +++ b/timeline/index.html @@ -0,0 +1,93 @@ + + + + + Timeline + + + + + + + + + + + + + + + + + + + +
          + + + +
        • + +
          + +
          + + Freelancer + + 2013 - present + +
          + +
          My current employment. Way better than the position before!
          + +
          + +
          • + + + +
        • + +
          + +
          + + Apple Inc. + + 2011 - 2013 + +
          + +
          My first employer. All the stuff I've learned and projects I've been working on.
          + +
          +
          • + + + +
        • + +
          + +
          + + Harvard University + + 2008 - 2011 + +
          + +
          A description of all the lectures and courses I have taken and my final degree?
          + +
          + +
          • + +
        + + + + + + + diff --git a/timeline/js/index.js b/timeline/js/index.js new file mode 100644 index 00000000..db6822bc --- /dev/null +++ b/timeline/js/index.js @@ -0,0 +1 @@ +var source = "https://gist.github.com/A973C/5889815"; \ No newline at end of file diff --git a/timeline/license.md b/timeline/license.md new file mode 100644 index 00000000..44193fa7 --- /dev/null +++ b/timeline/license.md @@ -0,0 +1,10 @@ + + diff --git a/timeline/scss/style.scss b/timeline/scss/style.scss new file mode 100644 index 00000000..d2fd66cb --- /dev/null +++ b/timeline/scss/style.scss @@ -0,0 +1,287 @@ +body { + margin: 0; + padding: 0; + background: rgb(230,230,230); + + color: rgb(50,50,50); + font-family: 'Open Sans', sans-serif; + font-size: 112.5%; + line-height: 1.6em; +} + +/* ================ The Timeline ================ */ + +.timeline { + position: relative; + width: 660px; + margin: 0 auto; + margin-top: 20px; + padding: 1em 0; + list-style-type: none; +} + +.timeline:before { + position: absolute; + left: 50%; + top: 0; + content: ' '; + display: block; + width: 6px; + height: 100%; + margin-left: -3px; + background: rgb(80,80,80); + background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1))); + background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + + z-index: 5; +} + +.timeline li { + padding: 1em 0; +} + +.timeline li:after { + content: ""; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +.timeline .direction-l { + position: relative; + width: 300px; + float: left; + text-align: right; +} + +.timeline .direction-r { + position: relative; + width: 300px; + float: right; +} + +.timeline .flag-wrapper { + position: relative; + display: inline-block; + + text-align: center; +} + +.timeline .flag { + position: relative; + display: inline; + background: rgb(248,248,248); + padding: 6px 10px; + border-radius: 5px; + + font-weight: 600; + text-align: left; +} + +.timeline .direction-l .flag { + -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); + -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); + box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); +} + +.timeline .direction-r .flag { + -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); + -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); + box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); +} + +.timeline .direction-l .flag:before, +.timeline .direction-r .flag:before { + position: absolute; + top: 50%; + right: -40px; + content: ' '; + display: block; + width: 12px; + height: 12px; + margin-top: -10px; + background: #fff; + border-radius: 10px; + border: 4px solid rgb(255,80,80); + z-index: 10; +} + +.timeline .direction-r .flag:before { + left: -40px; +} + +.timeline .direction-l .flag:after { + content: ""; + position: absolute; + left: 100%; + top: 50%; + height: 0; + width: 0; + margin-top: -8px; + border: solid transparent; + border-left-color: rgb(248,248,248); + border-width: 8px; + pointer-events: none; +} + +.timeline .direction-r .flag:after { + content: ""; + position: absolute; + right: 100%; + top: 50%; + height: 0; + width: 0; + margin-top: -8px; + border: solid transparent; + border-right-color: rgb(248,248,248); + border-width: 8px; + pointer-events: none; +} + +.timeline .time-wrapper { + display: inline; + + line-height: 1em; + font-size: 0.66666em; + color: rgb(250,80,80); + vertical-align: middle; +} + +.timeline .direction-l .time-wrapper { + float: left; +} + +.timeline .direction-r .time-wrapper { + float: right; +} + +.timeline .time { + display: inline-block; + padding: 4px 6px; + background: rgb(248,248,248); +} + +.timeline .desc { + margin: 1em 0.75em 0 0; + + font-size: 0.77777em; + font-style: italic; + line-height: 1.5em; +} + +.timeline .direction-r .desc { + margin: 1em 0 0 0.75em; +} + +/* ================ Timeline Media Queries ================ */ + +@media screen and (max-width: 660px) { + +.timeline { + width: 100%; + padding: 4em 0 1em 0; +} + +.timeline li { + padding: 2em 0; +} + +.timeline .direction-l, +.timeline .direction-r { + float: none; + width: 100%; + + text-align: center; +} + +.timeline .flag-wrapper { + text-align: center; +} + +.timeline .flag { + background: rgb(255,255,255); + z-index: 15; +} + + .timeline .direction-l .flag:before, + .timeline .direction-r .flag:before { + position: absolute; + top: -30px; + left: 50%; + content: ' '; + display: block; + width: 12px; + height: 12px; + margin-left: -9px; + background: #fff; + border-radius: 10px; + border: 4px solid rgb(255,80,80); + z-index: 10; + } + + .timeline .direction-l .flag:after, + .timeline .direction-r .flag:after { + content: ""; + position: absolute; + left: 50%; + top: -8px; + height: 0; + width: 0; + margin-left: -8px; + border: solid transparent; + border-bottom-color: rgb(255,255,255); + border-width: 8px; + pointer-events: none; + } + + .timeline .time-wrapper { + display: block; + position: relative; + margin: 4px 0 0 0; + z-index: 14; + } + + .timeline .direction-l .time-wrapper { + float: none; + } + + .timeline .direction-r .time-wrapper { + float: none; + } + + .timeline .desc { + position: relative; + margin: 1em 0 0 0; + padding: 1em; + background: rgb(245,245,245); + -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20); + -moz-box-shadow: 0 0 1px rgba(0,0,0,0.20); + box-shadow: 0 0 1px rgba(0,0,0,0.20); + + z-index: 15; + } + + .timeline .direction-l .desc, + .timeline .direction-r .desc { + position: relative; + margin: 1em 1em 0 1em; + padding: 1em; + + z-index: 15; + } + + } + + @media screen and (min-width: 400px) and (max-width: 660px) { + + .timeline .direction-l .desc, + .timeline .direction-r .desc { + margin: 1em 4em 0 4em; + } + + } \ No newline at end of file diff --git a/to-do-list/README.md b/to-do-list/README.md new file mode 100644 index 00000000..bee32e7f --- /dev/null +++ b/to-do-list/README.md @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/yesilfasulye/pen/eJIuF. + + \ No newline at end of file diff --git a/to-do-list/css/style.css b/to-do-list/css/style.css new file mode 100644 index 00000000..05a5387e --- /dev/null +++ b/to-do-list/css/style.css @@ -0,0 +1,184 @@ +@import url(http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900); +@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700); + +body{ + color:#4a5b65; + font-family: "Roboto", Arial, sans-serif; + font-size:14px; + line-height: 20px; +} + +*:focus{outline:none !important;} + + +/* TO DO LIST +================================================== */ +.tdl-holder{ + margin:0px auto; + width: 300px; +} + +.tdl-holder h2{ + background-color: #de3f53; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + color:#fff; + font-family:"Roboto Condensed", Arial, sans-serif; + font-size:16px; + font-weight: 100; + line-height: 56px; + padding-left: 15px; + margin:0; +} + +.tdl-holder ul, .tdl-holder li { + list-style: none; + margin:0; + padding:0; +} + +.tdl-holder li{ + background-color: #262e4c; + border-bottom:1px solid #1c2340; + color: #b1b2c9; +} + +.tdl-holder li span{ + margin-left:30px; + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + +.tdl-holder label{ + cursor:pointer; + display:block; + line-height: 56px; + padding: 0 15px; + position: relative; +} + +.tdl-holder label:hover{ + background-color: #2a3353; + color:#8284a3; +} + +.tdl-holder label a{ + background-color:#de3f53; + border-radius:50%; + color:#fff; + display:none; + float:right; + font-weight: bold; + line-height: normal; + height:16px; + margin-top: 20px; + text-align: center; + text-decoration: none; + width:16px; + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + +.tdl-holder label:hover a{ + display: block; +} + +.tdl-holder label a:hover{ + background-color:#fff; + color:#de3f53; +} + +.tdl-holder input[type="checkbox"]{ + cursor: pointer; + opacity: 0; + position: absolute; +} + +.tdl-holder input[type="checkbox"] + i{ + background-color: #404a6e; + border-radius: 50%; + display: block; + height: 16px; + position: absolute; + top:20px; + width: 16px; + z-index: 1; +} + +.tdl-holder input[type="checkbox"]:checked + i::after{ + background-color: #6E6E96; + border-radius: 50%; + content: ''; + display: block; + height:8px; + left:4px; + position: absolute; + top:4px; + width:8px; + z-index: 2; +} + +.tdl-holder input[type="checkbox"]:checked ~ span{ + color: #586186; + text-decoration: line-through; +} + +.tdl-holder input[type="text"]{ + background-color: #171d37; + border: none; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + box-shadow: inset 0 0 8px 0 #0e1329; + color: #464f72; + font-size:14px; + margin:0; + padding:20px 15px; + width:270px; + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + +.tdl-holder input[type="text"]:hover{ + color:#4c577f; +} + +.tdl-holder input[type="text"]:focus{ + color:#fff; +} + +.tdl-holder ::-webkit-input-placeholder {color: #464f72;} /* WebKit browsers */ +.tdl-holder :-moz-placeholder {color: #464f72;} /* Mozilla Firefox 4 to 18 */ +.tdl-holder ::-moz-placeholder {color: #464f72;} /* Mozilla Firefox 19+ */ +.tdl-holder :-ms-input-placeholder {color: #464f72;} /* Internet Explorer 10+ */ + + + +.tdl-holder li.remove{ + -webkit-animation:collapseItem 300ms ease; + animation:collapseItem 300ms ease; + -webkit-transform-origin: 50% 0%; + -ms-transform-origin: 50% 0%; + transform-origin: 50% 0%; + +} + +.tdl-holder li.remove span{ + color: #586186; + text-decoration: line-through; +} + +@keyframes collapseItem { + 0% { -ms-transform: perspective(500px) rotateX(0deg);transform: perspective(500px) rotateX(0deg); } + 100% { -ms-transform: perspective(500px) rotateX(-90deg);transform: perspective(500px) rotateX(-90deg); } +} + +@-webkit-keyframes collapseItem { + 0% { -webkit-transform: perspective(500px) rotateX(0deg); } + 100% { -webkit-transform: perspective(500px) rotateX(-90deg);} +} \ No newline at end of file diff --git a/to-do-list/index.html b/to-do-list/index.html new file mode 100644 index 00000000..f6f62d9c --- /dev/null +++ b/to-do-list/index.html @@ -0,0 +1,40 @@ + + + + + To Do List + + + + + + + + + + + + + + +
        +

        TO DO LIST

        +
        +
          +
          • +
          • +
          • +
          • +
          • +
        +
        + +
        + + + + + + + + diff --git a/to-do-list/js/index.js b/to-do-list/js/index.js new file mode 100644 index 00000000..ed2380c4 --- /dev/null +++ b/to-do-list/js/index.js @@ -0,0 +1,32 @@ + /* TO DO LIST */ + $(".tdl-new").bind('keypress', function(e){ + var code = (e.keyCode ? e.keyCode : e.which); + if(code == 13) { + var v = $(this).val(); + var s = v.replace(/ +?/g, ''); + if (s == ""){ + return false; + }else{ + $(".tdl-content ul").append("
        • "); + $(this).val(""); + } + } + }); + + + $(".tdl-content a").bind("click", function(){ + var _li = $(this).parent().parent("li"); + _li.addClass("remove").stop().delay(100).slideUp("fast", function(){ + _li.remove(); + }); + return false; + }); + + // for dynamically created a tags + $(".tdl-content").on('click', "a", function(){ + var _li = $(this).parent().parent("li"); + _li.addClass("remove").stop().delay(100).slideUp("fast", function(){ + _li.remove(); + }); + return false; + }); \ No newline at end of file diff --git a/to-do-list/license.md b/to-do-list/license.md new file mode 100644 index 00000000..e69a34a1 --- /dev/null +++ b/to-do-list/license.md @@ -0,0 +1,10 @@ + + diff --git a/user-menu/README.md b/user-menu/README.md new file mode 100644 index 00000000..9792555e --- /dev/null +++ b/user-menu/README.md @@ -0,0 +1,4 @@ +A Pen created at CodePen.io. You can find this one at http://codepen.io/kManalli/pen/gwXqZJ. + + Avatar picture with a social menu. +Only CSS. \ No newline at end of file diff --git a/user-menu/config.rb b/user-menu/config.rb new file mode 100644 index 00000000..4302d097 --- /dev/null +++ b/user-menu/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "js" +fonts_dir = "fonts" + +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false +color_output = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass diff --git a/user-menu/css/style.css b/user-menu/css/style.css new file mode 100644 index 00000000..aa8be137 --- /dev/null +++ b/user-menu/css/style.css @@ -0,0 +1,191 @@ +*, +*:before, +*:after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + font-family: 'Open Sans', sans-serif; + color: #b0b0b0; + background: #212121; + width: 100vw; + height: 100vh; +} + +.avatar { + width: 10rem; + height: 10rem; + position: relative; +} + +.avatar-main { + position: absolute; + background: #dedede; + border-radius: 50%; + padding: 0rem; + height: 100%; + width: 100%; + transition: all 1s ease; +} +.avatar-main img { + display: block; + border-radius: 50%; + height: 100%; + width: 100%; + border: 0.25rem solid rgba(255, 135, 240, 0); + transition: all 2s ease-in; +} +.avatar-main img:hover { + border: 0.25rem solid #ff87f0; + transition: all .8s ease-out; +} + +.avatar-sub { + position: absolute; + background: #dedede; + border-radius: 50%; + height: 30%; + width: 30%; + top: calc(80% - .15rem); + left: calc(75% - .15rem); + padding: 0rem; + transition: all 1s ease; +} +.avatar-sub img { + position: absolute; + border-radius: 50%; + height: 100%; + width: 100%; + display: block; + cursor: pointer; + border: 0.25rem solid transparent; + transition: all 1s ease-in; +} +.avatar-sub img:hover { + border: 0.25rem solid #9691eb; + transition: all .8s ease-out; +} + +.avatar-title { + color: rgba(180, 180, 180, 0.85); + cursor: pointer; + margin: 1.5rem 0 0 0; + font-size: .8125rem; + height: 1rem; + font-weight: 600; + transition: all 1s ease-in; + transition-delay: .8125s; +} +.avatar-title:hover { + color: #ff87f0; + transition: all 1s ease-out; +} + +footer { + padding: .24rem 0 .75rem; + font-size: .75rem; + position: absolute; + bottom: 0; +} +footer a { + color: #ff87f0; +} + +.dA, .twit, .git { + opacity: 0; +} + +#check:checked ~ .avatar > .avatar-sub { + background: rgba(222, 222, 222, 0); + left: calc(77.5% - .15rem); + height: 25%; + width: 25%; + opacity: 1; + transition: all 2s ease; + transition-delay: .4s; +} +#check:checked ~ .avatar > .git { + top: calc(95% - .15rem); +} +#check:checked ~ .avatar > .git img:hover { + border: 0.25rem solid #f0c828; +} +#check:checked ~ .avatar > .twit { + top: calc(125% - .15rem); +} +#check:checked ~ .avatar > .twit img:hover { + border: 0.25rem solid #05cdc8; +} +#check:checked ~ .avatar > .dA { + top: calc(155% - .15rem); +} +#check:checked ~ .avatar > .dA img:hover { + border: 0.25rem solid #05cd46; +} +#check:checked ~ .avatar > .social { + top: calc(187.5% - .15rem); + left: calc(75% - .15rem); + height: 30%; + width: 30%; +} +#check:checked ~ .avatar > .social .close { + opacity: 0; + transition-delay: .4s; +} +#check:checked ~ .avatar-title { + opacity: 0; + pointer-events: none; + cursor: default; + transition: all .2s ease; + transition-delay: .1s; +} +#check:checked ~ .avatar > .social > .bubble { + display: none; +} + +.social:hover > .bubble { + opacity: 1; +} +.social:hover > .open { + border: 0.25rem solid #9691eb; +} + +.bubble { + opacity: 0; + background: #fff; + color: #b42828; + font-style: italic; + position: absolute; + left: 140%; + top: 14%; + width: max-content; + border-radius: .25rem; + padding: .5rem; + transition: all .3s; +} +.bubble:after { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + top: calc(50% - 10px); + left: -12px; + border-width: 10px 12px 10px 0; + border-color: transparent #fff transparent transparent; +} + +/* No es tan una buena idea +.avatar { + -webkit-filter: url("#Goo"); + filter: url("#Goo"); +} */ +#check { + display: none; +} diff --git a/user-menu/index.html b/user-menu/index.html new file mode 100644 index 00000000..3d3418a7 --- /dev/null +++ b/user-menu/index.html @@ -0,0 +1,65 @@ + + + + + User Menu + + + + + + + + + + + + + + + +
        + + + + + + + + +
        +
        Bonnibel Bubblegum
        +
        +