Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- @import url('https://fonts.googleapis.com/css?family=Federant|Audiowide|Abril+Fatface');
- body {
- background-image: url("https://i.imgur.com/YUkiVW0.png");
- color: white;
- background-color: #37445b;
- font-family: "Federant";
- font-size: 16px;
- }
- #credit {
- Position: fixed; bottom: 10px; left: 10px;
- font-family: "Audiowide";
- font-size: 14px;
- z-index: 99;
- text-shadow: 2px 0 0 #4C9DCC, -2px 0 0 #4C9DCC, 0 2px 0 #4C9DCC, 0 -2px 0 #4C9DCC, 1px 1px #4C9DCC, -1px -1px 0 #4C9DCC, 1px -1px 0 #4C9DCC, -1px 1px 0 #4C9DCC;
- }
- #CenterBG {
- position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
- width: 360px;
- height: 510px;
- background-color: #6d609e;
- background-image: url("https://i.imgur.com/zZiqHn5.png");
- background-position: center;
- background-attachment:fixed;
- border-top: 3px solid pink;
- border-bottom: 3px solid pink;
- z-index:2;
- }
- #LeftBG {
- position: fixed; left: -800px; right: 0px; top: 0px; bottom: 0px; margin: auto;
- width: 420px;
- height: 570px;
- padding: 10px;
- background-color: #6d609e;
- background-image: url("https://i.imgur.com/zZiqHn5.png");
- background-position: center;
- background-attachment:fixed;
- border: 3px solid pink;
- z-index:1;
- }
- #RightBG {
- position: fixed; left: 0px; right: -800px; top: 0px; bottom: 0px; margin: auto;
- width: 420px;
- height: 570px;
- padding: 10px;
- background-color: #6d609e;
- background-image: url("https://i.imgur.com/zZiqHn5.png");
- background-position: center;
- background-attachment:fixed;
- border: 3px solid pink;
- z-index:1;
- }
- #Title {
- position: fixed; left: 0px; right: 0px; top: -425px; bottom: 0px; margin: auto;
- width: 300px;
- height: 35px;
- text-align: center;
- font-size: 30px;
- color: pink;
- font-family: "Abril Fatface";
- text-shadow: 2px 0 0 #917c9b, -2px 0 0 #917c9b, 0 2px 0 #917c9b, 0 -2px 0 #917c9b, 1px 1px #917c9b, -1px -1px 0 #917c9b, 1px -1px 0 #917c9b, -1px 1px 0 #917c9b;
- z-index: 5;
- }
- #MainPic {
- position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
- width: 300px;
- height: 470px;
- border: 3px solid pink;
- z-index: 2;
- }
- #OOCBox {
- position: fixed; left: -800px; right: 0px; top: 0px; bottom: -290px; margin: auto;
- width: 380px;
- height: 240px;
- padding: 10px;
- border: 3px solid pink;
- background-color: #917c9b;
- background-image: url("https://i.imgur.com/oJUsgm3.png");
- z-index: 5;
- overflow: auto;
- }
- #Tab {
- position: fixed; left: -800px; right: 0px; top: -290px; bottom: 0px; margin: auto;
- width: 380px;
- height: 240px;
- padding: 10px;
- border: 3px solid pink;
- background-color: #917c9b;
- background-image: url("https://i.imgur.com/oJUsgm3.png");
- z-index: 5;
- display: none;
- overflow: auto;
- }
- #one #tab {
- display: block;
- }
- #one:target #tab, #two:target #tab, #three:target #tab, #four:target #tab, #five:target #tab, #six:target #tab {
- display: block;
- z-index: 11;
- }
- #LeftNav {
- position: fixed; left: -350px; right: 0px; top: 0px; bottom: 0px; margin: auto;
- width: 20px;
- height: 300px;
- z-index: 5;
- }
- #RightNav {
- position: fixed; left: 0px; right: -350px; top: 0px; bottom: 0px; margin: auto;
- width: 20px;
- height: 300px;
- z-index: 5;
- }
- .NaviTab{
- display: inline-block;
- border: 3px solid pink;
- background-color: #917c9b;
- background-image: url("https://i.imgur.com/oJUsgm3.png");
- width: 14px;
- height: 80px;
- z-index: 5;
- margin: 10 0 10 0;
- -webkit-transition: 0.5s linear;
- -moz-transition: 0.5s linear;
- -o-transition: 0.5s linear;
- transition: 0.5s linear;
- }
- .NaviTab:hover {
- background-color: #a0caf0;
- }
- .frienditempic {
- border: 7px solid pink;
- width: 75px;
- height: 75px;
- margin: 5px;
- padding: 0;
- border-radius: 50%;
- -webkit-transition: 0.5s linear;
- -moz-transition: 0.5s linear;
- -o-transition: 0.5s linear;
- transition: 0.5s linear;
- }
- .frienditempic:hover {
- border: 7px solid #a0caf0;
- border-radius: 0;
- }
- #MarqueeBox{
- position: fixed; left: 0px; right: -800px; top: 0px; bottom: 0px; margin: auto;
- width: 380px;
- height: 530px;
- padding: 10px;
- border: 3px solid pink;
- background-color: #917c9b;
- background-image: url("https://i.imgur.com/oJUsgm3.png");
- z-index: 5;
- }
- .Marquee {
- height: 482px;
- width: 400px;
- margin: 0 auto;
- position: relative;
- overflow: hidden;
- }
- .MoveIt {
- width: 400px;
- height: 10000px;
- position: absolute;
- overflow-y:hidden;
- top: 0;
- left: 0;
- -moz-animation: MoveIt 25s linear infinite;
- -webkit-animation: MoveIt 25s linear infinite;
- animation: MoveIt 25s linear infinite;
- }
- .MoveIt img {
- display:inline-block;
- vertical-align:middle;
- height: 230px;
- width: auto;
- border: 3px solid pink;
- margin: 10 20 10 20;
- }
- .MoveIt:hover {
- -moz-animation-play-state: paused;
- -webkit-animation-play-state: paused;
- animation-play-state: paused;
- }
- @keyframes MoveIt {
- 0% {
- -moz-transform: translateY(515px);
- -webkit-transform: translateY(515px);
- transform: translateY(515px);
- }
- 100% {
- -moz-transform: translateY(-1280px);
- -webkit-transform: translateY(-1280px);
- transform: translateY(-1280px);
- }
- }
- /* Credit for the original CSS Marquee solution that this is based on to https://stackoverflow.com/questions/38604929/how-to-create-marquee-infinite-loop-of-logos-slider-with-css-only */
- h1, h2, h3 {padding: 0px; margin: 0 0 8 0; text-align: center; color: pink; font-family: "Abril Fatface"; border-bottom: dashed pink 3px; text-shadow: 2px 0 0 white, -2px 0 0 white, 0 2px 0 white, 0 -2px 0 white, 1px 1px white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
- }
- a {color: #a0caf0; font-family: "Abril Fatface"; font-size: 16px; text-decoration:none;
- -webkit-transition: 0.5s linear;
- -moz-transition: 0.5s linear;
- -o-transition: 0.5s linear;
- transition: 0.5s linear;}
- a:visited {color: #a0caf0;}
- a:hover {color: pink;}
- a.credit:link {color:#f0f0f0; font-family: "Audiowide"; font-size: 16px;}
- a.credit:visited {color:#f0f0f0;}
- a.credit:hover {color:#6f52be;}
- a.credit {text-decoration:none;}
- b {color: pink;}
- ::-webkit-scrollbar {
- width: 8px;
- height: 1px;
- }
- ::-webkit-scrollbar-track {
- border-radius: 5px;
- }
- ::-webkit-scrollbar-thumb {
- background: pink;
- }
- </style>
- <body>
- <div id="CenterBG"></div>
- <div id="LeftBG"></div>
- <div id="RightBG"></div>
- <div id="Title">"The cold never bothered me anyway"</div>
- <img id="Mainpic" src ="http://i.picpar.com/X5Wd.jpg"alt="Main Picture"></div>
- <div id="MarqueeBox">
- <h1>Gallery</h1>
- <div class="Marquee">
- <div class="MoveIt">
- <center>
- <img src="http://i.picpar.com/Y5Wd.jpg" alt="Gallery Picture"/><br>
- <img src="http://i.picpar.com/Z5Wd.jpg" alt="Gallery Picture"/><br>
- <img src="http://i.picpar.com/a6Wd.jpeg" alt="Gallery Picture"/><br>
- <img src="http://i.picpar.com/b6Wd.jpg" alt="Gallery Picture"/><br>
- <img src="http://i.picpar.com/c6Wd.jpg" alt="Gallery Picture"/><br>
- </center>
- </div>
- </div>
- <div id="one">
- <div id="tab">
- <h1>Statistics</h1>
- <b>Name:</b><span style=float:right>Wynter Frost</span><br>
- <b>Nickname:</b><span style=float:right>Snow Princess</span><br>
- <b>Age:</b><span style=float:right>18</span><br>
- <b>World:</b><span style=float:right>Descendants</span><br>
- <b>Parents:</b><span style=float:right>Elsa and Jack Frost</span><br>
- <b>Status:</b><span style=float:right> Single</span><br>
- <b>Likes:</b><span style=float:right>Snow, Sweets, Ben (her best friend), VK's, Her Powers, and her parents</span><br>
- <b>Dislikes:</b><span style=float:right>Liars, Audrey, Chad, Mean people</span><br>
- </div></div>
- <div id="two">
- <div id="tab">
- <h1>Personality</h1>
- You'll just have to see now, won't you?</a>
- </div></div>
- <div id="three">
- <div id="tab">
- <h1>History</h1>
- Very very long story.
- </div></div>
- <div id="four">
- <div id="tab">
- <h1>Abilities</h1>
- <li> Manipulates ice and snow. </li>
- </div></div>
- <div id="five">
- <div id="tab">
- <h1>VK/AK</h1>
- <center>
- <a target="_blank" href="https://roleplay.chat/profile.php?user=Giza+Kamili"><img src="http://i.picpar.com/Laae.jpg" class="frienditempic" title="Giza, Son of Scar, really odd guy but knowledgable." alt="friend/item picture"></a>
- <a target="_blank" href="https://roleplay.chat/profile.php?user=King+Ben"><img src="http://i.picpar.com/7bae.jpg" class="frienditempic" title="Ben, King of Auradon and Son of Beast, her best friend from childhood." alt="friend/item picture"></a>
- <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
- <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
- <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
- <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
- </center>
- </div></div>
- <div id="six">
- <div id="tab">
- <h1>Inventory</h1>
- <center>
- <img src="http://i.picpar.com/W6Wd.jpg" class="frienditempic" title="Staff to control her powers" alt="friend/item picture">
- <img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
- <img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
- <img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
- <img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
- <img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
- </center>
- </div></div>
- <div id="OOCBox">
- <h1>Out of Character</h1>
- <li>Dont force me things I dont like.</li>
- <li>Dont be afraid to say hello.</li>
- <li>Ic =/= OOC</li>
- <li>Happily Married IRL.</li>
- <li>Story before smut!!! </li>
- <li>This character is reserved for the Descendants rp. No other rp. </li>
- <li> Face claim: Alexis Bledel </li>
- </div>
- <div id="LeftNav">
- <a href="#one"><div class="NaviTab"></div></a>
- <a href="#two"><div class="NaviTab"></div></a>
- <a href="#three"><div class="NaviTab"></div></a></div>
- <div id="RightNav">
- <a href="#four"><div class="NaviTab"></div></a>
- <a href="#five"><div class="NaviTab"></div></a>
- <a href="#six"><div class="NaviTab"></div></a></div>
- <div id="credit"><a class="credit" href="https://roleplay.chat/profile.php?user=Spaceman+Codes">Spaceman</a></div>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement