Advertisement
meromerc

Aura (Updated)

May 16th, 2024 (edited)
670
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.38 KB | None | 0 0
  1. <!--
  2.  
  3.    AURA
  4.    by meromercury
  5.    
  6.    released 4/20/24 || updated 5/16/24
  7.    
  8.    FontAwesome icons included, remove <! -- and -- > to use.
  9.    See the FontAwesome website for a full list of icon options.
  10.    
  11.      accent color: #c4205a
  12.      highlight and use ctrl+F to change
  13.  
  14. --->
  15.  
  16.  
  17. <div class="container col-sm-12 col-md-8 col-lg-6 mb-4">
  18.  
  19.   <!----- place your image URL between the ( parentheses ) ----->
  20.     <div class="card rounded-0 bg-faded" style="height:125px;width:100%;
  21.    background-image:url(IMAGE URL);
  22.    background-size:cover;background-position:center center;border: 0px;"></div>
  23.    
  24.     <!--  -->
  25.     <div class="container py-3">
  26.     <div class="card w-100 text-uppercase text-center bg-none border-top-0 border-bottom-0 rounded-0 py-3 px-2 display-4" style="color:#c4205a ;letter-spacing:.1em;border: 2px solid;">
  27.  
  28.   <!----- quote or name ----->
  29.       <p>
  30.         Do you want to see the girl who lives <b>behind the aura?</b>
  31.       </p>
  32.     </div>
  33.     </div>
  34.  
  35.   <div class="card px-0 rounded-0 bg-faded" style=";width:100%;border-width:2px;border:0px solid #c4205a ;">
  36.  
  37. <!----- BENEATH THIS LINE: remove the <! --  -- > AND the words to use the fontawesome icons ----->
  38.  
  39.     <div class="row m-3 mb-3" style="font-size:16px">
  40.       <div class="col">
  41.         <div class="d-inline-flex w-100 my-0">
  42.           <span class="my-2 font-weight-bold" style="color:#c4205a">
  43.            
  44.             <!--
  45.            <i class="fa-duotone fa-address-card fa-lg"></i>
  46.            -->
  47.             NAME
  48.            
  49.           </span>
  50.           <hr class="flex-grow-1 mx-4 my-auto">
  51.           <span class="my-2">
  52.             info
  53.           </span>
  54.         </div>
  55.         <div class="d-inline-flex w-100">
  56.           <span class="my-2 font-weight-bold" style="color:#c4205a">
  57.            
  58.             <!--
  59.            <i class="fa-duotone fa-clock fa-lg"></i>
  60.            -->
  61.             AGE
  62.            
  63.           </span>
  64.           <hr class="flex-grow-1 mx-4 my-auto">
  65.           <span class="my-2">
  66.             info
  67.           </span>
  68.         </div>
  69.         <div class="d-inline-flex w-100">
  70.           <span class="my-2 font-weight-bold" style="color:#c4205a">
  71.            
  72.             <!--
  73.            <i class="fa-solid fa-person-dress-simple fa-lg"></i>
  74.            -->
  75.             PRONOUNS
  76.            
  77.           </span>
  78.           <hr class="flex-grow-1 mx-4 my-auto">
  79.           <span class="my-2">
  80.             info
  81.           </span>
  82.         </div>
  83.       </div>
  84.      
  85.       <div class="card h-auto w-0 m-2 mt-3 d-none d-lg-block rounded-0" style="border:2px solid #c4205a"></div>
  86.      
  87.       <div class="col">
  88.         <div class="d-inline-flex w-100 my-0">
  89.           <span class="my-2 font-weight-bold" style="color:#c4205a">
  90.            
  91.             <!--
  92.            <i class="fa-duotone fa-calendar-days fa-lg"></i>
  93.            -->
  94.             OBTAINED
  95.            
  96.           </span>
  97.           <hr class="flex-grow-1 mx-4 my-auto">
  98.           <span class="my-2">
  99.             info
  100.           </span>
  101.         </div>
  102.         <div class="d-inline-flex w-100">
  103.           <span class="my-2 font-weight-bold" style="color:#c4205a">
  104.            
  105.             <!--
  106.            <i class="fa-duotone fa-paintbrush fa-lg"></i>
  107.            -->
  108.             DESIGNER
  109.            
  110.           </span>
  111.           <hr class="flex-grow-1 mx-4 my-auto">
  112.           <span class="my-2">
  113.             info
  114.           </span>
  115.         </div>
  116.         <div class="d-inline-flex w-100">
  117.           <span class="my-2 font-weight-bold" style="color:#c4205a">
  118.            
  119.             <!--
  120.            <i class="fa-sharp fa-solid fa-dollar-sign fa-lg"></i>
  121.            -->
  122.             WORTH
  123.            
  124.           </span>
  125.           <hr class="flex-grow-1 mx-4 my-auto">
  126.           <span class="my-2">
  127.             info
  128.           </span>
  129.         </div>
  130.       </div>
  131.     </div>
  132.    <!------- end rows ------->
  133.    
  134.    
  135.    <!------- bio start ------->
  136.    <div class="mt-0 mb-3 text-muted table-responsive" style="max-height:120px;font-size:12px;padding:0px 28px 0px 28px">
  137.      
  138.       <p>This scrolls, but shorter looks better. Or delete this paragraph if you don't want text. Remember to use < p > tags for paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis justo sollicitudin posuere sollicitudin. Phasellus ut pellentesque elit. Fusce magna turpis, posuere tristique eros vitae, dapibus convallis odio. Nunc lobortis id nunc at efficitur. Nullam arcu velit, interdum a turpis vel, consectetur euismod ligula. Fusce quis sem tincidunt, auctor sapien vel, vulputate dolor.</p>
  139.      
  140.       <!-- paste above this line to expand the biography -->
  141.      </div>
  142.    <!------- end bio ------->
  143.    
  144.    <!------- player start ------->
  145.    <div class="px-4 mt-0 mb-3">
  146.      
  147.       <div class="d-inline-flex w-100 justify-content-between" style="font-size:18px">
  148.           <a class="my-auto ml-2 px-0 btn border-0 melody-embed" style="color:#c4205a;" href="#">
  149.             <iframe frameborder="0" style="height:30px;width:30px;opacity:0.0001;position:absolute;"
  150.              
  151.              src="https://www.youtube.com/embed/YaVSTFv9QOc">
  152.             <!--
  153.            MUSIC PLAYER TUTORIAL
  154.            
  155.            for playlists, copy everything after ?list= and paste at the end:
  156.            https://www.youtube.com/embed/videoseries?
  157.            ^^ then replace "URL" with that
  158.            
  159.            for songs, copy everything after watch?v= and replace "URL" with that
  160.            
  161.            remember to keep the "QUOTATION MARKS" around the link or else it could break.
  162.            -->            
  163.              
  164.             </iframe>
  165.             <i class="fa-regular fa-circle-play fa-2x"></i>
  166.           </a>
  167.           <hr class="flex-grow-1 mx-4 my-auto d-none d-lg-block">
  168.           <p class="my-2" style="letter-spacing:.2em;">
  169.             <span style="color:#c4205a;font-weight:bold"><i class="fa-solid fa-music fa-sm pr-2"></i>
  170.             TITLE
  171.             </span>-<span style="font-style:italic;">
  172.             ARTIST
  173.             </span>
  174.           </p>
  175.       </div>
  176.      
  177.    </div>
  178. </div>
  179.  
  180. <div class="m-1 text-right text-primary" style="font-size:14px">
  181. <a target="_blank" href="https://toyhou.se/meromercury" data-toggle="tooltip" title="code" style="color:#A4A4A4;font-weight:600"><i class="fal fa-code"></i></a></div>
  182. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement