API tools faq
paste
Advertisement
aliyahscreation

Summer

aliyahscreation
Apr 25th, 2022
1,432
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 23.43 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2.  
  3.   .backgroundS {
  4.     width:90%;
  5.     margin:auto;
  6.     background-color:rgba(255,255,255,0.7);
  7.     border:1px solid #666;
  8.   }
  9.  
  10.   .nameS {
  11.     width:70%;
  12.     margin:20px 0;
  13.     padding:0 20px;
  14.     font: 50px Amarante;
  15.     color:#eee;
  16.     background-color:#5472AE;
  17.   }
  18.  
  19.   .borderS {
  20.     width:100%;
  21.     height:25px;
  22.     background-color:#DFAF2C;
  23.   }
  24.  
  25.   .boxS {
  26.     width:100%;
  27.     height:600px;
  28.     margin:5px 0;
  29.     background-color:#DFAF2C;
  30.     overflow:hidden;
  31.   }
  32.  
  33.   .pageS {
  34.     width:calc(100% - 20px);
  35.     height:580px;
  36.     padding:10px;
  37.   }
  38.  
  39.   .pagebisS {
  40.     width:calc(100% - 20px);
  41.     height:580px;
  42.     padding:10px;
  43.     overflow:auto;
  44.   }
  45.  
  46.   .pagebisS::-webkit-scrollbar {
  47.      width:7px;
  48.      height:7px;
  49.      box-shadow: inset 0 0 5px #fff;
  50.     }
  51.  
  52.   .pagebisS::-webkit-scrollbar-thumb {
  53.      background: #5472AE;
  54.      border-radius: 4px;
  55.   }
  56.  
  57.   .linelinkS {
  58.     width:calc(100% - 40px);
  59.     padding:10px;
  60.     display:flex;
  61.     justify-content:center;
  62.   }
  63.  
  64.   .linkS {
  65.     width:50px;
  66.     height:auto;
  67.     padding:5px;
  68.     margin: 0 5px;
  69.     background-color:#5472AE;
  70.     text-align:center;
  71.     font: 30px Amarante;
  72.     color:#eee;
  73.   }
  74.  
  75.   .titleS {
  76.     font:45px Fredericka the Great;
  77.     text-align:center;
  78.     margin-bottom:10px;
  79.   }
  80.  
  81.   .idimgaS {
  82.     width:90%;
  83.     height:auto;
  84.     margin:20px auto;
  85.     padding:7px;
  86.     clip-path:polygon(40px 10px, 70px 0, calc(100% - 70px) 0, calc(100% - 40px) 10px, calc(100% - 10px) 40px, 100% 70px, 100% calc(100% - 70px), calc(100% - 10px) calc(100% - 40px), calc(100% - 40px) calc(100% - 10px), calc(100% - 70px) 100%, 70px 100%, 40px calc(100% - 10px), 10px calc(100% - 40px), 0 calc(100% - 70px), 0 70px, 10px 40px);
  87.     background-color:#74D0F1;
  88.   }
  89.  
  90.   .idimgbS {
  91.     width:100%;
  92.     height:250px;
  93.     margin:auto;
  94.     clip-path:polygon(35px 10px, 65px 0, calc(100% - 65px) 0, calc(100% - 35px) 10px, calc(100% - 10px) 35px, 100% 65px, 100% calc(100% - 65px), calc(100% - 10px) calc(100% - 35px), calc(100% - 35px) calc(100% - 10px), calc(100% - 65px) 100%, 65px 100%, 35px calc(100% - 10px), 10px calc(100% - 35px), 0 calc(100% - 65px), 0 65px, 10px 35px);
  95.     background-color:#fff;
  96.   }
  97.  
  98.   .idquoteS {
  99.     width:80%;
  100.     margin:auto;
  101.     text-align:center;
  102.     font:22px Astloch;
  103.     font-weight: bold;
  104.   }
  105.  
  106.   .idS {
  107.     width:95%;
  108.     margin:6.5px auto;
  109.     display:flex;
  110.     background-color:rgba(255,255,255,0.2);
  111.   }
  112.  
  113.   .idcolorS {
  114.     width:30px;
  115.     background-color:#74D0F1;
  116.   }
  117.  
  118.   .idinfoS {
  119.     width:auto;
  120.     padding:10px;
  121.     font:18px Raleway;
  122.   }
  123.  
  124.   .pertraitS {
  125.     display:flex;
  126.     text-align:center;
  127.   }
  128.  
  129.   .traitS {
  130.     padding:10px;
  131.       margin:5px;
  132.       background:rgba(255,255,255,0.5);
  133.       flex:33%;
  134.       transition: all 1s ease-in-out;
  135.     -moz-transition: all 1s ease-in-out;
  136.     -webkit-transition: all 1s ease-in-out;
  137.     -ms-transition: all 1s ease-in-out;
  138.     -o-transition: all 1s ease-in-out;
  139.       color:#000;
  140.       font-family:Raleway;
  141.       text-transform:uppercase;
  142.   }
  143.  
  144.   .traitS:hover {
  145.       background:rgba(255,255,255,0.8);
  146.       color: rgb(0,0,0,0)
  147.   }
  148.  
  149.   .traitS > p {
  150.       transition: all 0.5s ease-in-out;
  151.     -moz-transition: all 0.5s ease-in-out;
  152.     -webkit-transition: all 0.5s ease-in-out;
  153.     -ms-transition: all 0.5s ease-in-out;
  154.     -o-transition: all 0.5s ease-in-out;
  155.       opacity:0;
  156.       font-size:20px;
  157.       margin-top:-20px;
  158.       margin-bottom:-5px;
  159.     cursor:pointer;
  160.   }
  161.  
  162.   .traitS:hover > p {
  163.       opacity:1;
  164.       color: #03224C;
  165.   }
  166.  
  167.   .tasteS {
  168.     width:40%;
  169.     margin:auto;
  170.     border:2px groove #74D0F1;
  171.     margin-bottom:5px;
  172.   }
  173.  
  174.   .tastelegS {
  175.     margin-left:37%;
  176.     font:30px Astloch;
  177.     font-weight: bold;
  178.     color:#DFF2FF;
  179.   }
  180.  
  181.   .tastelegnS {
  182.     margin-left:20%;
  183.     font:30px Astloch;
  184.     font-weight: bold;
  185.     color:#DFF2FF;
  186.   }
  187.  
  188.   .tastedesS {
  189.     margin-top:-5px;
  190.     font-family:calibri,sans-serif;
  191.     font-size:18px;
  192.     text-align:justify;
  193.     color:#eee;
  194.   }
  195.  
  196.  
  197.   .persubtitleS {
  198.     text-align:center;
  199.     font:30px Fredericka the Great;
  200.     margin-bottom:5px;
  201.   }
  202.  
  203.   .triviaS {
  204.     width:85%;
  205.     margin-top:0px;
  206.     list-style-type: circle;
  207.     color:#eee;
  208.     font-size:15px;
  209.   }
  210.  
  211.   .triviaS > li {
  212.     margin-bottom:10px;
  213.   }
  214.  
  215.   .pertitleS {
  216.     font:35px Fredericka the Great;
  217.     text-align:center;
  218.     margin-bottom:10px;
  219.   }
  220.  
  221.   .hobbieslineS {
  222.     margin:10px;
  223.     display:flex;
  224.     justify-content:space-between;
  225.   }
  226.  
  227.   .hobbiesS {
  228.     width:90px;
  229.     height:90px;
  230.     border-radius:10px;
  231.     border:2px solid #fff;
  232.   }
  233.  
  234.   .galleryS {
  235.     height:500px;
  236.     margin:10px;
  237.     border:3px groove #DFF2FF;
  238.     display:grid;
  239.     grid-gap:0px;
  240.     grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  241.     grid-template-rows:1fr 1fr 1fr 1fr;
  242.     grid-template-areas:'one one two three three' 'four five two six seven' 'eight five nine six ten' 'eight eleven eleven twelve ten';
  243.   }
  244.  
  245.   .abS {
  246.     width:90%;
  247.     height:auto;
  248.     margin:20px auto;
  249.     padding:10px;
  250.     clip-path:polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px);
  251.     background-color:#74D0F1;
  252.   }
  253.  
  254.   .abimgS {
  255.     width:100%;
  256.     height:200px;
  257.     margin:auto;
  258.     clip-path:polygon(25px 0, calc(100% - 25px) 0, 100% 25px, 100% calc(100% - 25px), calc(100% - 25px) 100%, 25px 100%, 0 calc(100% - 25px), 0 25px);
  259.     background-color:#fff;
  260.   }
  261.  
  262.   .abinfoS {
  263.     width:85%;
  264.     margin:auto;
  265.   }
  266.  
  267.   .abinfoS > span {
  268.     font:18px Astloch;
  269.     font-weight: bold;
  270.   }
  271.  
  272.   .abboxS {
  273.     width:90%;
  274.     height:560px;
  275.     padding:10px;
  276.     margin-left:5%;
  277.     background-color:rgba(255,255,255,0.4);
  278.     overflow:auto;
  279.   }
  280.  
  281.   .abboxS::-webkit-scrollbar {
  282.     width:7px;
  283.     height:7px;
  284.     box-shadow: inset 0 0 5px #fff;
  285.     }
  286.  
  287.   .abboxS::-webkit-scrollbar-thumb {
  288.     background: #5472AE;
  289.     border-radius: 4px;
  290.   }
  291.  
  292.   .ablabelS {
  293.     text-align:center;
  294.     font:20px Amarante;
  295.     color:#222;
  296.   }
  297.  
  298.   .abstatS {
  299.     height: 25px;
  300.     margin-bottom: 15px;
  301.     padding:5px 20px;
  302.     font-size:20px;
  303.     color:#222;
  304.   }
  305.  
  306.   .relS {
  307.     width:90%;
  308.     margin:auto;
  309.     margin-bottom:15px;
  310.     display:flex;
  311.     justify-content:space-between;
  312.   }
  313.  
  314.   .relimgS {
  315.     width:35%;
  316.     height:200px;
  317.     border:1px solid #666;
  318.     outline:1px solid #eee;
  319.     outline-offset:-7px;
  320.   }
  321.  
  322.   .reldesS {
  323.     width:60%;
  324.     height:200px;
  325.     background-color:#74D0F1;
  326.     border:1px solid #666;
  327.     outline:1px solid #eee;
  328.     outline-offset:-7px;
  329.   }
  330.  
  331.   .relnameS {
  332.     padding-top:10px;
  333.     text-align:center;
  334.     font:30px Amarante;
  335.     color:#222;
  336.     text-shadow:1px 1px 1px #fff;
  337.   }
  338.  
  339.   .rellinkS {
  340.     text-align:center;
  341.     padding-top:5px;
  342.     color:#666;
  343.     font-family:calibri,sans-serif;
  344.     font-size:20px;
  345.     text-transform:uppercase;
  346.   }
  347.  
  348.   .reltextS {
  349.     width:92%;
  350.     height:110px;
  351.     margin:auto;
  352.     overflow:auto;
  353.     padding-right:10px;
  354.     text-align:justify;
  355.     color:#222;
  356.   }
  357.  
  358.   .reltextS::-webkit-scrollbar {
  359.      width:7px;
  360.      height:7px;
  361.      box-shadow: inset 0 0 5px #fff;
  362.     }
  363.  
  364.   .reltextS::-webkit-scrollbar-thumb {
  365.      background: #666;
  366.      border-radius: 4px;
  367.   }
  368.  
  369. </style>
  370.  
  371. <link href="https://fonts.googleapis.com/css2?family=Amarante&family=Astloch&family=Fredericka+the+Great&family=Raleway&display=swap" rel="stylesheet">
  372.  
  373.  
  374.  
  375. <div class="backgroundS">
  376.   <!--NAME-->
  377.   <div class="nameS">An Amazing Name</div>
  378.   <div class="borderS"></div>
  379.   <div class="boxS">
  380.    
  381.     <!--IDENTITY-->
  382.     <a id="1"></a>
  383.     <div class="pageS">
  384.       <div style="display:flex;">
  385.         <!--LEFT PART-->
  386.         <div style="width:40%;">
  387.           <div class="titleS">Identity</div>
  388.           <!--IMG-->
  389.           <div class="idimgaS">
  390.             <div class="idimgbS" style="background:url(https://64.media.tumblr.com/4b25939d7abd845d22088a89c2c847d4/8dd634139bf1bff8-5c/s250x400/2e9d60564a89458e10f6a4eb2784a27e0ae03e9d.gif)center;background-size:cover;"></div>
  391.           </div>
  392.           <!--QUOTE-->
  393.           <div class="idquoteS">
  394.             - An amazing quote as long as you want.
  395.           </div>
  396.         </div>
  397.         <!--RIGHT PART-->
  398.         <div style="width:60%;">
  399.           <!--INFORMATIONS IDENTITY-->
  400.           <div class="idS"><div class="idcolorS"></div><div class="idinfoS">
  401.             Full Name - An amazing Name
  402.           </div></div>
  403.           <div class="idS"><div class="idcolorS"></div><div class="idinfoS">
  404.             Nicknames - Some nice Nicknames
  405.           </div></div>
  406.           <div class="idS"><div class="idcolorS"></div><div class="idinfoS">
  407.             Birthday - XX Month
  408.           </div></div>
  409.           <div class="idS"><div class="idcolorS"></div><div class="idinfoS">
  410.             Zodiac - Blblbl
  411.           </div></div>
  412.           <div class="idS"><div class="idcolorS"></div><div class="idinfoS">
  413.             Nationality - Blblbl
  414.           </div></div>
  415.           <div class="idS"><div class="idcolorS"></div><div class="idinfoS">
  416.             Label - Information
  417.           </div></div>
  418.           <div class="idS"><div class="idcolorS"></div><div class="idinfoS">
  419.             Label - Information
  420.           </div></div>
  421.           <div class="idS"><div class="idcolorS"></div><div class="idinfoS">
  422.             Label - Information
  423.           </div></div>
  424.           <div class="idS"><div class="idcolorS"></div><div class="idinfoS">
  425.             Label - Information
  426.           </div></div>
  427.           <div class="idS"><div class="idcolorS"></div><div class="idinfoS">
  428.             Label - Information
  429.           </div></div>
  430.           <div class="idS"><div class="idcolorS"></div><div class="idinfoS">
  431.             Label - Information
  432.           </div></div>
  433.           <div class="idS"><div class="idcolorS"></div><div class="idinfoS">
  434.             Label - Information
  435.           </div></div>
  436.         </div>
  437.       </div>
  438.     </div>
  439.    
  440.     <!--PERSONALITY-->
  441.     <a id="2"></a>
  442.     <div class="pageS">
  443.       <div style="display:flex;">
  444.         <!--LEFT PART-->
  445.         <div style="width:70%;">
  446.           <!--TRAITS LINE-->
  447.                 <div class="pertraitS">
  448.                     <!--TRAIT-->
  449.                     <div class="traitS">
  450.                         Trait
  451.                         <p>XX%</p>
  452.                     </div>
  453.             <!--TRAIT-->
  454.                     <div class="traitS">
  455.                         Trait
  456.                         <p>XX%</p>
  457.                     </div>
  458.             <!--TRAIT-->
  459.                     <div class="traitS">
  460.                         Trait
  461.                         <p>XX%</p>
  462.                     </div>
  463.           </div>
  464.           <!--TRAITS LINE-->
  465.                 <div class="pertraitS">
  466.                     <!--TRAIT-->
  467.                     <div class="traitS">
  468.                         Trait
  469.                         <p>XX%</p>
  470.                     </div>
  471.             <!--TRAIT-->
  472.                     <div class="traitS">
  473.                         Trait
  474.                         <p>XX%</p>
  475.                     </div>
  476.             <!--TRAIT-->
  477.                     <div class="traitS">
  478.                         Trait
  479.                         <p>XX%</p>
  480.                     </div>
  481.           </div>
  482.           <!--TRAITS LINE-->
  483.                 <div class="pertraitS">
  484.                     <!--TRAIT-->
  485.                     <div class="traitS">
  486.                         Trait
  487.                         <p>XX%</p>
  488.                     </div>
  489.             <!--TRAIT-->
  490.                     <div class="traitS">
  491.                         Trait
  492.                         <p>XX%</p>
  493.                     </div>
  494.             <!--TRAIT-->
  495.                     <div class="traitS">
  496.                         Trait
  497.                         <p>XX%</p>
  498.                     </div>
  499.           </div>
  500.           <!--TASTE-->
  501.           <div style="display:flex;margin-top:10px;">
  502.             <!--LIKE-->
  503.             <fieldset class="tasteS">
  504.               <legend class="tastelegS">Like</legend>
  505.               <div class="tastedesS">
  506.                 Blurb - Blurb - Blurb - Blurb - Blurb - Blurb
  507.               </div>
  508.             </fieldset>
  509.             <!--DISLIKE-->
  510.             <fieldset class="tasteS">
  511.               <legend class="tastelegnS">Don't like</legend>
  512.               <div class="tastedesS">
  513.                 Blurb - Blurb - Blurb - Blurb - Blurb - Blurb
  514.               </div>
  515.             </fieldset>
  516.           </div>
  517.           <!--TRIVIA-->
  518.           <div class="persubtitleS">Trivia</div>
  519.           <ul class="triviaS">
  520.             <li>Blurb blurb blurb blurb blurb blurb</li>
  521.             <li>Blurb blurb blurb blurb blurb blurb</li>
  522.             <li>Blurb blurb blurb blurb blurb blurb</li>
  523.             <li>Blurb blurb blurb blurb blurb blurb</li>
  524.             <li>Blurb blurb blurb blurb blurb blurb</li>
  525.             <li>Blurb blurb blurb blurb blurb blurb</li>
  526.             <li>Blurb blurb blurb blurb blurb blurb</li>
  527.             <li>Blurb blurb blurb blurb blurb blurb</li>
  528.           </ul>
  529.         </div>
  530.         <!--RIGHT PART-->
  531.         <div style="width:30%;">
  532.           <div class="pertitleS">Personality</div>
  533.           <!--HOBBIES LINE-->
  534.           <div class="hobbieslineS">
  535.             <div class="hobbiesS" style="background: url(https://images2.minutemediacdn.com/image/upload/c_fill,g_auto,h_1248,w_2220/v1555285936/shape/mentalfloss/passportsprim.png?itok=gunSrS6q)center;background-size:cover;"></div>
  536.             <div class="hobbiesS" style="background: url(https://beat.com.au/wp-content/uploads/2020/04/DROP-BY-DRAWING-LILY-MAE-002-e1586395768253.jpg)center;background-size:cover;"></div>
  537.           </div>
  538.           <!--HOBBIES LINE-->
  539.           <div class="hobbieslineS">
  540.             <div class="hobbiesS" style="background: url(https://i.pinimg.com/originals/82/e1/dd/82e1ddba2469816fa76f3b5b000fac64.png)center;background-size:cover;"></div>
  541.             <div class="hobbiesS" style="background: url(https://i.pinimg.com/736x/1c/a3/f2/1ca3f2ffe1b0fb441b281dcae5382975.jpg)center;background-size:cover;"></div>
  542.           </div>
  543.           <!--HOBBIES LINE-->
  544.           <div class="hobbieslineS">
  545.             <div class="hobbiesS" style="background: url(https://i.pinimg.com/originals/e4/5d/8c/e45d8c0702e45f334725a46494759095.png)center;background-size:cover;"></div>
  546.             <div class="hobbiesS" style="background: url(https://www.visitcalifornia.com/sites/visitcalifornia.com/files/styles/welcome_image/public/vc_spotlight_knottsberryfarm_module1_rides_supplied_hangtimenightfinaltrackstretch_1280x640.jpg)center;background-size:cover;"></div>
  547.           </div>
  548.           <!--HOBBIES LINE-->
  549.           <div class="hobbieslineS">
  550.             <div class="hobbiesS" style="background: url(https://www.visitcalifornia.com/sites/visitcalifornia.com/files/styles/welcome_image/public/vc_spotlight_knottsberryfarm_module1_rides_supplied_hangtimenightfinaltrackstretch_1280x640.jpg)center;background-size:cover;"></div>
  551.             <div class="hobbiesS" style="background: url(https://i.pinimg.com/originals/e4/5d/8c/e45d8c0702e45f334725a46494759095.png)center;background-size:cover;"></div>
  552.           </div>
  553.           <!--HOBBIES LINE-->
  554.           <div class="hobbieslineS">
  555.             <div class="hobbiesS" style="background: url(https://i.pinimg.com/originals/e4/5d/8c/e45d8c0702e45f334725a46494759095.png)center;background-size:cover;"></div>
  556.             <div class="hobbiesS" style="background: url(https://www.visitcalifornia.com/sites/visitcalifornia.com/files/styles/welcome_image/public/vc_spotlight_knottsberryfarm_module1_rides_supplied_hangtimenightfinaltrackstretch_1280x640.jpg)center;background-size:cover;"></div>
  557.           </div>
  558.         </div>
  559.       </div>
  560.     </div>
  561.    
  562.     <!--APPEARANCE-->
  563.     <a id="3"></a>
  564.     <div class="pageS">
  565.       <div class="titleS">Appearance</div>
  566.       <!--GALLERY-->
  567.       <div class="galleryS">
  568.             <div style="grid-area:one;background:#ddd url(https://66.media.tumblr.com/21939bcea6cf7d4717a256ea7b40c36c/tumblr_pcap1s9uCS1xtaclho2_r1_540.gif)center;background-size:cover;"></div>
  569.         <div style="grid-area:two;background:#ddd url(https://64.media.tumblr.com/8348f854684eda675945fd72e8d04db1/tumblr_puwyxgo4J71rqnk0bo4_250.gifv)center;background-size:cover;"></div>
  570.             <div style="grid-area:three;background:#ddd url(https://64.media.tumblr.com/4e9a4f44f4c1c3d0d73183a57b433329/b7a06eb93723de63-3f/s250x400/2204aaa7ebd7612d83e8280274fce95fbd9b15f6.gif)center;background-size:cover;"></div>
  571.         <div style="grid-area:four;background:#ddd url(https://66.media.tumblr.com/cc1e2be5c372192e426d522a130de9fb/654d82e762a44649-ba/s540x810/ab0d581dc63c969a00ca5fc862ac31fcfa78a73d.gif)right;background-size:cover;"></div>
  572.             <div style="grid-area:five;background:#ddd url(https://66.media.tumblr.com/5948b07b6c1784e77cec1ce6e62e55eb/tumblr_pohij6qiL01wpspjyo2_400.gif)center;background-size:cover;"></div>
  573.             <div style="grid-area:six;background:#ddd url(https://64.media.tumblr.com/d1ff9758aa6678dab8b4dc48eddffc83/f37eb3ac10a8ccc2-43/s400x600/ce4f33456b10d0a4bd0e2150331ca596beab8ecb.gifv)center;background-size:cover;"></div>
  574.               <div style="grid-area:seven;background:#ddd url(https://64.media.tumblr.com/88644ae7c38ab54b83df246b16c3efbd/9a466b71489be1b0-41/s250x400/931c119cb4acfef306c4de9499f1e64135d44644.gif)right;background-size:cover;"></div>
  575.             <div style="grid-area:eight;background:#ddd url(https://c.tenor.com/xsC3REsgReMAAAAd/jenny-boyd-lizzie-saltzman.gif)center;background-size:cover;"></div>
  576.             <div style="grid-area:nine;background:#ddd url(https://64.media.tumblr.com/0897a9e313af9acce3f0c794bb0e93e4/a99c416e0c79d4c4-48/s400x600/56f7bc15408e268ac43994e7d8c265bd34794816.gifv)center;background-size:cover;"></div>
  577.             <div style="grid-area:ten;background:#ddd url(https://64.media.tumblr.com/c58730a649ff64ca00249ddc76d403b8/tumblr_psjg5nv5s31ravmaao1_r1_500.gifv)center;background-size:cover;"></div>
  578.         <div style="grid-area:eleven;background:#ddd url(https://66.media.tumblr.com/195215e8ca63e2af887efb8d08aa5ee6/tumblr_poeser2FTr1u8aa81o4_500.gif)center;background-size:cover;"></div>
  579.         <div style="grid-area:twelve;background:#ddd url(https://c.tenor.com/O6hu9G18xcMAAAAC/jenny-boyd-lizzie-saltzman.gif)right;background-size:cover;"></div>
  580.         </div>
  581.     </div>
  582.    
  583.     <!--ABILITIES-->
  584.     <a id="4"></a>
  585.     <div class="pageS">
  586.       <div style="display:flex;">
  587.         <!--LEFT PART-->
  588.         <div style="width:35%;">
  589.           <div class="titleS">Abilities</div>
  590.           <!--IMG-->
  591.           <div class="abS">
  592.             <div class="abimgS" style="background:url(https://66.media.tumblr.com/c42d0c5af9ba06ffb2e18cdfd526a0d7/654d82e762a44649-a5/s540x810/f2c5984303ff7a9d39e3d9f02f68081b89fe50c7.gif)center;background-size:cover;"></div>
  593.           </div>
  594.           <!--INFORMATIONS-->
  595.           <div class="abinfoS">
  596.             <span>Label -</span> Information<br/>
  597.             <span>Label -</span> Information<br/>
  598.             <span>Label -</span> Information<br/>
  599.             <span>Label -</span> Information<br/>
  600.             <span>Label -</span> Information<br/>
  601.           </div>
  602.         </div>
  603.         <!--RIGHT PART-->
  604.         <div style="width:65%;">
  605.           <!--STATS BOX-->
  606.           <div class="abboxS">
  607.             <!--EACH STAT-->
  608.             <div class="ablabelS">Talent</div>
  609.             <div class="abstatS" style="background: linear-gradient(to right, #74D0F1 80%, 55%, #ddd);">80%</div>
  610.             <!--EACH STAT-->
  611.             <div class="ablabelS">Talent</div>
  612.             <div class="abstatS" style="background: linear-gradient(to right, #74D0F1 80%, 55%, #ddd);">80%</div>
  613.             <!--EACH STAT-->
  614.             <div class="ablabelS">Talent</div>
  615.             <div class="abstatS" style="background: linear-gradient(to right, #74D0F1 80%, 55%, #ddd);">80%</div>
  616.             <!--EACH STAT-->
  617.             <div class="ablabelS">Talent</div>
  618.             <div class="abstatS" style="background: linear-gradient(to right, #74D0F1 80%, 55%, #ddd);">80%</div>
  619.             <!--EACH STAT-->
  620.             <div class="ablabelS">Talent</div>
  621.             <div class="abstatS" style="background: linear-gradient(to right, #74D0F1 80%, 55%, #ddd);">80%</div>
  622.             <!--EACH STAT-->
  623.             <div class="ablabelS">Talent</div>
  624.             <div class="abstatS" style="background: linear-gradient(to right, #74D0F1 80%, 55%, #ddd);">80%</div>
  625.             <!--EACH STAT-->
  626.             <div class="ablabelS">Talent</div>
  627.             <div class="abstatS" style="background: linear-gradient(to right, #74D0F1 80%, 55%, #ddd);">80%</div>
  628.             <!--EACH STAT-->
  629.             <div class="ablabelS">Talent</div>
  630.             <div class="abstatS" style="background: linear-gradient(to right, #74D0F1 80%, 55%, #ddd);">80%</div>
  631.           </div>
  632.         </div>
  633.       </div>
  634.     </div>
  635.    
  636.     <!--RELATIONS-->
  637.     <a id="5"></a>
  638.     <div class="pagebisS">
  639.       <div class="titleS">Relations</div>
  640.       <!--RELATION 1-->
  641.       <div class="relS">
  642.         <!--IMG-->
  643.             <div class="relimgS" style="background:#666 url(URL)center; background-size:cover; "></div>
  644.         <!--DESCRIPTION-->
  645.         <div class="reldesS">
  646.           <div class="relnameS">An amazing Name</div>
  647.           <div class="rellinkS">Link</div>
  648.           <div class="reltextS">
  649.             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  650.           </div>
  651.         </div>
  652.       </div>
  653.       <!--RELATION 2-->
  654.       <div class="relS">
  655.         <!--DESCRIPTION-->
  656.         <div class="reldesS">
  657.           <div class="relnameS">An amazing Name</div>
  658.           <div class="rellinkS">Link</div>
  659.           <div class="reltextS">
  660.             Blabla blabla
  661.           </div>
  662.         </div>
  663.         <!--IMG-->
  664.             <div class="relimgS" style="background:#666 url(URL)center; background-size:cover; "></div>
  665.       </div>
  666.       <!--RELATION 3-->
  667.       <div class="relS">
  668.         <!--IMG-->
  669.             <div class="relimgS" style="background:#666 url(URL)center; background-size:cover; "></div>
  670.         <!--DESCRIPTION-->
  671.         <div class="reldesS">
  672.           <div class="relnameS">An amazing Name</div>
  673.           <div class="rellinkS">Link</div>
  674.           <div class="reltextS">
  675.             Blabla blabla
  676.           </div>
  677.         </div>
  678.       </div>
  679.       <!--RELATION 4-->
  680.       <div class="relS" style="margin-bottom:15px;">
  681.         <!--DESCRIPTION-->
  682.         <div class="reldesS">
  683.           <div class="relnameS">An amazing Name</div>
  684.           <div class="rellinkS">Link</div>
  685.           <div class="reltextS">
  686.             Blabla blabla
  687.           </div>
  688.         </div>
  689.         <!--IMG-->
  690.             <div class="relimgS" style="background:#666 url(URL)center; background-size:cover; "></div>
  691.       </div>
  692.     </div>
  693.    
  694.   </div>
  695.   <div class="borderS"></div>
  696.   <!--NAV-->
  697.   <div class="linelinkS">
  698.     <a href="#1" style="text-decoration:none;"><div class="linkS">1</div></a>
  699.     <a href="#2" style="text-decoration:none;"><div class="linkS">2</div></a>
  700.     <a href="#3" style="text-decoration:none;"><div class="linkS">3</div></a>
  701.     <a href="#4" style="text-decoration:none;"><div class="linkS">4</div></a>
  702.     <a href="#5" style="text-decoration:none;"><div class="linkS">5</div></a>
  703.   </div>
  704.  
  705. </div>
  706.  
  707.  
  708. <!-- CREDITS, DO NOT TOUCH-->
  709. <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>
  710.  
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!