commit 707dbd17870f7c468c594d7803ee40cf02a62240 Author: Arti Zirk Date: Thu Jul 20 21:15:03 2017 +0300 IT DOESNT WORK! diff --git a/index.html b/index.html new file mode 100644 index 0000000..1ca1c3e --- /dev/null +++ b/index.html @@ -0,0 +1,10 @@ + + + + + + +

Loading

+ + + diff --git a/invite/index.html b/invite/index.html new file mode 100644 index 0000000..3fed870 --- /dev/null +++ b/invite/index.html @@ -0,0 +1,19 @@ + + + + + +
+
+

Loading

+
+ +
+

1

+
+ +
+

2

+
+
+ diff --git a/invite/style.scss b/invite/style.scss new file mode 100644 index 0000000..4453728 --- /dev/null +++ b/invite/style.scss @@ -0,0 +1,73 @@ +$foreground: #FFFFFF; +$background: #000000; +$animation-delay: 2s; +$animation-length: 10s; +* { + box-sizing: border-box; +} + +body { + justify-content: center; + align-items: center; + background: $background; + color: $foreground; + font-family: Sans-Serif; + margin:0; + padding:0; + overflow:hidden; +} + +.container { + height:100vh; + width: 100vw; + :nth-child(1) { + animation-delay: 0s; + animation-duration: 1s; + animation-name: slide-in; + animation-fill-mode: both; + } + :nth-child(2) { + animation-delay: 1s; + animation-duration: 1s; + animation-name: slide-in; + animation-fill-mode: both; + display:none; + } + :nth-child(3) { + animation-delay: 2s; + animation-duration: 1s; + animation-name: slide-in; + animation-fill-mode: both; + display:none; + } +} + +.slide { + position: absolute; + height:100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: center; +} + + + +.scale-in-center { +} + +@keyframes side-in { + 0% { + transform: translate(0, -50vh); + opacity: 0; + } + + 50% { + transform: translate(0, 0); + opacity: 1; + } + 100% { + transform: translate(0, 10vh); + opacity: 0; + } +}