API tools faq
paste
lowkeywicked

Freebie - Ocean

lowkeywicked
May 31st, 2021 (edited)
18,793
3
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.84 KB | None | 3 0
raw download clone embed print report
  1. <!------ CUSTOMIZATION DETAILS -------------------------------------------------------------------------------
  2. -- The top banner & body use transparent patterns on top of colors -- you can change the patterns if you want
  3. -- be sure to upate the pattern credit if you use patterns by a different creator
  4.  
  5. -- headers use font awesome icons, you can change the icons if you want
  6.  
  7. -- Default Colors:
  8. --- banner background color ---------- #0193c4
  9. --- nav background + title color ----- #007abd
  10. --- body background + stat titles ---- #36bbe4
  11. --- content area background ---------- #fff
  12. --- main content font color ---------- #14171a
  13. --- link font color ------------------ #36bbe4
  14. --- divider line color --------------- rgba(0,0,0,.1)
  15.  
  16. ------------------------------------------------------------------------------------------------------------->
  17.  
  18. <div class="container-fluid card border-0 px-0 pt-5 pb-4" style="margin-top: -58px;">
  19. <div class="container modal-open p-0 mb-2" style="box-shadow: 0px 0px 1em rgba(0,0,0,.25); font-family: tahoma; font-size: 10pt; border-radius: 1em; max-width: 1100px;">
  20. <!-- TOP BANNER -- transparent bg pattern + bg color --------------------------->
  21. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/20543865_p5av1dq16ba1baO.png');
  22. background-color: #0193c4;
  23. background-repeat: repeat; min-height: 200px;" class="d-flex align-items-center justify-content-center">
  24. <!-- title box border ----->
  25. <div style="border: 12px double #fff; background-color: transaparent; border-radius: 1em; overflow:hidden;">
  26. <!-- title box background -->
  27. <div style="background-color: #fff;" class="py-2 px-lg-5 px-md-4 px-3">
  28. <h1 style="color: #007abd; letter-spacin: 2px; font-size: 28pt; font-family: 'arial black', arial" class="text-uppercase mb-0">
  29. Title Here</h1>
  30. </div></div>
  31. </div><!-- end banner -->
  32. <!-- NAVIGATION BAR ------ you can change the link names if you want ------------------>
  33. <div style="background: #007abd; color: #fff; line-height: 1; letter-spacing: 1px;" class="px-md-4 px-2 py-2">
  34. <ul class="nav row no-gutters justify-content-around text-center font-weight-bold text-uppercase" style="letter-spacing: 1px;">
  35. <li class="nav-item col-auto"><a class="text-white nav-link px-1 active" data-toggle="tab" href="#ONE">
  36. Intro</a></li>
  37.  
  38. <li class="nav-item col-auto"><a class="text-white nav-link px-1" data-toggle="tab" href="#TWO">
  39. About</a></li>
  40.  
  41. <li class="nav-item col-auto"><a class="text-white nav-link px-1" data-toggle="tab" href="#THREE">
  42. Mood</a></li>
  43.  
  44. <li class="nav-item col-auto"><a class="text-white nav-link px-1" data-toggle="tab" href="#FOUR">
  45. Facts</a></li>
  46.  
  47. <li class="nav-item col-auto"><a class="text-white nav-link px-1" data-toggle="tab" href="#FIVE">
  48. Links</a></li>
  49. </ul>
  50. </div>
  51. <!-- CONTENT AREA -- transparent bg pattern + bg color --------------------------->
  52. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/21270881_E5ShgFZ5dNKyS48.png');
  53. background-color: #36bbe4;
  54. background-repeat: repeat;" class="p-lg-4 p-md-4 p-3">
  55. <div class="row no-gutters mb-2">
  56. <div class="col-lg-8 col-md-7 order-md-2 pl-md-4 mb-md-0 mb-3">
  57. <!-- content area border -------------------->
  58. <div style="border: 12px double #fff; background-color:transaparent; border-radius: 1em; overflow:hidden;">
  59. <!-- content area background ---------------->
  60. <div style="background: #fff; color: #14171a;" class="tab-content" >
  61. <!------------------------------------ FIRST TAB ------------------------------------------------------------->
  62. <div class="tab-pane fade in active show" data-toggle="tab" id="ONE">
  63. <div class="px-4 pt-3">
  64. <h1 style="color: #007abd; letter-spacing:1px; font-weight: 800; " class="display-4 text-uppercase">
  65. <i class="far fa-life-ring fa-fw " /> Basics</h1>
  66. </div><div class="px-4 pt-2 pb-1" style="height: 400px; overflow: auto;">
  67. <!-- STATS SECTION -------------->
  68. <div class="row">
  69. <div class="col-sm-6"><div class="justify-content-between" style="line-height: 1;">
  70. <span class="text-uppercase" style="color: #36bbe4; font-weight: 600;">
  71. Name
  72. </span><span>
  73. content
  74. </span></div><hr class="my-2" style="border-color: rgba(0,0,0,.1); border-style: dotted;">
  75. </div>
  76. <div class="col-sm-6"><div class="justify-content-between" style="line-height: 1;">
  77. <span class="text-uppercase" style="color: #36bbe4; font-weight: 600;">
  78. Called
  79. </span><span>
  80. content
  81. </span></div><hr class="my-2" style="border-color: rgba(0,0,0,.1); border-style: dotted;">
  82. </div>
  83. <div class="col-sm-6"><div class="justify-content-between" style="line-height: 1;">
  84. <span class="text-uppercase" style="color: #36bbe4; font-weight: 600;">
  85. Gender
  86. </span><span>
  87. content
  88. </span></div><hr class="my-2" style="border-color: rgba(0,0,0,.1); border-style: dotted;">
  89. </div>
  90. <div class="col-sm-6"><div class="justify-content-between" style="line-height: 1;">
  91. <span class="text-uppercase" style="color: #36bbe4; font-weight: 600;">
  92. Age
  93. </span><span>
  94. content
  95. </span></div><hr class="my-2" style="border-color: rgba(0,0,0,.1); border-style: dotted;">
  96. </div>
  97. <div class="col-sm-6"><div class="justify-content-between" style="line-height: 1;">
  98. <span class="text-uppercase" style="color: #36bbe4; font-weight: 600;">
  99. Height
  100. </span><span>
  101. content
  102. </span></div><hr class="my-2" style="border-color: rgba(0,0,0,.1); border-style: dotted;">
  103. </div>
  104. <div class="col-sm-6"><div class="justify-content-between" style="line-height: 1;">
  105. <span class="text-uppercase" style="color: #36bbe4; font-weight: 600;">
  106. Race
  107. </span><span>
  108. (or species)
  109. </span></div><hr class="my-2" style="border-color: rgba(0,0,0,.1); border-style: dotted;">
  110. </div>
  111. <div class="col-sm-6"><div class="justify-content-between" style="line-height: 1;">
  112. <span class="text-uppercase" style="color: #36bbe4; font-weight: 600;">
  113. Role
  114. </span><span>
  115. content
  116. </span></div><hr class="my-2" style="border-color: rgba(0,0,0,.1); border-style: dotted;">
  117. </div>
  118. <div class="col-sm-6"><div class="justify-content-between" style="line-height: 1;">
  119. <span class="text-uppercase" style="color: #36bbe4; font-weight: 600;">
  120. Theme
  121. </span><span>
  122. <a href="SONG_LINK" target="_BLANK" style="color: #dd1f65; font-weight: bold;">Song Name</a>
  123. </span></div><hr class="my-2" style="border-color: rgba(0,0,0,.1); border-style: dotted;">
  124. </div>
  125. </div>
  126. <!-- TRAITS & LIKES -------------->
  127. <div class="row">
  128. <div class="col-sm-6 mb-2">
  129. <p class="text-uppercase" style="color: #36bbe4; font-weight: 600;">Traits</p>
  130. <ul class="mb-0">
  131. <li class="mb-1">content</li>
  132. <li class="mb-1">content</li>
  133. <li class="mb-1">content</li>
  134. </ul>
  135. </div>
  136. <div class="col-sm-6 mb-2">
  137. <p class="text-uppercase" style="color: #36bbe4; font-weight: 600;">Likes</p>
  138. <ul class="mb-0">
  139. <li class="mb-1">content</li>
  140. <li class="mb-1">content</li>
  141. <li class="mb-1">content</li>
  142. </ul>
  143. </div>
  144. </div>
  145. <div>
  146. <!-- INTRO PARAGRAPH -->
  147. <p class="text-uppercase mb-0" style="color: #36bbe4; font-weight: 600;">About</p>
  148. <p class="text-center mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. </p>
  149. </div>
  150. </div>
  151. </div>
  152. <!------------------------------------ SECOND TAB ------------------------------------------------------------->
  153. <div class="tab-pane fade" data-toggle="tab" id="TWO">
  154. <div class="px-4 pt-3">
  155. <h1 style="color: #007abd; letter-spacing:1px; font-weight: 800; " class="display-4 text-uppercase">
  156. <i class="far fa-whale fa-fw " /> Summary</h1>
  157. </div><div class="px-4 pt-2 pb-1" style="height: 400px; overflow: auto;">
  158. <!-- STORY SUMMARY HERE -------------->
  159. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
  160.  
  161. <p class="text-uppercase mb-1" style="color: #36bbe4; font-weight: 600;"><i class="far fa-fish fa-fw" />
  162. Subheader</p>
  163. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
  164.  
  165. <p class="text-uppercase mb-1" style="color: #36bbe4; font-weight: 600;"><i class="far fa-fish fa-fw" />
  166. Subheader</p>
  167. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
  168. </div>
  169. </div>
  170. <!------------------------------------ THIRD TAB ------------------------------------------------------------->
  171. <div class="tab-pane fade" data-toggle="tab" id="THREE">
  172. <div class="px-4 pt-3">
  173. <h1 style="color: #007abd; letter-spacing:1px; font-weight: 800; " class="display-4 text-uppercase">
  174. <i class="far fa-island-tropical fa-fw " /> Aesthetic</h1>
  175. </div><div class="px-4 pt-2 pb-3" style="height: 400px; overflow: auto;">
  176. <!-- MOODBOARD -- images will crop to fit in the area -- focus in the center of the image -->
  177. <div class="row no-gutters modal-open" style="border-radius: 1em;">
  178. <div class="col-md-4 col-6">
  179. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35367498_q2eDyTGnX66EDZL.png');
  180. background-size: cover; background-position:center; min-height: 180px;"></div>
  181. </div>
  182. <div class="col-md-4 col-6">
  183. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35367489_0xdbJo1S1BBQZIy.png');
  184. background-size: cover; background-position:center; min-height: 180px;"></div>
  185. </div>
  186. <div class="col-md-4 col-6">
  187. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35367924_pai3VivA8bBIgs4.png');
  188. background-size: cover; background-position:center; min-height: 180px;"></div>
  189. </div>
  190. <div class="col-md-4 col-6">
  191. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35367485_DR6RUcpIPjBPJVL.png');
  192. background-size: cover; background-position:center; min-height: 180px;"></div>
  193. </div>
  194. <div class="col-md-4 col-6">
  195. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35367483_0U2QMgaiTwRdoQe.png');
  196. background-size: cover; background-position:center; min-height: 180px;"></div>
  197. </div>
  198. <div class="col-md-4 col-6">
  199. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35367490_sSPtgd5OAAeoGuC.png');
  200. background-size: cover; background-position:center; min-height: 180px;"></div>
  201. </div>
  202. </div>
  203. </div>
  204. </div>
  205. <!------------------------------------ FOURTH TAB ------------------------------------------------------------->
  206. <div class="tab-pane fade" data-toggle="tab" id="FOUR">
  207. <div class="px-4 pt-3">
  208. <h1 style="color: #007abd; letter-spacing:1px; font-weight: 800; " class="display-4 text-uppercase">
  209. <i class="far fa-treasure-chest fa-fw " /> Trivia</h1>
  210. </div><div class="px-4 py-2" style="height: 400px; overflow: auto;">
  211. <!-- optinal focal image -- just erase if you dont wanna use --->
  212. <img src="IMG_URL"
  213. style="border-radius: 1em; max-height:370px;" class="float-md-right ml-md-3 d-block mx-auto mb-md-0 mb-3">
  214. <!-- trivia list ----------->
  215. <ul class="mb-0">
  216. <li class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  217. <li class="mb-1">Morbi varius libero non sem dapibus, eget viverra nisl sagittis.</li>
  218. <li class="mb-1">Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa.</li>
  219. <li class="mb-1">Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus.</li>
  220. <li class="mb-1">Aenean gravida eu nibh id tincidunt.</li>
  221. </ul>
  222. </div>
  223. </div>
  224. <!------------------------------------ FITH TAB ------------------------------------------------------------->
  225. <div class="tab-pane fade" data-toggle="tab" id="FIVE">
  226. <div class="px-4 pt-3">
  227. <h1 style="color: #007abd; letter-spacing:1px; font-weight: 800; " class="display-4 text-uppercase">
  228. <i class="far fa-dharmachakra fa-fw " /> Related</h1>
  229. </div><div class="px-4 pt-1" style="height: 400px; overflow: auto;">
  230. <div class="row">
  231. <!--------------------------- CHARACTER LINK -------------------------------------->
  232. <div class="col-12 mb-2">
  233. <!-- avatar image --->
  234. <img src="IMG_URL"
  235. style="max-height:100px; border-radius: 1em;" class="float-sm-right ml-sm-2 d-block mx-auto" />
  236.  
  237. <div class="justify-content-between align-items-center py-2" style="line-height: 1; letter-spacing: 1px;">
  238. <!-- character link & name -->
  239. <a href="LINK_HERE" style="color: #dd1f65; font-weight:800; text-transform: uppercase; font-size: 11pt; ">
  240. Character</a>
  241. <span class="small">
  242. [ relationship ]</span>
  243. </div>
  244. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
  245. </div>
  246.  
  247. <!--------------------------- CHARACTER LINK -------------------------------------->
  248. <div class="col-12 mb-2">
  249. <!-- avatar image --->
  250. <img src="IMG_URL"
  251. style="max-height:100px; border-radius: 1em;" class="float-sm-right ml-sm-2 d-block mx-auto" />
  252.  
  253. <div class="justify-content-between align-items-center py-2" style="line-height: 1; letter-spacing: 1px;">
  254. <!-- character link & name -->
  255. <a href="LINK_HERE" style="color: #dd1f65; font-weight:800; text-transform: uppercase; font-size: 11pt; ">
  256. Character</a>
  257. <span class="small">
  258. [ relationship ]</span>
  259. </div>
  260. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
  261. </div>
  262.  
  263. <!--------------------------- CHARACTER LINK -------------------------------------->
  264. <div class="col-12 mb-2">
  265. <!-- avatar image --->
  266. <img src="IMG_URL"
  267. style="max-height:100px; border-radius: 1em;" class="float-sm-right ml-sm-2 d-block mx-auto" />
  268.  
  269. <div class="justify-content-between align-items-center py-2" style="line-height: 1; letter-spacing: 1px;">
  270. <!-- character link & name -->
  271. <a href="LINK_HERE" style="color: #dd1f65; font-weight:800; text-transform: uppercase; font-size: 11pt; ">
  272. Character</a>
  273. <span class="small">
  274. [ relationship ]</span>
  275. </div>
  276. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
  277. </div>
  278. </div>
  279. </div>
  280. </div>
  281. </div>
  282. </div></div>
  283. <div class="col-lg-4 col-md-5 order-md-1">
  284. <!-------- FOCAL IMAGE -- WILL SCALE TO FIT WITHIN SPACE & CENTER ITSELF ------------------>
  285. <div style="background-image:url(IMG_URL);
  286. background-size: contain; background-repeat:no-repeat; background-position: center; min-height: 400px;" class="h-100"></div>
  287. </div>
  288. </div>
  289. </div>
  290. </div>
  291. <div class="container text-right" style="font-family: tahoma; font-size: 10pt; max-width: 1100px;">
  292. <!-- coding credit -- leave this alone pls --------------------------------------->
  293. <a href="/Pinky" target="_BLANK"><i class="fas fa-code fa-fw" /></a> //
  294. <!-- pattern credit -- if you change the patterns, be sure to update the credit -->
  295. <a href="/6259293.-f2u-transparent-patterns" target="_BLANK"><i class="fas fa-image fa-fw" /></a>
  296. </div>
  297. </div>
Advertisement
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!