API tools faq
paste
Advertisement
CrispinAsheYA

Explore OC's Bedroom! (1.1)

CrispinAsheYA
Nov 17th, 2023
1,169
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.02 KB | Source Code | 0 0
raw download clone embed print report
  1. <!-- PLEASE SEE HERE FOR MY CODE RULES: https://toyhou.se/12931952.bonus-content/17098747.03-terms-of-service --
  2.  
  3. Version: 1.1 - Made mobile friendlier
  4.  
  5. Default Colours
  6. -Text White: #FFFFFF
  7. -Border Black: #000000
  8.  
  9. Scroll To The Bottom for every single "Find & Replace" Variable! (Feel free to move to the top when you turn this into a personal template, I just keep it at the bottom for organisation.)
  10.  
  11. Thank you for reading!
  12. Crispin
  13.  
  14. -->
  15.  
  16. <!-- Start Image & Icons -->
  17. <div style="text-align:center; position:relative;">
  18.  
  19.   <!-- Bedroom Image -->
  20.   <img src="[IMGBACKGROUND]" style="width:100%; height:auto;">
  21.  
  22.   <!-- Start Star Placements -->
  23.   <ul class="nav">
  24.     <li class="nav-item border-0"><a href="#point1" class="nav-link" data-toggle="tab" style="position:absolute; top:15%; left:35%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  25.     <li class="nav-item border-0"><a href="#point2" class="nav-link" data-toggle="tab" style="position:absolute; top:40%; left:38%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  26.     <li class="nav-item border-0"><a href="#point3" class="nav-link" data-toggle="tab" style="position:absolute; top:20%; left:40%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  27.     <li class="nav-item border-0"><a href="#point4" class="nav-link" data-toggle="tab" style="position:absolute; top:0%; left:48%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  28.     <li class="nav-item border-0"><a href="#point5" class="nav-link" data-toggle="tab" style="position:absolute; top:20%; left:48%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  29.     <li class="nav-item border-0"><a href="#point6" class="nav-link" data-toggle="tab" style="position:absolute; top:0%; right:35%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  30.     <li class="nav-item border-0"><a href="#point7" class="nav-link" data-toggle="tab" style="position:absolute; top:5%; right:25%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  31.     <li class="nav-item border-0"><a href="#point8" class="nav-link" data-toggle="tab" style="position:absolute; top:40%; right:25%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  32.     <li class="nav-item border-0"><a href="#point9" class="nav-link" data-toggle="tab" style="position:absolute; bottom:10%; right:10%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  33.     <li class="nav-item border-0"><a href="#point10" class="nav-link" data-toggle="tab" style="position:absolute; bottom:10%; right:25%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  34.     <li class="nav-item border-0"><a href="#point11" class="nav-link" data-toggle="tab" style="position:absolute; bottom:10%; right:35%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  35.     <li class="nav-item border-0"><a href="#point12" class="nav-link" data-toggle="tab" style="position:absolute; bottom:10%; left:10%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  36.     <li class="nav-item border-0"><a href="#point13" class="nav-link" data-toggle="tab" style="position:absolute; bottom:30%; left:15%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  37.     <li class="nav-item border-0"><a href="#point14" class="nav-link" data-toggle="tab" style="position:absolute; bottom:45%; left:20%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  38.     <li class="nav-item border-0"><a href="#point15" class="nav-link" data-toggle="tab" style="position:absolute; bottom:45%; left:30%; font-size:1.5rem; color:#FFFFFF;"><i class="fas fa-star"></i></a></li>
  39.   </ul>
  40.   <!-- End Star Placements -->
  41.  
  42. </div>
  43. <!-- End Image & Icons -->
  44.  
  45. <!-- Start Descriptions -->
  46. <div class="tab-content p-2">
  47.  
  48.   <div class="tab-pane fade bg-dark p-3" id="point1" style="border:#000000 8px solid;">
  49.     <p>[DESCRIPTION]</p>
  50.   </div>
  51.  
  52.   <div class="tab-pane fade bg-dark p-3" id="point2" style="border:#000000 8px solid;">
  53.     <p>[DESCRIPTION]</p>
  54.   </div>
  55.  
  56.   <div class="tab-pane fade bg-dark p-3" id="point3" style="border:#000000 8px solid;">
  57.     <p>[DESCRIPTION]</p>
  58.   </div>
  59.  
  60.   <div class="tab-pane fade bg-dark p-3" id="point4" style="border:#000000 8px solid;">
  61.     <p>[DESCRIPTION]</p>
  62.   </div>
  63.  
  64.   <div class="tab-pane fade bg-dark p-3" id="point5" style="border:#000000 8px solid;">
  65.     <p>[DESCRIPTION]</p>
  66.   </div>
  67.  
  68.   <div class="tab-pane fade bg-dark p-3" id="point6" style="border:#000000 8px solid;">
  69.     <p>[DESCRIPTION]</p>
  70.   </div>
  71.  
  72.   <div class="tab-pane fade bg-dark p-3" id="point7" style="border:#000000 8px solid;">
  73.     <p>[DESCRIPTION]</p>
  74.   </div>
  75.  
  76.   <div class="tab-pane fade bg-dark p-3" id="point8" style="border:#000000 8px solid;">
  77.     <p>[DESCRIPTION]</p>
  78.   </div>
  79.  
  80.   <div class="tab-pane fade bg-dark p-3" id="point9" style="border:#000000 8px solid;">
  81.     <p>[DESCRIPTION]</p>
  82.   </div>
  83.  
  84.   <div class="tab-pane fade bg-dark p-3" id="point10" style="border:#000000 8px solid;">
  85.     <p>[DESCRIPTION]</p>
  86.   </div>
  87.  
  88.   <div class="tab-pane fade bg-dark p-3" id="point11" style="border:#000000 8px solid;">
  89.     <p>[DESCRIPTION]</p>
  90.   </div>
  91.  
  92.   <div class="tab-pane fade bg-dark p-3" id="point12" style="border:#000000 8px solid;">
  93.     <p>[DESCRIPTION]</p>
  94.   </div>
  95.  
  96.   <div class="tab-pane fade bg-dark p-3" id="point13" style="border:#000000 8px solid;">
  97.     <p>[DESCRIPTION]</p>
  98.   </div>
  99.  
  100.   <div class="tab-pane fade bg-dark p-3" id="point14" style="border:#000000 8px solid;">
  101.     <p>[DESCRIPTION]</p>
  102.   </div>
  103.  
  104.   <div class="tab-pane fade bg-dark p-3" id="point15" style="border:#000000 8px solid;">
  105.     <p>[DESCRIPTION]</p>
  106.   </div>
  107.  
  108. </div>
  109. <!-- End Descriptions -->
  110.  
  111. <!-- CREDIT, DO NOT REMOVE -->
  112. <p class="text-center"><a href="https://toyhou.se/24397532.explore-ocs-bedroom"><i class="fas fa-code"></i> Code by TomcatCodes / CrispinAsheYA <i class="fas fa-code"></i></a></p>
  113.  
  114. <!--
  115. [IMGBACKGROUND] | [DESCRIPTION]
  116. -->
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!