API tools faq
paste
Possibbly

Riesling

Possibbly
Jan 28th, 2025
301
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.84 KB | None | 0 0
raw download clone embed print report
  1. <!----
  2.  
  3. Color Codes :)
  4.  
  5. Main ----------------- #7B7B7B
  6. "Faded" Main --------- #565656
  7. Color1 --------------- #333333  
  8. Color 2 -------------- #494949
  9. Color 3 -------------- #F1A9A5
  10. Color 4 -------------- #FABFBC
  11. Main Text Color ------ #FFF1F0
  12. Sidebar Text Color --- #fff5f0
  13.  
  14.  
  15. --->
  16.     <div class="container-fluid " style="max-width:1360px;font-family: Palatino, serif;font-size:16px;">
  17.        
  18. <div class="row p-0" style="border-top-left-radius:100px;background-color:#333333">
  19.    
  20.    
  21.     <!-------------- PAGEDOLL ----------------------------------->
  22.       <div class="hidden-md-down" style="position:absolute; top: 355px; right: -90px; z-index:2; ">
  23.         <img src="https://placehold.co/250" class="m-1" style="height:250px;">
  24.       </div>
  25.  
  26.    
  27.     <!--------------------- QUOTE HEADER ----------------------->
  28.    
  29.     <div class="col-12 pl-3 pb-4" style="max-height:100px;border-top-left-radius:100px;background-color:#494949">
  30.         <h1 class="pt-4 pull-right" style="font-size:42px;color:#FFF1F0">
  31.         Title Here<i class="fad fa-stars ml-3 mr-5"></i></h1></div>
  32.        
  33.        
  34.        
  35.        
  36.        
  37.  <!--------------------- STICKY SIDEBAR --- THIS IS ONLY VISIBLE ON LARGE SCREENS!!!!!!!!!! ----------------------->
  38.  
  39.             <div class="container border-0 col-lg-3 col-sm-12 sticky-top p-0 hidden-lg-down" style="position:sticky; top:0; z-index:1;background-color:#565656;height:500px;">
  40.  
  41.             <!--------------------- IMAGE ----------------------->
  42.             <img src="https://placehold.co/300"
  43.    class="d-block mx-auto mt-4 mb-2" style="height:275px;border-radius:5px;">
  44.    
  45.    
  46.         <!--------------------- TABLE/STATS ----------------------->
  47.        
  48.  
  49.  
  50.  
  51. <div style="display: flex; justify-content: space-around; flex-wrap: wrap;" class="mt-4">
  52.    
  53.    
  54.     <div class="col-12" style="background-color:#333333; color:#FABFBC;max-width: 340px; padding: 10px;">    
  55.         <div>
  56.                   <span class="text-uppercase" style="opacity: .8;font-weight:700;">
  57.                   <i class="fas fa-id-card mr-2 ml-1"></i>
  58.                   name</span>
  59.                   <span class="pull-right mr-2">Content</span>
  60.         </div>
  61.     </div>
  62.    
  63.     <div class="col-12" style="background-color:#494949; color:#fff5f0;max-width: 340px; padding: 10px;">    
  64.         <div>
  65.                   <span class="text-uppercase" style="opacity: .8;font-weight:700;">
  66.                   <i class="fa fa-calendar mr-2 ml-1"></i>
  67.                   age</span>
  68.                   <span class="pull-right mr-2">Content</span>
  69.         </div>
  70.     </div>
  71.  
  72.     <div class="col-12" style="background-color:#333333; color:#FABFBC;max-width: 340px; padding: 10px;">    
  73.         <div>
  74.                   <span class="text-uppercase" style="opacity: .8;font-weight:700;">
  75.                   <i class="fa-solid fa-mars-and-venus ml-1"></i>
  76.                   pronouns</span>
  77.                   <span class="pull-right mr-2">Content</span>
  78.         </div>
  79.     </div>  
  80.    
  81.     <div class="col-12" style="background-color:#494949; color:#fff5f0;max-width: 340px; padding: 10px;">    
  82.         <div>
  83.                   <span class="text-uppercase" style="opacity: .8;font-weight:700;">
  84.                   <i class="fa-solid fa-venus-mars ml-1"></i>
  85.                   sexuality</span>
  86.                   <span class="pull-right mr-2">Content</span>
  87.         </div>
  88.     </div>  
  89.    
  90.     <div class="col-12" style="background-color:#333333; color:#FABFBC;max-width: 340px; padding: 10px;">    
  91.         <div>
  92.                   <span class="text-uppercase" style="opacity: .8;font-weight:700;">
  93.                   <i class="fa fa-ruler mr-2 ml-1"></i>
  94.                   height</span>
  95.                   <span class="pull-right mr-2">Content</span>
  96.         </div>
  97.     </div>
  98.  
  99.     <div class="col-12" style="background-color:#494949; color:#fff5f0;max-width: 340px; padding: 10px;">    
  100.         <div>
  101.                   <span class="text-uppercase" style="opacity: .8;font-weight:700;">
  102.                   <i class="fa-solid fa-dna ml-1"></i>
  103.                   species</span>
  104.                   <span class="pull-right mr-2">Content</span>
  105.         </div>
  106.     </div>
  107.    
  108.     <div class="col-12" style="background-color:#333333; color:#F1A9A5;max-width: 340px; padding: 10px;">    
  109.         <div>
  110.                   <span class="text-uppercase" style="opacity: .8;font-weight:700;">
  111.                   <i class="fa fa-code mr-2 ml-1"></i>
  112.                   HTML</span>
  113.                   <span class="pull-right mr-2"><a href="https://toyhou.se/Strixxus" style="color:#F1A9A5">Strixxus</a></span>
  114.         </div>
  115.     </div>
  116.    
  117. </div>
  118.  
  119.  
  120.     </div> <!---- SIDEBAR LARGE-VIEW DIV END ----->
  121.    
  122.    
  123.    
  124.     <!---------------
  125.    
  126.    
  127.    
  128.    
  129.    
  130.    BELOW IS THE SIDEBAR FOR MOBILE DEVICES!!! IT IS HIDDEN ON *LARGE* SCREENS
  131.    
  132.    
  133.    
  134.    THE STICKY SIDEBAR ****DOES NOT WORK**** ON MOBILE . THAT IS WHY THERE IS TWO. COPE /lh
  135.    
  136.    ------------------------------->
  137.    
  138.                 <div class="container border-0 hidden-lg-up col-sm-12 p-0" style="background-color:#565656;height:500px;">
  139.  
  140.             <!--------------------- IMAGE ----------------------->
  141.             <img src="https://placehold.co/300"
  142.    class="d-block mx-auto mt-4 mb-2" style="height:275px;border-radius:5px;">
  143.    
  144.    
  145.         <!--------------------- TABLE/STATS ----------------------->
  146.        
  147.  
  148.  
  149.  
  150. <div style="display: flex; justify-content: space-around; flex-wrap: wrap;" class="mt-4">
  151.    
  152.    
  153.     <div class="col-12" style="background-color:#333333; color:#FABFBC;max-width: 340px; padding: 10px;">    
  154.         <div>
  155.                   <span class="text-uppercase" style="opacity: .8;font-weight:700;">
  156.                   <i class="fas fa-id-card mr-2 ml-1"></i>
  157.                   name</span>
  158.                   <span class="pull-right mr-2">Content</span>
  159.         </div>
  160.     </div>
  161.    
  162.     <div class="col-12" style="background-color:#494949; color:#fff5f0;max-width: 340px; padding: 10px;">    
  163.         <div>
  164.                   <span class="text-uppercase" style="opacity: .8;font-weight:700;">
  165.                   <i class="fa fa-calendar mr-2 ml-1"></i>
  166.                   age</span>
  167.                   <span class="pull-right mr-2">Content</span>
  168.         </div>
  169.     </div>
  170.  
  171.     <div class="col-12" style="background-color:#333333; color:#FABFBC;max-width: 340px; padding: 10px;">    
  172.         <div>
  173.                   <span class="text-uppercase" style="opacity: .8;font-weight:700;">
  174.                   <i class="fa-solid fa-mars-and-venus ml-1"></i>
  175.                   pronouns</span>
  176.                   <span class="pull-right mr-2">Content</span>
  177.         </div>
  178.     </div>  
  179.    
  180.     <div class="col-12" style="background-color:#494949; color:#fff5f0;max-width: 340px; padding: 10px;">    
  181.         <div>
  182.                   <span class="text-uppercase" style="opacity: .8;font-weight:700;">
  183.                   <i class="fa-solid fa-venus-mars ml-1"></i>
  184.                   sexuality</span>
  185.                   <span class="pull-right mr-2">Content</span>
  186.         </div>
  187.     </div>  
  188.    
  189.     <div class="col-12" style="background-color:#333333; color:#FABFBC;max-width: 340px; padding: 10px;">    
  190.         <div>
  191.                   <span class="text-uppercase" style="opacity: .8;font-weight:700;">
  192.                   <i class="fa fa-ruler mr-2 ml-1"></i>
  193.                   height</span>
  194.                   <span class="pull-right mr-2">Content</span>
  195.         </div>
  196.     </div>
  197.  
  198.     <div class="col-12" style="background-color:#494949; color:#fff5f0;max-width: 340px; padding: 10px;">    
  199.         <div>
  200.                   <span class="text-uppercase" style="opacity: .8;font-weight:700;">
  201.                   <i class="fa-solid fa-dna ml-1"></i>
  202.                   species</span>
  203.                   <span class="pull-right mr-2">Content</span>
  204.         </div>
  205.     </div>
  206.    
  207.     <div class="col-12" style="background-color:#333333; color:#F1A9A5;max-width: 340px; padding: 10px;">    
  208.         <div>
  209.                   <span class="text-uppercase" style="opacity: .8;font-weight:700;">
  210.                   <i class="fa fa-code mr-2 ml-1"></i>
  211.                   HTML</span>
  212.                   <span class="pull-right mr-2"><a href="https://toyhou.se/Strixxus" style="color:#F1A9A5">Strixxus</a></span>
  213.         </div>
  214.     </div>
  215.    
  216. </div>
  217.  
  218.  
  219.     </div> <!---- MOBILE SIDEBAR END!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ----->
  220.  
  221.     <div class="col-lg-9 col-sm-11 p-0" style="background-color:#7B7B7B;">
  222.        
  223.         <div class="container mt-3 col-lg-8 col-sm-12 pull-left ml-2"
  224.        style="border-radius:10px 0px 0px 10px;background-color:#565656;height:305px;overflow:auto;">
  225.            
  226.             <p class="p-2 mt-4" style="color:#FFF1F0">
  227.  
  228.  
  229. Something something box scrolls something something. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit a tortor tempor fringilla. Sed sed ullamcorper diam. Cras sed pellentesque ligula, ac consequat velit. Pellentesque sagittis metus vel mi euismod, vel pharetra ante dignissim. Nulla molestie felis non velit eleifend rutrum. Cras tellus enim, porttitor eu varius eget, venenatis id arcu. Pellentesque efficitur varius sem ut bibendum. Curabitur sed accumsan enim, vel gravida ex. Mauris at vehicula nulla. Quisque eget condimentum dolor. Aenean pellentesque ac risus sit amet interdum. Praesent sed tellus vitae nisi eleifend sagittis. Morbi mi mi, finibus sit amet est id, efficitur lacinia eros.
  230.             </p>
  231.             <p class="p-2 mt-4" style="color:#FFF1F0">
  232. Maecenas eu sapien lacus. Maecenas ut pulvinar purus, nec varius sem. Sed sit amet ullamcorper elit. Curabitur sed ex nulla. Donec varius, elit a eleifend mattis, dui ex interdum dui, accumsan ornare urna lectus non purus. Mauris efficitur non justo eu finibus. Maecenas eget sem et massa tincidunt sodales sollicitudin ac erat. Aliquam sem erat, tempor et euismod nec, facilisis eget arcu.
  233.             </p>
  234.  
  235.         </div>
  236.        
  237.  
  238. <!----------------- playlist side ------------------>
  239.  
  240.  
  241. <div class="row no-gutters p-0 pull-left col-3">
  242.    
  243.    
  244.    
  245. <div class="row mx-auto col-sm-6 col-lg-12"><iframe frameborder="0" style="height:3rem;width:5rem;opacity:.001;position:absolute;"
  246.    src="https://www.youtube.com/embed/SONG_ID"></iframe>
  247.    
  248.     <div class="mt-4" style="background:#333333;width:100px;border-radius:0px 30px 30px 0px;height:50px;box-shadow:5px 0px 5px 1px #565656;color:#FFF1F0;"><p class="text-center pl-1 pt-1" style="font-size:25px;text-shadow:0px 0px 0px 3px #FFF1F0;">ᐅ</p></div>
  249.  
  250.     <p class="ml-3 mt-4" style="color:#FFF1F0;">song name <br> <span class="font-italic">artist</span></p></div>
  251.  
  252.  
  253. <div class="row mx-auto col-sm-6 col-lg-12"><iframe frameborder="0" style="height:3rem;width:5rem;opacity:.001;position:absolute;"
  254.    src="https://www.youtube.com/embed/SONG_ID"></iframe>
  255.    
  256.     <div class="mt-2" style="background:#494949;width:100px;border-radius:0px 30px 30px 0px;height:50px;box-shadow:5px 0px 5px 1px #565656;color:#FFF1F0;"><p class="text-center pl-1 pt-1" style="font-size:25px;text-shadow:0px 0px 0px 3px #FFF1F0;">ᐅ</p></div>
  257.  
  258.     <p class="ml-3 mt-2" style="color:#FFF1F0;">song name <br> <span class="font-italic">artist</span></p></div>
  259.    
  260.    
  261.    
  262. <div class="row mx-auto col-sm-6 col-lg-12"><iframe frameborder="0" style="height:3rem;width:5rem;opacity:.001;position:absolute;"
  263.    src="https://www.youtube.com/embed/SONG_ID"></iframe>
  264.    
  265.     <div class="mt-2" style="background:#333333;width:100px;border-radius:0px 30px 30px 0px;height:50px;box-shadow:5px 0px 5px 1px #565656;color:#FFF1F0;"><p class="text-center pl-1 pt-1" style="font-size:25px;text-shadow:0px 0px 0px 3px #FFF1F0;">ᐅ</p></div>
  266.  
  267.     <p class="ml-3 mt-2" style="color:#FFF1F0;">song name <br> <span class="font-italic">artist</span></p></div>
  268.    
  269.    
  270.    
  271.    
  272. <div class="row mx-auto col-sm-6 col-lg-12"><iframe frameborder="0" style="height:3rem;width:5rem;opacity:.001;position:absolute;"
  273.    src="https://www.youtube.com/embed/SONG_ID"></iframe>
  274.    
  275.     <div class="mt-2" style="background:#494949;width:100px;border-radius:0px 30px 30px 0px;height:50px;box-shadow:5px 0px 5px 1px #565656;color:#FFF1F0;"><p class="text-center pl-1 pt-1" style="font-size:25px;text-shadow:0px 0px 0px 3px #FFF1F0;">ᐅ</p></div>
  276.  
  277.     <p class="ml-3 mt-2" style="color:#FFF1F0;">song name <br> <span class="font-italic">artist</span></p></div>
  278.  
  279.  
  280.  
  281. <div class="row mx-auto col-sm-6 col-lg-12"><iframe frameborder="0" style="volume:01.;height:3rem;width:5rem;opacity:.001;position:absolute;"
  282.    src="https://www.youtube.com/embed/SONG_ID"></iframe>
  283.    
  284.     <div class="mt-2" style="background:#333333;width:100px;border-radius:0px 30px 30px 0px;height:50px;box-shadow:5px 0px 5px 1px #565656;color:#FFF1F0;"><p class="text-center pl-1 pt-1" style="font-size:25px;text-shadow:0px 0px 0px 3px #FFF1F0;">ᐅ</p></div>
  285.  
  286.         <p class="ml-3 mt-2" style="color:#FFF1F0;">song name <br> <span class="font-italic">artist</span></p></div>
  287.    
  288.    
  289.    
  290. </div>
  291.    
  292.    
  293.       <div class="container col-lg-10 col-sm-6 my-4 pull-left ml-2 px-4 py-3 text-center" style="background-color:#333333;border-radius:10px;">
  294.          
  295. <p style="font-size:18px;letter-spacing:2px;opacity:75%;font-weight:700;color:#F1A9A5"><i class="fa-sharp fa-solid fa-star mr-4"></i>"Insert a quote here. This box expands rather than scrolling but it looks good regardless. did u guys know it is 4am. idk why im doing this at 4am. do u like my code. say yes :)"</p>
  296.    
  297.          
  298.       </div>
  299.    
  300.  <!------------------------------------------ MOODBOARD -------------------------->
  301.  
  302.    <div class="row no-gutters rounded col-12 mt-4 p-0">
  303.        
  304.        <div class="container col-lg-3 col-sm-6 bg-dark" style="min-height:250px;
  305.       background-image:url('https://placehold.co/250');
  306.      
  307.       background-size:cover; background-position:center-0;  background-repeat:no-repeat;"></div>
  308.        
  309.        <div class="container col-lg-3 col-sm-6 bg-dark" style="min-height:250px;
  310.       background-image:url('https://placehold.co/250');
  311.      
  312.       background-size:cover; background-position:center-0;  background-repeat:no-repeat;"></div>
  313.        
  314.        <div class="container col-lg-3 col-sm-6 bg-dark" style="min-height:250px;
  315.       background-image:url('https://placehold.co/250');
  316.      
  317.       background-size:cover; background-position:center-0;  background-repeat:no-repeat;"></div>
  318.        <div class="container col-lg-3 col-sm-6 bg-dark" style="min-height:250px;;
  319.       background-image:url('https://placehold.co/250');
  320.      
  321.       background-size:cover; background-position:center-0;  background-repeat:no-repeat;"></div>
  322.    </div>
  323.    
  324.    
  325.  
  326.    
  327.    <!---------------------------------- RELATIONSHIPS SECTION ------------------------------------------------->
  328.   <div class="card border-0 rounded-0 py-2" style="background-color:#494949;height:75px">
  329.       <h1 class="pt-2 px-3" style="font-size:42px;color:#FFF1F0; text-align: right">
  330.         Relationships<i class="fal fa-users ml-3 mr-5"></i></h1>
  331.   </div>
  332.  
  333.  
  334.  
  335.  
  336. <!-------------------- RELATIONSHIP #1 --------------------->
  337.    <div class="card rounded-0 border-0 py-3" style="background-color:#7B7B7B">
  338.    <div>
  339.       <a href="LINK_HERE" target="_BLANK">
  340.          
  341.       <img src="https://placehold.co/150"
  342.         style="max-height: 150px;" class="float-lg-left float-sm-center mb-sm-2 mt-2 mx-3 rounded-circle">
  343.          </a>
  344.          
  345.       <p class="text-md-left text-center mb-1 font-weight-bold" style="letter-spacing: 1px;color:#F1A9A5">
  346.          Character Name
  347.       </p>
  348.       <p class="text-md-left text-center mb-1" style="color:#F1A9A5">
  349.          <i class="fas fa-heart fa-fw"/>
  350.          <i class="fas fa-heart fa-fw"/>
  351.          <i class="fas fa-heart-half-alt fa-fw"/>
  352.          <i class="far fa-heart fa-fw"/>
  353.          <i class="far fa-heart fa-fw"/>
  354.       </p>
  355.       <p class="px-2" style="color:#FFF1F0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit a tortor tempor fringilla. Sed sed ullamcorper diam. Cras sed pellentesque ligula, ac consequat velit. Pellentesque sagittis metus vel mi euismod, vel pharetra ante dignissim. Nulla molestie felis non velit eleifend rutrum</p>
  356.    </div>
  357. </div>
  358.    
  359.    
  360.    
  361. <!-------------------- RELATIONSHIP #2 --------------------->
  362.    
  363.  <div class="card rounded-0 border-0 py-3" style="background-color:#565656">
  364.    <div>
  365.       <a href="LINK_HERE" target="_BLANK">
  366.          
  367.       <img src="https://placehold.co/150"
  368.         style="max-height: 150px;" class="float-lg-left float-sm-center mb-sm-2 mt-2 mx-3 rounded-circle">
  369.          </a>
  370.          
  371.       <p class="text-md-left text-center mb-1 font-weight-bold" style="letter-spacing: 1px;color:#F1A9A5">
  372.          Character Name
  373.       </p>
  374.       <p class="text-md-left text-center mb-1" style="color:#F1A9A5">
  375.          <i class="fas fa-heart fa-fw"/>
  376.          <i class="fas fa-heart fa-fw"/>
  377.          <i class="fas fa-heart-half-alt fa-fw"/>
  378.          <i class="far fa-heart fa-fw"/>
  379.          <i class="far fa-heart fa-fw"/>
  380.       </p>
  381.       <p class="px-2" style="color:#FFF1F0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit a tortor tempor fringilla. Sed sed ullamcorper diam. Cras sed pellentesque ligula, ac consequat velit. Pellentesque sagittis metus vel mi euismod, vel pharetra ante dignissim. Nulla molestie felis non velit eleifend rutrum</p>
  382.    </div>
  383. </div>
  384.    
  385. <!-------------------- RELATIONSHIP #3 --------------------->
  386.    <div class="card rounded-0 border-0 py-3" style="background-color:#7B7B7B">
  387.    <div>
  388.       <a href="LINK_HERE" target="_BLANK">
  389.          
  390.       <img src="https://placehold.co/150"
  391.         style="max-height: 150px;" class="float-lg-left float-sm-center mb-sm-2 mt-2 mx-3 rounded-circle">
  392.          </a>
  393.          
  394.       <p class="text-md-left text-center mb-1 font-weight-bold" style="letter-spacing: 1px;color:#F1A9A5">
  395.          Name
  396.       </p>
  397.       <p class="text-md-left text-center mb-1" style="color:#F1A9A5">
  398.          <i class="fas fa-heart fa-fw"/>
  399.          <i class="fas fa-heart fa-fw"/>
  400.          <i class="fas fa-heart-half-alt fa-fw"/>
  401.          <i class="far fa-heart fa-fw"/>
  402.          <i class="far fa-heart fa-fw"/>
  403.       </p>
  404.       <p class="px-2 " style="color:#FFF1F0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus condimentum leo, vitae tristique quam rhoncus sit amet. Phasellus volutpat risus dolor, in molestie lorem suscipit eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin a mi ut nisi maximus scelerisque.</p>
  405.    </div>
  406. </div>
  407.  
  408.  
  409.  
  410. <!-------------------- RELATIONSHIP #4 --------------------->
  411.    
  412.  <div class="card rounded-0 border-0 py-3" style="background-color:#565656">
  413.    <div>
  414.       <a href="LINK_HERE" target="_BLANK">
  415.          
  416.       <img src="https://placehold.co/150"
  417.         style="max-height: 150px;" class="float-lg-left float-sm-center mb-sm-2 mt-2 mx-3 rounded-circle">
  418.          </a>
  419.          
  420.       <p class="text-md-left text-center mb-1 font-weight-bold" style="letter-spacing: 1px;color:#F1A9A5">
  421.          Name
  422.       </p>
  423.       <p class="text-md-left text-center mb-1" style="color:#F1A9A5">
  424.          <i class="fas fa-heart fa-fw"/>
  425.          <i class="fas fa-heart fa-fw"/>
  426.          <i class="fas fa-heart-half-alt fa-fw"/>
  427.          <i class="far fa-heart fa-fw"/>
  428.          <i class="far fa-heart fa-fw"/>
  429.       </p>
  430.       <p class="px-2" style="color:#FFF1F0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus condimentum leo, vitae tristique quam rhoncus sit amet. Phasellus volutpat risus dolor, in molestie lorem suscipit eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin a mi ut nisi maximus scelerisque.</p>
  431.    </div>
  432. </div>
  433.  
  434.         </div><!--- inner container end --->
  435.     </div><!--- end row -->
  436. </div><!---- MAIN CONTAINER END ----->
Advertisement
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!