API tools faq
paste
Advertisement
sodabranch

warm ocean [f2u]

sodabranch
Feb 15th, 2024 (edited)
521
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.93 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    WARM OCEAN [f2u]
  3.    
  4.    code by @ sodabranch on TH
  5.    do not remove credit
  6.    
  7.    *~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
  8.    live code editor:
  9.    [https://th.circlejourney.net/]
  10.    
  11.    WARNING !! do not delete " " or
  12.    it might not look correct
  13. -->
  14.  
  15. <div class="container p-4 rounded text-dark" style="
  16. max-width: 800px;
  17. background:url('https://file.garden/ZcPXKEClQE8Z0nqs/images-th/pattern%20238.gif');
  18. background-size:auto;
  19. background-repeat;
  20. background-position: center center;
  21. background-attachment: fixed;
  22. border: solid 1px #2C5579;
  24. ">
  25.     <!-- INFO -->
  26.     <div class="card mb-2 p-2 rounded bg-light shadow-sm card-outline-primary">
  27.         <p>
  28.         <i class="fa-solid fa-water text-primary" style=" font-size: 22px;" aria-hidden="true"></i>  <b class="font-italic text-uppercase" style="font-size: 28px">
  29.             <!-- NAME
  30.            you can change the font-size to make it smaller to fit your text -->
  31.             <span class="text-primary">name</span> surname
  32.         </b>
  33.         </p>
  34.     </div>
  35.     <div class="row">
  36.         <!-- IMAGE -->
  37.         <div class="col-lg-4  mb-2">
  38.             <div class="card rounded bg-light shadow-sm card-outline-primary" style="position: static">
  39.                 <div class="card-body p-2">
  40.                     <!-- If you want a circle image then replace "rounded" with "rounded-circle"
  41.                    replace the link with your image of choice-->
  42.                    
  43.                     <img src="https://file.garden/ZcPXKEClQE8Z0nqs/images-th/18.png" class="img-fluid mb-1 rounded" style="min-height: 180px; width: 400px; border: solid 1px #ccc">
  44.                    
  45.                     <div class="text-center">
  46.                        
  47.                     <!-- ADJECTIVES
  48.                    add as many as you want
  49.                    code to copy and paste
  50.                     
  51.                    <span class="text-primary">•</span>
  52.                    <span class="badge badge-primary">adjective</span> -->
  53.                     <span class="badge badge-primary">adjective</span> 
  54.                     <span class="text-primary">•</span>
  55.                     <span class="badge badge-primary">adjective</span> 
  56.                     <span class="text-primary">•</span>
  57.                     <span class="badge badge-primary">adjective</span>
  58.                     </div>
  59.                     <hr class="my-1 bg-primary">
  60.                    
  61.                     <!-- BASIC INFO
  62.                    to add more items just copy and paste it at the end -->
  63.                     <div class="pt-3">
  64.                     <!-- age -->
  65.                     <span class="font-weight-bold"> <i class="fas fa-cake-candles"></i> Age</span>
  66.                     <span class="pull-right">content [day/month]</span>
  67.                     <hr class="my-1 bg-primary faded">
  68.                     <!-- pronouns -->
  69.                     <span class="font-weight-bold"> <i class="fas fa-user"></i> Pronouns</span>
  70.                     <span class="pull-right">content</span>
  71.                     <hr class="my-1 bg-primary faded">
  72.                     <!-- gender -->
  73.                     <span class="font-weight-bold"> <i class="fas fa-transgender"></i> Gender</span>
  74.                     <span class="pull-right">content</span>
  75.                     <hr class="my-1 bg-primary faded">
  76.                     <!-- sexuality -->
  77.                     <span class="font-weight-bold"> <i class="fas fa-heart"></i> Orientation</span>
  78.                     <span class="pull-right">content</span>
  79.                     <hr class="my-1 bg-primary faded">
  80.                     <!-- species -->
  81.                     <span class="font-weight-bold"> <i class="fas fa-dna"></i> Species</span>
  82.                     <span class="pull-right">content</span>
  83.                    
  84.                     <!-- to add one more paste <hr class="my-1 bg-primary faded"> below the above item -->
  85.                    
  86.                     <!-- credit -->
  87.                     <hr class="my-1 bg-primary faded">
  88.                     <span class="font-weight-bold"> <i class="fas fa-signature"></i> Code</span>
  89.                     <span class="pull-right">@sodabranch</span>
  90.                     </div>
  91.                 </div>
  92.             </div>
  93.         </div>
  94.        
  95.         <div class="col-lg-8  mb-2">
  96.             <div class="card rounded bg-light shadow-sm card-outline-primary">
  97.                 <div class="card-body p-2">
  98.                     <!-- STATS -->
  99.                     <div class="alert-info p-2 px-3 rounded d-inline-block w-100 text-uppercase">
  100.                     <h3 class="mb-0"><i class="fa-solid fa-chart-simple-horizontal"></i>  stats</h3>
  101.                     </div>
  102.                     <div class="row my-2">
  103.                         <!-- stat bars begin
  104.                        I couldn't figure out progress bars...
  105.                        
  106.                        filled out: <i class="fas fa-circle"></i>
  107.                        empty: <i class="far fa-circle"></i> -->
  108.                        
  109.                         <!-- confidence -->
  110.                         <div class="col-lg-5">
  111.                         <span class="font-weight-bold">Confidence</span>
  112.                         <span class="text-primary pull-right">
  113.                         <i class="fas fa-circle"></i>
  114.                         <i class="far fa-circle"></i>
  115.                         <i class="far fa-circle"></i>
  116.                         <i class="far fa-circle"></i>
  117.                         <i class="far fa-circle"></i>
  118.                         </span>
  119.                         </div>
  120.                         <!-- intelligence -->
  121.                         <div class="col-lg-5">
  122.                         <span class="font-weight-bold">Intelligence</span>
  123.                         <span class="text-primary pull-right">
  124.                         <i class="fas fa-circle"></i>
  125.                         <i class="far fa-circle"></i>
  126.                         <i class="far fa-circle"></i>
  127.                         <i class="far fa-circle"></i>
  128.                         <i class="far fa-circle"></i>
  129.                         </span>
  130.                         </div>
  131.                         <!-- kindness -->
  132.                         <div class="col-lg-5">
  133.                         <span class="font-weight-bold">Kindness</span>
  134.                         <span class="text-primary pull-right">
  135.                         <i class="fas fa-circle"></i>
  136.                         <i class="far fa-circle"></i>
  137.                         <i class="far fa-circle"></i>
  138.                         <i class="far fa-circle"></i>
  139.                         <i class="far fa-circle"></i>
  140.                         </span>
  141.                         </div>
  142.                         <!-- charisma -->
  143.                         <div class="col-lg-5">
  144.                         <span class="font-weight-bold">Charisma</span>
  145.                         <span class="text-primary pull-right">
  146.                         <i class="fas fa-circle"></i>
  147.                         <i class="far fa-circle"></i>
  148.                         <i class="far fa-circle"></i>
  149.                         <i class="far fa-circle"></i>
  150.                         <i class="far fa-circle"></i>
  151.                         </span>
  152.                         </div>
  153.                         <!-- patience -->
  154.                         <div class="col-lg-5">
  155.                         <span class="font-weight-bold">Patience</span>
  156.                         <span class="text-primary pull-right">
  157.                         <i class="fas fa-circle"></i>
  158.                         <i class="far fa-circle"></i>
  159.                         <i class="far fa-circle"></i>
  160.                         <i class="far fa-circle"></i>
  161.                         <i class="far fa-circle"></i>
  162.                         </span>
  163.                         </div>
  164.                         <!-- seriousness -->
  165.                         <div class="col-lg-5">
  166.                         <span class="font-weight-bold">Seriousness</span>
  167.                         <span class="text-primary pull-right">
  168.                         <i class="fas fa-circle"></i>
  169.                         <i class="far fa-circle"></i>
  170.                         <i class="far fa-circle"></i>
  171.                         <i class="far fa-circle"></i>
  172.                         <i class="far fa-circle"></i>
  173.                         </span>
  174.                         </div>
  175.                         <!-- laziness -->
  176.                         <div class="col-lg-5">
  177.                         <span class="font-weight-bold">Laziness</span>
  178.                         <span class="text-primary pull-right">
  179.                         <i class="fas fa-circle"></i>
  180.                         <i class="far fa-circle"></i>
  181.                         <i class="far fa-circle"></i>
  182.                         <i class="far fa-circle"></i>
  183.                         <i class="far fa-circle"></i>
  184.                         </span>
  185.                         </div>
  186.                         <!-- toughness -->
  187.                         <div class="col-lg-5">
  188.                         <span class="font-weight-bold">Toughness</span>
  189.                         <span class="text-primary pull-right">
  190.                         <i class="fas fa-circle"></i>
  191.                         <i class="far fa-circle"></i>
  192.                         <i class="far fa-circle"></i>
  193.                         <i class="far fa-circle"></i>
  194.                         <i class="far fa-circle"></i>
  195.                         </span>
  196.                         </div>
  197.                        
  198.                         </div>
  199.                         <hr class="my-1 bg-primary faded">
  200.                         <!-- STATS -->
  201.                     <div class="alert-info p-2 px-3 rounded d-inline-block w-100 text-uppercase">
  202.                     <h3 class="mb-0"><i class="fa-solid fa-fish"></i>  about</h3>
  203.                     </div>
  204.                     <!-- ABOUT
  205.                    this box scrolls!! -->
  206.                     <div class="px-3" style="height: 160px; overflow-y: auto; overflow-x: hidden">
  207.                         <span style="font-size:17px; font-weight:bold;"><i class="fas fa-circle-info"> </i>General</span><br>
  208.                         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.
  209.                         <br><br>
  210.                         <span style="font-size:17px; font-weight:bold;"><i class="fas fa-circle-info"> </i>Personality</span><br>
  211.                         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.
  212.                     </div>
  213.                    
  214.                     </div>
  215.                 </div>
  216.                 <!-- LIKES & DISLIKES -->
  217.                 <div class="row mt-2">
  218.                     <div class="col-lg mb-2">
  219.                         <div class="card rounded bg-light shadow-sm card-outline-primary" style="position: static">
  220.                             <div class="card-body p-2">
  221.                                 <!-- likes -->
  222.                                 <div class="alert-info p-2 px-3 rounded d-inline-block w-100 text-uppercase">
  223.                                 <h5 class="mb-0"><i class="fa-solid fa-heart"></i>  likes</h5>
  224.                                 </div>
  225.                                 <div style="height: 80px; overflow-y: auto; overflow-x: hidden">
  226.                                 <ul>
  227.                                     <li>content</li>
  228.                                     <li>content</li>
  229.                                     <li>content</li>
  230.                                     <li>content</li>
  231.                                 </ul>
  232.                                 </div>
  233.                             </div>
  234.                         </div>
  235.                     </div>
  236.                    
  237.                     <div class="col-lg mb-2">
  238.                         <div class="card rounded bg-light shadow-sm card-outline-primary" style="position: static">
  239.                             <div class="card-body p-2">
  240.                                 <!-- dislikes -->
  241.                                 <div class="alert-info p-2 px-3 rounded d-inline-block w-100 text-uppercase">
  242.                                 <h5 class="mb-0"><i class="fa-solid fa-heart-crack"></i>  dislikes</h5>
  243.                                 </div>
  244.                                 <div style="height: 80px; overflow-y: auto; overflow-x: hidden">
  245.                                 <ul>
  246.                                     <li>content</li>
  247.                                     <li>content</li>
  248.                                     <li>content</li>
  249.                                     <li>content</li>
  250.                                 </ul>
  251.                                 </div>
  252.                             </div>
  253.                         </div>
  254.                     </div>
  255.                 </div>
  256.                
  257.                 <!-- DESIGN INFO -->
  258.                 <div class="card rounded bg-light shadow-sm card-outline-primary">
  259.                     <div class="card-body p-2">
  260.                         <div class="alert-info p-2 px-3 rounded d-inline-block w-100 text-uppercase">
  261.                         <h3 class="mb-0"><i class="fa-solid fa-whale"></i>  design</h3>
  262.                         </div>
  263.                         <div class="row mt-2">
  264.                     <div class="col-lg mb-2">
  265.                         <div class="card rounded bg-light border-0" style="position: static">
  266.                             <div class="card-body p-2">
  267.                                 <!-- design notes -->
  268.                                 <div class="alert-info p-2 px-3 rounded d-inline-block w-100 text-uppercase">
  269.                                 <h5 class="mb-0"><i class="fa-solid fa-book"></i>  notes</h5>
  270.                                 </div>
  271.                                 <div style="height: 80px; overflow-y: auto; overflow-x: hidden">
  272.                                 <ul>
  273.                                     <li>content</li>
  274.                                     <li>content</li>
  275.                                     <li>content</li>
  276.                                     <li>content</li>
  277.                                 </ul>
  278.                                 </div>
  279.                             </div>
  280.                         </div>
  281.                     </div>
  282.                    
  283.                     <div class="col-lg mb-2">
  284.                         <div class="card rounded bg-light border-0" style="position: static">
  285.                             <div class="card-body p-2">
  286.                                 <!-- trivia -->
  287.                                 <div class="alert-info p-2 px-3 rounded d-inline-block w-100 text-uppercase">
  288.                                 <h5 class="mb-0"><i class="fa-solid fa-pen"></i>  trivia</h5>
  289.                                 </div>
  290.                                 <div style="height: 80px; overflow-y: auto; overflow-x: hidden">
  291.                                 <ul>
  292.                                     <li>content</li>
  293.                                     <li>content</li>
  294.                                     <li>content</li>
  295.                                     <li>content</li>
  296.                                 </ul>
  297.                                 </div>
  298.                             </div>
  299.                         </div>
  300.                     </div>
  301.                 </div>
  302.                
  303.                 <!-- COLORS -->
  304.                 <div class="alert-info p-2 px-3 rounded d-inline-block w-100 text-uppercase">
  305.                 <h5 class="mb-0"><i class="fa-solid fa-eye-dropper"></i>  color palette</h5>
  306.                 </div>
  307.                 <div class="row no-gutters d-flex align-items-stretch w-100 rounded my-2" style="height: 20px; overflow: hidden">
  308.                     <!-- add as many as you fancy -->
  309.                     <div class="col" style="background-color:#EE8888; display: block;"></div>
  310.                     <div class="col" style="background-color:#F8B172; display: block;"></div>
  311.                     <div class="col" style="background-color:#EFFAB4; display: block;"></div>
  312.                     <div class="col" style="background-color:#BBF09A; display: block;"></div>
  313.                     <div class="col" style="background-color:#8ABADE; display: block;"></div>
  314.                     <div class="col" style="background-color:#AA7788; display: block;"></div>
  315.                 </div>
  316.                
  317.                     </div>
  318.                 </div>
  319.             </div>
  320.         </div>
  321.     </div>
  322. </div>
  323. </div>
Tags: html Code toyhouse
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!