API tools faq
paste
Advertisement
circlejourney

New Leaf

circlejourney
Jan 17th, 2022 (edited)
2,516
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 16.44 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    New Leaf Toyhouse theme created by Circlejourney. Editing is allowed. Just remember to credit me!
  3. -->
  4.  
  5.  
  6. <!--
  7.    CONTAINER: Change background image and font for the whole profile below.
  8.    Colours (Ctrl + F and replace to change theme colours):
  9.                    #77987A (dark accents)
  10.                    #98ba86 (main)
  11. -->
  12. <div style="background-image: url(https://i.imgur.com/0LG37U2.jpg); background-size: 15%; margin: -15px;">
  13.     <div class="container-fluid" style="font-size: 10pt; margin: 0; background-color: rgba(234, 241, 216, 0.9); padding: 30px;">
  14.         <div class="row no-gutters">
  15.            
  16.             <!-- VITAL INFO -->
  17.             <div class="col-12 col-md-4 p-2 d-flex flex-column">
  18.                 <div class="bg-faded flex-grow-1 d-flex flex-column justify-content-end" style=" min-height: 300px; border-top-left-radius: 20px;">
  19.                        
  20.                     <div class="p-3">
  21.                        
  22.                         <div class="row mb-1">
  23.                             <div class="col col-md-4 text-left text-muted">
  24.                                 Name
  25.                             </div>
  26.                             <div class="col text-right">
  27.                                 My name
  28.                             </div>
  29.                         </div>
  30.                        
  31.                         <hr class="my-2">
  32.                        
  33.                         <div class="row">
  34.                             <div class="col-4 text-left text-muted">
  35.                                 Birthday
  36.                             </div>
  37.                             <div class="col text-right">
  38.                                 My birthday
  39.                             </div>
  40.                         </div>
  41.                        
  42.                         <hr class="my-2">
  43.                        
  44.                         <div class="row">
  45.                             <div class="col-4 text-left text-muted">
  46.                                 Age
  47.                             </div>
  48.                             <div class="col text-right">
  49.                                 My age
  50.                             </div>
  51.                         </div>
  52.                        
  53.                         <hr class="my-2">
  54.                        
  55.                         <div class="row">
  56.                             <div class="col-4 text-left text-muted">
  57.                                 Pronouns
  58.                             </div>
  59.                             <div class="col text-right">
  60.                                 My pronouns
  61.                             </div>
  62.                         </div>
  63.                        
  64.                         <hr class="my-2">
  65.                        
  66.                         <div class="row">
  67.                             <div class="col-4 text-left text-muted">
  68.                                 Species
  69.                             </div>
  70.                             <div class="col text-right">
  71.                                 My species
  72.                             </div>
  73.                         </div>
  74.                        
  75.                         <hr class="my-2">
  76.                        
  77.                         <div class="row">
  78.                             <div class="col-4 text-left text-muted">
  79.                                 From
  80.                             </div>
  81.                             <div class="col text-right">
  82.                                 Where I'm from
  83.                             </div>
  84.                         </div>
  85.                        
  86.                         <hr class="my-2">
  87.                        
  88.                         <div class="row">
  89.                             <div class="col-4 text-left text-muted">
  90.                                 Detail
  91.                             </div>
  92.                             <div class="col text-right">
  93.                                 My detail
  94.                             </div>
  95.                         </div>
  96.                    
  97.                     </div>
  98.                    
  99.                     <div class="text-center flex-grow-1 d-flex flex-column justify-content-center" style="font-size: 13pt; background-color: #98ba86;">
  100.                         <div>VITAL INFO</div>
  101.                     </div>
  102.                    
  103.                 </div>
  104.             </div>
  105.             <!-- / VITAL INFO -->
  106.            
  107.             <!-- DIVIDER IMAGE -->
  108.             <div class="col-1 col-md-1 p-2 d-flex flex-column">
  109.                 <div class="flex-grow-1" style="background-image:url(https://images.unsplash.com/photo-1599631438215-75bc2640feb8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1854&q=80); background-size: cover; background-position: center">
  110.                 </div>
  111.             </div>
  112.             <!-- / DIVIDER IMAGE -->
  113.                
  114.             <!-- NAME AND ICON -->
  115.             <div class="col-4 col-md-3 p-2 d-flex flex-column">
  116.                 <div class="p-3 flex-grow-1 d-flex flex-column justify-content-center" style="background-color: #77987A;">
  117.                     <div class="display-4 text-center text-white" style="overflow-wrap: break-word;">
  118.                         MY NAME
  119.                     </div>
  120.                 </div>
  121.                
  122.                 <div class="bg-faded">
  123.                    
  124.                     <!-- ICON -->
  125.                     <img class="w-100" src="https://i.imgur.com/0LG37U2.jpg">
  126.                    
  127.                 </div>
  128.             </div>
  129.             <!-- / NAME AND ICON -->
  130.            
  131.            
  132.             <!-- QUOTE AND IMAGE -->
  133.             <div class="col-7 col-md-4 p-2 d-flex flex-column">
  134.                 <div class="p-3 mb-3 bg-faded d-flex flex-column justify-content-center text-center" style=" border-top-right-radius: 20px;">
  135.                     <div style="font-size: 12pt;">
  136.                        
  137.                         <i class="fa fa-quote-left"></i> Quote here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. <i class="fa fa-quote-right"></i>
  138.                        
  139.                     </div>
  140.                 </div>
  141.                
  142.                  <!-- IMAGE -->
  143.                 <div class="flex-grow-1" style="background-image: url(https://i.imgur.com/mhlrP5i.png); background-size: cover; background-position: center; min-height: 100px;">
  144.                 </div>
  145.                
  146.             </div>
  147.         </div>
  148.        
  149.     <div class="row no-gutters">
  150.            
  151.             <div class="col-12 col-md-3 p-2 d-flex flex-column">
  152.                 <!--  DIVIDER IMAGE -->
  153.                 <div class="p-0 mb-3 bg-faded flex-grow-1" style="background-image: url(https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1854&q=80); background-size: cover; background-position: center 18%; min-height: 100px;">
  154.                 </div>
  155.                 <!-- / DIVIDER IMAGE -->
  156.                
  157.                 <!-- PLAYLIST -->
  158.                 <div class="flex-grow-1 d-flex flex-column justify-content-center" style="background-color: #98ba86;">
  159.                     <p class="text-center" style="font-size: 13pt;">PLAYLIST</p>
  160.                 </div>
  161.                
  162.                 <div class="p-3 bg-faded flex-grow-1 d-flex flex-column justify-content-center">
  163.                    
  164.                     <!-- PLAYLIST ITEM -->
  165.                     <div class="row no-gutters">
  166.                          <div class="col-auto">
  167.                              
  168.                              <!-- EMBED -->
  169.                             <iframe width="45" height="45" style="border-radius: 100px;" src="https://www.youtube.com/embed/ScMzIvxBSi4" title="YouTube video player" frameborder="0" allow="picture-in-picture" allowfullscreen></iframe>
  170.                             </div>
  171.                            
  172.                         <div class="col pl-3">
  173.                             Artist - Title
  174.                         </div>
  175.                     </div>
  176.                     <!-- / PLAYLIST ITEM -->
  177.                    
  178.                     <!-- PLAYLIST ITEM -->
  179.                     <div class="row no-gutters">
  180.                          <div class="col-auto">
  181.                              
  182.                              <!-- EMBED -->
  183.                             <iframe width="45" height="45" style="border-radius: 100px;" src="https://www.youtube.com/embed/ScMzIvxBSi4" title="YouTube video player" frameborder="0" allow="picture-in-picture" allowfullscreen></iframe>
  184.                             </div>
  185.                            
  186.                         <div class="col pl-3">
  187.                             Artist - Title
  188.                         </div>
  189.                     </div>
  190.                     <!-- /PLAYLIST ITEM -->
  191.                    
  192.                 </div>
  193.             </div>
  194.             <!-- / PLAYLIST -->
  195.            
  196.             <div class="col-12 col-md-8 p-2">
  197.                
  198.                 <!-- TAGLINE -->
  199.                 <div class="row no-gutters">
  200.                     <div class="col pb-2">
  201.                         <div class="p-3" style="background-color: #98ba86;">
  202.                             <p class="text-center" style="font-size: 13pt;">
  203.                                 TAGLINE
  204.                             </p>
  205.                         </div>
  206.                     </div>
  207.                 </div>
  208.                 <!-- / TAGLINE -->
  209.                
  210.                 <div class="row no-gutters">
  211.                    
  212.                     <!-- BASICS -->
  213.                     <div class="col col-8 pt-2 pr-2 d-flex flex-column">
  214.                         <div class="p-3 bg-faded flex-grow-1 d-flex flex-column justify-content-center" style=" min-height: 300px; ">
  215.                            
  216.                             <h2 class="text-center" style="font-size: 13pt;">
  217.                                 BASICS
  218.                             </h2>
  219.                            
  220.                             <hr class="w-25">
  221.                            
  222.                             <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>
  223.                            
  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. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  225.                         </div>
  226.                     </div>
  227.                     <!-- / BASICS -->
  228.                
  229.                     <!-- LIKES AND DISLIKES -->
  230.                     <div class="col col-4 pt-2 pl-2 d-flex flex-column text-center">
  231.                         <div class="p-4 bg-faded flex-grow-1 d-flex flex-column justify-content-center">
  232.                             <h2 style="font-size: 12pt;">
  233.                                 LIKES
  234.                             </h2>
  235.                             <p>&bull; Thing 1
  236.                                 <br>
  237.                                 &bull; Thing 2
  238.                                 <br>
  239.                                 &bull; Thing 3
  240.                             </p>
  241.                                
  242.                             <h2 style="font-size: 12pt;">
  243.                                 DISLIKES
  244.                             </h2>
  245.                             <p>&bull; Thing 1
  246.                                 <br>
  247.                                 &bull; Thing 2
  248.                                 <br>
  249.                                 &bull; Thing 3
  250.                             </p>
  251.                         </div>
  252.                     </div>
  253.                     <!-- / LIKES AND DISLIKES -->
  254.                    
  255.                 </div>
  256.             </div>
  257.        
  258.            
  259.             <div class="col-12 col-md-1 p-2 d-flex flex-column">
  260.                 <div class="flex-grow-1" style="background-color: #77987A;">
  261.                 &nbsp;
  262.                 </div>
  263.             </div>
  264.            
  265.         </div>
  266.        
  267.        
  268.         <div class="row no-gutters">
  269.            
  270.             <!-- RELATIONSHIPS -->
  271.             <div class="col-12 col-md-4 p-2 d-flex flex-column">
  272.                 <div class="p-4 bg-faded flex-grow-1 d-flex flex-column justify-content-center" style="min-height: 300px;  border-bottom-left-radius: 20px;">
  273.                     <h2 class="text-center" style="font-size: 13pt;">RELATIONSHIPS</h2>
  274.                            
  275.                     <hr class="w-25">
  276.                    
  277.                     <div class="row no-gutters mb-2">
  278.                         <div class="col-3" style="background-image: url(https://i.imgur.com/mhlrP5i.png); background-size: cover; background-position: center;">
  279.                         </div>
  280.                         <div class="col-9 pl-2">
  281.                             <div class="text-muted">
  282.                                 <b>NAME</b>
  283.                                 <br>Relationship type
  284.                             </div>
  285.                             <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  286.                         </div>
  287.                        
  288.                     </div>
  289.                    
  290.                     <div class="row no-gutters mb-2">
  291.                         <div class="col-3" style="background-image: url(https://i.imgur.com/mhlrP5i.png); background-size: cover; background-position: center;">
  292.                         </div>
  293.                         <div class="col-9 pl-2">
  294.                             <p class="text-muted">
  295.                                 <b>NAME</b>
  296.                                 <br>Relationship type
  297.                             </p>
  298.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  299.                         </div>
  300.                        
  301.                     </div>
  302.                 </div>
  303.             </div>
  304.             <!-- / RELATIONSHIPS -->
  305.            
  306.             <!-- TRIVIA -->
  307.             <div class="col-7 col-md-5 p-2 d-flex flex-column">
  308.                 <div class="p-4 bg-faded flex-grow-1 d-flex flex-column justify-content-center">
  309.                     <h2 class="text-center" style="font-size: 14pt;">TRIVIA</h2>
  310.                            
  311.                     <hr class="w-25">
  312.                    
  313.                     <p>
  314.                         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.
  315.                     </p>
  316.                     <p>
  317.                         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.
  318.                     </p>
  319.                 </div>
  320.             </div>
  321.             <!-- / TRIVIA -->
  322.            
  323.             <!-- IMAGES -->
  324.             <div class="col-5 col-md-3 p-2 d-flex flex-column">
  325.                 <div class="mb-3 flex-grow-1" style="background-image: url(https://images.unsplash.com/photo-1519158477286-3bf8a964ebd3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2071&q=80); background-size: cover; background-position: center;">
  326.                 </div>
  327.                
  328.                 <div class="flex-grow-1" style="background-image: url(https://i.imgur.com/mhlrP5i.png); background-size: cover; background-position: center; height: 20%; border-bottom-right-radius: 20px;">
  329.                 </div>
  330.             </div>
  331.             <!-- / IMAGES -->
  332.            
  333.         </div>
  334.     </div>
  335. </div>
  336.  
  337.    
  338. <div class="mt-4" id="credit" style="font-size: 9pt; text-align: right; opacity: 0.5">
  339.     <a href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-">
  340.         <i class="fa fa-code"></i> Theme by Circlejourney
  341.     </a>
  342. </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!