Advertisement
MCDogWarrior

Fan Character [Custom]

Aug 8th, 2022 (edited)
1,261
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 23.22 KB | None | 0 0
  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