API tools faq
paste
Advertisement
circlejourney

Destinations

circlejourney
Oct 23rd, 2023 (edited)
1,108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.29 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    Destinations by Circlejourney. See my codes here:
  3.    https://toyhou.se/orchestrator/characters/folder:524040
  4.    
  5.    Based on a moodboard from Coders Quarters' October 2023 challenge:
  6.    https://toyhou.se/~world/82691.coders-quarters/page/102256.october-challenge
  7.    
  8.     Placeholder theme color (use Ctrl + F to replace): #b3cecf
  9. -->
  10.  
  11.  
  12. <!-- Change background-image property to change main BG.
  13.     You can also change the font-family property here to change fonts for the entire map.
  14. -->
  15. <div
  16.    style="background-image: url(https://images.unsplash.com/photo-1532154187607-d766ed024aac);
  17.        background-size: cover;
  18.        background-position: center;
  19.        font-family: 'Times New Romans', serif;
  20.        position: relative;
  21.        overflow: hidden;">
  22.    
  23.     <div class="text-white py-4 px-5" style="background-color: rgba(0,0,0,0.4); ">
  24.         <div class="row no-gutters my-4" style="border: 1px dashed #b3cecf; border-radius: 10px;">
  25.        
  26.             <!-- CORNER ACCENT ICON -->
  27.             <div style="font-size: 200px; line-height: 1em; position: absolute; bottom: -5%; right: -2%; text-shadow: 0 0 30px rgba(0,0,0,0.5); color: #b3cecf;">
  28.                 <i class="fad fa-compass"></i>
  29.             </div>
  30.            
  31.             <!-- BEGIN LEFT NOTE -->
  32.             <div class="col-12 col-lg-3">
  33.                 <div class="p-2" style="color: #333; height: calc(100% + 2em); margin: -1em; transparent; border: 10px solid transparent; border-image: url(https://i.postimg.cc/43CdK6y6/paper-sheet-ragged-edges.png) 4% stretch; border-image-outset: 5px; background-color: #E4E3DC; transform: rotate(-1deg); box-shadow: 1px 1px 10px #333;">
  34.                    
  35.                    
  36.                     <!-- PHOTO
  37.                         Change the src property to chang ehte photo on the left column
  38.                    -->
  39.                     <div class="text-center">
  40.                         <img src="https://i.postimg.cc/jdMKVr4Q/harshil-gudka-unsplash.jpg"
  41.                            class="my-2 w-75 rounded"
  42.                            style="transform: rotate(2deg); box-shadow: 1px 1px 2px grey; border: 10px solid white;">
  43.                     </div>
  44.                    
  45.                     <h2 class="mt-2 pt-3 pb-2 text-center" style="border-bottom: 1px dashed;">
  46.                         <i class="fal fa-compass"></i> Journey
  47.                     </h2>
  48.                    
  49.                     <p>This is the journey that we took. 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>
  50.                     <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>
  51.                    
  52.                    
  53.                     <h2 class="mt-2 pt-3 pb-2 text-center" style="border-bottom: 1px dashed;">
  54.                         <i class="fal fa-compass"></i> Legend
  55.                     </h2>
  56.                    
  57.                     <!--
  58.                        You may wish to change the FA icons to represent other kinds of landmarks.
  59.                    -->
  60.                     <div style="font-size: 14pt;">
  61.                         <div class="d-flex justify-content-between">
  62.                             <i class="fal fa-home"></i> Home
  63.                         </div>
  64.                        
  65.                         <div class="d-flex justify-content-between">
  66.                             <i class="fal fa-landmark"></i> Town
  67.                         </div>
  68.                        
  69.                         <div class="d-flex justify-content-between">
  70.                             <i class="fal fa-caravan"></i> Route
  71.                         </div>
  72.                        
  73.                         <div class="d-flex justify-content-between">
  74.                             <i class="fal fa-trees"></i> Wilderness
  75.                         </div>
  76.                     </div>
  77.                    
  78.                 </div>
  79.             </div>
  80.             <!-- END LEFT NOTE -->
  81.            
  82.            
  83.             <!-- BEGIN JOURNEY MAP AREA -->
  84.             <div class="col-12 col-lg-8 m-auto row no-gutters p-5">
  85.            
  86.            
  87.             <!--  BEGIN COPYABLE SECTION:
  88.                  To add more than 4 places, duplicate everything from here to "END COPYABLE SECTION". -->
  89.                
  90.                 <div class="row">
  91.                 <!-- BEGIN PLACE -->
  92.                 <div class="col-12 col-lg-4">
  93.                     <div class="text-center">
  94.                         <h3 class="text-center" style="font-size: 22pt;">
  95.                             <i class="fal fa-house"></i>
  96.                             Place 1
  97.                         </h3>
  98.                     </div>
  99.                    
  100.                     <div class="text-center">
  101.                         <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>
  102.                     </div>
  103.                 </div>
  104.                 <!-- END PLACE -->
  105.                
  106.                
  107.                 <!-- BEGIN MAP LINE -->
  108.                 <div class="col-12 col-lg-4 d-flex flex-lg-column justify-content-center" style="min-height: 80px;">
  109.                     <div style="border: 4px dashed white; transform: rotate(3deg);"></div>
  110.                 </div>
  111.                 <!-- END MAP LINE -->
  112.                
  113.                
  114.                 <!-- BEGIN PLACE -->
  115.                 <div class="col-12 col-lg-4 mt-lg-4 p-2">
  116.                     <h3 class="text-center" style="font-size: 22pt;">
  117.                         <i class="fal fa-caravan"></i>
  118.                         Place 2
  119.                     </h3>
  120.                        
  121.                     <div class="text-center">
  122.                         <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>
  123.                     </div>
  124.                 </div>
  125.                 <!-- END PLACE -->
  126.                
  127.                 </div>
  128.                
  129.                
  130.                 <!-- MAP LINE -->
  131.                 <div class="row w-100">
  132.                     <div class="col-lg-8 d-flex justify-content-center"></div>
  133.                     <div class="col-12 col-lg-4 d-flex flex-row justify-content-center" style="min-height: 80px;">
  134.                         <div style="border: 4px dashed white; transform: rotate(-5deg);"></div>
  135.                     </div>
  136.                 </div>
  137.                 <!-- END MAP LINE -->
  138.                
  139.                
  140.                 <div class="row">
  141.                 <!-- BEGIN PLACE -->
  142.                 <div class="col-12 col-lg-4 mt-lg-4 p-2 order-2 order-lg-0">
  143.                     <h3 class="text-center" style="font-size: 22pt;">
  144.                         <i class="fal fa-landmark"></i>
  145.                         Place 4
  146.                     </h3>
  147.                    
  148.                     <div class="text-center">
  149.                         <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>
  150.                     </div>
  151.                    
  152.                 </div>
  153.                 <!-- BEGIN PLACE -->
  154.                
  155.                
  156.                 <!-- BEGIN MAP LINE -->
  157.                 <div class="MAP-LINE col-12 col-lg-4 d-flex flex-lg-column justify-content-center order-1" style="min-height: 80px;">
  158.                     <div style="border: 4px dashed white; transform: rotate(-5deg);"></div>
  159.                 </div>
  160.                 <!-- END MAP LINE -->
  161.                
  162.                
  163.                 <!-- BEGIN PLACE -->
  164.                 <div class="col-12 col-lg-4 p-2 order-0 order-lg-2">
  165.                     <h3 class="text-center" style="font-size: 22pt;">
  166.                         <i class="fal fa-trees"></i>
  167.                         Place 3
  168.                     </h3>
  169.                    
  170.                     <div class="text-center">
  171.                         <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>
  172.                     </div>
  173.                 </div>
  174.                 <!-- END PLACE -->
  175.                 </div>
  176.                
  177.                
  178.                 <!-- This is the "tail" dashed line that conncts Place 4 to the 1st location of the next group below. Delete this "tail" for the final repeat. BEGIN TAIL -->
  179.                 <div class="row w-100">
  180.                     <div class="col-12 col-lg-4 d-flex flex-row justify-content-center" style="min-height: 80px;">
  181.                         <div style="border: 4px dashed white; transform: rotate(5deg);"></div>
  182.                     </div>
  183.                     <div class="col-lg-8 d-flex justify-content-center" style="font-size: 60pt;"></div>
  184.                 </div>
  185.                 <!-- END TAIL -->
  186.            
  187.             <!-- END COPYABLE SECTION -->
  188.            
  189.             </div>
  190.             <!-- END JOURNEY MAP AREA -->
  191.         </div>
  192.     </div>
  193. </div>
  194.  
  195.  
  196. <div id="CREDIT" class="text-right" style="z-index:3;font-size:9pt;opacity:.5;">
  197.     <a href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-"><i class="fa fa-code"></i> Theme by Circlejourney</a>
  198. </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!