API tools faq
paste
LivvyAh

MODULAR: REALLY think 1.0

LivvyAh
May 13th, 2022 (edited)
53
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.23 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 directory 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 text-light bg-dark" id="v-pills-1-tab" data-toggle="pill"
  25. href="#v-pills-1" role="tab" aria-controls="v-pills-1" aria-selected="true"
  26. style="letter-spacing:3px;">Q&A</a>
  27.  
  28.  
  29. <a class="nav-link text-uppercase text-light bg-dark" id="v-pills-2-tab" data-toggle="pill"
  30. href="#v-pills-2" role="tab" aria-controls="v-pills-2" aria-selected="false"
  31. style="letter-spacing:3px;">CONVO</a>
  32.  
  33.  
  34. <a class="nav-link text-uppercase text-light bg-dark" id="v-pills-3-tab" data-toggle="pill"
  35. href="#v-pills-3" role="tab" aria-controls="v-pills-3" aria-selected="false"
  36. style="letter-spacing:3px;">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="text-light bg-dark p-3 text-center">
  58. <div class="p-0 font-italic" style="letter-spacing:3px; font-size:15px;">
  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="text-light bg-dark p-3">
  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! For better or worse...-->
  78. <div class="col-3 p-2">
  79. <div class="text-light bg-dark p-3 text-center">
  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="text-light bg-dark p-3">
  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. If you want the symbols to be a different color change the info part of
  96. text-info
  97. to one of the values found here:
  98. https://toyhou.se/2621177.
  99.  
  100. Change fas to far or vice versa to fill and unfill.
  101.  
  102. There are lots of animation options to get that visual novel feel, check them out here:
  103. https://fontawesome.com/docs/web/style/animate-->
  104. <div class="text-right">
  105. <i class="fas fa-droplet fa-bounce text-info"></i>
  106. </div>
  107. <!--SYMBOLIC END-->
  108.  
  109. </div>
  110. </div>
  111. </div>
  112. <!-- R RESPONSE END-->
  113. <!-- L SPACER START-->
  114. <div class="col-3 p-2">
  115. <div class="text-light p-3">
  116. </div>
  117. </div>
  118. <!-- L SPACER END-->
  119. <!-- R RESPONSE START-->
  120. <div class="col-9 p-2">
  121. <div class="text-light bg-dark p-3">
  122.  
  123. <div class="table-responsive p-1">
  124. <p>"Answer 2"
  125. </p>
  126. <!-- SYMBOLIC START-->
  127. <div class="text-right">
  128. <i class="fas fa-question fa-flip text-info"></i>
  129. </div>
  130. <!--SYMBOLIC END-->
  131. </div>
  132. </div>
  133. </div>
  134. <!-- R RESPONSE END-->
  135. <!-- CAPTIONED PHOTO START-->
  136. <div class="col-12 p-2">
  137. <div class="text-light text-center bg-dark p-3">
  138. <img src="IMG HERE">
  139. <div class="table-responsive p-1 font-italic">
  140. <p>Caption
  141. </p>
  142. </div>
  143. </div>
  144. </div>
  145. <!-- CAPTIONED PHOTO END-->
  146. </div>
  147.  
  148.  
  149. </div>
  150. <!--OPINION 1 END-->
  151. <!--OPINION 2 START-->
  152. <div class="tab-pane fade" id="v-pills-2" role="tabpanel" aria-labelledby="v-pills-2-tab">
  153.  
  154. <div class="row">
  155.  
  156. <!-- QUESTION START-->
  157. <div class="col-12 p-2">
  158. <div class="text-light bg-dark p-3 text-center">
  159. <div class="p-0 font-italic" style="letter-spacing:3px; font-size:15px;">
  160. <p>Character 1 & Character 2
  161. </p>
  162. </div>
  163. </div>
  164. </div>
  165. <!-- QUESTION END-->
  166. <!-- L PICTURE START
  167. Picture will only be as wide as the box is, but it can be as tall as you want! Fpr better or worse...-->
  168. <div class="col-3 p-2">
  169. <div class="text-light bg-dark p-3 text-center">
  170. <img src="IMG HERE">
  171. </div>
  172. </div>
  173. <!-- L PICTURE END-->
  174. <!-- R RESPONSE START-->
  175. <div class="col-9 p-2">
  176. <div class="text-light bg-dark p-3">
  177.  
  178. <div class="table-responsive p-1">
  179. <p>"Character 1 response"
  180. </p>
  181. <!-- SYMBOLIC START-->
  182. <div class="text-right">
  183. <i class="far fa-heart-crack text-muted"></i>
  184. <i class="fas fa-heart text-danger"></i>
  185. <i class="fas fa-heart text-danger"></i>
  186. <i class="fas fa-heart text-danger"></i>
  187. </div>
  188. <!--SYMBOLIC END-->
  189. </div>
  190. </div>
  191. </div>
  192. <!-- R RESPONSE END-->
  193. <!-- L RESPONSE START-->
  194. <div class="col-9 p-2">
  195. <div class="text-light bg-dark p-3">
  196.  
  197. <div class="table-responsive p-1">
  198. <p>"Character 2 response."
  199. </p>
  200. <!-- SYMBOLIC START-->
  201. <div class="text-right">
  202. <i class="far fa-heart-crack text-muted"></i>
  203. <i class="fas fa-heart text-danger"></i>
  204. <i class="fas fa-heart text-danger"></i>
  205. <i class="fas fa-heart text-danger"></i>
  206. </div>
  207. <!--SYMBOLIC END-->
  208. </div>
  209. </div>
  210. </div>
  211. <!-- L RESPONSE END-->
  212. <!-- R PICTURE START
  213. Links to the other character!-->
  214. <div class="col-3 p-2">
  215. <div class="text-light bg-dark p-3 text-center">
  216. <a
  217. href="URL HERE"><img src="IMG HERE"></a>
  218. </div>
  219. </div>
  220. <!-- R PICTURE END-->
  221. </div>
  222. </div>
  223. <!--OPINION 2 END-->
  224.  
  225. <!--OPINION 3 START-->
  226. <div class="tab-pane fade" id="v-pills-3" role="tabpanel" aria-labelledby="v-pills-3-tab">
  227.  
  228. <div class="row">
  229.  
  230. <!-- QUESTION START-->
  231. <div class="col-12 p-2">
  232. <div class="text-light bg-dark p-3 text-center">
  233. <div class="p-0 font-italic" style="letter-spacing:3px; font-size:15px;">
  234. <p>Inventory
  235. </p>
  236. </div>
  237. </div>
  238. </div>
  239. <!-- QUESTION END-->
  240. <!-- L PICTURE START
  241. Picture will only be as wide as the box is, but it can be as tall as you want! Fpr better or worse...-->
  242. <div class="col-3 p-2">
  243. <div class="text-light bg-dark p-3 text-center">
  244. <img src="IMG HERE">
  245. </div>
  246. </div>
  247. <!-- L PICTURE END-->
  248. <!-- R RESPONSE START-->
  249. <div class="col-9 p-2">
  250. <div class="text-light bg-dark p-3">
  251. <div class="text-uppercase d-flex justify-content-between"
  252. style="letter-spacing:3px; font-size:20px;">
  253. Item Name
  254. </div>
  255. <hr class="bg-white w-100">
  256. <div class="table-responsive p-1">
  257. <p>Item Desc.
  258. </p>
  259. <!-- SYMBOLIC START-->
  260. <div class="text-right">
  261. <i class="far fa-star text-muted"></i>
  262. <i class="far fa-star text-muted"></i>
  263. <i class="fas fa-star text-warning"></i>
  264. <i class="fas fa-star text-warning"></i>
  265. </div>
  266. <!--SYMBOLIC END-->
  267. </div>
  268. </div>
  269. </div>
  270. <!-- R RESPONSE END-->
  271. <!-- L RESPONSE START-->
  272. <div class="col-9 p-2">
  273. <div class="text-light bg-dark p-3">
  274. <div class="text-uppercase d-flex justify-content-between"
  275. style="letter-spacing:3px; font-size:20px;">
  276. OR maybe a spell name?
  277. </div>
  278. <hr class="bg-white w-100">
  279. <div class="table-responsive p-1">
  280. <p>Description
  281. </p>
  282. <!-- SYMBOLIC START-->
  283. <div class="text-right">
  284. <i class="far fa-star text-muted"></i>
  285. <i class="far fa-star text-muted"></i>
  286. <i class="far fa-star text-muted"></i>
  287. <i class="fas fa-star text-warning"></i>
  288. </div>
  289. <!--SYMBOLIC END-->
  290. </div>
  291. </div>
  292. </div>
  293. <!-- L RESPONSE END-->
  294. <!-- R PICTURE START
  295. Links to the other character!-->
  296. <div class="col-3 p-2">
  297. <div class="text-light bg-dark p-3 text-center"><img src="IMG HERE">
  298. </div>
  299. </div>
  300. <!-- R PICTURE END-->
  301. </div>
  302. </div>
  303. <!--OPINION 3 END-->
  304.  
  305. <!--Add more opinions before here.-->
  306. </div>
  307. </div>
  308. </div>
  309. <!-- CONTENT END-->
  310. <!-- TELL US WHAT YOU REALLY THINK END -->
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!