API tools faq
paste
t3ch13-c0l0rs

updated movie night

t3ch13-c0l0rs
Oct 15th, 2022 (edited)
165
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.71 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. what is up friends and foes! this is for the coder's quarters august challenge! i had to speedrun this because today im going on a trip until the 26th so be proud of me.
  4. also i just now realized that hanyu's code for this also has the pallette buttons. whoops
  5. anyways, hope you like the code! i annotated it so its easier to customize
  6.  
  7. accent / inner text color: #ac2121
  8. header color: #d96047
  9. container color: #ecc17d
  10. container container color: #2e2e34
  11.  
  12. images from unsplash and the oldinterneticons tumblr
  13.  
  14.  
  15. -->
  16.  
  17. <div class="container-xxl" style="font-family: Courier New">
  18.  
  19.  
  20.  
  21. <div class="col-md-7 col-sm-12" style="margin: auto">
  22.  
  23.  
  24. <div class="card col-md-5 col-sm-12" style="background-color: #d96047; margin: left; border-radius: 15px 40px 0px 0px">
  25. <p style="font-size: 20px;color: white">
  26.  
  27. <!-- full name, only put the first letter of the name / surname between the <span></span> class :) -->
  28.  
  29. <span style="color: #ac2121; font-size: 25px">N</span>ame
  30. <span style="color: #ac2121; font-size: 25px">S</span>urname</p>
  31.  
  32. </div>
  33.  
  34.  
  35. <div class="card-block p-3 align-items-center" style="background-color: #2e2e34">
  36.  
  37. <div class="card-block" style="background-color: #ecc17d">
  38. <div class="container">
  39. <div class="row gx-6">
  40.  
  41. <div class="col-md-5 col-sm-12">
  42.  
  43. <!-- profile picture! change the tumblr thing to your character's pfp :] -->
  44.  
  45. <div class="card" style="
  46. background-image: url(https://64.media.tumblr.com/03796ad33b8986ab8e3631daef92670e/30e79ac1df48b21d-f4/s100x200/a3644b2d82d1025eae2bdc41248e6ac851305dd5.jpg);
  47. height: 200px; width: 200px; max-height: 160px; max-width: 160px; background-repeat: no-repeat; background-size: cover; border: #ac2121 10px solid; border-radius: 0px; margin: auto; margin-bottom: 5px"></div>
  48.  
  49. <div class="card-block p-2" style="background-color: #d96047">
  50.  
  51. <p style="font-size: 20px; color: white">
  52. <span style="color: #ac2121; font-size: 25px">D</span>esign
  53. <span style="color: #ac2121; font-size: 25px">N</span>otes
  54. </p>
  55.  
  56.  
  57. </div>
  58.  
  59. <div class="card-block p-3" style="background-color: white; overflow: auto; margin-bottom: 5px">
  60.  
  61. <!-- yay! design notes. this is the first one, change the middle of the <span></span> class to change it! -->
  62.  
  63. <p style="color: #d96047; font-size: 16px">Height
  64.  
  65. <span class="pull-right">1 inch</span>
  66.  
  67. </p>
  68.  
  69. <hr style="background-color: #d96047">
  70.  
  71. <!-- second one :3 -->
  72.  
  73. <p style="color: #d96047; font-size: 16px">Weight
  74.  
  75. <span class="pull-right">Idk lol</span>
  76.  
  77. </p>
  78.  
  79. <hr style="background-color: #d96047">
  80.  
  81. <!-- third one! -->
  82.  
  83. <p style="color: #d96047; font-size: 16px">Clothing size
  84.  
  85. <span class="pull-right">S</span>
  86.  
  87. </p>
  88.  
  89. <hr style="background-color: #d96047">
  90.  
  91. <!-- aaaaand done! congrats, you're done with design notes! if you want more, code and paste this:
  92.  
  93. <p style="color: #d96047; font-size: 16px">Thing
  94.  
  95. <span class="pull-right">Answer</span>
  96.  
  97. </p>
  98.  
  99. <hr style="background-color: #d96047">
  100.  
  101. -->
  102.  
  103. </div>
  104. </div>
  105.  
  106. <div class="col-md-7 col-sm-12">
  107.  
  108. <div class="card-block p-2" style="background-color: #d96047">
  109.  
  110. <p style="font-size: 20px">
  111. <span style="color: #ac2121; font-size: 25px">I</span>nfo
  112. </p>
  113.  
  114. </div>
  115.  
  116. <div class="card-block p-3" style="background-color: white; overflow: auto; max-height: 290px">
  117.  
  118. <div class="tab-content">
  119.  
  120. <div class="tab-pane fade active show" id="funfax">
  121.  
  122. <!-- we doin this again! <span</span>, you know the drill -->
  123.  
  124. <p style="color: #d96047; font-size: 16px; margin: 0px">Age
  125.  
  126. <span class="pull-right">69</span>
  127.  
  128. </p>
  129.  
  130. <hr style="background-color: #d96047">
  131.  
  132. <!-- second one!-->
  133.  
  134. <p style="color: #d96047; font-size: 16px; margin: 0px">Gender
  135.  
  136. <span class="pull-right">No</span>
  137.  
  138. </p>
  139.  
  140. <hr style="background-color: #d96047">
  141.  
  142. <!-- thiird one -->
  143.  
  144. <p style="color: #d96047; font-size: 16px; margin: 0px">Pronouns
  145.  
  146. <span class="pull-right">any</span>
  147.  
  148. </p>
  149.  
  150. <hr style="background-color: #d96047">
  151.  
  152. <!-- fourth one -->
  153.  
  154. <p style="color: #d96047; font-size: 16px; margin: 0px">Orientation
  155.  
  156. <span class="pull-right">Fruit</span>
  157.  
  158. <hr style="background-color: #d96047">
  159.  
  160. <!-- fifth one! -->
  161.  
  162. <p style="color: #d96047; font-size: 16px;">Occupation
  163.  
  164. <span class="pull-right">Model</span>
  165.  
  166. </p>
  167.  
  168. <!-- and done! if you want to add more copy and paste this code:
  169.  
  170. <p style="color: #d96047; font-size: 18px">Orientation
  171.  
  172. <span class="pull-right">Fruit</span>
  173.  
  174. <hr style="background-color: #d96047">
  175.  
  176. -->
  177.  
  178. </div>
  179.  
  180. <div class="tab-pane fade" id="personality">
  181.  
  182. <div class="card m-0" style="background-color: white">
  183.  
  184. <!-- yo we infodumping now! -->
  185. <h1 style="color: #d96047"><span style="font-size: 30px;">P</span>ERSONALITY</h1>
  186.  
  187. <!-- infodump to me about this character-->
  188. <p style="color: #d96047">
  189. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  190. </p>
  191.  
  192. <!-- psst... if you wanna add a backstory thing copy and paste this code
  193.  
  194. <h1 style="color: #d96047"><span style="font-size: 30px;">B</span>ackstory</h1>
  195.  
  196. <p style="color: #d96047">
  197.  
  198. <span style="font-size: 20px">Early Life</span>
  199. <br>
  200. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  201.  
  202. <br><br>
  203.  
  204. <span style="font-size: 20px">Adolescence</span>
  205. <br>
  206. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  207.  
  208. <br><br>
  209.  
  210. <span style="font-size: 20px">Adulthood</span>
  211. <br>
  212. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  213. </p>
  214.  
  215. -->
  216. </div>
  217.  
  218. </div>
  219.  
  220. <div class="tab-pane fade" id="relationships">
  221. <h1 style="color: #d96047">
  222. Relationships
  223. </h1>
  224. <div class="row no-gutters">
  225.  
  226. <!-- ayyyyy relationships tiiiiime. add the link to other character profiles the href="link" part! -->
  227. <a href="replacethis">
  228.  
  229. <!-- you see the tumblr icon thing. ya change it lol -->
  230. <img
  231. src="https://64.media.tumblr.com/4ebd8db9423057c708ec80b97c259238/e292244374681f9b-4d/s100x200/12dc31467038edce1433ddf34298c448ad359442.jpg"
  232. style="max-height: 100px; max-width: 100px;">
  233. </a>
  234.  
  235. <p style="color: #d96047; font-size: 15px; margin-left: 5px; margin-right: 10px;">
  236. Character
  237. <br>
  238. <!-- put a small opinion of the character here (e.g "friends" or "sister") -->
  239. <small>opinion</small>
  240. </p>
  241.  
  242. <!-- second one, do same as b4 -->
  243. <a href="replacethis">
  244.  
  245. <!-- replace tumblr -->
  246. <img
  247. src="https://64.media.tumblr.com/4ebd8db9423057c708ec80b97c259238/e292244374681f9b-4d/s100x200/12dc31467038edce1433ddf34298c448ad359442.jpg"
  248. style="max-height: 100px; max-width: 100px;">
  249. </a>
  250.  
  251. <p style="color: #d96047; font-size: 15px; margin-left: 5px; margin-right: 10px">
  252. Character
  253. <br>
  254. <!-- opinion -->
  255. <small>opinion</small>
  256. </p>
  257.  
  258. <!-- thiiird one -->
  259. <a href="replacethis">
  260.  
  261. <!-- replace tumblr -->
  262. <img
  263. src="https://64.media.tumblr.com/4ebd8db9423057c708ec80b97c259238/e292244374681f9b-4d/s100x200/12dc31467038edce1433ddf34298c448ad359442.jpg"
  264. style="max-height: 100px; max-width: 100px;">
  265. </a>
  266.  
  267.  
  268. <p style="color: #d96047; font-size: 15px; margin-left: 5px; margin-right: 10px">
  269. Character
  270.  
  271. <!-- opinion -->
  272. <br>
  273. <small>opinion</small>
  274. </p>
  275.  
  276. <!-- k we're done. if u want more relationships copy this code:
  277.  
  278.  
  279. <a href="replacethis">
  280.  
  281.  
  282. <img
  283. src="https://64.media.tumblr.com/4ebd8db9423057c708ec80b97c259238/e292244374681f9b-4d/s100x200/12dc31467038edce1433ddf34298c448ad359442.jpg"
  284. style="max-height: 100px; max-width: 100px;">
  285. </a>
  286.  
  287.  
  288. <p style="color: #d96047; font-size: 15px; margin-left: 5px; margin-right: 10px">
  289. Character
  290.  
  291.  
  292. <br>
  293. <small>opinion</small>
  294. </p>
  295.  
  296.  
  297. -->
  298.  
  299. </div>
  300. </div>
  301.  
  302. <div class="tab-pane fade" id="playlist">
  303. <h1 style="color: #d96047">
  304. Playlist
  305. </h1>
  306.  
  307. <!-- OK FINAL TAB. this ones a bit tricky so i'll show u what to do -->
  308. <div class="justify-content-between mx-3" style="overflow:hidden">
  309. <a href="https://youtube.com/watch?v=ttEOHrHeh5I" target=_blank style="color: #d96047">
  310.  
  311. <i class="fas fa-play"></i></a>
  312.  
  313. <!-- song name #lol -->
  314. <span class="text pull-right" style="color: #d96047">505 - Arctic Monkeys</span>
  315. </div>
  316. <hr style="background-color: #d96047">
  317.  
  318. <!-- second one -->
  319. <div class="justify-content-between mx-3" style="overflow:hidden">
  320. <a href="https://youtube.com/watch?v=ttEOHrHeh5I" target=_blank style="color: #d96047">
  321.  
  322. <i class="fas fa-play"></i></a>
  323. <!-- song name -->
  324. <span class="text pull-right" style="color: #d96047">Christmas Kids - ROAR</span>
  325. </div>
  326. <hr style="background-color: #d96047">
  327.  
  328. <!-- third one -->
  329. <div class="justify-content-between mx-3" style="overflow:hidden">
  330. <a a href="https://youtube.com/watch?v=ttEOHrHeh5I" target=_blank style="color: #d96047">
  331.  
  332. <i class="fas fa-play"></i></a>
  333.  
  334. <!-- song name :D -->
  335. <span class="text pull-right" style="color: #d96047">Lover's Rock - Tv girl</span>
  336. </div>
  337. <hr style="background-color: #d96047">
  338.  
  339. <!-- fourth one-->
  340. <div class="justify-content-between mx-3" style="overflow:hidden">
  341. <a href="https://youtube.com/watch?v=ttEOHrHeh5I" target=_blank style="color: #d96047">
  342.  
  343. <!-- only da last paaaaart (yes im gonna nag u till this page is over) -->
  344. <i class="fas fa-play"></i></a>
  345. <!-- song NAAAAAAME -->
  346. <span class="text pull-right" style="color: #d96047">Pink - maretu</span>
  347. </div>
  348. <hr style="background-color: #d96047">
  349.  
  350.  
  351. <div class="justify-content-between mx-3" style="overflow:hidden">
  352. <a href="https://youtube.com/watch?v=2g5xkLqIElU" target=_blank style="color: #d96047">
  353.  
  354. <i class="fas fa-play"></i></a>
  355. <span class="text pull-right" style="color: #d96047">Borderline - Tame Impala</span>
  356. </div>
  357.  
  358. <!-- ok. ok we're done. only a bit more fateful user <:] if u want more then copy paste this
  359.  
  360. <div class="justify-content-between mx-3" style="overflow:hidden">
  361. <a href="https://youtube.com/watch?v=ttEOHrHeh5I" target=_blank style="color: #d96047">
  362.  
  363. <i class="fas fa-play"></i></a>
  364. <span class="text pull-right" style="color: #d96047">song name - artist</span>
  365. </div>
  366.  
  367. -->
  368.  
  369. </div>
  370.  
  371.  
  372. </div>
  373.  
  374.  
  375. </div>
  376.  
  377.  
  378.  
  379. <div class="col-12 p-3 mx-1">
  380. <div class="row no-gutters">
  381.  
  382. <!-- oh hell naw not the nermal pills -->
  383. <ul class="nav nav-pills mx-auto">
  384.  
  385.  
  386. <!-- you see the bg color ? (i singled it out, it's the background-color: # thing) change it to the basics of ur ocs epic color palette. i think ur oc looks neat! :D
  387. also psst.. dont remove the hashtag bcuz its a hex code-->
  388. <li class="nav-item">
  389. <a class="nav-link" href="#funfax" data-toggle="tab"
  390. style="height: 50px; width: 50px;
  391. background-color: #ac2121;
  392. margin-right: 5px">
  393. </a>
  394. </li>
  395.  
  396. <!-- second one! -->
  397. <li class="nav-item">
  398. <a class="nav-link" href="#personality" data-toggle="tab" style="height: 50px; width: 50px;
  399. background-color: #d96047;
  400. margin-right: 5px">
  401.  
  402. </a>
  403. </li>
  404.  
  405. <!-- third one! psst.. u can also remove the border by deleting the "border: 1px solid white;" >:]-->
  406. <li class="nav-item">
  407. <a class="nav-link" href="#relationships" data-toggle="tab" style="height: 50px; width: 50px;
  408. background-color: #ecc17d;
  409. border: 1px solid white; margin-right: 5px">
  410. </a>
  411. </li>
  412.  
  413. <!-- final one! idc if u add more tabs but it might not look so great so i dont recommend it-->
  414. <li class="nav-item">
  415. <a class="nav-link" href="#playlist" data-toggle="pill" style="height: 50px; width: 50px; background-color: #2e2e34;">
  416.  
  417. </a>
  418. </li>
  419.  
  420. </ul>
  421.  
  422. <!-- ok we done... just the moodboards now -->
  423. </div>
  424. </div>
  425.  
  426.  
  427. </div>
  428.  
  429. <div class="col-12">
  430. <div class="row no-gutters">
  431.  
  432. <!-- ok change the unsplash url to ur image url! singled it out for u again -->
  433. <div class="col-md-3 col-sm-12"
  434. style="background-image: url(https://images.unsplash.com/photo-1499426666029-5c0678a1d89a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=668&q=80);
  435. height: 150px; background-size: cover; background-position: center; border-radius: 4px 0px 0px 4px">
  436.  
  437. </div>
  438.  
  439. <!-- again! -->
  440. <div class="col-md-3 col-sm-12"
  441. style="background-image: url(https://images.unsplash.com/photo-1529798856831-427dfd0a1ab1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80);
  442. height: 150px; background-size: cover; background-position: center;">
  443.  
  444. </div>
  445.  
  446. <!-- and again! -->
  447. <div class="col-md-3 col-sm-12"
  448. style="background-image: url(https://images.unsplash.com/photo-1574894078563-01e879b89809?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1778&q=80);
  449. height: 150px; background-size: cover; background-position: center;">
  450.  
  451. </div>
  452.  
  453. <!-- and the final one! -->
  454. <div class="col-md-3 col-sm-12" style="background-image: url(https://images.unsplash.com/photo-1559570278-eb8d71d06403?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=562&q=80); height: 150px; background-size: cover; background-position: center;border-radius: 0px 4px 4px 0px">
  455.  
  456. </div>
  457.  
  458.  
  459. </div>
  460. </div>
  461.  
  462.  
  463. </div>
  464. </div>
  465. </div>
  466. </div>
  467.  
  468.  
  469. <div class="card col-md-7 col-sm-12 float-right" style="background-color: #d96047; border-radius: 0px 0px 15px 40px;">
  470.  
  471. <!-- this is a quote! see the keeeeep this short lol meow? change that but dont make it too long! -->
  472. <p style="color: white">
  473.  
  474. <span style="color: #ac2121; font-size: 20px">"
  475. </span>
  476.  
  477. keeeeeep this short lol meow
  478.  
  479. <span style="color: #ac2121; font-size: 20px">"
  480. </span>
  481.  
  482. </p>
  483.  
  484.  
  485. </div>
  486.  
  487.  
  488. <!-- dont remove the credit please please please please please!!!!!!!!!!!!!!!!!!!!!!!!!! -->
  489. <a href="/micro-wave" style="color: #ecc17d; font-size: 12px">
  490. <span class="pull-left">
  491. <i class="fas fa-microwave"></i>
  492. code by micro-wave
  493. </span>
  494. </a>
  495.  
  496. </div>
  497. </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!