Difference between revisions of "Arielle"
imported>DeniseGodin1521 (Created page with "<font color=#000000; font-size: 12pt;font-family: Garamond">''' {{ :Template:Charpage | full name = Arielle | disclaimer position = off | gallery position = l...") |
imported>DeniseGodin1521 |
||
| (One intermediate revision by the same user not shown) | |||
| Line 21: | Line 21: | ||
}} | }} | ||
[[Category:PCs]] [[Category:Active PCs]] [[Category:Bygones]] | [[Category:PCs]] [[Category:Active PCs]] [[Category:Bygones]] | ||
| + | |||
| + | <div id="background-wrap"> | ||
| + | <div class="bubble x1"></div> | ||
| + | <div class="bubble x2"></div> | ||
| + | <div class="bubble x3"></div> | ||
| + | <div class="bubble x4"></div> | ||
| + | <div class="bubble x5"></div> | ||
| + | <div class="bubble x6"></div> | ||
| + | <div class="bubble x7"></div> | ||
| + | <div class="bubble x8"></div> | ||
| + | <div class="bubble x9"></div> | ||
| + | <div class="bubble x10"></div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | __NOTOC__ __NOEDITSECTION__ | ||
| + | {{#css: | ||
| + | |||
| + | @import 'https://fonts.googleapis.com/css?family=Seaweed+Script'; | ||
| + | @import 'https://fonts.googleapis.com/css?family=Eczar'; | ||
| + | |||
| + | .wrapper { | ||
| + | margin: auto; | ||
| + | max-width: 1000px; | ||
| + | height: auto; | ||
| + | background: linear-gradient( #006994, #000000); | ||
| + | border: 3px ridge black; | ||
| + | -webkit-box-shadow: 0px 0px 8px rgba(234,244,158,0.3); | ||
| + | -moz-box-shadow: 0px 0px 8px rgba(234,244,158,0.3); | ||
| + | box-shadow: 0px 0px 8px rgba(234,244,158,0.3); | ||
| + | position: relative; | ||
| + | z-index: 99; | ||
| + | color: #00ae88; | ||
| + | font-family: Eczar, Serif; | ||
| + | font-size: 14pt; | ||
| + | } | ||
| + | |||
| + | |||
| + | #background-wrap { | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | bottom: 0; | ||
| + | left: 0; | ||
| + | right: 0; | ||
| + | z-index: 1; | ||
| + | pointer-events: none; | ||
| + | } | ||
| + | |||
| + | /* KEYFRAMES */ | ||
| + | |||
| + | @-webkit-keyframes animateBubble { | ||
| + | 0% { | ||
| + | margin-top: 1000px; | ||
| + | } | ||
| + | 100% { | ||
| + | margin-top: -100%; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-moz-keyframes animateBubble { | ||
| + | 0% { | ||
| + | margin-top: 1000px; | ||
| + | } | ||
| + | 100% { | ||
| + | margin-top: -100%; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes animateBubble { | ||
| + | 0% { | ||
| + | margin-top: 1000px; | ||
| + | } | ||
| + | 100% { | ||
| + | margin-top: -100%; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes sideWays { | ||
| + | 0% { | ||
| + | margin-left:0px; | ||
| + | } | ||
| + | 100% { | ||
| + | margin-left:50px; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-moz-keyframes sideWays { | ||
| + | 0% { | ||
| + | margin-left:0px; | ||
| + | } | ||
| + | 100% { | ||
| + | margin-left:50px; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes sideWays { | ||
| + | 0% { | ||
| + | margin-left:0px; | ||
| + | } | ||
| + | 100% { | ||
| + | margin-left:50px; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /* ANIMATIONS */ | ||
| + | |||
| + | .x1 { | ||
| + | -webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | -moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | |||
| + | left: -5%; | ||
| + | top: 5%; | ||
| + | |||
| + | -webkit-transform: scale(0.6); | ||
| + | -moz-transform: scale(0.6); | ||
| + | transform: scale(0.6); | ||
| + | } | ||
| + | |||
| + | .x2 { | ||
| + | -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; | ||
| + | -moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; | ||
| + | animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; | ||
| + | |||
| + | left: 5%; | ||
| + | top: 80%; | ||
| + | |||
| + | -webkit-transform: scale(0.4); | ||
| + | -moz-transform: scale(0.4); | ||
| + | transform: scale(0.4); | ||
| + | } | ||
| + | |||
| + | .x3 { | ||
| + | -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | -moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | |||
| + | left: 10%; | ||
| + | top: 40%; | ||
| + | |||
| + | -webkit-transform: scale(0.7); | ||
| + | -moz-transform: scale(0.7); | ||
| + | transform: scale(0.7); | ||
| + | } | ||
| + | |||
| + | .x4 { | ||
| + | -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; | ||
| + | -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; | ||
| + | animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; | ||
| + | |||
| + | left: 20%; | ||
| + | top: 0; | ||
| + | |||
| + | -webkit-transform: scale(0.3); | ||
| + | -moz-transform: scale(0.3); | ||
| + | transform: scale(0.3); | ||
| + | } | ||
| + | |||
| + | .x5 { | ||
| + | -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; | ||
| + | -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; | ||
| + | animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; | ||
| + | |||
| + | left: 30%; | ||
| + | top: 50%; | ||
| + | |||
| + | -webkit-transform: scale(0.5); | ||
| + | -moz-transform: scale(0.5); | ||
| + | transform: scale(0.5); | ||
| + | } | ||
| + | |||
| + | .x6 { | ||
| + | -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | -moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | |||
| + | left: 50%; | ||
| + | top: 0; | ||
| + | |||
| + | -webkit-transform: scale(0.8); | ||
| + | -moz-transform: scale(0.8); | ||
| + | transform: scale(0.8); | ||
| + | } | ||
| + | |||
| + | .x7 { | ||
| + | -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | -moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | |||
| + | left: 65%; | ||
| + | top: 70%; | ||
| + | |||
| + | -webkit-transform: scale(0.4); | ||
| + | -moz-transform: scale(0.4); | ||
| + | transform: scale(0.4); | ||
| + | } | ||
| + | |||
| + | .x8 { | ||
| + | -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; | ||
| + | -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; | ||
| + | animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; | ||
| + | |||
| + | left: 80%; | ||
| + | top: 10%; | ||
| + | |||
| + | -webkit-transform: scale(0.3); | ||
| + | -moz-transform: scale(0.3); | ||
| + | transform: scale(0.3); | ||
| + | } | ||
| + | |||
| + | .x9 { | ||
| + | -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; | ||
| + | -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; | ||
| + | animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; | ||
| + | |||
| + | left: 90%; | ||
| + | top: 50%; | ||
| + | |||
| + | -webkit-transform: scale(0.6); | ||
| + | -moz-transform: scale(0.6); | ||
| + | transform: scale(0.6); | ||
| + | } | ||
| + | |||
| + | .x10 { | ||
| + | -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | -moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| + | |||
| + | left: 80%; | ||
| + | top: 80%; | ||
| + | |||
| + | -webkit-transform: scale(0.3); | ||
| + | -moz-transform: scale(0.3); | ||
| + | transform: scale(0.3); | ||
| + | } | ||
| + | |||
| + | /* OBJECTS */ | ||
| + | |||
| + | .bubble { | ||
| + | -webkit-border-radius: 50%; | ||
| + | -moz-border-radius: 50%; | ||
| + | border-radius: 50%; | ||
| + | |||
| + | -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); | ||
| + | -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); | ||
| + | box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); | ||
| + | |||
| + | height: 100px; | ||
| + | position: absolute; | ||
| + | width: 100px; | ||
| + | } | ||
| + | |||
| + | img { | ||
| + | max-width: 100%; | ||
| + | height: auto; | ||
| + | } | ||
| + | |||
| + | }} | ||
Latest revision as of 19:56, 22 September 2019
|
| ||||||||||||||||
