API tools faq
paste
Advertisement
aliyahscreation

Phoenix

aliyahscreation
Jul 25th, 2023
1,867
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 43.23 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2.  
  3.   @import url('https://fonts.cdnfonts.com/css/midnight-4');
  4.   @import url('https://fonts.cdnfonts.com/css/ramus-sans');
  5.   @import url('https://fonts.cdnfonts.com/css/kegina');
  6.  
  7.   .backgroundP {
  8.     width:calc(100% - 10px);
  9.     padding:5px;
  10.     margin:auto;
  11.     background-color:#701515;
  12.   }
  13.  
  14.   .headerP {
  15.     width:100%;
  16.     padding:10px 0;
  17.     margin:auto;
  18.     background-color:rgba(255,255,255,0.4);
  19.   }
  20.  
  21.   .titleP {
  22.     width:80%;
  23.     margin:auto;
  24.     background:linear-gradient(to right, #BB0B0B, #FF7F00, #BB0B0B);
  25.     -webkit-background-clip:text;
  26.     color:transparent;
  27.     font:70px Caesar Dressing;
  28.     text-align:center;
  29.   }
  30.  
  31.   .quoteP {
  32.     width:calc(100% - 30px);
  33.     padding:0 15px 8px;
  34.     margin:10px auto;
  35.     animation:5s bgquoteP ease-in-out infinite alternate;
  36.     border-top:1px solid rgba(255,255,255,0.5);
  37.     border-bottom:1px solid rgba(255,255,255,0.5);
  38.     color:#fff;
  39.     text-align:center;
  40.     font:30px Midnight;
  41.   }
  42.  
  43.   @keyframes bgquoteP {
  44.     0% {
  45.       background-color:#BB0B0B;
  46.     }
  47.     100% {
  48.       background-color:#FF7F00;
  49.     }
  50.   }
  51.  
  52.   .navP {
  53.     width:100%;
  54.     margin:15px auto;
  55.     display:flex;
  56.     justify-content:center;
  57.   }
  58.  
  59.   .buttonP {
  60.     width:50px;
  61.     height:50px;
  62.     margin:0 10px;
  63.     clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  64.   }
  65.  
  66.   .buttonP:hover {
  67.     animation:0.7s rotation ease-out;
  68.   }
  69.  
  70.   @keyframes rotation {
  71.       from {
  72.           transform: rotate(0deg);
  73.         }
  74.       to {
  75.           transform: rotate(360deg);
  76.         }
  77.   }
  78.  
  79.   .buttonbisP {
  80.     width:10px;
  81.     height:10px;
  82.     margin:20px 0;
  83.     clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  84.     background-color:#FF7F00;
  85.   }
  86.  
  87.   .contentP {
  88.     width:95%;
  89.     height:700px;
  90.     margin:auto;
  91.     margin-bottom:10px;
  92.     overflow:hidden;
  93.     background-color:rgba(255,255,255,0.8);
  94.   }
  95.  
  96.   .partP {
  97.     width:calc(100% - 20px);
  98.     height:680px;
  99.     padding:10px;
  100.     margin:auto;
  101.     overflow:auto;
  102.     font:18px Kegina;
  103.   }
  104.  
  105.   .partP::-webkit-scrollbar {
  106.      width:5px;
  107.      height:5px;
  108.      box-shadow:inset 0 0 3px #000;
  109.     }
  110.  
  111.   .partP::-webkit-scrollbar-thumb {
  112.      background:#FF7F00;
  113.   }
  114.  
  115.   .idtopP {
  116.     display:flex;
  117.   }
  118.  
  119.   .idimgP {
  120.     width:calc(24% - 6px);
  121.     margin:0 10px;
  122.     border:3px solid #BB0B0B;
  123.     outline:1px solid #BB0B0B;
  124.     outline-offset:-10px;
  125.   }
  126.  
  127.   .infoboxP {
  128.     width:38%;
  129.   }
  130.  
  131.   .idlabelaP {
  132.     border-bottom:1px solid rgba(0,0,0,0.1);
  133.     font-family:Ramus Sans;
  134.     color:#E73E01;
  135.   }
  136.  
  137.   .idansaP {
  138.    
  139.   }
  140.  
  141.   .idlabelbP {
  142.     border-bottom:1px solid rgba(0,0,0,0.1);
  143.     text-align:right;
  144.     font-family:Ramus Sans;
  145.     color:#E73E01;
  146.   }
  147.  
  148.   .idansbP {
  149.     text-align:right;
  150.   }
  151.  
  152.   .quotebisP {
  153.     width:90%;
  154.     margin:10px auto;
  155.     text-align:center;
  156.     font:22px Midnight;
  157.     color:#701515;
  158.   }
  159.  
  160.   .idimprP {
  161.     width:calc(95% - 104px);
  162.     height:158px;
  163.     margin:auto;
  164.     text-align:justify;
  165.     overflow:auto;
  166.   }
  167.  
  168.   .idimprP::-webkit-scrollbar {
  169.      width:3px;
  170.      height:3px;
  171.      box-shadow:inset 0 0 7px #000;
  172.     }
  173.  
  174.   .idimprP::-webkit-scrollbar-thumb {
  175.      background:#FF7F00;
  176.   }
  177.  
  178.   .idimprP span {
  179.     font:30px Ramus Sans;
  180.   }
  181.  
  182.   .aestheticP {
  183.     width:104px;
  184.     height:158px;
  185.     padding:10px;
  186.     margin:auto;
  187.   }
  188.  
  189.   .aesbuttonaP {
  190.     width:50px;
  191.     height:50px;
  192.     margin-top:-23px;
  193.     margin-left:27px;
  194.     clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  195.   }
  196.  
  197.   .aesbuttonbP {
  198.     width:50px;
  199.     height:50px;
  200.     margin-top:-23px;
  201.     clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  202.   }
  203.  
  204.   .bandP {
  205.     width:100%;
  206.     height:80px;
  207.     margin-top:45px;
  208.     background-color:#F2981F;
  209.   }
  210.  
  211.   .idimglineP {
  212.     margin:auto;
  213.     margin-top:-118px;
  214.     margin-bottom:15px;
  215.     display:flex;
  216.     justify-content:center;
  217.   }
  218.  
  219.   .idimgbisP {
  220.     width:calc(20% - 6px);
  221.     height:150px;
  222.     margin:0 10px;
  223.     border:3px solid #BB0B0B;
  224.     outline:1px solid #BB0B0B;
  225.     outline-offset:-10px;
  226.   }
  227.  
  228.   .subtitleP {
  229.     font:40px Caesar Dressing;
  230.   }
  231.  
  232.   .linetraitP {
  233.     width:95%;
  234.     margin:auto;
  235.     display:flex;
  236.     text-align:center;
  237.   }
  238.  
  239.   .traitP {
  240.     flex:33%;
  241.     padding:10px;
  242.       margin:2px;
  243.       background:rgba(112,21,21,0.5);
  244.       transition:all 1s ease-in-out;
  245.     font:18px Ramus Sans;
  246.       color:#000;
  247.     text-transform:uppercase;
  248.   }
  249.  
  250.   .traitP:hover {
  251.       background:rgba(112,21,21,0.9);
  252.       color:rgba(0,0,0,0)
  253.   }
  254.  
  255.   .traitP > p {
  256.       transition:all 0.5s ease-in-out;
  257.       opacity:0;
  258.       font-size:20px;
  259.       margin-top:-25px;
  260.       margin-bottom:-5px;
  261.     cursor:pointer
  262.   }
  263.  
  264.   .traitP:hover > p {
  265.       opacity:1;
  266.       color:#FFF;
  267.   }
  268.  
  269.   .textP {
  270.     text-align:justify;
  271.   }
  272.  
  273.   .textP > b {
  274.     color:#BB0B0B;
  275.   }
  276.  
  277.   .tasteP {
  278.     width:40%;
  279.     margin:0 10px;
  280.     border:2px groove #F2981F;
  281.   }
  282.  
  283.   .tastelegP {
  284.     width:auto;
  285.     margin:auto;
  286.     font:30px Midnight;
  287.     color:#DB1702;
  288.   }
  289.  
  290.   .tastedesP {
  291.     margin-top:-5px;
  292.     text-align:justify;
  293.   }
  294.  
  295.   .preferenceP {
  296.     margin:auto;
  297.     margin-top:15px;
  298.     display:flex;
  299.   }
  300.  
  301.   .prefleftP {
  302.     width:calc(60% - 10px);
  303.     padding-right:10px;
  304.     text-align:justify;
  305.     border-right:3px solid #F4661B;
  306.   }
  307.  
  308.   .triviaP {
  309.     width:calc(40% - 17px);
  310.     margin:15px 0;
  311.     margin-left:7px;
  312.     padding-left:10px;
  313.     border-left:1px solid #F4661B;
  314.   }
  315.  
  316.   .triviaP li {
  317.     margin-left:-20px;
  318.     list-style-type:circle;
  319.   }
  320.  
  321.   .subtitlebisP {
  322.     font:30px Caesar Dressing;
  323.   }
  324.  
  325.   .hobbieslineP {
  326.     margin:10px;
  327.     display:flex;
  328.     justify-content:center;
  329.   }
  330.  
  331.   .hobbyP {
  332.     width:90px;
  333.     height:90px;
  334.     margin:0 5px;
  335.     box-shadow:2px 2px 3px 0px rgba(244,102,27,0.5);
  336.   }
  337.  
  338.   .hobbyP span {
  339.       width:90px;
  340.     height:90px;
  341.     display:flex;
  342.     align-items:center;
  343.     justify-content:center;
  344.     background:rgba(244,102,27,0.7);
  345.     transition:1s;
  346.     opacity:0;
  347.     text-align:center;
  348.     font:18px calibri;
  349.     color:#fff;
  350.   }
  351.  
  352.   .hobbyP:hover span {
  353.     opacity:1;
  354.   }
  355.  
  356.   .prefshowP {
  357.     margin-top:15px;
  358.     display:flex;
  359.     justify-content:center;
  360.     margin-bottom:15px;
  361.   }
  362.  
  363.   .showP {
  364.     width:30%;
  365.     height:200px;
  366.     margin:auto;
  367.   }
  368.  
  369.   .apimgP {
  370.     width:50%;
  371.     height:auto;
  372.     margin-right:10px;
  373.     display:grid;
  374.     grid-gap:5px;
  375.     grid-template-columns:1fr 1fr 1fr;
  376.     grid-template-rows:1fr 1fr 1fr;
  377.     grid-template-areas:'one one two' 'three four four' 'five five six';
  378.   }
  379.  
  380.   .apimglineP {
  381.     margin:auto;
  382.     margin-top:-108px;
  383.     margin-bottom:15px;
  384.     display:flex;
  385.     justify-content:center;
  386.   }
  387.  
  388.   .apimgbisP {
  389.     width:130px;
  390.     height:130px;
  391.     margin:0 10px;
  392.     border:3px solid #BB0B0B;
  393.     outline:1px solid #BB0B0B;
  394.     outline-offset:-10px;
  395.   }
  396.  
  397.   .apimgbisP span {
  398.       width:130px;
  399.     height:130px;
  400.     display:flex;
  401.     align-items:center;
  402.     justify-content:center;
  403.     background:rgba(244,102,27,0.5);
  404.     transition:1s;
  405.     opacity:0;
  406.     text-align:center;
  407.     color:#fff;
  408.   }
  409.  
  410.   .apimgbisP:hover span {
  411.     opacity:1;
  412.   }
  413.  
  414.   .dressingP {
  415.     margin-top:15px;
  416.     display:flex;
  417.     justify-content:space-between;
  418.   }
  419.  
  420.   .dressingimgP {
  421.     width:calc(33% - 15px);
  422.     height:300px;
  423.     border:3px solid #BB0B0B;
  424.     outline:1px solid #BB0B0B;
  425.     outline-offset:-10px;
  426.     transition:1s;
  427.   }
  428.  
  429.   .dressingimgP:hover {
  430.     filter:brightness(150%);
  431.   }
  432.  
  433.   .powersP {
  434.     width:calc(50% - 15px);
  435.     margin-left:15px;
  436.     text-align:justify;
  437.   }
  438.  
  439.   .powersP span {
  440.     font:30px Ramus Sans;
  441.   }
  442.  
  443.   .genP {
  444.     margin-top:10px;
  445.   }
  446.  
  447.   .genP > blockquote {
  448.     padding-left:5px;
  449.     margin:0px;
  450.     border-left:6px solid #BB0B0B;
  451.   }
  452.  
  453.   .genP > blockquote > blockquote {
  454.     padding-left:5px;
  455.     margin:5px;
  456.     border-left:4px solid #E73E01;
  457.   }
  458.  
  459.   .genP > blockquote > blockquote > blockquote {
  460.     padding-left:5px;
  461.     margin:5px;
  462.     border-left:2px solid #F2981F;
  463.   }
  464.  
  465.   .genP span {
  466.     font:20px Ramus Sans;
  467.   }
  468.  
  469.   .rellineP {
  470.     width:100%;
  471.     margin-top:10px;
  472.     display:flex;
  473.     justify-content:space-between;
  474.   }
  475.  
  476.   .relationP {
  477.     width:calc(50% - 5px);
  478.   }
  479.  
  480.   .relationP > summary {
  481.     width:85%;
  482.     padding:5px;
  483.     margin:auto;
  484.     animation:5s bgquoteP ease-in-out infinite alternate;
  485.     border:1px solid #fff;
  486.     text-align:center;
  487.     font:25px Midnight;
  488.     color:#fff;
  489.   }
  490.  
  491.   .relationP > div {
  492.     padding:5px;
  493.     margin-top:10px;
  494.     background-color:rgba(255,255,255,0.7);
  495.     border:1px solid rgba(0,0,0,0.2);
  496.     text-align:justify;
  497.     font-size:16px;
  498.   }
  499.  
  500.   .imgrelP {
  501.     width:120px;
  502.     height:120px;
  503.     float:right;
  504.     margin-left:10px;
  505.     border:3px solid #BB0B0B;
  506.     outline:1px solid #BB0B0B;
  507.     outline-offset:-7px;
  508.     transition:1s;
  509.   }
  510.  
  511.   .imgrelP:hover {
  512.     filter:brightness(120%);
  513.   }
  514.  
  515.   .relationP > div > span {
  516.     font:22px Caesar Dressing;
  517.     color:#701515;
  518.   }
  519.  
  520.   .rpboxP {
  521.     width:calc(100% - 12px);
  522.     padding:5px;
  523.     margin:auto;
  524.     margin-top:10px;
  525.     background-color:rgba(0,0,0,0.1);
  526.     border:1px solid rgba(0,0,0,0.2);
  527.   }
  528.  
  529.   .rpboxP span {
  530.     font:30px Ramus Sans;
  531.     color:#701515;
  532.   }
  533.  
  534.   .rpP {
  535.     padding:5px;
  536.     display:flex;
  537.     border-top:1px solid rgba(0,0,0,0.1);
  538.     justify-content:space-between;
  539.     text-align:center;
  540.   }
  541.  
  542.   .rpmonthP {
  543.     width:10%;
  544.   }
  545.  
  546.   .rplinkP {
  547.     width:calc(50% - 20px);
  548.     font-family:Ramus Sans;
  549.   }
  550.  
  551.   .rplinkP a {
  552.     text-decoration:none;
  553.     color:#BB0B0B;
  554.   }
  555.  
  556.   .rpnamesP {
  557.     width:40%;
  558.   }
  559.  
  560. </style>
  561.  
  562.  
  563. <link href="https://fonts.googleapis.com/css2?family=Caesar+Dressing&display=swap" rel="stylesheet">
  564.  
  565.  
  566. <div class="backgroundP">
  567.   <!--HEADER-->
  568.   <div class="headerP">
  569.     <div class="titleP">An amazing Name</div>
  570.     <div class="quoteP">❝ An amazing quote, maybe on few lines... This quote can be as long as you want ❞</div>
  571.   </div>
  572.   <!--NAVIGATION BUTTONS-->
  573.   <div class="navP">
  574.     <a href="#1"><div class="buttonP" style="background:url(https://media.tenor.com/Ug_-xLpq4AoAAAAC/fire-power.gif)center;background-size:cover;"></div></a>
  575.     <div class="buttonbisP"></div>
  576.     <a href="#2"><div class="buttonP" style="background:url(https://media.tenor.com/Ug_-xLpq4AoAAAAC/fire-power.gif)center;background-size:cover;"></div></a>
  577.     <div class="buttonbisP"></div>
  578.     <a href="#3"><div class="buttonP" style="background:url(https://media.tenor.com/Ug_-xLpq4AoAAAAC/fire-power.gif)center;background-size:cover;"></div></a>
  579.     <div class="buttonbisP"></div>
  580.     <a href="#4"><div class="buttonP" style="background:url(https://media.tenor.com/Ug_-xLpq4AoAAAAC/fire-power.gif)center;background-size:cover;"></div></a>
  581.     <div class="buttonbisP"></div>
  582.     <a href="#5"><div class="buttonP" style="background:url(https://media.tenor.com/Ug_-xLpq4AoAAAAC/fire-power.gif)center;background-size:cover;"></div></a>
  583.   </div>
  584.   <div class="contentP">
  585.    
  586.     <!--EACH PART-->
  587.     <a id="1"></a>
  588.     <div class="partP">
  589.       <div class="idtopP">
  590.         <div class="infoboxP">
  591.           <!--LEFT VERSION-->
  592.           <div class="idlabelaP">Full Name</div>
  593.           <div class="idansaP">An amazing Name</div>
  594.           <!--RIGHT VERSION-->
  595.           <div class="idlabelbP">Nicknames</div>
  596.           <div class="idansbP">Blblbl</div>
  597.           <!--LEFT VERSION-->
  598.           <div class="idlabelaP">Birthday</div>
  599.           <div class="idansaP">Blblbl</div>
  600.           <!--RIGHT VERSION-->
  601.           <div class="idlabelbP">Zodiac</div>
  602.           <div class="idansbP">Blblbl</div>
  603.           <!--LEFT VERSION-->
  604.           <div class="idlabelaP">Birthplace</div>
  605.           <div class="idansaP">Blblbl</div>
  606.           <!--RIGHT VERSION-->
  607.           <div class="idlabelbP">Nationality</div>
  608.           <div class="idansbP">Blblbl</div>
  609.           <!--LEFT VERSION-->
  610.           <div class="idlabelaP">Residence</div>
  611.           <div class="idansaP">Blblbl</div>
  612.           <!--RIGHT VERSION-->
  613.           <div class="idlabelbP">Occupation</div>
  614.           <div class="idansbP">Blblbl</div>
  615.         </div>
  616.         <div class="idimgP" style="background:url(https://media.tenor.com/FZ5imdgkuhAAAAAd/%D0%BA%D0%BE%D0%BD%D1%91%D0%BA%D0%B3%D0%BE%D1%80%D0%B1%D1%83%D0%BD%D0%BE%D0%BA-konik-garbusek.gif)center;background-size:cover;"></div>
  617.         <div class="infoboxP">
  618.           <!--LEFT VERSION-->
  619.           <div class="idlabelaP">Sexuality</div>
  620.           <div class="idansaP">Blblbl</div>
  621.           <!--RIGHT VERSION-->
  622.           <div class="idlabelbP">Status</div>
  623.           <div class="idansbP">Blblbl</div>
  624.           <!--LEFT VERSION-->
  625.           <div class="idlabelaP">Label</div>
  626.           <div class="idansaP">Information</div>
  627.           <!--RIGHT VERSION-->
  628.           <div class="idlabelbP">Label</div>
  629.           <div class="idansbP">Information</div>
  630.           <!--LEFT VERSION-->
  631.           <div class="idlabelaP">Label</div>
  632.           <div class="idansaP">Information</div>
  633.           <!--RIGHT VERSION-->
  634.           <div class="idlabelbP">Label</div>
  635.           <div class="idansbP">Information</div>
  636.           <!--LEFT VERSION-->
  637.           <div class="idlabelaP">Label</div>
  638.           <div class="idansaP">Information</div>
  639.           <!--RIGHT VERSION-->
  640.           <div class="idlabelbP">Label</div>
  641.           <div class="idansbP">Information</div>
  642.         </div>
  643.       </div>
  644.       <!--QUOTE-->
  645.       <div class="quotebisP">
  646.         ❝ An amazing quote, maybe on few lines... This quote can be as long as you want ❞
  647.       </div>
  648.       <div style="display:flex;">
  649.         <!--FIRST IMPRESSION-->
  650.         <div class="idimprP">
  651.           <center><span>First Impression</span></center>
  652.           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
  653.         </div>
  654.         <!--AESTHETIC-->
  655.         <div class="aestheticP">
  656.           <div class="aesbuttonaP" style="background-color:#BB0B0B;margin-top:0px;"></div>
  657.           <div style="display:flex;">
  658.             <div class="aesbuttonbP" style="background-color:#DB1702;"></div>
  659.             <div class="aesbuttonbP" style="background-color:#DE2916;margin-left:4px;"></div>
  660.           </div>
  661.           <div class="aesbuttonaP" style="background-color:#E73E01;"></div>
  662.           <div style="display:flex;">
  663.             <div class="aesbuttonbP" style="background-color:#F4661B;"></div>
  664.             <div class="aesbuttonbP" style="background-color:#FF7F00;margin-left:4px;"></div>
  665.           </div>
  666.           <div class="aesbuttonaP" style="background-color:#F2981F;"></div>
  667.         </div>
  668.       </div>
  669.       <!--BACKGROUND COLORED BAND-->
  670.       <div class="bandP"></div>
  671.       <!--IMG LINE-->
  672.       <div class="idimglineP">
  673.         <div class="idimgbisP" style="background:url(https://media.tenor.com/FZ5imdgkuhAAAAAd/%D0%BA%D0%BE%D0%BD%D1%91%D0%BA%D0%B3%D0%BE%D1%80%D0%B1%D1%83%D0%BD%D0%BE%D0%BA-konik-garbusek.gif)center;background-size:cover;"></div>
  674.         <div class="idimgbisP" style="background:url(https://media.tenor.com/FZ5imdgkuhAAAAAd/%D0%BA%D0%BE%D0%BD%D1%91%D0%BA%D0%B3%D0%BE%D1%80%D0%B1%D1%83%D0%BD%D0%BE%D0%BA-konik-garbusek.gif)center;background-size:cover;"></div>
  675.         <div class="idimgbisP" style="background:url(https://media.tenor.com/FZ5imdgkuhAAAAAd/%D0%BA%D0%BE%D0%BD%D1%91%D0%BA%D0%B3%D0%BE%D1%80%D0%B1%D1%83%D0%BD%D0%BE%D0%BA-konik-garbusek.gif)center;background-size:cover;"></div>
  676.       </div>
  677.       <div class="subtitleP">Personality</div>
  678.       <!--TRAITS LINE-->
  679.       <div class="linetraitP" style="margin-top:10px;">
  680.         <!--TRAIT-->
  681.                 <div class="traitP">
  682.                     Trait
  683.                     <p>XX%</p>
  684.                 </div>
  685.         <!--TRAIT-->
  686.                 <div class="traitP">
  687.                     Trait
  688.                     <p>XX%</p>
  689.                 </div>
  690.         <!--TRAIT-->
  691.                 <div class="traitP">
  692.                     Trait
  693.                     <p>XX%</p>
  694.                 </div>
  695.       </div>
  696.       <!--TRAITS LINE-->
  697.       <div class="linetraitP">
  698.         <!--TRAIT-->
  699.                 <div class="traitP">
  700.                     Trait
  701.                     <p>XX%</p>
  702.                 </div>
  703.         <!--TRAIT-->
  704.                 <div class="traitP">
  705.                     Trait
  706.                     <p>XX%</p>
  707.                 </div>
  708.         <!--TRAIT-->
  709.                 <div class="traitP">
  710.                     Trait
  711.                     <p>XX%</p>
  712.                 </div>
  713.       </div>
  714.       <!--TRAITS LINE-->
  715.       <div class="linetraitP" style="margin-bottom:10px;">
  716.         <!--TRAIT-->
  717.                 <div class="traitP">
  718.                     Trait
  719.                     <p>XX%</p>
  720.                 </div>
  721.         <!--TRAIT-->
  722.                 <div class="traitP">
  723.                     Trait
  724.                     <p>XX%</p>
  725.                 </div>
  726.         <!--TRAIT-->
  727.                 <div class="traitP">
  728.                     Trait
  729.                     <p>XX%</p>
  730.                 </div>
  731.       </div>
  732.       <!--TEXT ZONE-->
  733.       <div class="textP">
  734.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
  735.       </div>
  736.       <!--TASTE-->
  737.       <div style="display:flex;margin-top:10px;justify-content:center;">
  738.         <!--LIKE-->
  739.         <fieldset class="tasteP">
  740.           <legend class="tastelegP">Like</legend>
  741.           <div class="tastedesP">
  742.             Blurb - Blurb - Blurb - Blurb - Blurb - Blurb
  743.           </div>
  744.         </fieldset>
  745.         <!--DISLIKE-->
  746.         <fieldset class="tasteP">
  747.           <legend class="tastelegP">Dislike</legend>
  748.           <div class="tastedesP">
  749.             Blurb - Blurb - Blurb - Blurb - Blurb - Blurb
  750.           </div>
  751.         </fieldset>
  752.       </div>
  753.       <div class="preferenceP">
  754.         <!--PREFERENCES-->
  755.         <div class="prefleftP">
  756.           <div class="subtitlebisP">Hobbies</div>
  757.           <!--HOBBIES LINE-->
  758.           <div class="hobbieslineP">
  759.             <!--EACH HOBBY-->
  760.             <div class="hobbyP" style="background:url(https://i.pinimg.com/originals/7c/db/1e/7cdb1ea69014d3dfcd152914305a6d3f.jpg)center;background-size:cover;">
  761.               <span>Hobby</span>
  762.             </div>
  763.             <!--EACH HOBBY-->
  764.             <div class="hobbyP" style="background:url(https://i.pinimg.com/736x/a3/d9/f3/a3d9f3cfc2e476c6e7564a8ab486326a.jpg)center;background-size:cover;">
  765.               <span>Hobby</span>
  766.             </div>
  767.             <!--EACH HOBBY-->
  768.             <div class="hobbyP" style="background:url(https://64.media.tumblr.com/7207c508bf4c9924f11de354e17797bc/46bbca496cb6d1bf-51/s1280x1920/095b6fc878a47c4c75687f9b3401a85932ed9610.jpg)center;background-size:cover;">
  769.               <span>Hobby</span>
  770.             </div>
  771.             <!--EACH HOBBY-->
  772.             <div class="hobbyP" style="background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgOdwdI3OS8EljOE4fJ--qiT5mZ8euXBMZpQ&usqp=CAU)center;background-size:cover;">
  773.               <span>Hobby</span>
  774.             </div>
  775.           </div>
  776.           <!--HOBBIES LINE-->
  777.           <div class="hobbieslineP">
  778.             <!--EACH HOBBY-->
  779.             <div class="hobbyP" style="background:url(https://i.pinimg.com/originals/7c/db/1e/7cdb1ea69014d3dfcd152914305a6d3f.jpg)center;background-size:cover;">
  780.               <span>Hobby</span>
  781.             </div>
  782.             <!--EACH HOBBY-->
  783.             <div class="hobbyP" style="background:url(https://i.pinimg.com/736x/a3/d9/f3/a3d9f3cfc2e476c6e7564a8ab486326a.jpg)center;background-size:cover;">
  784.               <span>Hobby</span>
  785.             </div>
  786.             <!--EACH HOBBY-->
  787.             <div class="hobbyP" style="background:url(https://64.media.tumblr.com/7207c508bf4c9924f11de354e17797bc/46bbca496cb6d1bf-51/s1280x1920/095b6fc878a47c4c75687f9b3401a85932ed9610.jpg)center;background-size:cover;">
  788.               <span>Hobby</span>
  789.             </div>
  790.             <!--EACH HOBBY-->
  791.             <div class="hobbyP" style="background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgOdwdI3OS8EljOE4fJ--qiT5mZ8euXBMZpQ&usqp=CAU)center;background-size:cover;">
  792.               <span>Hobby</span>
  793.             </div>
  794.           </div>
  795.           <!--FAV SHOWS-->
  796.           <div class="subtitlebisP">Favorite Shows</div>
  797.           <div class="prefshowP">
  798.             <div class="showP" style="background:url('https://images-na.ssl-images-amazon.com/images/I/41t9Ddq0djL._AC_.jpg')center;background-size:cover"></div>
  799.             <div class="showP" style="background:url('https://images-na.ssl-images-amazon.com/images/I/91LcizItUqL._AC_SL1500_.jpg')center;background-size:cover"></div>
  800.             <div class="showP" style="background:url('https://static.posters.cz/image/750/affiches-et-posters/the-boys-sunburst-i101099.jpg')center;background-size:cover"></div>
  801.           </div>
  802.         </div>
  803.         <!--TRIVIA-->
  804.         <div class="triviaP">
  805.           <div class="subtitlebisP">Trivia</div>
  806.           <ul style="margin-top:5px;">
  807.             <li>Some great information about your character</li>
  808.             <li>Another great information about your character</li>
  809.             <li>Another great information about your character</li>
  810.             <li>Another great information about your character</li>
  811.             <li>Another great information about your character</li>
  812.             <li>Another great information about your character</li>
  813.             <li>Another great information about your character</li>
  814.             <li>Another great information about your character</li>
  815.           </ul>
  816.         </div>
  817.       </div>
  818.     </div>
  819.    
  820.     <!--EACH PART-->
  821.     <a id="2"></a>
  822.     <div class="partP">
  823.       <div style="display:flex;">
  824.         <!--GALLERY-->
  825.         <div class="apimgP">
  826.           <div style="grid-area:one;background:url(https://i.gifer.com/embedded/download/LHsk.gif)center;background-size:cover;"></div>
  827.           <div style="grid-area:two;background:url(https://i.gifer.com/embedded/download/LHsk.gif)center;background-size:cover;"></div>
  828.           <div style="grid-area:three;background:url(https://i.gifer.com/embedded/download/LHsk.gif)center;background-size:cover;"></div>
  829.           <div style="grid-area:four;background:url(https://i.gifer.com/embedded/download/LHsk.gif)center;background-size:cover;"></div>
  830.           <div style="grid-area:five;background:url(https://i.gifer.com/embedded/download/LHsk.gif)center;background-size:cover;"></div>
  831.           <div style="grid-area:six;background:url(https://i.gifer.com/embedded/download/LHsk.gif)center;background-size:cover;"></div>
  832.         </div>
  833.         <!--APPEARANCE INFO-->
  834.         <div style="width:50%;">
  835.           <!--LEFT VERSION-->
  836.           <div class="idlabelaP">Hairs</div>
  837.           <div class="idansaP">Blblbl</div>
  838.           <!--RIGHT VERSION-->
  839.           <div class="idlabelbP">Eyes</div>
  840.           <div class="idansbP">Blblbl</div>
  841.           <!--LEFT VERSION-->
  842.           <div class="idlabelaP">Skin</div>
  843.           <div class="idansaP">Information</div>
  844.           <!--RIGHT VERSION-->
  845.           <div class="idlabelbP">Building</div>
  846.           <div class="idansbP">Information</div>
  847.           <!--LEFT VERSION-->
  848.           <div class="idlabelaP">Label</div>
  849.           <div class="idansaP">Information</div>
  850.           <!--RIGHT VERSION-->
  851.           <div class="idlabelbP">Label</div>
  852.           <div class="idansbP">Information</div>
  853.           <!--LEFT VERSION-->
  854.           <div class="idlabelaP">Label</div>
  855.           <div class="idansaP">Information</div>
  856.           <!--RIGHT VERSION-->
  857.           <div class="idlabelbP">Label</div>
  858.           <div class="idansbP">Information</div>
  859.         </div>
  860.       </div>
  861.       <!--TEXT ZONE-->
  862.       <div class="textP" style="margin:10px auto;">
  863.         Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.
  864.       </div>
  865.       <!--BACKGROUND COLORED BAND-->
  866.       <div class="bandP"></div>
  867.       <!--IMG LINE-->
  868.       <div class="apimglineP">
  869.         <!--EACH IMG-->
  870.         <div class="apimgbisP" style="background:url(https://media.tenor.com/FZ5imdgkuhAAAAAd/%D0%BA%D0%BE%D0%BD%D1%91%D0%BA%D0%B3%D0%BE%D1%80%D0%B1%D1%83%D0%BD%D0%BE%D0%BA-konik-garbusek.gif)center;background-size:cover;">
  871.           <span>Piercings</span>
  872.         </div>
  873.         <!--EACH IMG-->
  874.         <div class="apimgbisP" style="background:url(https://media.tenor.com/FZ5imdgkuhAAAAAd/%D0%BA%D0%BE%D0%BD%D1%91%D0%BA%D0%B3%D0%BE%D1%80%D0%B1%D1%83%D0%BD%D0%BE%D0%BA-konik-garbusek.gif)center;background-size:cover;">
  875.           <span>Tatoos</span>
  876.         </div>
  877.         <!--EACH IMG-->
  878.         <div class="apimgbisP" style="background:url(https://media.tenor.com/FZ5imdgkuhAAAAAd/%D0%BA%D0%BE%D0%BD%D1%91%D0%BA%D0%B3%D0%BE%D1%80%D0%B1%D1%83%D0%BD%D0%BE%D0%BA-konik-garbusek.gif)center;background-size:cover;">
  879.           <span>Blurb</span>
  880.         </div>
  881.         <!--EACH IMG-->
  882.         <div class="apimgbisP" style="background:url(https://media.tenor.com/FZ5imdgkuhAAAAAd/%D0%BA%D0%BE%D0%BD%D1%91%D0%BA%D0%B3%D0%BE%D1%80%D0%B1%D1%83%D0%BD%D0%BE%D0%BA-konik-garbusek.gif)center;background-size:cover;">
  883.           <span>Blurb</span>
  884.         </div>
  885.       </div>
  886.       <!--QUOTE-->
  887.       <div class="quotebisP">
  888.         ❝ An amazing quote, maybe on few lines... This quote can be as long as you want ❞
  889.       </div>
  890.       <div class="subtitleP">Dress style</div>
  891.       <!--TEXT ZONE-->
  892.       <div class="textP" style="width:95%;margin:auto;">
  893.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Sed non risus.</b> Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin <b>porttitor</b>, orci nec nonummy <b>molestie</b>, enim est <b>eleifend</b> mi, non fermentum diam nisl sit amet erat.
  894.       </div>
  895.       <!--DRESSING LINE-->
  896.       <div class="dressingP">
  897.         <div class="dressingimgP" style="background:url(https://i.pinimg.com/736x/15/f7/4f/15f74f861d2b9bee0b3b89cc1fc311bc.jpg)center;background-size:cover;"></div>
  898.         <div class="dressingimgP" style="background:url(https://i.pinimg.com/736x/15/f7/4f/15f74f861d2b9bee0b3b89cc1fc311bc.jpg)center;background-size:cover;"></div>
  899.         <div class="dressingimgP" style="background:url(https://i.pinimg.com/736x/15/f7/4f/15f74f861d2b9bee0b3b89cc1fc311bc.jpg)center;background-size:cover;"></div>
  900.       </div>
  901.       <!--DRESSING LINE-->
  902.       <div class="dressingP">
  903.         <div class="dressingimgP" style="background:url(https://i.pinimg.com/736x/15/f7/4f/15f74f861d2b9bee0b3b89cc1fc311bc.jpg)center;background-size:cover;"></div>
  904.         <div class="dressingimgP" style="background:url(https://i.pinimg.com/736x/15/f7/4f/15f74f861d2b9bee0b3b89cc1fc311bc.jpg)center;background-size:cover;"></div>
  905.         <div class="dressingimgP" style="background:url(https://i.pinimg.com/736x/15/f7/4f/15f74f861d2b9bee0b3b89cc1fc311bc.jpg)center;background-size:cover;"></div>
  906.       </div>
  907.     </div>
  908.    
  909.     <!--EACH PART-->
  910.     <a id="3"></a>
  911.     <div class="partP">
  912.       <div style="display:flex;">
  913.         <!--ABILITIES INFO-->
  914.         <div style="width:50%;">
  915.           <!--LEFT VERSION-->
  916.           <div class="idlabelaP">House</div>
  917.           <div class="idansaP">Blblbl</div>
  918.           <!--RIGHT VERSION-->
  919.           <div class="idlabelbP">Status</div>
  920.           <div class="idansbP">Blblbl</div>
  921.           <!--LEFT VERSION-->
  922.           <div class="idlabelaP">Label</div>
  923.           <div class="idansaP">Information</div>
  924.           <!--RIGHT VERSION-->
  925.           <div class="idlabelbP">Label</div>
  926.           <div class="idansbP">Information</div>
  927.           <!--LEFT VERSION-->
  928.           <div class="idlabelaP">Label</div>
  929.           <div class="idansaP">Information</div>
  930.           <!--RIGHT VERSION-->
  931.           <div class="idlabelbP">Label</div>
  932.           <div class="idansbP">Information</div>
  933.           <!--LEFT VERSION-->
  934.           <div class="idlabelaP">Label</div>
  935.           <div class="idansaP">Information</div>
  936.           <!--RIGHT VERSION-->
  937.           <div class="idlabelbP">Label</div>
  938.           <div class="idansbP">Information</div>
  939.         </div>
  940.         <!--POWERS-->
  941.         <div class="powersP">
  942.           <center><span>Powers</span></center>
  943.           Blurb ✦✦✦✦✧<br/>
  944.           Blurb ✦✦✧✧✧<br/>
  945.           Blurb ✦✦✦✦✦<br/>
  946.           Blurb ✦✧✧✧✧<br/>
  947.           Blurb ✦✦✦✧✧
  948.           <br/><br/>
  949.           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
  950.         </div>
  951.       </div>
  952.       <div class="subtitleP">Skills</div>
  953.       <!--TASTE-->
  954.       <div style="display:flex;justify-content:center;">
  955.         <!--LIKE-->
  956.         <fieldset class="tasteP">
  957.           <legend class="tastelegP">Good at</legend>
  958.           <div class="tastedesP">
  959.             Blurb - Blurb - Blurb - Blurb - Blurb - Blurb
  960.           </div>
  961.         </fieldset>
  962.         <!--DISLIKE-->
  963.         <fieldset class="tasteP">
  964.           <legend class="tastelegP">Bad at</legend>
  965.           <div class="tastedesP">
  966.             Blurb - Blurb - Blurb - Blurb - Blurb - Blurb
  967.           </div>
  968.         </fieldset>
  969.       </div>
  970.       <!--TEXT ZONE-->
  971.       <div class="textP" style="margin-top:15px;">
  972.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Sed non risus.</b> Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin <b>porttitor</b>, orci nec nonummy <b>molestie</b>, enim est <b>eleifend</b> mi, non fermentum diam nisl sit amet erat.
  973.       </div>
  974.       <!--BACKGROUND COLORED BAND-->
  975.       <div class="bandP" style="margin-top:50px;"></div>
  976.       <!--IMG LINE-->
  977.       <div class="idimglineP" style="margin-bottom:0;">
  978.         <div class="idimgbisP" style="background:url(https://media.tenor.com/FZ5imdgkuhAAAAAd/%D0%BA%D0%BE%D0%BD%D1%91%D0%BA%D0%B3%D0%BE%D1%80%D0%B1%D1%83%D0%BD%D0%BE%D0%BA-konik-garbusek.gif)center;background-size:cover;"></div>
  979.         <div class="idimgbisP" style="background:url(https://media.tenor.com/FZ5imdgkuhAAAAAd/%D0%BA%D0%BE%D0%BD%D1%91%D0%BA%D0%B3%D0%BE%D1%80%D0%B1%D1%83%D0%BD%D0%BE%D0%BA-konik-garbusek.gif)center;background-size:cover;"></div>
  980.         <div class="idimgbisP" style="background:url(https://media.tenor.com/FZ5imdgkuhAAAAAd/%D0%BA%D0%BE%D0%BD%D1%91%D0%BA%D0%B3%D0%BE%D1%80%D0%B1%D1%83%D0%BD%D0%BE%D0%BA-konik-garbusek.gif)center;background-size:cover;"></div>
  981.       </div>
  982.     </div>
  983.    
  984.     <!--EACH PART-->
  985.     <a id="4"></a>
  986.     <div class="partP">
  987.       <div class="subtitleP" style="text-align:center;">Family Tree</div>
  988.       <!--FAMILY TREE-->
  989.       <div class="genP">
  990.         <!--FIRST GEN-->
  991.         <blockquote>
  992.           <span>Grandfather</span> Name<br/>
  993.           <span>Grandmother</span> Name
  994.           <!--SECOND GEN-->
  995.           <blockquote>
  996.             <span>Father</span> Name<br/>
  997.             <span>Mother</span> Name
  998.             <!--THIRD GEN-->
  999.             <blockquote>
  1000.               <span>Brother</span> Name<br/>
  1001.               <span>Sister</span> Name
  1002.             </blockquote>
  1003.           </blockquote>
  1004.         </blockquote>
  1005.       </div>
  1006.       <!--QUOTE-->
  1007.       <div class="quotebisP">
  1008.         ❝ An amazing quote, maybe on few lines... This quote can be as long as you want ❞
  1009.       </div>
  1010.       <!--RELATION LINE-->
  1011.       <div class="rellineP">
  1012.         <!--EACH RELATION-->
  1013.         <details class="relationP" open>
  1014.           <summary>An amazing Name</summary>
  1015.           <div>
  1016.             <div class="imgrelP" style="background:url(https://64.media.tumblr.com/0ef1caf7b2542327f5e91326bd681083/tumblr_nnool8KwIf1sfmnojo2_500.gifv)center;background-size:cover;"></div>
  1017.             <span>An amazing Relation</span>
  1018.             <br/><br/>
  1019.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
  1020.           </div>
  1021.         </details>
  1022.         <!--EACH RELATION-->
  1023.         <details class="relationP" open>
  1024.           <summary>An amazing Name</summary>
  1025.           <div>
  1026.             <div class="imgrelP" style="background:url(https://64.media.tumblr.com/0ef1caf7b2542327f5e91326bd681083/tumblr_nnool8KwIf1sfmnojo2_500.gifv)center;background-size:cover;"></div>
  1027.             <span>An amazing Relation</span>
  1028.             <br/><br/>
  1029.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
  1030.           </div>
  1031.         </details>
  1032.       </div>
  1033.       <!--RELATION LINE-->
  1034.       <div class="rellineP">
  1035.         <!--EACH RELATION-->
  1036.         <details class="relationP" open>
  1037.           <summary>An amazing Name</summary>
  1038.           <div>
  1039.             <div class="imgrelP" style="background:url(https://64.media.tumblr.com/0ef1caf7b2542327f5e91326bd681083/tumblr_nnool8KwIf1sfmnojo2_500.gifv)center;background-size:cover;"></div>
  1040.             <span>An amazing Relation</span>
  1041.             <br/><br/>
  1042.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
  1043.           </div>
  1044.         </details>
  1045.         <!--EACH RELATION-->
  1046.         <details class="relationP">
  1047.           <summary>An amazing Name</summary>
  1048.           <div>
  1049.             <div class="imgrelP" style="background:url(https://64.media.tumblr.com/0ef1caf7b2542327f5e91326bd681083/tumblr_nnool8KwIf1sfmnojo2_500.gifv)center;background-size:cover;"></div>
  1050.             <span>An amazing Relation</span>
  1051.             <br/><br/>
  1052.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
  1053.           </div>
  1054.         </details>
  1055.       </div>
  1056.       <!--RELATION LINE-->
  1057.       <div class="rellineP">
  1058.         <!--EACH RELATION-->
  1059.         <details class="relationP">
  1060.           <summary>An amazing Name</summary>
  1061.           <div>
  1062.             <div class="imgrelP" style="background:url(https://64.media.tumblr.com/0ef1caf7b2542327f5e91326bd681083/tumblr_nnool8KwIf1sfmnojo2_500.gifv)center;background-size:cover;"></div>
  1063.             <span>An amazing Relation</span>
  1064.             <br/><br/>
  1065.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
  1066.           </div>
  1067.         </details>
  1068.         <!--EACH RELATION-->
  1069.         <details class="relationP">
  1070.           <summary>An amazing Name</summary>
  1071.           <div>
  1072.             <div class="imgrelP" style="background:url(https://64.media.tumblr.com/0ef1caf7b2542327f5e91326bd681083/tumblr_nnool8KwIf1sfmnojo2_500.gifv)center;background-size:cover;"></div>
  1073.             <span>An amazing Relation</span>
  1074.             <br/><br/>
  1075.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
  1076.           </div>
  1077.         </details>
  1078.       </div>
  1079.       <!--RELATION LINE-->
  1080.       <div class="rellineP">
  1081.         <!--EACH RELATION-->
  1082.         <details class="relationP">
  1083.           <summary>An amazing Name</summary>
  1084.           <div>
  1085.             <div class="imgrelP" style="background:url(https://64.media.tumblr.com/0ef1caf7b2542327f5e91326bd681083/tumblr_nnool8KwIf1sfmnojo2_500.gifv)center;background-size:cover;"></div>
  1086.             <span>An amazing Relation</span>
  1087.             <br/><br/>
  1088.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
  1089.           </div>
  1090.         </details>
  1091.         <!--EACH RELATION-->
  1092.         <details class="relationP">
  1093.           <summary>An amazing Name</summary>
  1094.           <div>
  1095.             <div class="imgrelP" style="background:url(https://64.media.tumblr.com/0ef1caf7b2542327f5e91326bd681083/tumblr_nnool8KwIf1sfmnojo2_500.gifv)center;background-size:cover;"></div>
  1096.             <span>An amazing Relation</span>
  1097.             <br/><br/>
  1098.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
  1099.           </div>
  1100.         </details>
  1101.       </div>
  1102.     </div>
  1103.    
  1104.     <!--EACH PART-->
  1105.     <a id="5"></a>
  1106.     <div class="partP">
  1107.       <!--BACKGROUND COLORED BAND-->
  1108.       <div class="bandP" style="margin-top:38px;"></div>
  1109.       <!--IMG LINE-->
  1110.       <div class="idimglineP">
  1111.         <div class="idimgbisP" style="background:url(https://media.tenor.com/FZ5imdgkuhAAAAAd/%D0%BA%D0%BE%D0%BD%D1%91%D0%BA%D0%B3%D0%BE%D1%80%D0%B1%D1%83%D0%BD%D0%BE%D0%BA-konik-garbusek.gif)center;background-size:cover;"></div>
  1112.         <div class="idimgbisP" style="background:url(https://media.tenor.com/FZ5imdgkuhAAAAAd/%D0%BA%D0%BE%D0%BD%D1%91%D0%BA%D0%B3%D0%BE%D1%80%D0%B1%D1%83%D0%BD%D0%BE%D0%BA-konik-garbusek.gif)center;background-size:cover;"></div>
  1113.         <div class="idimgbisP" style="background:url(https://media.tenor.com/FZ5imdgkuhAAAAAd/%D0%BA%D0%BE%D0%BD%D1%91%D0%BA%D0%B3%D0%BE%D1%80%D0%B1%D1%83%D0%BD%D0%BE%D0%BA-konik-garbusek.gif)center;background-size:cover;"></div>
  1114.       </div>
  1115.       <div class="subtitleP">Roleplay</div>
  1116.       <!--ROLEPLAY LIST-->
  1117.       <div class="rpboxP">
  1118.         <center><span>Year WoX ?</span></center>
  1119.         <!--EACH RP-->
  1120.         <div class="rpP">
  1121.           <div class="rpmonthP">
  1122.             Month
  1123.           </div>
  1124.           <div class="rplinkP">
  1125.             <a href="URL" target="blank_">An amazing RP's name</a>
  1126.           </div>
  1127.           <div class="rpnamesP">
  1128.             Some amazing names
  1129.           </div>
  1130.         </div>
  1131.         <!--EACH RP-->
  1132.         <div class="rpP">
  1133.           <div class="rpmonthP">
  1134.             Month
  1135.           </div>
  1136.           <div class="rplinkP">
  1137.             <a href="URL" target="blank_">An amazing RP's name</a>
  1138.           </div>
  1139.           <div class="rpnamesP">
  1140.             Some amazing names
  1141.           </div>
  1142.         </div>
  1143.         <!--EACH RP-->
  1144.         <div class="rpP">
  1145.           <div class="rpmonthP">
  1146.             Month
  1147.           </div>
  1148.           <div class="rplinkP">
  1149.             <a href="URL" target="blank_">An amazing RP's name</a>
  1150.           </div>
  1151.           <div class="rpnamesP">
  1152.             Some amazing names
  1153.           </div>
  1154.         </div>
  1155.         <!--EACH RP-->
  1156.         <div class="rpP">
  1157.           <div class="rpmonthP">
  1158.             Month
  1159.           </div>
  1160.           <div class="rplinkP">
  1161.             <a href="URL" target="blank_">An amazing RP's name</a>
  1162.           </div>
  1163.           <div class="rpnamesP">
  1164.             Some amazing names
  1165.           </div>
  1166.         </div>
  1167.         <!--EACH RP-->
  1168.         <div class="rpP">
  1169.           <div class="rpmonthP">
  1170.             Month
  1171.           </div>
  1172.           <div class="rplinkP">
  1173.             <a href="URL" target="blank_">An amazing RP's name</a>
  1174.           </div>
  1175.           <div class="rpnamesP">
  1176.             Some amazing names
  1177.           </div>
  1178.         </div>
  1179.       </div>
  1180.       <!--ROLEPLAY LIST-->
  1181.       <div class="rpboxP">
  1182.         <center><span>Year WoX ?</span></center>
  1183.         <!--EACH RP-->
  1184.         <div class="rpP">
  1185.           <div class="rpmonthP">
  1186.             Month
  1187.           </div>
  1188.           <div class="rplinkP">
  1189.             <a href="URL" target="blank_">An amazing RP's name</a>
  1190.           </div>
  1191.           <div class="rpnamesP">
  1192.             Some amazing names
  1193.           </div>
  1194.         </div>
  1195.         <!--EACH RP-->
  1196.         <div class="rpP">
  1197.           <div class="rpmonthP">
  1198.             Month
  1199.           </div>
  1200.           <div class="rplinkP">
  1201.             <a href="URL" target="blank_">An amazing RP's name</a>
  1202.           </div>
  1203.           <div class="rpnamesP">
  1204.             Some amazing names
  1205.           </div>
  1206.         </div>
  1207.         <!--EACH RP-->
  1208.         <div class="rpP">
  1209.           <div class="rpmonthP">
  1210.             Month
  1211.           </div>
  1212.           <div class="rplinkP">
  1213.             <a href="URL" target="blank_">An amazing RP's name</a>
  1214.           </div>
  1215.           <div class="rpnamesP">
  1216.             Some amazing names
  1217.           </div>
  1218.         </div>
  1219.       </div>
  1220.       <!--QUOTE-->
  1221.       <div class="quotebisP" style="margin-bottom:0;">
  1222.         ❝ An amazing quote, maybe on few lines... This quote can be as long as you want ❞
  1223.       </div>
  1224.     </div>
  1225.    
  1226.   </div>
  1227. </div>
  1228.  
  1229.  
  1230.  
  1231. <!-- CREDITS, DO NOT TOUCH-->
  1232. <div style="margin:0 auto;text-align:center;"><a href="https://aliyahscreations.tumblr.com/" style="font-size:10px;letter-spacing:2px;color:#222;text-decoration:none; font-family:century gothic,helvetica,arial,sans-serif;font-size:12px;line-height:1.3;">© Code by Aliyah</a></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!