Rogie King! Profile Experiment #2

HTML
<main class='profile' ontouchstart> <div class='background'></div> <aside class='avatar'></aside> <section class='info'> <h1>Rogie King</h1> <h2>Illustrator / Front-End Developer <br> UI/UX Designer</h2> <a class='follow'>+ Follow</a> <ul> <li> <a class='link codepen' href='#' target='_blank'> <svg viewbox='0 0 85 85'> <path d='M82.5,29.1666667 L42.5,2.5 L2.5,29.1666667 L2.5,55.8922001 L42.5,82.5 L82.5,55.8922001 L82.5,29.1666667 Z M42.5,2.9120677 L42.5,29.1666667 L42.5,2.9120677 Z M42.5,55.8922001 L42.5,82.5 L42.5,55.8922001 Z M2.5,29.1666667 L2.5,55.8922001 L42.5,29.1666667 L82.5,55.8922001 L82.5,29.1666667 L42.5,55.8922001 L2.5,29.1666667 Z'></path> </svg> </a> </li> <li> <a class='link github' href='#' target='_blank'> <svg viewbox='0 0 85 85'> <path class='fill' d='M76.7 19c1.1-4.8 0.6-10.1-1.6-15 -0.7-1.7-2.3-2.9-4.2-3 -0.5-0.1-1.1-0.1-1.6-0.1 -4.6 0-10.7 1.6-15 5C50.4 5 46.4 4.6 42.5 4.6V4.4c-3.9 0-7.9 0.4-11.8 1.3 -4.3-3.4-10.4-5-15-5 -0.5 0-1.1 0-1.6 0.1 -1.9 0.1-3.5 1.3-4.2 3C7.7 8.7 7.2 14 8.3 18.8c-3.3 4.4-5 9.6-5 15.4 0 12.5 4.2 21.4 12.5 26.4 2.6 1.6 5.6 2.9 9 3.7 -0.6 1.7-0.9 3.7-0.9 6.1v11.2h0c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5l0-11c0-4.5 1.5-7.7 4.5-9.7 -1.5-0.1-3.2-0.3-5.2-0.8 -3.8-0.7-7-1.9-9.7-3.6C11.6 52.4 8.3 45.1 8.3 34.4c0-5.6 1.9-10.3 5.6-14.3 -1.7-4.4-1.4-9.6 0.6-14.3 0.4 0 0.8 0 1.2 0 4.9 0 10.8 2.2 13.5 5.5 4.5-1.2 9-1.8 13.3-1.8v0.1c4.3 0 8.8 0.6 13.3 1.8 2.7-3.3 8.6-5.5 13.5-5.5 0.4 0 0.8 0 1.2 0 2 4.7 2.3 9.9 0.6 14.3 3.7 4 5.6 8.7 5.6 14.3 0 10.7-3.3 18-10.2 22.2 -2.7 1.7-5.9 2.9-9.7 3.6 -2 0.5-3.7 0.7-5.2 0.8 3 2 4.5 5.2 4.5 9.7l0 11c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5h0V70.6c0-2.4-0.3-4.4-0.9-6.1 3.4-0.8 6.4-2.1 9-3.7 8.3-5 12.5-13.9 12.5-26.4C81.7 28.6 80 23.4 76.7 19z'></path> </svg> </a> </li> </ul> </section> </main>
SCSS
$red: #f5515f; $blue: #05abe0; $grey: #343434; ul { list-style-type: none; } $font: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; $padding: 12px; * { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); user-select: none; cursor: default; } *:focus { outline: none!important; } body, html { height: 100vh; } a, a * { cursor: pointer!important; } body { display: flex; align-items: center; align-content: center; justify-content: center; padding: $padding; background: mix($red, $blue); background: linear-gradient(135deg, rgba($red,1) 0%,rgba($blue,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$red', endColorstr='$blue',GradientType=1 ); color: $grey; font-family: $font; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .profile { position: relative; width: 100%; max-width: 600px; height: 100%; background: rgba(white, .25); border-radius: 2px; overflow: hidden; box-shadow: 0 0 20px rgba(darken($red, 40%), .2); &.pre-enter { transform-origin: center center; transform: scaleY(0); .avatar { transform-origin: center top; transform: scaleY(0); } h1, h2, a.follow, a.link { opacity: 0; transform: translateY(300px); } } &.on-enter { animation: scaleYIn 1000ms ease-out forwards; .avatar { animation: scaleYIn-small 750ms ease-out forwards 1000ms; } h1, h2, a.follow, a.link { opacity: 1; animation: slideInUp 1000ms ease-out forwards; } h1 { animation-delay: 1050ms; } h2 { animation-delay: 1100ms; } a.follow { animation-delay: 1250ms; } li { &:nth-child(1) { a.link { animation-delay: 1300ms; } } &:nth-child(2) { a.link { animation-delay: 1350ms; } } &:nth-child(3) { a.link { animation-delay: 1400ms; } } } } } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 2px; } .avatar, .info { width: 100%; height: 50%; } .avatar { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/Group%20(1).png') no-repeat; background-position: 85%; background-size: cover; clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%); } .info { display: flex; flex-flow: row wrap; align-items: center; align-content: center; justify-content: center; position: relative; text-align: center; h1 { padding: $padding $padding 0; width: 100%; font-size: 24px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } h2, a.follow { display: block; border-radius: 2px; padding: $padding/2; color: white; font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; } h2 { background: $red; background: linear-gradient(135deg, rgba(#f5825f,1) 0%,rgba(#f5005f,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5825f', endColorstr='#f5005f',GradientType=1 ); } a.follow { margin-left: $padding; background: $blue; background: linear-gradient(135deg, rgba(#05c8e0,1) 0%,rgba(#057fe0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05c8e0', endColorstr='#057fe0',GradientType=1 ); &:hover, &:focus { background: #05c8e0; background: linear-gradient(135deg, rgba(lighten(#05c8e0, 10%),1) 0%,rgba(lighten(#057fe0, 10%),1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#05c8e0, 10%)', endColorstr='lighten(#057fe0, 10%)',GradientType=1 ); } &:active { background: #057fe0; background: linear-gradient(135deg, rgba(darken(#05c8e0, 5%),1) 0%,rgba(darken(#057fe0, 5%),1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#05c8e0, 5%)', endColorstr='darken(#057fe0, 5%)',GradientType=1 ); } } ul { display: flex; justify-content: center; padding: $padding/2; width: 100%; li { padding: $padding/2; } } a.link { display: block; border-radius: 100%; background: $blue; padding: $padding*0.75; transform-origin: center center; svg { width: 28px; height: 28px; *:not(.fill) { fill: none; stroke: white; stroke-width: 5px; stroke-linecap: round; stroke-linejoin: round; } .fill { fill: white; stroke: none; } } } } a.link { &.portfolio { background: #f5c8bf; background: linear-gradient(135deg, rgba(#f5c8bf,1) 0%,rgba(#f58dbf,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5c8bf', endColorstr='#f58dbf',GradientType=1 ); box-shadow: inset 0 0 10px rgba(#f58dbf, .5); &:hover, &:focus { background: lighten(#f5c8bf, 5%); background: linear-gradient(135deg, rgba(lighten(#f5c8bf, 5%),1) 0%,rgba(lighten(#f58dbf, 5%),1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#f5c8bf, 5%)', endColorstr='lighten(#f58dbf, 5%)',GradientType=1 ); box-shadow: inset 0 0 10px rgba(lighten(#f58dbf, 5%), .5); } &:active { background: darken(#f5c8bf, 5%); background: linear-gradient(135deg, rgba(darken(#f5c8bf, 5%),1) 0%,rgba(darken(#f58dbf, 5%),1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#f5c8bf, 5%)', endColorstr='darken(#f58dbf, 5%)',GradientType=1 ); box-shadow: inset 0 0 10px rgba(darken(#f58dbf, 5%), .5); } } &.codepen { background: #fcd000; background: linear-gradient(135deg, rgba(#fcd000,1) 0%,rgba(#fc9a00,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd000', endColorstr='#fc9a00',GradientType=1 ); box-shadow: inset 0 0 10px rgba(#fc9a00, .5); &:hover, &:focus { background: lighten(#fcd000, 5%); background: linear-gradient(135deg, rgba(lighten(#fcd000, 5%),1) 0%,rgba(lighten(#fc9a00, 5%),1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#fcd000, 5%)', endColorstr='lighten(#fc9a00, 5%)',GradientType=1 ); box-shadow: inset 0 0 10px rgba(lighten(#fc9a00, 5%), .5); } &:active { background: darken(#fcd000, 5%); background: linear-gradient(135deg, rgba(darken(#fcd000, 5%),1) 0%,rgba(darken(#fc9a00, 5%),1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#fcd000, 5%)', endColorstr='darken(#fc9a00, 5%)',GradientType=1 ); box-shadow: inset 0 0 10px rgba(darken(#fc9a00, 5%), .5); } } &.github { background: #41adc4; background: linear-gradient(135deg, rgba(#41adc4,1) 0%,rgba(#4183c4,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41adc4', endColorstr='#4183c4',GradientType=1 ); box-shadow: inset 0 0 10px rgba(#4183c4, .5); &:hover, &:focus { background: lighten(#41adc4, 5%); background: linear-gradient(135deg, rgba(lighten(#41adc4, 5%),1) 0%,rgba(lighten(#4183c4, 5%),1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#41adc4, 5%)', endColorstr='lighten(#4183c4, 5%)',GradientType=1 ); box-shadow: inset 0 0 10px rgba(lighten(#4183c4, 5%), .5); } &:active { background: darken(#41adc4, 5%); background: linear-gradient(135deg, rgba(darken(#41adc4, 5%),1) 0%,rgba(darken(#4183c4, 5%),1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#41adc4, 5%)', endColorstr='darken(#4183c4, 5%)',GradientType=1 ); box-shadow: inset 0 0 10px rgba(darken(#4183c4, 5%), .5); } } } @media only screen and (min-width: 470px) { .profile { display: flex; &.pre-enter { transform: scaleX(0); .avatar { transform-origin: left center; transform: scaleX(0); } h1, h2, a.follow, a.link { transform: translateX(300px); } } &.on-enter { animation-name: scaleXIn; .avatar { animation-name: scaleXIn-small; } h1, h2, a.follow, a.link { animation-name: slideInLeft; } } } .background { mix-blend-mode: overlay; } .avatar, .info { width: 50%; height: 100%; } .avatar { clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%); } .svgclippaths .info { position: absolute; top: 0; right: 0; width: 56.25%; } } @media only screen and (min-width: 470px) and (min-height: 600px) { .profile { max-height: 400px; } } /* https://goo.gl/jIUq3E */ @keyframes scaleXIn { 0% { transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 4.7% { transform: matrix3d(0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 9.41% { transform: matrix3d(0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 14.11% { transform: matrix3d(1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 18.72% { transform: matrix3d(1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 24.32% { transform: matrix3d(1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 29.93% { transform: matrix3d(1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 35.54% { transform: matrix3d(0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 41.04% { transform: matrix3d(0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 52.15% { transform: matrix3d(0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 63.26% { transform: matrix3d(1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 85.49% { transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } /* https://goo.gl/auuhcg */ @keyframes scaleYIn { 0% { transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 4.7% { transform: matrix3d(1, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 9.41% { transform: matrix3d(1, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 14.11% { transform: matrix3d(1, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 18.72% { transform: matrix3d(1, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 24.32% { transform: matrix3d(1, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 29.93% { transform: matrix3d(1, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 35.54% { transform: matrix3d(1, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 41.04% { transform: matrix3d(1, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 52.15% { transform: matrix3d(1, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 63.26% { transform: matrix3d(1, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 85.49% { transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } /* https://goo.gl/dNBqrt */ @keyframes scaleXIn-small { 0% { transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.31% { transform: matrix3d(0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 12.51% { transform: matrix3d(0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 18.82% { transform: matrix3d(0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 25.03% { transform: matrix3d(0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 37.54% { transform: matrix3d(0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 50.05% { transform: matrix3d(0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 75.08% { transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } /* https://goo.gl/jZL0uj */ @keyframes scaleYIn-small { 0% { transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.31% { transform: matrix3d(1, 0, 0, 0, 0, 0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 12.51% { transform: matrix3d(1, 0, 0, 0, 0, 0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 18.82% { transform: matrix3d(1, 0, 0, 0, 0, 0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 25.03% { transform: matrix3d(1, 0, 0, 0, 0, 0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 37.54% { transform: matrix3d(1, 0, 0, 0, 0, 0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 50.05% { transform: matrix3d(1, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 75.08% { transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } /* https://goo.gl/Ne0Mkr */ @keyframes slideInLeft { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 300, 0, 0, 1); } 6.31% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 184.858, 0, 0, 1); } 12.51% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 113.68, 0, 0, 1); } 18.82% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 68.663, 0, 0, 1); } 25.03% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 41.37, 0, 0, 1); } 37.54% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.382, 0, 0, 1); } 50.05% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.724, 0, 0, 1); } 75.08% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.381, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } /* https://goo.gl/MSqtd5 */ @keyframes slideInUp { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1); } 6.31% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 184.858, 0, 1); } 12.51% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 113.68, 0, 1); } 18.82% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.663, 0, 1); } 25.03% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 41.37, 0, 1); } 37.54% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 14.382, 0, 1); } 50.05% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.724, 0, 1); } 75.08% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.381, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }
JAVASCRIPT
$(".profile").addClass("pre-enter"); setTimeout(function(){ $(".profile").addClass("on-enter"); }, 500); setTimeout(function(){ $(".profile").removeClass("pre-enter on-enter"); }, 3000);
Expand for more options Login