API tools faq
paste
Advertisement
aliyahscreation

Virgo

aliyahscreation
Apr 9th, 2022
974
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.04 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2.  
  3.   .backgroundV {
  4.     width:100%;
  5.     height:auto;
  6.     margin-top:0px;
  7.     background:url('https://i.pinimg.com/originals/c0/23/5b/c0235b92790bd0205ef0d4039385a9c4.jpg')center;
  8.     background-size:cover;
  9.   }
  10.  
  11.   .headerV {
  12.     display:flex;
  13.   }
  14.  
  15.   .imghV {
  16.     margin-top:5%;
  17.     margin-left:5%;
  18.     width:25%;
  19.     border:7px double #fff;
  20.   }
  21.  
  22.   .nameV {
  23.     margin:5%;
  24.     width:60%;
  25.     padding:10px;
  26.     background-color: rgba(255,255,255,0.5);
  27.     border-radius:10%;
  28.     font-family:'Parisienne';
  29.     font-size:50px;
  30.     color:#370028;
  31.     text-align:center;
  32.     text-shadow:1px 1px 1px rgba(255,255,255,0.8);
  33.   }
  34.  
  35.   .identityV {
  36.     margin:5%;
  37.     background-color: rgba(255,255,255,0.8);
  38.     padding:10px;
  39.   }
  40.  
  41.   .titleV {
  42.     font-family: 'Caesar Dressing', cursive;
  43.     font-size:30px;
  44.   }
  45.  
  46.   .idtableV {
  47.     width:100%;
  48.   }
  49.  
  50.   .idlabelV {
  51.     width:20%;
  52.     padding:5px;
  53.     text-transform:uppercase;
  54.     color:#370028;
  55.     font-size:15px;
  56.     text-decoration: underline;
  57.     text-underline-offset: 50%;
  58.   }
  59.  
  60.   .idansV {
  61.     width:30%;
  62.     padding:5px;
  63.     font-style: italic;
  64.     font-size:13px;
  65.   }
  66.  
  67.   .personalityV {
  68.     margin:5%;
  69.     display:flex;
  70.   }
  71.  
  72.   .listtraitV {
  73.     width:55%;
  74.     margin-right:5%;
  75.     background-color: rgba(255,255,255,0.8);
  76.     padding:10px;
  77.   }
  78.  
  79.   .perimgV {
  80.     width:40%;
  81.     border:7px double #fff;
  82.   }
  83.  
  84.   .pertraitV {
  85.     display:flex;
  86.     text-align:center;
  87.   }
  88.  
  89.   .traitV {
  90.     padding:10px;
  91.       margin:5px;
  92.       background:rgba(55,0,40,0.3);
  93.       flex:33%;
  94.       transition: all 1s ease-in-out;
  95.     -moz-transition: all 1s ease-in-out;
  96.     -webkit-transition: all 1s ease-in-out;
  97.     -ms-transition: all 1s ease-in-out;
  98.     -o-transition: all 1s ease-in-out;
  99.       color:#000;
  100.       font-family:courier new,monospace;
  101.       text-transform:uppercase;
  102.   }
  103.  
  104.   .traitV:hover {
  105.       background:rgba(55,0,40,0.7);
  106.       color: rgb(0,0,0,0)
  107.   }
  108.  
  109.   .traitV > p {
  110.       transition: all 0.5s ease-in-out;
  111.     -moz-transition: all 0.5s ease-in-out;
  112.     -webkit-transition: all 0.5s ease-in-out;
  113.     -ms-transition: all 0.5s ease-in-out;
  114.     -o-transition: all 0.5s ease-in-out;
  115.       opacity:0;
  116.       font-size:20px;
  117.       margin-top:-20px;
  118.       margin-bottom:-5px;
  119.     cursor:pointer
  120.   }
  121.  
  122.   .traitV:hover > p {
  123.       opacity:1;
  124.       color: #FFF;
  125.   }
  126.  
  127.   .appearanceV {
  128.     margin:5%;
  129.     background-color: rgba(255,255,255,0.8);
  130.     padding:10px;
  131.     display:flex;
  132.   }
  133.  
  134.   .appimgV {
  135.     flex:50%;
  136.     height:auto;
  137.   }
  138.  
  139.   .apptextV {
  140.     flex:50%;
  141.     padding:10px;
  142.   }
  143.  
  144.   .appinfoV {
  145.     margin:10px;
  146.     border-bottom:1px solid rgba(0,0,0,0.2);
  147.     text-transform:uppercase;
  148.     color:#370028;
  149.     font-size:15px;
  150.   }
  151.  
  152.   .abilitiesV {
  153.     margin:5%;
  154.     background-color: rgba(255,255,255,0.8);
  155.     padding:10px;
  156.   }
  157.  
  158.   .skillV {
  159.     flex:46%;
  160.     margin:2%;
  161.   }
  162.  
  163.   .legendV {
  164.     font-size:20px;
  165.     color:#370028;
  166.     text-shadow:1px 1px 1px rgba(255,255,255,0.8);
  167.   }
  168.  
  169.   .desV {
  170.     height:150px;
  171.     overflow:auto;
  172.     padding:5px;
  173.     background-color:rgba(0,0,0,0.3);
  174.     color:white;
  175.     font-size:13px;
  176.   }
  177.  
  178.   .relationsV {
  179.     margin:5%;
  180.     background-color: rgba(255,255,255,0.8);
  181.     padding:10px;
  182.   }
  183.  
  184.   .polaroidV {
  185.     flex:33%;
  186.     margin:2%;
  187.     height:130px;
  188.     box-shadow:5px 5px 8px 1px rgba(141, 105, 141,0.7);
  189.     border:10px solid #f6f6f6;
  190.     border-bottom:80px solid #fff;
  191.   }
  192.  
  193.   .polaroidV > b {
  194.     display: flex;
  195.     text-align:center;
  196.     margin: 130px 0px 0 7px;
  197.   }
  198.  
  199.   .polaroidV > i {
  200.     margin-left:7px;
  201.   }
  202.  
  203. </style>  
  204.  
  205. <link href="https://fonts.googleapis.com/css2?family=Caesar+Dressing&family=Parisienne&display=swap" rel="stylesheet">
  206.  
  207. <div class="backgroundV">
  208.   <div class="headerV">
  209.     <div class="imghV" style="background:url('https://media3.giphy.com/media/IGwooXvDofeqk/giphy.gif')center; background-size:cover;"></div>
  210.     <div class="nameV">An amazing Name</div>
  211.   </div>
  212.   <div class="identityV">
  213.     <div class="titleV">~ Identity</div>
  214.     <table class="idtableV" cellspacing="5px">
  215.       <tr>
  216.         <td class="idlabelV">Full Name</td>
  217.         <td class="idansV">Blurb Blurb Blurb</td>
  218.         <td class="idlabelV">Birthday</td>
  219.         <td class="idansV">Blurb Blurb Blurb</td>
  220.       </tr>
  221.       <tr>
  222.         <td class="idlabelV">Nicknames</td>
  223.         <td class="idansV">Blurb Blurb Blurb</td>
  224.         <td class="idlabelV">Place of Birth</td>
  225.         <td class="idansV">Blurb Blurb Blurb</td>
  226.       </tr>
  227.       <tr>
  228.         <td class="idlabelV">Occupation</td>
  229.         <td class="idansV">Blurb Blurb Blurb</td>
  230.         <td class="idlabelV">Origins / Nationality</td>
  231.         <td class="idansV">Blurb Blurb Blurb</td>
  232.       </tr>
  233.       <tr>
  234.         <td class="idlabelV">Label</td>
  235.         <td class="idansV">Blurb Blurb Blurb</td>
  236.         <td class="idlabelV">Label</td>
  237.         <td class="idansV">Blurb Blurb Blurb</td>
  238.       </tr>
  239.     </table>
  240.   </div>
  241.   <div class="personalityV">
  242.     <div class="listtraitV">
  243.       <div class="titleV">~ Personality</div>
  244.       <!--TRAITS LINE-->
  245.             <div class="pertraitV">
  246.                   <!--TRAIT-->
  247.                 <div class="traitV">
  248.                     Trait
  249.                     <p>XX%</p>
  250.                 </div>
  251.           <!--TRAIT-->
  252.                 <div class="traitV">
  253.                     Trait
  254.                     <p>XX%</p>
  255.                 </div>
  256.           <!--TRAIT-->
  257.                 <div class="traitV">
  258.                     Trait
  259.                     <p>XX%</p>
  260.                 </div>
  261.       </div>
  262.       <!--TRAITS LINE-->
  263.             <div class="pertraitV">
  264.                   <!--TRAIT-->
  265.                 <div class="traitV">
  266.                     Trait
  267.                     <p>XX%</p>
  268.                 </div>
  269.           <!--TRAIT-->
  270.                 <div class="traitV">
  271.                     Trait
  272.                     <p>XX%</p>
  273.                 </div>
  274.           <!--TRAIT-->
  275.                 <div class="traitV">
  276.                     Trait
  277.                     <p>XX%</p>
  278.                 </div>
  279.       </div>
  280.       <!--TRAITS LINE-->
  281.             <div class="pertraitV">
  282.                   <!--TRAIT-->
  283.                 <div class="traitV">
  284.                     Trait
  285.                     <p>XX%</p>
  286.                 </div>
  287.           <!--TRAIT-->
  288.                 <div class="traitV">
  289.                     Trait
  290.                     <p>XX%</p>
  291.                 </div>
  292.           <!--TRAIT-->
  293.                 <div class="traitV">
  294.                     Trait
  295.                     <p>XX%</p>
  296.                 </div>
  297.       </div>
  298.     </div>
  299.     <div class="perimgV" style="background:url('https://data.whicdn.com/images/161152485/original.gif')left; background-size:cover;"></div>
  300.   </div>
  301.   <div class="appearanceV">
  302.     <div class="appimgV">
  303.       <div style="border:5px solid #702963;"><div style="border:1px solid #CFA0E9;"><div style="border:3px solid #370028;"><div style="border:8px solid #BD33A4;"><div style="border:2px solid #811453;">
  304.         <!--APPEARANCE IMAGE TOP-->
  305.         <div style="background:url('https://64.media.tumblr.com/9c24d1c3ff12e6aeb47a46bbaa01b8d9/tumblr_n254zfe3Ws1s3087lo1_250.gif')center; background-size:cover;height:100px;border:2px solid #811453;"></div>
  306.         <div style="display:flex;height:100px;">
  307.           <!--APPEARANCE IMAGE LEFT-->
  308.           <div style="background:url('https://64.media.tumblr.com/cd476d0da77c9fca5ef620d15ce65a2b/tumblr_inline_o2uk5cD9e01rifr4k_500.gif')center; background-size:cover; flex:50%;border:2px solid #811453;"></div>
  309.           <!--APPEARANCE IMAGE RIGHT-->
  310.           <div style="background:url('https://64.media.tumblr.com/79e1683864cbbc7511c8f03b007f5634/tumblr_inline_o2uji6ePkK1rifr4k_500.gif')center; background-size:cover; flex:50%;border:2px solid #811453;"></div>
  311.         </div>
  312.         <!--APPEARANCE IMAGE BOTTOM-->
  313.         <div style="background:url('https://data.whicdn.com/images/302673956/original.gif')center; background-size:cover;height:100px;border:2px solid #811453;"></div>
  314.       </div></div></div></div></div>
  315.     </div>
  316.     <div class="apptextV">
  317.       <div class="titleV">~ Appearance</div>
  318.       <div class="appinfoV" style="border-top:1px solid rgba(0,0,0,0.2);padding-top:10px;">Hair - <i style="text-transform:none;font-style:italic;font-size:13px;color:black;">Blblbl</i></div>
  319.       <div class="appinfoV">Eyes - <i style="text-transform:none;font-style:italic;font-size:13px;color:black;">Blblbl</i></div>
  320.       <div class="appinfoV">Skin - <i style="text-transform:none;font-style:italic;font-size:13px;color:black;">Blblbl</i></div>
  321.       <div class="appinfoV">Building - <i style="text-transform:none;font-style:italic;font-size:13px;color:black;">Blblbl</i></div>
  322.       <div class="appinfoV">Tatoos - <i style="text-transform:none;font-style:italic;font-size:13px;color:black;">Blblbl</i></div>
  323.       <div class="appinfoV">Piercings - <i style="text-transform:none;font-style:italic;font-size:13px;color:black;">Blblbl</i></div>
  324.       <div class="appinfoV">Scars - <i style="text-transform:none;font-style:italic;font-size:13px;color:black;">Blblbl</i></div>
  325.       <div class="appinfoV">Label - <i style="text-transform:none;font-style:italic;font-size:13px;color:black;">Blblbl</i></div>
  326.       <div class="appinfoV">Label - <i style="text-transform:none;font-style:italic;font-size:13px;color:black;">Blblbl</i></div>
  327.     </div>  
  328.   </div>  
  329.   <div class="abilitiesV">
  330.     <div class="titleV">~ Abilities</div>
  331.     <!--SKILL LINE-->
  332.     <div style="display:flex;">
  333.       <!--EACH SKILL-->
  334.       <fieldset class="skillV">
  335.         <legend class="legendV">Skill</legend>
  336.         <div class="desV">
  337.           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.
  338.         </div>
  339.       </fieldset>
  340.       <!--EACH SKILL-->
  341.       <fieldset class="skillV">
  342.         <legend class="legendV">Skill</legend>
  343.         <div class="desV">
  344.           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.
  345.         </div>
  346.       </fieldset>
  347.     </div>
  348.   </div>
  349.   <div class="relationsV">
  350.     <div class="titleV">~ Relations</div>
  351.     <!--POLAROID LINE-->
  352.     <div style="display:flex;">
  353.       <!--POLAROID-->
  354.           <div class="polaroidV" style="background:#ddd url(https://64.media.tumblr.com/50ea6eb74b4d13630d56c29ee50828ad/tumblr_mnl2magNtl1qcoz2bo1_250.gif)center;background-size:cover;">
  355.         <b style="color:#000;">An amazing name</b>
  356.         <i>Relation's type</i>  
  357.       </div>
  358.       <!--POLAROID-->
  359.           <div class="polaroidV" style="background:#ddd url(https://img.wattpad.com/a8331e18e0265cfe9d38c42383674fe3ed8c7b05/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f6a564e6c6a49705f797a745448673d3d2d3632303430383233312e313534633433623034303563333134313539363531363239363835352e676966)center;background-size:cover;">
  360.         <b style="color:#000;">An amazing name</b>
  361.         <i>Relation's type</i>  
  362.       </div>
  363.       <!--POLAROID-->
  364.           <div class="polaroidV" style="background:#ddd url(https://thumbs.gfycat.com/CraftyCleverHeterodontosaurus-small.gif)center;background-size:cover;">
  365.         <b style="color:#000;">An amazing name</b>
  366.         <i>Relation's type</i>  
  367.       </div>
  368.     </div>
  369.   </div>  
  370.  
  371.   <br/>
  372. </div>  
  373.  
  374.  
  375. <!-- CREDITS, DO NOT TOUCH-->
  376. <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!