API tools faq
paste
Advertisement
spacialfries

Layout 4 (HTML)

spacialfries
Aug 19th, 2018
416
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.26 KB | None | 0 0
raw download clone embed print report
  1. <!--You can change the background-color to your preferred color!-->
  2. <div class="card card-block border-0" style="background-color: #FF69B4;">
  3.    
  4.    
  5.    <div class="row">
  6.      <!--FIRST COLUMN: PICTURE-->
  7.      <!--You can change the border-color and background-color to your preferred color!-->
  8.      <div class="container col border-0">
  9.        <div class="col card card-block card-header border-0 text-center" style="background-color: #FFC0CB; color: #000000; height: 50px;">
  10.          <h1><strong>PICTURE</strong></h1>
  11.        </div>
  12.        <div class="col card card-block card-footer border-0" style="background-color: #FFFFFF; color: #000000; height: 466px;">
  13.          <br><span class="text-center"><img src="http://via.placeholder.com/400x400" class="rounded fr-fic fr-dii" height="400" width="400"></span><br><sup><a href="https://toyhou.se/nightlustrous">layout by nightlustrous!</a></sup>
  14.          <br>
  15.        </div>
  16.      </div>
  17.      
  18.      
  19.      <!--SECOND COLUMN: INFO-->
  20.      <div class="container col border-0">
  21.        <div class="col card card-block card-header border-0 text-center" style="background-color: #FFC0CB; color: #000000; height: 50px;">
  22.          <h1><strong>INFORMATION<strong></h1>
  23.        </div>
  24.        <div class="col card card-block card-footer border-0" style="background-color: #FFFFFF; color: #000000; height: 466px;">
  25.          <div class="col card card-block card-footer border-0" style="background-color: #FFFFFF; color: #000000; height: 233px;">
  26.          <div class="row">
  27.            <div class="col-sm-6 border-0 text-right">
  28.              <hp><strong>
  29.                Name<br><br>
  30.                Species<br>
  31.                Gender<br><br>
  32.                Age<br>
  33.                D.o.B.<br><br>
  34.                Height<br>
  35.                Weight<br>
  36.                Build<br><br>
  37.                Personality<br><br>
  38.                ⚥ Sexual Orientation<br>
  39.                ❤ Romantic Orientation<br><br>
  40.                Languages</strong>
  41.              </p>
  42.            </div>
  43.            
  44.            <div class="col-sm-6 border-0 text-left">
  45.              <p>
  46.                name<br><br>
  47.                species/race<br>
  48.                male/female/other<br><br>
  49.                #<br>
  50.                birthdate<br><br>
  51.                #'#" ft / # cm<br> <!--Convert Feet/Centimeters: https://www.thecalculatorsite.com/conversions/common/cm-to-feet-inches.php-->
  52.                # lb / # kg<br> <!--Convert Pounds/Kilograms: https://www.thecalculatorsite.com/conversions/common/kg-to-pounds-ounces.php-->
  53.                body shape<br><br>
  54.                personality<br><br>
  55.                pansexual/bisexual/etc.<br>
  56.                panromantic/biromantic/etc.<br><br>
  57.                languages
  58.              </p>
  59.            </div>
  60.          </div>
  61.        </div>
  62.        </div>
  63.      </div>
  64.      
  65.      
  66.      <!--THIRD COLUMN: DESCRIPTION-->
  67.      <div class="container col border-0">
  68.        <div class="col card card-block card-header border-0 text-center" style="background-color: #FFC0CB; color: #000000; height: 50px;;">
  69.          <h1><strong>DESCRIPTION</strong></h1>
  70.        </div>
  71.        <div class="col card card-block card-footer border-0" style="background-color: #FFFFFF; color: #000000; height: 466px; vertical-align: middle;">
  72.          <p class="text-center" style="vertical-align: middle;"><br>
  73.          <strong>Place your character description here. Please make sure it is short enough to fit into the box, as overflow will be cut off.</strong><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt tristique tempus. Duis at lacus tincidunt, varius enim a, pellentesque orci. Fusce erat sem, aliquet sed dui nec, ornare vestibulum elit. Praesent eu hendrerit urna. Donec vel ante sed erat egestas mattis. Aenean libero nulla, condimentum sit amet purus in, mollis elementum eros. Quisque luctus dolor pretium lacinia pharetra. Sed malesuada urna ut orci lacinia, vel sodales lorem pharetra. Donec venenatis maximus mi sit amet venenatis. Quisque eros turpis, sagittis nec sem eu, faucibus consequat dui. Mauris elementum, lectus at mattis porttitor, neque risus efficitur tellus, et ornare erat elit non velit. Cras nec diam magna. Integer placerat elit sed convallis molestie. In hac habitasse platea dictumst. Curabitur iaculis eleifend fringilla. Proin pellentesque luctus nulla in tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ullamcorper erat eget enim suscipit fringilla. Maecenas at porttitor mauris, nec fermentum leo.</p>
  74.        </div>
  75.      </div>
  76.    </div>
  77.    
  78.    <br>
  79.    
  80.    <div class="row">
  81.      <!--FOURTH COLUMN: PALETTE-->
  82.      <!--You can change the border-color and background-color to your preferred color!-->
  83.      <div class="container col border-0">
  84.        <div class="col card card-block card-header border-0 text-center" style="background-color: #FFC0CB; color: #000000; height: 50px;">
  85.          <h1><strong>PALETTE</strong></h1>
  86.        </div>
  87.        <div class="col card card-block card-footer border-0" style="background-color: #FFFFFF; color: #000000; height: 233px;">
  88.          <!-- If your color is too dark and the black text does not show, change **color: #000000;** to **color: #FFFFFF;** to make the text white instead.-->
  89.          <!--If you want more squares, copy one of the already existing squares.-->
  90.          <!--Only 4 rows of buttons will fit. Please limit your palette to essentials if there is not enough room.-->
  91.          <p class="text-center">
  92.            <!--ROW 1--><p class="text-center">
  93.              <a class="btn mx-1" style="background: #808080; color: #000000;"><strong>Skin</strong></a>
  94.              <a class="btn mx-1" style="background: #808080; color: #000000;"><strong>Eyes</strong></a>
  95.              <a class="btn mx-1" style="background: #808080; color: #000000;"><strong>Hair</strong></a>
  96.            </p>
  97.            <!--ROW 2--><p class="text-center">
  98.              <a class="btn mx-1" style="background: #808080; color: #000000;"><strong>Shirt</strong></a>
  99.              <a class="btn mx-1" style="background: #808080; color: #000000;"><strong>Sweater</strong></a>
  100.            </p>
  101.            <!--ROW 3--><p class="text-center">
  102.              <a class="btn mx-1" style="background: #808080; color: #000000;"><strong>Pants</strong></a>
  103.              <a class="btn mx-1" style="background: #808080; color: #000000;"><strong>Belt</strong></a>
  104.            </p>
  105.            <!--ROW 4--><p class="text-center">
  106.              <a class="btn mx-1" style="background: #808080; color: #000000;"><strong>Socks</strong></a>
  107.              <a class="btn mx-1" style="background: #808080; color: #000000;"><strong>Shoes</strong></a>
  108.              <a class="btn mx-1" style="background: #808080; color: #000000;"><strong>Shoelaces</strong></a>
  109.            </p>
  110.          </p>
  111.        </div>
  112.      </div>
  113.      
  114.      
  115.      <!--FIFTH COLUMN: PREFERENCE-->
  116.      <!--You can change the border-color and background-color to your preferred color!-->
  117.      <div class="container col border-0">
  118.        <div class="col card card-block card-header border-0 text-center" style="background-color: #FFC0CB; color: #000000; height: 50px;">
  119.          <h1><strong>PREFERENCE</strong></h1>
  120.        </div>
  121.        <div class="col card card-block card-footer border-0" style="background-color: #FFFFFF; color: #000000; height: 233px;">
  122.          <div class="row">
  123.            <div class="col-sm-6 border-0 text-center">
  124.              <p><strong>Likes</strong><br>
  125.              -<br>
  126.              -<br>
  127.              -<br>
  128.              -<br>
  129.              -<br>
  130.              -<br>
  131.              -<br>
  132.              -
  133.              </p>
  134.            </div>
  135.            
  136.            
  137.            <div class="col-sm-6 border-0 text-center">
  138.              <p><strong>Dislikes</strong><br>
  139.              -<br>
  140.              -<br>
  141.              -<br>
  142.              -<br>
  143.              -<br>
  144.              -<br>
  145.              -<br>
  146.              -
  147.              </p>
  148.            </div>
  149.          </div>
  150.        </div>
  151.      </div>
  152.      
  153.      
  154.      <!--SIXTH COLUMN: OTHER-->
  155.      <div class="container col border-0">
  156.        <div class="col card card-block card-header border-0 text-center" style="background-color: #FFC0CB; color: #000000; height: 50px;">
  157.          <h1><strong>OTHER</strong></h1>
  158.        </div>
  159.        <div class="col card card-block card-footer border-0" style="background-color: #FFFFFF; color: #000000; height: 233px;">
  160.          <div class="row">
  161.            <div class="col border-0 text-center">
  162.              <p><strong>Conditions</strong><br>
  163.              -<br>
  164.              -<br>
  165.              -<br>
  166.              -<br>
  167.              -<br>
  168.              -<br>
  169.              -<br>
  170.              -
  171.              </p>
  172.            </div>
  173.            
  174.            
  175.            <div class="col border-0 text-center">
  176.              <p><strong>Strengths</strong><br>
  177.              -<br>
  178.              -<br>
  179.              -<br>
  180.              -<br>
  181.              -<br>
  182.              -<br>
  183.              -<br>
  184.              -
  185.              </p>
  186.            </div>
  187.            
  188.            
  189.            <div class="col border-0 text-center">
  190.              <p><strong>Weaknesses</strong><br>
  191.              -<br>
  192.              -<br>
  193.              -<br>
  194.              -<br>
  195.              -<br>
  196.              -<br>
  197.              -<br>
  198.              -
  199.              </p>
  200.            </div>
  201.          </div>
  202.        </div>
  203.      </div>
  204.    </div>
  205.    
  206.    <p class="text-center"><sup><br></sup></p>
  207.    
  208.    <div class="row">
  209.      <!--FINAL LINE: AESTHETICS-->
  210.      <!--You can change the border-color and background-color to your preferred color!-->
  211.      <div class="container col border-0">
  212.        <div class="col card card-block card-header border-0 text-center" style="background-color: #FFC0CB; color: #000000; height: 50px;">
  213.          <h1><strong>AESTHETIC</strong></h1>
  214.        </div>
  215.        <div class="col card card-block card-footer border-0 text-center" style="background-color: #FFFFFF; color: #000000; height: 224px;">
  216.          <div class="col" style="justify-content: space-between;">
  217.            <!--You can use less than 6 images if you want, but no more than 6.-->
  218.            <!--Please use ONLY SQUARE images!-->
  219.            <!--IMAGE 1--><img src="https://i0.wp.com/www.skillings.com/wp-content/uploads/2017/02/placeholder-square.jpg" class="rounded fr-fic fr-dii" height="200" width="200">
  220.            <!--IMAGE 2--><img src="https://i0.wp.com/www.skillings.com/wp-content/uploads/2017/02/placeholder-square.jpg" class="rounded fr-fic fr-dii" height="200" width="200">
  221.            <!--IMAGE 3--><img src="https://i0.wp.com/www.skillings.com/wp-content/uploads/2017/02/placeholder-square.jpg" class="rounded fr-fic fr-dii" height="200" width="200">
  222.            <!--IMAGE 4--><img src="https://i0.wp.com/www.skillings.com/wp-content/uploads/2017/02/placeholder-square.jpg" class="rounded fr-fic fr-dii" height="200" width="200">
  223.            <!--IMAGE 5--><img src="https://i0.wp.com/www.skillings.com/wp-content/uploads/2017/02/placeholder-square.jpg" class="rounded fr-fic fr-dii" height="200" width="200">
  224.            <!--IMAGE 6--><img src="https://i0.wp.com/www.skillings.com/wp-content/uploads/2017/02/placeholder-square.jpg" class="rounded fr-fic fr-dii" height="200" width="200">
  225.          </div>
  226.          <br>
  227.        </div>
  228.      </div>
  229.    </div>
  230. </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!