Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <center>
- <!--quote font-->
- <link href="https://fonts.cdnfonts.com/css/dating-month" rel="stylesheet">
- <!-- name font-->
- <link href="https://fonts.cdnfonts.com/css/thorco" rel="stylesheet">
- <link href="https://fonts.cdnfonts.com/css/auckland-signature" rel="stylesheet">
- <style>
- /*Scrollbar*/
- ::-webkit-scrollbar {width: 0px;}
- ::-webkit-scrollbar-thumb {background:; width:0px}
- ::-webkit-scrollbar-thumb:hover {background: ; width:0px}
- /*IMAGE EFFECTS*/
- .zoom{
- transition: all 1.5s;
- filter:brightness(85%)
- }
- .zoom:hover {
- transform: translateY(-7px);
- transform: scale(1.02);
- outline: none;
- filter:brightness(120%);
- transition: all 0.5s ease 0s;
- }
- .zoom:active {
- transform: translateY(-1px);
- }
- .trait{
- background:#735e41;
- font-family: 'Dosis', sans-serif;
- font-size:15px;
- text-align:center;
- text-transform:lowercase;
- border-radius:20px;
- }
- .img{
- transition: all 0.3s ease 0s;
- filter:brightness(85%)
- }
- .img:hover {
- outline: none;
- filter:brightness(120%);
- transition: all 0.5s ease 0s;
- transform: translateY(-7px);
- transform:rotate(0deg);
- }
- .img:active {
- transform: translateY(-1px);
- transition: all 0.7s ease 0s;
- </style>
- <!-- BASIC INFO -->
- <!--main box-->
- <div style="background:#836953;text-align:justify;border-radius:0px;color:#696969;font-family:'oktah neue';font-size:15px;width:800px;height:550px;text-align:justify;box-shadow: 1px 1px 6px 2px #696969">
- <!--top border column-->
- <div style="background:#836953;text-align:justify;border-radius:0px;color:#696969;font-family:'oktah neue';font-size:15px;width:799px;height:80px;text-align:justify;">
- <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dating month';font-size:12px;width:90%;text-align:justify;margin-right:10px;margin-left:100px;border:0px #000 solid;margin-top:30px"><br><br>
- <i style="font-size:35px">"i live in two worlds- one is a world of books"</i></div>
- </div>
- <!--left border column-->
- <div style="background:#836953;text-align:justify;border-radius:0px;color:#696969;font-family:'oktah neue';font-size:15px;width:80px;height:547px;text-align:justify;float:left;margin-top:-80px;position:absolute">
- <center>
- <div class="zoom">
- <img src="https://i.pinimg.com/474x/71/d8/f2/71d8f246c40b1d6501ed0d6fd88d8b61.jpg" style="width:70px;height:70px;object-fit:cover;margin-top:87px;outline:1px solid #fff; outline-offset:-4px;box-shadow: 0px 0px 8px 0px #fff" /></div>
- <div class="zoom">
- <img src="https://i.pinimg.com/474x/e7/ec/9b/e7ec9b1909ae280b6d2a14a35a1f8639.jpg" style="width:70px;height:70px;object-fit:cover;margin-top:6px;outline:1px solid #fff; outline-offset:-4px;box-shadow: 0px 0px 8px 0px #fff" /></div>
- <div class="zoom">
- <img src="https://i.pinimg.com/474x/d1/91/95/d19195560c9706ca71a9d136ded426d9.jpg" style="width:70px;height:70px;object-fit:cover;margin-top:7px;outline:1px solid #fff; outline-offset:-4px;box-shadow: 0px 0px 8px 0px #fff" /></div>
- <div class="zoom">
- <img src="https://i.pinimg.com/474x/e2/45/4e/e2454e6df1e69dc1c0088d655d269b15.jpg" style="width:70px;height:70px;object-fit:cover;margin-top:7px;outline:1px solid #fff; outline-offset:-4px;box-shadow: 0px 0px 8px 0px #fff" /></div>
- <div class="zoom">
- <img src="https://i.pinimg.com/474x/7e/f8/21/7ef821d5c30ce5cc9724cab64a26eb34.jpg" style="width:70px;height:70px;object-fit:cover;margin-top:7px;outline:1px solid #fff; outline-offset:-4px;box-shadow: 0px 0px 8px 0px #fff" /></div>
- <div class="zoom">
- <img src="https://i.pinimg.com/474x/8f/da/ff/8fdaff4d1865a1d298e78a8dd7dea100.jpg" style="width:70px;height:70px;object-fit:cover;margin-top:7px;outline:1px solid #fff; outline-offset:-4px;box-shadow: 0px 0px 8px 0px #fff" /></div>
- </center>
- </div>
- <!--pfp image area-->
- <div style="background:#fff;text-align:justify;border-radius:0px;color:#696969;font-family:'oktah neue';font-size:15px;width:80px;height:80px;text-align:justify;float:left;margin-top:-81px;position:absolute">
- <div class="zoom">
- <img src="https://i.pinimg.com/originals/24/5a/d1/245ad1868c412836abe3d58aa399f3d6.gif" style="width:80px;height:80px;outline:1px solid #fff; outline-offset:-4px;box-shadow: 0px 0px 8px 0px #fffobject-fit:cover;margin-top:px" /></div>
- </div>
- <!--right column-->
- <div style="background:#917b67;text-align:justify;border-radius:0px;color:#fff;font-family:'oktah neue';font-size:12px;width:250px;height:350px;text-align:justify;float:right;margin-left:2px;overflow:auto">
- <!--each relation-->
- <div style="padding:5%;widt:50px;margin-right:10px;float:left;margin-top:10px">
- <div class="img">
- <img src="https://i.pinimg.com/originals/42/09/2a/42092a8afe02ea600b96ff7cb9a12670.gif" style="width:70px;height:70px;border:solid #fff;float:left;margin-right:10px;object-fit:cover;margin-top:10px;border-bottom: 15px solid #fff;border-top:#fff 5px solid;border-left:#fff 5px solid;border-right:#fff 5px solid;">
- <p><b>Relation | Name</b></p>
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.
- </div></div><br>
- <hr style="width:90%;border:1px dashed #fff">
- <!--each relation-->
- <div style="padding:5%;widt:50px;margin-right:10px;float:left;margin-top:10px">
- <div class="img">
- <img src="https://media4.giphy.com/media/3ofT5M1iDloEwheMeY/200w.gif" style="width:70px;height:70px;border:solid #fff;float:left;margin-right:10px;object-fit:cover;margin-top:10px;border-bottom: 15px solid #fff;border-top:#fff 5px solid;border-left:#fff 5px solid;border-right:#fff 5px solid;">
- <p><b>Relation | Name</b></p>
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.
- </div></div><br>
- <hr style="width:90%;border:1px dashed #fff">
- <!--each relation-->
- <div style="padding:5%;widt:50px;margin-right:10px;float:left;margin-top:10px">
- <div class="img">
- <img src="https://media.tenor.com/jNzmwPL5ZKQAAAAC/lane-kim-gilmore-girls.gif" style="width:70px;height:70px;border:solid #fff;float:left;margin-right:10px;object-fit:cover;margin-top:10px;border-bottom: 15px solid #fff;border-top:#fff 5px solid;border-left:#fff 5px solid;border-right:#fff 5px solid;">
- <p><b>Relation | Name</b></p>
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.
- </div></div><br>
- <hr style="width:90%;border:1px dashed #fff">
- <!--each relation-->
- <div style="padding:5%;widt:50px;margin-right:10px;float:left;margin-top:10px">
- <div class="img">
- <img src="https://64.media.tumblr.com/59384b6cd0a1969ed78382cac7993478/tumblr_o2e4mm2w4E1qd4rf5o1_400.gif" style="width:70px;height:70px;border:solid #fff;float:left;margin-right:10px;object-fit:cover;margin-top:10px;border-bottom: 15px solid #fff;border-top:#fff 5px solid;border-left:#fff 5px solid;border-right:#fff 5px solid;">
- <p><b>Relation | Name</b></p>
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.
- </div></div><br>
- </div>
- <!--full name box-->
- <div style="background:#917b67;text-align:justify;border-radius:0px;color:#696969;font-family:'oktah neue';font-size:15px;width:250px;height:115px;text-align:justify;float:right;margin-top:352px;margin-right:-252px">
- <center><div style="text-align:justify;border-radius:0px;color:#fff;font-family:'thorco';font-size:12px;width:90%;text-align:center;margin-right:10px;margin-left:-210px;border:0px #000 solid;margin-top:30px;overflow:hidden">
- <h style="font-size:40px;position:absolute">RORY GILMORE</h></div></center>
- <center><div style="text-align:justify;border-radius:0px;color:#000;font-family:'auckland signature';font-size:12px;width:90%;text-align:center;margin-right:10px;margin-left:-210px;border:0px #000 solid;margin-top:5px;overflow:hidden">
- <i style="font-size:40px;position:absolute">rory gilmore</i></div></center>
- </div>
- <!--MIDDLE COLUMN-->
- <div style="background:#917b67;text-align:justify;border-radius:0px;color:#696969;font-family:'oktah neue';font-size:15px;width:250px;height:467px;text-align:justify;float:right">
- <!--textbox-->
- <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:230px;text-align:justify;margin-right:10px;margin-left:10px;border:px #000 solid;margin-top:10px;height:450px;overflow:auto">
- <p>
- <div class="img">
- <img src="https://i.pinimg.com/originals/d6/cc/0e/d6cc0ec286a9619731badd905401ba50.gif" style="width:90px;height:90px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-right:15px;float:left;margin-bottom:10px;border-bottom: 20px solid #fff;border-top:#fff 6px solid;border-left:#fff 6px solid;border-right:#fff 6px solid;transform:rotate(-4deg);margin-left:5px"></div>
- Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et
- voluptatum perspiciatis id alias nihil vel cumque autem? <p>Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
- <p>
- <div class="img">
- <img src="https://i.pinimg.com/originals/42/74/ad/4274ad6772842915e8b4f012f25b9e2f.gif" style="width:90px;height:90px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-left:15px;float:right;margin-bottom:10px;border-bottom: 20px solid #fff;border-top:#fff 6px solid;border-left:#fff 6px solid;border-right:#fff 6px solid;transform:rotate(3deg);margin-right:10px"></div>
- <p>Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
- </div></div>
- <!--left column-->
- <div style="background:#917b67;text-align:justify;border-radius:0px;color:#696969;font-family:'oktah neue';font-size:15px;width:250px;height:250px;text-align:justify;float:right;margin-right:2px">
- <div style="background:#917b67;text-align:justify;border-radius:0px;color:#696969;font-family:'oktah neue';font-size:15px;width:250px;height:254px;text-align:justify;float:right">
- <!--textbox-->
- <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:200px;text-align:justify;margin-right:10px;margin-left:40px;border:px #000 solid;margin-top:10px;height:240px;overflow:auto">
- <p>
- <div class="img">
- <img src="https://i.pinimg.com/564x/c9/7e/fc/c97efc6b5caae44c7df06a5006b00dd4.jpg" style="width:80px;height:80px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-right:15px;float:left;margin-bottom:10px;border-bottom: 20px solid #fff;border-top:#fff 4px solid;border-left:#fff 4px solid;border-right:#fff 4px solid;transform:rotate(-4deg);margin-left:5px"></div>
- <div class="img">
- <img src="https://i.pinimg.com/564x/7d/0d/56/7d0d56c5961d35715f7cef87b2f15b0c.jpg" style="width:80px;height:80px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-right:15px;float:left;margin-bottom:10px;border-bottom: 20px solid #fff;border-top:#fff 4px solid;border-left:#fff 4px solid;border-right:#fff 4px solid;transform:rotate(8deg);margin-left:5px;margin-top:-100px;margin-left:90px"></div>
- <div class="img">
- <img src="https://i.pinimg.com/564x/52/f6/07/52f607afa0f345b8b7456c513dfa1427.jpg" style="width:90px;height:60px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-left:15px;float:right;margin-bottom:10px;border-bottom: 15px solid #fff;border-top:#fff 4px solid;border-left:#fff 4px solid;border-right:#fff 4px solid;transform:rotate(3deg);margin-right:80px;margin-top:-50px"></div>
- <br><br><br><br><br><br><br><br><br><br><br>
- <b style="font-size:15px">FULL NAME.</b>
- <br>insert full name here<p>
- <b style="font-size:15px">NICKNAME(S).</b>
- <br>insert nickname(s) here<p>
- <b style="font-size:15px">ORIENTATION.</b>
- <br>insert orientation here<p>
- <b style="font-size:15px">BIRTHDATE.</b>
- <br>insert birthday here<p>
- <b style="font-size:15px">BIRTHPLACE.</b>
- <br>insert birthplace here<p>
- <b style="font-size:15px">STATUS.</b>
- <br>insert info here
- <br>
- <hr style="border: 1px #fff dashed">
- <br>
- <b style="font-size:15px">FAMILY TREE</b>
- <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 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>
- <hr style="border: 1px #fff dashed">
- <br>
- <b style="font-size:15px">SORTED PLACE.</b>
- <br>insert here<p>
- <b style="font-size:15px">BLOODLINE.</b>
- <br>insert bloodline here<p>
- <b style="font-size:15px">STATUS.</b>
- <br>insert status here<p>
- <b style="font-size:15px">STUDENT YEAR.</b>
- <br>insert year here<p>
- <b style="font-size:15px">OCCUPATION.</b>
- <br>insert occupation here
- </div></div>
- </div>
- <!--statistics box-->
- <div style="background:#917b67;text-align:justify;border-radius:0px;color:#696969;font-family:'oktah neue';font-size:15px;width:250px;height:212px;text-align:justify;float:right;margin-top:5px;margin-right:2px">
- <br>
- <!-- each statistic-->
- <div style="text-align:justify;border-radius:0px;font-family:'Times New Roman';font-size:12px;width:90%;text-align:justify;margin-right:10px;margin-left:45px;border:0px #000 solid;margin-top:0px;overflow:hidden">
- <i style="font-size:12px;color:#fff;letter-spacing:2px">trait → 56%</i></div>
- <div style="background:#b0a290;width:200px;margin:7px 0;border-radius:20px;margin-left:40px;height:10px">
- <div class="trait" style="width:56%;height:10px">
- </div>
- </div>
- <!-- each statistic-->
- <div style="text-align:justify;border-radius:0px;font-family:'Times New Roman';font-size:12px;width:90%;text-align:justify;margin-right:10px;margin-left:45px;border:0px #000 solid;margin-top:0px;overflow:hidden">
- <i style="font-size:12px;color:#fff;letter-spacing:2px">trait → 75%</i></div>
- <div style="background:#b0a290;width:200px;margin:7px 0;border-radius:20px;margin-left:40px;height:10px">
- <div class="trait" style="width:75%;height:10px">
- </div>
- </div>
- <!-- each statistic-->
- <div style="text-align:justify;border-radius:0px;font-family:'Times New Roman';font-size:12px;width:90%;text-align:justify;margin-right:10px;margin-left:45px;border:0px #000 solid;margin-top:0px;overflow:hidden">
- <i style="font-size:12px;color:#fff;letter-spacing:2px">trait → 92%</i></div>
- <div style="background:#b0a290;width:200px;margin:7px 0;border-radius:20px;margin-left:40px;height:10px">
- <div class="trait" style="width:92%;height:10px">
- </div>
- </div>
- <!-- each statistic-->
- <div style="text-align:justify;border-radius:0px;font-family:'Times New Roman';font-size:12px;width:90%;text-align:justify;margin-right:10px;margin-left:45px;border:0px #000 solid;margin-top:0px;overflow:hidden">
- <i style="font-size:12px;color:#fff;letter-spacing:2px">trait → 25%</i></div>
- <div style="background:#b0a290;width:200px;margin:7px 0;border-radius:20px;margin-left:40px;height:10px">
- <div class="trait" style="width:25%;height:10px">
- </div>
- </div>
- <!-- each statistic-->
- <div style="text-align:justify;border-radius:0px;font-family:'Times New Roman';font-size:12px;width:90%;text-align:justify;margin-right:10px;margin-left:45px;border:0px #000 solid;margin-top:0px;overflow:hidden">
- <i style="font-size:12px;color:#fff;letter-spacing:2px">trait → 67%</i></div>
- <div style="background:#b0a290;width:200px;margin:7px 0;border-radius:20px;margin-left:40px;height:10px">
- <div class="trait" style="width:67%;height:10px">
- </div>
- </div>
- </div></div>
- <p>
- <center><a href="https://kaykodes.tumblr.com/" style="color:#000;font-size:14px"><b><u>kay kodes</u></b></center>
- <div style="display:none">
- <iframe src="https://www.youtube.com/embed/AmTMNntVmbQ?autoplay=1&loop=1&playlist=AmTMNntVmbQ" frameborder="0" allow="autoplay; clipboard-write; "></iframe>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement