API tools faq
paste
Advertisement
feather--weather

basic

feather--weather
Jun 2nd, 2018
1,130
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.05 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  A basic 3 col code made mosrtly for characters with more images than data.
  3.  by _featherweather
  4.  date: 2 june 2018
  5.  feel free to use as a basis; credit is not required but it is nice. if you do use/modify let me see so i can know!!
  6.  
  7. -->
  8. <div class="container-fluid">
  9.     <div class="row">
  10.       <!-- a text box for displaying text -->
  11.         <div class="col-md-3 mb-5">
  12.             <div class="ui-accordion card card-outline-info bg-faded">
  13.                 <h1 class="card-inverse card-info card-header" style="background-color:#aaa;border-color:#333;">Character Name</h1>
  14.                 <div class="ui-accordion-content card-block " style="height:450px;">
  15.                     all the text you could ever want. this is here for samples. i'm just showing samples. here's some <strong>bold</strong>, <em>italicized</em>, and <u>underlined</u> content just so you can see. all the text you could ever want. this is here for samples. i'm just showing samples. here's some <strong>bold</strong>, <em>italicized</em>, and <u>underlined</u> content just so you can see. all the text you could ever want. this is here for samples. i'm just showing samples. here's some <strong>bold</strong>, <em>italicized</em>, and <u>underlined</u> content just so you can see. all the text you could ever want. this is here for samples. i'm just showing samples. here's some <strong>bold</strong>, <em>italicized</em>, and <u>underlined</u> content just so you can see. all the text you could ever want. this is here for samples. i'm just showing samples. here's some <strong>bold</strong>, <em>italicized</em>, and <u>underlined</u> content just so you can see. all the text you could ever want. this is here for samples. i'm just showing samples. here's some <strong>bold</strong>, <em>italicized</em>, and <u>underlined</u> content just so you can see. all the text you could ever want. this is here for samples. i'm just showing samples. here's some <strong>bold</strong>, <em>italicized</em>, and <u>underlined</u> content just so you can see. all the text you could ever want. this is here for samples. i'm just showing samples. here's some <strong>bold</strong>, <em>italicized</em>, and <u>underlined</u> content just so you can see. all the text you could ever want. this is here for samples. i'm just showing samples. here's some <strong>bold</strong>, <em>italicized</em>, and <u>underlined</u> content just so you can see. all the text you could ever want. this is here for samples. i'm just showing samples. here's some <strong>bold</strong>, <em>italicized</em>, and <u>underlined</u> content just so you can see.
  16.                 </div>
  17.             </div>
  18.         </div>
  19.         <!-- a character image OR a carousel of images. -->
  20.         <div class="col-md-7 mb-5">
  21.           <!-- images work best if they're on the slightly large size and rectangular. irregularly sized images will make the row larger -->
  22.           <div class="card card-outline-info bg-faded">
  23.             <div class="card-block" style="height:500px; text-align:center;">
  24.               <!-- begin carousel -->
  25.              
  26.               <div class="carousel slide" id="carousel-466532">
  27.                 <!--
  28.                 the "carousel-indicators" class gives you buttons on the bottom of the carousel to let viewers skip to certain images. it is OPTIONAL
  29.                 -->
  30.                 <ol class="carousel-indicators">
  31.                   <li data-slide-to="0" data-target="#carousel-466532" class="active"></li>
  32.                   <li data-slide-to="1" data-target="#carousel-466532"></li>
  33.                   <li data-slide-to="2" data-target="#carousel-466532"></li>
  34.                 </ol>
  35.                 <div class="carousel-inner">
  36.                         <!-- remove the "w-100" if you don't want img to stretch to fill; keep "mx-auto" to center img -->
  37.                         <div class="carousel-item active">
  38.                             <img class="d-block w-100 mx-auto" style="max-width: 100%; height: 460px" alt="a random image" src="https://file.toyhou.se/images/7785628_91H71GVWjqDucOh.png"/>
  39.                             <!-- you can opt to put in a caption to each image! -->
  40.                         <div class="carousel-caption">
  41.                             <h4>First Thumbnail label</h4>
  42.                             <p>a good way to put who the art is by</p>
  43.                           </div>
  44.                     </div>
  45.                     <!-- START CAROUSEL-ITEM COPY -->
  46.                     <div class="carousel-item">
  47.                         <img class="d-block w-100 mx-auto" style="max-width: 100%; height: 460px"  alt="the image size varies" src="https://file.toyhou.se/images/7785592_xvLoftb59RFk0yu.png"/>
  48.                           <div class="carousel-caption">
  49.                             <h4>Second Thumbnail label</h4>
  50.                             <p>hello i am more text</p>
  51.                           </div>
  52.                     </div>
  53.                     <!-- END CAROUSEL-ITEM COPY -->
  54.                       <div class="carousel-item">
  55.                           <img class="d-block w-100 mx-auto" style="max-width: 100%; height: 460px" alt="and another one" src="https://file.toyhou.se/images/7785566_OfeygwehX7ksgVo.png"/>
  56.                         <div class="carousel-caption">
  57.                             <h4>Third Thumbnail label</h4>
  58.                             <p>and even more text</p>
  59.                         </div>
  60.                     </div>
  61.                 </div> <a class="carousel-control-prev" href="#carousel-466532" data-slide="prev"><span class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" href="#carousel-466532" data-slide="next"><span class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
  62.             </div>
  63.            
  64.             <!-- end carousel -->
  65.             <!-- begin static image -->
  66.             <!--
  67.             <img class="card-img" class="rounded mx-auto" align="middle" style="max-width: 100%; height: 460px" alt="an image" src="https://file.toyhou.se/images/7785566_OfeygwehX7ksgVo.png"/>
  68.             -->
  69.             <!-- end static image -->
  70.             </div><!-- end card block -->
  71.         </div><!-- end card -->
  72.         </div>
  73.         <div class="col-md-2 mb-5">
  74.           <blockquote class="card-block card-blockquote">
  75.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  76.             <footer><small class="text-muted">
  77.               Someone famous in <cite title="Source Title">Source Title</cite>
  78.         </small></footer>
  79.         </div>
  80.     </div>
  81.     <!-- credit link, moving is okay -->
  82.     <p align="right"><a href="https://toyhou.se/a-brilliant-loser" title="_featherweather's codes"><i class="fa fa-user-secret"></i></a></p>
  83.  
  84. </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!