fork(1) download
copy 
  1. <!---------------------------------------
  2.  
  3.              ✦ Blanc - [F2U] ✦
  4.  
  5.         - Please DO NOT remove my credits; 
  6.  
  7.         - Thanks for using ♡
  8.  
  9. ------------------------------------------------------------>
  10.  
  11.  
  12. <div style="background-image:url(https://i...content-available-to-author-only...b.co/k66Qkcz/k.png); 
  13. background-attachment: fixed; max-width: 1040px;" class="container-fluid px-lg-4 mx-0 mx-auto px-2 pt-4 pb-4 p-3 rounded">
  14.  
  15.  
  16.  <div class="p-1">
  17.     <div class="card border-1 pb-2 pt-3 pl-3 mb-3 mx-auto mx-1 text-center rounded col-md-12 col-12" style="box-shadow: 0px 0px 6px rgba(0,0,0,.15); width: 983px"><h1>
  18.  
  19.       <i style="font-weight: 300; font-size: 1.0em; letter-spacing: 1px;">
  20.  
  21.   <!-------------- QUOTE -------------->
  22.  
  23.   <i class="fal fa-quote-left fa-lg pull-left"></i>
  24.  
  25.   &nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing. &nbsp;
  26.  
  27.   <i class="fal fa-quote-right fa-lg pull-right"></i></h1></div>
  28.  
  29.   <!-------------- /QUOTE -------------->
  30.  
  31.   <div class="row no-gutters">
  32.       <div class="card card-block border-0 rounded-0 col-md-3 col-12 p-1 mb-0" style="border-top-left-radius: 5px; border-bottom-left-radius: 5px; overflow-y: auto; box-shadow: 0px 0px 6px rgba(0,0,0,.15);">
  33.  <div style="overflow-y:auto;">
  34.  
  35.     <!-------------- NAME AND ICON | I suggest you to put a short Name -------------->
  36.  
  37.     <div class="text-center">
  38.          <h1 class="display-3 text-center mt-2 mb-3">My Name</h1></div>
  39.  
  40.     <div class="col-md-3 col-12 px-3">
  41.     <img class="mb-4 img-thumbnail d-block mx-auto rounded-circle" src="https://i...content-available-to-author-only...b.co/GxGcqdg/7.png" style="max-height: 230px; max-width: 200px; float-left pr-2"></div>
  42.  
  43.     <!-------------- //NAME AND ICON -------------->
  44.  
  45.    <ul class="nav flex-column mb-4;">
  46.       <li class="col-md-12 col-12 mb-2">
  47.         <a class="btn text-uppercase bg-faded btn-block btn-outline-secondary active" data-toggle="tab" href="#vert1"> Intro</a></li>
  48.  
  49.       <li class="col-md-12 col-12 mb-2">
  50.         <a class="btn text-uppercase bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#vert2"> Trivia</a></li>
  51.  
  52.       <li class="col-md-12 col-12 mb-2">
  53.         <a class="btn text-uppercase bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#vert3"> Bacstory</a></li>
  54.  
  55.       <li class="col-md-12 col-12 mb-2">
  56.         <a class="btn text-uppercase bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#vert4"> Relationships</a></li>
  57.     </ul>
  58. </div>
  59. </div><!-------------- FIRST BLOCK ---------->
  60.  
  61.     <div class="card card-block border-0 rounded-0 p-1 col-md-9 col-12" style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 4px 0px 6px rgba(0,0,0,.15);">
  62.  
  63.         <div class="col-md-12 col-12 p-1">
  64.     <div class="tab-content mt-2 mr-1">
  65.       <div class="tab-pane fade active show" id="vert1">
  66.         <div class="card col-md-12 mb-1 col-12 p-3" style="height: 448px; overflow: auto;">
  67.             <div style="letter-spacing:0.8px;">
  68.           <div class="pl-1">
  69.  
  70.           <!-------------- ABOUT SECTION -------------->
  71.  
  72.           <h3 class="text-default" div style="font-weight:normal">About <i class="fal fa-info-circle pull-right"></i></h3>
  73.           <hr class="my-2">
  74.  
  75.  
  76.           <h1 class="text-left text-muted small pt-2 pb-0" style="letter-spacing:1px;"><i class="fal fa-star"></i> 
  77.           adjective . adjective . adjective</h1>
  78.  
  79.           <p class="text-muted">
  80.               Write about your character here. This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum condimentum metus eu eleifend. Vivamus eu eros a ex aliquam fermentum vitae sed elit. Sed vitae lorem mi. Sed pulvinar euismod nibh, a placerat ante venenatis egestas. Aliquam at ullamcorper arcu. Suspendisse efficitur fringilla nulla, eu malesuada tortor mattis eget. In auctor lorem a diam congue sagittis. Nulla ac blandit urna. </p>
  81.  
  82.          <p class="text-muted">
  83.               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum condimentum metus eu eleifend. Vivamus eu eros a ex aliquam fermentum vitae sed elit. Sed vitae lorem mi. Sed pulvinar euismod nibh, a placerat ante venenatis egestas. Aliquam at ullamcorper in auctor. </p>
  84.  
  85.           <div class="row no-gutters">
  86.                         <div class="col-md-6 mt-3">
  87.  
  88.                           <!-------------- LIKE AND DISLIKE SECTION -------------->
  89.  
  90.           <p class="text-uppercase text-default" style="letter-spacing:2px;">
  91.                    <i class="fal fa-check fa-fw"></i> Likes</p>
  92.  
  93.                                 <ul class="mb-3">
  94.                                     <li class="text-muted">content</li>
  95.                                     <li class="text-muted">content</li>
  96.                                     <li class="text-muted">content</li>
  97.                                     <li class="text-muted">content</li>
  98.                                 </ul>
  99.                             </div>
  100.  
  101.                         <div class="col-md-6 mb-2">
  102.  
  103.           <p class="text-uppercase text-default mt-3" style="letter-spacing:2px;">
  104.                    <i class="fal fa-times fa-fw"></i> Dislikes</p>
  105.  
  106.                                 <ul class="mb-3">
  107.                                     <li class="text-muted">content</li>
  108.                                     <li class="text-muted">content</li>
  109.                                     <li class="text-muted">content</li>
  110.                                     <li class="text-muted">content</li>
  111.                                 </ul>
  112.                             </div></div><!-------------- /LIKE AND DISLIKE SECTION -------------->
  113.             </div>
  114.         </div>
  115.     </div>
  116. </div>
  117.  
  118.     <div class="tab-pane fade" id="vert2">
  119.       <div class="card p-3 mb-1" style="height: 448px; overflow: auto;">
  120.           <div style="letter-spacing:0.8px;">
  121.               <div class="pl-1">
  122.  
  123.                         <!-------------- STATS SECTION -------------->
  124.  
  125.             <h3 class="text-default" div style="font-weight:normal">Trivia <i class="fal fa-star pull-right"></i></h3>
  126.             <hr class="my-2">
  127.  
  128.            <p class="text-muted mb-1"> Write something about your character here, trivia, personality traits, skills. This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum condimentum metus eu eleifend. Vivamus eu eros a ex aliquam fermentum vitae sed elit. </p>
  129.  
  130.            <hr> <!-------------- /TRIVIA SECTION -------------->
  131.  
  132.            <!-------------- DESIGN NOTES SECTION -------------->
  133.  
  134.             <div class="row no-gutters">
  135.  
  136.                     <ul style="list-style-type:circle">
  137.                       <li class="mb-1 text-muted">
  138.                         Mauris id lacus id augue finibus fringilla.
  139.                       </li>
  140.                       <li class="mb-1 text-muted">
  141.                         Nunc odio libero, tincidunt ut pulvinar quis, ultrices at arcu.
  142.                       </li>
  143.                       <li class="mb-1 text-muted">
  144.                         Duis feugiat porta nulla sit amet commodo.
  145.                       </li>
  146.                     </ul>
  147.                   </div></div> <!---------- //DESIGN NOTES -------------------->
  148.  
  149.  
  150.                 <div class="row no-gutters">
  151.  
  152.                    <!---------- MOODBOARD ----------------------------->
  153.             <div class="col-3 p-1">
  154.                 <img src="https://i...content-available-to-author-only...b.co/XWTzPBq/image.png" style="border-radius: 0.3em;">
  155.             </div>
  156.  
  157.             <div class="col-3 p-1">
  158.                <img src="https://i...content-available-to-author-only...b.co/XWTzPBq/image.png" style="border-radius: 0.3em;">
  159.             </div>
  160.  
  161.             <div class="col-3 p-1">
  162.                 <img src="https://i...content-available-to-author-only...b.co/XWTzPBq/image.png" style="border-radius: 0.3em;">
  163.             </div>
  164.  
  165.             <div class="col-3 p-1">
  166.                 <img src="https://i...content-available-to-author-only...b.co/XWTzPBq/image.png" style="border-radius: 0.3em;">
  167.             </div>
  168.         </div>                   
  169.     </div>
  170. </div></div><!-------------- //TRIVIA SECTION -------------->
  171.  
  172.     <div class="tab-pane fade" id="vert3">
  173.       <div class="card p-3 mb-1" style="height: 448px; overflow: auto;">
  174.           <div style="letter-spacing:0.8px;">
  175.             <div class="pl-1">
  176.  
  177.                       <!-------------- BACKSTORY SECTION -------------->
  178.  
  179.           <h3 class="text-default" div style="font-weight:normal"> Backstory <i class="fal fa-book-open pull-right"></i></h3>
  180.           <hr class="my-2">
  181.           <p class="text-muted">
  182.               Write about their story here. This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum condimentum metus eu eleifend. Vivamus eu eros a ex aliquam fermentum vitae sed elit. Sed vitae lorem mi. Sed pulvinar euismod nibh, a placerat ante venenatis egestas. Aliquam at ullamcorper arcu. Suspendisse efficitur fringilla nulla, eu malesuada tortor mattis eget. In auctor lorem a diam congue sagittis. </p>
  183.  
  184.           <p class="text-uppercase mb-1"><i class="fal fa-bookmark"></i> Subheader </p>
  185.  
  186.           <p class="text-muted">
  187.              Cras molestie porttitor sollicitudin. Pellentesque ac turpis accumsan, efficitur erat et, mollis massa. Etiam sit amet vehicula neque. Suspendisse non sodales purus. Phasellus luctus lacinia est sed pellentesque. Suspendisse et molestie mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sed velit id quam efficitur condimentum quis eget quam. Nullam tincidunt semper eros, eu imperdiet nulla. Quisque consectetur metus nibh, non sodales ipsum rhoncus at. Orci varius natoque penatibus et.</p>
  188.  
  189.           <p class="text-muted">   
  190.              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum condimentum metus eu eleifend. Vivamus eu eros a ex aliquam fermentum vitae sed elit. Sed vitae lorem mi. Sed pulvinar euismod nibh, a placerat ante venenatis egestas. Etiam in sodales massa.</p>
  191.  
  192.                       <!------------- //BACSTORY SECTION ------------->
  193.  
  194.             </div>
  195.         </div>
  196.     </div>
  197. </div>
  198.  
  199.       <div class="tab-pane fade" id="vert4">
  200.         <div class="card p-3 mb-1" style="height: 448px; overflow: auto;">
  201.             <div style="letter-spacing:0.8px;">
  202.                 <div class="pl-1">
  203.  
  204.             <!-------------- RELATIONSHIPS SECTION -------------->
  205.  
  206.             <h3 class="text-default" <div style="font-weight:normal">Relationships <i class="fal fa-heart pull-right"></i></h3>
  207.           <hr class="my-2 mb-4">
  208.  
  209.                       <!-- ------------- FIRST CHARACTER ------------- -->
  210.  
  211.                 <div class="row no-gutters" >
  212.                   <div class="col-md-2">
  213.                     <img class="fr-rounded" src="https://i...content-available-to-author-only...b.co/2Yw1rr3/z.png"></div>
  214.  
  215.                        <div class="col-md-10 col-12 pl-md-2 pr-md-3 h-100">
  216.                          <div class=" mt-2 mt-md-0">
  217.                             <span class="text-uppercase">
  218.  
  219.                     <a href="URL" class="pull-left pb-1">Character Name</a></span>
  220.                       <span class="pull-right pb-2">[ <i>Relationship</i> ]</span>
  221.                               </div><hr class="my-1" style="filter:opacity(75%);">
  222.                               <div style="font-size: 14px;">
  223.  
  224.                       <div class="h-100 pt-1 pl-md-1"><p class="text-muted">
  225.                           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in sodales massa, eget mollis lorem. Aliquam erat volutpat. Sed et dui turpis. Integer at ante nibh. Sed fermentum condimentum metus eu eleifend. Vivamus eu. </div></p>
  226.  
  227.                                 <div class="mb-4"></div>
  228.                                 </div>
  229.  
  230.                                <br>
  231.                                 </div>
  232.  
  233.                       <!-- ------------- /FIRST CHARACTER ------------- -->
  234.  
  235.  
  236.                   <!-- ------------- SECOND CHARACTER ------------- -->
  237.  
  238.                       <div class="row no-gutters" >
  239.                   <div class="col-md-2 pt-1">
  240.                     <img class="fr-rounded" src="https://i...content-available-to-author-only...b.co/2Yw1rr3/z.png"></div>
  241.  
  242.                        <div class="col-md-10 col-12 pl-md-2 pr-md-3 h-100">
  243.                          <div class=" mt-2 mt-md-0">
  244.                             <span class="text-uppercase">
  245.  
  246.                     <a href="URL" class="pull-left pb-1">Character Name</a></span>
  247.                       <span class="pull-right pb-2"> [ <i>Relationship</i> ]</span>
  248.                               </div><hr class="my-1" style="filter:opacity(75%);">
  249.                               <div style="font-size: 14px;">
  250.  
  251.                       <div class="h-100 pt-1 pl-md-1"><p class="text-muted">
  252.                           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in sodales massa, eget mollis lorem. Aliquam erat volutpat. Sed et dui turpis. Integer at ante nibh. Aliquam at ullamcorper arcu. Suspendisse efficitur fringilla.</div></p>
  253.                                 <div class="mb-4"></div>
  254.                                 </div>
  255.  
  256.  
  257.                                 <br>
  258.                                 </div>
  259.                             </div>
  260.  
  261.                   <!-- ------------- /SECOND CHARACTER ------------- -->
  262.                 </div>
  263.             </div>
  264.         </div>
  265.     </div>
  266. </div>
  267. <small class="text-secondary pull-right">code by <a href="https://t...content-available-to-author-only...u.se/00Ishikawa00" style="color:#aaa">00Ishikawa00</a></small>
Not running #stdin #stdout 0s 0KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
Standard output is empty
https://ideone.com/8wVmP1
language:
Text (text 6.10)
created:
4 years ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!