Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <!--quote font-->
- <link href="https://fonts.cdnfonts.com/css/winterraya" rel="stylesheet">
- <!--subtitle font-->
- <link href="https://fonts.cdnfonts.com/css/gollatgher" rel="stylesheet">
- <style>
- /*Scrollbar*/
- ::-webkit-scrollbar {width: 0px;}
- ::-webkit-scrollbar-thumb {background: #fff;}
- ::-webkit-scrollbar-thumb:hover {background: #fff;}
- button {
- width:150px;
- height:90px;
- margin-top:0px;
- overflow: hidden;
- border: 0px solid #fff;
- font-weight: bold;
- font-size: 20px;
- color:#fff
- }
- /*BOX EFFECTS*/
- .zoom{
- transition: all 0.3s ease 0s;
- }
- .zoom:hover {
- transform: translateY(-7px);
- }
- .zoom:active {
- transform: translateY(-1px);
- }
- /*AESTHETIC IMAGES EFFECTS*/
- .aesimg:hover {
- outline: none;
- filter:grayscale(100%);
- transition: all 0.5s ease 0s;
- }
- /*OTHER IMAGES EFFECTS*/
- .otrimg:hover {
- outline: none;
- filter:grayscale(100%);
- transition: all 0.3s ease 0s;
- transform: translateY(-7px);
- }
- .otrimg:active {
- transform: translateY(-1px);
- }
- </style>
- <div style="background:#dcdcdc;padding:30px;border:4px #800000 solid;width:850px;height:710px;margin:auto;text-align:justify;overflow:hidden;border-radius:20px">
- <!-- QUOTE BOX -->
- <div class="zoom">
- <div style="background:#800000;text-align:justify;border-radius:20px;color:#fff;font-family:'winterraya';font-size:55px;width:850px;height:80px;border-radius:20px;margin-top:-10px; box-shadow: 1px 1px 6px 2px #000">
- <!--quotehere-->
- <center>
- “Love really was another type of magic.”
- </center>
- </div></div>
- <br>
- <!-- BASIC INFO -->
- <div class="zoom">
- <div style="background:#800000;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:250px;height:300px;border-radius:20px;text-align:justify;float:left; box-shadow: 1px 1px 6px 2px #000">
- <br>
- <center>
- <!--FACECLAIM-->
- <div class="otrimg">
- <img src="https://i.pinimg.com/236x/dd/1b/2d/dd1b2de1ce51fea9b640f97ef9ff1fd3.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:10px;margin-bottom:10px;border-radius:100px;box-shadow: 1px 1px 6px 2px #fff">
- </div>
- <b>- YOUR NAME HERE -</b>
- <br>
- <i>"insert short quote"</i>
- </center>
- <p style="margin-top:20px;margin-right:10px;margin-left:20px;font-size:13px">
- <b>nickname(s).</b> insert nickname(s) here<br>
- <b>orientation.</b> insert orientation here<br>
- <b>birthday.</b> insert birthday here<br>
- <b>birthplace.</b> insert birthplace here<br>
- <b>status.</b> insert info here
- <!-- DO NOT REMOVE -->
- <p style="margin-top:-8px">
- <center><a href="https://kaykodes.tumblr.com/" style="color:#fff;font-size:12px"><b><u>kay kodes</u></b></a>
- </center>
- </div></div>
- <!-- ABOUT, PERSONALITY, FIRST IMPRESSIONS -->
- <div class="zoom">
- <div style="background:#800000;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:580px;height:300px;border-radius:20px;text-align:justify;float:right;overflow:auto;box-shadow: 1px 1px 6px 2px #000">
- <!--ABOUT-->
- <div id="one" class="tabcontent">
- <div style="background:#800000;text-align:justify;border-radius:0px;color:#fff;font-family:'gollatgher';font-size:45px;border-radius:20px;margin-left:20px;margin-top:10px">
- About
- <!--BUTTON-->
- <!-- DO NOT CHANGE -->
- <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-left:-100px;float:left;width:50px;height:20px;background-color:#800000">→</button>
- <!-- - -->
- <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px;background-color:#800000">→</button>
- </div>
- <br>
- <div style="background:#800000;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
- <div class="aesimg">
- <img src="https://i.pinimg.com/236x/91/c0/43/91c04314971c772c40beab86e8da9f5d.jpg" style="width:100px;height:100px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:-20px;margin-left:7px;border-radius:100px;float:right;;box-shadow: 1px 1px 6px 2px #ffff"></div>
- <b>house/faction/kingdom.</b> insert placement here<br>
- <b>bloodline.</b> insert bloodline here<br>
- <b>status.</b> insert status here<br>
- <b>graduate/student year.</b> insert year here<br>
- <b>occupation.</b> insert occupation here
- <div style=" border-left: 2px solid #fff; padding-left: 10px">
- <p><b>mother.</b> insert name here<br>
- <b>father.</b> insert name here
- <br>
- <div class="aesimg">
- <img src="https://i.pinimg.com/236x/41/0a/52/410a52589dd9247439690961f825cb36.jpg" style="width:100px;height:100px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:-30px;margin-left:7px;border-radius:100px;float:right;;box-shadow: 1px 1px 6px 2px #ffff"></div>
- <div style=" border-left: 2px solid #fff; padding-left: 10px;margin-left:10px">
- <b>sister.</b> insert name here<br>
- <b>brother.</b> insert name here<br>
- </div>
- </div>
- <br>
- <b>significant other.</b> insert name here
- <br><br><br>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- <div class="aesimg">
- <img src="https://i.pinimg.com/236x/5c/25/03/5c25033b4898caa7f39ec7ee2b663bf3.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;border-radius:100px;float:left;box-shadow: 1px 1px 6px 2px #ffff"></div>
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- <div>
- </div></div>
- </div>
- <!--PERSONALITY-->
- <div id="two" class="tabcontent">
- <div style="background:#800000;text-align:justify;border-radius:0px;color:#fff;font-family:'gollatgher';font-size:45px;border-radius:20px;margin-left:20px;margin-top:10px">
- Personality
- <!--BUTTON-->
- <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px;background-color:#800000">→</button>
- <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px;background-color:#800000">←</button>
- </div>
- <br>
- <div style="background:#800000;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
- Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- <div class="aesimg">
- <img src="https://i.pinimg.com/236x/8a/db/ed/8adbed8dbbbeddb421e5377c8e7b0b98.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;border-radius:100px;float:left;box-shadow: 1px 1px 6px 2px #ffff"></div>
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- </div></div>
- <!--FIRST IMPRESSIONS-->
- <div id="three" class="tabcontent">
- <div style="background:#800000;text-align:justify;border-radius:0px;color:#fff;font-family:'gollatgher';font-size:45px;border-radius:20px;margin-left:20px;margin-top:10px">
- First Impressions
- <!--BUTTON-->
- <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px;background-color:#800000">→</button>
- <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px;background-color:#800000">←</button>
- </div>
- <br>
- <div style="background:#800000;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
- Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- <div class="aesimg">
- <img src="https://i.pinimg.com/236x/ee/70/30/ee70306ae06b2781c2c7371327d5f64e.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;border-radius:100px;float:left;box-shadow: 1px 1px 6px 2px #ffff"></div>
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- </div></div>
- </div>
- </div>
- <!-- AESTHETICS -->
- <div style="text-align:justify;border-radius:0px;color:#000;font-family:'Times New Roman';font-size:15px;width:250px;height:400px;border-radius:20px;text-align:justify;float:left;overflow:hidden">
- <center>
- <!--TOP IMAGE 1-->
- <div class="aesimg">
- <img src="https://i.pinimg.com/236x/ca/cd/ca/cacdca486b4369e6adc76e0ddf2d0a04.jpg" style="width:100px;height:100px;border:3px solid #800000;object-fit:cover;margin-right:15px;border-radius:100px;float:right;margin-top:10px;box-shadow: 1px 1px 5px 2px #fff;">
- </div>
- <!--TOP IMAGE 2-->
- <div class="aesimg">
- <img src="https://i.pinimg.com/236x/78/4a/6a/784a6a5c2d5240ac87c03c9b2f071f8b.jpg" style="width:100px;height:100px;border:3px solid #800000;object-fit:cover;margin-left:15px;border-radius:100px;float:left;margin-top:10px;box-shadow: 1px 1px 5px 2px #fff;">
- </div>
- <br>
- <!--each right aesthetic-->
- <div class="aesimg">
- <img src="https://i.pinimg.com/236x/70/cc/cc/70cccc187bbc0e44b881d2e0ecb672a4.jpg" style="width:100px;height:100px;border:3px solid #800000;object-fit:cover;margin-right:15px;border-radius:100px;float:right;margin-top:8px;box-shadow: 1px 1px 5px 2px #fff;">
- </div>
- <!--each left aesthetic-->
- <div class="aesimg">
- <img src="https://i.pinimg.com/236x/58/20/48/5820488ba0b5859368c37c4851c7496a.jpg" style="width:100px;height:100px;border:3px solid #800000;object-fit:cover;margin-left:15px;border-radius:100px;float:left;margin-top:8px;box-shadow: 1px 1px 5px 2px #fff;">
- </div>
- <br>
- <!--each right aesthetic-->
- <div class="aesimg">
- <img src="https://i.pinimg.com/236x/95/6c/60/956c602b4b0e6b400f1f671439681a37.jpg" style="width:100px;height:100px;border:3px solid #800000;object-fit:cover;margin-right:15px;border-radius:100px;float:right;margin-top:8px;box-shadow: 1px 1px 5px 2px #fff;">
- </div>
- <!--each left aesthetic-->
- <div class="aesimg">
- <img src="https://i.pinimg.com/236x/72/2c/6a/722c6a4836231485d5e89010d761a5f3.jpg" style="width:100px;height:100px;border:3px solid #800000;object-fit:cover;margin-left:15px;border-radius:100px;float:left;margin-top:8px;box-shadow: 1px 1px 5px 2px #fff;">
- </div>
- </center>
- </div>
- <!-- RELATIONS -->
- <div class="zoom">
- <div style="background:#800000;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:300px;height:315px;border-radius:20px;text-align:justify;float:left;margin-top:20px;overflow-x:hidden;margin-left:25px; box-shadow: 1px 1px 6px 2px #000">
- <!-- TOP relation-->
- <div style="padding:5%;border:#d9cbc3 2px solid;width:235px;margin-left:15px;margin-top:15px;border-radius:20px">
- <img src="https://i.pinimg.com/236x/03/08/58/0308589019a6656afd8fd32228b6d43f.jpg" style="width:100px;height:100px;border:solid #fff;border-radius:100%;float:left;margin-right:10px;box-shadow: 1px 1px 6px 2px #ffff;object-fit:cover">
- <p><b>Relation | Name</b></p>
- <p>Lorem ipsum dolor sit amet. In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Lorem ipsum dolor sit amet.
- </div><br>
- <!--each relation-->
- <div style="padding:5%;border:#d9cbc3 2px solid;width:235px;margin-left:15px;border-radius:20px">
- <img src="https://i.pinimg.com/236x/c2/c9/7e/c2c97eac1c439f51efa40634ab3c6185.jpg" style="width:100px;height:100px;border:solid #fff;border-radius:100%;float:left;margin-right:10px;box-shadow: 1px 1px 6px 2px #ffff;object-fit:cover">
- <p><b>Relation | Name</b></p>
- <p>Lorem ipsum dolor sit amet. In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Lorem ipsum dolor sit amet.
- </div><br>
- <!--each relation-->
- <div style="padding:5%;border:#d9cbc3 2px solid;width:235px;margin-left:15px;border-radius:20px">
- <img src="https://i.pinimg.com/236x/61/99/10/6199106001f683431a32a35e73b5cca3.jpg" style="width:100px;height:100px;border:solid #fff;border-radius:100%;float:left;margin-right:10px;box-shadow: 1px 1px 6px 2px #ffff;object-fit:cover">
- <p><b>Relation | Name</b></p>
- <p>Lorem ipsum dolor sit amet. In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Lorem ipsum dolor sit amet.
- </div><br>
- <!--each relation-->
- <div style="padding:5%;border:#d9cbc3 2px solid;width:235px;margin-left:15px;border-radius:20px">
- <img src="https://i.pinimg.com/736x/fb/96/91/fb9691c683b4994906adf0c7c4f2228b.jpg" style="width:100px;height:100px;border:solid #fff;border-radius:100%;float:left;margin-right:10px;box-shadow: 1px 1px 6px 2px #ffff;object-fit:cover">
- <p><b>Relation | Name</b></p>
- <p>Lorem ipsum dolor sit amet. In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Lorem ipsum dolor sit amet.
- </div><br>
- </div></div>
- <!-- PLAYLIST -->
- <div class="zoom">
- <div style="background:#800000;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:250px;height:315px;border-radius:20px;text-align:justify;float:right;margin-top:20px;overflow:hidden;margin-left:25px; box-shadow: 1px 1px 6px 2px #000 ">
- <!--TOP song-->
- <div style="padding:5%;border:#eee 2px solid;width:200px;margin-right:10px;float:left;margin-top:17px;margin-left:10px;border-radius:20px">
- <b>Song Title Here ♫ </b>
- <p><i>"Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi.Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi."</i>
- </div><br>
- <!--each song-->
- <div style="padding:5%;border:#eee 2px solid;width:200px;margin-right:10px;float:left;margin-top:10px;margin-left:10px;border-radius:20px">
- <b>Song Title Here ♫ </b>
- <p><i>"Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi.Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi."</i>
- </div><br>
- </div></div>
- <div>
- <div>
- </div></div></div></div></div> </div>
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
- <script>
- function openCity(evt, cityName) {
- var i, tabcontent, tablinks;
- tabcontent = document.getElementsByClassName("tabcontent");
- for (i = 0; i < tabcontent.length; i++) {
- tabcontent[i].style.display = "none";
- }
- tablinks = document.getElementsByClassName("tablinks");
- for (i = 0; i < tablinks.length; i++) {
- tablinks[i].className = tablinks[i].className.replace(" active", "");
- }
- document.getElementsByClassName("tablinks");
- for (i = 0; i < tablinks.length; i++) {
- tablinks[i].className = tablinks[i].className.replace(" active", "");
- }
- document.getElementById(cityName).style.display = "block";
- evt.currentTarget.className += " active";
- }
- // Get the element with id="defaultOpen" and click on it
- document.getElementById("defaultOpen").click();
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement