API tools faq
paste
Advertisement
circlejourney

Vacation Plans

circlejourney
Jul 25th, 2022 (edited)
1,613
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.25 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    Vacation Plans theme by Circlejourney.
  3.    Placeholder theme colour is #d5e4f0, use Find/Replace to change it.
  4. -->
  5.  
  6. <div style="margin: -15px; padding: 30px; position: relative; background-image: url(https://images.unsplash.com/photo-1601297616279-35a028506c93?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80); background-position: center; background-size: cover; background-attachment: fixed;">
  7. <div class="text-dark" style="background-image: url(https://i.imgur.com/rtK9KdQ.jpg); background-size: cover; background-position: center 30%; position: relative; border: 20px ridge #d5e4f0; border-radius: 10px; font-family: Ink Free, Monotype Corsiva, sans-serif; font-weight: bold; overflow: hidden; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5);">
  8.    
  9.        
  10.         <!-- TOP -->
  11.         <div class="p-4" style="min-height: 500px; background-color: rgba(255,255,255,0.2);">
  12.             <div class="row">
  13.                
  14.                 <div class="col-12 col-lg-7">
  15.                    
  16.                     <div class="row no-gutters mb-2" style="z-index: 2; margin-left: 0, margin-right: -10px;">
  17.                        
  18.                         <!-- ICON CONTAINER -->
  19.                         <div class="col-12 col-md-auto mt-3 mx-2 text-center">
  20.                            
  21.                             <img id="PORTRAIT-ICON" src="https://i.imgur.com/Kf7IbHH.png" style="height: 150px; width: 150px; object-fit: cover; box-shadow: 1px 1px 1px rgba(0,0,0,0.3); transform: rotate(-8deg);">
  22.                            
  23.                         </div>
  24.                        
  25.                         <!-- TOP INFO -->
  26.                         <div id="TOP-INFO" class="col-12 col-md d-flex flex-column" style="margin-right: -10px;">
  27.                            
  28.                             <!-- NAME AND QUOTE -->
  29.                             <div class="d-inline-block text-center px-3 pt-3 pb-2 align-self-start" style="transform: rotate(-2deg); width: auto; z-index: 2; box-shadow: 1px 1px 1px rgba(0,0,0,0.3); margin-left: -10px; background-color: #d5e4f0; background-image: url(https://i.imgur.com/NHJYwtN.png); clip-path: polygon(2% 0, 100% 0, 100% 100%, 0 100%, 0 7%)">
  30.                                
  31.                                 <span class="display-4">Name</span>
  32.                                 <div>"Lorem ipsem dolor sit amet."</div>
  33.                                
  34.                             </div>
  35.                            
  36.                             <!-- DETAILS -->
  37.                             <div class="bg-white px-2 py-3 mb-1 row text-center" style="box-shadow: 1px 1px 1px rgba(0,0,0,0.3); background-image: url(https://i.imgur.com/NHJYwtN.png);">
  38.                                
  39.                                 <!-- STICKER TOP CENTER -->
  40.                                 <img id="STICKER-TOP-CENTER" src="https://images.emojiterra.com/google/noto-emoji/v2.034/128px/1f42c.png" style="height: 80px; position: absolute; top: 30px; right: -20px; transform: rotate(-10deg); filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3)); z-index: 3;">
  41.                            
  42.                                 <div class="col-6">a.k.a. Nickname</div>
  43.                                 <div class="col-6">Age: My Age</div>
  44.                                 <div class="col-6">Pronouns: My pronouns</div>
  45.                                 <div class="col-6">Birthplace: Wulien</div>
  46.                             </div>
  47.                         </div>
  48.                     </div>
  49.                    
  50.                     <!-- BASICS -->
  51.                     <div id="BASICS" class="d-block p-3 pb-4" style="width: 102%; transform: rotate(2deg); background-color: #d5e4f0; z-index: -1; box-shadow: 1px 1px 1px rgba(0,0,0,0.3); background-image: url(https://i.imgur.com/NHJYwtN.png)">
  52.                        
  53.                         <div class="d-flex w-100 align-items-center justify-content-start">
  54.                            
  55.                             <div class="flex-grow-1" style="background-image: url(https://i.imgur.com/GCMKHOh.png); background-position: center; background-size: cover; height: 5px; opacity: 0.5">
  56.                             </div>
  57.                            
  58.                             <h2 class="my-0 mx-2">Basics</h2>
  59.                            
  60.                             <div class="flex-grow-1" style="background-image: url(https://i.imgur.com/ShM21UV.png); background-position: center; background-size: cover; height: 5px; opacity: 0.5">
  61.                             </div>
  62.                         </div>
  63.                        
  64.                         <div>
  65.                             Basics here. 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.
  66.                         </div>
  67.                        
  68.                     </div>
  69.                    
  70.                     <!-- SQUARE IMAGE ROW -->
  71.                     <div id="SQUARE-IMAGE-ROW" class="row justify-content-center ml-0 ml-md-2 text-center" style="margin-top: -10px;">
  72.                         <div class="col-lg-4 col-6">
  73.                             <!-- SQUARE IMAGE 1 -->
  74.                             <img src="https://i.imgur.com/qB3rzqg.jpg" style="min-width: 140px; height: 140px; object-fit: cover; transform: rotate(-5deg); z-index: 1; box-shadow: 1px 1px 1px rgba(0,0,0,0.3);">
  75.                         </div>
  76.                        
  77.                         <div class="col-lg-4 col-6">
  78.                             <!-- SQUARE IMAGE 2 -->
  79.                             <img src="https://i.imgur.com/OZgtH2F.png" style="min-width: 140px; height: 140px; object-fit: cover; transform: rotate(2deg); z-index: 1; box-shadow: 1px 1px 1px rgba(0,0,0,0.3);">
  80.                         </div>
  81.                        
  82.                         <div class="col-lg-4 col-6">
  83.                             <!-- SQUARE IMAGE 3 -->
  84.                             <img src="https://i.imgur.com/0LG37U2.jpg" style="min-width: 140px; height: 140px; object-fit: cover; transform: rotate(-6deg); z-index: 1; box-shadow: 1px 1px 1px rgba(0,0,0,0.3);">
  85.                         </div>
  86.                     </div>
  87.                        
  88.                     <div class="px-3 py-4 bg-white text-right" style="margin-left: 20%; transform: rotate(-3deg); z-index; -1; box-shadow: 1px 1px 1px rgba(0,0,0,0.3); background-image: url(https://i.imgur.com/NHJYwtN.png)">
  89.                             <p>
  90.                                 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.
  91.                             </p>
  92.  
  93.                     </div>
  94.                    
  95.                     <!-- STICKER BOTTOM LEFT -->
  96.                     <img id="STICKER-BOTTOM-LEFT" src="https://images.emojiterra.com/google/noto-emoji/v2.034/512px/26f5.png" style="height: 90px; position: absolute; bottom: 50px; left: 10px; transform: rotate(8deg); filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3)); z-index: 3;">
  97.                 </div>
  98.            
  99.             <!-- POLAROIDS COLUMN -->
  100.             <div class="POLAROIDS-COLUMN col-12 col-lg-5 d-flex flex-column justify-content-around" style="margin-left: -10px;">
  101.                
  102.                 <!-- STICKER TOP RIGHT -->
  103.                 <img id="STICKER-TOP-RIGHT" style="position: absolute; right: -10px; top: 0; width: 80px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3)); z-index: 2; transform: rotate(-8deg);" src="https://images.emojiterra.com/google/noto-emoji/v2.034/128px/1f31e.png">
  104.                
  105.                 <!-- POLAROID 1 -->
  106.                 <div id="POLAROID-1" class="p-2 bg-white d-inline-block w-75 align-self-end" style="transform: rotate(5deg); box-shadow: 1px 1px 1px rgba(0,0,0,0.3);">
  107.                     <img
  108.                        class="w-100"
  109.                        src="https://i.imgur.com/uTdgeyc.png"
  110.                        style="height: 220px; object-fit: cover; object-position: center center;"
  111.                    >
  112.                     <p class="mt-1">Caption ♥</p>
  113.                 </div>
  114.                
  115.                 <!-- POLAROID 2 -->
  116.                 <div id="POLAROID-2" class="p-2 bg-white d-inline-block align-self-start w-75" style="transform: rotate(-3deg); margin-right: 30px; box-shadow: 1px 1px 1px rgba(0,0,0,0.3);">
  117.                    
  118.                     <!-- ROUND STICKER -->
  119.                     <div id="ROUND-STICKER" class="rounded-circle d-flex justify-content-center align-items-center text-center text-white" style="background-color: #5d9cac; position: absolute; width: 110px; height: 110px; right: -90px; top: -20px; font-family: Mistral, Monotype Corsiva, serif; font-size: x-large; transform: rotate(15deg); line-height: 1em; z-index: 3; box-shadow: 1px 1px 1px rgba(0,0,0,0.3); background-image: url(https://i.imgur.com/kbVBAlq.png); background-size: cover;">
  120.                         You can<br>do it!
  121.                     </div>
  122.                    
  123.                     <img class="w-100" src="https://i.imgur.com/IhRjpfl.jpg"
  124.                        style="height: 220px; object-fit: cover; object-position: center 70%;"
  125.                    >
  126.                    
  127.                     <p class="text-right mt-1">Caption!</p>
  128.                    
  129.                     <!-- STICKER BOTTOM CENTER -->
  130.                     <img id="STICKER-BOTTOM-CENTER" style="position: absolute; left: -40px; bottom: -20px; width: 90px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));" src="https://images.emojiterra.com/google/noto-emoji/v2.034/128px/1f9ed.png">
  131.                 </div>
  132.             </div>
  133.            
  134.         </div>
  135.     </div>
  136.    
  137. </div>
  138.  
  139.  
  140. <a style="position:absolute;bottom:5px;right:5px;font-size:10pt;color:navy;" href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-">Theme by Circlejourney</a>
  141.  
  142. </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!