API tools faq
paste
junijwi

sketchbook bootstrap colors

junijwi
Feb 15th, 2024
132
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 44.66 KB | None | 0 0
raw download clone embed print report
  1. <!--------------------------------------------------------------------------------
  2.  
  3. SKETCH BOOK profile by JUNI
  4. Ko-Fi: https://ko-fi.com/junijwi
  5.  
  6. This code was made in response to the moodboard prompts given by @Togo!
  7. https://toyhou.se/~world/82691.coders-quarters/page/36197.august-challenge
  8.  
  9. By using this code, you are agreeing to the terms outlined here:
  10. https://toyhou.se/12457283.sketch-book
  11.  
  12. Please edit the code with WYSIWYG turned off and Code Editor turned on.
  13. I personally recommend editing the code in a code editor like Visual Studio Code
  14. OR using the very handy live-preview website:
  15. https://th.circlejourney.net/
  16. You may alter/relocate/restyle coding credit, but please do not remove it.
  17.  
  18. -------------------------------------------------------------------------------->
  19.  
  20. <div class="container" style="max-width: 800px;">
  21. <div class="card p-3 bg-secondary" style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/38632317_4Z55UuoHv0C4N49.png?1629093358'); background-blend-mode: overlay; background-size: cover; transform: rotate(-.5deg); border-radius: 15px; box-shadow: 0px 2px 0px rgba(0,0,0,.5);">
  22. <div style="transform: rotate(.5deg);">
  23. <div id="sketchbook" class="carousel slide carousel-fade" data-ride="false" data-pause="true">
  24. <!-- carousel buttons -->
  25. <ol class="carousel-indicators m-auto p-2 bg-danger" style="border-radius: 15px; width: 150px; height: 20px; position: absolute; bottom: -60px;">
  26. <li data-target="#sketchbook" data-slide-to="0" class="active"></li>
  27. <li data-target="#sketchbook" data-slide-to="1"></li>
  28. <li data-target="#sketchbook" data-slide-to="2"></li>
  29. </ol>
  30. <div class="carousel-inner" style="overflow: visible;">
  31.  
  32. <div class="carousel-item active">
  33. <div class="row no-gutters my-0">
  34. <div class="col-md-6 col-12 m-md-0 mb-2">
  35. <div class="card w-100 bg-white" style="opacity: .6; border-radius: 15px; height: 400px; box-shadow: 0px 2px 0px rgba(0,0,0,.3); position: absolute; transform: rotate(-.5deg); top: 4px; left: -6px;"></div>
  36. <div class="card mt-md-2 mb-md-1 mr-md-1 py-md-3 p-4 bg-white text-dark" style="border-radius: 15px; height: 400px; overflow: auto; box-shadow: 0px 2px 0px rgba(0,0,0,.3);">
  37.  
  38. <!-- PAGE ONE -->
  39. <div class="row no-gutters align-items-center my-1">
  40. <div class="col-auto">
  41. <!-- header -->
  42. <h4 class="text-primary"><i class="fas fa-sparkles"></i> A Vessel</h4>
  43. </div>
  44. <div class="col pl-1"><hr class="m-0" style="background-color: rgba(0,0,0,.1);"></div>
  45. </div>
  46.  
  47. <!-- basics -->
  48. <div class="row no-gutters">
  49. <div class="col-6 pr-3">
  50. <!-- photo -->
  51. <div class="w-100" style="background-image: url('https://images.unsplash.com/photo-1597274303632-880ef8660375?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80'); background-size: cover; background-position: center; box-shadow: 1px 3px 0px rgba(0,0,0,.3); transform: rotate(2deg); min-height: 130px;"></div>
  52. </div>
  53. <div class="col-6 h-auto my-auto pr-md-2">
  54. <div class="row no-gutters">
  55. <div class="col-auto text-left text-uppercase text-danger"><i class="fas fa-user"></i></div>
  56. <div class="col text-right text-lowercase">
  57. <!-- name -->
  58. Full Name
  59. </div>
  60. </div>
  61. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  62. <div class="row no-gutters">
  63. <div class="col-auto text-left text-uppercase text-danger"><i class="fas fa-venus-mars"></i></div>
  64. <div class="col text-right text-lowercase">
  65. <!-- pronouns/gender -->
  66. they/them
  67. </div>
  68. </div>
  69. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  70. <div class="row no-gutters">
  71. <div class="col-auto text-left text-uppercase text-danger"><i class="fas fa-birthday-cake"></i></div>
  72. <div class="col text-right text-lowercase">
  73. <!-- birthday -->
  74. Jan 1st
  75. </div>
  76. </div>
  77. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  78. <div class="row no-gutters">
  79. <div class="col-auto text-left text-uppercase text-danger"><i class="fas fa-history"></i></div>
  80. <div class="col text-right text-lowercase">
  81. <!-- age -->
  82. 0 yrs
  83. </div>
  84. </div>
  85. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  86. <div class="row no-gutters">
  87. <div class="col-auto text-left text-uppercase text-danger"><i class="fas fa-ruler-combined"></i></div>
  88. <div class="col text-right text-lowercase">
  89. <!-- height -->
  90. 0'00"
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95.  
  96. <!-- personality traits -->
  97. <div class="row no-gutters text-center mt-3 text-lowercase">
  98. <div class="col-4">
  99. <i class="fas fa-star text-primary"></i>
  100. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  101. <ul class="list-unstyled mb-2">
  102. <!-- two positive traits -->
  103. <li>Trait</li>
  104. <li>Trait</li>
  105. </ul>
  106. </div>
  107. <div class="col-4">
  108. <i class="fas fa-star-half-alt text-warning"></i>
  109. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  110. <ul class="list-unstyled mb-2">
  111. <!-- two neutral traits -->
  112. <li>Trait</li>
  113. <li>Trait</li>
  114. </ul>
  115. </div>
  116. <div class="col-4">
  117. <i class="far fa-star text-danger"></i>
  118. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  119. <ul class="list-unstyled mb-2">
  120. <!-- two negative traits -->
  121. <li>Trait</li>
  122. <li>Trait</li>
  123. </ul>
  124. </div>
  125. </div>
  126.  
  127. <!-- quote -->
  128. <div class="my-auto" style="height: 85px;overflow: auto;">
  129. <div class="text-center text-monospace bg-primary p-2 mb-2 ml-0 mr-4 text-white" style="box-shadow: 0px 1px 0px rgba(0,0,0,.3); transform: rotate(-.5deg);">
  130. <p>
  131. <!-- quote 1/2 -->
  132. <i class="far fa-stars"></i> My admiration is an ocean,
  133. </p>
  134. </div>
  135. <div class="text-center text-monospace bg-primary p-2 mr-0 ml-4 text-white" style="box-shadow: 0px 1px 0px rgba(0,0,0,.3); transform: rotate(.5deg);">
  136. <p>
  137. <!-- quote 2/2 -->
  138. you are on the other side of it.
  139. </p>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. <div class="col-md-6 col-12 m-md-0">
  145. <div class="card w-100 bg-white" style="opacity: .6; border-radius: 15px; height: 400px; box-shadow: 0px 2px 0px rgba(0,0,0,.3); position: absolute; transform: rotate(1deg); top: 6px; right: -6px;"></div>
  146. <div class="card ml-md-1 py-md-3 p-4 bg-white text-dark" style="border-radius: 15px; height: 400px; overflow: auto; box-shadow: 0px 2px 0px rgba(0,0,0,.3);">
  147.  
  148. <!-- PAGE TWO -->
  149. <div class="row no-gutters align-items-center my-1">
  150. <div class="col-auto">
  151. <!-- header -->
  152. <h4 class="text-primary"><i class="fas fa-sparkles"></i> A Soul</h4>
  153. </div>
  154. <div class="col pl-1">
  155. <hr class="m-0" style="background-color: rgba(0,0,0,.1);">
  156. </div>
  157. </div>
  158.  
  159. <div class="text-justify mb-2" style="height: 240px; overflow: auto;">
  160. <!--
  161. text, it scrolls if too tall
  162. good place to put written personality, if you want
  163. -->
  164. <p>
  165. It's odd that <span class="bg-warning">despite</span> how I cherished you-- As an artist. As a writer. As a companion-- When I try to write of you I am <span class="bg-warning">speechless</span>.
  166. </p>
  167. <p>
  168. My understanding of you had no translatable emotion- I thought of you and felt: <span class="bg-warning">"Yes."</span>
  169. </p>
  170. <p>
  171. You were an extension of myself. So how did I lose us? How does a hand drop its fingers? Of all the things I had loved, I never fathomed it possible.
  172. </p>
  173. <p>
  174. I have <span class="bg-warning">no more words</span> for you.
  175. </p>
  176. <!-- end text -->
  177. </div>
  178.  
  179. <!-- likes / dislikes -->
  180. <div class="row no-gutters text-center text-lowercase">
  181. <div class="col-6">
  182. <i class="fas fa-check-circle text-primary"></i>
  183. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  184. <ul class="list-unstyled mb-2">
  185. <!-- three character likes -->
  186. <li>Likes</li>
  187. <li>Likes</li>
  188. <li>Likes</li>
  189. </ul>
  190. </div>
  191. <div class="col-6">
  192. <i class="fas fa-times-circle text-danger"></i>
  193. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  194. <ul class="list-unstyled mb-2">
  195. <!-- three character dislikes -->
  196. <li>Dislikes</li>
  197. <li>Dislikes</li>
  198. <li>Dislikes</li>
  199. </ul>
  200. </div>
  201. </div>
  202.  
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207.  
  208. <div class="carousel-item">
  209. <div class=" row no-gutters my-0">
  210. <div class="col-md-6 col-12 m-md-0 mb-2">
  211. <div class=" card w-100 bg-white" style="opacity: .6; border-radius: 15px; height: 400px; box-shadow: 0px 2px 0px rgba(0,0,0,.3); position: absolute; transform: rotate(1deg); top: 3px; left: -4px;"></div>
  212. <div class="card mt-md-2 mb-md-1 mr-md-1 py-md-3 p-4 bg-white text-dark" style="border-radius: 15px; height: 400px; overflow: auto; box-shadow: 0px 2px 0px rgba(0,0,0,.3);">
  213.  
  214. <!-- PAGE THREE -->
  215. <div class="row no-gutters align-items-center my-1">
  216. <div class="col-auto">
  217. <!-- header -->
  218. <h4 class="text-primary"><i class="fas fa-sparkles"></i> A Dream</h4>
  219. </div>
  220. <div class="col pl-1">
  221. <hr class="m-0" style="background-color: rgba(0,0,0,.1);">
  222. </div>
  223. </div>
  224. <div class="text-justify mb-md-2 mb-0" style="height: 140px; overflow: auto;">
  225. <!--
  226. text, it scrolls if too tall
  227. good place to put dangerrmation like
  228. occupation or setting, if you want
  229. -->
  230. <p>
  231. I knew it was you when the <span class="bg-warning">lights</span> cut out and my entire world expanded into shards of blood and flocks of glass.
  232. </p>
  233. <p>
  234. I imagined your face to be like death— impartial and cold. But It was beautiful, as angels are in all of their foreign terror. <span class="bg-warning">“Do not be afraid,”</span> they said, and so said you to me before I died.
  235. </p>
  236. <!-- end text -->
  237. </div>
  238. <!-- photo -->
  239. <div style="background-image: url('https://images.unsplash.com/photo-1534511902651-6ab0ce131f2a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1189&q=80'); background-size: cover; background-position: center; width: 150px; height: 150px; position: absolute; box-shadow: -2px 3px 0px rgba(0,0,0,.3); transform: rotate(-5deg); bottom: 40px;"></div>
  240. <!-- sticky note -->
  241. <div class="card border-0 rounded-0 p-2 text-center bg-danger" style="width: 150px; height: 150px; position: relative; box-shadow: 2px 3px 0px rgba(0,0,0,.3); transform: rotate(6deg); margin-left: auto; top: 20px; right: 15px;">
  242. <div class="w-100 my-auto text-white" style="font-size: .8rem; overflow: auto;">
  243. <!-- sticky note text -->
  244. <p>
  245. I wonder how you'd look, holding my life against your palms,
  246. </p>
  247. <p>
  248. or in your teeth.
  249. </p>
  250. <!-- end sticky note text -->
  251. </div>
  252. </div>
  253.  
  254. </div>
  255. </div>
  256. <div class="col-md-6 col-12 m-md-0">
  257. <div class="card w-100 bg-white" style="opacity: .6; border-radius: 15px; height: 400px; box-shadow: 0px 2px 0px rgba(0,0,0,.3); position: absolute; transform: rotate(-1deg); top: 5px; right: -3px;"></div>
  258. <div class="card ml-md-1 py-md-3 p-4 bg-white text-dark" style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/38926046_zDbZboLJTv5Yy4O.png?1629751273'); background-position: 200px top; background-blend-mode: multiply; background-repeat: no-repeat; border-radius: 15px; height: 400px; overflow: auto; box-shadow: 0px 2px 0px rgba(0,0,0,.3);">
  259.  
  260. <!-- PAGE FOUR -->
  261. <div class="row no-gutters align-items-center my-1">
  262. <div class="col-auto">
  263. <!-- header -->
  264. <h4 class="text-primary"><i class="fas fa-sparkles"></i> A Memory</h4>
  265. </div>
  266. <div class="col pl-1">
  267. <hr class="m-0" style="background-color: rgba(0,0,0,.1);">
  268. </div>
  269. </div>
  270. <div class="h-100 text-justify" style="overflow: auto;">
  271. <!--
  272. text, it scrolls if too tall
  273. good place to put backstory, if you want
  274. -->
  275. <p>
  276. You are poppy seeds. And licorice.<br>
  277. Slow death by <span class="bg-warning">nostalgia</span>.<br>
  278. Childhood, perpetually.<br>
  279. Overwhelming and heavy.
  280. </p>
  281. <p>
  282. Your self imposed inevitability<br>
  283. Imposes on me an indifference.<br>
  284. I don’t care.<br>
  285. The flux of your existence is heat waves in the vast orange expanse, a shimmer of false water, bright blue and white and made from<br> layer upon layer of <span class="bg-warning">nothing</span> in the screeching, aching, groaning chasm of invalidation.
  286. </p>
  287. <p>
  288. You are childhood, perpetually.<br>
  289. Slow death by nostalgia.<br>
  290. Overwhelming and heavy.<br>
  291. Poppy seeds. And licorice.
  292. </p>
  293. <!-- end text -->
  294. </div>
  295.  
  296. </div>
  297. </div>
  298. </div>
  299. </div>
  300.  
  301. <div class="carousel-item">
  302. <div class="row no-gutters my-0">
  303. <div class="col-md-6 col-12 m-md-0 mb-2">
  304. <div class="card w-100 bg-white" style="opacity: .6; border-radius: 15px; height: 400px; box-shadow: 0px 2px 0px rgba(0,0,0,.3); position: absolute; transform: rotate(-1deg); top: 2px; left: -4px;"></div>
  305. <div class="card mt-md-2 mb-md-1 mr-md-1 py-md-3 p-4 bg-white text-dark" style="border-radius: 15px; height: 400px; overflow: auto; box-shadow: 0px 2px 0px rgba(0,0,0,.3);">
  306.  
  307. <!-- PAGE FIVE -->
  308. <div class="row no-gutters align-items-center my-1">
  309. <div class="col-auto">
  310. <!-- header -->
  311. <h4 class="text-primary"><i class="fas fa-sparkles"></i> A Desire</h4>
  312. </div>
  313. <div class="col pl-1">
  314. <hr class="m-0" style="background-color: rgba(0,0,0,.1);">
  315. </div>
  316. </div>
  317. <div style="height: 380px; overflow: auto;">
  318. <!--
  319. relationship link
  320. for reference, start copying here
  321. to add a LEFT link
  322. -->
  323. <div class="row no-gutters mb-2">
  324. <div class="col-6 pr-3">
  325. <!-- photo -->
  326. <div class="mx-auto" style="background-image: url('https://images.unsplash.com/photo-1456086272160-b28b0645b729?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80'); background-size: cover; background-position: center; box-shadow: 1px 3px 0px rgba(0,0,0,.3); transform: rotate(-3deg); min-height: 130px; width: 90%;"></div>
  327. </div>
  328. <!-- basics -->
  329. <div class="col-6 h-auto my-auto pr-md-2">
  330. <div class="row no-gutters">
  331. <div class="col-auto text-left text-uppercase text-danger">
  332. <i class="fas fa-user"></i>
  333. </div>
  334. <div class="col text-right text-lowercase">
  335. <!-- name -->
  336. <a class="text-primary" href="#">Full Name</a>
  337. </div>
  338. </div>
  339. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  340. <div class="row no-gutters">
  341. <div class="col-auto text-left text-uppercase text-danger">
  342. <i class="fas fa-heart"></i>
  343. </div>
  344. <div class="col text-right text-lowercase">
  345. <!-- relationship -->
  346. relationship status
  347. </div>
  348. </div>
  349. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  350. <div class="text-justify" style="font-size: .8rem;">
  351. <!-- description, keep it short -->
  352. <p>A bit about them and how they feel about one another.</p>
  353. </div>
  354.  
  355. </div>
  356. </div>
  357. <!-- end of link -->
  358. <!--
  359. relationship link
  360. for reference, start copying here
  361. to add a RIGHT link
  362. -->
  363. <div class="row no-gutters mb-2">
  364. <!-- basics -->
  365. <div class="col-6 h-auto my-auto pl-md-2">
  366. <div class="row no-gutters">
  367. <div class="col-auto text-left text-uppercase text-danger">
  368. <i class="fas fa-user"></i>
  369. </div>
  370. <div class="col text-right text-lowercase">
  371. <!-- name -->
  372. <a class="text-primary" href="#">Full Name</a>
  373. </div>
  374. </div>
  375. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  376. <div class="row no-gutters">
  377. <div class="col-auto text-left text-uppercase text-danger">
  378. <i class="fas fa-heart"></i>
  379. </div>
  380. <div class="col text-right text-lowercase">
  381. <!-- relationship -->
  382. relationship status
  383. </div>
  384. </div>
  385. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  386. <div class="text-justify" style="font-size: .8rem;">
  387. <!-- description, keep it short -->
  388. <p>A bit about them and how they feel about one another.</p>
  389. </div>
  390. </div>
  391. <div class="col-6 pl-3">
  392. <!-- photo -->
  393. <div class="mx-auto" style="background-image: url('https://images.unsplash.com/photo-1456086272160-b28b0645b729?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80'); background-size: cover; background-position: center; box-shadow: 1px 3px 0px rgba(0,0,0,.3); transform: rotate(2deg); min-height: 130px; width: 90%;"></div>
  394. </div>
  395. </div>
  396. <!-- end of link -->
  397. <!--
  398. relationship link
  399. for reference, start copying here
  400. to add a LEFT link
  401. -->
  402. <div class="row no-gutters mb-2">
  403. <div class="col-6 pr-3">
  404. <!-- photo -->
  405. <div class="mx-auto" style="background-image: url('https://images.unsplash.com/photo-1456086272160-b28b0645b729?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80'); background-size: cover; background-position: center; box-shadow: 1px 3px 0px rgba(0,0,0,.3); transform: rotate(-3deg); min-height: 130px; width: 90%;"></div>
  406. </div>
  407. <!-- basics -->
  408. <div class="col-6 h-auto my-auto pr-md-2">
  409. <div class="row no-gutters">
  410. <div class="col-auto text-left text-uppercase text-danger">
  411. <i class="fas fa-user"></i>
  412. </div>
  413. <div class="col text-right text-lowercase">
  414. <!-- name -->
  415. <a class="text-primary" href="#">Full Name</a>
  416. </div>
  417. </div>
  418. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  419. <div class="row no-gutters">
  420. <div class="col-auto text-left text-uppercase text-danger">
  421. <i class="fas fa-heart"></i>
  422. </div>
  423. <div class="col text-right text-lowercase">
  424. <!-- relationship -->
  425. relationship status
  426. </div>
  427. </div>
  428. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  429. <div class="text-justify" style="font-size: .8rem;">
  430. <!-- description, keep it short -->
  431. <p>A bit about them and how they feel about one another.</p>
  432. </div>
  433.  
  434. </div>
  435. </div>
  436. <!-- end of link -->
  437. <!--
  438. relationship link
  439. for reference, start copying here
  440. to add a RIGHT link
  441. -->
  442. <div class="row no-gutters mb-2">
  443. <!-- basics -->
  444. <div class="col-6 h-auto my-auto pl-md-2">
  445. <div class="row no-gutters">
  446. <div class="col-auto text-left text-uppercase text-danger">
  447. <i class="fas fa-user"></i>
  448. </div>
  449. <div class="col text-right text-lowercase">
  450. <!-- name -->
  451. <a class="text-primary" href="#">Full Name</a>
  452. </div>
  453. </div>
  454. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  455. <div class="row no-gutters">
  456. <div class="col-auto text-left text-uppercase text-danger">
  457. <i class="fas fa-heart"></i>
  458. </div>
  459. <div class="col text-right text-lowercase">
  460. <!-- relationship -->
  461. relationship status
  462. </div>
  463. </div>
  464. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  465. <div class="text-justify" style="font-size: .8rem;">
  466. <!-- description, keep it short -->
  467. <p>A bit about them and how they feel about one another.</p>
  468. </div>
  469. </div>
  470. <div class="col-6 pl-3">
  471. <!-- photo -->
  472. <div class="mx-auto" style="background-image: url('https://images.unsplash.com/photo-1456086272160-b28b0645b729?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80'); background-size: cover; background-position: center; box-shadow: 1px 3px 0px rgba(0,0,0,.3); transform: rotate(2deg); min-height: 130px; width: 90%;"></div>
  473. </div>
  474. </div>
  475. <!-- end of link -->
  476. </div>
  477. </div>
  478. </div>
  479. <div class="col-md-6 col-12 m-md-0">
  480. <div class="card w-100 bg-white" style="opacity: .6; border-radius: 15px; height: 400px; box-shadow: 0px 2px 0px rgba(0,0,0,.3); position: absolute; transform: rotate(-1deg); top: 3px; right: -4px;"></div>
  481. <div class="card ml-md-1 py-md-3 p-4 bg-white text-dark" style="border-radius: 15px; height: 400px; overflow: auto; box-shadow: 0px 2px 0px rgba(0,0,0,.3);">
  482.  
  483. <!-- PAGE SIX -->
  484. <div class="row no-gutters align-items-center my-1">
  485. <div class="col-auto">
  486. <!-- header -->
  487. <h4 class="text-primary"><i class="fas fa-sparkles"></i> A Feeling</h4>
  488. </div>
  489. <div class="col pl-1">
  490. <hr class="m-0" style="background-color: rgba(0,0,0,.1);">
  491. </div>
  492. </div>
  493. <div class="text-center text-monospace text-primary" style="position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 50px; ">
  494. <p>
  495. <!-- song title, artist -->
  496. <i class="fas fa-user"></i> Blood, ANIMA! <i class="fas fa-music"></i>
  497. </p>
  498. </div>
  499.  
  500. <div style="width: 150px; height: 150px; position: absolute; box-shadow: -2px 3px 0px rgba(0,0,0,.3); transform: rotate(3deg); top: 80px; left: 40px; overflow: hidden;">
  501. <div style="display: inline-block; position: relative; top: -58%; left: -135%;">
  502. <!--
  503. YOUTUBE SONG
  504. https://www.youtube.com/embed/YOUTUBE-ID
  505.  
  506. The YOUTUBE-ID is the string in the URL at the end.
  507. Go to the video, click "Share" and check the link.
  508. It should be in https://youtu.be/xyVrPeMG2G8 format,
  509. in which case you take everything after https://youtu.be/
  510. -->
  511. <iframe width="560" height="315" src="https://www.youtube.com/embed/xyVrPeMG2G8" frameborder="0" allowfullscreen="false"></iframe>
  512. </div>
  513. </div>
  514. <!-- sticky note -->
  515. <div class="card border-0 rounded-0 p-2 text-center bg-danger" style="width: 150px; height: 150px; position: relative; box-shadow: 2px 3px 0px rgba(0,0,0,.3); transform: rotate(-4deg); margin-left: auto; top: 20px;">
  516. <div class="w-100 my-auto text-white" style="font-size: .8rem; overflow: auto;">
  517. <!-- sticky note text (for lyrics) -->
  518. <p>
  519. Art is love, love is work, It hurts to give yourself to it.<br>
  520. Art is work, work is love, Reminding us why we do it.
  521. </p>
  522. <!-- end sticky note text -->
  523. </div>
  524. </div>
  525. <!-- track list -->
  526. <div class="row no-gutters" style="margin-top: 40px;">
  527. <div class="col-6 text-center text-uppercase text-danger">
  528. <i class="fas fa-user"></i>
  529. </div>
  530. <div class="col-6 text-center text-uppercase text-danger">
  531. <i class="fas fa-music"></i>
  532. </div>
  533. </div>
  534. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  535. <div style="height: 130px; overflow: auto;">
  536. <div class="row no-gutters">
  537. <div class="col-6 text-center text-lowercase">
  538. <!-- artist -->
  539. Oh Wonder
  540. </div>
  541. <div class="col-6 text-center text-lowercase">
  542. <!-- song link and title -->
  543. <a class="text-primary" href="https://www.youtube.com/watch?v=-Ij_OGLnFTM" target="_blank">Lose It</a>
  544. </div>
  545. </div>
  546. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  547. <div class="row no-gutters">
  548. <div class="col-6 text-center text-lowercase">
  549. <!-- artist -->
  550. Childcare
  551. </div>
  552. <div class="col-6 text-center text-lowercase">
  553. <!-- song link and title -->
  554. <a class="text-primary" href="https://www.youtube.com/watch?v=jbNykFMQkdY" target="_blank">Put Down Your Pen</a>
  555. </div>
  556. </div>
  557. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  558. <div class="row no-gutters">
  559. <div class="col-6 text-center text-lowercase">
  560. <!-- artist -->
  561. BØRNS
  562. </div>
  563. <div class="col-6 text-center text-lowercase">
  564. <!-- song link and title -->
  565. <a class="text-primary" href="https://www.youtube.com/watch?v=cyN6GMY78D4" target="_blank">Sweet Dreams</a>
  566. </div>
  567. </div>
  568. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  569. <div class="row no-gutters">
  570. <div class="col-6 text-center text-lowercase">
  571. <!-- artist -->
  572. Regina Spektor
  573. </div>
  574. <div class="col-6 text-center text-lowercase">
  575. <!-- song link and title -->
  576. <a class="text-primary" href="https://www.youtube.com/watch?v=ligpxXvATNU" target="_blank">Blue Lips</a>
  577. </div>
  578. </div>
  579. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  580. <div class="row no-gutters">
  581. <div class="col-6 text-center text-lowercase">
  582. <!-- artist -->
  583. The Hush Sound
  584. </div>
  585. <div class="col-6 text-center text-lowercase">
  586. <!-- song link and title -->
  587. <a class="text-primary" href="https://www.youtube.com/watch?v=qWR0Tm_OXm0" target="_blank">Don't Wake Me Up</a>
  588. </div>
  589. </div>
  590. <hr class="m-0 p-0" style="background-color: rgba(0,0,0,.1);">
  591. <div class="row no-gutters">
  592. <div class="col-6 text-center text-lowercase">
  593. <!-- artist -->
  594. j^p^n
  595. </div>
  596. <div class="col-6 text-center text-lowercase">
  597. <!-- song link and title -->
  598. <a class="text-primary" href="https://www.youtube.com/watch?v=F6VPsLJCaJM" target="_blank">Bloom</a>
  599. </div>
  600. </div>
  601. </div>
  602.  
  603. </div>
  604. </div>
  605. </div>
  606. </div>
  607.  
  608. <!-- spiral -->
  609. <div class="d-md-flex d-none" style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/38904935_hfXuIWFEPdJTN2h.png?1629709936'); background-repeat: repeat-y; background-size: contain; position: absolute; top: 15%; margin-left: auto; margin-right: auto; left: 0; right: 0; width: 50px; height: 300px;">
  610. </div>
  611. <div class="d-md-none d-flex" style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/38911230_FOSTksXDbECvr2W.png'); background-repeat: repeat-x; background-size: contain; position: absolute; margin: auto; top: 46.2%; left: 0; right: 0; width: 240px; height: 60px;">
  612. </div>
  613. </div>
  614. </div>
  615. </div>
  616. </div>
  617.  
  618. <!-- Carousel Buttons -->
  619. <!-- prev -->
  620. <a class="btn btn-default border-0 mt-md-2 mt-0 carousel-control left bg-danger text-white" data-slide="prev" aria-hidden="true" href="#sketchbook" style="border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; width: 80px; position: absolute; left: -25px; top: 25%; box-shadow: -2px 0px 0px rgba(0,0,0,.5); transform: rotate(-90deg);">
  621. <b style="letter-spacing: 1px;">PREV</b>
  622. </a>
  623. <!-- next -->
  624. <a class="btn btn-default border-0 mt-md-2 mt-0 carousel-control right bg-primary text-white" data-slide="next" aria-hidden="true" href="#sketchbook" style="border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; width: 80px; position: absolute; right: -25px; top: 35%; box-shadow: 2px 0px 0px rgba(0,0,0,.5); transform: rotate(90deg);">
  625. <b style="letter-spacing: 1px;">NEXT</b>
  626. </a>
  627.  
  628. <!-- decorative -->
  629. <div class="btn btn-default border-0 mt-md-2 mt-0 bg-warning text-white" style="border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; width: 80px; position: absolute; left: -25px; top: 65%; box-shadow: -2px 0px 0px rgba(0,0,0,.5); transform: rotate(-90deg);">&nbsp;</div>
  630. <div class="btn btn-default border-0 mt-md-2 mt-0 bg-warning text-white" style="border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; width: 80px; position: absolute; right: -25px; top: 15%; box-shadow: 2px 0px 0px rgba(0,0,0,.5); transform: rotate(90deg);">&nbsp;</div>
  631.  
  632. <!-- Code Credit -->
  633. <a class="btn btn-default border-0 mt-md-1 mt-2 bg-primary text-white" target="_blank" href="https://toyhou.se/12457283.sketch-book" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; width: 80px; position: relative; left: 9%; top: -25px; box-shadow: 0px 2px 0px rgba(0,0,0,.5);">
  634. <i class="fas fa-code fa-xs"></i>
  635. </a>
  636. </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!