API tools faq
paste
Advertisement
meromerc

Dissolve v.1

meromerc
Apr 23rd, 2024 (edited)
536
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 46.92 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    
  3.    DISSOLVE v1
  4.    by meromercury
  5.    
  6.    created and released 4/23/24
  7.    
  8.      accent color 1: #85c712
  9.      tab icon color: #f2f2f2
  10.      highlight and ctrl + F to change
  11.  
  12. -->
  13.  
  14.  
  15. <div>
  16. <!-- stripe start -->
  17. <div class="card d-none d-lg-block rounded-0 w-100 bg-faded" style="z-index:999;height:76px;border-width:3px 0px 3px 0px;margin-top:460px;margin-right:-15px;margin-left:-15px;position:absolute;">
  18.   <div class="row no-gutters">
  19.     <div class="pt-2 pl-3 pr-3">
  20.       <span class="melody-embed" style="font-size:26px; ">
  21.     <iframe frameborder="0" style="z-index:999;height:60px;width:60px;opacity:0.0001;position:absolute;"
  22.      
  23.      src="https://www.youtube.com/embed/1z2JZJFrfhQ">
  24.       <!--
  25.      MUSIC PLAYER TUTORIAL
  26.      
  27.      for playlists, copy everything after ?list= and paste at the end:
  28.      https://www.youtube.com/embed/videoseries?
  29.      ^^ then replace "URL" with that
  30.      
  31.      for songs, copy everything after watch?v= and replace "URL" with that
  32.      
  33.      remember to keep the "QUOTATION MARKS" around the link or else it could break.
  34.      -->            
  35.      </iframe>
  36.       <span class="fa-stack fa-spin" style="text-shadow: 0px 0px 3px #85c712">
  37.         <i class="fa-duotone fa-compact-disc fa-stack-2x" style="opacity:0.6; color:#85c712;"></i>
  38.         <i class="fa-solid fa-music-note fa-stack-1x"></i>
  39.       </span></span>
  40.     </div>
  41.     <div class="pt-2 pl-0">
  42.       <span style="letter-spacing:.3rem; font-size:32px; font-style:italic; font-variant: small-caps; text-shadow: 0px 0px 4px #85c712">
  43.         <!-- name / quote -->
  44.         She, who would thaw solid flesh and resolve it into a dew...
  45.       </span>
  46.     </div>
  47.   </div>
  48.    
  49. </div>
  50. <!-- end stripe -->
  51.  
  52. <!-- main body -->
  53. <div class="container align-items-center mx-auto mt-5 mb-5">
  54.  
  55.  
  56.   <!--- image: best to use a transparent one or it'll look funky. dimensions are 370-420 wide by 650 tall --->
  57.     <img src="IMG URL HERE" class="d-none d-lg-block" align="right" style="z-index:5; left:-180px; position:absolute; max-height:650px; min-width:370px; max-width:420px">
  58.    
  59. <!-- dummy space for padding, mobile-friendly -->
  60. <div class="col d-none d-lg-block w-100 h-100" style="min-width:150px;max-width:150px">
  61. </div>
  62.  
  63. <!--------- MAIN CONTENT --------->
  64.   <div class="tab-content h-100">
  65.  
  66. <!--------- TAB 1 / MAIN --------->
  67.     <div class="tab-pane card p-2 active show" id="tab1" style="height:550px; border-width:5px; border-style:double; background-color:#85c712; width:785px;">
  68.       <div class="card bg-faded h-100 w-100 table-responsive"  style="max-height:600px;">
  69.        
  70.         <div class="container p-0">
  71.            
  72.             <!------- top half ------->
  73.             <div class="row no-gutters p-3" style="font-size:13px">
  74.                
  75.  
  76.                 <div class="col container card border-0">
  77.                    
  78.                 <!------- ABOUT ------->
  79.                     <div class="row no-gutters">
  80.                         <div class="col p-3">
  81.                             <div class="row no-gutters mb-2">
  82.                                 <div class="col justify-content-between">
  83.                                     <span style="border-radius:100px; font-variant:small-caps; font-size:14px; font-weight:bold;">
  84.                                     Info
  85.                                     </span>
  86.                                     <hr class="flex-grow-1 mx-3 my-auto">
  87.                                     content
  88.                                 </div>
  89.                             </div>
  90.                             <div class="row no-gutters mb-2">
  91.                                 <div class="col justify-content-between">
  92.                                     <span style="border-radius:100px; font-variant:small-caps; font-size:14px; font-weight:bold;">
  93.                                     Info
  94.                                     </span>
  95.                                     <hr class="flex-grow-1 mx-3 my-auto">
  96.                                     content
  97.                                 </div>
  98.                             </div>
  99.                             <div class="row no-gutters mb-2">
  100.                                 <div class="col justify-content-between">
  101.                                     <span style="border-radius:100px; font-variant:small-caps; font-size:14px; font-weight:bold;">
  102.                                     Info
  103.                                     </span>
  104.                                     <hr class="flex-grow-1 mx-3 my-auto">
  105.                                     content
  106.                                 </div>
  107.                             </div>
  108.                             <div class="row no-gutters mb-2">
  109.                                 <div class="col justify-content-between">
  110.                                     <span style="border-radius:100px; font-variant:small-caps; font-size:14px; font-weight:bold;">
  111.                                     Info
  112.                                     </span>
  113.                                     <hr class="flex-grow-1 mx-3 my-auto">
  114.                                     content
  115.                                 </div>
  116.                             </div>
  117.                            
  118.                         </div>
  119.                      
  120.                      <div class="card h-75 w-0 mx-3 mt-3" style="border-style:dashed; border-color:#85c712"></div>
  121.                      
  122.                         <div class="col p-3">
  123.                            
  124.                             <div class="row no-gutters mb-2">
  125.                                 <div class="col justify-content-between">
  126.                                     <span style="border-radius:100px; font-variant:small-caps; font-size:14px; font-weight:bold;">
  127.                                     Info
  128.                                     </span>
  129.                                     <hr class="flex-grow-1 mx-3 my-auto">
  130.                                     content
  131.                                 </div>
  132.                             </div>
  133.                             <div class="row no-gutters mb-2">
  134.                                 <div class="col justify-content-between">
  135.                                     <span style="border-radius:100px; font-variant:small-caps; font-size:14px; font-weight:bold;">
  136.                                     Info
  137.                                     </span>
  138.                                     <hr class="flex-grow-1 mx-3 my-auto">
  139.                                     content
  140.                                 </div>
  141.                             </div>
  142.                             <div class="row no-gutters mb-2">
  143.                                 <div class="col justify-content-between">
  144.                                     <span style="border-radius:100px; font-variant:small-caps; font-size:14px; font-weight:bold;">
  145.                                     Info
  146.                                     </span>
  147.                                     <hr class="flex-grow-1 mx-3 my-auto">
  148.                                     content
  149.                                 </div>
  150.                             </div>
  151.                             <div class="row no-gutters mb-2">
  152.                                 <div class="col justify-content-between">
  153.                                     <span style="border-radius:100px; font-variant:small-caps; font-size:14px; font-weight:bold;">
  154.                                     Info
  155.                                     </span>
  156.                                     <hr class="flex-grow-1 mx-3 my-auto">
  157.                                     content
  158.                                     </span>
  159.                                 </div>
  160.                             </div>
  161.                            
  162.                         </div>
  163.                     </div>
  164.                 </div>
  165.             </div>
  166.            
  167.             <!------- QUOTE ------->
  168.             <div class="card mb-3 rounded-0 text-muted text-center align-items-center" style="font-family:helvetica;border-y:2px; border-width:3px 0px 3px 0px; font-size:18px; letter-spacing:0.1rem;font-style:italic; height:76px;">
  169.                 <div class="container my-auto align-items-center" style="width:80%;">
  170.                     <i class="fa-solid fa-quote-left fa-lg pull-left" style="color:#85c712; margin-top:-30px;"></i>
  171.                     <div class="mx-3 w-100">
  172.                     Put a short quote here. It would look nice! But not too long, or it'll look weird... Two lines max.
  173.                     </div>
  174.                     <i class="fa-solid fa-quote-right fa-lg pull-right" style="color:#85c712; margin-bottom:-30px;"></i>
  175.                 </div>
  176.             </div>
  177.             <!-- text box -->
  178.             <div class="card border-0 p-2 mx-3 table-responsive flex-grow-1" style="width:calc(100% - 4%); height:165px; font-size:13px">
  179.                     <div class="p-2">
  180.                         <p>This is where you put your text. This box scrolls. Remember the < p > tags. Coding the quote above made me cry. You don't even know, man. It was awful. Nothing was working and I had Wonderwall on repeat. But I figured it out, like I always do. Also, I listened to Dissolve about 130 times while making this code. It only took 3 days to code, so do the math. I think it was worth it though. You should listen to Switchblade Symphony. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis ipsum id hendrerit tincidunt. Integer id velit molestie, feugiat tellus a, tincidunt est. Nunc aliquam elit vel accumsan ultrices.</p>  
  181.                        
  182.                         <!-- place <p> text </p> above this line-->
  183.                     </div>
  184.             </div>            
  185.         </div>
  186.       </div>
  187.     </div>
  188.    
  189. <!--------- TAB 2 / INFO --------->
  190.     <div class="tab-pane card p-2" id="tab2" style="height:550px; border-width:5px; border-style:double; background-color:#85c712; width:785px;">
  191.       <div class="card bg-faded border-0 h-100 w-100 table-responsive" style="max-height:600px;">
  192.    
  193.     <!------- top half ------->
  194.         <div class="container w-100" style="height:176px;">
  195.             <div class="row no-gutters">
  196.                 <!------- LIKES ------->
  197.                 <div class="col card mt-3 border-0" style="font-size:13px; border-radius: 15px 0 0 15px">
  198.                     <div class="justify-content-end"><div class="card rounded-0 justify-content-end mt-2" style="clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 15% 100%, 0% 50%); background-color:#85c712; width:calc(100% - 15%);">
  199.                     <div class="justify-content-end"><div class="text-right pr-3 bg-faded" style="margin-right:-1px; clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 15% 100%, 0% 50%); width:calc(100%);font-size:20px; font-variant:small-caps; line-height:1.8rem">
  200.                         Likes
  201.                     </div></div></div></div>
  202.                    
  203.                     <div class="p-2 text-right pr-3 table-responsive" style="max-height:119px;">
  204.                         <ul class="list-unstyled mb-0">
  205.                             <li>Yes<i class="fa-solid fa-check mx-2" style="color:#85c712"></i></li>
  206.                             <li>Yes<i class="fa-solid fa-check mx-2" style="color:#85c712"></i></li>
  207.                             <li>Yes<i class="fa-solid fa-check mx-2" style="color:#85c712"></i></li>
  208.                             <li>Yes<i class="fa-solid fa-check mx-2" style="color:#85c712"></i></li>
  209.                             <li>Yes<i class="fa-solid fa-check mx-2" style="color:#85c712"></i></li>
  210.                            
  211.                             <!-- past more above this line, this box scrolls -->
  212.                         </ul>
  213.                     </div>
  214.                    
  215.                 </div>
  216.                
  217.                 <!------- PICTURE CARD - REPLACE "URL HERE" WITH YOUR IMAGE URL ------->
  218.                 <div class="col card mt-3 mx-0 border-0 rounded-0 table-responsive"
  219.                style="background-image:url(IMG URL HERE);
  220.                height:160px; width:233px; background-size:cover; background-position:center; background-repeat:no-repeat;">
  221.                    
  222.                     <!--
  223.                    <div class="table-reponsive p-3">
  224.                    <p> You can use this as an extra text field, if you want. Just remove the background image above and the little < !-- arrows around this text. -- >
  225.                    (I like to use this part for typing quirks or personality traits.)
  226.                    Oh, and don't forget the < p > tags. Have I mentioned that enough yet? I hope so.
  227.                    It tells the computer this is a paragraph, and it should add some space to the bottom so your text doesn't jumble together.
  228.                    Unless that's what you want, in which case, you should be using <br> before every line instead. </p>
  229.                    </div>
  230.                    -->
  231.  
  232.                 </div>
  233.                
  234.                 <!------- DISLIKES ------->
  235.                 <div class="col card mt-3 border-0" style="font-size:13px; border-radius: 0 15px 15px 0">
  236.                    
  237.                     <div class="card rounded-0 justify-content-end mt-2" style="clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%); background-color:#85c712; width:calc(100% - 15%);">
  238.                     <div class="pl-3 bg-faded" style="margin-left:-1px; clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%); width:calc(100%);font-size:20px; font-variant:small-caps; line-height:1.8rem">
  239.                         Dislikes
  240.                     </div></div>
  241.                    
  242.                     <div class="p-2 text-left pl-3 table-responsive" style="max-height:119px;">
  243.                         <ul class="list-unstyled mb-0">
  244.                             <li><i class="fa-solid fa-xmark mx-2" style="color:#85c712"></i>No</li>
  245.                             <li><i class="fa-solid fa-xmark mx-2" style="color:#85c712"></i>No</li>
  246.                             <li><i class="fa-solid fa-xmark mx-2" style="color:#85c712"></i>No</li>
  247.                             <li><i class="fa-solid fa-xmark mx-2" style="color:#85c712"></i>No</li>
  248.                             <li><i class="fa-solid fa-xmark mx-2" style="color:#85c712"></i>No</li>
  249.                            
  250.                             <!-- past more above this line, this box scrolls -->
  251.                         </ul>
  252.                     </div>
  253.                 </div>
  254.             </div>
  255.         </div>
  256.     <!------- end top half ------->
  257.    
  258.     <!------- divider ------->
  259.         <div class="my-3 justify-content-around" style="font-size:30px; color:#85c712; ">
  260.             <hr class="w-100 my-auto mr-4" style="border-width:3px;">
  261.         <!------- change FA to whatever you want ------->
  262.             <i class="fa-solid fa-star"></i>
  263.             <hr class="w-100 my-auto ml-4" style="border-width:3px;">
  264.         </div>
  265.    
  266.     <!------- bottom half ------->
  267.         <div class="container-fluid" style="font-size:13px">
  268.             <div class="row no-gutters" style="height:200px">
  269.  
  270.                
  271.                 <!------- PROGRESS BARS ------->
  272.                 <div class="col card border-0 pt-2 px-2 bg-muted h-100" style="max-width:270px">
  273.                
  274.                     <div class="row no-gutters align-items-center mt-1" style="margin-bottom:6px; font-size:13px; font-variant:small-caps;">
  275.                         <div class="col text-right">
  276.                             introvert
  277.                         </div>
  278.                         <div class="col-5 mx-2">
  279.                             <div class="progress my-auto" style="height:3px; overflow:visible">
  280.                            
  281.                             <!-- to change the value, change WIDTH: to whatever % you'd like. by default, it's 50% -->
  282.                                 <div class="progress-bar" role="progressbar" style="background-color:transparent; width:50%; height:100%"></div>
  283.                                 <div style="color:#85c712;margin:-7px;border-radius:50%;z-index:999">
  284.                                
  285.                                 <!--------- you can change the FA icon to whatever you want! --------->
  286.                                 <i class="fa-solid fa-star fa-spin"></i>
  287.                                
  288.                                 </div>
  289.                             </div>
  290.                         </div>
  291.                         <div class="col">
  292.                             extrovert
  293.                         </div>
  294.                     </div>
  295.                     <div class="row no-gutters align-items-center" style="margin-bottom:6px; font-size:13px; font-variant:small-caps;">
  296.                         <div class="col text-right">
  297.                             observant
  298.                         </div>
  299.                         <div class="col-5 mx-2">
  300.                             <div class="progress my-auto" style="height:3px; overflow:visible">
  301.                            
  302.                             <!-- to change the value, change WIDTH: to whatever % you'd like. by default, it's 50% -->
  303.                                 <div class="progress-bar" role="progressbar" style="background-color:transparent; width:50%; height:100%"></div>
  304.                                 <div style="color:#85c712;margin:-7px;border-radius:50%;z-index:999">
  305.                                
  306.                                 <!--------- you can change the FA icon to whatever you want! --------->
  307.                                 <i class="fa-solid fa-star fa-spin"></i>
  308.                                
  309.                                 </div>
  310.                             </div>
  311.                         </div>
  312.                         <div class="col">
  313.                             intuitive
  314.                         </div>
  315.                     </div>
  316.                     <div class="row no-gutters align-items-center" style="margin-bottom:6px; font-size:13px; font-variant:small-caps;">
  317.                         <div class="col text-right">
  318.                             thinking
  319.                         </div>
  320.                         <div class="col-5 mx-2">
  321.                             <div class="progress my-auto" style="height:3px; overflow:visible">
  322.                            
  323.                             <!-- to change the value, change WIDTH: to whatever % you'd like. by default, it's 50% -->
  324.                                 <div class="progress-bar" role="progressbar" style="background-color:transparent; width:50%; height:100%"></div>
  325.                                 <div style="color:#85c712;margin:-7px;border-radius:50%;z-index:999">
  326.                                
  327.                                 <!--------- you can change the FA icon to whatever you want! --------->
  328.                                 <i class="fa-solid fa-star fa-spin"></i>
  329.                                
  330.                                 </div>
  331.                             </div>
  332.                         </div>
  333.                         <div class="col">
  334.                             feeling
  335.                         </div>
  336.                     </div>
  337.                     <div class="row no-gutters align-items-center" style="margin-bottom:6px; font-size:13px; font-variant:small-caps;">
  338.                         <div class="col text-right">
  339.                             judging
  340.                         </div>
  341.                         <div class="col-5 mx-2">
  342.                             <div class="progress my-auto" style="height:3px; overflow:visible">
  343.                            
  344.                             <!-- to change the value, change WIDTH: to whatever % you'd like. by default, it's 50% -->
  345.                                 <div class="progress-bar" role="progressbar" style="background-color:transparent; width:50%; height:100%"></div>
  346.                                 <div style="color:#85c712;margin:-7px;border-radius:50%;z-index:999">
  347.                                
  348.                                 <!--------- you can change the FA icon to whatever you want! --------->
  349.                                 <i class="fa-solid fa-star fa-spin"></i>
  350.                                
  351.                                 </div>
  352.                             </div>
  353.                         </div>
  354.                         <div class="col">
  355.                             prospect
  356.                         </div>
  357.                     </div>
  358.                     <div class="row no-gutters align-items-center" style="margin-bottom:6px; font-size:13px; font-variant:small-caps;">
  359.                         <div class="col text-right">
  360.                             skittish
  361.                         </div>
  362.                         <div class="col-5 mx-2">
  363.                             <div class="progress my-auto" style="height:3px; overflow:visible">
  364.                            
  365.                             <!-- to change the value, change WIDTH: to whatever % you'd like. by default, it's 50% -->
  366.                                 <div class="progress-bar" role="progressbar" style="background-color:transparent; width:50%; height:100%"></div>
  367.                                 <div style="color:#85c712;margin:-7px;border-radius:50%;z-index:999">
  368.                                
  369.                                 <!--------- you can change the FA icon to whatever you want! --------->
  370.                                 <i class="fa-solid fa-star fa-spin"></i>
  371.                                
  372.                                 </div>
  373.                             </div>
  374.                         </div>
  375.                         <div class="col">
  376.                             brave
  377.                         </div>
  378.                     </div>
  379.                     <div class="row no-gutters align-items-center" style="margin-bottom:6px; font-size:13px; font-variant:small-caps;">
  380.                         <div class="col text-right">
  381.                             naive
  382.                         </div>
  383.                         <div class="col-5 mx-2">
  384.                             <div class="progress my-auto" style="height:3px; overflow:visible">
  385.                            
  386.                             <!-- to change the value, change WIDTH: to whatever % you'd like. by default, it's 50% -->
  387.                                 <div class="progress-bar" role="progressbar" style="background-color:transparent; width:50%; height:100%"></div>
  388.                                 <div style="color:#85c712;margin:-7px;border-radius:50%;z-index:999">
  389.                                
  390.                                 <!--------- you can change the FA icon to whatever you want! --------->
  391.                                 <i class="fa-solid fa-star fa-spin"></i>
  392.                                
  393.                                 </div>
  394.                             </div>
  395.                         </div>
  396.                         <div class="col">
  397.                             clever
  398.                         </div>
  399.                     </div>
  400.                     <div class="row no-gutters align-items-center" style="margin-bottom:6px; font-size:13px; font-variant:small-caps;">
  401.                         <div class="col text-right">
  402.                             optimist
  403.                         </div>
  404.                         <div class="col-5 mx-2">
  405.                             <div class="progress my-auto" style="height:3px; overflow:visible">
  406.                            
  407.                             <!-- to change the value, change WIDTH: to whatever % you'd like. by default, it's 50% -->
  408.                                 <div class="progress-bar" role="progressbar" style="background-color:transparent; width:50%; height:100%"></div>
  409.                                 <div style="color:#85c712;margin:-7px;border-radius:50%;z-index:999">
  410.                                
  411.                                 <!--------- you can change the FA icon to whatever you want! --------->
  412.                                 <i class="fa-solid fa-star fa-spin"></i>
  413.                                
  414.                                 </div>
  415.                             </div>
  416.                         </div>
  417.                         <div class="col">
  418.                             pessimist
  419.                         </div>
  420.                     </div>
  421.                     <!------- END PROGRESS BARS ------->
  422.                 </div>
  423.                
  424.                 <!------- TRIVIA ------->
  425.                 <div class="col card h-100 ml-2 mr-0 border-0 p-2">
  426.                     <div class="rounded bg-faded text-center mb-1" style="font-size:20px; font-variant:small-caps; line-height:1.8rem; border: 2px solid #85c712;">
  427.                         Trivia
  428.                     </div>
  429.                    
  430.                     <div class="card-body table-responsive p-2">
  431.                         <ul class="pl-4 mb-0" style="list-style-type: circle;">
  432.                             <li>Put some trivia here.</li>
  433.                             <li>You can change those values on the left to whatever you want, but I personally like to use the MBTI types.</li>
  434.                             <li>This scrolls, but shorter looks better.</li>
  435.                             <li>Hey, what did you have for dinner? I had orange chicken.</li>
  436.                             <li>Did you catch that new movie? Eh... I thought it was just okay. The book was way better.</li>
  437.                            
  438.                         <!-- paste list items above this line -->
  439.                         </ul>
  440.                     </div>
  441.                 </div>
  442.             </div>
  443.         </div>
  444.     <!------- end bottom half ------->
  445.       </div>
  446.     </div>
  447.    
  448. <!--------- TAB 3 / BIOGRAPHY --------->
  449.     <div class="tab-pane card p-2" id="tab3" style="height:550px; border-width:5px; border-style:double; background-color:#85c712; width:785px;">
  450.       <div class="card bg-faded h-100 w-100 table-responsive border-0" style="max-height:600px; overflow-x:hidden;">
  451.        
  452.         <!-- header -->
  453.         <div class="d-flex justify-content-end mt-3 pr-0">
  454.             <div class="card rounded-0" style="clip-path: polygon(0 0, 100% 0%, 100% 100%, 8% 100%); background-color:#85c712; height:46px; width:calc(100% - 15px);">
  455.                <div class="card rounded-0 text-right pr-5 pt-1" style="clip-path: polygon(1% 0, 100% 0%, 100% 100%, 8% 100%); height:44px; width:calc(100%); font-size:1.8rem; font-variant:small-caps; line-height:1.8rem; text-shadow: 0px 0px 4px #85c712">
  456.                 History
  457.                 </div>
  458.             </div>
  459.         </div>
  460.        
  461.         <div class="row no-gutters p-1 mx-1">
  462.  
  463.            
  464.             <div class="col card w-100 border-0 my-3 mx-2 p-3 table-responsive" style="height:355px; font-size:13px">
  465.                 <div class="row no-gutters d-flex-inline mb-2">
  466.                    
  467.                     <hr class="flex-grow-1 mx-4 my-auto d-none d-md-block">
  468.                     <span class="my-auto" style="font-variant:small-caps;font-size:17px;">
  469.                         <i class="fa-solid fa-star fa-xs"></i>
  470.                         Subheader
  471.                         <i class="fa-solid fa-star fa-xs"></i>
  472.                     </span>
  473.                     <hr class="flex-grow-1 mx-4 my-auto d-none d-md-block">
  474.                 </div>
  475.                 <div class="text-muted">
  476.                 <p>Write here. You can add more with < p > tags. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis urna id auctor ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas consequat commodo erat sit amet cursus. Etiam blandit vehicula risus. Nulla hendrerit tortor sed porta congue. Integer erat nunc, malesuada ut augue quis, luctus vestibulum felis. Sed nec dui tincidunt, ornare risus vitae, interdum sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Nulla iaculis vulputate sem, quis porta arcu. Etiam varius, magna id placerat finibus, nibh ex aliquet tortor, ut eleifend justo diam quis nunc. </p>
  477.                
  478.                 <p>Ut lobortis viverra neque, et dapibus leo bibendum et. Pellentesque sit amet fringilla magna. Vivamus est arcu, dictum sit amet quam sit amet, tempor gravida sapien. Pellentesque non gravida mauris, et condimentum risus. Phasellus quis volutpat ligula. Nam nunc nisi, mollis at vehicula in, pretium vitae mi. Mauris non lectus commodo, vulputate dui id, congue tortor. </p>
  479.                
  480.                 <!-- add <p> paragraphs </p> above this line -->
  481.                 </div>
  482.                
  483.                 <!-- copy from here to end for more subheaders -->
  484.                 <div class="row no-gutters d-flex-inline mb-2">
  485.                     <hr class="flex-grow-1 mx-4 my-auto d-none d-md-block">
  486.                     <span class="my-auto" style="font-variant:small-caps;font-size:17px;">
  487.                         <i class="fa-solid fa-star fa-xs"></i>
  488.                         Subheader
  489.                         <i class="fa-solid fa-star fa-xs"></i>
  490.                     </span>
  491.                     <hr class="flex-grow-1 mx-4 my-auto d-none d-md-block">
  492.                 </div>
  493.                 <!-- end subheader -->
  494.                
  495.                 <!-- copy from here to end for more text fields -->
  496.                 <div class="text-muted">
  497.                   <p>Sed vel quam dignissim mi tincidunt vulputate. Ut et velit sit amet velit lobortis dapibus sit amet vitae nunc. Sed massa sem, vehicula aliquam fringilla et, vulputate ut libero. Phasellus congue urna sed metus condimentum, id rhoncus dolor euismod. Vestibulum rutrum ut libero nec porta. Aenean congue cursus faucibus. Ut non sapien ut urna imperdiet gravida sit amet ut ligula. Sed ornare est neque, et laoreet nunc vestibulum eu. Donec molestie neque vel iaculis interdum. Suspendisse id est eu leo porttitor viverra non vel augue. </p>
  498.                  
  499.                   <!-- add <p> paragraphs </p> above this line -->
  500.                 </div>
  501.                 <!-- end text field -->
  502.                
  503.                
  504.                
  505.                 <!-- paste above here for text fields/subheaders -->
  506.             </div>
  507.         </div>
  508.       </div>
  509.     </div>
  510.    
  511. <!--------- TAB 4 / REFERENCE --------->
  512.     <div class="tab-pane card p-2" id="tab4" style="height:550px; border-width:5px; border-style:double; background-color:#85c712; width:785px;">
  513.       <div class="card bg-faded h-100 w-100 table-responsive border-0" style="max-height:600px;">
  514.          
  515.         <div class="d-flex justify-content-end mt-3 mb-2 pr-0">
  516.             <div class="card rounded-0" style="clip-path: polygon(0 0, 100% 0%, 100% 100%, 8% 100%); background-color:#85c712; height:46px; width:calc(100% - 15px);">
  517.                <div class="card rounded-0 text-right pr-5 pt-1" style="clip-path: polygon(1% 0, 100% 0%, 100% 100%, 8% 100%); height:44px; width:calc(100%); font-size:1.8rem; font-variant:small-caps; line-height:1.8rem; text-shadow: 0px 0px 4px #85c712">
  518.                 Design
  519.                 </div>
  520.             </div>
  521.         </div>
  522.         <div class="row no-gutters mx-3">
  523.         <!------- palette start ------->
  524.           <div class="col-sm-3 py-2 pr-2 container">
  525.               <div class="flex-fill rounded-top" style="background-color:#e6e6e6; height:60px" data-toggle="tooltip" data-placement="right"
  526.              title="#e6e6e6"></div>
  527.               <div class="flex-fill" style="background-color:#696969; height:60px" data-toggle="tooltip" data-placement="right"
  528.              title="#696969"></div>
  529.               <div class="flex-fill" style="background-color:#0f0f0f; height:60px" data-toggle="tooltip" data-placement="right"
  530.              title="#0f0f0f"></div>
  531.               <div class="flex-fill" style="background-color:#33ff00; height:60px" data-toggle="tooltip" data-placement="right"
  532.              title="#33ff00"></div>
  533.               <div class="flex-fill" style="background-color:#146300; height:60px" data-toggle="tooltip" data-placement="right"
  534.              title="#146300"></div>
  535.               <div class="flex-fill rounded-bottom" style="background-color:#870b00; height:60px" data-toggle="tooltip" data-placement="right"
  536.              title="#870b00"></div>
  537.           </div>
  538.           <!------- end palette ------->
  539.          
  540.           <div class="col-md-9 p-0">
  541.           <!--------- trade info start --------->
  542.             <div class="row no-gutters mb-2 text-muted" style="font-size:12px">
  543.               <div class="col-sm-4 d-inline-flex px-4">
  544.                 <span class="my-auto" style="color:#85c712">
  545.                   <i class="fa-sharp fa-solid fa-dollar-sign"></i>
  546.                 </span>
  547.                 <hr class="flex-grow-1 mx-4 my-auto d-none d-md-block">
  548.                 <span class="my-auto">
  549.                   worth
  550.                 </span>
  551.               </div>
  552.               <div class="col-sm-4 d-inline-flex px-4">
  553.                 <span class="my-auto" style="color:#85c712">
  554.                   <i class="fa-regular fa-paintbrush"></i>
  555.                 </span>
  556.                 <hr class="flex-grow-1 mx-4 my-auto d-none d-md-block">
  557.                 <span class="my-auto">
  558.                   designer
  559.                 </span>
  560.               </div>
  561.               <div class="col-sm-4 d-inline-flex px-4">
  562.                 <span class="my-auto" style="color:#85c712">
  563.                   <i class="fa-sharp fa-regular fa-message-check"></i>
  564.                 </span>
  565.                 <hr class="flex-grow-1 mx-4 my-auto d-none d-md-block">
  566.                 <span class="my-auto">
  567.                   trade/sell
  568.                 </span>
  569.               </div>
  570.             </div>
  571.           <!--------- end trade info --------->
  572.          
  573.           <!--------- bottom text --------->
  574.             <div class="p-3 ml-1 card border-0" style="overflow-y:auto; overflow-x:hidden; height:342px; line-height: 1.5; font-size:13px">
  575.               <ul class="mb-0" style="list-style-type:circle">
  576.                 <li>Put notes about this design here.</li>
  577.                 <li>Copy this line and paste below to add more.</li>
  578.                 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  579.               </ul>
  580.              
  581.               <hr class="w-75">
  582.              
  583.                 <p>If lists aren't your style, you can also just write it out, too. This box scrolls, so write as much as you like. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus in ligula finibus tristique. Aenean maximus, mauris et luctus tincidunt, nulla urna aliquet dolor, eu consequat arcu purus vel est. Ut egestas, nibh sed consequat ornare.</p>
  584.                
  585.                 <p>Etiam egestas, lectus ac suscipit finibus, ante eros scelerisque orci, vel convallis lectus augue at ex. Sed lobortis gravida lorem, ut hendrerit nisl. Cras pretium fermentum cursus. Praesent pharetra quis nisi eget consectetur. Ut posuere nunc vestibulum laoreet fermentum. Fusce sed neque nec neque faucibus tempus. Proin nec justo eu tellus molestie accumsan.</p>
  586.                 <!--
  587.                <p>Proin posuere eget tortor sit amet pellentesque. Fusce ut arcu velit. Cras est libero, ultrices sit amet malesuada sit amet, scelerisque dapibus lorem. Phasellus aliquet tempus orci, at placerat ex luctus quis. Aliquam sed suscipit ipsum. Vestibulum sit amet scelerisque nunc. Aenean nibh nisl, dapibus vel eros in, mattis eleifend odio. Etiam pharetra, nisi dapibus volutpat iaculis, diam lacus efficitur purus, dictum hendrerit nisl enim sit amet ex. Proin mattis imperdiet lacus sed lacinia. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum arcu vel viverra aliquam. </p>
  588.                -->
  589.               </ul>
  590.             </div>
  591.             <!--------- end bottom text --------->
  592.           </div>
  593.         </div>
  594.       </div>
  595.     </div>
  596.    
  597. <!--------- TAB 5 / RELATIONSHIPS --------->
  598.     <div class="tab-pane card p-2" id="tab5" style="height:550px; border-width:5px; border-style:double; background-color:#85c712; width:785px;">
  599.       <div class="container card bg-faded h-100">
  600.         <div class="container p-0 table-responsive" style="max-height:435px">
  601.            
  602.             <!------- RELATIONSHIPS START ------->
  603.            
  604.             <div class="row no-gutters mb-0" style="font-size:13px;">
  605.                 <div class="col ml-3">
  606.                     <div class="card h-100 mt-3"
  607.                    style="background-image:url(IMG URL HERE); background-repeat:no-repeat; border:5px double #85c712; border-radius:100px; background-size:cover; background-position:center; min-height:180px; max-height:180px; width:180px;"></div>
  608.                 </div>
  609.                 <div class="col-8 mt-3 mr-3">
  610.                     <div class="card container w-100 border-0 p-2" style="height:180px;">
  611.                         <div class="px-2 mb-0 justify-content-between" style="font-variant:small-caps; font-size:20px;">
  612.                             <a href="LINK HERE" style="color:#85c712;">
  613.                                 Name</a>
  614.                             <span style="font-size:20px;" class="text-right text-muted">
  615.                                 <i class="fa-solid fa-heart"></i>
  616.                                 <i class="fa-solid fa-heart"></i>
  617.                                 <i class="fa-solid fa-heart"></i>
  618.                                 <i class="fa-solid fa-heart"></i>
  619.                                 <i class="fa-solid fa-heart"></i>
  620.                             </span>
  621.                         </div>
  622.                         <div class="justify-content-between px-2 mb-0 text-lowercase font-italic">
  623.                             <span class="text-muted" style=" font-variant:none;font-size:12px;">
  624.                                 relationship type
  625.                             </span>
  626.                         </div>
  627.                         <hr class="w-100 my-1" style="border-color:#85c712">
  628.                         <div class="p-2 table-responsive" style="max-height:100px">
  629.                             <p>Write a little about this relationship here. This box scrolls. You can change the FontAwesome icons above to whatever you'd like. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis ipsum id hendrerit tincidunt. Integer id velit molestie, feugiat tellus a, tincidunt est.</p>
  630.                         </div>
  631.                     </div>
  632.                 </div>
  633.             </div>
  634.            
  635.             <!------- RELATIONSHIP LINK - RIGHT IMAGE STYLE ------->
  636.             <!------- COPY FROM HERE TO END AND PASTE BELOW FOR MORE RELATIONSHIPS ------->
  637.             <div class="row no-gutters" style="font-size:13px;">
  638.                 <div class="col-8 mt-3 mr-3">
  639.                     <div class="card container w-100 border-0 p-2" style="height:180px;">
  640.                         <div class="px-2 mb-0 justify-content-between" style="font-variant:small-caps; font-size:20px;">
  641.                             <a href="LINK HERE" style="color:#85c712;">
  642.                                 Name</a>
  643.                             <span style="font-size:20px;" class="text-right text-muted">
  644.                                 <i class="fa-regular fa-heart"></i>
  645.                                 <i class="fa-regular fa-heart"></i>
  646.                                 <i class="fa-solid fa-heart"></i>
  647.                                 <i class="fa-solid fa-heart"></i>
  648.                                 <i class="fa-solid fa-heart"></i>
  649.                             </span>
  650.                         </div>
  651.                         <div class="justify-content-between px-2 mb-0 text-lowercase font-italic">
  652.                             <span class="text-muted" style=" font-variant:none;font-size:12px;">
  653.                                 relationship type
  654.                             </span>
  655.                         </div>
  656.                         <hr class="w-100 my-1" style="border-color:#85c712">
  657.                         <div class="p-2 table-responsive" style="max-height:100px">
  658.                             <p>Write a little about this relationship here. This box scrolls. You can change the FontAwesome icons above to whatever you'd like. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis ipsum id hendrerit tincidunt. Integer id velit molestie, feugiat tellus a, tincidunt est.</p>
  659.                         </div>
  660.                     </div>
  661.                 </div>
  662.                 <div class="col ml-3">
  663.                     <div class="card h-100 mt-3"
  664.                    style="background-image:url(IMG URL HERE); background-repeat:no-repeat; border:5px double #85c712; border-radius:100px; background-size:cover; background-position:center; min-height:180px; max-height:180px; width:180px;"></div>
  665.                 </div>
  666.             </div>
  667.             <!------- END LINK - RIGHT IMAGE STYLE ------->
  668.            
  669.            
  670.             <!------- RELATIONSHIP LINK - LEFT IMAGE STYLE ------->
  671.             <!------- COPY FROM HERE TO END AND PASTE BELOW FOR MORE RELATIONSHIPS ------->
  672.             <div class="row no-gutters mb-0" style="font-size:13px;">
  673.                 <div class="col ml-3">
  674.                     <div class="card h-100 mt-3"
  675.                    style="background-image:url(IMG URL HERE); background-repeat:no-repeat; border:5px double #85c712; border-radius:100px; background-size:cover; background-position:center; min-height:180px; max-height:180px; width:180px;"></div>
  676.                 </div>
  677.                 <div class="col-8 mt-3 mr-3">
  678.                     <div class="card container w-100 border-0 p-2" style="height:180px;">
  679.                         <div class="px-2 mb-0 justify-content-between" style="font-variant:small-caps; font-size:20px;">
  680.                             <a href="LINK HERE" style="color:#85c712;">
  681.                                 Name</a>
  682.                             <span style="font-size:20px;" class="text-right text-muted">
  683.                                 <i class="fa-regular fa-heart"></i>
  684.                                 <i class="fa-regular fa-heart"></i>
  685.                                 <i class="fa-regular fa-heart"></i>
  686.                                 <i class="fa-regular fa-heart"></i>
  687.                                 <i class="fa-solid fa-heart"></i>
  688.                             </span>
  689.                         </div>
  690.                         <div class="justify-content-between px-2 mb-0 text-lowercase font-italic">
  691.                             <span class="text-muted" style=" font-variant:none;font-size:12px;">
  692.                                 relationship type
  693.                             </span>
  694.                         </div>
  695.                         <hr class="w-100 my-1" style="border-color:#85c712">
  696.                         <div class="p-2 table-responsive" style="max-height:100px">
  697.                             <p>Write a little about this relationship here. This box scrolls. You can change the FontAwesome icons above to whatever you'd like. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis ipsum id hendrerit tincidunt. Integer id velit molestie, feugiat tellus a, tincidunt est.</p>
  698.                         </div>
  699.                     </div>
  700.                 </div>
  701.             </div>
  702.             <!------- END LINK - LEFT IMAGE STYLE ------->
  703.            
  704.            
  705.            
  706.             <!------- PASTE RELATIONSHIPS ABOVE THIS LINE ------->
  707.            
  708.         </div>
  709.       </div>
  710.     </div>
  711.  </div>
  712. <!------- END MAIN CONTENT ------->
  713.  
  714. <!--------- TABS START --------->
  715.   <div class="row no-gutters">
  716.     <ul class="nav nav-tabs border-0 btn-group-vertical p-0 text-center" style="font-size:25px; top:-25px">
  717.      
  718.       <li class="nav-item mb-3" style="padding:2px 2px 2px 0px;border-radius:0px;border:0px;background-color:#85c712;clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%); width:103px; height:54px; color:#f2f2f2;">
  719.         <a href="#tab1" data-toggle="tab" class="nav-link active"
  720.        style="padding:7px;border-radius:0px;border:0px;clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%); width:100px; color:#f2f2f2; height:50px;">
  721.           <i class="fa-solid fa-person" style="text-shadow: 0px 0px 3px #85c712"></i>
  722.          </a>
  723.       </li>
  724.      
  725.       <li class="nav-item mb-3" style="padding:2px 2px 2px 0px;border-radius:0px;border:0px;background-color:#85c712;clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%); width:103px; height:54px; color:#f2f2f2;">
  726.         <a href="#tab2" data-toggle="tab" class="nav-link"
  727.        style="padding:7px;border-radius:0px;border:0px;clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%); width:100px; color:#f2f2f2; height:50px;">
  728.           <i class="fa-sharp fa-solid fa-heart" style="text-shadow: 0px 0px 3px #85c712"></i>
  729.         </a>
  730.       </li>
  731.      
  732.       <li class="nav-item mb-3" style="padding:2px 2px 2px 0px;border-radius:0px;border:0px;background-color:#85c712;clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%); width:103px; height:54px; color:#f2f2f2;">
  733.         <a href="#tab3" data-toggle="tab" class="nav-link"
  734.        style="padding:7px;border-radius:0px;border:0px;clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%); width:100px; color:#f2f2f2; height:50px;">
  735.           <i class="fa-solid fa-book" style="text-shadow: 0px 0px 3px #85c712"></i>
  736.         </a>
  737.       </li>
  738.       <li class="nav-item mb-3" style="padding:2px 2px 2px 0px;border-radius:0px;border:0px;background-color:#85c712;clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%); width:103px; height:54px; color:#f2f2f2;">
  739.         <a href="#tab4" data-toggle="tab" class="nav-link"
  740.        style="padding:7px;border:0px;border-radius:0px;clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%); width:100px; color:#f2f2f2; height:50px;">
  741.           <i class="fa-duotone fa-paintbrush-pencil" style="text-shadow: 0px 0px 3px #85c712"></i>
  742.         </a>
  743.       </li>
  744.       <li class="nav-item mb-4" style="padding:2px 2px 2px 0px;border-radius:0px;border:0px;background-color:#85c712;clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%); width:103px; height:54px; color:#f2f2f2;">
  745.         <a href="#tab5" data-toggle="tab" class="nav-link"
  746.        style="padding:7px;border:0px;border-radius:0px;clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%); width:100px; color:#f2f2f2; height:50px;">
  747.           <i class="fa-duotone fa-comments" style="text-shadow: 0px 0px 3px #85c712"></i>
  748.         </a>
  749.       </li>
  750.       <li class="nav-item mb-0">
  751.         <a href="https://toyhou.se/meromercury" target=_blank class="nav-link text-muted" data-toggle="tooltip" title="made by mero" style="padding:7px;font-size:20px;background:none;border-radius:0px;border-width: 0px;clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%);width:100px;">
  752.           <i class="fa-light fa-code" style="text-shadow: 0px 0px 3px #85c712"></i>
  753.         </a>
  754.       </li>
  755.     </ul>
  756.   </div>
  757.   <!------- This FA awesome can be removed or changed. If you want to angle it differently, change rotate(80deg) to a different number, like this: rotate(150deg) ------->
  758.   <i class="fa-solid fa-planet-ringed fa-5x d-none d-lg-block" style="transform:rotate(80deg); z-index:9999; position:relative; align:right; margin-top:-545px; left:-140px"></i>
  759.  
  760. <!--------- END TABS --------->
  761. </div></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!