Advertisement
LeafJelly

Small Decorative Code - Meat Theme - IMG BG - Short

Oct 29th, 2022 (edited)
520
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.95 KB | None | 0 0
  1. <!----------------------------
  2. Free to Use Small Decorative Code
  3.    Meat Theme - Short Version
  4.        Image/Pattern Background
  5.        by LeafJelly
  6.  
  7. Short Version: Mood board ONLY
  8.  
  9.    Hex Codes
  10. Background 1: #430000
  11. Background 2: #0F0000
  12. Symbol: #A91D1D
  13. Symbol 2: #B2B2B2
  14. Font: #C62C2C
  15.  
  16.    Customization
  17. fas - is the symbol weight s=solid r=regular l-light t=thin d=duotone
  18. fa-symbol changes what the symbol is using the names found here https://fontawesome.com/ search for the symbols you want here adn replace the name with it.
  19. transform:rotate(#deg) - Rotates Symbols
  20. margin: #px #px - changes the positon of the symbol in Y X order. -Y moves up -X moves left. +Y moves down +X moves right.
  21. ---------------------------->
  22. <div class="container col-md-8 col-lg-3 my-4 p-1">
  23.  
  24. <!-------Background Image Replace the URl--------->    
  25. <div class="card col-12 border-0 mt-4 p-2" style="height:280px; min-width:380px;border-radius:.6em;
  26.    background:url(
  27.    https://images.unsplash.com/photo-1485337067832-85c243e4d4ac?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
  28.    ) center;">
  29.    
  30.     <div class="text-center" >
  31.     <!----------Decorations Left Side------------>
  32.     <i class="fas fa-knife" style="position:absolute; margin:-40px -155px; font-size:80px; transform:rotate(-15deg); color:#B2B2B2;"></i>
  33.     <i class="fas fa-steak" style="position:absolute; margin:-40px -45px; font-size:45px; transform:rotate(-190deg); color:#A91D1D"></i>
  34.     <i class="fas fa-steak" style="position:absolute; margin:20px -30px; font-size:30px; transform:rotate(90deg); color:#A91D1D"></i>
  35.    
  36.     <!-----------Background Image & Character Image (Must be a Square Image)------------->    
  37.         <img src="https://cdn.discordapp.com/attachments/395263691085316096/1035721886732140594/unknown.png"
  38.        class="rounded-circle p-2 mb-1" style="height:120px; width:120px; margin-top:-50px;  
  39.        
  40.        background:url(
  41.        https://images.unsplash.com/photo-1485337067832-85c243e4d4ac?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
  42.        ) center; background-attachment:fixed">
  43.     <!----------Decorations Right Side------------>
  44.     <i class="fas fa-steak" style="position:absolute; margin:-40px -5px; font-size:45px; transform:rotate(-96deg); color:#A91D1D"></i>
  45.     <i class="fas fa-steak" style="position:absolute; margin:20px 0px; font-size:30px; transform:rotate(-190deg); color:#A91D1D"></i>
  46.     <i class="fas fa-fork" style="position:absolute; margin:-40px 70px; font-size:80px; transform:rotate(-80deg); color:#B2B2B2"></i>
  47.  
  48.        
  49.     </div>
  50.    
  51. <!-----------Content Box------------->
  52.     <div class="card col-0 px-1 m-0 text-center" style="height:210px; overflow:auto; font-size:12px; background:#0F0000; color:#DECCCC;">
  53.          <p class="my-auto" style="color:#C62C2C; font-size:13px">
  54.          Name · Age · Pro/nouns
  55.          <br>Gender · Race/Species · Occupation
  56.          </p>
  57.          <div class="col-auto m-1 p-0" style="border-bottom:1px solid #430000; margin:auto"></div>
  58.  
  59.          
  60. <!--------Mood Board Replace the URLS ------------>
  61.     <div class="row no-gutters pb-1">
  62.         <div class="col-4 pr-1 border-0" style="height:130px">
  63.             <div class="h-100" style="background-position:center;background-size:cover;
  64.            background-image:url(
  65.            
  66.            https://i.pinimg.com/564x/e7/31/c5/e731c5351ed346c26ff4dc5424e8ae40.jpg
  67.            
  68.            )"></div>
  69.         </div>
  70.        
  71.         <div class="col-4 pr-1 border-0" style="height:130px">
  72.             <div class="h-100" style="background-position:center;background-size:cover;
  73.            background-image:url(
  74.            
  75.            https://64.media.tumblr.com/0555772ef03939aadc8e0c464a255651/tumblr_pwmvh3he5c1ysao0po1_500.gif
  76.            
  77.            )"></div>
  78.         </div>
  79.        
  80.         <div class="col-4 pr-1 border-0" style="height:130px">
  81.             <div class="h-100" style="background-position:center;background-size:cover;
  82.            background-image:url(
  83.            
  84.            https://images.unsplash.com/photo-1524634768608-bc1821d60420?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80
  85.            
  86.            )"></div>
  87.         </div>
  88.     </div>    
  89.     </div>        
  90.  
  91.    
  92.    
  93. </div>
  94. <!---------Decorations at the bottom left--------------->
  95. <i class="fas fa-raindrops" style="position:absolute; margin:-30px -20px; font-size:50px; color:#A91D1D"></i>
  96.  
  97.  
  98. <div class="text-center" >
  99. <!---------Credit do not remove--------------->    
  100.     <a href="/LeafJelly" title="HTML by LeafJelly" style="color:#A91D1D"></i> <i class="fas fa-plate-utensils"></i></a>
  101.    
  102. <!---------Decorations at the bottom right--------------->    
  103. <i class="fas fa-steak" style="position:absolute; margin:-25px 160px; font-size:40px; transform:rotate(-10deg); color:#A91D1D"></i>
  104. </div>
  105. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement