API tools faq
paste
Advertisement
Euna-

[f2u] - Nightsky

Euna-
Dec 31st, 2022 (edited)
2,938
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 42.39 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. accent color:   #c9eeff
  4. text color:     #ffffff
  5.  
  6. icons:          fontawesome.com
  7.  
  8. -->
  9.  
  10.  
  11. <div class="mx-auto" style="max-width: 900px;">
  12.    
  13.     <!-- background image -->
  14.     <div class="card m-2 overflow-hidden" style="background-image: url(
  15.    
  16.    https://images.unsplash.com/photo-1534447677768-be436bb09401
  17.    
  18.    ); background-size: cover; background-position: center; background-attachment: fixed;
  19.    border-radius: 20px; box-shadow: 0 0 9px rgba(0, 0, 0, 0.4); border: 4px solid #ffffff;">
  20.        
  21.         <div class="row no-gutters">
  22.            
  23.             <!-- left section -->
  24.             <div class="col-sm-4">
  25.                 <div class="p-3 h-100" style="background: rgba(0, 0, 0, 0.5); color: #ffffff; text-shadow: 0 0 3px #c9eeff;">
  26.                    
  27.                     <!-- name -->
  28.                     <h1 class="text-center my-3" style="font-variant: small-caps;">
  29.                        
  30.                         <!-- icon -->
  31.                         <i class="fa-duotone fa-sparkles fa-flip fa-spin" style="color: #c9eeff; --fa-animation-duration: 3s;"></i>
  32.                        
  33.                         Name
  34.                        
  35.                         <!-- icon -->
  36.                         <i class="fa-duotone fa-sparkles fa-flip-horizontal fa-spin" style="color: #c9eeff; --fa-animation-duration: 3s;"></i>
  37.                        
  38.                     </h1>
  39.                    
  40.  
  41.  
  42.                     <!-- profile image -->
  43.                     <div class="rounded-circle mx-auto my-4" style="background-image: url(
  44.                    
  45.                    https://images.unsplash.com/photo-1534447677768-be436bb09401
  46.                    
  47.                    ); background-size: cover; background-position: center; min-height: 180px; max-width: 180px; border: 2px solid #ffffff;"></div><!-- end profile image -->
  48.                    
  49.                    
  50.                     <div class="my-2 p-2" style="border-radius: 8px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  51.                         <div class="justify-content-between">
  52.                             <span class="font-italic" style="font-variant: small-caps;">
  53.                                 <i class="fa-duotone fa-message-quote fa-fw" style="color: #c9eeff;"></i>
  54.                                 Called
  55.                                 </span>
  56.                             <span>
  57.                                 content
  58.                             </span>
  59.                         </div>
  60.                     </div>
  61.                    
  62.                     <div class="my-2 p-2" style="border-radius: 8px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  63.                         <div class="justify-content-between">
  64.                             <span class="font-italic" style="font-variant: small-caps;">
  65.                                 <i class="fa-duotone fa-venus-mars fa-fw" style="color: #c9eeff;"></i>
  66.                                 Gender
  67.                                 </span>
  68.                             <span>
  69.                                 content
  70.                             </span>
  71.                         </div>
  72.                     </div>
  73.                    
  74.                     <div class="my-2 p-2" style="border-radius: 8px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  75.                         <div class="justify-content-between">
  76.                             <span class="font-italic" style="font-variant: small-caps;">
  77.                                 <i class="fa-duotone fa-cake-candles fa-fw" style="color: #c9eeff;"></i>
  78.                                 Age
  79.                                 </span>
  80.                             <span>
  81.                                 content
  82.                             </span>
  83.                         </div>                        
  84.                     </div>
  85.                    
  86.                     <div class="my-2 p-2" style="border-radius: 8px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  87.                         <div class="justify-content-between">
  88.                             <span class="font-italic" style="font-variant: small-caps;">
  89.                                 <i class="fa-duotone fa-calendar-days fa-fw" style="color: #c9eeff;"></i>
  90.                                 Birthday
  91.                                 </span>
  92.                             <span>
  93.                                 content
  94.                             </span>
  95.                         </div>                        
  96.                     </div>
  97.                    
  98.                     <div class="my-2 p-2" style="border-radius: 8px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  99.                         <div class="justify-content-between">
  100.                             <span class="font-italic" style="font-variant: small-caps;">
  101.                                 <i class="fa-duotone fa-dna fa-fw" style="color: #c9eeff;"></i>
  102.                                 Species
  103.                                 </span>
  104.                             <span>
  105.                                 content
  106.                             </span>
  107.                         </div>                        
  108.                     </div>
  109.                    
  110.                     <div class="my-2 p-2" style="border-radius: 8px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  111.                         <div class="justify-content-between">
  112.                             <span class="font-italic" style="font-variant: small-caps;">
  113.                                 <i class="fa-duotone fa-earth-americas fa-fw" style="color: #c9eeff;"></i>
  114.                                 Race
  115.                                 </span>
  116.                             <span>
  117.                                 content
  118.                             </span>
  119.                         </div>                        
  120.                     </div>
  121.                    
  122.                     <div class="my-2 p-2" style="border-radius: 8px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  123.                         <div class="justify-content-between">
  124.                             <span class="font-italic" style="font-variant: small-caps;">
  125.                                 <i class="fa-duotone fa-toolbox fa-fw" style="color: #c9eeff;"></i>
  126.                                 Occupation
  127.                                 </span>
  128.                             <span>
  129.                                 or role
  130.                             </span>
  131.                         </div>                        
  132.                     </div>
  133.                    
  134.                    
  135.                 </div>
  136.                
  137.             </div> <!-- end left section -->
  138.            
  139.             <!-- right section -->
  140.             <div class="col-sm-8">
  141.                
  142.                 <!-- navigation bar -->
  143.                 <div class="m-4 overflow-hidden" style="background: rgba(0, 0, 0, 0.5); color: #ffffff; text-shadow: 0 0 3px #c9eeff; border-radius: 12px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);">
  144.                    
  145.                     <ul class="nav row no-gutters nav-fill font-italic" style="font-variant: small-caps; font-size: 120%;">
  146.                        
  147.                         <li class="nav-item col-auto" role="presentation">
  148.                             <a class="nav-link active" data-toggle="tab" href="#intro" style="color: #c9eeff;">
  149.                                 Intro
  150.                             </a>
  151.                         </li>
  152.                        
  153.                         <li class="nav-item col-auto" role="presentation">
  154.                             <a class="nav-link" data-toggle="tab"  href="#background" style="color: #c9eeff;">
  155.                                 Background
  156.                             </a>
  157.                         </li>
  158.                        
  159.                         <li class="nav-item col-auto" role="presentation">
  160.                             <a class="nav-link" data-toggle="tab"  href="#trivia" style="color: #c9eeff;">
  161.                                 Trivia
  162.                             </a>
  163.                         </li>
  164.                        
  165.                         <li class="nav-item col-auto" role="presentation">
  166.                             <a class="nav-link" data-toggle="tab"  href="#design" style="color: #c9eeff;">
  167.                                 Design
  168.                             </a>
  169.                         </li>
  170.                        
  171.                         <li class="nav-item col-auto" role="presentation">
  172.                             <a class="nav-link" data-toggle="tab"  href="#links" style="color: #c9eeff;">
  173.                                 Links
  174.                             </a>
  175.                         </li>
  176.                        
  177.                     </ul>
  178.                        
  179.                 </div><!-- end navigation bar -->
  180.                
  181.                 <!-- tab content -->
  182.                 <div class="tab-content">
  183.                    
  184.                     <!-- =============== tab - intro =============== -->
  185.                     <div class="tab-pane fade show active" id="intro">
  186.                         <div class="m-4 p-2" style="background: rgba(0, 0, 0, 0.5); color: #ffffff; border-radius: 12px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); min-height: 460px;">
  187.  
  188.                             <!-- stats -->
  189.                             <!-- find "width: 50%;" and change the number to change the length -->
  190.                             <div class="row no-gutters">
  191.                                
  192.                                 <div class="col-6">
  193.                                     <div class="m-1">
  194.                                         <span style="font-variant: small-caps;">
  195.                                             <i class="fa-duotone fa-chevrons-right fa-fw" style="color: #c9eeff;"></i>
  196.                                             Kindness
  197.                                         </span>
  198.                                         <div class="progress p-1" style="border-radius: 7px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  199.                                           <div class="progress-bar" role="progressbar"
  200.                                          style="width: 50%; border-radius: 4px; background: #c9eeff; height: 7px;"></div>
  201.                                         </div>                                        
  202.                                     </div>
  203.                                 </div>
  204.                                
  205.                                 <div class="col-6">
  206.                                     <div class="m-1">
  207.                                         <span style="font-variant: small-caps;">
  208.                                             <i class="fa-duotone fa-chevrons-right fa-fw" style="color: #c9eeff;"></i>
  209.                                             Intellect
  210.                                         </span>
  211.                                         <div class="progress p-1" style="border-radius: 7px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  212.                                           <div class="progress-bar" role="progressbar"
  213.                                          style="width: 50%; border-radius: 4px; background: #c9eeff; height: 7px;"></div>
  214.                                         </div>                                        
  215.                                     </div>
  216.                                 </div>
  217.                                
  218.                                 <div class="col-6">
  219.                                     <div class="m-1">
  220.                                         <span style="font-variant: small-caps;">
  221.                                             <i class="fa-duotone fa-chevrons-right fa-fw" style="color: #c9eeff;"></i>
  222.                                             Confidence
  223.                                         </span>
  224.                                         <div class="progress p-1" style="border-radius: 7px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  225.                                           <div class="progress-bar" role="progressbar"
  226.                                          style="width: 50%; border-radius: 4px; background: #c9eeff; height: 7px;"></div>
  227.                                         </div>                                        
  228.                                     </div>
  229.                                 </div>
  230.                                
  231.                                 <div class="col-6">
  232.                                     <div class="m-1">
  233.                                         <span style="font-variant: small-caps;">
  234.                                             <i class="fa-duotone fa-chevrons-right fa-fw" style="color: #c9eeff;"></i>
  235.                                             Humor
  236.                                         </span>
  237.                                         <div class="progress p-1" style="border-radius: 7px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  238.                                           <div class="progress-bar" role="progressbar"
  239.                                          style="width: 50%; border-radius: 4px; background: #c9eeff; height: 7px;"></div>
  240.                                         </div>                                        
  241.                                     </div>
  242.                                 </div>
  243.                                
  244.                                 <div class="col-6">
  245.                                     <div class="m-1">
  246.                                         <span style="font-variant: small-caps;">
  247.                                             <i class="fa-duotone fa-chevrons-right fa-fw" style="color: #c9eeff;"></i>
  248.                                             Patience
  249.                                         </span>
  250.                                         <div class="progress p-1" style="border-radius: 7px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  251.                                           <div class="progress-bar" role="progressbar"
  252.                                          style="width: 50%; border-radius: 4px; background: #c9eeff; height: 7px;"></div>
  253.                                         </div>                                        
  254.                                     </div>
  255.                                 </div>
  256.                                
  257.                                 <div class="col-6">
  258.                                     <div class="m-1">
  259.                                         <span style="font-variant: small-caps;">
  260.                                             <i class="fa-duotone fa-chevrons-right fa-fw" style="color: #c9eeff;"></i>
  261.                                             Optimism
  262.                                         </span>
  263.                                         <div class="progress p-1" style="border-radius: 7px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  264.                                           <div class="progress-bar" role="progressbar"
  265.                                          style="width: 50%; border-radius: 4px; background: #c9eeff; height: 7px;"></div>
  266.                                         </div>                                        
  267.                                     </div>
  268.                                 </div>
  269.                                
  270.                             </div>    
  271.                             <!-- end stats -->
  272.                            
  273.                             <!-- introduction -->
  274.                             <div class="m-1 p-2 overflow-auto" style="border-radius: 8px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  275.                                 <p> <i class="fa-duotone fa-comment-dots fa-fw" style="color: #c9eeff;"></i>
  276.                                     Introduction. this will grow with content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  277.                                
  278.                                     </p>
  279.                             </div>
  280.                             <!-- end introduction -->
  281.                            
  282.                            
  283.                             <!-- likes and dislikes -->
  284.                             <div class="row no-gutters">
  285.                                
  286.                                 <div class="col-6">
  287.                                     <div class="m-1">
  288.                                         <span style="font-variant: small-caps;">
  289.                                             Likes
  290.                                         </span>
  291.                                         <ul class="fa-ul">
  292.                                            
  293.                                             <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-heart-pulse"></i></span>
  294.                                             content
  295.                                             </li>
  296.                                            
  297.                                             <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-heart-pulse"></i></span>
  298.                                             content
  299.                                             </li>
  300.                                            
  301.                                             <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-heart-pulse"></i></span>
  302.                                             content
  303.                                             </li>
  304.                                            
  305.                                             <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-heart-pulse"></i></span>
  306.                                             content
  307.                                             </li>
  308.                                            
  309.                                         </ul>                                        
  310.                                        
  311.                                     </div>    
  312.                                 </div>
  313.                                
  314.                                 <div class="col-6">
  315.                                     <div class="m-1">
  316.                                         <span style="font-variant: small-caps;">
  317.                                             Dislikes
  318.                                         </span>
  319.                                         <ul class="fa-ul">
  320.                                            
  321.                                             <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-heart-crack"></i></span>
  322.                                             content
  323.                                             </li>
  324.                                            
  325.                                             <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-heart-crack"></i></span>
  326.                                             content
  327.                                             </li>
  328.                                            
  329.                                             <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-heart-crack"></i></span>
  330.                                             content
  331.                                             </li>
  332.                                            
  333.                                             <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-heart-crack"></i></span>
  334.                                             content
  335.                                             </li>
  336.                                        
  337.  
  338.                                            
  339.                                         </ul>                                        
  340.                                     </div>    
  341.                                 </div>
  342.                                
  343.                             </div>
  344.                             <!-- end likes and dislikes -->
  345.                            
  346.                         </div>
  347.                     </div><!-- =============== end tab - intro =============== -->
  348.                    
  349.                     <!-- =============== tab - background =============== -->
  350.                     <div class="tab-pane fade" id="background">
  351.                         <div class="m-4 p-3 overflow-auto" style="background: rgba(0, 0, 0, 0.5); color: #ffffff; border-radius: 12px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); height: 460px;">
  352.                            
  353.                             <h2 style="font-variant: small-caps;">
  354.                                 <i class="fa-duotone fa-bookmark fa-fw" style="color: #c9eeff;"></i>
  355.                                Header
  356.                             </h2>
  357.                             <p>
  358.                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Ultrices sagittis orci a scelerisque purus semper eget. Turpis massa tincidunt dui ut ornare lectus. Quam viverra orci sagittis eu volutpat odio. Faucibus vitae aliquet nec ullamcorper sit amet risus. Arcu bibendum at varius vel pharetra. Eu volutpat odio facilisis mauris sit amet massa vitae tortor. Semper risus in hendrerit gravida rutrum quisque. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in.
  359.                             </p>
  360.                            
  361.                              <h2 style="font-variant: small-caps;">
  362.                                 <i class="fa-duotone fa-bookmark fa-fw" style="color: #c9eeff;"></i>
  363.                                Header
  364.                             </h2>
  365.                             <p>
  366.                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Ultrices sagittis orci a scelerisque purus semper eget. Turpis massa tincidunt dui ut ornare lectus. Quam viverra orci sagittis eu volutpat odio. Faucibus vitae aliquet nec ullamcorper sit amet risus. Arcu bibendum at varius vel pharetra.
  367.                             </p>
  368.                                 Eu volutpat odio facilisis mauris sit amet massa vitae tortor. Semper risus in hendrerit gravida rutrum quisque. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in.
  369.                             <p>
  370.                                
  371.                             </p>
  372.                            
  373.                              <h2 style="font-variant: small-caps;">
  374.                                 <i class="fa-duotone fa-bookmark fa-fw" style="color: #c9eeff;"></i>
  375.                                Header
  376.                             </h2>
  377.                             <p>
  378.                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Ultrices sagittis orci a scelerisque purus semper eget. Turpis massa tincidunt dui ut ornare lectus. Quam viverra orci sagittis eu volutpat odio. Faucibus vitae aliquet nec ullamcorper sit amet risus. Arcu bibendum at varius vel pharetra. Eu volutpat odio facilisis mauris sit amet massa vitae tortor. Semper risus in hendrerit gravida rutrum quisque.
  379.                             </p>
  380.                            
  381.                         </div>
  382.                     </div><!-- =============== end tab - background =============== -->
  383.                    
  384.                     <!-- =============== tab - trivia =============== -->
  385.                     <div class="tab-pane fade" id="trivia">
  386.                         <div class="m-4 p-3 overflow-auto" style="background: rgba(0, 0, 0, 0.5); color: #ffffff; border-radius: 12px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); height: 460px;">
  387.                            
  388.                            
  389.                             <h2 style="font-variant: small-caps;">Trivia</h2>
  390.                            
  391.                             <ul class="fa-ul">
  392.                                
  393.                                 <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-comment-quote"></i></span>
  394.                                 this entire box will scroll
  395.                                 </li>                                
  396.                                                
  397.                                 <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-comment-quote"></i></span>
  398.                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Ultrices sagittis orci a scelerisque purus semper eget.
  399.                                 </li>
  400.                                
  401.                                 <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-comment-quote"></i></span>
  402.                                 Turpis massa tincidunt dui ut ornare lectus. Quam viverra orci sagittis eu volutpat odio. Faucibus vitae aliquet nec ullamcorper sit amet risus.
  403.                                 </li>
  404.                                
  405.                                 <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-comment-quote"></i></span>
  406.                                 Arcu bibendum at varius vel pharetra. Eu volutpat odio facilisis mauris sit amet massa vitae tortor. Semper risus in hendrerit gravida rutrum quisque.
  407.                                 </li>
  408.                                
  409.                             </ul>
  410.                            
  411.                            
  412.                            
  413.                         </div>
  414.                     </div><!-- =============== end tab - trivia  =============== -->
  415.                    
  416.                      <!-- =============== tab - design =============== -->
  417.                     <div class="tab-pane fade" id="design">
  418.                         <div class="m-4 p-3 overflow-auto" style="background: rgba(0, 0, 0, 0.5); color: #ffffff; border-radius: 12px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); height: 460px;">
  419.                            
  420.                            
  421.                             <div class="row no-gutters">
  422.                                
  423.                                 <div class="col-sm-6">
  424.                                     <div class="m-1 p-2" style="border-radius: 8px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  425.                                         <div class="justify-content-between">
  426.                                             <span class="font-italic" style="font-variant: small-caps; color: #c9eeff;">
  427.                                                 Height
  428.                                                 </span>
  429.                                             <span>
  430.                                                 content
  431.                                             </span>
  432.                                         </div>                        
  433.                                     </div>                                    
  434.                                 </div>
  435.                                
  436.                                 <div class="col-sm-6">
  437.                                     <div class="m-1 p-2" style="border-radius: 8px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  438.                                         <div class="justify-content-between">
  439.                                             <span class="font-italic" style="font-variant: small-caps; color: #c9eeff;">
  440.                                                 Body type
  441.                                                 </span>
  442.                                             <span>
  443.                                                 content
  444.                                             </span>
  445.                                         </div>                        
  446.                                     </div>                                    
  447.                                 </div>
  448.                                
  449.                                 <div class="col-sm-6">
  450.                                     <div class="m-1 p-2" style="border-radius: 8px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  451.                                         <div class="justify-content-between">
  452.                                             <span class="font-italic" style="font-variant: small-caps; color: #c9eeff;">
  453.                                                 Hair color
  454.                                                 </span>
  455.                                             <span>
  456.                                                 content
  457.                                             </span>
  458.                                         </div>                        
  459.                                     </div>                                    
  460.                                 </div>
  461.                                
  462.                                 <div class="col-sm-6">
  463.                                     <div class="m-1 p-2" style="border-radius: 8px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  464.                                         <div class="justify-content-between">
  465.                                             <span class="font-italic" style="font-variant: small-caps; color: #c9eeff;">
  466.                                                 Hair style
  467.                                                 </span>
  468.                                             <span>
  469.                                                 content
  470.                                             </span>
  471.                                         </div>                        
  472.                                     </div>                                    
  473.                                 </div>
  474.                                
  475.                                 <div class="col-sm-6">
  476.                                     <div class="m-1 p-2" style="border-radius: 8px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  477.                                         <div class="justify-content-between">
  478.                                             <span class="font-italic" style="font-variant: small-caps; color: #c9eeff;">
  479.                                                 Eyes
  480.                                                 </span>
  481.                                             <span>
  482.                                                 content
  483.                                             </span>
  484.                                         </div>                        
  485.                                     </div>                                    
  486.                                 </div>
  487.                                
  488.                                 <div class="col-sm-6">
  489.                                     <div class="m-1 p-2" style="border-radius: 8px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  490.                                         <div class="justify-content-between">
  491.                                             <span class="font-italic" style="font-variant: small-caps; color: #c9eeff;">
  492.                                                 Skin
  493.                                                 </span>
  494.                                             <span>
  495.                                                 content
  496.                                             </span>
  497.                                         </div>                        
  498.                                     </div>                                    
  499.                                 </div>
  500.                                
  501.                                
  502.                                
  503.                             </div>
  504.  
  505.  
  506.                            
  507.                             <h2 style="font-variant: small-caps;">Design notes</h2>
  508.                            
  509.                             <ul class="fa-ul">
  510.                                
  511.                                 <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-paintbrush"></i></span>
  512.                                 Write design notes here
  513.                                 </li>
  514.                                                
  515.                                 <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-paintbrush"></i></span>
  516.                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Ultrices sagittis orci a scelerisque purus semper eget.
  517.                                 </li>
  518.                                
  519.                                 <li><span class="fa-li" style="color: #c9eeff;"><i class="fa-duotone fa-paintbrush"></i></span>
  520.                                 Turpis massa tincidunt dui ut ornare lectus. Quam viverra orci sagittis eu volutpat odio. Faucibus vitae aliquet nec ullamcorper sit amet risus.
  521.                                 </li>
  522.                                
  523.                             </ul>
  524.                            
  525.                         </div>
  526.                     </div><!-- =============== end tab - design =============== -->
  527.                    
  528.                     <!-- =============== tab - links =============== -->
  529.                     <div class="tab-pane fade" id="links">
  530.                         <div class="m-4 p-3 overflow-auto" style="background: rgba(0, 0, 0, 0.5); color: #ffffff; border-radius: 12px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); height: 460px;">
  531.  
  532.                             <!-- character -->
  533.                             <div class="m-2 p-2" style="border-radius: 12px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  534.                                 <div class="row no-gutters">
  535.                                     <div class="col-sm-4">
  536.                                         <!-- profile image -->
  537.                                         <div class="mx-auto m-2" style="background-image: url(
  538.                                        
  539.                                        https://images.unsplash.com/photo-1534447677768-be436bb09401
  540.                                        
  541.                                        ); background-size: cover; background-position: center; min-height: 140px; max-width: 140px; border-radius: 8px;"></div><!-- end profile image -->
  542.                                     </div>
  543.                                     <div class="col-sm-8">
  544.                                         <div class="m-2">
  545.                                             <div class="justify-content-between">
  546.                                                 <span><h3 style="font-variant: small-caps;">
  547.                                                     <a href=" # " style="color: #c9eeff;">
  548.                                                         Name
  549.                                                     </a></h3></span>
  550.                                                 <span style="font-variant: small-caps;">
  551.                                                      [ relation ]
  552.                                                 </span>
  553.                                             </div>
  554.                                             <div class="overflow-auto" style="height: 100px;">
  555.                                                 <p>
  556.                                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Ultrices sagittis orci a scelerisque purus semper eget. Turpis massa tincidunt dui ut ornare lectus. Quam viverra orci sagittis eu volutpat odio. Faucibus vitae aliquet nec ullamcorper sit amet risus. Arcu bibendum at varius vel pharetra.
  557.                                                 </p>
  558.                                             </div>
  559.                                         </div>
  560.                                     </div>
  561.                                 </div>
  562.                             </div><!-- end character -->
  563.                            
  564.                             <!-- character -->
  565.                             <div class="m-2 p-2" style="border-radius: 12px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  566.                                 <div class="row no-gutters">
  567.                                     <div class="col-sm-4">
  568.                                         <!-- profile image -->
  569.                                         <div class="mx-auto m-2" style="background-image: url(
  570.                                        
  571.                                        https://images.unsplash.com/photo-1534447677768-be436bb09401
  572.                                        
  573.                                        ); background-size: cover; background-position: center; min-height: 140px; max-width: 140px; border-radius: 8px;"></div><!-- end profile image -->
  574.                                     </div>
  575.                                     <div class="col-sm-8">
  576.                                         <div class="m-2">
  577.                                             <div class="justify-content-between">
  578.                                                 <span><h3 style="font-variant: small-caps;">
  579.                                                     <a href=" # " style="color: #c9eeff;">
  580.                                                         Name
  581.                                                     </a></h3></span>
  582.                                                 <span style="font-variant: small-caps;">
  583.                                                      [ relation ]
  584.                                                 </span>
  585.                                             </div>
  586.                                             <div class="overflow-auto" style="height: 100px;">
  587.                                                 <p>
  588.                                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Ultrices sagittis orci a scelerisque purus semper eget. Turpis massa tincidunt dui ut ornare lectus. Quam viverra orci sagittis eu volutpat odio. Faucibus vitae aliquet nec ullamcorper sit amet risus. Arcu bibendum at varius vel pharetra.
  589.                                                 </p>
  590.                                             </div>
  591.                                         </div>
  592.                                     </div>
  593.                                 </div>
  594.                             </div><!-- end character -->
  595.                            
  596.                             <!-- character -->
  597.                             <div class="m-2 p-2" style="border-radius: 12px; border: solid 1px #ffffff; background: rgba(0, 0, 0, 0.3);">
  598.                                 <div class="row no-gutters">
  599.                                     <div class="col-sm-4">
  600.                                         <!-- profile image -->
  601.                                         <div class="mx-auto m-2" style="background-image: url(
  602.                                        
  603.                                        https://images.unsplash.com/photo-1534447677768-be436bb09401
  604.                                        
  605.                                        ); background-size: cover; background-position: center; min-height: 140px; max-width: 140px; border-radius: 8px;"></div><!-- end profile image -->
  606.                                     </div>
  607.                                     <div class="col-sm-8">
  608.                                         <div class="m-2">
  609.                                             <div class="justify-content-between">
  610.                                                 <span><h3 style="font-variant: small-caps;">
  611.                                                     <a href=" # " style="color: #c9eeff;">
  612.                                                         Name
  613.                                                     </a></h3></span>
  614.                                                 <span style="font-variant: small-caps;">
  615.                                                      [ relation ]
  616.                                                 </span>
  617.                                             </div>
  618.                                             <div class="overflow-auto" style="height: 100px;">
  619.                                                 <p>
  620.                                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Ultrices sagittis orci a scelerisque purus semper eget. Turpis massa tincidunt dui ut ornare lectus. Quam viverra orci sagittis eu volutpat odio. Faucibus vitae aliquet nec ullamcorper sit amet risus. Arcu bibendum at varius vel pharetra.
  621.                                                 </p>
  622.                                             </div>
  623.                                         </div>
  624.                                     </div>
  625.                                 </div>
  626.                             </div><!-- end character -->
  627.                            
  628.                         </div>
  629.                     </div><!-- =============== end tab - links =============== -->
  630.  
  631.                    
  632.  
  633.                    
  634.                 </div> <!-- end tab content -->
  635.                
  636.                 <div class="text-right mx-4 my-2" style="color: #ffffff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); font-variant: small-caps; font-size: 80%;">
  637.                     <p> html <i class="fa-duotone fa-code"></i> by <a href="https://toyhou.se/EunaCodes" style="color: #c9eeff;">Euna </a></p>
  638.                 </div>
  639.                
  640.                
  641.                
  642.             </div> <!-- end right section -->
  643.            
  644.         </div>
  645.     </div>    
  646. </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!