API tools faq
paste
Advertisement
circlejourney

Littoral

circlejourney
Feb 6th, 2023 (edited)
1,058
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 24.04 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.    Littoral - Theme by Circlejourney.
  4.    Placeholder theme colour: #48938f
  5.    Placeholder dark theme colour: #316569
  6.    
  7. -->
  8.  
  9. <div style="background-color: gray; margin: -15px -15px 0; padding: 15px;">
  10.  
  11.     <div class="row no-gutters py-2 justify-content-center">
  12.        
  13.         <div class="col-lg-3 flex-grow-1 p-2 d-flex flex-column" style="position: relative;">
  14.            
  15.                 <div id="AVATAR" class="m-auto bg-light p-2" style="max-width: 200px;">
  16.                     <img src="https://i.imgur.com/Kf7IbHH.png">
  17.                 </div>
  18.                    
  19.                 <div class="flex-grow-1 bg-light text-dark px-3 pb-3" style="margin-top: -100px; padding-top: 140px;">
  20.                    
  21.                     <h2 class="text-center text-uppercase">Name</h2>
  22.                    
  23.                     <div class="row no-gutters">
  24.                         <div class="col">a.k.a.</div>
  25.                         <div class="col text-right">my nickname</div>
  26.                     </div>
  27.                    
  28.                     <div class="row no-gutters">
  29.                         <div class="col">age</div>
  30.                         <div class="col text-right">100</div>
  31.                     </div>
  32.                    
  33.                     <div class="row no-gutters">
  34.                         <div class="col">pronouns</div>
  35.                         <div class="col text-right">my pronouns</div>
  36.                     </div>
  37.                    
  38.                     <div class="row no-gutters">
  39.                         <div class="col">birthplace</div>
  40.                         <div class="col text-right">my birthplace</div>
  41.                     </div>
  42.                    
  43.                     <div class="row no-gutters">
  44.                         <div class="col">job</div>
  45.                         <div class="col text-right">my job</div>
  46.                     </div>
  47.                    
  48.                     <div class="d-flex align-items-center m-3 text-muted">
  49.                         <hr class="flex-grow-1" style="border-style: dashed;"> <i class="fa fa-anchor mx-2"></i><hr class="flex-grow-1" style="border-style: dashed;">
  50.                     </div>
  51.                    
  52.                    
  53.                     <h3 class="text-center text-uppercase">Playlist</h3>
  54.                    
  55.                     <div class="w-100 d-flex flex-column align-items-center">
  56.                        
  57.                         <!-- Replace the string of letters after /embed/ with your preferred video's ID-->
  58.                        
  59.                         <iframe class="my-2" style="width: 95%;" src="https://www.youtube.com/embed/aQwtgOMpiVM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  60.                        
  61.                         <iframe class="my-2" style="width: 95%;" src="https://www.youtube.com/embed/RA4Y5qU3YLg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  62.                        
  63.                         <iframe class="my-2" style="width: 95%;" src="https://www.youtube.com/embed/ecIHBDUULWE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  64.                     </div>
  65.                    
  66.                     <div class="d-flex align-items-center m-3">
  67.                         <hr class="flex-grow-1" style="border-style: dashed;"> <i class="fa fa-anchor mx-2"></i><hr class="flex-grow-1" style="border-style: dashed;">
  68.                     </div>
  69.                    
  70.                     <h3 class="text-center text-uppercase">Stats</h3>
  71.                    
  72.                     <div class="row no-gutters my-2">
  73.                         <div class="col-12 col-lg-5 text-lg-right">
  74.                             Strength
  75.                         </div>
  76.                         <div class="col-12 col-lg-7 flex-column justify-content-center pl-1">
  77.                         <div class="progress mr-3" style="background: none; border: 1px solid grey;">
  78.                         <div class="progress-bar" style="width:40%; background-color: #48938f;"></div>
  79.                         </div>
  80.                         </div>
  81.                     </div>
  82.                    
  83.                     <div class="row no-gutters my-2">
  84.                         <div class="col-12 col-lg-5 text-lg-right">
  85.                             Stamina
  86.                         </div>
  87.                         <div class="col-12 col-lg-7 flex-column justify-content-center pl-1">
  88.                         <div class="progress mr-3" style="background: none; border: 1px solid grey;">
  89.                         <div class="progress-bar" style="width:50%; background-color: #48938f;"></div>
  90.                         </div>
  91.                         </div>
  92.                     </div>
  93.                    
  94.                     <div class="row no-gutters my-2">
  95.                         <div class="col-12 col-lg-5 text-lg-right">
  96.                             Reflexes
  97.                         </div>
  98.                         <div class="col-12 col-lg-7 flex-column justify-content-center pl-1">
  99.                         <div class="progress mr-3" style="background: none; border: 1px solid grey;">
  100.                         <div class="progress-bar" style="width:60%; background-color: #48938f;"></div>
  101.                         </div>
  102.                         </div>
  103.                     </div>
  104.                    
  105.                     <div class="row no-gutters my-2">
  106.                         <div class="col-12 col-lg-5 text-lg-right">
  107.                             Perception
  108.                         </div>
  109.                         <div class="col-12 col-lg-7 flex-column justify-content-center pl-1">
  110.                         <div class="progress mr-3" style="background: none; border: 1px solid grey;">
  111.                         <div class="progress-bar" style="width:30%; background-color: #48938f;"></div>
  112.                         </div>
  113.                         </div>
  114.                     </div>
  115.                    
  116.                     <div class="row no-gutters my-2">
  117.                         <div class="col-12 col-lg-5 text-lg-right">
  118.                             Problem-solving
  119.                         </div>
  120.                         <div class="col-12 col-lg-7 flex-column justify-content-center pl-1">
  121.                         <div class="progress mr-3" style="background: none; border: 1px solid grey;">
  122.                         <div class="progress-bar" style="width:50%; background-color: #48938f;"></div>
  123.                         </div>
  124.                         </div>
  125.                     </div>
  126.                    
  127.                     <div class="row no-gutters my-2">
  128.                         <div class="col-12 col-lg-5 text-lg-right">
  129.                             Teamwork
  130.                         </div>
  131.                         <div class="col-12 col-lg-7 flex-column justify-content-center pl-1">
  132.                         <div class="progress mr-3" style="background: none; border: 1px solid grey;">
  133.                         <div class="progress-bar" style="width: 80%; background-color: #48938f;"></div>
  134.                         </div>
  135.                         </div>
  136.                     </div>
  137.                    
  138.                     <div class="d-flex align-items-center m-3">
  139.                         <hr class="flex-grow-1" style="border-style: dashed;"> <i class="fa fa-anchor mx-2"></i><hr class="flex-grow-1" style="border-style: dashed;">
  140.                     </div>
  141.                
  142.                     <a class="d-block w-100 text-center" style="font-size: 10pt; color: teal;" href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-">Theme by Circlejourney</a>
  143.                 </div>
  144.         </div>
  145.        
  146.         <div class="col-lg-8 p-2 text-white">
  147.            
  148.             <div id="BANNER"
  149.                class="bg-light"
  150.                style="height: 200px; background-image: url(https://i.imgur.com/ZhGIMIN.png); background-size: cover;">
  151.             </div>
  152.            
  153.             <div class="row no-gutters flex-grow-1">
  154.                 <div class="col-lg-8 d-flex flex-column">
  155.                    
  156.                     <div class="d-flex justify-content-between p-4" style="background-color: #333;">
  157.                        
  158.                         <h4 class="text-uppercase m-0"><i class="fa fa-anchor"></i> Character tagline</h4>
  159.                         <span class="font-italic">adjective &bull; adjective &bull; adjective</span>
  160.                        
  161.                     </div>
  162.                    
  163.                     <div class="text-justify px-3 pt-3 flex-grow-1 d-flex flex-column justify-content-center" style="padding-bottom: 2.8em; background-color: #316569;">
  164.                         <p>Main body content. 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.
  165.                         </p>
  166.                         <p>
  167.                             Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. 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.
  168.                         </p>
  169.                        
  170.                         <div class="d-flex align-items-center mx-3 mb-3">
  171.                             <hr class="flex-grow-1" style="border-color: #eee; border-style: dashed;"> <i class="fa fa-anchor mx-2"></i><hr class="flex-grow-1" style="border-color: #eee; border-style: dashed;">
  172.                         </div>
  173.                        
  174.                         <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.
  175.                         </p>
  176.                     </div>
  177.                    
  178.                     <div class="row no-gutters" style="z-index: 3;">
  179.                        
  180.                         <div class="col flex-grow-1">
  181.                             <div class="p-4 ml-3" style="margin-top: -2em; margin-bottom: -2em; background-color: #48938f; box-shadow: 5px 5px 0px #eee;">
  182.                                 <h4 class="text-uppercase"><i class="fa fa-anchor"></i> Trivia</h4>
  183.                                 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.
  184.                             </div>
  185.                         </div>
  186.                        
  187.                         <div class="col flex-grow-1 d-flex flex-column p-3 text-light">
  188.                             <div class="flex-grow-1 p-2 d-flex flex-column justify-content-center text-center" style="background-color: #48938f;">
  189.                                
  190.                                 <h6 class="text-uppercase text-center"><i class="fas fa-check"></i> Likes</h6>
  191.                                 <span>
  192.                                     Thing 1
  193.                                     <br>
  194.                                     Thing 2
  195.                                     <br>
  196.                                     Thing 3
  197.                                 </span>
  198.                             </div>
  199.                            
  200.                             <div class="flex-grow-1 p-2 text-center d-flex flex-column justify-content-center text-center" style="background-color: #316569;">
  201.                                
  202.                                 <h6 class="text-uppercase text-center"><i class="fas fa-times"></i> Dislikes</h6>
  203.                                 <span>
  204.                                     Thing 1
  205.                                     <br>
  206.                                     Thing 2
  207.                                     <br>
  208.                                     Thing 3
  209.                                 </span>
  210.                                
  211.                             </div>
  212.                         </div>
  213.                     </div>
  214.                 </div>
  215.                
  216.                 <div id="CONNECTIONS" class="col-lg-4 flex-grow-1" style="margin: -1em -1em -0.6em 0; color: black; z-index: 2;">
  217.                     <div class="bg-light px-2 h-100" style="padding: 3.5em 0; margin-right: -1em; font-size: 10pt; box-shadow: 5px 5px 0px #333;">
  218.                        
  219.                         <h4 class="text-uppercase text-center"><i class="fa fa-anchor"></i> Connections</h4>
  220.                        
  221.                        
  222.                         <div class="RELATIONSHIP mt-3">
  223.                            
  224.                             <img src="https://i.imgur.com/Kf7IbHH.png" style="max-width: 100px; float: left;" class="mr-2">
  225.                            
  226.                             <h6 style="word-break: break-word">
  227.                                 Name &bull;
  228.                                 <span class="text-muted">Relationship</span>
  229.                             </h6>
  230.                            
  231.                             <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.</p>
  232.                            
  233.                         </div>
  234.                        
  235.                        
  236.                         <div class="d-flex align-items-center m-3 text-muted">
  237.                             <hr class="flex-grow-1" style="border-style: dashed;"> <i class="fa fa-anchor mx-2"></i><hr class="flex-grow-1" style="border-style: dashed;">
  238.                         </div>
  239.                        
  240.                        
  241.                         <div class="RELATIONSHIP mt-3">
  242.                            
  243.                             <img src="https://i.imgur.com/Kf7IbHH.png" style="max-width: 100px; float: left;" class="mr-2">
  244.                            
  245.                             <h6 style="word-break: break-word">
  246.                                 Name &bull;
  247.                                 <span class="text-muted">Relationship</span>
  248.                             </h6>
  249.                            
  250.                             <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.</p>
  251.                            
  252.                         </div>
  253.                        
  254.                        
  255.                         <div class="d-flex align-items-center m-3 text-muted">
  256.                             <hr class="flex-grow-1" style="border-style: dashed;"> <i class="fa fa-anchor mx-2"></i><hr class="flex-grow-1" style="border-style: dashed;">
  257.                         </div>
  258.                        
  259.                        
  260.                         <div class="RELATIONSHIP mt-3">
  261.                            
  262.                             <img src="https://i.imgur.com/Kf7IbHH.png" style="max-width: 100px; float: left;" class="mr-2">
  263.                            
  264.                             <h6 style="word-break: break-word">
  265.                                 Name &bull; <span class="text-muted">Relationship</span>
  266.                             </h6>
  267.                            
  268.                             <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.</p>
  269.                            
  270.                         </div>
  271.                        
  272.                     </div>  
  273.                 </div>
  274.             </div>
  275.            
  276.            
  277.             <div class="row no-gutters">
  278.                    
  279.                 <div id="PHOTO-1"
  280.                    class="col-lg-7 bg-light"
  281.                    style="background-image: url(https://i.imgur.com/ZnosiY0.jpg); background-size: cover; min-height: 200px;">
  282.                 </div>
  283.                
  284.                 <div class="col-lg-5 p-3" style="margin-bottom:-2em; background-color: #48938f;">
  285.                    
  286.                    
  287.                     <div id="TIMELINE-1" class="d-flex flex-column h-100 py-2" style="border-left: 1px dashed; padding-left: -0.55em;">
  288.                        
  289.                         <!-- The top and bottom timeline bullet points have special sizing properties to make the dots line up with the end of the line - remember to keep the first and last bullet points where they are. --->
  290.                         <div class="flex-grow-1 d-flex align-items-start mb-2" style="margin-left: -0.55em; margin-top: -0.55em;">
  291.                            
  292.                             <i class="fas fa-dharmachakra"></i>
  293.                             <div class="ml-2">
  294.                                 <b><i>X years old.</i></b>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  295.                             </div>
  296.                            
  297.                         </div>
  298.                        
  299.                        
  300.                         <div class="flex-grow-1 d-flex align-items-center my-2" style="margin-left: -0.55em;">
  301.                            
  302.                             <i class="fas fa-dharmachakra"></i>
  303.                             <div class="ml-2">
  304.                                 <b><i>X years old.</i></b>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  305.                             </div>
  306.                            
  307.                         </div>
  308.                        
  309.                        
  310.                         <!-- The top and bottom timeline bullet points have special sizing properties to make the dots line up with the end of the line - remember to keep the first and last bullet points where they are. --->
  311.                         <div class="flex-grow-1 d-flex align-items-end mt-2" style="margin-left: -0.55em; margin-bottom: -0.55em;">
  312.                            
  313.                             <i class="fas fa-dharmachakra"></i>
  314.                             <div class="ml-2">
  315.                                 <b><i>X years old.</i></b>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  316.                             </div>
  317.                            
  318.                         </div>
  319.                        
  320.                     </div>
  321.                    
  322.                 </div>
  323.             </div>
  324.            
  325.             <div id="PHOTO-2"
  326.                style="z-index:-1; width: 100%; height: 300px; background-image: url(https://i.imgur.com/n0tPtqb.png); background-size: cover;">
  327.                
  328.                 <div id="BIG-QUOTE" class="display-4 d-flex flex-column justify-content-center text-white text-center font-italic" style="width: 100%; height: 100%; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); font-family: serif;">
  329.                    
  330.                     &ldquo;Quote here...&rdquo;
  331.                    
  332.                 </div>
  333.                
  334.             </div>
  335.            
  336.            
  337.             <div class="row no-gutters">
  338.                 <div class="col-lg-5 p-3" style="margin-top: -2em; background-color: #48938f;">
  339.                    
  340.                     <div id="TIMELINE-2" class="d-flex flex-column h-100 py-2 text-right" style="border-right: 1px dashed; padding-left: -0.55em;">
  341.                        
  342.                         <!-- The top and bottom timeline bullet points have special sizing properties to make the dots line up with the end of the line - remember to keep the first and last bullet points where they are. --->
  343.                         <div class="flex-grow-1 d-flex align-items-start mb-2" style="margin-right: -0.55em; margin-top: -0.55em;">
  344.                             <div class="mr-2">
  345.                                 <b><i>X years old.</i></b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  346.                             </div>
  347.                             <i class="fas fa-dharmachakra"></i>
  348.                            
  349.                         </div>
  350.                        
  351.                        
  352.                         <div class="flex-grow-1 d-flex align-items-center my-2" style="margin-right: -0.55em;">
  353.                            
  354.                             <div class="mr-2">
  355.                                 <b><i>X years old.</i></b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  356.                             </div>
  357.                             <i class="fas fa-dharmachakra"></i>
  358.                            
  359.                         </div>
  360.                        
  361.  
  362.                         <div class="flex-grow-1 d-flex align-items-center my-2" style="margin-right: -0.55em;">
  363.                            
  364.                             <div class="mr-2">
  365.                                 <b><i>X years old.</i></b> 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.
  366.                             </div>
  367.                             <i class="fas fa-dharmachakra"></i>
  368.                            
  369.                         </div>
  370.                        
  371.                        
  372.                         <!-- The top and bottom timeline bullet points have special sizing properties to make the dots line up with the end of the line - remember to keep the first and last bullet points where they are. --->
  373.                         <div class="flex-grow-1 d-flex align-items-end mt-2" style="margin-right: -0.55em; margin-bottom: -0.55em;">
  374.                            
  375.                             <div class="mr-2">
  376.                                 <b><i>X years old.</i></b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  377.                             </div>
  378.                             <i class="fas fa-dharmachakra"></i>
  379.                            
  380.                         </div>
  381.                     </div>
  382.                 </div>
  383.                
  384.                 <div class="col-lg-7 bg-secondary d-flex flex-column">
  385.                    
  386.                     <div id="PHOTO-3"
  387.                        class="flex-grow-1"
  388.                        style="background-image: url(https://i.imgur.com/IhRjpfl.jpg); background-size: cover; min-height: 200px;">
  389.                     </div>
  390.                    
  391.                     <div id="PHOTO-4"
  392.                        class="flex-grow-1"
  393.                        style="background-image: url(https://i.imgur.com/uGcmW4T.jpg); background-size: cover; min-height: 200px;">
  394.                     </div>
  395.                    
  396.                 </div>
  397.             </div>
  398.         </div>
  399.     </div>
  400.  
  401. </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!