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 |
||
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> | ||
+ | </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; | ||
+ | } | ||
+ | |||
+ | .thesky { | ||
+ | z-index: -1; | ||
+ | background: #FF9D2F; | ||
+ | } | ||
+ | |||
+ | .title { | ||
+ | font-size: 46pt; | ||
+ | letter-spacing: .25em; | ||
+ | font-weight: 100; | ||
+ | text-align: center; | ||
+ | text-indent: 0em; | ||
+ | vertical-align: middle; | ||
+ | margin: 0px; | ||
+ | font-family: 'Seaweed Script'; | ||
+ | } | ||
+ | |||
+ | .subtitle { | ||
+ | font-size: 28pt; | ||
+ | letter-spacing: .1em; | ||
+ | font-weight: 100; | ||
+ | text-align: center; | ||
+ | text-indent: 0em; | ||
+ | vertical-align: middle; | ||
+ | margin: 0px; | ||
+ | font-family: 'Seaweed Script'; | ||
+ | } | ||
+ | |||
+ | .box { | ||
+ | padding: .5em; | ||
+ | border: none; | ||
+ | height: auto; | ||
+ | width: 250px; | ||
+ | margin: 1em; | ||
+ | } | ||
+ | |||
+ | .text { | ||
+ | padding-right: .5em; | ||
+ | padding-left: .5em; | ||
+ | margin-right: .5em; | ||
+ | margin-left: .5em; | ||
+ | } | ||
+ | |||
+ | table.gallery { | ||
+ | width: 100%; | ||
+ | border-top: none; | ||
+ | margin: auto; | ||
+ | text-align: center; | ||
+ | border-spacing: 1em; | ||
+ | } | ||
+ | |||
+ | table.gallery th, table.gallery td { | ||
+ | margin: auto; | ||
+ | text-align: center; | ||
+ | border: none; | ||
+ | padding:.5em; | ||
+ | border-spacing: 2em; | ||
+ | } | ||
+ | |||
+ | |||
+ | table { | ||
+ | margin: 1em; | ||
+ | } | ||
+ | |||
+ | .rp-log ul { | ||
+ | list-style: none; /* Remove list bullets */ | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | #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; | ||
+ | } | ||
+ | |||
+ | }} |
Revision as of 21:20, 21 September 2019
|
| ||||||||||||||||