diff --git a/index.css b/index.css new file mode 100644 index 0000000..08d850e --- /dev/null +++ b/index.css @@ -0,0 +1,162 @@ +*,*::before,*::after +{ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* +** All animation keyframes definitions here +*/ + +@-webkit-keyframes slide-in-from-right { + from { + -webkit-transform: translateX(120%); + -ms-transform: translateX(120%); + -o-transform: translateX(120%); + transform: translateX(120%); + } + to { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + -o-transform: translateX(0); + transform: translateX(0); + } +} +@-o-keyframes slide-in-from-right { + from { + -webkit-transform: translateX(120%); + -ms-transform: translateX(120%); + -o-transform: translateX(120%); + transform: translateX(120%); + } + to { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + -o-transform: translateX(0); + transform: translateX(0); + } +} +@-moz-keyframes slide-in-from-right { + from { + -webkit-transform: translateX(120%); + -ms-transform: translateX(120%); + -o-transform: translateX(120%); + transform: translateX(120%); + } + to { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + -o-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes slide-in-from-right { + from { + -webkit-transform: translateX(120%); + -ms-transform: translateX(120%); + -o-transform: translateX(120%); + transform: translateX(120%); + } + to { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + -o-transform: translateX(0); + transform: translateX(0); + } +} + +/* +** Keyframe definition ends here +*/ + +body +{ + overflow-x: hidden; +} + +.slide-container +{ + position: absolute; + + bottom: 2em; + right: 2em; + + width: 20em; + height: 15em; +} + +.slide +{ + position: relative; + + width: 100%; + height: 100%; + + box-shadow: 0 0 3px rgba(0,0,0,.6); + padding: 1em; + + -webkit-animation: slide-in-from-right 1.5s; + -o-animation: slide-in-from-right 1.5s; + animation: slide-in-from-right 1.5s; +} + +.slide-text +{ + font-family: sans-serif; + font-size: 1em; + color: rgb(50,50,50); + + width: 100%; + height: 3em; + + padding: 0.25em .25em; +} + +.highlight +{ + font-size: 1.2em; +} + +.quote::before,.quote::after +{ + content: "'"; + width: 1em; + height: 1em; +} + +.slide-img { + width: 100%; + height: 10em; + + position: relative; +} + +img { + display: block; + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.slide-close-btn +{ + position: absolute; + top: 0; + right: 0; + + padding: .375em .5em; + background-color: rgba(255,255,255,0.5); + + font-family: sans-serif; + font-size: .85em; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..042c7cc --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + Fly-in Demo + + + + +
+
+
+ Are you looking for White dresses? +
+
+ +
+
X
+
+
+ + \ No newline at end of file