API tools faq
paste
Jade-Everstone

SECOND REALITY (CQ 2022 March)

Jade-Everstone
Mar 15th, 2022 (edited)
1,404
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 43.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <!--Rules:
  4.  
  5. For the Coders Quarters March challenge:
  6. Moodboard & colors provided by Togo: https://toyhou.se/Togo
  7.  
  8. You may
  9. -frankenstein with other codes (as long as the creator of said code allows it)
  10. -edit/change as much as you need (example: making character codes into user codes, vice-versa)
  11.  
  12. You may not
  13. -Redistribute, resell, and/or claim its yours
  14. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  15.  
  16. Misc Notes:
  17. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  18. -Some basic html knowledge is recommended for editing
  19.  
  20. Default Colors:
  21. -headers: #030511
  22. -text: #86b6e0
  23. -main header text, accents/dividers: #34dcf8
  24. -section & sub header text: #ff409f
  25.  
  26. Change the colors: Ctrl+f and search for the color you want to change.
  27.  
  28. (placeholder images are from unsplash)
  29.  
  30. -->
  31.  
  32. <div class="container my-4">
  33.    
  34.    
  35.     <!--background-->
  36.    
  37.     <div class="card border-0 rounded-0" style="
  38.        background-color:#030511;
  39.        box-shadow: -5px 5px 0px rgba(0,0,0,0.5);
  40.        background-image:url(https://images.unsplash.com/photo-1573767291321-c0af2eaf5266?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2036&q=80);
  41.        background-position:center;
  42.        background-attachment:fixed;
  43.        background-size:cover">
  44.        
  45.     <!--end background-->
  46.    
  47.    
  48.         <!--main header-->
  49.        
  50.         <div class="card border-0 rounded-0 py-1 px-2" style="color:#34dcf8;background-color:#030511;font-size:1.5em;text-transform:uppercase;letter-spacing:1px;font-family: courier new">
  51.             <span> Character Name - Gender (pro/noun)
  52.                 <span style="position:absolute; right:10px"><i class="fa-regular fa-bring-forward"></i></span>
  53.             </span>
  54.            
  55.         </div>
  56.        
  57.         <!--end main header-->
  58.        
  59.        
  60.         <div class="p-3 p-sm-5">
  61.            
  62.            
  63.             <div class="row">
  64.                
  65.                 <!--About-->
  66.                
  67.                 <div class="col-12 col-lg-8 mb-3  order-2 order-lg-1">
  68.                      <div class="card rounded-0 h-100" style="border-style:outset;border-color:#030511;background-color:#000000;color:#86b6e0;border-width:3px;box-shadow: -5px 5px 0px rgba(0,0,0,0.5);
  69.                        ">
  70.                        
  71.                        
  72.                         <!--header-->
  73.                        
  74.                         <div class="card border-0 rounded-0 py-1 px-2" style="color:#ff409f;background-color:#030511;font-size:1.2em;text-transform:uppercase;letter-spacing:1px;font-family:courier new;font-weight:">
  75.                            
  76.                             <span> <i class="fa-regular fa-square-minus"></i> info - about</span>
  77.                            
  78.                             <span style="position:absolute; right:10px"> <i class="fa-regular fa-send-backward"></i> <i class="fa-regular fa-bring-forward"></i> </span>
  79.                         </div>
  80.                        
  81.                         <!--header-->
  82.                        
  83.                        
  84.                         <div class="card-body p-3" style="margin-top:auto;margin-bottom:auto">
  85.                             <div class="row">
  86.                                
  87.                                
  88.                                 <!--basic info-->
  89.                                
  90.                                 <div class="col-12 col-lg-6">
  91.                                     <span style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;;color:#ff409f">Nickname(s)</span>
  92.                                     <span class="pull-right">Text</span>
  93.                                     <hr class="mt-1 mb-3" style="border-style:dashed;border-color:#34dcf8;">
  94.                                    
  95.                                     <span style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;;color:#ff409f">Race/species</span>
  96.                                     <span class="pull-right">Text</span>
  97.                                     <hr class="mt-1 mb-3" style="border-style:dashed;border-color:#34dcf8;">
  98.                                    
  99.                                     <span style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;;color:#ff409f">Birthday</span>
  100.                                     <span class="pull-right">Text</span>
  101.                                     <hr class="mt-1 mb-3" style="border-style:dashed;border-color:#34dcf8;">
  102.                                    
  103.                                     <span style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;;color:#ff409f">Orientation</span>
  104.                                     <span class="pull-right">Text</span>
  105.                                     <hr class="mt-1 mb-3" style="border-style:dashed;border-color:#34dcf8;">
  106.                                    
  107.                                     <span style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;;color:#ff409f">Likes</span>
  108.                                     <span class="pull-right">Text</span>
  109.                                     <hr class="mt-1 mb-3" style="border-style:dashed;border-color:#34dcf8;">
  110.                                    
  111.                                     <span style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;;color:#ff409f">Dislikes</span>
  112.                                     <span class="pull-right">Text</span>
  113.                                     <hr class="mt-1 mb-3" style="border-style:dashed;border-color:#34dcf8;">
  114.                                    
  115.                                    
  116.                                    
  117.                                 </div>
  118.                                
  119.                                 <!--endbasic info-->
  120.                                
  121.                                
  122.                                 <!--main intro-->
  123.                                
  124.                                 <div class="col-12 col-lg-6 mb-3 mb-lg-0">
  125.                                    
  126.                                     <p>This section will expand, but for the best look keep it breif/within the min. height</p>
  127.                                     <p>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>
  128.                                    
  129.                                 </div>
  130.                                
  131.                                 <!--endmain intro-->
  132.                                
  133.                                
  134.                             </div>
  135.                            
  136.                            
  137.                             <!--theme
  138.                            NOTE: This uses a YT embed/button! instructions on how to change the link are below-->
  139.                            
  140.                             <div class="card rounded-0 py-1 px-2" style="background-color:#030511;border-color:#030511;border-style:outset;border-size:4px;font-size:1.25em;overflow:hidden">
  141.                                
  142.                                 <span style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;color:#34dcf8">second reality - purple motion
  143.                                
  144.                                 <span class="pull-right" style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;color:#34dcf8"> <i class="fa-regular fa-play"></i> <i class="fa-regular fa-pause"></i></span>
  145.                                
  146.                                 <!-- HOW TO CHANGE THE LINK/SONG
  147.                                    - Go to youtube and find the song you want to use
  148.                                    - the page link has a string of random letters & numbers at the end of it.
  149.                                        (eg: https://www.youtube.com/watch?v= [here] )
  150.                                    - copy that string of letters and paste it between embed/ and ?controls-0 in the embed link
  151.                                        (eg: src="https://www.youtube-nocookie.com/embed/ [here] ?controls=0" )
  152.                                -->
  153.                                
  154.                                 <iframe src="https://www.youtube-nocookie.com/embed/GL5vb3D-8_I?controls=0"
  155.                                frameborder="0"
  156.                                style="position:absolute;right:-190px;top:-100px;width:250px;height:200px;z-index:1;opacity:0.001"></iframe>
  157.                                
  158.                                 </span>
  159.                                
  160.                                
  161.                             </div>
  162.                            
  163.                             <!--end theme-->
  164.                            
  165.                            
  166.                         </div>
  167.                        
  168.                      </div>
  169.                 </div>
  170.                
  171.                 <!--end About-->
  172.                
  173.                
  174.                 <!--main image-->
  175.                
  176.                 <div class="col-12 col-lg-4 mb-3  order-1 order-lg-2">
  177.                     <div class="card rounded-0" style="border-style:outset;border-color:#030511;background-color:#000000;border-width:3px;box-shadow: -5px 5px 0px rgba(0,0,0,0.5);
  178.                        ">
  179.                        
  180.                        
  181.                         <!--header-->
  182.                        
  183.                         <div class="card border-0 rounded-0 py-1 px-2" style="color:#ff409f;background-color:#030511;font-size:1.2em;text-transform:uppercase;letter-spacing:1px;font-family:courier new;font-weight:">
  184.                            
  185.                             <span> <i class="fa-regular fa-square-minus"></i> name.jpeg</span>
  186.                            
  187.                             <span style="position:absolute; right:10px"> <i class="fa-regular fa-send-backward"></i> <i class="fa-regular fa-bring-forward"></i> </span>
  188.                            
  189.                         </div>
  190.                        
  191.                         <!--end header-->
  192.                        
  193.                        
  194.                         <!--image-->
  195.                        
  196.                         <div class="card border-0 rounded-0" style="min-height:350px;background-color:#000000;
  197.                            background-image:url(#);
  198.                            background-position:center;
  199.                            background-size:cover">
  200.                            
  201.                             <!--Image credit-->
  202.  
  203.                             <a href="#" data-toggle="tooltip" title="img credit" style="color:#34dcf8;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fa-solid fa-floppy-disks"></i> </a>
  204.                         </div>
  205.                        
  206.                         <!--end image-->
  207.                        
  208.                        
  209.                     </div>
  210.                 </div>
  211.                
  212.                 <!--end main image-->
  213.                
  214.                
  215.                 <!--story-->
  216.                
  217.                 <div class="col-12 mb-3  order-3">
  218.                     <div class="card rounded-0 h-100" style="border-style:outset;border-color:#030511;background-color:#000000;color:#86b6e0;border-width:3px;box-shadow: -5px 5px 0px rgba(0,0,0,0.5);
  219.                        ">
  220.                        
  221.                        
  222.                         <!--header-->
  223.                        
  224.                         <div class="card border-0 rounded-0 py-1 px-2" style="color:#ff409f;background-color:#030511;font-size:1.2em;text-transform:uppercase;letter-spacing:1px;font-family:courier new;font-weight:">
  225.                             <span> <i class="fa-regular fa-square-minus"></i> docx - story</span>
  226.                            
  227.                             <span style="position:absolute; right:10px"> <i class="fa-regular fa-send-backward"></i> <i class="fa-regular fa-bring-forward"></i> </span>
  228.                            
  229.                         </div>
  230.                        
  231.                         <!--end header-->
  232.                        
  233.                        
  234.                         <div class="card-body p-3" style="margin-top:auto;margin-bottom:auto">
  235.                             <div class="row">
  236.                                
  237.                                
  238.                                 <!--side-image-->
  239.                                
  240.                                 <div class="col-12 col-lg-3" style="margin-top:auto;margin-bottom:auto">
  241.                                     <div class="card rounded-0 mb-2 mb-lg-0" style="min-height:300px;background-color:#000000;
  242.                                        border-width:4px;
  243.                                        border-style:inset;
  244.                                        background-image:url(https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
  245.                                        background-size:cover;
  246.                                        background-position:center">
  247.                                        
  248.                                         <!--Image credit-->
  249.  
  250.                                         <a href="https://unsplash.com/photos/p0j-mE6mGo4" data-toggle="tooltip"
  251.                                            title="img - unsplash" style="color:#34dcf8;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fa-solid fa-floppy-disks"></i> </a>
  252.                                        
  253.                                     </div>
  254.                                 </div>
  255.                                
  256.                                 <!--end side image-->
  257.                                
  258.                                
  259.                                 <!--story-->
  260.                                
  261.                                 <div class="col-12 col-lg-9">
  262.                                    
  263.                                     <p>Have a lot of info? this section will expand</p>
  264.                            
  265.                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in luctus tortor. Donec suscipit, massa eget gravida molestie, odio nulla laoreet sapien, at efficitur leo eros sit amet est. Mauris a hendrerit tortor. Pellentesque lobortis consequat felis ac facilisis. Suspendisse auctor ac lorem at molestie. In sit amet dui efficitur, consequat ante vel, iaculis ipsum. Cras in posuere arcu. In hac habitasse platea dictumst. </p>
  266.                                    
  267.                                    
  268.                                     <!--subsection header-->
  269.                                     <div class="my-3">
  270.                                         <span style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;;color:#ff409f">subsection</span>
  271.                                         <hr class="mt-1" style="border-style:dashed;border-color:#34dcf8;">
  272.                                     </div>
  273.                                    
  274.                            
  275.                                     <p>Curabitur id metus libero. Nunc vehicula nisl diam, et rutrum ante vestibulum a. Etiam lacinia blandit nisl, eget aliquet dolor hendrerit vel. Phasellus metus enim, eleifend et lacus non, feugiat sollicitudin eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lobortis tristique tortor, et malesuada magna tristique at. Nunc orci ex, varius ac semper at, sollicitudin eget diam. Vestibulum sed nunc velit. Phasellus scelerisque ut nisl sit amet ultricies. In vitae sollicitudin magna, nec feugiat est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer congue risus tellus, et varius mi molestie vitae. Ut porta neque velit, eu ultricies tortor pretium et. </p>
  276.                                    
  277.                                 </div>
  278.                                
  279.                                 <!--end story-->
  280.                                
  281.                                
  282.                             </div>
  283.                         </div>
  284.                        
  285.                        
  286.                      </div>
  287.                 </div>
  288.                
  289.                 <!--end story-->
  290.                
  291.                
  292.                 <!--trivia-->
  293.                
  294.                 <div class="col-12 col-lg-6 mb-3  order-5 order-lg-4">
  295.                     <div class="card rounded-0 h-100" style="border-style:outset;border-color:#030511;background-color:#000000;color:#86b6e0;border-width:3px;box-shadow: -5px 5px 0px rgba(0,0,0,0.5);
  296.                        ">
  297.                        
  298.                        
  299.                         <!--header-->
  300.                        
  301.                         <div class="card border-0 rounded-0 py-1 px-2" style="color:#ff409f;background-color:#030511;font-size:1.2em;text-transform:uppercase;letter-spacing:1px;font-family:courier new;font-weight:">
  302.                            
  303.                             <span> <i class="fa-regular fa-square-minus"></i> Info - trivia</span>
  304.                            
  305.                             <span style="position:absolute; right:10px"> <i class="fa-regular fa-send-backward"></i> <i class="fa-regular fa-bring-forward"></i> </span>
  306.                            
  307.                         </div>
  308.                        
  309.                         <!--end header-->
  310.                        
  311.                         <!--info-->
  312.                         <div class="card-body p-3" style="margin-top:auto;margin-bottom:auto">
  313.                            
  314.                             <p><i class="fa-regular fa-hyphen"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  315.                            
  316.                             <p><i class="fa-regular fa-hyphen"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  317.                            
  318.                             <p><i class="fa-regular fa-hyphen"></i> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  319.                            
  320.                             <p><i class="fa-regular fa-hyphen"></i>  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  321.                            
  322.                         </div>
  323.                        
  324.                        
  325.                      </div>
  326.                 </div>
  327.                
  328.                 <!--end trivia-->
  329.                
  330.                
  331.                 <!--moodboard-->
  332.                
  333.                 <div class="col-12 col-lg-6 mb-3  order-4 order-lg-5">
  334.                     <div class="card rounded-0 h-100" style="border-style:outset;border-color:#030511;background-color:#000000;color:#ff409f;border-width:3px;box-shadow: -5px 5px 0px rgba(0,0,0,0.5);
  335.                        ">
  336.                        
  337.                        
  338.                         <!--header-->
  339.                        
  340.                         <div class="card border-0 rounded-0 py-1 px-2" style="color:#ff409f;background-color:#030511;font-size:1.2em;text-transform:uppercase;letter-spacing:1px;font-family:courier new;font-weight:">
  341.                             <span> <i class="fa-regular fa-square-minus"></i> gallery - aesthetic</span>
  342.                             <span style="position:absolute; right:10px"> <i class="fa-regular fa-send-backward"></i> <i class="fa-regular fa-bring-forward"></i> </span>
  343.                         </div>
  344.                        
  345.                         <!--end header-->
  346.                        
  347.                        
  348.                         <!--main moodboard-->
  349.                        
  350.                         <div class="card-body p-3" style="margin-top:auto;margin-bottom:auto">
  351.                            
  352.                            
  353.                             <div class="row">
  354.                                
  355.                                 <!--image 1-->
  356.                                 <div class="col-12 col-sm-6 my-2">
  357.                                     <div class="card rounded-0" style="min-height:150px;background-color:#000000;
  358.                                        border-width:4px;
  359.                                        border-style:inset;
  360.                                        background-image:url(https://images.unsplash.com/photo-1594199691187-bdce7e4e5025?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
  361.                                        background-size:cover;
  362.                                        background-position:center">
  363.                                        
  364.                                         <!--Image credit-->
  365.  
  366.                                         <a href="https://unsplash.com/photos/QMKTzaW2jlM" data-toggle="tooltip"
  367.                                        title="img -unsplash" style="color:#34dcf8;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fa-solid fa-floppy-disks"></i> </a>
  368.                                        
  369.                                     </div>
  370.                                 </div>
  371.                                
  372.                                 <!--image 2-->
  373.                                 <div class="col-12 col-sm-6 my-2">
  374.                                     <div class="card rounded-0" style="min-height:150px;background-color:#000000;
  375.                                        border-width:4px;
  376.                                        border-style:inset;
  377.                                        background-image:url(https://images.unsplash.com/photo-1548502632-6b93092aad0b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
  378.                                        background-size:cover;
  379.                                        background-position:center">
  380.                                        
  381.                                         <!--Image credit-->
  382.  
  383.                                         <a href="https://unsplash.com/photos/OQlPahHa7Bc" data-toggle="tooltip"
  384.                                        title="img - unsplash" style="color:#34dcf8;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fa-solid fa-floppy-disks"></i> </a>
  385.                                        
  386.                                     </div>
  387.                                 </div>
  388.                                
  389.                                 <!--image 3-->
  390.                                 <div class="col-12 col-sm-6 my-2">
  391.                                     <div class="card rounded-0" style="min-height:150px;background-color:#000000;
  392.                                        border-width:4px;
  393.                                        border-style:inset;
  394.                                        background-image:url(https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
  395.                                        background-size:cover;
  396.                                        background-position:center">
  397.                                        
  398.                                         <!--Image credit-->
  399.  
  400.                                         <a href="https://unsplash.com/photos/p0j-mE6mGo4" data-toggle="tooltip"
  401.                                            title="img - unsplash" style="color:#34dcf8;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fa-solid fa-floppy-disks"></i> </a>
  402.                                        
  403.                                     </div>
  404.                                 </div>
  405.                                
  406.                                 <!-- image 4-->
  407.                                 <div class="col-12 col-sm-6 my-2">
  408.                                     <div class="card rounded-0" style="min-height:150px;background-color:#000000;
  409.                                        border-width:4px;
  410.                                        border-style:inset;
  411.                                        background-image:url(https://images.unsplash.com/photo-1573767291321-c0af2eaf5266?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2036&q=80);
  412.                                        background-size:cover;
  413.                                        background-position:center">
  414.                                        
  415.                                         <!--Image credit-->
  416.  
  417.                                         <a href="https://unsplash.com/photos/71SHXwBLp5w" data-toggle="tooltip"
  418.                                        title="img - unsplash" style="color:#34dcf8;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fa-solid fa-floppy-disks"></i> </a>
  419.                                        
  420.                                     </div>
  421.                                 </div>
  422.                                
  423.                             </div>
  424.                            
  425.                            
  426.                            
  427.                         </div>
  428.                        
  429.                         <!--end moodboard-->
  430.                        
  431.                        
  432.                      </div>
  433.                 </div>
  434.                
  435.                 <!--end moodboard-->
  436.                
  437.                
  438.                 <!--design-->
  439.                
  440.                 <div class="col-12 mb-3  order-6">
  441.                     <div class="card rounded-0 h-100" style="border-style:outset;border-color:#030511;background-color:#000000;color:#86b6e0;border-width:3px;box-shadow: -5px 5px 0px rgba(0,0,0,0.5);
  442.                        ">
  443.                        
  444.                        
  445.                         <!--header-->
  446.                        
  447.                         <div class="card border-0 rounded-0 py-1 px-2" style="color:#ff409f;background-color:#030511;font-size:1.2em;text-transform:uppercase;letter-spacing:1px;font-family:courier new;font-weight:">
  448.                            
  449.                             <span> <i class="fa-regular fa-square-minus"></i> Gallery - design</span>
  450.                            
  451.                             <span style="position:absolute; right:10px"> <i class="fa-regular fa-send-backward"></i> <i class="fa-regular fa-bring-forward"></i> </span>
  452.                            
  453.                         </div>
  454.                        
  455.                         <!--end header-->
  456.                        
  457.                         <div class="card-body p-3" style="margin-top:auto;margin-bottom:auto">
  458.                             <div class="row">
  459.                                
  460.                                
  461.                                 <!--refsheet/image-->
  462.                                
  463.                                 <div class="col-12 col-lg-7" style="margin-top:auto;margin-bottom:auto">
  464.                                     <div class="card rounded-0 mb-2 mb-lg-0" style="min-height:400px;background-color:#000000;
  465.                                        border-width:4px;
  466.                                        border-style:inset;
  467.                                        background-image:url(https://images.unsplash.com/photo-1594199691187-bdce7e4e5025?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
  468.                                        background-size:cover;
  469.                                        background-position:center">
  470.                                        
  471.                                         <!--link to full image-->
  472.  
  473.                                         <a href="https://unsplash.com/photos/QMKTzaW2jlM" target="_blank" data-toggle="tooltip"
  474.                                        title="full image" style="color:#34dcf8;position:absolute;top:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fa-solid fa-arrow-up-right-from-square"></i> </a>
  475.                                        
  476.                                     </div>
  477.                                 </div>
  478.                                
  479.                                 <!--end refsheet/image-->
  480.                                
  481.                                
  482.                                 <!--design notes-->
  483.                                
  484.                                 <div class="col-12 col-lg-5">
  485.                                    
  486.                                     <!--basic traits-->
  487.                                     <span style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;;color:#ff409f">Design trait</span>
  488.                                     <span class="pull-right">Text</span>
  489.                                     <hr class="mt-1 mb-3" style="border-style:dashed;border-color:#34dcf8;">
  490.                                    
  491.                                     <span style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;;color:#ff409f">Design trait</span>
  492.                                     <span class="pull-right">Text</span>
  493.                                     <hr class="mt-1 mb-3" style="border-style:dashed;border-color:#34dcf8;">
  494.                                    
  495.                                     <span style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;;color:#ff409f">Design trait</span>
  496.                                     <span class="pull-right">Text</span>
  497.                                     <hr class="mt-1 mb-3" style="border-style:dashed;border-color:#34dcf8;">
  498.                                    
  499.                                     <!--info-->
  500.                                     <p><i class="fa-regular fa-hyphen"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  501.                            
  502.                                     <p><i class="fa-regular fa-hyphen"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  503.                                    
  504.                                     <p><i class="fa-regular fa-hyphen"></i> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  505.                            
  506.                                    
  507.                                 </div>
  508.                                
  509.                                 <!--end design notes-->
  510.                                
  511.                                
  512.                             </div>
  513.                         </div>
  514.                        
  515.                      </div>
  516.                 </div>
  517.                
  518.                 <!--end design-->
  519.                
  520.                
  521.                 <!--relationships-->
  522.                
  523.                 <div class="col-12 mb-3  order-7">
  524.                     <div class="card rounded-0 h-100" style="border-style:outset;border-color:#030511;background-color:#000000;color:#86b6e0;border-width:3px;box-shadow: -5px 5px 0px rgba(0,0,0,0.5);
  525.                        ">
  526.                        
  527.                        
  528.                         <!--header-->
  529.                        
  530.                         <div class="card border-0 rounded-0 py-1 px-2" style="color:#ff409f;background-color:#030511;font-size:1.2em;text-transform:uppercase;letter-spacing:1px;font-family:courier new;font-weight:">
  531.                             <span> <i class="fa-regular fa-square-minus"></i> contacts - relationships</span>
  532.                             <span style="position:absolute; right:10px"> <i class="fa-regular fa-send-backward"></i> <i class="fa-regular fa-bring-forward"></i> </span>
  533.                         </div>
  534.                        
  535.                         <!--end header-->
  536.                        
  537.                        
  538.                         <div class="card-body p-3" style="margin-top:auto;margin-bottom:auto">
  539.                            
  540.                             <div class="row">
  541.                                
  542.                                
  543.                                 <!--releationship 1-->
  544.                                
  545.                                 <div class="col-12 col-lg-6" style="margin-top:auto;margin-bottom:auto">
  546.                                     <div class="row">
  547.                                        
  548.                                         <!--charater image-->
  549.                                         <div class="col-12 col-lg-4">
  550.                                             <div class="card rounded-0 my-2 my-lg-0" style="min-height:150px;max-width:170px;margin-left:auto;margin-right:auto;background-color:#000000;
  551.                                                border-width:4px;
  552.                                                border-style:inset;
  553.                                                background-image:url(https://images.unsplash.com/photo-1548502632-6b93092aad0b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80);
  554.                                                background-size:cover;
  555.                                                background-position:center">
  556.                                             </div>
  557.                                         </div>
  558.                                        
  559.                                         <div class="col-12 col-lg-8">
  560.                                             <a href="#" style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;font-size:1.25em;color:#ff409f">name</a>
  561.                                             <span class="pull-right">relationship</span>
  562.                                             <hr class="mt-1 mb-3" style="border-style:dashed;border-color:#34dcf8;">
  563.                                            
  564.                                             <p>A few relatonship notes. These sections will expand but for the best look I suggest keeping it breif</p>
  565.                                         </div>
  566.                                     </div>
  567.                                    
  568.                                     <hr class="my-3" style="border-style:dashed;border-color:#34dcf8;">
  569.                                    
  570.                                 </div>
  571.                                
  572.                                 <!--end releationship 1-->
  573.                                
  574.                                
  575.                                 <!--releationship 2-->
  576.                                
  577.                                 <div class="col-12 col-lg-6" style="margin-top:auto;margin-bottom:auto">
  578.                                     <div class="row">
  579.                                        
  580.                                         <!--charater image-->
  581.                                         <div class="col-12 col-lg-4">
  582.                                             <div class="card rounded-0 my-2 my-lg-0" style="min-height:150px;max-width:170px;margin-left:auto;margin-right:auto;background-color:#000000;
  583.                                                border-width:4px;
  584.                                                border-style:inset;
  585.                                                background-image:url(https://images.unsplash.com/photo-1548502632-6b93092aad0b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80);
  586.                                                background-size:cover;
  587.                                                background-position:center">
  588.                                             </div>
  589.                                         </div>
  590.                                        
  591.                                         <div class="col-12 col-lg-8">
  592.                                             <a href="#" style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;font-size:1.25em;color:#ff409f">name</a>
  593.                                             <span class="pull-right">relationship</span>
  594.                                             <hr class="mt-1 mb-3" style="border-style:dashed;border-color:#34dcf8;">
  595.                                            
  596.                                             <p>A few relatonship notes. These sections will expand but for the best look I suggest keeping it breifLorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  597.                                         </div>
  598.                                     </div>
  599.                                    
  600.                                     <hr class="my-3" style="border-style:dashed;border-color:#34dcf8;">
  601.                                    
  602.                                 </div>
  603.                                
  604.                                 <!--end releationship 2-->
  605.                                
  606.                                
  607.                                 <!--releationship 3-->
  608.                                
  609.                                 <div class="col-12 col-lg-6" style="margin-top:auto;margin-bottom:auto">
  610.                                     <div class="row">
  611.                                        
  612.                                         <!--charater image-->
  613.                                         <div class="col-12 col-lg-4">
  614.                                             <div class="card rounded-0 my-2 my-lg-0" style="min-height:150px;max-width:170px;margin-left:auto;margin-right:auto;background-color:#000000;
  615.                                                border-width:4px;
  616.                                                border-style:inset;
  617.                                                background-image:url(https://images.unsplash.com/photo-1548502632-6b93092aad0b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80);
  618.                                                background-size:cover;
  619.                                                background-position:center">
  620.                                             </div>
  621.                                         </div>
  622.                                        
  623.                                         <div class="col-12 col-lg-8">
  624.                                             <a href="#" style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;font-size:1.25em;color:#ff409f">name</a>
  625.                                             <span class="pull-right">relationship</span>
  626.                                             <hr class="mt-1 mb-3" style="border-style:dashed;border-color:#34dcf8;">
  627.                                            
  628.                                             <p> Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
  629.                                         </div>
  630.                                     </div>
  631.                                    
  632.                                     <hr class="my-3" style="border-style:dashed;border-color:#34dcf8;">
  633.                                    
  634.                                 </div>
  635.                                
  636.                                 <!--end releationship 3-->
  637.                                
  638.                                
  639.                                 <!--releationship 4-->
  640.                                
  641.                                 <div class="col-12 col-lg-6" style="margin-top:auto;margin-bottom:auto">
  642.                                     <div class="row">
  643.                                        
  644.                                         <!--charater image-->
  645.                                         <div class="col-12 col-lg-4">
  646.                                             <div class="card rounded-0 my-2 my-lg-0" style="min-height:150px;max-width:170px;margin-left:auto;margin-right:auto;background-color:#000000;
  647.                                                border-width:4px;
  648.                                                border-style:inset;
  649.                                                background-image:url(https://images.unsplash.com/photo-1548502632-6b93092aad0b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80);
  650.                                                background-size:cover;
  651.                                                background-position:center">
  652.                                             </div>
  653.                                         </div>
  654.                                        
  655.                                         <div class="col-12 col-lg-8">
  656.                                             <a href="#" style="text-transform:uppercase;letter-spacing:1px;font-family:courier new;font-size:1.25em;color:#ff409f">name</a>
  657.                                             <span class="pull-right">relationship</span>
  658.                                             <hr class="mt-1 mb-3" style="border-style:dashed;border-color:#34dcf8;">
  659.                                            
  660.                                             <p> Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  661.                                         </div>
  662.                                     </div>
  663.                                    
  664.                                     <hr class="my-3" style="border-style:dashed;border-color:#34dcf8;">
  665.                                    
  666.                                 </div>
  667.                                
  668.                                 <!--end releationship 4-->
  669.                                
  670.                                
  671.                             </div>
  672.                            
  673.                         </div>
  674.                        
  675.                        
  676.                      </div>
  677.                 </div>
  678.                
  679.                 <!--end relationships-->
  680.                
  681.             </div>
  682.            
  683.            
  684.         </div>
  685.        
  686.        
  687.         <!--footer/credit-->
  688.        
  689.         <div class="card border-0 rounded-0 py-1 px-2" style="color:#34dcf8;background-color:#030511;text-transform:uppercase;font-family: courier new">
  690.            
  691.             <p style="text-align:right">
  692.                 HTML by <a href="https://toyhou.se/15204878" style="color:#ff409f"><i class='fa-regular fa-heart'></i> Jade-Everstone</a>
  693.                 //
  694.                 background - <a href="https://unsplash.com/photos/71SHXwBLp5w" style="color:#ff409f"> Unsplash</a>
  695.             </p>
  696.            
  697.         </div>
  698.        
  699.         <!--end footer/credit-->
  700.        
  701.        
  702.     </div>
  703.    
  704. </div>
Advertisement
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!