API tools faq
paste
Advertisement
weishiji

#15 - ANGEL'S PEAK (ROUND)

weishiji
Apr 24th, 2023 (edited)
2,954
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.72 KB | None | 0 0
raw download clone embed print report
  1. <!---- QUICK NOTE BEFORE STARTING; ------
  2.  
  3.  
  4. Type ctrl+f to locate and replace the color of any of the item below.
  5.  
  6. - background color: #fffefe
  7. - main color: #d1b6ad
  8. - font color: #353535
  9.  
  10. - link color: #b7adac
  11. - dividers color: #e2ccc4
  12. - light background color: #f6e9e5
  13. - stars colors: #e9d3cb
  14.  
  15.  
  16. -------->
  17.  
  18. <!------------ START - background : Remove the image URL pattern if you want a solid color for the background.
  19. You can also change the background size from "pattern" to "cover" if you want to use a full image as background! ------------>
  20.  
  21. <div class="card border-0 p-4" style="border-radius: 2em;
  22. background: #f5e5e0 url(https://f2.toyhou.se/file/f2-toyhou-se/images/21853921_suhP81TgLmteMT4.png) center; background-size: pattern">
  23.  
  24. <!------------------------>
  25.  
  26. <div class="container mt-3 mb-3" style="max-width: 1100px; font-size: 13px; letter-spacing: 1px">
  27.  
  28.  
  29. <!------------ FIRST COLUMN - IMAGE ------------>
  30.  
  31.  
  32. <div class="row no-gutters"><div class="col-lg-4 p-1">
  33. <div class="card p-3" style="box-shadow: -20px 20px 0 #d1b6ad; background: #fffefe; border-radius: 2em">
  34.  
  35. <!------------ MAIN IMAGE ------------>
  36.  
  37. <div class="card border-0" style="height: 432px; border-radius: 2em;
  38. background: url(IMG_URL) left; background-size: cover">
  39.  
  40. <!------------ STAR DECO ------------>
  41.  
  42. <i class="fas fa-star fa-spin" style="animation-duration: 6s; font-size: 60px; color: #e9d3cb;
  43. position: absolute; left: -20px; top: -40px; text-shadow: -2px 0 #fff , 0 2px #fff , 2px 0 #fff , 0 -2px #fff"></i>
  44.  
  45. <!------------ NAME TITLE(S) ------------>
  46.  
  47. <p class="text-uppercase" style="color: #fff; font-family: georgia; font-size: 40px; font-weight: 800; letter-spacing: -4px;
  48. position: absolute; bottom: 15px; right: 20px;">
  49.  
  50. name here
  51.  
  52. </p>
  53.  
  54. <!------------ WRITE AGAIN THE SAME NAME SO IT CAN MIRROR ------------>
  55.  
  56. <p class="text-uppercase" style="color: #000; mix-blend-mode: screen; position: absolute; bottom: -1px; right: 20px; font-family: georgia; font-size: 40px; font-weight: 800; letter-spacing: -4px;
  57. text-shadow: -1px 0 #fff , 0 1px #fff , 1px 0 #fff , 0 -1px #fff">
  58.  
  59. name here
  60.  
  61. </p>
  62.  
  63. <!------------ FIRST COLUMN END ------------>
  64.  
  65. </div></div></div>
  66.  
  67.  
  68. <!------------ SECOND COLUMN - MAIN INFO ------------>
  69.  
  70.  
  71. <div class="col-lg-6 p-1">
  72. <div class="card p-2 text-justify" style="box-shadow: 0px 20px 0 #d1b6ad; background: #fffefe; border-radius: 2em">
  73.  
  74. <!------------ GUARDIAN DEX NUMBER ------------>
  75.  
  76. <p style="font-size: 30px; color: #353535; font-family: georgia; font-weight: 800">
  77.  
  78. <!------------------------>
  79.  
  80. <span style="color: #d1b6ad">
  81. <i class="fad fa-angel"></i> G</span>UARDIAN
  82.  
  83. <!------------ DEX NUMBER ------------>
  84.  
  85. <span style="color: #d1b6ad; font-family: book antiqua">
  86.  
  87. #0000
  88.  
  89. </span>
  90.  
  91. <!------------ BARCODE ------------>
  92.  
  93. <span class="pull-right" style="color: #353535">
  94. <i class="far fa-barcode"></i><i class="fal fa-barcode"></i><i class="fat fa-barcode"></i><i class="far fa-barcode"></i>
  95. </span>
  96.  
  97. <!------------ GUARDIAN TITLE END ------------>
  98.  
  99. </p>
  100. <hr class="mt-0 mb-2 w-100" style="border: 3px solid #e2ccc4; opacity: 0.6">
  101.  
  102. <!------------ CARD ------------>
  103.  
  104. <div class="card d-lg-flex d-block border-0 bg-transparent overflow-hidden" style="min-height: 100%; border-radius: 2em">
  105. <div class="pr-lg-2 mr-lg-n4" style="height: 390px; overflow-y:scroll;">
  106.  
  107. <!------------ FIRST TAB - BASICS ------------>
  108.  
  109. <div class="carousel slide p-2" id="carousel" style="color: #353535">
  110. <div class="carousel-inner">
  111. <div class="carousel-item active">
  112.  
  113. <!------------ BASICS ------------>
  114.  
  115. <div class="row no-gutters">
  116. <div class="col-lg-6 p-1">
  117.  
  118. <!------------------------>
  119.  
  120. <div class="mb-2">
  121. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Name</div>
  122. content
  123. </div>
  124.  
  125. <!------------------------>
  126.  
  127. <div class="mb-2">
  128. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Age</div>
  129. content
  130. </div>
  131.  
  132. <!------------------------>
  133.  
  134. <div class="mb-2">
  135. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Pronouns</div>
  136. con/tent
  137. </div>
  138.  
  139. <!------------------------>
  140.  
  141. <div class="mb-2">
  142. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Species</div>
  143. <a href="https://toyhou.se/~world/113661.angemos-peak" style="color: #b7adac">Angemo</a>
  144. </div>
  145.  
  146. <!------------------------>
  147.  
  148. </div>
  149. <div class="col-lg-6 p-1">
  150.  
  151. <!------------------------>
  152.  
  153. <div class="mb-2">
  154. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Subtype</div>
  155. content
  156. </div>
  157.  
  158. <!------------------------>
  159.  
  160. <div class="mb-2">
  161. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Rarity</div>
  162. content
  163. </div>
  164.  
  165. <!------------------------>
  166.  
  167. <div class="mb-2">
  168. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Masterlist</div>
  169. <a href="LINK_URL" style="color: #b7adac">CONTENT #0000</a>
  170. </div>
  171.  
  172. <!------------------------>
  173.  
  174. <div class="mb-2">
  175. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Light (magic)</div>
  176. low / average / high
  177. </div>
  178.  
  179. <!------------------------>
  180.  
  181. </div></div>
  182.  
  183. <!------------ EXTRA BASICS ------------>
  184.  
  185. <a class="collapsed" data-toggle="collapse" href="#more" style="color: #fff">
  186. <div class="text-center" style="background: #d1b6ad; font-size: 14px; font-size: 19px; border-radius: 2em"><i class="fal fa-caret-down"></i></span>
  187. </div></a>
  188.  
  189. <!------------ START ------------>
  190.  
  191. <div class="collapse" id="more">
  192. <div class="row no-gutters mt-3"><div class="col-lg-6 p-1">
  193.  
  194. <!------------------------>
  195.  
  196. <div class="mb-2">
  197. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Orientation</div>
  198. content
  199. </div>
  200.  
  201. <!------------------------>
  202.  
  203. <div class="mb-2">
  204. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Role</div>
  205. content
  206. </div>
  207.  
  208. <!------------------------>
  209.  
  210. <div class="mb-2">
  211. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Alignment</div>
  212. content
  213. </div>
  214.  
  215. <!------------------------>
  216.  
  217. </div>
  218. <div class="col-lg-6 p-1">
  219.  
  220. <!------------------------>
  221.  
  222. <div class="mb-2">
  223. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">MBTI</div>
  224. content
  225. </div>
  226.  
  227. <!------------------------>
  228.  
  229. <div class="mb-2">
  230. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Alias</div>
  231. content
  232. </div>
  233.  
  234. <!------------------------>
  235.  
  236. <div class="mb-2">
  237. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Voice/song</div>
  238. <a href="LINK_URL" style="color: #b7adac">content</a>
  239. </div>
  240.  
  241. <!------------------------>
  242.  
  243. </div></div></div>
  244.  
  245. <!------------ EXTRA BASICS END ------------>
  246.  
  247.  
  248. <!------------ QUOTE ------------>
  249.  
  250. <div class="row no-gutters">
  251. <div class="col-lg-9 p-1">
  252.  
  253. <!------------------------>
  254.  
  255. <div class="card border-0 text-center px-4 p-3 mt-2" style="height: 100px; background: #d1b6ad; color: #fff; border-radius: 10em"><p class="mt-2">
  256. <i class="far fa-quote-left" style="font-size: 50px; color: #fff; position: absolute; left: 20px; top: 20px; transform: rotate(-20deg); opacity: 0.2"></i>
  257.  
  258. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  259.  
  260. </p>
  261.  
  262. <!------------------------>
  263.  
  264. </div></div>
  265.  
  266. <!------------------------>
  267.  
  268. <div class="col-lg-3 p-1">
  269.  
  270. <!------------ MINI ICON ------------>
  271.  
  272. <div class="card p-2 rounded-circle" style="height: 110px; border: 8px solid #f6e9e5;
  273. background: #f6e9e5 url(IMG_URL) center; background-size: cover">
  274.  
  275. </div></div></div>
  276.  
  277. <!------------ QUOTE END ------------>
  278.  
  279. <hr class="mt-2 mb-3" style="border: 3px solid #e2ccc4; opacity: 0.6">
  280.  
  281. <!------------ CHARACTER DESC ------------>
  282.  
  283. <p class="p-1">
  284. <span class="px-3" style="color: #d1b6ad; font-weight: bold">
  285.  
  286. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet.<br><br>
  287.  
  288. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet.
  289.  
  290. </p>
  291. </div>
  292.  
  293. <!------------ CHARACTER DESC END ------------>
  294.  
  295.  
  296. <!------------ SECOND TAB - ABOUT ------------>
  297.  
  298. <div class="carousel-item">
  299. <div class="row no-gutters"><div class="col-lg-6 p-1">
  300.  
  301. <!------------ LIKES AND DISLIKES ------------>
  302.  
  303. <div class="row no-gutters">
  304. <div class="col-lg-2 p-1 text-center" style="background: #d1b6ad; color: #fff; border-radius: 2em">
  305.  
  306. <!------------ LIKES ------------>
  307.  
  308. <i class="far fa-heart"></i></div>
  309. <div class="col-lg-10 p-1 px-2">
  310.  
  311. <div class="text-uppercase text-center mb-2" style="font-size: 20px; background: #f6e9e5; color: #d1b6ad; font-family: georgia; font-weight: bold; line-height: 10px">
  312. Likes
  313. </div>
  314.  
  315. <!------------------------>
  316.  
  317. <ul class="mb-0">
  318.  
  319. <li>content</li>
  320. <li>content</li>
  321. <li>content</li>
  322. <li>content</li>
  323. <li>content</li>
  324.  
  325. </ul>
  326.  
  327. <!------------ LIKES END ------------>
  328.  
  329. </div></div></div>
  330. <div class="col-lg-6 p-1">
  331.  
  332. <div class="row no-gutters">
  333. <div class="col-lg-2 p-1 text-center" style="background: #d1b6ad; color: #fff; border-radius: 2em">
  334.  
  335. <!------------ DISLIKES ------------>
  336.  
  337. <i class="far fa-xmark"></i></div>
  338. <div class="col-lg-10 p-1 px-2">
  339.  
  340. <div class="text-uppercase text-center mb-2" style="font-size: 20px; background: #f6e9e5; color: #d1b6ad; font-family: georgia; font-weight: bold; line-height: 10px">
  341. Dislikes
  342. </div>
  343.  
  344. <!------------------------>
  345.  
  346. <ul class="mb-0">
  347.  
  348. <li>content</li>
  349. <li>content</li>
  350. <li>content</li>
  351. <li>content</li>
  352. <li>content</li>
  353.  
  354. </ul>
  355.  
  356. <!------------ DISLIKES END ------------>
  357.  
  358. </div></div>
  359. </div></div>
  360.  
  361. <!------------ PALETTE ------------>
  362.  
  363. <div class="row no-gutters mt-1">
  364.  
  365. <div class="col py-3" style="background:#181617; border-radius: 2em 0 0 2em"></div>
  366. <div class="col py-2" style="background:#4d4446;"></div>
  367. <div class="col py-2" style="background:#605759;"></div>
  368. <div class="col py-2" style="background:#8a7a79;"></div>
  369. <div class="col py-2" style="background:#b7adac;"></div>
  370. <div class="col py-2" style="background:#dcd7d7; border-radius: 0 2em 2em 0"></div>
  371.  
  372. </div>
  373.  
  374. <!------------ OC TAGS / AESTHETICS - ADD MORE BY JUST COPY & PASTING! ------------>
  375.  
  376. <div class="text-left mt-3">
  377.  
  378. <span class="badge badge-pill caterpie p-2 mb-1" style="background: #e2ccc4; font-size: 14px">
  379. oc aesthetics
  380. </span>
  381. <span class="badge badge-pill caterpie p-2 mb-1" style="background: #d1b6ad; font-size: 14px">
  382. goes here
  383. </span>
  384. <span class="badge badge-pill caterpie p-2 mb-1" style="background: #e2ccc4; font-size: 14px">
  385. content
  386. </span>
  387. <span class="badge badge-pill caterpie p-2 mb-1" style="background: #d1b6ad; font-size: 14px">
  388. content
  389. </span>
  390. <span class="badge badge-pill caterpie p-2 mb-1" style="background: #e2ccc4; font-size: 14px">
  391. content
  392. </span>
  393. <span class="badge badge-pill caterpie p-2 mb-1" style="background: #d1b6ad; font-size: 14px">
  394. content
  395. </span>
  396. <span class="badge badge-pill caterpie p-2 mb-1" style="background: #e2ccc4; font-size: 14px">
  397. content
  398. </span>
  399. <span class="badge badge-pill caterpie p-2 mb-1" style="background: #d1b6ad; font-size: 14px">
  400. content
  401. </span>
  402.  
  403. <!------------ AESTHETIC / TAGS END ------------>
  404.  
  405. </div>
  406. <hr class="mt-2 mb-2" style="border: 3px solid #e2ccc4; opacity: 0.6">
  407.  
  408. <!------------ TRIVIA ------------>
  409.  
  410. <div class="text-uppercase text-center mb-3 mt-3" style="font-size: 30px; background: #f6e9e5; color: #d1b6ad; font-family: georgia; font-weight: bold; line-height: 10px">
  411. TRIVIA
  412. </div>
  413.  
  414. <!------------------------>
  415.  
  416. <ul class="mt-2">
  417.  
  418. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  419. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  420. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  421. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  422. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  423.  
  424. </ul>
  425.  
  426. <!------------ TRIVIA END ------------>
  427.  
  428. </div>
  429.  
  430. <!------------ THIRD TAB - STORY/BACKGROUND ------------>
  431.  
  432. <div class="carousel-item">
  433.  
  434. <!------------ SUBHEADER ------------>
  435.  
  436. <div class="text-uppercase text-center mb-3 mt-3" style="font-size: 30px; background: #f6e9e5; color: #d1b6ad; font-family: georgia; font-weight: bold; line-height: 10px">
  437. SUBHEADER
  438. </div>
  439.  
  440. <!------------------------>
  441.  
  442. <p class="p-1">
  443.  
  444. 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.<br><br>
  445.  
  446. 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.
  447.  
  448. </p>
  449.  
  450. <!------------ SUBHEADER ------------>
  451.  
  452. <div class="text-uppercase text-center mb-3 mt-3" style="font-size: 30px; background: #f6e9e5; color: #d1b6ad; font-family: georgia; font-weight: bold; line-height: 10px">
  453. SUBHEADER
  454. </div>
  455.  
  456. <!------------------------>
  457.  
  458. <p class="p-1">
  459.  
  460. 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.<br><br>
  461.  
  462. 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.
  463.  
  464. </p>
  465.  
  466. <!------------ ADD MORE ABOVE THIS LINE ------------>
  467.  
  468.  
  469. <!------------------------>
  470.  
  471. </div>
  472.  
  473. <!------------ FOURTH TAB - RELATIONSHIPS ------------>
  474.  
  475. <div class="carousel-item">
  476.  
  477. <!------------ RELATIONSHIP 1 ------------>
  478.  
  479. <div class="row no-gutters"><div class="col-lg-4 p-1">
  480.  
  481. <!------------ IMAGE ------------>
  482.  
  483. <div class="card p-2 rounded-circle" style="height: 150px; border: 10px solid #f6e9e5;
  484. background: #f6e9e5 url(IMG_URL) center; background-size: cover">
  485. </div></div>
  486.  
  487. <!------------------------>
  488.  
  489. <div class="col-lg-8 p-1">
  490.  
  491. <!------------ NAME/LINK ------------>
  492.  
  493. <div class="text-uppercase mb-2 mt-2" style="font-size: 30px; background: #f6e9e5; font-family: georgia; font-weight: bold; line-height: 10px;">
  494. <a href="LINK_URL" style="color: #d1b6ad">NAME</a></div>
  495.  
  496. <!------------------------>
  497.  
  498. <div class="mb-2" style="color: #d1b6ad; font-weight: bold">relationship</div>
  499.  
  500. <!------------------------>
  501.  
  502. <div class="pr-lg-2 mr-lg-n4" style="height: 100px; overflow-y:scroll;">
  503.  
  504. 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. Aliquam magna libero, dictum sit amet.
  505.  
  506. </div></div></div>
  507.  
  508. <!------------ RELATIONSHIP END ------------>
  509.  
  510. <hr class="mt-2 mb-2" style="border: 3px solid #e2ccc4; opacity: 0.6">
  511.  
  512.  
  513. <!------------ RELATIONSHIP 2 ------------>
  514.  
  515. <div class="row no-gutters"><div class="col-lg-4 p-1">
  516.  
  517. <!------------ IMAGE ------------>
  518.  
  519. <div class="card p-2 rounded-circle" style="height: 150px; border: 10px solid #f6e9e5;
  520. background: #f6e9e5 url(IMG_URL) center; background-size: cover">
  521. </div></div>
  522.  
  523. <!------------------------>
  524.  
  525. <div class="col-lg-8 p-1">
  526.  
  527. <!------------ NAME/LINK ------------>
  528.  
  529. <div class="text-uppercase mb-2 mt-2" style="font-size: 30px; background: #f6e9e5; font-family: georgia; font-weight: bold; line-height: 10px;">
  530. <a href="LINK_URL" style="color: #d1b6ad">NAME</a></div>
  531.  
  532. <!------------------------>
  533.  
  534. <div class="mb-2" style="color: #d1b6ad; font-weight: bold">relationship</div>
  535.  
  536. <!------------------------>
  537.  
  538. <div class="pr-lg-2 mr-lg-n4" style="height: 100px; overflow-y:scroll;">
  539.  
  540. 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. Aliquam magna libero, dictum sit amet.
  541.  
  542. </div></div></div>
  543.  
  544. <!------------ RELATIONSHIP END ------------>
  545.  
  546. <hr class="mt-2 mb-2" style="border: 3px solid #e2ccc4; opacity: 0.6">
  547.  
  548. <!------------ RELATIONSHIP 3 ------------>
  549.  
  550. <div class="row no-gutters"><div class="col-lg-4 p-1">
  551.  
  552. <!------------ IMAGE ------------>
  553.  
  554. <div class="card p-2 rounded-circle" style="height: 150px; border: 10px solid #f6e9e5;
  555. background: #f6e9e5 url(IMG_URL) center; background-size: cover">
  556. </div></div>
  557.  
  558. <!------------------------>
  559.  
  560. <div class="col-lg-8 p-1">
  561.  
  562. <!------------ NAME/LINK ------------>
  563.  
  564. <div class="text-uppercase mb-2 mt-2" style="font-size: 30px; background: #f6e9e5; font-family: georgia; font-weight: bold; line-height: 10px;">
  565. <a href="LINK_URL" style="color: #d1b6ad">NAME</a></div>
  566.  
  567. <!------------------------>
  568.  
  569. <div class="mb-2" style="color: #d1b6ad; font-weight: bold">relationship</div>
  570.  
  571. <!------------------------>
  572.  
  573. <div class="pr-lg-2 mr-lg-n4" style="height: 100px; overflow-y:scroll;">
  574.  
  575. 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. Aliquam magna libero, dictum sit amet.
  576.  
  577. </div></div></div>
  578.  
  579. <!------------ RELATIONSHIP END ------------>
  580.  
  581. <hr class="mt-2 mb-2" style="border: 3px solid #e2ccc4; opacity: 0.6">
  582.  
  583. <!------------ ADD MORE ABOVE THIS LINE ------------>
  584.  
  585.  
  586. <!------------------------>
  587.  
  588. </div></div></div>
  589. </div></div></div>
  590. </div>
  591.  
  592. <!------------ SECOND COLUMN END ------------>
  593.  
  594.  
  595. <!------------ THIRD COLUMN - IMAGES ------------>
  596.  
  597.  
  598. <div class="col-lg-2 p-1">
  599.  
  600. <!------------ FIRST IMAGE ------------>
  601.  
  602. <div class="card border-0 mb-2" style="height: 150px; background: url(IMG_URL) center; background-size: cover; border-radius: 2em">
  603. </div>
  604.  
  605. <!------------ ICON ------------>
  606.  
  607. <div class="card border-0 mb-2" style="height: 150px; background: #d1b6ad; font-size: 40px; border-radius: 0.6em"><div class="container align-items-center justify-content-center" style="height: 150px">
  608. <i class="fal fa-clouds" style="color: #fff"></i>
  609. </div></div>
  610.  
  611. <!------------ SECOND IMAGE ------------>
  612.  
  613. <div class="card border-0 mb-2" style="height: 150px; background: url(IMG_URL) center; background-size: cover; border-radius: 2em;
  614. box-shadow: 0px 20px 0 #d1b6ad">
  615.  
  616. <!------------ STAR DECO ------------>
  617.  
  618. <i class="fas fa-star fa-spin" style="animation-duration: 2s; font-size: 50px; color: #e9d3cb;
  619. position: absolute; right: -20px; bottom: -10px; text-shadow: -2px 0 #fff , 0 2px #fff , 2px 0 #fff , 0 -2px #fff"></i>
  620.  
  621. <!------------ THIRD COLUMN END ------------>
  622.  
  623. </div></div>
  624. </div></div>
  625.  
  626. <!------------ TABS ------------>
  627.  
  628. <div class="container" style="max-width: 1100px"><div class="mx-auto text-justify p-1">
  629. <ul class="nav nav-pills nav-fill d-flex">
  630.  
  631. <!------------------------>
  632.  
  633. <li class="nav-item">
  634. <a class="col border-0 p-3 text-center nav-link" style="background: #d1b6ad; color: #fff; font-size: 15px; border-radius: 2em 0 0 2em; box-shadow: -20px 0 0 #d1b6ad" data-slide-to="0" href="#carousel">
  635. <i class="far fa-clouds"></i></a>
  636. </li>
  637.  
  638. <!------------------------>
  639.  
  640. <li class="nav-item">
  641. <a class="col border-0 rounded-0 p-3 text-center nav-link" style="background: #d1b6ad; color: #fff; font-size: 15px; border-radius: 0" data-slide-to="1" href="#carousel">
  642. <i class="far fa-feather"></i></a>
  643. </li>
  644.  
  645. <!------------------------>
  646.  
  647. <li class="nav-item">
  648. <a class="col border-0 rounded-0 p-3 text-center nav-link" style="background: #d1b6ad; color: #fff; font-size: 15px; border-radius: 0" data-slide-to="2" href="#carousel">
  649. <i class="far fa-books"></i></a>
  650. </li>
  651.  
  652. <!------------------------>
  653.  
  654. <li class="nav-item">
  655. <a class="col border-0 p-3 text-center nav-link" style="background: #d1b6ad; color: #fff; font-size: 15px; border-radius: 0 2em 2em 0" data-slide-to="3" href="#carousel">
  656. <i class="far fa-users"></i></a>
  657. </li>
  658. </ul>
  659.  
  660. <!------------ TABS END ------------>
  661.  
  662.  
  663. <!------------ CREDIT - DO NOT REMOVE PLS! FEEL FREE TO MOVE IT AS LONG AS IT'S STILL VISIBLE ^^ ------------>
  664.  
  665. <div class="text-right px-1">
  666.  
  667. <a href="https://toyhou.se/burakkujakku" style="color: #d1b6ad; opacity: 0.5">
  668. <i class="far fa-fish-bones tooltipster mr-1" title="code by burakkujakku"></i></a>
  669.  
  670. <a href="https://toyhou.se/6259293." style="color: #d1b6ad; opacity: 0.5">
  671. <i class="far fa-image tooltipster" title="background pattern"></i></a>
  672.  
  673. </div>
  674.  
  675. <!------------ END ------------>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!