API tools faq
paste
LivvyAh

MODULAR: REALLY think 1.0-Cardo

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