SparklyLightus

Bang Bang

Oct 22nd, 2021
1,224
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--
  2.    261718 >> TEXT
  3.    9A565F >> BACKGROUND
  4.    4B2D2F >> ACCENT
  5. -->
  6. <div class="mx-3 mb-3 p-2 mx-auto row no-gutters" style="background: #9A565F; color: #261718; max-width: 800px; margin-top: 90px">
  7.     <!-- ICON -->
  8.     <div class="col-auto">
  9.         <img src="//via.placeholder.com/200" style="border: 6px solid #4B2D2F; max-height: 130px; max-width: 130px; margin-top: -80px">
  10.         <i class="far fa-heart-broken text-white display-4" style="position: absolute; bottom: -8px; right: -8px; transform: rotate(25deg)"></i>
  11.     </div>
  12.     <!-- HEADER -->
  13.     <div class="p-2 col mt-auto">
  14.         <!-- MUSIC PLAYER -->
  15.         <div class="float-right">
  16.             <i class="fas fa-compact-disc fa-2x" style="margin-right: -35px"></i>
  17.             <!-- CHANGE OUT ID (the part after v= on the video you wish) FROM _3m6qBKozms TO THE ONE YOU WANT -->
  18.             <iframe
  19.            
  20.                src="https://www.youtube.com/embed/_3m6qBKozms?controls=0"
  21.            
  22.            class="mb-n1" style="border: none; height: 30px; width: 35px; opacity: 0"
  23.            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  24.         </div>
  25.        
  26.         <!-- QUOTE -->
  27.         <h3>
  28.             <i class="mr-n3 far fa-heart faded" style="transform: rotate(-25deg)"></i>
  29.                 "Lorem ipsum sit dolor amet."
  30.             <i class="ml-n3 far fa-heart faded" style="transform: rotate(25deg)"></i>
  31.         </h3>
  32.     </div>
  33.    
  34.     <!-- LINE BREAK --> <div class="col-12"></div>
  35.    
  36.     <!-- ABOUT -->
  37.     <div class="p-2 col-md-8 text-justify" style="text-indent: 30px">
  38.         <p>Introduce yourself here. This box will grow with content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat est non mi sollicitudin, id congue diam maximus. Integer vehicula risus nec leo iaculis, quis tristique nunc cursus. Etiam vel maximus metus, non sollicitudin sapien. Morbi pretium rhoncus enim, ut maximus erat tincidunt non.</p>
  39.         <p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sodales in urna in pulvinar.</p>
  40.     </div>
  41.     <!-- LINKS/BASICS -->
  42.     <div class="p-2 col-md-4 align-items-center justify-content-center flex-column" style="font-size: 20px">
  43.         <h6>
  44.             Pro/nouns || Age || whatever
  45.         </h6>
  46.         <div>
  47.             <a href="TWITTERLINK" class="mr-1"><i class="p-2 fab fa-twitter text-white" style="background: #4B2D2F"></i></a>
  48.             <a href="TUMBLRLINK" class="mr-1"><i class="p-2 fab fa-tumblr text-white" style="background: #4B2D2F"></i></a>
  49.             <a href="INSTAGRAMLINK" class="mr-1"><i class="p-2 fab fa-instagram text-white" style="background: #4B2D2F"></i></a>
  50.             <a href="DEVIANTARTLINK" class="mr-1"><i class="p-2 fab fa-deviantart text-white" style="background: #4B2D2F"></i></a>
  51.             <a href="TWITCHLINK"><i class="p-2 fab fa-twitch text-white" style="background: #4B2D2F"></i></a>
  52.         </div>
  53.     </div>
  54.    
  55.     <!-- FRIENDS -->
  56.     <div class="col-md-6">
  57.         <h1> <i class="mr-n3 far fa-heart-rate faded"></i> Friends </h1>
  58.        
  59.         <a href="PERSONLINK">
  60.             <img src="//via.placeholder.com/200" class="m-1" style="height: 110px; width: 110px; border: 3px solid #4B2D2F;"></a>
  61.         <a href="PERSONLINK">
  62.             <img src="//via.placeholder.com/200" class="m-1" style="height: 110px; width: 110px; border: 3px solid #4B2D2F;"></a>
  63.         <a href="PERSONLINK">
  64.             <img src="//via.placeholder.com/200" class="m-1" style="height: 110px; width: 110px; border: 3px solid #4B2D2F;"></a>
  65.         <a href="PERSONLINK">
  66.             <img src="//via.placeholder.com/200" class="m-1" style="height: 110px; width: 110px; border: 3px solid #4B2D2F;"></a>
  67.         <a href="PERSONLINK">
  68.             <img src="//via.placeholder.com/200" class="m-1" style="height: 110px; width: 110px; border: 3px solid #4B2D2F;"></a>
  69.         <a href="PERSONLINK">
  70.             <img src="//via.placeholder.com/200" class="m-1" style="height: 110px; width: 110px; border: 3px solid #4B2D2F;"></a>
  71.     </div>
  72.     <!-- CHARACTERS -->
  73.     <div class="col-md-6">
  74.         <h1> <i class="mr-n3 far fa-heart-rate faded"></i> Featured Characters </h1>
  75.        
  76.         <a href="CHARLINK">
  77.             <img src="//via.placeholder.com/200" class="m-1" style="height: 110px; width: 110px; border: 3px solid #4B2D2F;"></a>
  78.         <a href="CHARLINK">
  79.             <img src="//via.placeholder.com/200" class="m-1" style="height: 110px; width: 110px; border: 3px solid #4B2D2F;"></a>
  80.         <a href="CHARLINK">
  81.             <img src="//via.placeholder.com/200" class="m-1" style="height: 110px; width: 110px; border: 3px solid #4B2D2F;"></a>
  82.         <a href="CHARLINK">
  83.             <img src="//via.placeholder.com/200" class="m-1" style="height: 110px; width: 110px; border: 3px solid #4B2D2F;"></a>
  84.         <a href="CHARLINK">
  85.             <img src="//via.placeholder.com/200" class="m-1" style="height: 110px; width: 110px; border: 3px solid #4B2D2F;"></a>
  86.         <a href="CHARLINK">
  87.             <img src="//via.placeholder.com/200" class="m-1" style="height: 110px; width: 110px; border: 3px solid #4B2D2F;"></a>
  88.     </div>
  89.    
  90.     <!-- ........................... CREDITS -->
  91.     <div class="col-12 text-center">
  92.         <a href="/SparklyCodes" data-toggle="tooltip" title="HTML by SparklyCodes" style="color: #4B2D2F"><i class="fas fa-code"></i></a>
  93.     </div>
  94. </div>
RAW Paste Data