API tools faq
paste
circlejourney

Fishy

circlejourney
Mar 20th, 2020
974
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.61 KB | None | 0 0
raw download clone embed print report
  1. <!-- Fishy theme by Circlejourney for Raddishes. Editing is allowed. Just remember to credit me! -->
  2. <div class="container-fluid" style="background: url(https://66.media.tumblr.com/33b269f01dc188d6cddd39887b486b59/tumblr_inline_mkjkxoxwl51qz4rgp.jpg); position: relative; width: auto; padding: 32px; margin: -15px; ">
  3.    
  4.     <!-- Change the URL inside the brackets to change the background! -->
  5.    
  6.     <div class="row mb-1">
  7.         <div class="col-12 col-lg-7">
  8.             <div class="nav nav-pills nav-fill flex-wrap">
  9.                
  10.                 <a class="nav-item nav-link btn btn-default mr-1 active" style="border-radius: 0;" data-toggle="tab" href="#art-1">
  11.                     Art 1
  12.                 </a>
  13.                
  14.                 <a class="nav-item nav-link btn btn-default mr-1 rounded-0" style="border-radius: 0;" data-toggle="tab" href="#art-2">
  15.                     Art 2
  16.                 </a>
  17.                
  18.                 <!-- Copy this part to make a new tab, changing "#art-3" to the new tab's ID (make sure it's the same as the ID on the tab pane, and don't forget the #) -->
  19.                 <a class="nav-item nav-link btn btn-default mr-1 rounded-0" style="border-radius: 0;" data-toggle="tab" href="#art-3">
  20.                     Art 3
  21.                 </a>
  22.                 <!-- End of part to copy -->
  23.                
  24.             </div>
  25.            
  26.             <div class="tab-content text-center" style="height: 350px;">
  27.                 <div class="tab-pane show active h-100" id="art-1">
  28.                     <img style="max-height: 100%;" src="https://cdn.discordapp.com/attachments/342108744634728452/690554394671841320/Fipoi1.png">
  29.                     <!-- Do keep the "max height" property on the image -->
  30.                 </div>
  31.                
  32.                 <div class="tab-pane h-100" id="art-2">
  33.                     <img style="max-height: 100%;" src="https://cdn.discordapp.com/attachments/342108744634728452/690554396727050341/Fipoi2.png">
  34.                 </div>
  35.                
  36.                 <!-- Copy this part to make a new tab, changing "art-3" to the new tab's ID (make sure it's the same as the ID on the button). Replace the URL in the image src to your preferred image -->
  37.                 <div class="tab-pane h-100" id="art-3">
  38.                     <img style="max-height: 100%;" src="https://via.placeholder.com/250x400">
  39.                 </div>
  40.                 <!-- End of part to copy -->
  41.                
  42.             </div>
  43.         </div>
  44.        
  45.         <div class="col-12 col-lg-5">
  46.             <div class="card rounded-0">
  47.                 <div class="card-header">
  48.                     <h4 class="text-center m-0">Basic info</h4>
  49.                 </div>
  50.                 <div class="row no-gutters text-center">
  51.                     <div class="col-3 p-2 card rounded-0 border-top-0 border-left-0 border-bottom-0">
  52.                         Name
  53.                     </div>
  54.                     <div class="col-9 p-2">
  55.                         MY NAME
  56.                     </div>
  57.                 </div>
  58.                
  59.                 <hr class="m-0">
  60.                
  61.                 <div class="row no-gutters text-center">
  62.                     <div class="col-3 p-2 card rounded-0 border-top-0 border-left-0 border-bottom-0">
  63.                         Called
  64.                     </div>
  65.                     <div class="col-9 p-2">
  66.                         MY ALIASES
  67.                     </div>
  68.                 </div>
  69.                
  70.                 <hr class="m-0">
  71.                 <div class="row no-gutters text-center">
  72.                     <div class="col-3 p-2 card rounded-0 border-top-0 border-left-0 border-bottom-0">Age</div>
  73.                     <div class="col-9 p-2">MY AGE</div>
  74.                 </div>
  75.                
  76.                 <hr class="m-0">
  77.                 <div class="row no-gutters text-center">
  78.                     <div class="col-3 p-2 card rounded-0 border-top-0 border-left-0 border-bottom-0">Gender</div>
  79.                     <div class="col-9 p-2">MY GENDER</div>
  80.                 </div>
  81.                
  82.                 <hr class="m-0">
  83.                 <div class="row no-gutters text-center">
  84.                     <div class="col-3 p-2 card rounded-0 border-top-0 border-left-0 border-bottom-0">Pronoun</div>
  85.                     <div class="col-9 p-2">MY PRONOUNS</div>
  86.                 </div>
  87.                
  88.                 <hr class="m-0">
  89.                 <div class="row no-gutters text-center">
  90.                     <div class="col-3 p-2 card rounded-0 border-top-0 border-left-0 border-bottom-0">Species</div>
  91.                     <div class="col-9 p-2">MY SPECIES</div>
  92.                 </div>
  93.                
  94.                 <hr class="m-0">
  95.                 <div class="row no-gutters text-center">
  96.                     <div class="col-3 p-2 card rounded-0 border-top-0 border-left-0 border-bottom-0">Height</div>
  97.                     <div class="col-9 p-2">MY HEIGHT</div>
  98.                 </div>
  99.                
  100.                 <hr class="m-0">
  101.                 <div class="row no-gutters text-center">
  102.                     <div class="col-3 p-2 card rounded-0 border-top-0 border-left-0 border-bottom-0">Orientation</div>
  103.                     <div class="col-9 p-2">MY ORIENTATION</div>
  104.                 </div>
  105.                
  106.                 <hr class="m-0">
  107.             </div>
  108.         </div>
  109.     </div>
  110.    
  111.     <div class="card rounded-0">
  112.         <div class="card-block">
  113.             <h2>About</h2>
  114.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis tempor orci, sit amet condimentum ligula. Pellentesque nisl metus, luctus et blandit ac, feugiat at nisi. Cras vitae purus vel nunc hendrerit fermentum. Etiam ultricies elit vel urna maximus mattis. Etiam rhoncus aliquet lectus sed facilisis. Quisque eu quam a orci auctor imperdiet id a felis. Cras sed purus nec nunc mollis gravida.</p>
  115.            
  116.             <hr>
  117.            
  118.             <h2>Backstory</h2>
  119.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis tempor orci, sit amet condimentum ligula. Pellentesque nisl metus, luctus et blandit ac, feugiat at nisi. Cras vitae purus vel nunc hendrerit fermentum. Etiam ultricies elit vel urna maximus mattis. Etiam rhoncus aliquet lectus sed facilisis. Quisque eu quam a orci auctor imperdiet id a felis. Cras sed purus nec nunc mollis gravida.</p>
  120.            
  121.             <hr>
  122.            
  123.             <h2>Trivia</h2>
  124.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis tempor orci, sit amet condimentum ligula. Pellentesque nisl metus, luctus et blandit ac, feugiat at nisi. Cras vitae purus vel nunc hendrerit fermentum. Etiam ultricies elit vel urna maximus mattis. Etiam rhoncus aliquet lectus sed facilisis. Quisque eu quam a orci auctor imperdiet id a felis. Cras sed purus nec nunc mollis gravida.</p>
  125.            
  126.             <hr>
  127.            
  128.             <h2>Empty section where you can list things</h2>
  129.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis tempor orci, sit amet condimentum ligula. Pellentesque nisl metus, luctus et blandit ac, feugiat at nisi. Cras vitae purus vel nunc hendrerit fermentum. Etiam ultricies elit vel urna maximus mattis. Etiam rhoncus aliquet lectus sed facilisis. Quisque eu quam a orci auctor imperdiet id a felis. Cras sed purus nec nunc mollis gravida.</p>
  130.         </div>
  131.     </div>
  132.     <a style="position: absolute; bottom: 5px; right: 5px; font-size: 10pt;" href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-">Theme by Circlejourney</a>
  133. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
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!