Last active
February 25, 2016 22:50
-
-
Save Rplus/e9630d442c9da98ecc85 to your computer and use it in GitHub Desktop.
codepen project
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| html(lang="en") | |
| head | |
| meta(charset="UTF-8") | |
| title stripe landing page | |
| meta(name="viewport", content="width=device-width") | |
| link(rel="stylesheet", href="style.css") | |
| body | |
| header.header | |
| .circle.c1 | |
| .circle.c2 | |
| h1.logo | |
| .arrow | |
| h2.slogan stripe landing page. | |
| span.ps Lorem ipsum dolor sit amet, consectetur adipisicing. | |
| .btns | |
| button.btn.btn--primary Lorem ipsum | |
| button.btn dolor sit amet | |
| .hill | |
| blockquote.info | |
| | forked from #[a(href="https://stripe.com/atlas") Introducing Stripe Atlas] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $logo-size: 5.5rem; | |
| .header { | |
| position: relative; | |
| padding-top: 6.5rem; | |
| background: linear-gradient(#e8eef2, #d3dde4); | |
| overflow: hidden; | |
| } | |
| .logo { | |
| position: relative; | |
| width: $logo-size; | |
| height: $logo-size; | |
| margin: 0 auto 3rem; | |
| background: url('https://goo.gl/gO8nUV') 50% / cover; | |
| opacity: 0; | |
| transform: rotate(-2turn) scale(0); | |
| animation: fade-content 1s 1.2s cubic-bezier(.2,1,.2,1) forwards; | |
| } | |
| .arrow { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| font-size: 18px; | |
| opacity: 0; | |
| transform: scale(1.7); | |
| animation: fade-content .5s 2.2s cubic-bezier(.2,1,.2,1) forwards; | |
| &::before, | |
| &::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| border-top: 1.5em solid transparent; | |
| } | |
| &::before { | |
| border-right: 1em solid #c7deef; | |
| transform-origin: 100% 0; | |
| transform: translate(calc(-100%), -75%) skewY(-25deg); | |
| } | |
| &::after { | |
| border-left: 1em solid #5a7695; | |
| transform-origin: 0 0; | |
| transform: translate(1px, -75%) skewY(25deg); | |
| } | |
| } | |
| .slogan { | |
| max-width: 630px; | |
| margin: 0 auto 3.5rem; | |
| color: #023161; | |
| font: 100 26px / 1.5 sans-serif; | |
| text-shadow: 0 1px 1px rgba(#000,.2); | |
| text-transform: capitalize; | |
| opacity: 0; | |
| transform: perspective(800px) rotateX(-60deg) translateY(50px); | |
| animation: fade-content .85s 2.1s cubic-bezier(.2,1,.2,1) forwards; | |
| .ps { | |
| color: #fff; | |
| text-transform: lowercase; | |
| text-shadow: 0 1px 2px rgba(#001e32,.15); | |
| } | |
| } | |
| .btns { | |
| margin-bottom: 5rem; | |
| } | |
| .btn { | |
| position: relative; | |
| padding: .75rem 1rem; | |
| border: none; | |
| border-radius: .25rem; | |
| outline: none; | |
| font-size: 14px; | |
| text-transform: capitalize; | |
| color: #008cdd; | |
| background: linear-gradient(#fff, rgba(#fff,.9)); | |
| text-shadow: 0 1px 0 #fff; | |
| box-shadow: | |
| inset 0 1px 1px #fff, | |
| inset 0 -1px 4px rgba(23,78,138,.1), | |
| 0 4px 20px -2px rgba(#000,.2); | |
| cursor: pointer; | |
| opacity: 0; | |
| transform: perspective(800px) rotateX(-50deg) translateY(30px); | |
| animation: fade-content .7s 2.2s forwards; | |
| &::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: inherit; | |
| color: rgba(#000,.2); | |
| opacity: 0; | |
| box-shadow: 0 4px 20px -2px; | |
| transition-duration: .4s; | |
| } | |
| &:hover::before { | |
| opacity: 1; | |
| } | |
| &--primary { | |
| color: #fff; | |
| font-weight: 900; | |
| text-shadow: 0 1px 0 rgba(#000,.1); | |
| box-shadow: 0 4px 16px -1px rgba(#000,.4); | |
| background: #123159 linear-gradient(#123159, #0f294d); | |
| &::before { | |
| color: rgba(#000,.3); | |
| } | |
| } | |
| & ~ .btn { | |
| margin-left: 1.5em; | |
| animation-delay: 2.4s; | |
| } | |
| } | |
| .circle { | |
| position: absolute; | |
| top: calc(50% - 10vw); | |
| left: calc(50% - 50vw); | |
| width: 200vw; | |
| height: 200vw; | |
| border-radius: 50%; | |
| background-color: rgba(#f00,.1); | |
| background-image: linear-gradient(45deg, rgba(#ffb367, .75) 55%, rgba(#b95dd7, .75), rgba(#00d7b9, .75) 72%); | |
| transform: translate(100%, 500px); | |
| animation: fade-content 1.2s .7s cubic-bezier(.2,1,.2,1) forwards; | |
| mix-blend-mode: darken; | |
| &.c2 { | |
| top: calc(50% - 1vw); | |
| left: calc(50% - 90vw); | |
| width: 250vw; | |
| height: 250vw; | |
| background-image: linear-gradient(45deg, rgba(#ffcf9f, .75) 62.5%, rgba(#ce97df, .75), rgba(#8dc6d8, .75) 70%); | |
| animation-delay: .5s; | |
| } | |
| } | |
| .hill { | |
| position: relative; | |
| height: 8.5rem; | |
| overflow: hidden; | |
| &::before { | |
| content: ''; | |
| position: absolute; | |
| border-radius: 50%; | |
| top: 1rem; | |
| left: 50%; | |
| width: 1000vw; | |
| height: 1000vw; | |
| transform: translate(calc(-50% + 35vw), 0); | |
| background-color: #fff; | |
| color: rgba(#000,.1); | |
| box-shadow: | |
| 0 0 .5rem, | |
| 0 0 2rem, | |
| 0 0 3rem; | |
| } | |
| } | |
| @keyframes fade-content { | |
| to { | |
| opacity: 1; | |
| transform: none; | |
| } | |
| } | |
| // reset style | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| position: relative; | |
| margin: 0; | |
| min-height: 100vh; | |
| padding-top: 1px; | |
| padding-bottom: 5rem; | |
| text-align: center; | |
| overflow-y: scroll; | |
| } | |
| .info { | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| margin: 1em; | |
| font-size: .9em; | |
| font-style: italic; | |
| font-family: serif; | |
| text-align: right; | |
| opacity: .5; | |
| a { | |
| color: inherit; | |
| } | |
| } | |
| .sr-only { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip: rect(0,0,0,0); | |
| border: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment