Advertisement
Oceanfosh

Pond Sunfall Character Code

Jun 23rd, 2024 (edited)
627
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.07 KB | None | 0 0
  1. <!-- POND SECTION -->
  2.  
  3. <!--
  4.    auauhsu
  5.    accent color: #1971e9
  6.    uhh just be careful ig cause theres light mode and dark mode soooo
  7.  
  8.     please replace 'siya' in the id of the thing below with a short name of your character
  9.     (ex. storm, 'prince') in lowercase, and the 2 instances of 'siyapage' with that name + page. thanks :)
  10.  
  11. -->
  12.  
  13. <div class="container m-2" style="max-width:800px;">
  14.  
  15.     <a id="siya" class="btn btn-block text-left" style="border-width:2px; border-color:#1971e9; box-shadow:none; color:#1971e9;" data-toggle="collapse" href="#siyapage">
  16.       <span style="font-size:20px;">SIYA</span>
  17.     </a>
  18.  
  19.  
  20. </div>
  21.  
  22.  
  23. <div id="siyapage" class="container collapse show" style="max-width:800px;">
  24.   <div class="card px-4 pt-4 pb-2 m-2 bg-faded" style="border-width:1px; border-color:#1971e9;">
  25.   <!-- Left side -->
  26.    
  27.     <div class="row no-gutters" style="margin-bottom:0px; pb-0">
  28.       <div class="col-sm">
  29.         <div style="border-width:1px; border-color:#1971e9; width:200px;">
  30.  
  31.        
  32.              
  33.              
  34.         <!--IMAGE-->
  35.           <div class="d-inline-flex card bg-dark rounded-circle" style="width:200px; height:200px; border-style:solid;border-width:2px;border-color:#1971e9;z-index:1;">
  36.             <div class="card border-0 rounded-circle h-100" style="background-size:cover; background-position:center;
  37.            background-image:url('https://i.imgur.com/0Ugyf4Z.gif');"> <!--image-->
  38.           </div>
  39.        
  40.           </div> <!--Image end-->
  41.          
  42.           <!-- MAIN NAME, KEEP IT SHORT -->
  43.           <div class="card" style="border-width:1px; border-color:#1971e9; width:180px; max-height:490px; margin:auto; position:relative;top:-30px;padding-top:40px;">
  44.             <span style="text-align:center; font-family: Rockwell; font-size:30px; color:#1971e9;"><i>
  45.                   NAME
  46.               </i></span>
  47.               <hr class="w-100" style="margin-bottom:1px;">
  48.             <div class="p-2" style="font-family: Andale Mono, monospace;">
  49.              
  50.             <!-- SMALL INFO NOW -->
  51.            
  52.             <!-- NAME -->
  53.               <div class="row">
  54.                 <div class="col">
  55.                   <span class="faded"><b>NAME</b></span>
  56.                 </div>
  57.                 <div class="col-6" style="text-align: right;">
  58.                   Siya
  59.                 </div>
  60.               </div>
  61.             <!-- GENDER, can change to pronouns if wanted -->
  62.                 <div class="row">
  63.                   <div class="col">
  64.                     <span class="faded"><b>GENDER</b></span>
  65.                   </div>
  66.                   <div class="col" style="text-align: right;">
  67.                     Male
  68.                   </div>
  69.               </div>
  70.              
  71.             <!-- SPECIES --> <!-- uh if you want to delete the (i) thing if your char only has one ref/form go for it -->
  72.                 <div class="row">
  73.                   <div class="col-7">
  74.                     <span class="faded"><b>SPECIES </b><span data-toggle="tooltip" title="The species listed here applies to the form they took in the roleplay, as each character could only use one!"><i class="fa-light fa-circle-info"></i></span></span>
  75.                   </div>
  76.                   <div class="col" style="text-align: right;">
  77.                     Human
  78.                   </div>
  79.               </div>
  80.              
  81.               <hr class="w-50">
  82.              
  83.             <!-- ARTFIGHT -->
  84.                 <div class="row">
  85.                   <div class="col">
  86.                     <span class="faded"><b>ARTFIGHT</b></span>
  87.                   </div>
  88.                   <div class="col" style="text-align: right;">
  89.                   <a style="text-color:#1971e9;" href="https://artfight.net/character/3013639.siya"><i class="fa-regular fa-link"></i></a>
  90.                   </div>
  91.               </div>
  92.              
  93.             <!-- TOYHOUSE -->
  94.                 <div class="row">
  95.                   <div class="col">
  96.                     <span class="faded"><b>TOYHOUSE</b></span>
  97.                   </div>
  98.                   <div class="col" style="text-align: right;">
  99.                   N/A
  100.                   </div>
  101.               </div>
  102.              
  103.              
  104.               <div style="text-align:center;margin-top:10px;">@Oceanfosh</div> <!-- owner of chars username -->
  105.              
  106.             </div>
  107.              
  108.              
  109.           </div>
  110.          
  111.          
  112.         </div>
  113.           <!------------------------------------------------>
  114.      </div>
  115.      
  116.      
  117.       <!-- Right side -->
  118.      
  119.       <div class="col-lg-8">
  120.         <div class="card p-3" style="border-width:1px; border-color:#1971e9; height:470px;">
  121.             <div class="d-flex justify-content-end" style="font-family:times; font-size:50px; color:#1971e9;">PROFILE</div>
  122.             <hr style="width:95%; margin-top:0px;">
  123.            
  124.            
  125.             <div class="p-3" style="overflow:auto; height:400px;">
  126.               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.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.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. 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.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.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. 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.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.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. 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.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.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.
  127.             </div>
  128.         </div>
  129.         </div>
  130.         </div>
  131.      
  132.           <div style="margin-right:0;margin-left:auto;">
  133.             <a href="#top" class="text-muted">back to top</a>
  134.             <br>
  135.           </div>
  136.          
  137.          
  138.     </div>
  139.   <!-- end row -->
  140.  
  141.  
  142.  
  143. </div>
  144.  
  145. <!-- POND SECTION END -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement