API tools faq
paste
Advertisement
LeafJelly

Simple Sky Code: Night, Full

LeafJelly
Oct 26th, 2022 (edited)
1,234
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.92 KB | Source Code | 0 0
raw download clone embed print report
  1. <!------------------------
  2.    Free to Use Simple Sky Code: Night
  3.        FULL 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:160px">
  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:160px">
  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:160px">
  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. <!----------- Divder-------------->
  124.     <div class="col-5 my-2" style="border-bottom:1px solid #7E8FC6; margin:auto"></div>
  125.         <!----Symbol---->
  126.         <i class="fa-regular fa-stars"></i>
  127.     <div class="col-5 my-2" style="border-bottom:1px solid #7E8FC6; margin:auto"></div>
  128.  
  129. <!--------------Text Box--------------->
  130. <div class="col-12 my-2 text-center">
  131.     <p>This can be any text you want, story, personality, design notes. This does not scroll. </p>
  132.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  133. </div>
  134.  
  135.    
  136. <!--------------Likes and Dislikes--------------->
  137. <div class="col-6 mx-2 my-2 row">
  138.     <div class="col-4 my-2" style="border-top:1px solid #7E8FC6; margin:auto"></div>
  139.         <!----Heart Symbol---->
  140.         <i class="fa-regular fa-heart"></i>
  141.     <div class="col-4 my-2" style="border-top:1px solid #7E8FC6; margin:auto"></div>
  142.    
  143.     <ul>
  144.         <li>This does not scroll</li>
  145.         <li>Add Likes here</li>
  146.         <li>Aliquam tincidunt mauris</li>
  147.         <li>Vestibulum auctor dapibus.</li>
  148.         <li>Integer vitae libero ac risus egestas placerat.</li>
  149.     </ul>
  150. </div>
  151.  
  152. <div class="col-6 my-2 row">
  153.     <div class="col-4 my-2" style="border-top:1px solid #7E8FC6; margin:auto"></div>
  154.         <!----X Symbol---->
  155.         <i class="fa-regular fa-xmark"></i>
  156.     <div class="col-4 my-2" style="border-top:1px solid #7E8FC6; margin:auto"></div>
  157.    
  158.     <ul>
  159.         <li>This does not scroll</li>
  160.         <li>Add disikes here</li>
  161.         <li>Vestibulum auctor dapibus.</li>
  162.         <li>Integer vitae libero ac risus egestas placerat.</li>
  163.     </ul>
  164. </div>
  165.  
  166. <!----------- Divder-------------->
  167.     <div class="col-5 my-2" style="border-bottom:1px solid #7E8FC6; margin:auto"></div>
  168.         <!----Symbol---->
  169.         <i class="fa-regular fa-moon"></i>
  170.     <div class="col-5 my-2" style="border-bottom:1px solid #7E8FC6; margin:auto"></div>
  171.  
  172. <!--------------Trivia--------------->
  173. <div class="col-12 my-2" style="overflow:auto;height:120px;">
  174.     <ul>
  175.         <li>This does scroll. add as much as you want</li>
  176.         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </li>
  177.         <li>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
  178.         <li>Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
  179.         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </li>
  180.     </ul>    
  181. </div>
  182.  
  183. <!----------- Divder-------------->
  184.     <div class="col-5 my-2" style="border-bottom:1px solid #7E8FC6; margin:auto"></div>
  185.         <!----Symbol---->
  186.         <i class="fa-regular fa-users"></i>
  187.     <div class="col-5 my-2" style="border-bottom:1px solid #7E8FC6; margin:auto"></div>
  188.  
  189. <!--------------Relationships--------------->
  190. <div class="col-12 my-2 text-center">
  191.  
  192. <!------Relation 1 Image on Left Star-------->
  193.     <div class="col-12 pt-2 row no-gutter" style="margin:auto;">
  194.  
  195.       <!-------CHARACTER IMAGE 1 ------->
  196.         <div class="col-5 col-lg-4 p-0">
  197.             <div style="height:120px; width:120px; margin:auto; background:#3B4E87; background-position: center; background-size:cover; background-repeat: no-repeat;clip-path:polygon(50% 0%, 69% 27%, 100% 39%, 81% 65%, 85% 100%, 50% 89%, 15% 100%, 21% 65%, 0 40%, 29% 30%);
  198.                background-image: url(
  199.                
  200.                https://f2.toyhou.se/file/f2-toyhou-se/images/56345126_MfpYTsW0OSMzyxG.png?1666422197
  201.                
  202.                );"></div>
  203.             <a class="text-center p-0 m-0" style="font-size:15px;font-weight:500;font-variant:small-caps; word-break:keep-all; color:#9EBEE7"
  204.            href="https://toyhou.se/18569358.f2u-simple-sky">
  205.                 Character Name</a>
  206.             <p class="text-center m-0" style="font-weight:300;font-variant:small-caps; color:#D8DEF0">
  207.                 Relationship Type</p>    
  208.         </div>
  209.        
  210.      <!---------Relation Info 1------------>
  211.         <div class="col-7 col-lg-8 px-1" style="overflow:auto; height:170px">
  212.              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. </p>
  213.         </div>
  214.     </div>    
  215.      <!------Relationship 1 Image on Left end-------->
  216.  
  217.  
  218. <!------Relation 2 Image on Right Start-------->
  219.     <div class="col-12 pt-3 row no-gutter" style="margin:auto;">
  220.  
  221.      <!---------Relation Info 2------------>
  222.         <div class="col-7 col-lg-8 px-1" style="overflow:auto; height:170px">
  223.             <p>These will scroll if you add a lot of text like this. It looks better if you keep it short tho</p>
  224.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
  225.             <p>Vestibulum et diam est. Nam cursus enim vel justo facilisis, et pellentesque neque dignissim. Duis at blandit ex. Sed ultrices semper pharetra. Sed velit neque, vehicula sed maximus vitae, scelerisque quis odio.</p>
  226.         </div>
  227.        
  228.     <!-------CHARACTER IMAGE 2 ------->
  229.         <div class="col-5 col-lg-4 p-0">
  230.             <div style="height:120px; width:120px; margin:auto; background:#3B4E87; background-position: center; background-size:cover; background-repeat: no-repeat;clip-path:polygon(50% 0%, 69% 27%, 100% 39%, 81% 65%, 85% 100%, 50% 89%, 15% 100%, 21% 65%, 0 40%, 29% 30%);
  231.                background-image: url(
  232.                
  233.                https://f2.toyhou.se/file/f2-toyhou-se/images/56345531_AWNeZyOaMIRmZQs.png
  234.                
  235.                );"></div>
  236.             <a class="text-center p-0 m-0" style="font-size:15px;font-weight:500;font-variant:small-caps; word-break:keep-all; color:#9EBEE7"
  237.            href="https://toyhou.se/18569358.f2u-simple-sky">
  238.                 Character Name</a>
  239.             <p class="text-center m-0" style="font-weight:300;font-variant:small-caps; color:#D8DEF0">
  240.                 Relationship Type</p>    
  241.         </div>
  242.          
  243.     </div>    
  244.      <!------Relationship 2 Image on right end-------->
  245.  
  246.  <!-----------Copy and Paste more here---------------->
  247. </div>
  248.  
  249.  
  250.     </div>
  251.     </div>
  252. </div>
  253.    
  254.    
  255.    
  256. <div class="col-12 text-center" style="color:#3B4E87">
  257.     <!------Clouds------->
  258.     <i class="fa-solid fa-cloud" style="font-size:100px;position:absolute; margin:-60px -260px;"></i>
  259.     <i class="fa-solid fa-cloud" style="font-size:80px;position:absolute; margin:-60px -300px;"></i>
  260.     <i class="fa-solid fa-cloud" style="font-size:80px;position:absolute; margin:-42px -160px;"></i>
  261.    
  262.     <i class="fa-solid fa-cloud" style="font-size:80px;position:absolute; margin:-40px 130px;"></i>
  263.     <i class="fa-solid fa-cloud" style="font-size:100px;position:absolute; margin:-80px 180px;"></i>
  264.    
  265. <!--------Pagedoll must be a transparent png, your image can be square or vertical.
  266. Change the min-height if you have a very long image
  267.  
  268. You can remove this section if you don't want it cuz it does cover some of the content box
  269. ---------->
  270.     <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;
  271.    background-image:url(
  272.    
  273.    https://file.toyhou.se/images/1680496_NKsKFbf4q1gM4Tt.png?1557282509
  274.    
  275.    )"> </div>
  276.    
  277. <!----Credit do not remove---->    
  278.     <a href="https://toyhou.se/LeafJelly" title="HTML by LeafJelly"><i class="fa-solid fa-stars" style="color:#3B4E87"></i></a>
  279. </div>
  280. </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!