API tools faq
paste
Advertisement
SparklyLightus

Greenhouse

SparklyLightus
Aug 19th, 2021
2,008
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.11 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    fas fa-seedling >> ICON USED
  3.    fas fa-paperclip >> PAPERCLIP ICON
  4.    cf8e61 >> BORDERS
  5.    717448 >> HEADERS
  6.    93b54d >> SUBHEADERS
  7.    f8f6f0 >> BACKGROUND
  8.    777777 >> FONT COLOR
  9. -->
  10. <div class="mx-3 mt-3 mb-1 p-1 mx-auto row no-gutters shadow" style="background-color: #f8f6f0; color: #777777; border-radius: 15px; max-width: 900px;">
  11.     <!-- ........................ IMAGE -->
  12.     <div class="col-lg-3 order-lg-2 order-1"> <div class="m-2 py-1 text-center">
  13.         <i class="mt-n2 fas fa-paperclip fa-3x" style="position: absolute; top: 5px; right: -10px; z-index: 999;"></i>
  14.        
  15.         <!--IMAGE -->
  16.         <img src="IMGLINK"
  17.            style="height: 200px; width: 200px; object-fit: cover; border-radius: 20px;" class="m-1 shadow">
  18.        
  19.         <!-- QUOTE -->
  20.         <p class="m-0 text-monospace" style="color: #93b54d;">"Short quote... lorem ipsum sit dolor amet."</p>
  21.     </div> </div>
  22.     <!-- ........................ ABOUT -->
  23.     <div class="col-lg-9 order-lg-1 order-3"> <div class="m-2 d-flex flex-column" style="border: 3px dashed #cf8e61; border-radius: 10px;">
  24.         <h2 class="m-2 text-monospace text-right order-lg-2" style="color: #717448;">About <i class="fas fa-seedling"></i></h2>
  25.         <div class="m-1 p-2 overflow-auto order-lg-1" style="height: 210px; text-indent: 20px;">
  26.             <h3 class="m-0 text-monospace text-center" style="color: #93b54d; text-indent: 0px; border-bottom: 3px dotted;">
  27.                 MBTI  • ENNEAGRAM • ZODIAC
  28.             </h3>
  29.            
  30.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in bibendum tortor. In sed ex pharetra, tincidunt lacus sit amet, dignissim orci. Donec tempor dictum diam at sollicitudin. Morbi erat ante, imperdiet eu hendrerit a, tempus dignissim metus. Nam augue leo, venenatis in auctor eget, ultrices et eros. In ut massa ut elit suscipit pharetra mollis eget massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  31.             <p>Vivamus at ornare velit, in malesuada mi. Proin molestie ante et risus placerat bibendum. Nunc at aliquet arcu, a placerat eros. Vivamus ut ex dictum, tempus ipsum non, maximus felis. Fusce at nibh vitae elit consequat mollis. Aenean vehicula tellus elit, at facilisis velit facilisis non. Fusce interdum bibendum facilisis. Ut at leo justo. Sed dapibus urna non nisi auctor, eu condimentum enim sagittis.</p>
  32.         </div>
  33.     </div> </div>
  34.    
  35.     <!-- ........................ BASICS -->
  36.     <div class="col-lg-4 order-lg-3 order-2"> <div class="m-2 d-flex flex-column" style="border: 3px dashed #cf8e61; border-radius: 10px;">
  37.         <h2 class="m-2 text-monospace text-right order-lg-2" style="color: #717448;">Basics <i class="fas fa-seedling"></i></h2>
  38.         <div class="m-1 p-1 overflow-auto order-lg-1" style="height: 240px;">
  39.             <!-- BASICS -->
  40.             <ul class="m-0 pl-3" style="list-style-type: square;">
  41.                 <li><b class="pull-right" style="color: #93b54d;">Name</b>
  42.                     Information</li>
  43.                 <li><b class="pull-right" style="color: #93b54d;">Age</b>
  44.                     Information</li>
  45.                 <li><b class="pull-right" style="color: #93b54d;">Gender</b>
  46.                     Information</li>
  47.                 <li><b class="pull-right" style="color: #93b54d;">Pronouns</b>
  48.                     Information</li>
  49.                 <li><b class="pull-right" style="color: #93b54d;">Orientation</b>
  50.                     Information</li>
  51.             </ul>
  52.             <!-- DESIGN -->
  53.             <ul class="m-0 mt-1 pl-3" style="list-style-type: square; border-top: 3px dotted;">
  54.                 <li><b class="pull-right" style="color: #93b54d;">Hair</b>
  55.                     Information</li>
  56.                 <li><b class="pull-right" style="color: #93b54d;">Eyes</b>
  57.                     Information</li>
  58.                 <li><b class="pull-right" style="color: #93b54d;">Skin</b>
  59.                     Information</li>
  60.                 <li><b class="pull-right" style="color: #93b54d;">Build</b>
  61.                     Information</li>
  62.                 <li><b class="pull-right" style="color: #93b54d;">Designer</b>
  63.                     Information</li>
  64.             </ul>
  65.         </div>
  66.     </div> </div>
  67.     <!-- ........................ STORY -->
  68.     <div class="col-lg-8 order-4"> <div class="m-2 d-flex flex-column" style="border: 3px dashed #cf8e61; border-radius: 10px;">
  69.         <h2 class="m-2 text-monospace text-right order-lg-2" style="color: #717448;">Backstory <i class="fas fa-seedling"></i></h2>
  70.         <div class="m-1 p-2 overflow-auto order-lg-1" style="height: 240px; text-indent: 20px;">
  71.             <h3 class="m-0 text-monospace" style="color: #93b54d; text-indent: 0px; border-bottom: 3px dotted;">Header</h3>
  72.             <p>Proin sit amet turpis vel mauris lacinia suscipit. Sed a est cursus, fermentum tellus non, semper mauris. Donec euismod libero non vestibulum cursus. Duis arcu ipsum, vestibulum id tellus sed, tempus viverra dui. Ut eros lorem, faucibus et orci id, semper hendrerit risus. Cras vitae massa eget urna imperdiet iaculis. Phasellus eget justo non neque tristique luctus. Pellentesque ac orci pharetra, ultrices ipsum vel, scelerisque tortor. Maecenas lobortis id tellus vitae accumsan. Praesent sagittis a metus a semper. Vivamus ultrices nulla tortor, at ultricies quam egestas nec. Pellentesque libero nisi, hendrerit sit amet posuere sit amet, malesuada et lorem.</p>
  73.            
  74.             <h3 class="m-0 text-monospace" style="color: #93b54d; text-indent: 0px; border-bottom: 3px dotted;">Header</h3>
  75.             <p>Vivamus a sapien euismod diam hendrerit tincidunt. In ac purus tortor. Sed fermentum ipsum at risus commodo accumsan. Nam varius viverra suscipit. Nulla non tortor at lectus tincidunt pretium. Curabitur fermentum euismod tellus, eget eleifend ipsum porta eu. Maecenas tristique varius libero efficitur molestie. Maecenas eget mauris mi. Vivamus suscipit, nulla sit amet scelerisque semper, nisl ipsum sollicitudin erat, in pretium nulla tortor sed ante. In nisi augue, elementum id posuere in, dictum vel elit. </p>
  76.         </div>
  77.     </div> </div>
  78.    
  79.     <!-- ........................ RELATIONSHIPS -->
  80.     <div class="col-lg-8 order-lg-5 order-6"> <div class="m-2 d-flex flex-column" style="border: 3px dashed #cf8e61; border-radius: 10px;">
  81.         <h2 class="m-2 text-monospace text-right order-lg-2" style="color: #717448;">Relationships <i class="fas fa-seedling"></i></h2>
  82.         <div class="m-1 p-1 overflow-auto order-lg-1" style="height: 300px;">
  83.             <!-- PERSON -->
  84.             <div class="row no-gutters">
  85.                 <!--IMAGE -->
  86.                 <div class="px-1 col-auto text-monospace">
  87.                     <img src="IMGLINK"
  88.                        style="height: 120px; width: 120px; object-fit: cover; border-radius: 20px;" class="my-1 shadow">
  89.                    
  90.                     <i class="fas fa-paperclip fa-2x fa-flip-horizontal" style="position: absolute; top: 0px; left: 0px; z-index: 999;"></i><br>
  91.                     <h5 class="m-0 font-weight-bold"><a style="color: #777777;" href="LINK"> Name</a></h5>
  92.                     <p class="m-0 font-italic">Relationship</p>
  93.                 </div>
  94.                 <!-- BIO -->
  95.                 <div class="col-md"> <div class="m-1 px-2 py-1 overflow-auto" style="border: 3px dotted #93b54d; border-radius: 10px; height: 170px;">
  96.                     <p>This box will scroll. 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.</p>
  97.                 </div> </div>
  98.             </div>
  99.             <!-- PERSON -->
  100.             <div class="row no-gutters">
  101.                 <!--IMAGE -->
  102.                 <div class="px-1 col-auto text-monospace order-md-2">
  103.                     <img src="IMGLINK"
  104.                        style="height: 120px; width: 120px; object-fit: cover; border-radius: 20px;" class="my-1 shadow">
  105.                    
  106.                     <i class="fas fa-paperclip fa-2x" style="position: absolute; top: 0px; right: 0px; z-index: 999;"></i><br>
  107.                     <h5 class="m-0 font-weight-bold"><a style="color: #777777;" href="LINK"> Name</a></h5>
  108.                     <p class="m-0 font-italic">Relationship</p>
  109.                 </div>
  110.                 <!-- BIO -->
  111.                 <div class="col-md order-md-1"> <div class="m-1 px-2 py-1 overflow-auto" style="border: 3px dotted #93b54d; border-radius: 10px; height: 170px;">
  112.                     <p>This box will scroll. 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.</p>
  113.                 </div> </div>
  114.             </div>
  115.             <!-- PERSON -->
  116.             <div class="row no-gutters">
  117.                 <!--IMAGE -->
  118.                 <div class="px-1 col-auto text-monospace">
  119.                     <img src="IMGLINK"
  120.                        style="height: 120px; width: 120px; object-fit: cover; border-radius: 20px;" class="my-1 shadow">
  121.                    
  122.                     <i class="fas fa-paperclip fa-2x fa-flip-horizontal" style="position: absolute; top: 0px; left: 0px; z-index: 999;"></i><br>
  123.                     <h5 class="m-0 font-weight-bold"><a style="color: #777777;" href="LINK"> Name</a></h5>
  124.                     <p class="m-0 font-italic">Relationship</p>
  125.                 </div>
  126.                 <!-- BIO -->
  127.                 <div class="col-md"> <div class="m-1 px-2 py-1 overflow-auto" style="border: 3px dotted #93b54d; border-radius: 10px; height: 170px;">
  128.                     <p>This box will scroll. 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.</p>
  129.                 </div> </div>
  130.             </div>
  131.             <!-- PERSON -->
  132.             <div class="row no-gutters">
  133.                 <!--IMAGE -->
  134.                 <div class="px-1 col-auto text-monospace order-md-2">
  135.                     <img src="IMGLINK"
  136.                        style="height: 120px; width: 120px; object-fit: cover; border-radius: 20px;" class="my-1 shadow">
  137.                    
  138.                     <i class="fas fa-paperclip fa-2x" style="position: absolute; top: 0px; right: 0px; z-index: 999;"></i><br>
  139.                     <h5 class="m-0 font-weight-bold"><a style="color: #777777;" href="LINK"> Name</a></h5>
  140.                     <p class="m-0 font-italic">Relationship</p>
  141.                 </div>
  142.                 <!-- BIO -->
  143.                 <div class="col-md order-md-1"> <div class="m-1 px-2 py-1 overflow-auto" style="border: 3px dotted #93b54d; border-radius: 10px; height: 170px;">
  144.                     <p>This box will scroll. 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.</p>
  145.                 </div> </div>
  146.             </div>
  147.             <!-- ADD MORE ABOVE HERE - copy last *two* people for best effect -->
  148.         </div>
  149.     </div> </div>
  150.     <!-- ........................ AESTHETIC -->
  151.     <div class="col-lg-4 order-lg-6 order-5"> <div class="m-2 p-2" style="border: 3px dashed #cf8e61; border-radius: 10px;">
  152.         <i class="mt-n2 fas fa-paperclip fa-3x fa-flip-horizontal" style="position: absolute; top: 5px; right: 0px; z-index: 999;"></i>
  153.         <!-- CAROUSEL -->
  154.         <div class="m-1 carousel slide" id="gallery">
  155.             <!-- IMAGES -->
  156.             <div class="carousel-inner text-center" style="border-radius: 10px; height: 276px; width: 100%;">
  157.                 <div class="h-100 w-100 carousel-item active">
  158.                     <div style="background-image: url('IMGLINK');
  159.                    background-position: center; background-size: cover; " class="h-100 w-100"></div> </div>
  160.                 <div class="h-100 w-100 carousel-item">
  161.                     <div style="background-image: url('IMGLINK');
  162.                    background-position: center; background-size: cover; " class="h-100 w-100"></div> </div>
  163.                 <div class="h-100 w-100 carousel-item">
  164.                     <div style="background-image: url('IMGLINK');
  165.                    background-position: center; background-size: cover; " class="h-100 w-100"></div> </div>
  166.                 <div class="h-100 w-100 carousel-item">
  167.                     <div style="background-image: url('IMGLINK');
  168.                    background-position: center; background-size: cover; " class="h-100 w-100"></div> </div>
  169.                 <!-- ADD MORE ABOVE HERE - copy and paste the last three lines -->
  170.             </div>
  171.             <!-- NAVS -->
  172.             <a class="carousel-control-prev" href="#gallery" role="button" data-slide="prev">
  173.                 <i class="fas fa-chevron-left fa-2x"></i>  <span class="sr-only">Previous</span></a>
  174.             <a class="carousel-control-next" href="#gallery" role="button" data-slide="next">
  175.                 <i class="fas fa-chevron-right fa-2x"></i>  <span class="sr-only">Next</span></a>
  176.         </div>
  177.         <!-- COLORS - can be of the design or aesthetics -->
  178.         <div class="row no-gutters justify-content-center">
  179.             <div class="m-1 col-auto rounded-circle" style="background: #93b54d; height: 40px; width: 40px; border: 3px dotted;"></div>
  180.             <div class="m-1 col-auto rounded-circle" style="background: #717448; height: 40px; width: 40px; border: 3px dotted;"></div>
  181.             <div class="m-1 col-auto rounded-circle" style="background: #cf8e61; height: 40px; width: 40px; border: 3px dotted;"></div>
  182.             <div class="m-1 col-auto rounded-circle" style="background: #F6ECCC; height: 40px; width: 40px; border: 3px dotted;"></div>
  183.         </div>
  184.     </div> </div>
  185.    
  186.     <!-- ........................ TRIVIA -->
  187.     <div class="col-lg-12 order-7"> <div class="m-2 d-flex flex-column" style="border: 3px dashed #cf8e61; border-radius: 10px;">
  188.         <h2 class="m-2 text-monospace text-right order-lg-2" style="color: #717448;">Trivia <i class="fas fa-seedling"></i></h2>
  189.         <ul class="m-1 p-1 pl-4 row no-gutters order-lg-1" style="list-style-type: square;">
  190.             <li class="col-sm-6"><b style="color: #93b54d;">Likes:</b> <br>
  191.                 Nam at quam luctus,<br>
  192.                 ullamcorper ipsum id,<br>
  193.                 ornare lorem.</li>
  194.             <li class="col-sm-6"><b style="color: #93b54d;">Dislikes:</b> <br>
  195.                 Nullam sem tellus,<br>
  196.                 iaculis nec orci nec,<br>
  197.                 tempus scelerisque lacus.</li>
  198.             <li class="col-12">This whole box will expand. Fusce hendrerit, ligula sit amet malesuada feugiat, risus enim molestie dui, vel placerat mauris nibh non odio.</li>
  199.             <li class="col-12">Ut ut purus justo. Sed cursus urna nec massa faucibus, et dignissim felis vestibulum.</li>
  200.             <li class="col-12">Morbi porttitor, elit ut dapibus gravida, metus mi aliquam quam, in lobortis eros tortor vestibulum odio.</li>
  201.             <li class="col-12">Nullam in faucibus ante.</li>
  202.         </ul>
  203.     </div> </div>
  204. </div>
  205. <!-- CREDITS -->
  206. <div class="mx-3 m-1 px-1 mx-auto row no-gutters shadow" style="background-color: #f8f6f0; color: #777777; border-radius: 15px; max-width: 900px;">
  207.     <div class="mx-1 my-auto col" style="border-top: 2px dashed;"></div>
  208.     <a class="mx-1 col-auto" style="color: #777777;" data-toggle="tooltip" title="HTML by SparklyCodes" href="/SparklyCodes"> <i class="far fa-code"></i></a>
  209. </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!