API tools faq
paste
Advertisement
LivvyAh

MODULAR: REALLY think 1.0-ReColor

LivvyAh
May 13th, 2022
57
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.51 KB | None | 0 0
raw download clone embed print report
  1. <!-- TELL US WHAT YOU REALLY THINK START
  2. Have you guys ever looked at the link section toyhouse has?
  3. It's really neat but I sure as hell don't click on it.
  4.  
  5. So here's another relationship module that emulates that. But I'm sure you could find some wild uses for this. Like a inventory.
  6.  
  7. You could theoretically treat this like a tabs module and throw the other modules in here but it will look dumb! This is also the least mobile friendly module so far.
  8.  
  9. Make sure to keep your cirectory numbers straight. You need to update
  10. v-pills-1-tab
  11. #v-pills-1
  12. v-pills-1
  13. In both the navigation and the content sections.
  14. I suggest adding tabs as you go instead of up front so you don't miss any and start pulling your hair out.
  15. -->
  16. <div class="row p-2">
  17. <!-- NAVIGATION START -->
  18. <div class="col-xl-2 col-l-2 col-md-12 col-s-12 col-xs-12 p-2" style="background: url(IMG HERE);
  19. background-size: cover;
  20. background-position: center;
  21. background-attachment: fixed;">
  22. <div class="nav flex-column nav-items" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  23. <!-- These are the buttons, there is no limit except for when you think it's getting stupidly long! -->
  24. <a class="nav-link active text-uppercase " id="v-pills-1-tab" data-toggle="pill" href="#v-pills-1"
  25. role="tab" aria-controls="v-pills-1" aria-selected="true"
  26. style="letter-spacing:3px; background-color:#F1DAC4;color:#0D0C1D">Q&A</a>
  27.  
  28.  
  29. <a class="nav-link text-uppercase " id="v-pills-2-tab" data-toggle="pill" href="#v-pills-2" role="tab"
  30. aria-controls="v-pills-2" aria-selected="false"
  31. style="letter-spacing:3px;background-color:#F1DAC4;color:#0D0C1D">CONVO</a>
  32.  
  33.  
  34. <a class="nav-link text-uppercase " id="v-pills-3-tab" data-toggle="pill" href="#v-pills-3" role="tab"
  35. aria-controls="v-pills-3" aria-selected="false"
  36. style="letter-spacing:3px;background-color:#F1DAC4;color:#0D0C1D">ITEMS</a>
  37.  
  38.  
  39. <!--Buttons end here-->
  40. </div>
  41. </div>
  42. <!-- NAVIGATION END -->
  43. <!-- CONTENT START-->
  44. <div class="col-xl-10 col-l-10 col-md-12 col-s-12 col-xs-12 p-3" style="background: url(IMG HERE);
  45. background-size: cover;
  46. background-position: center;
  47. background-attachment: fixed;">
  48. <div class="tab-content" id="v-pills-tabContent">
  49.  
  50. <!--OPINION 1 START-->
  51. <div class="tab-pane fade show active" id="v-pills-1" role="tabpanel" aria-labelledby="v-pills-1-tab">
  52.  
  53. <div class="row">
  54.  
  55. <!-- QUESTION START-->
  56. <div class="col-12 p-2">
  57. <div class="p-3 text-center" style="background-color:#E1DDE3">
  58. <div class="p-0 font-italic" style="letter-spacing:3px; font-size:15px; color:#0D0C1D;">
  59. <p>"Question?"
  60. </p>
  61. </div>
  62. </div>
  63. </div>
  64. <!-- QUESTION END-->
  65. <!-- C RESPONSE START-->
  66. <div class="col-12 p-2">
  67. <div class=" p-3" style="background-color:#F1DAC4;color:#161B33">
  68.  
  69. <div class="table-responsive p-1">
  70. <p>Narration
  71. </p>
  72. </div>
  73. </div>
  74. </div>
  75. <!-- C RESPONSE END-->
  76. <!-- L PICTURE START
  77. Picture will only be as wide as the box is, but it can be as tall as you want! Fpr better or worse...-->
  78. <div class="col-3 p-2">
  79. <div class=" p-3 text-center" style="background-color:#F1DAC4;">
  80. <img src="IMG HERE">
  81. </div>
  82. </div>
  83. <!-- L PICTURE END-->
  84. <!-- R RESPONSE START-->
  85. <div class="col-9 p-2">
  86. <div class=" p-3" style="background-color:#F1DAC4;color:#161B33">
  87.  
  88. <div class="table-responsive p-1">
  89. <p>"Character response"
  90. </p>
  91. <!-- SYMBOLIC START
  92.  
  93. These symbols are all fontawesome icons, so you're welcome to change them.
  94.  
  95. These share hex codes with the ultimate basics module as an fyi! So if you ctrl+f replace all these will change too.
  96.  
  97. Change fas to far or vice versa to fill and unfill.
  98.  
  99. There are lots of animation options to get that visual novel feel, check them out here:
  100. https://fontawesome.com/docs/web/style/animate-->
  101. <div class="text-right">
  102. <i class="fas fa-droplet fa-bounce" style="color:#161B33;font-size:15px;"></i>
  103. </div>
  104. <!--SYMBOLIC END-->
  105. </div>
  106. </div>
  107. </div>
  108. <!-- R RESPONSE END-->
  109. <!-- L SPACER START-->
  110. <div class="col-3 p-2">
  111. <div class=" p-3">
  112. </div>
  113. </div>
  114. <!-- L SPACER END-->
  115. <!-- R RESPONSE START-->
  116. <div class="col-9 p-2">
  117. <div class=" p-3" style="background-color:#F1DAC4;color:#161B33">
  118.  
  119. <div class="table-responsive p-1">
  120. <p>"Answer 2"
  121. </p>
  122. <!-- SYMBOLIC START-->
  123. <div class="text-right">
  124. <i class="fas fa-question fa-flip" style="color:#161B33;font-size:15px;"></i>
  125. </div>
  126. <!--SYMBOLIC END-->
  127. </div>
  128. </div>
  129. </div>
  130. <!-- R RESPONSE END-->
  131. <!-- CAPTIONED PHOTO START-->
  132. <div class="col-12 p-2">
  133. <div class="text-center p-3" style="background-color:#F1DAC4;color:#161B33">
  134. <img src="IMG HERE">
  135. <div class="table-responsive p-1 font-italic">
  136. <p>Caption
  137. </p>
  138. </div>
  139. </div>
  140. </div>
  141. <!-- CAPTIONED PHOTO END-->
  142. </div>
  143.  
  144.  
  145. </div>
  146. <!--OPINION 1 END-->
  147. <!--OPINION 2 START-->
  148. <div class="tab-pane fade" id="v-pills-2" role="tabpanel" aria-labelledby="v-pills-2-tab">
  149.  
  150. <div class="row">
  151.  
  152. <!-- QUESTION START-->
  153. <div class="col-12 p-2">
  154. <div class="p-3 text-center" style="background-color:#E1DDE3">
  155. <div class="p-0 font-italic" style="letter-spacing:3px; font-size:15px; color:#0D0C1D;">
  156. <p>Character 1 & Character 2
  157. </p>
  158. </div>
  159. </div>
  160. </div>
  161. <!-- QUESTION END-->
  162. <!-- L PICTURE START
  163. Picture will only be as wide as the box is, but it can be as tall as you want! Fpr better or worse...-->
  164. <div class="col-3 p-2">
  165. <div class=" p-3 text-center" style="background-color:#F1DAC4;">
  166. <img src="IMG HERE">
  167. </div>
  168. </div>
  169. <!-- L PICTURE END-->
  170. <!-- R RESPONSE START-->
  171. <div class="col-9 p-2">
  172. <div class=" p-3" style="background-color:#F1DAC4;color:#161B33">
  173.  
  174. <div class="table-responsive p-1">
  175. <p>"Character 1 response"
  176. </p>
  177. <!-- SYMBOLIC START
  178.  
  179. These symbols are all fontawesome icons, so you're welcome to change them.
  180.  
  181. These share hex codes with the ultimate basics module as an fyi! So if you ctrl+f replace all these will change too.
  182.  
  183. Change fas to far or vice versa to fill and unfill.-->
  184. <div class="text-right">
  185. <i class="far fa-heart-crack" style="color:#130205;"></i>
  186. <i class="fas fa-heart" style="color:#EE4266;"></i>
  187. <i class="fas fa-heart" style="color:#EE4266;"></i>
  188. <i class="fas fa-heart" style="color:#EE4266;"></i>
  189. </div>
  190. <!--SYMBOLIC END-->
  191. </div>
  192. </div>
  193. </div>
  194. <!-- R RESPONSE END-->
  195. <!-- L RESPONSE START-->
  196. <div class="col-9 p-2">
  197. <div class=" p-3" style="color:#161B33; background-color:#E1DDE3;">
  198.  
  199. <div class="table-responsive p-1">
  200. <p>"Character 2 response"
  201. </p>
  202. <!-- SYMBOLIC START-->
  203. <div class="text-right">
  204. <i class="far fa-heart-crack" style="color:#130205;"></i>
  205. <i class="fas fa-heart" style="color:#EE4266;"></i>
  206. <i class="fas fa-heart" style="color:#EE4266;"></i>
  207. <i class="fas fa-heart" style="color:#EE4266;"></i>
  208. </div>
  209. <!--SYMBOLIC END-->
  210. </div>
  211. </div>
  212. </div>
  213. <!-- L RESPONSE END-->
  214. <!-- R PICTURE START
  215. Links to the other character!-->
  216. <div class="col-3 p-2">
  217. <div class=" p-3 text-center" style="color:#161B33; background-color:#E1DDE3;">
  218. <a
  219. href="URL HERE"><img src="IMG HERE"></a>
  220. </div>
  221. </div>
  222. <!-- R PICTURE END-->
  223. </div>
  224. </div>
  225. <!--OPINION 2 END-->
  226.  
  227. <!--OPINION 3 START-->
  228. <div class="tab-pane fade" id="v-pills-3" role="tabpanel" aria-labelledby="v-pills-3-tab">
  229.  
  230. <div class="row">
  231.  
  232. <!-- QUESTION START-->
  233. <div class="col-12 p-2">
  234. <div class=" p-3 text-center" style="background-color:#E1DDE3">
  235. <div class="p-0 font-italic"
  236. style="letter-spacing:3px; font-size:15px; color:#0D0C1D;">
  237. <p>Inventory
  238. </p>
  239. </div>
  240. </div>
  241. </div>
  242. <!-- QUESTION END-->
  243. <!-- L PICTURE START
  244. Picture will only be as wide as the box is, but it can be as tall as you want! Fpr better or worse...-->
  245. <div class="col-3 p-2">
  246. <div class=" p-3 text-center" style="background-color:#F1DAC4;">
  247. <img src="IMG HERE">
  248. </div>
  249. </div>
  250. <!-- L PICTURE END-->
  251. <!-- R RESPONSE START-->
  252. <div class="col-9 p-2">
  253. <div class=" p-3" style="background-color:#F1DAC4;">
  254. <div class="text-uppercase d-flex justify-content-between"
  255. style="letter-spacing:3px; font-size:20px; color:#0D0C1D;">
  256. ITEM NAME
  257. </div>
  258. <hr style="border-color: #474973;" class="w-100">
  259. <div class="table-responsive p-1" style="color:#161B33">
  260. <p>Item desc.
  261. </p>
  262. <!-- SYMBOLIC START
  263.  
  264. These symbols are all fontawesome icons, so you're welcome to change them.
  265.  
  266. These share hex codes with the ultimate basics module as an fyi! So if you ctrl+f replace all these will change too. Specifically the box colors.
  267.  
  268. Change fas to far or vice versa to fill and unfill.-->
  269. <div class="text-right">
  270. <i class="far fa-star" style="color:#3FA2F3;"></i>
  271. <i class="fas fa-star" style="color:#0D7AD3;"></i>
  272. <i class="fas fa-star" style="color:#0D7AD3;"></i>
  273. <i class="fas fa-star" style="color:#0D7AD3;"></i>
  274. </div>
  275. <!--SYMBOLIC END-->
  276. </div>
  277. </div>
  278. </div>
  279. <!-- R RESPONSE END-->
  280. <!-- L RESPONSE START-->
  281. <div class="col-9 p-2">
  282. <div class="p-3" style="background-color:#E1DDE3">
  283. <div class="text-uppercase d-flex justify-content-between"
  284. style="letter-spacing:3px; font-size:20px; color:#0D0C1D">
  285. OR maybe a spell name?
  286. </div>
  287. <hr style="border-color: #474973;" class="w-100">
  288. <div class="table-responsive p-1" style="color:#161B33">
  289. <p>Description
  290. </p>
  291. <!-- SYMBOLIC START-->
  292. <div class="text-right">
  293. <i class="far fa-star" style="color:#3FA2F3;"></i>
  294. <i class="fas fa-star" style="color:#0D7AD3;"></i>
  295. <i class="fas fa-star" style="color:#0D7AD3;"></i>
  296. <i class="fas fa-star" style="color:#0D7AD3;"></i>
  297. </div>
  298. <!--SYMBOLIC END-->
  299. </div>
  300. </div>
  301. </div>
  302. <!-- L RESPONSE END-->
  303. <!-- R PICTURE START
  304. Links to the other character!-->
  305. <div class="col-3 p-2">
  306. <div class=" p-3 text-center"><img src="IMG HERE">
  307. </div>
  308. </div>
  309. <!-- R PICTURE END-->
  310. </div>
  311. </div>
  312. <!--OPINION 3 END-->
  313.  
  314. <!--Add more opinions before here.-->
  315. </div>
  316. </div>
  317. </div>
  318. <!-- CONTENT END-->
  319. <!-- TELL US WHAT YOU REALLY THINK END -->
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!