diff --git a/public/main.css b/public/main.css index 57e82f3..cd4e74a 100644 --- a/public/main.css +++ b/public/main.css @@ -1,25 +1,70 @@ +* { + box-sizing: border-box; +} + html, body { margin: 0px; height: 100%; } +.modal.background { + background-image: url('/tip.jpg'); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 100%; + width: 100%; + position: absolute; +} + +.modal.content { + width: 95%; +} + +.modal.box { + background-color: #A9D0F5; + border-radius: 15px; + text-align: center; + margin: 6em auto; + width: 50%; + -webkit-animation-name: from_top; + -webkit-animation-duration: 1.5s; + animation-name: from_top; + animation-duration: 1.5s; +} + #video { background-image: url('/willpower.gif'); background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; + width: 100%; + z-index: 255; + position: absolute; + display: none; } -.modal.background { - z-index: 10; - background-image: url('/tip.jpg'); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - height: 100%; +@-webkit-keyframes from_top { + from { + margin: -6em auto; + opacity: 0; + } + + to { + margin: 6em auto; + opacity: 1; + } } -.modal.content { - +@keyframes from_top { + from { + margin: -6em auto; + opacity: 0; + } + + to { + margin: 6em auto; + opacity: 1; + } } diff --git a/public/willpower.mp3 b/public/willpower.mp3 new file mode 100644 index 0000000..b266ddd Binary files /dev/null and b/public/willpower.mp3 differ diff --git a/views/index.erb b/views/index.erb index ec24c46..194e2a2 100644 --- a/views/index.erb +++ b/views/index.erb @@ -1,4 +1,8 @@ - +