API tools faq
paste
Advertisement
sonneambedo

gift

sonneambedo
Dec 2nd, 2022 (edited)
1,266
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 14.08 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ctrl+f -> replace all
  4.  
  5. custom colors:
  6. borders: CAB1D0
  7. text: ffffff
  8.  
  9. icon for the character: fa-code
  10.  
  11. -->
  12.  
  13. <div style="position:absolute;top:0;bottom:0;left:0;
  14. background:url(https://images.unsplash.com/photo-1574217451061-ad95a5fc773f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8) fixed center;width:100%;z-index:-1;"><br></div>
  15.  
  16. <div style="margin:-62px 0;min-height:80vh;
  17. background:url(https://images.unsplash.com/photo-1574217451061-ad95a5fc773f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8) fixed center;z-index:100;position:relative;">
  18.  
  19. <div class="container" style="color:#ffffff;">
  20.    
  21. <!-- bow -->
  22. <span class="align-items-center justify-content-center mb-n5 text-secondary">
  23.     <i class="fa-solid fa-infinity" style="font-size:6.5rem; z-index:-1"></i>
  24. </span>
  25.  
  26. <!-- name and icon -->    
  27.     <div class="row my-2 p-2 mt-n5" style="font-size:2rem; background:url(https://i.imgur.com/WXEtjp4.png) center no-repeat; background-size:cover; border:2px solid #CAB1D0;">
  28.         <div class="col-md-12  px-4">
  29.             <p class="text-left">
  30.                 <span class="pull-right"><i class="fa-thin fa-code"></i></span>
  31.                 div
  32.             </p>
  33.         </div>
  34.     </div>
  35.    
  36.     <div class="row my-2 p-2" style="background:url(https://i.imgur.com/WXEtjp4.png) center; background-size:cover; border:2px solid #CAB1D0;">
  37.  
  38. <!-- focal image -->
  39. <div class="col-md-4 align-items-end justify-content-start p-3" style="background:url(LINK_HERE) center no-repeat; background-size:contain;"></div>
  40.  
  41. <!-- info -->
  42. <div class="col-md-8">
  43.  
  44.             <div class="row">
  45.                 <div class="col-md-12">
  46.  
  47.  
  48. <!-- basic info -->
  49. <div class="col m-3 text-center">
  50.     <div class="row no-gutters">
  51.     <!-- left cont. -->
  52.     <div class="col-sm"><span class="pull-right"><i class="fa-thin fa-user tooltipster" title="full name" style="color:#ffffff"></i></span>full name</div>
  53.  
  54.     <!-- vertical border -->
  55.     <div class="col-auto px-2 hidden-lg-down">
  56.         <div class="card h-100 rounded-0" style="border-width: 0 1px 0 0;"></div>
  57.     </div>
  58.  
  59.     <!-- right content -->
  60.     <div class="col-sm"><span class="pull-left"><i class="fa-thin fa-venus-mars tooltipster" title="gender" style="color:#ffffff"></i></span> gender (pro/noun)</div>
  61. </div>
  62.     <div class="row no-gutters">
  63.     <!-- left cont. -->
  64.     <div class="col-sm"><span class="pull-right"><i class="fa-thin fa-calendar-day tooltipster" title="age" style="color:#ffffff"></i></span> age </div>
  65.  
  66.     <!-- vertical border -->
  67.     <div class="col-auto px-2 hidden-lg-down">
  68.         <div class="card h-100 rounded-0" style="border-width: 0 1px 0 0;"></div>
  69.     </div>
  70.  
  71.     <!-- right content -->
  72.     <div class="col-sm"><span class="pull-left"><i class="fa-thin fa-cake-candles tooltipster" title="date of birth" style="color:#ffffff"></i></span> date of birth</div>
  73. </div>
  74.     <div class="row no-gutters">
  75.     <!-- left cont. -->
  76.     <div class="col-sm"><span class="pull-right"><i class="fa-thin fa-briefcase tooltipster" title="occupation" style="color:#ffffff"></i></span> occupation </div>
  77.  
  78.     <!-- vertical border -->
  79.     <div class="col-auto px-2 hidden-lg-down">
  80.         <div class="card h-100 rounded-0" style="border-width: 0 1px 0 0;"></div>
  81.     </div>
  82.  
  83.     <!-- right content -->
  84.     <div class="col-sm"><span class="pull-left"><i class="fa-thin fa-home tooltipster" title="residence" style="color:#ffffff"></i></span> residence </div>
  85. </div>
  86.     <div class="row no-gutters">
  87.     <!-- left cont. -->
  88.     <div class="col-sm"><span class="pull-right"><i class="fa-thin fa-paintbrush tooltipster" title="designer" style="color:#ffffff"></i></span><a href="LINK_HERE">designer</a></div>
  89.  
  90.     <!-- vertical border -->
  91.     <div class="col-auto px-2 hidden-lg-down">
  92.         <div class="card h-100 rounded-0" style="border-width: 0 1px 0 0;"></div>
  93.     </div>
  94.  
  95.     <!-- right content -->
  96.     <div class="col-sm"><span class="pull-left"><i class="fa-thin fa-code tooltipster" title="code by sonne" style="color:#ffffff"></i></span> @sonneambedo </div>
  97. </div>
  98.    
  99.    
  100. </div>
  101.  
  102. <!-- short textual about them -->
  103. <p align="center">
  104.  
  105. Short about! <br>
  106. 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.
  107.    
  108. </p>
  109.                 </div>
  110.             </div>
  111.             <hr>
  112.  
  113. <!-- important item/note -->
  114. <div class="row my-2">
  115.  
  116. <!-- image illustrating a fun tidbit -->
  117. <div class="col-md-6" style="background:rgba(0,0,0,.5); border:1px dotted #CAB1D0; background:url(https://i.imgur.com/TLw0sps.png) center no-repeat; background-size:cover;"></div>
  118.  
  119. <!-- a fun tidbit -->
  120. <div class="col-md-6">
  121.                     <p align="center" style="font-size:1.7rem;">Most important item</p>
  122.                    
  123. <p align="center" class="font-italic">Short description.</p>
  124. <p>
  125. It doesn't need to be an item, honestly. It can be the most valued personality trait, favorite genre of music and why, a detail about their appearance, etc. <br> <br>
  126. Box grows as you type, it doesn't scroll.
  127.                     </p>
  128.                 </div>
  129.             </div>
  130.         </div>
  131.  
  132. <hr style="width:100%">
  133.  
  134. <!-- design -->
  135.         <div class="col-md">
  136.             <div class="row">
  137.  
  138. <!-- color scheme  -->
  139.                 <div class="col-md-3 text-center">
  140.                     <div class="card py-2 bg-transparent border-0">
  141. <i class="fas fa-code" style="font-size:3rem; color:#CAB1D0"></i> <br> <br>
  142. <i class="fas fa-code" style="font-size:3rem; color:#7E0000"></i> <br> <br>
  143. <i class="fas fa-code" style="font-size:3rem; color:#73481D"></i> <br> <br>
  144. <i class="fas fa-code" style="font-size:3rem; color:#9B9B9B"></i>
  145. </div>
  146.                 </div>
  147.  
  148. <!-- design notes -->
  149.                 <div class="col-md-9">             
  150. <p align="center" style="font-size:1.7rem;">Design notes</p>
  151.  
  152. <div  style="max-height:295px; overflow-y:auto">
  153.           <ul class="fa-ul">
  154.           <li> <span class="fa-li"><i class="fad fa-code"></i></span>
  155.             bleh bloh. notes abt design
  156.           </li>
  157.           <li> <span class="fa-li"><i class="fad fa-code"></i></span>
  158.             such as: She tends to dress in colors corresponding to her birth-tree: blood orange. Dark reds and oranges are most present in all of her clothes, with occassional black item.
  159.           </li>
  160.          
  161.           <li> <span class="fa-li"><i class="fad fa-code"></i></span>
  162.             copypaste this for more notes
  163.           </li>
  164.          
  165.           <li> <span class="fa-li"><i class="fad fa-code"></i></span>
  166.             it scrolls btw. look at it gooooo
  167.           </li>
  168.          
  169.           <li> <span class="fa-li"><i class="fad fa-code"></i></span>
  170.             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.it scrolls btw. look at it gooooo
  171.           </li>
  172.          
  173.           <li> <span class="fa-li"><i class="fad fa-code"></i></span>
  174.             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.it scrolls btw. look at it gooooo
  175.           </li>
  176.          
  177.           </ul>
  178. </div>
  179.                 </div>
  180.             </div>
  181.         </div>
  182.     <!-- vertical border -->
  183.     <div class="col-auto px-2 hidden-lg-down">
  184.         <div class="card h-100 rounded-0" style="border-width: 0 1px 0 0;"></div>
  185.     </div>
  186.  
  187. <!-- personality notes -->
  188.         <div class="col-md">
  189.             <div class="row">
  190.                 <div class="col-md-12 my-3">
  191. <div>
  192. <div>
  193.                                 <div class="row no-gutters mx-3 mb-2">
  194.                                     <div class="col text-left" >
  195.                                     <p>
  196.                                         Instictive
  197.                                         <span class="pull-right">
  198.                                         Calculative
  199.                                         </span>
  200.                                     </p>
  201.                                     </div>
  202.                                 </div>
  203.                                 <div class="row no-gutters">
  204.                                     <div class="col align-items-center" style="position: relative;">
  205.                                         <div class="w-100" style="height: 1px; background-color:rgba(255,255,255,.5);"></div>
  206.                                         <i class="fas fa-code" style=" position: absolute; left: calc(90%); font-size:0.9rem;"></i>
  207.                                     </div>
  208.                                 </div>
  209. </div>
  210.    
  211. <div>
  212.                                 <div class="row no-gutters mx-3 my-2">
  213.                                     <div class="col text-left" >
  214.                                     <p>
  215.                                         Deceptive
  216.                                         <span class="pull-right">
  217.                                         Sincere
  218.                                         </span>
  219.                                     </p>
  220.                                     </div>
  221.                                 </div>
  222.                                 <div class="row no-gutters">
  223.                                     <div class="col align-items-center" style="position: relative;">
  224.                                         <div class="w-100" style="height: 1px; background-color:rgba(255,255,255,.5);"></div>
  225.                                         <i class="fas fa-code" style=" position: absolute; left: calc(45%); font-size:0.9rem;"></i>
  226.                                     </div>
  227.                                 </div>
  228. </div>
  229.    
  230. <div>
  231.                                 <div class="row no-gutters mx-3 my-2">
  232.                                     <div class="col text-left" >
  233.                                     <p>
  234.                                         Cold
  235.                                         <span class="pull-right">
  236.                                         Emotional
  237.                                         </span>
  238.                                     </p>
  239.                                     </div>
  240.                                 </div>
  241.                                 <div class="row no-gutters">
  242.                                     <div class="col align-items-center" style="position: relative;">
  243.                                         <div class="w-100" style="height: 1px; background-color:rgba(255,255,255,.5);"></div>
  244.                                         <i class="fas fa-code" style=" position: absolute; left: calc(65%); font-size:0.9rem;"></i>
  245.                                     </div>
  246.                                 </div>
  247. </div>
  248.    
  249. <div>
  250.                                 <div class="row no-gutters mx-3 my-2">
  251.                                     <div class="col text-left" >
  252.                                     <p>
  253.                                         Reserved
  254.                                         <span class="pull-right">
  255.                                         Affectionate
  256.                                         </span>
  257.                                     </p>
  258.                                     </div>
  259.                                 </div>
  260.                                 <div class="row no-gutters">
  261.                                     <div class="col align-items-center" style="position: relative;">
  262.                                         <div class="w-100" style="height: 1px; background-color:rgba(255,255,255,.5);"></div>
  263.                                         <i class="fas fa-code" style=" position: absolute; left: calc(25%); font-size:0.9rem;"></i>
  264.                                     </div>
  265.                                 </div>
  266. </div>
  267.    
  268. <div>
  269.                                 <div class="row no-gutters mx-3 my-2">
  270.                                     <div class="col text-left" >
  271.                                     <p>
  272.                                         Family-oriented
  273.                                         <span class="pull-right">
  274.                                         Self-oriented
  275.                                         </span>
  276.                                     </p>
  277.                                     </div>
  278.                                 </div>
  279.                                 <div class="row no-gutters">
  280.                                     <div class="col align-items-center" style="position: relative;">
  281.                                         <div class="w-100" style="height: 1px; background-color:rgba(255,255,255,.5);"></div>
  282.                                         <i class="fas fa-code" style=" position: absolute; left: calc(5%); font-size:0.9rem;"></i>
  283.                                     </div>
  284.                                 </div>
  285. </div>
  286. </div>
  287.             </div>
  288.             </div>
  289.  
  290. <hr>
  291.  
  292.             <div class="row">
  293.                 <div class="col-md-6">
  294. <div>
  295. <div class="card border-0 bg-transparent mb-3">
  296. <div class="card-body align-items-center">
  297.     <span style="font-size:1.1rem;">MBTI</span>
  298.     <span class="col"></span>
  299.     <span> [content] </span>
  300. </div> 
  301. </div>
  302.    
  303. <div class="card border-0 bg-transparent mb-3">
  304. <div class="card-body align-items-center">
  305.     <span style="font-size:1.1rem;"> ARCHETYPE </span>
  306.     <span class="col"></span>
  307.     <span> [content] </span>
  308. </div> 
  309. </div>
  310. </div>  
  311.                 </div>
  312.                 <div class="col-md-6">
  313. <div>
  314. <div class="card border-0 bg-transparent mb-3">
  315. <div class="card-body align-items-center">
  316.     <span style="font-size:1.1rem;">LEADING TRAIT</span>
  317.     <span class="col"></span>
  318.     <span> [content] </span>
  319. </div> 
  320. </div>
  321.    
  322. <div class="card border-0 bg-transparent">
  323. <div class="card-body align-items-center">
  324.     <span style="font-size:1.1rem;">BIGGEST FLAW </span>
  325.     <span class="col"></span>
  326.     <span> [content] </span>
  327. </div> 
  328. </div>
  329. </div>  
  330.                 </div>
  331.             </div>
  332.         </div>
  333.     </div>
  334. </div>
  335. </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!