API tools faq
paste
Advertisement
MCDogWarrior

Fan Character [Custom]

MCDogWarrior
Aug 8th, 2022 (edited)
1,684
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 23.22 KB | None | 0 0
raw download clone embed print report
  1. <!------
  2. Color codes:
  3. text - #fff / background - #000 / accent - #c9773c
  4. ------>
  5.  
  6. <div class="container-fluid text-white" style="width:1200px; font-family:georgia">
  7. <!----- Background image ----->
  8.  <div class="card border-0 rounded-0" style="background-image:url( imglink ); background-position: center; background-size:cover;">
  9.   <div class="row no-gutters">
  10.  
  11.    <div class="col-3 p-3">
  12.  <!---- Profile image ---->
  13.     <div class="card rounded-0" style="height:290px; width:290px; background-image:url( imglink ); background-position: center; background-size:cover; background-color:#000; border:5px solid #000; border-top-left-radius:150px;">
  14.     </div>
  15.   <!--- Bumping icon over pfp --->
  16.     <div class="ml-2" style="color:#c9773c; font-size:270px; margin-top:-340px; opacity:.5"><i class="fa-thin fa-circle fa-beat-fade"></i>
  17.     </div>
  18.  
  19.     <div class="card rounded-0" style="height:390px; width:290px; margin-top:-50px; background-color:rgba(0,0,0,.5); border:5px solid #000;">
  20.   <!--- Name --->
  21.      <div class="card text-white p-1 mt-1 rounded-0 border-0" style="background-color:#000; height:40px;">
  22.      <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  23.      Name
  24.      <span style="color:#c9773c">content</span></p>
  25.      </div>
  26.   <!--- Gender --->
  27.      <div class="card text-white p-1 mt-1 rounded-0 border-0" style="background-color:#000; height:40px;">
  28.      <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  29.      Gender
  30.      <span style="color:#c9773c">content</span></p>
  31.      </div>
  32.   <!--- Age --->
  33.      <div class="card text-white p-1 mt-1 rounded-0 border-0" style="background-color:#000; height:40px;">
  34.      <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  35.      Age
  36.      <span style="color:#c9773c">content</span></p>
  37.      </div>
  38.   <!--- Species/Race --->
  39.      <div class="card text-white p-1 mt-1 rounded-0 border-0" style="background-color:#000; height:40px;">
  40.      <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  41.      Species
  42.      <span style="color:#c9773c">or race</span></p>
  43.      </div>
  44.   <!--- Sexual orientation --->
  45.      <div class="card text-white p-1 mt-1 rounded-0 border-0" style="background-color:#000; height:40px;">
  46.      <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  47.      Orientation
  48.      <span style="color:#c9773c">content</span></p>
  49.      </div>
  50.   <!--- Association/Group --->
  51.      <div class="card text-white p-1 mt-3 rounded-0 border-0" style="background-color:#000; height:40px;">
  52.      <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  53.      Association
  54.      <span style="color:#c9773c">content</span></p>
  55.      </div>
  56.   <!--- Moral standing --->
  57.      <div class="card text-white p-1 mt-1 rounded-0 border-0" style="background-color:#000; height:40px;">
  58.      <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  59.      Standing
  60.      <span style="color:#c9773c">content</span></p>
  61.      </div>
  62.   <!--- Intellectual property --->
  63.      <div class="card text-white p-1 mt-1 rounded-0 border-0" style="background-color:#000; height:40px;">
  64.      <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  65.      Property
  66.      <span style="color:#c9773c">content</span></p>
  67.      </div>
  68.  
  69.     </div>
  70.    </div>
  71.    <div class="col-9 p-3">
  72.  <!---- Large quote ---->
  73.     <div class="card rounded-0 border-0 mx-3 p-3" style="height:120px; background-color:#000;">
  74.     <p class="m-auto" style="color:#c9773c; font-size:30px; text-align:center">Quote here. Don't include quotation marks.</p>
  75.     </div>
  76.   <!--- Quotation marks --->
  77.     <div style="color:#c9773c; font-size:50px; opacity:.3; position:absolute; top:5px; left:40px"><i class="fa-regular fa-quote-left"></i>
  78.     </div>
  79.     <div style="color:#c9773c; font-size:50px; opacity:.3; position:absolute; top:70px; right:40px"><i class="fa-regular fa-quote-right"></i>
  80.     </div>
  81.  
  82.     <div class="row no-gutters">
  83.  <!---- Small character bio ---->
  84.     <div class="col-8 p-3">
  85.      <div class="card rounded-0 mr-3 p-1" style="height:120px; background-color:rgba(0,0,0,.7); border:5px solid #000; overflow-y:auto">
  86.      <p style="font-size:15px; text-align:justify">Small piece of character bio here. </p>
  87.      </div>
  88.  
  89.     <div class="row no-gutters">
  90.  <!---- Character worth ---->
  91.      <div class="col pr-2 py-3">
  92.       <div class="card rounded-0 border-0 p-1 mx-auto" style="background-color:#c9773c; height:50px;">
  93.       <i class="fa-regular fa-coins" style="font-size:40px; text-align:center"></i>
  94.   <!--- Title/Link --->
  95.       <a class="btn btn-outline-warning btn-block rounded-0 border-0 tooltipster" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:50px;"
  96.      title="Worth $$$"></a>
  97.       </div>
  98.      </div>
  99.  <!---- Selling status ---->
  100.      <div class="col px-2 py-3">
  101.       <div class="card rounded-0 border-0 p-1 mx-auto" style="background-color:#c9773c; height:50px;">
  102.       <i class="fa-regular fa-store" style="font-size:40px; text-align:center"></i>
  103.   <!--- Title/Link --->
  104.       <a class="btn btn-outline-warning btn-block rounded-0 border-0 tooltipster" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:50px;"
  105.      title="Not for offers"></a>
  106.       </div>
  107.      </div>
  108.  <!---- Voice claim (estimated voice for character) ---->
  109.      <div class="col px-2 py-3">
  110.       <div class="card rounded-0 border-0 p-1 mx-auto" style="background-color:#c9773c; height:50px;">
  111.       <i class="fa-regular fa-microphone" style="font-size:40px; text-align:center"></i>
  112.   <!--- Title/Link --->
  113.       <a class="btn btn-outline-warning btn-block rounded-0 border-0 tooltipster" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:50px;"
  114.      title="Voice claim" href="videolink"></a>
  115.      </div>
  116.     </div>
  117.  <!---- Pinterest board (collection of inspo images) ---->
  118.     <div class="col pl-2 pr-3 py-3">
  119.      <div class="card rounded-0 border-0 p-1 mx-auto" style="background-color:#c9773c; height:50px;">
  120.      <i class="fa-brands fa-pinterest" style="font-size:40px; text-align:center"></i>
  121.   <!--- Title/Link --->
  122.      <a class="btn btn-outline-warning btn-block rounded-0 border-0 tooltipster" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:50px;"
  123.     title="Pinterest board" href="boardlink"></a>
  124.      </div>
  125.     </div>
  126.    </div>
  127.  
  128. <!----- Carousel ----->
  129.    <div class="carousel slide" id="slide" data-pause="true">
  130.     <div class="carousel-inner">
  131.  <!---- Tab 1 - Personality ---->
  132.      <div class="carousel-item active">
  133.       <div class="card rounded-0 mr-3" style="height:357px; background-color:rgba(0,0,0,.7); border:5px solid #000;">
  134.       <p class="mr-4" style="text-align: center; font-size:30px;">
  135.       <b>Personality</b></p>
  136.       <div class="mx-auto" style="border-top:1px solid #222; opacity:0.7; width:400px;">
  137.         </div>
  138.   <!--- Description --->
  139.       <div class="card rounded-0 border-0 p-2" style="height:170px; background-color:rgba(0,0,0,0); overflow-y:auto">
  140.       <p style="font-size:15px; text-align:justify">Write a bit about your character's personality. How they react to certain situations, how they act around others, stuff like that.
  141.       <br>Or generally how they behave. Up to you.</p>
  142.       </div>
  143.        <div class="row no-gutters">
  144.  
  145.   <!--- Intelligence stat --->
  146.         <div class="col-6 p-1">
  147.          <div class="card border-0" style="background-color:rgba(0,0,0,0);">
  148.          <p style="text-align: left; font-size: 16px;">
  149.          Intelligence</p>
  150.           <div class="progress rounded-0" style="background-color:#000">
  151.            <div class="progress-bar" style="width: 50%; height: 12px; background-color: #c9773c">
  152.            </div>
  153.           </div>
  154.          </div>
  155.         </div>
  156.   <!--- Consideration/Empathy stat --->
  157.         <div class="col-6 p-1">
  158.          <div class="card border-0" style="background-color:rgba(0,0,0,0);">
  159.          <p style="text-align: right; font-size: 16px;">
  160.          Consideration</p>
  161.           <div class="progress rounded-0" style="background-color:#000">
  162.            <div class="progress-bar" style="width: 50%; height: 12px; background-color: #c9773c">
  163.            </div>
  164.           </div>
  165.          </div>
  166.         </div>
  167.   <!--- Charisma stat --->
  168.         <div class="col-6 p-1" style="margin-top:-5px;">
  169.          <div class="card border-0" style="background-color:rgba(0,0,0,0);">
  170.          <p style="text-align: left; font-size: 16px;">
  171.          Charisma</p>
  172.          <div class="progress rounded-0" style="background-color:#000">
  173.           <div class="progress-bar" style="width: 50%; height: 12px; background-color: #c9773c">
  174.           </div>
  175.          </div>
  176.         </div>
  177.        </div>
  178.   <!--- Generosity stat --->
  179.        <div class="col-6 p-1" style="margin-top:-5px;">
  180.         <div class="card border-0" style="background-color:rgba(0,0,0,0);">
  181.         <p style="text-align: right; font-size: 16px;">
  182.         Generosity</p>
  183.          <div class="progress rounded-0" style="background-color:#000">
  184.           <div class="progress-bar" style="width: 50%; height: 12px; background-color: #c9773c">
  185.           </div>
  186.          </div>
  187.         </div>
  188.        </div>
  189.   <!--- Humor stat --->
  190.        <div class="col-6 p-1" style="margin-top:-5px;">
  191.         <div class="card border-0" style="background-color:rgba(0,0,0,0);">
  192.         <p style="text-align: left; font-size: 16px;">
  193.         Humor</p>
  194.          <div class="progress rounded-0" style="background-color:#000">
  195.           <div class="progress-bar" style="width: 50%; height: 12px; background-color: #c9773c">
  196.           </div>
  197.          </div>
  198.         </div>
  199.        </div>
  200.   <!--- Temper stat --->
  201.        <div class="col-6 p-1" style="margin-top:-5px;">
  202.         <div class="card border-0" style="background-color:rgba(0,0,0,0);">
  203.         <p style="text-align: right; font-size: 16px;">
  204.         Temper</p>
  205.          <div class="progress rounded-0" style="background-color:#000">
  206.           <div class="progress-bar" style="width: 50%; height: 12px; background-color: #c9773c">
  207.           </div>
  208.          </div>
  209.         </div>
  210.        </div>
  211.       </div>
  212.      </div>
  213.     </div>
  214.  
  215.  <!---- Tab 2 - Design ---->
  216.     <div class="carousel-item">
  217.      <div class="card rounded-0 mr-3" style="height:357px; background-color:rgba(0,0,0,.7); border:5px solid #000;">
  218.      <p class="mr-4" style="text-align: center; font-size:30px;">
  219.      <b>Design</b></p>
  220.       <div class="mx-auto" style="border-top:1px solid #222; opacity:0.7; width:400px;">
  221.         </div>
  222.         <div class="row no-gutters">
  223.   <!--- Color palette --->
  224.        <div class="col-2 p-1 pt-3 pl-3">
  225.         <div class="card rounded-0 border-0" style="
  226.        background-color:#000; height:52px; clip-path: polygon(0 0, 100% 61%, 100% 100%, 0% 100%);">
  227.         </div>
  228.         <div class="card rounded-0 border-0" style="
  229.        background-color:#222; height:52px;">
  230.         </div>
  231.         <div class="card rounded-0 border-0" style="
  232.        background-color:#444; height:52px;">
  233.         </div>
  234.         <div class="card rounded-0 border-0" style="
  235.        background-color:#666; height:52px;">
  236.         </div>
  237.         <div class="card rounded-0 border-0" style="
  238.        background-color:#888; height:52px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 61%);">
  239.         </div>
  240.        </div>
  241.   <!--- Description --->
  242.        <div class="col-10 p-1 pt-3 pr-2">
  243.         <div class="card rounded-0 border-0 p-2" style="height:130px; background-color:rgba(0,0,0,0); overflow-y:auto">
  244.         <p style="font-size:15px; text-align:justify">Small description of your character's appearance. Make it sound like a fandom wiki description I guess.</p>
  245.         </div>
  246.   <!--- Design notes --->
  247.         <div class="card rounded-0 border-0 p-2" style="height:150px; background-color:rgba(0,0,0,0); overflow-y:auto">
  248.         <ul style="font-size: 15px; text-align:justify; margin-left:-15px;">
  249.          <li>some design details go here</li>
  250.          <li>just anything that's important to note when drawing the character</li>
  251.         </ul>
  252.        </div>
  253.         </div>
  254.        </div>
  255.       </div>
  256.      </div>
  257.  
  258.  <!---- Tab 3 - Relationships ---->
  259.    <div class="carousel-item">
  260.     <div class="card rounded-0 mr-3" style="height:357px; background-color:rgba(0,0,0,.7); border:5px solid #000;">
  261.      <p class="mr-4" style="text-align: center; font-size:30px;">
  262.      <b>Relationships</b></p>
  263.       <div class="mx-auto" style="border-top:1px solid #222; opacity:0.7; width:400px;">
  264.         </div>
  265.        
  266.         <div class="card rounded-0 border-0 p-1" style="height:300px; background-color:rgba(0,0,0,0); overflow-y:auto">
  267.   <!--- Character 1 --->
  268.          <div class="row no-gutters">
  269.         <div class="col-3 p-1 pt-2 pl-2">
  270.    <!-- Profile image -->
  271.            <div class="card rounded-0" style="height:120px; width:120px; background-image:url( imglink ); background-position: center; background-size:cover; background-color:#000; border:3px solid #000;">
  272.          </div>
  273.         </div>
  274.         <div class="col-9 p-1 pt-2 pr-2">
  275.    <!-- Name & description -->
  276.         <p class="mx-2" style="font-size:20px;"><a href="link here" style="color:#c9773c"><u>Name</u></a></p>
  277.          <div class="card rounded-0 border-0 p-1" style="height:85px; background-color:rgba(0,0,0,0); overflow-y:auto">
  278.          <p style="font-size:15px; text-align:justify">Small description of the relationship.</p>
  279.          </div>
  280.         </div>
  281.          </div>
  282.          
  283.   <!--- Character 2 --->
  284.        <div class="row no-gutters">
  285.         <div class="col-3 p-1 pt-2 pl-2">
  286.    <!-- Profile image -->
  287.            <div class="card rounded-0" style="height:120px; width:120px; background-image:url( imglink ); background-position: center; background-size:cover; background-color:#000; border:3px solid #000;">
  288.          </div>
  289.         </div>
  290.         <div class="col-9 p-1 pt-2 pr-2">
  291.    <!-- Name & description -->
  292.         <p class="mx-2" style="font-size:20px;"><a href=" link here " style="color:#c9773c"><u>Name</u></a></p>
  293.          <div class="card rounded-0 border-0 p-1" style="height:85px; background-color:rgba(0,0,0,0); overflow-y:auto">
  294.          <p style="font-size:15px; text-align:justify">Description</p>
  295.          </div>
  296.         </div>
  297.          </div>
  298.                
  299.   <!--- Character 3 --->
  300.        <div class="row no-gutters">
  301.         <div class="col-3 p-1 pt-2 pl-2">
  302.    <!-- Profile image -->
  303.            <div class="card rounded-0" style="height:120px; width:120px; background-image:url( imglink ); background-position: center; background-size:cover; background-color:#000; border:3px solid #000;">
  304.          </div>
  305.         </div>
  306.         <div class="col-9 p-1 pt-2 pr-2">
  307.    <!-- Name & description -->
  308.         <p class="mx-2" style="font-size:20px;"><a href=" link here " style="color:#c9773c"><u>Name</u></a></p>
  309.          <div class="card rounded-0 border-0 p-1" style="height:85px; background-color:rgba(0,0,0,0); overflow-y:auto">
  310.          <p style="font-size:15px; text-align:justify">Description</p>
  311.          </div>
  312.         </div>
  313.          </div>
  314.         </div>
  315.        </div>
  316.       </div>
  317.  
  318.  <!---- Tab 4 - Story ---->
  319.     <div class="carousel-item">
  320.      <div class="card rounded-0 mr-3" style="height:357px; background-color:rgba(0,0,0,.7); border:5px solid #000;">
  321.      <p class="mr-4" style="text-align: center; font-size:30px;">
  322.      <b>Story</b></p>
  323.       <div class="mx-auto" style="border-top:1px solid #222; opacity:0.7; width:400px;">
  324.         </div>
  325.         <div class="card rounded-0 border-0 p-1" style="height:300px; background-color:rgba(0,0,0,0); overflow-y:auto">
  326.          
  327.   <!--- Section 1 --->
  328.         <p class="ml-3 mt-2" style="font-size:20px;"><b>Event #1</b>
  329.         <span class="ml-2" style="font-size:14px; color:#c9773c">date</span></p>
  330.         <p class="mx-2" style="font-size:16px; margin-top:-15px; text-align:justify">Text</p>
  331.              
  332.   <!--- Section 2 --->  
  333.         <p class="ml-3" style="font-size:20px;"><b>Event #2</b>
  334.         <span class="ml-2" style="font-size:14px; color:#c9773c">date</span></p>
  335.         <p class="mx-2" style="font-size:16px; margin-top:-15px; text-align:justify">Text</p>
  336.        
  337.   <!--- Section 3 --->        
  338.         <p class="ml-3" style="font-size:20px;"><b>Event #3</b>
  339.         <span class="ml-2" style="font-size:14px; color:#c9773c">date</span></p>
  340.         <p class="mx-2" style="font-size:16px; margin-top:-15px; text-align:justify">Text</p>
  341.        
  342.         </div>
  343.        </div>
  344.       </div>
  345.      
  346.  <!---- Tab 5 - Trivia ---->
  347.     <div class="carousel-item">
  348.      <div class="card rounded-0 mr-3" style="height:357px; background-color:rgba(0,0,0,.7); border:5px solid #000;">
  349.      <p class="mr-4" style="text-align: center; font-size:30px;">
  350.      <b>Trivia</b></p>
  351.       <div class="mx-auto" style="border-top:1px solid #222; opacity:0.7; width:400px;">
  352.         </div>
  353.       <div class="row no-gutters mt-2 mx-3">
  354.  
  355.   <!--- Image 1 --->
  356.        <div class="col-3">
  357.         <div class="card rounded-0" style="height:140px; width:140px; background-image:url( imglink ); background-position: center; background-size:cover; background-color:#000; border:3px solid #000; clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);">
  358.         </div>
  359.        </div>
  360.  
  361.   <!--- Image 2 --->
  362.        <div class="col-3">
  363.         <div class="card rounded-0" style="height:140px; width:140px; margin-left:-10px; background-image:url( imglink ); background-position: center; background-size:cover; background-color:#000; border:3px solid #000; clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);">
  364.         </div>
  365.        </div>
  366.  
  367.   <!--- Image 3 --->
  368.        <div class="col-3">
  369.         <div class="card rounded-0" style="height:140px; width:140px; margin-left:-20px; background-image:url( imglink ); background-position: center; background-size:cover; background-color:#000; border:3px solid #000; clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);">
  370.         </div>
  371.        </div>
  372.  
  373.   <!--- Image 4 --->
  374.        <div class="col-3">
  375.         <div class="card rounded-0" style="height:140px; width:140px; margin-left:-30px; background-image:url( imglink ); background-position: center; background-size:cover; background-color:#000; border:3px solid #000; clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);">
  376.        </div>
  377.       </div>
  378.      </div>
  379.  
  380.   <!--- Trivia list --->
  381.      <div class="card rounded-0 border-0 p-2" style="height:150px; background-color:rgba(0,0,0,0); overflow-y:auto">
  382.      <ul style="font-size: 15px; text-align:justify; margin-left:-15px;">
  383.       <li>Little pieces of trivia, maybe relating to your direct inspirations for the character</li>
  384.       <li>or info about what game/show they're from, and why this character is such a great and useful addition to the story</li>
  385.      </ul>
  386.      </div>
  387.       </div>
  388.      </div>
  389.   </div>
  390.  
  391.  <!---- Navigation arrows ---->
  392.   <a class="carousel-control-prev" href="#slide" role="button" data-slide="prev">
  393.   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  394.   <span class="sr-only">Previous</span>
  395.   </a>
  396.   <a class="carousel-control-next" href="#slide" role="button" data-slide="next">
  397.   <span class="carousel-control-next-icon" aria-hidden="true"></span>
  398.   <span class="sr-only">Next</span>
  399.   </a>
  400.  </div>
  401. </div>
  402.  
  403. <div class="col-4 pt-3">
  404.  <!---- Quote image 1 ---->
  405.   <!--- Image --->
  406.  <div class="card rounded-0" style="height:176px; background-image:url( imglink ); background-position: center; background-size:cover; background-color:#000; border:5px solid #000;">
  407.  <a class="btn btn-block rounded-0" style="height:250px; background-color:rgba(214,84,15,0);" data-toggle="tab" href="#text1"></a>
  408.  <div class="tab-content">
  409.   <div class="tab-pane fade" id="text1">
  410.    <div class="card p-3 border-0 rounded-0" style="background-color:rgba(0,0,0,.8); height:166px; position:absolute; bottom:0px; left:0px;">
  411.   <!--- Hidden quote --->
  412.    <p class="my-auto" style="font-size: 20px; text-align: center; letter-spacing: 2px;">" Quote here. Make it like 2-4 lines long. Trust me. "</p>
  413.    </div>
  414.   </div>
  415.  </div>
  416. </div>
  417.  <!---- Quote image 2 ---->
  418.   <!--- Image --->
  419. <div class="card rounded-0 mt-3" style="height:176px; background-image:url( imglink ); background-position: center; background-size:cover; background-color:#000; border:5px solid #000;">
  420. <a class="btn btn-block rounded-0" style="height:250px; background-color:rgba(214,84,15,0);" data-toggle="tab" href="#text2"></a>
  421.  <div class="tab-content">
  422.   <div class="tab-pane fade" id="text2">
  423.    <div class="card p-3 border-0 rounded-0" style="background-color:rgba(0,0,0,.8); height:166px; position:absolute; bottom:0px; left:0px;">
  424.   <!--- Hidden quote --->
  425.    <p class="my-auto" style="font-size: 20px; text-align: center; letter-spacing: 2px;">" Quote goes right here. "</p>
  426.    </div>
  427.   </div>
  428.  </div>
  429. </div>
  430.  
  431.  <!---- Quote image 3 ---->
  432.   <!--- Image --->
  433. <div class="card rounded-0 mt-3" style="height:176px; background-image:url( imglink ); background-position: center; background-size:cover; background-color:#000; border:5px solid #000;">
  434. <a class="btn btn-block rounded-0" style="height:250px; background-color:rgba(214,84,15,0);" data-toggle="tab" href="#text3"></a>
  435.  <div class="tab-content">
  436.   <div class="tab-pane fade" id="text3">
  437.    <div class="card p-3 border-0 rounded-0" style="background-color:rgba(0,0,0,.8); height:166px; position:absolute; bottom:0px; left:0px;">
  438.   <!--- Hidden quote --->
  439.    <p class="my-auto" style="font-size: 20px; text-align: center; letter-spacing: 2px;">" Quote goes right here. "</p>
  440.    </div>
  441.   </div>
  442.  </div>
  443. </div>
  444. </div>
  445. </div>
  446. </div>
  447. </div>
  448.  <div class="row no-gutters">
  449.  
  450.  <!---- Music box ---->
  451.   <div class="col-8 pl-3 pb-3" style="margin-top:-10px">
  452.    <div class="card rounded-0 border-0" style="height:40px; background-color:#c9773c;">
  453.     <div class="row no-gutters">
  454.   <!--- Song/Musician name --->
  455.      <div class="col-5">
  456.      <p class="mr-3" style="font-size:16px; text-align:right"><b>Song name</b></p>
  457.        <p class="mr-4" style="font-size:13px; margin-top:-20px; text-align:right">Musician name</p>
  458.        </div>
  459.   <!--- Play button --->
  460.        <div class="col-1 my-auto">
  461.        <i class="fa-regular fa-play-pause" style="font-size:30px; text-align:center"></i>
  462.         <div style="position:absolute; bottom:-18px; left:-10px;">
  463.    <!-- Audio player -->
  464.       <audio controls="" style="opacity:0;">
  465.       <source src=" audio file here ">
  466.       </audio>
  467.       </div>
  468.        </div>
  469.   <!--- Fake play bar --->          
  470.        <div class="col-6 my-auto">
  471.         <div class="progress rounded mr-3" style="background-color:#000">
  472.        <div class="progress-bar" style="width: 35%; height: 12px; background-color: #fff">
  473.        </div>
  474.       </div>
  475.      </div>
  476.     </div>
  477.    </div>
  478.   </div>
  479.  <!---- Copyright box ---->
  480.   <div class="col-4 pb-3 px-3" style="margin-top:-10px">
  481.    <div class="card rounded-0 border-0" style="height:40px; background-color:#c9773c;">
  482.    <p class="m-auto" style="font-size:13px; text-align:center">Property® owned by Company. Name owned by Username.</p>
  483.    </div>
  484.   </div>
  485.  </div>
  486. </div>
  487. <!----- Code credit (do not remove/alter) ----->
  488.    <p style="font-size:13px; text-align:left;"><a style="color:#c4415d;" href="https://toyhou.se/MCDogResource"><i class="fas fa-bullseye"></i> Code by maniCARNY</a></p>
  489. </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!