API tools faq
paste
Possibbly

Chardonnay

Possibbly
Jan 27th, 2022 (edited)
1,511
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.69 KB | None | 0 0
raw download clone embed print report
  1. <!-----
  2.  
  3. -- Background Color: #100F10
  4. -- "Faded" BG Color: #1A191B
  5. -- Border/Accent Color #1: #8D477F
  6. -- Accent Color #2: #AD7794
  7. -- Text Glow: #FFD42A
  8. -- Font-Awesome Colors & Name/Age/Pronouns: #FFF
  9. -- Text Color: #E2CFD6
  10. ------>
  11.  
  12.  
  13. <!--------------------------- Floating Icons --------------------------->
  14. <div>
  15. <i class="fad fa-flower-tulip hidden-md-down"
  16. style="z-index:2; font-size:52px; position:absolute; top:1020px;left:240px;transform:rotate(-45deg);color:#FFF"></i><!-- Paragraph -->
  17.  
  18.  
  19. <i class="fas fa-star hidden-md-down"
  20. style="z-index:2; font-size:32px; position:absolute; top:735px;left:655px; transform: rotate(25deg);color:#FFF"></i><!-- Bottom Mood -->
  21.  
  22. <i class="fas fa-star hidden-md-down"
  23. style="z-index:2; font-size:32px; position:absolute; top:525px;left:440px; transform: rotate(45deg);color:#FFF"></i><!-- Top Mood -->
  24.  
  25. <i class="fas fa-thumbtack hidden-md-down"
  26. style="z-index:2; font-size:48px; position:absolute; top:280px;left:1345px; transform: rotate(45deg);text-shadow:#FFD42A 0 0 10px, #FFD42A 0 0 10px;color:#FFF"></i> <!-- Top Right Info -->
  27.  
  28. <i class="fas fa-sparkles hidden-md-down"
  29. style="z-index:2; font-size:52px; position:absolute; top:190px;left:1350px;transform: rotate(25deg);text-shadow:#FFD42A 0 0 10px, #FFD42A 0 0 10px;color:#FFF"></i><!-- Top Right Corner -->
  30.  
  31. <i class="fal fa-flower hidden-md-down"
  32. style="z-index:2; font-size:52px; position:absolute; top:1325px;left:190px;
  33. transform: rotate(15deg); text-shadow:#FFD42A 0 0 10px, #FFD42A 0 0 10px;color:#FFF"></i> <!-- Bottom Left Corner -->
  34.  
  35. <!--------------------------- Floating Image --------------------------->
  36.       <div class="hidden-md-down" style="position:absolute; top:700px; left:1300px; z-index:2;width:200px;">
  37.          <img src="IMG_URL" class="m-1">
  38.       </div>
  39.  
  40.      
  41. <div class="container col-lg-10 col-sm-12">
  42. <div class="container py-2 px-2 col-lg-11 col-md-12 col-sm-12" style="
  43.        background-image:url('IMG_URL');
  44.    background-size:cover; background-position: top center; background-attachment:fixed; repeat:no-repeat ;border: 10px solid #8D477F;border-radius:12px;">
  45.    
  46.  
  47.    
  48. <!-------------------------------------------------------------------- QUOTE / TITLE -------------------------->
  49.                 <div class="card border-0 col-12 mx-auto py-2 my-2" style="background-color:#100F10">
  50.        
  51.                     <div>
  52.                         <span class="text-uppercase" style="opacity: .9;font-size:24px;color:#E2CFD6">
  53.                                    
  54.                         <i class="fas fa-stars mr-2" style="font-size:32px;color:#FFF"></i>
  55.                                    
  56.                           "Put a short quote here or something.."</span>
  57.                         <span class="pull-right mr-3 mt-2" style="font-variant:small-caps;font-size:20px;font-weight:700;text-shadow:#FFD42A 0 0 10px, #FFD42A 0 0 10px;color:#FFF">
  58.    
  59.                         name . age . prns</span>
  60.                        
  61.                   </div>
  62.          </div>
  63. <!-------------------------------------------------------------------- END ----------------------------------->
  64.  
  65.  
  66.     <div class="card border-0 col-12 mx-auto py-2 my-2 mt-3" style="background-color:#100F10;">
  67.        
  68.         <div class="row d-flex no-gutters mt-3">
  69.            
  70.             <div class="container d-flex border-0 col-lg-7 col-sm-4">
  71.                
  72.  
  73.  
  74.  
  75. <div class="row no-gutters">
  76. <!-------------------------------------------------------------------- MOODBOARD ROW 1 ----------------------------------->
  77.   <div class="col-4 pr-2 mb-3 hidden-md-down">
  78.     <div style="background-image: url('https://via.placeholder.com/200');
  79.    background-size: cover; background-position:center; min-height: 200px;width:200px;"></div>
  80.   </div>
  81.  
  82.   <div class="col-4 pr-md-1 pl-md-1 pl-2 mb-3 hidden-md-down">
  83.     <div style="background-image: url('https://via.placeholder.com/200');
  84.    background-size: cover; background-position:center; min-height: 200px;width:200px;"></div>
  85.   </div>
  86.  
  87.   <div class="col-4 pl-md-2 pr-md-0 pr-2 mb-3 hidden-md-down">
  88.     <div style="background-image: url('https://via.placeholder.com/200');
  89.    background-size: cover; background-position:center; min-height: 200px;width:200px;"></div>
  90.   </div>
  91.  
  92. <!-------------------------------------------------------------------- MOODBOARD ROW 2 ----------------------------------->
  93.  
  94.   <div class="col-4 pr-md-2 pl-md-0 pl-2 mb-3 hidden-md-down">
  95.     <div style="background-image: url('https://via.placeholder.com/200');
  96.    background-size: cover; background-position:center; min-height: 200px;width:200px;"></div>
  97.   </div>
  98.  
  99.   <div class="col-4 px-md-1 mb-3 xs-ml-5">
  100. <div style="background-image: url('https://via.placeholder.com/200');
  101.    background-size: cover; background-position:center; min-height: 200px;width:200px;"></div>
  102.   </div>
  103.  
  104.   <div class="col-4 pl-md-2 pr-md-0 pr-2 mb-3 hidden-md-down">
  105.     <div style="background-image: url('https://via.placeholder.com/200');
  106.    background-size: cover; background-position:center; min-height: 200px;width:200px;"></div>
  107.   </div>
  108.  
  109. <!-------------------------------------------------------------------- MOODBOARD ROW 3 ----------------------------------->
  110.  
  111.   <div class="col-4 pr-md-2 pl-md-0 pl-2 mb-3 hidden-md-down">
  112.     <div style="background-image: url('https://via.placeholder.com/200');
  113.    background-size: cover; background-position:center; min-height: 200px;width:200px;"></div>
  114.   </div>
  115.   <div class="col-4 px-md-1 mb-3 hidden-md-down">
  116.  
  117. <div style="background-image: url('https://via.placeholder.com/200');
  118.    background-size: cover; background-position:center; min-height: 200px;width:200px;"></div>
  119.   </div>
  120.  
  121.   <div class="col-4 pl-md-2 pr-md-0 pr-2 mb-3 hidden-md-down">
  122.     <div style="background-image: url('https://via.placeholder.com/200');
  123.    background-size: cover; background-position:center; min-height: 200px;width:200px;"></div>
  124.   </div>
  125.       </div>
  126. <!-------------------------------------------------------------------- MOODBOARD END ----------------------------------->
  127.  
  128.             </div>
  129.             <div class="d-flex flex-column flex-fill">
  130.             <div class="container border-0 mb-3 pt-4 pb-2 ml-1 rounded" style="background-color:#1A191B;height:400px;font-size:18px;color:#E2CFD6">
  131. <!-------------------------------------------------------------------- RIGHT INFO PANEL  ----------------------------------->
  132.                                <div>
  133.                                 <span class="text-uppercase">
  134.                                    
  135.                                     <i class="fas fa-eclipse mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  136.                                    
  137.                                     DOB</span>
  138.                                 <span class="pull-right mr-2 mt-1">Content</span>
  139.                                 <hr class="my-2" style="border-color: #fffff;">
  140.                                 </div>
  141.  
  142.  
  143.                                 <div>
  144.                                 <span class="text-uppercase">
  145.                                    
  146.                                     <i class="fas fa-moon-stars mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  147.                                    
  148.                                     Orientation</span>
  149.                                 <span class="pull-right mr-2 mt-1">Content</span>
  150.                                 <hr class="my-2" style="border-color: #fffff;">
  151.                                 </div>
  152.  
  153.                                 <div>
  154.                                 <span class="text-uppercase">
  155.                                    
  156.                                     <i class="fas fa-stars mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  157.                                    
  158.                                     Element</span>
  159.                                 <span class="pull-right mr-2 mt-1">Content</span>
  160.                                 <hr class="my-2" style="border-color: #fffff;">
  161.                                 </div>
  162.  
  163.                                 <div>
  164.                                 <span class="text-uppercase">
  165.                                    
  166.                                     <i class="fas fa-globe-americas mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  167.                                    
  168.                                     Sign</span>
  169.                                 <span class="pull-right mr-2 mt-1">Content</span>
  170.                                 <hr class="my-2" style="border-color: #fffff;">
  171.                                 </div>
  172.  
  173.                                 <div>
  174.                                 <span class="text-uppercase">
  175.                                    
  176.                                     <i class="fas fa-meteor mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  177.                                    
  178.                                     MBTI</span>
  179.                                 <span class="pull-right mr-2 mt-1">Content</span>
  180.                                 <hr class="my-2" style="border-color: #fffff;">
  181.                                 </div>
  182.                                
  183.                             <div>
  184.                                 <span class="text-uppercase">
  185.                                    
  186.                                     <i class="fas fa-music mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  187.                                    
  188.                                     Song 1</span>
  189.                                
  190.                   <a href="https://www.youtube.com/watch?v=ID_HERE" target="_blank">  
  191.                   <i style="font-size:18px;color:#8D477F" class="fas fa-play pull-right mr-2 mt-2"/></i>
  192.                   </a>
  193.                                 </div>
  194.                                
  195.                             <div>
  196.                                 <span class="text-uppercase">
  197.                                    
  198.                                     <i class="fas fa-music mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  199.                                    
  200.                                     Song 2</span>
  201.                                
  202.                   <a href="https://www.youtube.com/watch?v=ID_HERE" target="_blank">  
  203.                   <i style="font-size:18px;color:#8D477F" class="fas fa-play pull-right mr-2 mt-2"/></i>
  204.                   </a>
  205.                                 </div>
  206.                                
  207.                             <div>
  208.                                 <span class="text-uppercase">
  209.                                    
  210.                                     <i class="fas fa-music mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  211.                                    
  212.                                     Song 3</span>
  213.                                
  214.                   <a href="https://www.youtube.com/watch?v=ID_HERE" target="_blank">  
  215.                   <i style="font-size:18px;color:#8D477F" class="fas fa-play pull-right mr-2 mt-2"/></i>
  216.                   </a>
  217.                                 </div>
  218.             </div>
  219.            
  220. <!-------------------------------------------------------------------- LIKES/DISLIKES  ----------------------------------->
  221.            
  222.             <div class="row">
  223.                
  224.         <div class="container border-0 mb-3 pt-4 pb-2 col-5 rounded" style="background-color:#1A191B;">
  225.                                 <p class="mb-1" style="letter-spacing:3px;font-weight:900;color:#8D477F"><i style="color:#AD7794;" class="fas fa-heart fa-fw" /> Likes</p>
  226.                                 <ul class="mb-0 list-unstyled pl-2"style="font-size: .9em;color:#E2CFD6">
  227.                                     <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  228.                                     <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  229.                                     <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  230.                                     <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  231.                                     <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  232.  
  233.  
  234.                                 </ul>
  235.  
  236.    
  237.         </div>
  238.            
  239.         <div class="container border-0 mb-3 pt-4 pb-2 col-5 rounded" style="background-color:#1A191B;">
  240.  
  241.                                 <p class="mb-1" style="letter-spacing:3px;font-weight:900;color:#AD7794"><i style="color:#8D477F;" class="fas fa-heart-broken fa-fw" /> Dislikes</p>
  242.                                 <ul class="mb-0 list-unstyled pl-2"style="font-size: .9em;color:#E2CFD6">
  243.                                     <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  244.                                     <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  245.                                     <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  246.                                     <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  247.                                     <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  248.  
  249.  
  250.                                 </ul>
  251.    
  252.         </div>
  253.             </div><!-- Likes Row End -->
  254.            
  255.            
  256.         </div><!-- Flex  End---->
  257.        
  258.        
  259.         </div><!----- Row End ------>
  260.     </div> <!--- Top Card end -->
  261.    
  262. <!-------------------------------------------------------------------- BOTTOM PARAGRAPH ----------------------------------->
  263.     <div class="card border-0 col-12 mx-auto py-2 my-2 mt-4 pt-4" style="background-color:#100F10">
  264.     <div class="row">
  265.        
  266.         <div class="container rounded mb-3 py-3 col-7" style="background-color:#1A191B; border: 3px solid #8D477F;border-radius:4px;">
  267.            
  268.             <p style="color:#E2CFD6;">
  269.                
  270.             This box expands, and the image to the side expands along with it. Phasellus elementum mattis cursus. Donec sem libero, venenatis ac metus sit amet, malesuada blandit purus. Suspendisse purus quam, tempor sed rutrum sed, fringilla nec ante. Sed laoreet mollis tellus et pharetra. Quisque varius vitae lorem vel porta. Praesent lacus dui, pulvinar non risus sit amet, dapibus suscipit nisi. Duis metus ipsum, accumsan quis venenatis nec, cursus eget risus.
  271.  
  272.             </p>
  273.            
  274.             <p style="color:#E2CFD6">
  275.                
  276.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum mattis cursus. Donec sem libero, venenatis ac metus sit amet, malesuada blandit purus. Suspendisse purus quam, tempor sed rutrum sed, fringilla nec ante. Sed laoreet mollis tellus et pharetra. Quisque varius vitae lorem vel porta. Praesent lacus dui, pulvinar non risus sit amet, dapibus suscipit nisi. Duis metus ipsum, accumsan quis venenatis nec, cursus eget risus.
  277.  
  278.             </p>
  279.         </div>
  280. <!-------------------------------------------------------------------- BOTTOM LEFT IMAGE ----------------------------------->
  281.  
  282.         <!-- This can be an aesthetic image or an image of your oc! -->
  283.        
  284.          <div class="container col-4 mb-3" style="background:#EBEBEB;max-height:350px;
  285.            background-image:url('https://via.placeholder.com/350');
  286.            background-size:cover; background-position: top center;repeat:no-repeat;">
  287.          </div>
  288.        
  289.       </div>
  290.     </div>
  291. <!-------------------------------------------------------------------- CREDIT ----------------------------------->
  292.     <div class="mb-4 pb-1"><p class="pull-right" style="font-size:9.5px">
  293.         <a href="https://toyhou.se/Strixxus" style="color:#FFF;text-shadow:#FFF 0 0 10px, #FFD42A 0 0 10px;font-weight:900;font-size:18px">
  294.             <i class="fas fa-code"></i></a></p></div>
  295.  
  296. </div> <!--- Bg Img </div> --->
  297. </div>
  298. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
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!