API tools faq
paste
xaandiir

[TH FREEBIE] Other | AU Navigation {CUSTOM COLORS}

xaandiir
Dec 17th, 2021 (edited)
97
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.09 KB | None | 0 0
raw download clone embed print report
  1. <!--- Other | AU Navigation by xaandiir ---
  2.  --- Edit at your own risk. --------------
  3.  
  4.  --- Default Colors Used: ---------------
  5.  --- BG:               #fff -------------
  6.  --- Button BG         #9C9C9C ----------
  7.  --- Button Outline:   #000 -------------
  8.  --- Inner BG:         #DADADA ----------
  9.  --- Title Color:      #838383 ----------
  10.  --- Subtitle Color:   #A5A5A5 ----------
  11.  --- Text Color:       #000 -------------
  12.  
  13.  --- You can either have a bg color or a bg image. The image needs to be transparent if you want to use both. --->
  14.  
  15.  
  16. <div class="container-flluid" style="background: #fff;">
  17.     <div class="card-block text-center" id="top">
  18.         <!--- NAVIGATION TO EACH BLOCK. COPY/PAST FOR MORE JUMPS --->
  19.         <a class="btn btn-primary m-1" href="#AU_ID1" style="background: #9C9C9C; border-color: #000;">AU_NAME</a>
  20.         <a class="btn btn-primary m-1" href="#AU_ID2" style="background: #9C9C9C; border-color: #000;">AU_NAME</a>
  21.     </div>
  22.     <div class="container">
  23.        
  24.        
  25.         <!--- vvvv COPY/PASTE FOR NEW BLOCKS vvvv --->
  26.             <!--- CHANGE BACKGROUND IMAGE OR COLOR --->
  27.         <div class="container pb-4 p-2 shadow" id="AU_ID1" style="background-image: url(#); background-color: #DADADA;">
  28.             <div class="row no-gutters justify-content-center">
  29.                 <div class="col-md-5 col-12">
  30.                     <!--- BG COLOR OF LEFT COLUMN --->
  31.                     <div class="card h-100 m-2 border-0" style="background-color: rgba(255, 255, 255, 0.5);">
  32.                         <div class="card-block h-100 mr-3 ml-3 align-items-center">
  33.                             <!--- HREF = LINK TO AU --->
  34.                             <a href="#" class="stretched-link"></a>
  35.                             <!--- CHANGE IMAGE --->
  36.                             <img src="IMG_URL" />
  37.                         </div>
  38.                     </div>
  39.                 </div>
  40.                 <!--- COLOR = DEFAULT TEXT COLOR --->
  41.                 <div class="col-md-7 col-12" style="color: #000;">
  42.                     <!--- BG COLOR OF RIGHT COLUMN --->
  43.                     <div class="card border-0 p-1 m-2 h-100 align-items-center justify-content-center" style="background-color: rgba(255,255,255,0.5); min-height: 500px;">
  44.                         <h2 class="display-2 text-center" style="font-variant: small-caps; font-size: 36pt;">
  45.                             <!--- HREF = LINK TO AU. CHANGE NAME --->
  46.                             <a href="#" style="color: #838383;">Universe Title</a>
  47.                         </h2>
  48.                         <!--- ADJECTIVES --->
  49.                         <h3 class="display-3 text-center" style="text-transform: lowercase; font-size: 14pt; color: #A5A5A5;">adjective • adjective • adjective</h3>
  50.                         <!--- BLURB --->
  51.                         <div class="card text-center p-2 m-3" style="max-width: 80%; min-width: 60%; background: #fff; border-width: 1px; border-color: #000;">
  52.                             <p>This is a blurb about the AU.</p>
  53.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  54.                         </div>
  55.                         <div class="row no-gutters">
  56.                             <!--- AESTHETIC IMAGES --->
  57.                             <div class="col-md-3 col-6 p-1">
  58.                                 <div class="card" style="background-image: url(#); background-repeat: no-repeat; background-size: cover; background-position: center; border-width: 2px; border-radius: 20px; border-color: #fff; height: 120px; width: 120px;"></div>
  59.                             </div>
  60.                             <div class="col-md-3 col-6 p-1">
  61.                                 <div class="card" style="background-image: url(#); background-repeat: no-repeat; background-size: cover; background-position: center; border-width: 2px; border-radius: 20px; border-color: #fff; height: 120px; width: 120px;"></div>
  62.                             </div>
  63.                             <div class="col-md-3 col-6 p-1">
  64.                                 <div class="card" style="background-image: url(#); background-repeat: no-repeat; background-size: cover; background-position: center; border-width: 2px; border-radius: 20px; border-color: #fff; height: 120px; width: 120px;"></div>
  65.                             </div>
  66.                             <div class="col-md-3 col-6 p-1">
  67.                                 <div class="card" style="background-image: url(#); background-repeat: no-repeat; background-size: cover; background-position: center; border-width: 2px; border-radius: 20px; border-color: #fff; height: 120px; width: 120px;"></div>
  68.                             </div>
  69.                         </div>
  70.                         <div class="card text-center p-1 m-3" style="width: 90%; border-color: #000; background: #fff;">
  71.                             <!--- BOTTOM QUOTE --->
  72.                             <h3 class="display-3 text-center" style="font-size: 14pt; color: #000; font-variant: small-caps;">
  73.                                 CHANGE_QUOTE
  74.                             </h3>
  75.                         </div>
  76.                     </div>
  77.                 </div>
  78.             </div>
  79.         </div>
  80.         <!--- THIS BUTTON BRINGS YOU TO THE TOP OF THE PAGE. DON'T EDIT. --->
  81.         <div class="row no-gutters">
  82.             <div class="col-12 text-right" style="padding-top: 10px; padding-bottom: 10px;">
  83.                 <a class="btn btn-primary m-1" href="#top" style="background: #9C9C9C; border-color: #000;"><i class="fas fa-arrow-up" style="text-size: 9px;"></i></a></a>
  84.             </div>
  85.         </div>
  86.         <!--- ^^^^ COPY/PASTE FOR EACH BLOCK ^^^^ --->
  87.        
  88.        
  89.             <!--- CHANGE BACKGROUND IMAGE OR COLOR --->
  90.         <div class="container pb-4 p-2 shadow" id="AU_ID2" style="background-image: url(#); background-color: #DADADA;">
  91.             <div class="row no-gutters justify-content-center">
  92.                 <div class="col-md-5 col-12">
  93.                     <!--- BG COLOR OF LEFT COLUMN --->
  94.                     <div class="card h-100 m-2 border-0" style="background-color: rgba(255, 255, 255, 0.5);">
  95.                         <div class="card-block h-100 mr-3 ml-3 align-items-center">
  96.                             <!--- HREF = LINK TO AU --->
  97.                             <a href="#" class="stretched-link"></a>
  98.                             <!--- CHANGE IMAGE --->
  99.                             <img src="IMG_URL" />
  100.                         </div>
  101.                     </div>
  102.                 </div>
  103.                 <!--- COLOR = DEFAULT TEXT COLOR --->
  104.                 <div class="col-md-7 col-12" style="color: #000;">
  105.                     <!--- BG COLOR OF RIGHT COLUMN --->
  106.                     <div class="card border-0 p-1 m-2 h-100 align-items-center justify-content-center" style="background-color: rgba(255,255,255,0.5); min-height: 500px;">
  107.                         <h2 class="display-2 text-center" style="font-variant: small-caps; font-size: 36pt;">
  108.                             <!--- HREF = LINK TO AU. CHANGE NAME --->
  109.                             <a href="#" style="color: #838383;">Universe Title</a>
  110.                         </h2>
  111.                         <!--- ADJECTIVES --->
  112.                         <h3 class="display-3 text-center" style="text-transform: lowercase; font-size: 14pt; color: #A5A5A5;">adjective • adjective • adjective</h3>
  113.                         <!--- BLURB --->
  114.                         <div class="card text-center p-2 m-3" style="max-width: 80%; min-width: 60%; background: #fff; border-width: 1px; border-color: #000;">
  115.                             <p>This is a blurb about the AU.</p>
  116.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  117.                         </div>
  118.                         <div class="row no-gutters">
  119.                             <!--- AESTHETIC IMAGES --->
  120.                             <div class="col-md-3 col-6 p-1">
  121.                                 <div class="card" style="background-image: url(#); background-repeat: no-repeat; background-size: cover; background-position: center; border-width: 2px; border-radius: 20px; border-color: #fff; height: 120px; width: 120px;"></div>
  122.                             </div>
  123.                             <div class="col-md-3 col-6 p-1">
  124.                                 <div class="card" style="background-image: url(#); background-repeat: no-repeat; background-size: cover; background-position: center; border-width: 2px; border-radius: 20px; border-color: #fff; height: 120px; width: 120px;"></div>
  125.                             </div>
  126.                             <div class="col-md-3 col-6 p-1">
  127.                                 <div class="card" style="background-image: url(#); background-repeat: no-repeat; background-size: cover; background-position: center; border-width: 2px; border-radius: 20px; border-color: #fff; height: 120px; width: 120px;"></div>
  128.                             </div>
  129.                             <div class="col-md-3 col-6 p-1">
  130.                                 <div class="card" style="background-image: url(#); background-repeat: no-repeat; background-size: cover; background-position: center; border-width: 2px; border-radius: 20px; border-color: #fff; height: 120px; width: 120px;"></div>
  131.                             </div>
  132.                         </div>
  133.                         <div class="card text-center p-1 m-3" style="width: 90%; border-color: #000; background: #fff;">
  134.                             <!--- BOTTOM QUOTE --->
  135.                             <h3 class="display-3 text-center" style="font-size: 14pt; color: #000; font-variant: small-caps;">
  136.                                 CHANGE_QUOTE
  137.                             </h3>
  138.                         </div>
  139.                     </div>
  140.                 </div>
  141.             </div>
  142.         </div>
  143.         <!--- THIS BUTTON BRINGS YOU TO THE TOP OF THE PAGE. DON'T EDIT. --->
  144.         <div class="row no-gutters">
  145.             <div class="col-12 text-right" style="padding-top: 10px; padding-bottom: 10px;">
  146.                 <a class="btn btn-primary m-1" href="#top" style="background: #9C9C9C; border-color: #000;"><i class="fas fa-arrow-up" style="text-size: 9px;"></i></a></a>
  147.             </div>
  148.         </div>
  149.     </div>
  150. </div>
  151. <!--- CREDIT. DO NOT EDIT. --->
  152. <p class="text-right"><small class="text-primary">Code by @xaandiircodes</small></p>
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!