API tools faq
paste
Advertisement
LeafJelly

Simple Sky Code: Night, Short

LeafJelly
Oct 26th, 2022 (edited)
1,176
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.24 KB | Source Code | 0 0
raw download clone embed print report
  1. <!------------------------
  2.    Free to Use Simple Sky Code: Night
  3.        SHORT VERSION
  4.        by LeafJelly
  5.  
  6. Stars & Moon: #E7EDFF #B1C2F3
  7. Font: #D8DEF0
  8. Font Accent: #9EBEE7
  9. Sky Gradient (top down): #00001C, #00003A, #3B4E87
  10. Clouds: #3B4E87
  11. Content Box: #00002E
  12. ------------------------>
  13.  
  14. <div class="col-12 col-lg-4 mb-5" style="margin:auto;max-width:500px;">
  15.     <div class="col-12 pt-3" style="border-radius: 5px 5px 0px 0px;height:90px;background-image: linear-gradient(180deg, #00001C,#00001C, #00001C, #00003A, #3B4E87); color:#E7EDFF">
  16.         <!--------Decorations on Top ------>
  17.         <i class="fa-solid fa-moon fa-3x" style="position:absolute; transform:rotate(-15deg); margin:10px;"></i>
  18.         <i class="fa-solid fa-star" style="position:absolute; transform:rotate(-5deg); margin:5px 60px"></i>
  19.         <i class="fa-solid fa-star fa-xs" style="position:absolute; transform:rotate(-12deg); margin:60px -10px; color:#B1C2F3"></i>
  20.         <i class="fa-solid fa-star fa-xs" style="position:absolute; transform:rotate(-14deg); margin:35px 116px"></i>
  21.         <i class="fa-solid fa-star" style="position:absolute; transform:rotate(12deg); margin:10px 170px; color:#B1C2F3"></i>
  22.         <i class="fa-solid fa-star" style="position:absolute; transform:rotate(-5deg); margin:40px 220px"></i>
  23.     <div class="col-12 bg-transparent text-right">
  24.         <i class="fa-solid fa-star fa-xs" style="position:absolute; transform:rotate(-10deg); margin:35px -170px"></i>
  25.         <i class="fa-solid fa-star fa-xs" style="position:absolute; transform:rotate(10deg); margin:17px -147px; color:#B1C2F3"></i>
  26.         <i class="fa-solid fa-star fa-lg" style="position:absolute; transform:rotate(-15deg); margin:20px -50px"></i>    
  27.         <i class="fa-solid fa-star fa-xs" style="position:absolute; transform:rotate(13deg); margin:10px 0px; color:#B1C2F3"></i>
  28.     </div>    
  29.     </div>
  30.    
  31. <!------------- Content Box ---------------->
  32.  
  33. <div class="col-12 p-2" style="height:300px; overflow:auto; background:#3B4E87; color:#D8DEF0;">
  34.     <div class="card col-12 pt-1" style="background:#00002E; min-height:280px">
  35.     <div class="row no-gutters">
  36.     <!-----Left------->    
  37.         <div class="col-12 col-lg-7 align-items-center " style="font-variant:small-caps; margin:auto; font-weight:200; word-break:break-word;">
  38.             <div class="row no-gutters">
  39.             <div class="col-4 align-items-center" style="font-weight:400; color:#9EBEE7"><p>
  40.                 Name</p></div>
  41.             <div class="col-8 text-right mb-1"><p>
  42.                 First Name Last Name</p></div>
  43.            
  44.             <div class="col-4 align-items-center" style="font-weight:400; color:#9EBEE7"><p>
  45.                 Gender</p></div>
  46.             <div class="col-8 text-right mb-1"><p>
  47.                 Content</p></div>
  48.            
  49.             <div class="col-4 align-items-center" style="font-weight:400; color:#9EBEE7"><p>
  50.                 Height</p></div>
  51.             <div class="col-8 text-right mb-1"><p>
  52.                 6' 0" (182.88cm)</p></div>
  53.            
  54.             <div class="col-5 align-items-center" style="font-weight:400; color:#9EBEE7"><p>
  55.                 Occupation</p></div>
  56.             <div class="col-7 text-right mb-1"><p>
  57.                 Content Content</p></div>
  58.             </div>
  59.            
  60.             <!------Copy and Paste above here for extra rows------->  
  61.         <div class="col-1 col-lg-2 text-center py-1" style="font-size:8px;margin:auto;height:100px;overflow: hidden;"></div>            
  62.         </div>
  63.  
  64.     <!-----Right------>    
  65.       <div class="col-12 col-lg-5" style="font-variant:small-caps; margin:auto; font-weight:200; word-break:break-word;">
  66.             <div class="row no-gutters">
  67.             <div class="col-4 align-items-center" style="font-weight:400; color:#9EBEE7"><p>
  68.                 Age</p></div>
  69.             <div class="col-8 text-right mb-1"><p>
  70.                 # years</p></div>
  71.            
  72.             <div class="col-5 align-items-center" style="font-weight:400; color:#9EBEE7"><p>
  73.                 Pronouns</p></div>
  74.             <div class="col-7 text-right mb-1"><p>
  75.                 They/Them It/It's</p></div>
  76.            
  77.             <div class="col-4 align-items-center" style="font-weight:400; color:#9EBEE7"><p>
  78.                 Species</p></div>
  79.             <div class="col-8 text-right mb-1"><p>
  80.                 Or Race, Content</p></div>
  81.            
  82.             <div class="col-4 align-items-center" style="font-weight:400; color:#9EBEE7"><p>
  83.                 Worth</p></div>
  84.             <div class="col-8 text-right mb-1"><p>
  85.                 $$$</p></div>
  86.            
  87.             <!------Copy and Paste above here for extra rows------->    
  88.             </div>
  89.         </div>
  90.        
  91. <!--------Mood Board Replace the URLS ------------>
  92.     <div class="col-12 my-2">
  93.     <div class="row no-gutters">
  94.         <div class="col-4 pr-1 border-0" style="height:140px">
  95.             <div class="h-100" style="background-position:center;background-size:cover;
  96.            background-image:url(
  97.            
  98.            https://media.tenor.com/rDWAbi_iMRwAAAAC/moon-anime.gif
  99.            
  100.            )"></div>
  101.         </div>
  102.        
  103.         <div class="col-4 pr-1 border-0" style="height:140px">
  104.             <div class="h-100" style="background-position:center;background-size:cover;
  105.            background-image:url(
  106.            
  107.            https://media.tenor.com/R7pAjG0dShUAAAAC/80s-anime.gif
  108.            
  109.            )"></div>
  110.         </div>
  111.        
  112.         <div class="col-4 pr-1 border-0" style="height:140px">
  113.             <div class="h-100" style="background-position:center;background-size:cover;
  114.            background-image:url(
  115.            
  116.            https://i.pinimg.com/originals/de/2e/2b/de2e2b6717d388a9a82737d23c1bf1e2.gif
  117.            
  118.            )"></div>
  119.         </div>
  120.     </div>    
  121.     </div>
  122.  
  123.  
  124.     </div>
  125.     </div>
  126. </div>
  127.    
  128.    
  129.    
  130. <div class="col-12 text-center" style="color:#3B4E87">
  131.     <!------Clouds------->
  132.     <i class="fa-solid fa-cloud" style="font-size:100px;position:absolute; margin:-60px -260px;"></i>
  133.     <i class="fa-solid fa-cloud" style="font-size:80px;position:absolute; margin:-60px -300px;"></i>
  134.     <i class="fa-solid fa-cloud" style="font-size:80px;position:absolute; margin:-42px -160px;"></i>
  135.    
  136.     <i class="fa-solid fa-cloud" style="font-size:80px;position:absolute; margin:-40px 130px;"></i>
  137.     <i class="fa-solid fa-cloud" style="font-size:100px;position:absolute; margin:-80px 180px;"></i>
  138.    
  139. <!--------Pagedoll must be a transparent png, your image can be square or vertical.
  140. Change the min-height if you have a very long image
  141.  
  142. You can remove this section if you don't want it cuz it does cover some of the content box
  143. ---------->
  144.     <div class="col-7 col-lg-12" style="position:absolute;margin:-320px 350px; background-position:bottom right; background-size:contain; background-repeat:no-repeat;height:350px; width:300px;
  145.    background-image:url(
  146.    
  147.    https://file.toyhou.se/images/1680496_NKsKFbf4q1gM4Tt.png?1557282509
  148.    
  149.    )"> </div>
  150.    
  151. <!----Credit do not remove---->    
  152.     <a href="https://toyhou.se/LeafJelly" title="HTML by LeafJelly"><i class="fa-solid fa-stars" style="color:#3B4E87"></i></a>
  153. </div>
  154.  
  155. </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!