API tools faq
paste
Advertisement
LeafJelly

Outlines Chara Code Theme

LeafJelly
Nov 10th, 2022 (edited)
774
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.27 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------
  2. Free to Use Chara Code
  3. Outlines by LeafJelly
  4.  
  5. TH Theme Colors! It adjusts the colors to your current theme
  6. ------------------------------------>
  7.  
  8. <div class="row no-gutters col-12 col-lg-8 mx-auto" style="width:900px;font-weight:100;font-family:calibri;">
  9. <!------------------ NAVIGATION BUTTONS ----------------------->
  10. <div class="col-2 col-lg-1">
  11. <div class="nav flex-column">
  12. <a class="nav-item btn btn-outline-primary" style="border-radius:2em 0em 0em 1em; border-width:1px 0px 1px 1px" data-toggle="tab" href="#one">
  13. <i class="fal fa-star fa-lg"></i></a>
  14.  
  15. <a class="nav-item btn btn-outline-primary mt-1" style="border-radius:1em 0em 0em 1em; border-width:1px 0px 1px 1px" data-toggle="tab" href="#two">
  16. <i class="fal fa-book fa-lg"></i></a>
  17.  
  18. <a class="nav-item btn btn-outline-primary mt-1" style="border-radius:1em 0em 0em 1em; border-width:1px 0px 1px 1px" data-toggle="tab" href="#three">
  19. <i class="fal fa-image fa-lg"></i></a>
  20.  
  21. <a class="nav-item btn btn-outline-primary mt-1" style="border-radius:1em 0em 0em 1em; border-width:1px 0px 1px 1px" data-toggle="tab" href="#four">
  22. <i class="fal fa-palette fa-lg"></i></a>
  23.  
  24. <a class="nav-item btn btn-outline-primary mt-1" style="border-radius:1em 0em 0em 1em; border-width:1px 0px 1px 1px" data-toggle="tab" href="#five">
  25. <i class="fal fa-users fa-lg"></i></a>
  26.  
  27. <!-----Music Player
  28. Replace l69v6SVoE9k with your youtube ID, but keep the ?controls=0
  29. You can find this by clicking share button on the youtube video. The ID is the stuff after .com/
  30. ------>
  31. <a class="nav-item btn melody-embed btn-outline-primary text-primary mt-1" style="border-radius:1em 0em 0em 2em; border-width:1px 0px 1px 1px">
  32. <iframe style="opacity:.01;position:absolute;right:0;top:200px;height:120px;width:200px;transform:rotate(180deg)"
  33.  
  34.  
  35. src="https://www.youtube.com/embed/l69v6SVoE9k?controls=0" frameborder="0"></iframe>
  36.  
  37. <i class="fal fa-play-pause fa-fw fa-lg" ></i></a>
  38. </div>
  39. </div>
  40.  
  41. <div class="card card-outline-primary col-10 col-lg-11 py-2 px-1 px-lg- " style="border-radius:0em 2em 2em 2em; min-height:450px;">
  42. <div class="tab-content">
  43. <!---------Tab one----------->
  44. <div class="tab-pane fade p-1 pb-2 active show" id="one">
  45. <div class="row no-gutters">
  46. <div class="col-12 col-lg-8 my-auto text-center">
  47. <p class="text-uppercase text-primary text-primary text-primary m-0" style="font-size:1.5em; font-weight:300; letter-spacing:.1px">
  48. Character Name</p>
  49. <span style="font-weight:400;">
  50. adj &#183; adj &#183; adj &#183; adj
  51. </span>
  52. <hr class="mt-2">
  53.  
  54. <!----------------Character Basics it goes Left to Right----------------------->
  55. <div class="row no-gutters">
  56. <div class="col-12 col-md-6">
  57. <div class="px-1 px-lg-3 justify-content-between">
  58. <p class="text-uppercase text-primary " style="font-weight:400; letter-spacing:.1px">
  59. Name
  60. </p>
  61. Content Content
  62. </div>
  63. <hr class="col-10 my-1 mx-auto">
  64. </div>
  65.  
  66. <div class="col-12 col-md-6">
  67. <div class="px-1 px-lg-3 justify-content-between">
  68. <p class="text-uppercase text-primary " style="font-weight:400; letter-spacing:.1px">
  69. Age
  70. </p>
  71. # Years Old
  72. </div>
  73. <hr class="col-10 my-1 mx-auto">
  74. </div>
  75.  
  76. <div class="col-12 col-md-6">
  77. <div class="px-1 px-lg-3 justify-content-between">
  78. <p class="text-uppercase text-primary " style="font-weight:400; letter-spacing:.1px">
  79. Gender
  80. </p>
  81. Content
  82. </div>
  83. <hr class="col-10 my-1 mx-auto">
  84. </div>
  85.  
  86. <div class="col-12 col-md-6">
  87. <div class="px-1 px-lg-3 justify-content-between">
  88. <p class="text-uppercase text-primary " style="font-weight:400; letter-spacing:.1px">
  89. Pronouns
  90. </p>
  91. She/Her &ndash; They/Them
  92. </div>
  93. <hr class="col-10 my-1 mx-auto">
  94. </div>
  95.  
  96. <div class="col-12 col-md-6">
  97. <div class="px-1 px-lg-3 justify-content-between">
  98. <p class="text-uppercase text-primary " style="font-weight:400; letter-spacing:.1px">
  99. Orientation
  100. </p>
  101. Content
  102. </div>
  103. <hr class="col-10 my-1 mx-auto">
  104. </div>
  105.  
  106. <div class="col-12 col-md-6">
  107. <div class="px-1 px-lg-3 justify-content-between">
  108. <p class="text-uppercase text-primary " style="font-weight:400; letter-spacing:.1px">
  109. Height
  110. </p>
  111. Content
  112. </div>
  113. <hr class="col-10 my-1 mx-auto">
  114. </div>
  115.  
  116. <div class="col-12 col-md-6">
  117. <div class="px-1 px-lg-3 justify-content-between">
  118. <p class="text-uppercase text-primary " style="font-weight:400; letter-spacing:.1px">
  119. Race/Species
  120. </p>
  121. Content
  122. </div>
  123. <hr class="col-10 my-1 mx-auto">
  124. </div>
  125.  
  126. <div class="col-12 col-md-6">
  127. <div class="px-1 px-lg-3 justify-content-between">
  128. <p class="text-uppercase text-primary " style="font-weight:400; letter-spacing:.1px">
  129. Occupation
  130. </p>
  131. Content
  132. </div>
  133. <hr class="col-10 my-1 mx-auto">
  134. </div>
  135. <!-------Copy and paste above here for more------->
  136. </div>
  137.  
  138. <p>This does not scroll don't make it too long. Write a lil about your character here 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.</p>
  139.  
  140. <div>
  141. </div>
  142. </div>
  143. <!------ Character Image ------->
  144. <div class="col-12 col-lg-4 p-2 h-100" style="top:0px; position: sticky;">
  145. <div class="card card-outline-primary col-12 p-0" style="border-radius:2em;height:400px;
  146.  
  147. background-image: url(https://cdn.discordapp.com/attachments/395263691085316096/1039630377498714203/mmiklu.png);
  148.  
  149. background-position:center; background-repeat:no-repeat; background-size:cover;"></div>
  150. </div>
  151. </div>
  152. </div>
  153.  
  154. <!---------Tab two----------->
  155. <div class="tab-pane fade p-1 pb-2" id="two" style="height:430px;overflow:auto;">
  156.  
  157. <div class="row no-gutters">
  158. <p class="text-uppercase text-primary text-primary m-0 p-0" style="font-size:1.5em; font-weight:300; letter-spacing:.1px;">
  159. <i class="fal fa-book"></i>
  160. Trivia</p>
  161. <hr class="my-1" width="100%">
  162. <ul class="pl-4" style="list-style-type:none;">
  163. <li><i class="fa-light fa-chevron-right mr-1"></i>
  164. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat</li>
  165. <li><i class="fa-light fa-chevron-right mr-1"></i>
  166. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
  167. <li><i class="fa-light fa-chevron-right mr-1"></i>
  168. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus..</li>
  169.  
  170. <!--------Copy and paste above here for more bulletin points------------->
  171. </ul>
  172.  
  173. <div class="col-12 col-md-6 m-0 p-0">
  174. <p class="text-uppercase text-primary text-primary m-0 p-0" style="font-size:1.5em; font-weight:300; letter-spacing:.1px;">
  175. <i class="fal fa-heart" ></i>
  176. Likes</p>
  177. <hr class="mx-0 my-1 col-10">
  178. <ul class="pl-4" style="list-style-type:none;">
  179. <li><i class="fa-light fa-heart fa-xs mr-1"></i>
  180. Lorem ipsum dolor sit amet, consectetuer adipiscing.</li>
  181. <li><i class="fa-light fa-heart fa-xs mr-1"></i>
  182. Aliquam tincidunt mauris eu risus.</li>
  183. <li><i class="fa-light fa-heart fa-xs mr-1"></i>
  184. Vestibulum auctor dapibus neque.</li>
  185. <li><i class="fa-light fa-heart fa-xs mr-1"></i>
  186. Nunc dignissim risus id metus.</li>
  187. <li><i class="fa-light fa-heart fa-xs mr-1"></i>
  188. Cras ornare tristique elit.</li>
  189.  
  190. <!--------Copy and paste above here for more bulletin points------------->
  191. </ul>
  192. </div>
  193.  
  194. <div class="col-12 col-md-6 m-0 p-0">
  195. <p class="text-uppercase text-primary text-primary m-0 p-0" style="font-size:1.5em; font-weight:300; letter-spacing:.1px;">
  196. <i class="fal fa-xmark"></i>
  197. Disikes</p>
  198. <hr class="mx-0 my-1 col-10">
  199. <ul class="pl-4" style="list-style-type:none;">
  200. <li><i class="fa-light fa-xmark fa-xs mr-1"></i>
  201. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  202. <li><i class="fa-light fa-xmark fa-xs mr-1"></i>
  203. Aliquam tincidunt mauris eu risus.</li>
  204. <li><i class="fa-light fa-xmark fa-xs mr-1"></i>
  205. Vestibulum auctor dapibus neque.</li>
  206. <li><i class="fa-light fa-xmark fa-xs mr-1"></i>
  207. Nunc dignissim risus id metus.</li>
  208. <li><i class="fa-light fa-xmark fa-xs mr-1"></i>
  209. Cras ornare tristique elit.</li>
  210.  
  211. <!--------Copy and paste above here for more bulletin points------------->
  212. </ul>
  213. </div>
  214.  
  215. </div>
  216. </div>
  217.  
  218. <!---------Tab three----------->
  219. <div class="tab-pane fade p-1 pb-2" id="three">
  220. <p class="text-uppercase text-primary text-primary m-0 p-0" style="font-size:1.5em; font-weight:300; letter-spacing:.1px;">
  221. <i class="fal fa-image"></i>
  222. Moodboard</p>
  223.  
  224. <div class="row no-gutters p-0">
  225. <!------Image 1------->
  226. <div class="col-6 col-md-4 p-1 p-md-1">
  227. <div class="col-12 card card-outline-primary" style="height:190px;border-radius:1em;background-size:cover; background-position:center;
  228. background-image: url(https://64.media.tumblr.com/be48a3834e423b71a32a2455783f643d/523d0614d5e57e2d-d1/s540x810/263baf757917ed12d9307dd99a7a06cc6796aedd.jpg);"></div>
  229. </div>
  230.  
  231. <!------Image 2------->
  232. <div class="col-6 col-md-4 p-1 p-md-1">
  233. <div class="col-12 card card-outline-primary" style="height:190px;border-radius:1em;background-size:cover; background-position:center;
  234. background-image: url(https://i.pinimg.com/originals/b5/94/c2/b594c21122eca227d7ee918ffb09377f.jpg);"></div>
  235. </div>
  236.  
  237. <!------Image 3------->
  238. <div class="col-6 col-md-4 p-1 p-md-1">
  239. <div class="col-12 card card-outline-primary" style="height:190px;border-radius:1em;background-size:cover; background-position:center;
  240. background-image: url(https://i.pinimg.com/736x/41/86/e0/4186e0e3dfa39c7cb1b0702ea988d89d--crystal-wallpaper-gem-wallpaper.jpg);"></div>
  241. </div>
  242.  
  243. <!------Image 4------->
  244. <div class="col-6 col-md-4 p-1 p-md-1">
  245. <div class="col-12 card card-outline-primary" style="height:190px;border-radius:1em;background-size:cover; background-position:center;
  246. background-image: url(https://data.whicdn.com/images/350071668/original.jpg);"></div>
  247. </div>
  248.  
  249. <!------Image 5------->
  250. <div class="col-6 col-md-4 p-1 p-md-1">
  251. <div class="col-12 card card-outline-primary" style="height:190px;border-radius:1em;background-size:cover; background-position:center;
  252. background-image: url(https://i.pinimg.com/736x/88/65/9e/88659e0bbbe8f2192929a15ed35f250b.jpg);"></div>
  253. </div>
  254.  
  255. <!------Image 6------->
  256. <div class="col-6 col-md-4 p-1 p-md-1">
  257. <div class="col-12 card card-outline-primary" style="height:190px;border-radius:1em;background-size:cover; background-position:center;
  258. background-image: url(https://cdna.pcpartpicker.com/static/forever/images/userbuild/254252.42ef8e991ebc34dffd9d3e4e495e1b91.1600.jpg);"></div>
  259. </div>
  260.  
  261.  
  262.  
  263. <!-----------Copy and Paste above Here--------------->
  264. </div>
  265.  
  266. </div>
  267.  
  268. <!---------Tab Four----------->
  269. <div class="tab-pane fade p-1 p-1" id="four">
  270.  
  271. <p class="text-uppercase text-primary text-primary m-0 p-0" style="font-size:1.5em; font-weight:300; letter-spacing:.1px;">
  272. <i class="fal fa-palette"></i>
  273. Design Notes</p>
  274.  
  275. <div class="col-12 px-3 pt-2 my-auto text-center">
  276. <ul class="col-12 px-3 text-left" style="list-style-type:none; min-height:150px ;max-height:330px;overflow-y:scroll;overflow-x:hidden">
  277. <!------ Reference Image ------->
  278. <img src="https://magicalmirai.com/2016/images/sp_outfit_l.jpg"
  279. class="pull-left mr-2" style="width:70%">
  280.  
  281. <!------ Bulletin List ------->
  282. <li><i class="fa-light fa-chevron-right mr-1"></i>
  283. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  284. <li><i class="fa-light fa-chevron-right mr-1"></i>
  285. Duis sollicitudin elit sed tellus blandit </li>
  286. <li><i class="fa-light fa-chevron-right mr-1"></i>
  287. Duis porta eros et velit blandit dapibus.</li>
  288. <li><i class="fa-light fa-chevron-right mr-1"></i>
  289. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat</li>
  290. <li><i class="fa-light fa-chevron-right mr-1"></i>
  291. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. </li>
  292. <li><i class="fa-light fa-chevron-right mr-1"></i>
  293. Duis porta eros et velit blandit dapibus.</li>
  294. <li><i class="fa-light fa-chevron-right mr-1"></i>
  295. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat</li>
  296. <li><i class="fa-light fa-chevron-right mr-1"></i>
  297. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
  298. <!--------Copy and paste abvoe here for more bulletins-------->
  299. </ul>
  300. </div>
  301.  
  302. <!------ Color Pallete. Change the #Hex codes
  303. You can remove or add more colors by copy and pasting/deleting 1 line of code------->
  304. <div class="col-12 row no-gutters my-auto" style="height:30px">
  305. <div class="col mr-1" style="border-radius:.5em; background:#23272C"></div>
  306. <div class="col mr-1" style="border-radius:.5em; background:#373F46"></div>
  307. <div class="col mr-1" style="border-radius:.5em; background:#C2CBCC"></div>
  308. <div class="col mr-1" style="border-radius:.5em; background:#FFF"></div>
  309. <div class="col mr-1" style="border-radius:.5em; background:#FC7AA3"></div>
  310. <div class="col mr-1" style="border-radius:.5em; background:#27BDDA"></div>
  311. <div class="col mr-1" style="border-radius:.5em; background:#B9FBE9"></div>
  312.  
  313. <!-------Copy and paste above here------->
  314. </div>
  315. </div>
  316.  
  317.  
  318. <!---------Tab five----------->
  319. <div class="tab-pane fade p-1 pb-2" id="five" style="max-height:400px; overflow:auto">
  320. <p class="text-uppercase text-primary text-primary m-0 p-0" style="font-size:1.5em; font-weight:300; letter-spacing:.1px;">
  321. <i class="fal fa-users"></i> Relationships</p>
  322. <hr class="my-1">
  323.  
  324. <!----------Relationship 1------------->
  325. <div class="row no-gutters my-2">
  326. <!----Image----->
  327. <div class="card card-outline-primary rounded-circle mx-auto" style="height:150px;width:150px;
  328.  
  329. background: url(https://64.media.tumblr.com/89eabb3c0c26006e7535b425483c8778/63e3060d3fc2ce99-46/s250x400/3be8409148c4f3eb483dd905b30b4b627af9ee66.png) center;
  330.  
  331. background-repeat:no-repeat; background-size:cover;"></div>
  332.  
  333. <div class="col-12 col-lg-8">
  334. <a class="text-uppercase text-primary " style="font-weight:400; letter-spacing:1px"
  335. href="URL_HERE">
  336. Character Name
  337. </a>
  338.  
  339. <!----Info Delete this if you don't it------>
  340. <div>
  341. <span class="mx-2">
  342. <i class="fa-light fa-piano-keyboard"></i>
  343. Relationship Type
  344. </span>
  345.  
  346. <span class="mx-2">
  347. <i class="fa-light fa-hourglass-end"></i>
  348. Age
  349. </span>
  350.  
  351. <span class="mx-2">
  352. <i class="fa-light fa-user"></i>
  353. Pronouns
  354. </span>
  355.  
  356. </div>
  357. <!--------Info End------->
  358.  
  359. <!-----Text------>
  360. <p>
  361. 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.
  362. </p>
  363. </div>
  364.  
  365. </div>
  366. <hr class="my-1">
  367. <!----------Relationship 1 END------------->
  368.  
  369.  
  370. <!----------Relationship 2------------->
  371. <div class="row no-gutters my-2 text-right">
  372.  
  373. <div class="col-12 col-lg-8">
  374. <a class="text-uppercase text-primary " style="font-weight:400; letter-spacing:1px"
  375. href="URL_HERE">
  376. Character Name
  377. </a>
  378.  
  379. <!----Info Delete this if you don't it------>
  380. <div>
  381. <span class="mx-2">
  382. <i class="fa-light fa-guitar-electric"></i>
  383. Relationship Type
  384. </span>
  385.  
  386. <span class="mx-2">
  387. <i class="fa-light fa-hourglass-end"></i>
  388. Age
  389. </span>
  390.  
  391. <span class="mx-2">
  392. <i class="fa-light fa-user"></i>
  393. Pronouns
  394. </span>
  395.  
  396. </div>
  397. <!--------Info End------->
  398.  
  399. <!-----Text------>
  400. <p>
  401. 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.
  402. </p>
  403. </div>
  404.  
  405. <!----Image----->
  406. <div class="card card-outline-primary rounded-circle mx-auto" style="height:150px;width:150px;
  407.  
  408. background: url(https://64.media.tumblr.com/72c579478bbe7605fa14aba22c02c5a8/63e3060d3fc2ce99-83/s250x400/856d5f3b6d740aa2411b91e870c065f7ca0a55be.png) center;
  409.  
  410. background-repeat:no-repeat; background-size:cover;"></div>
  411.  
  412. </div>
  413. <hr class="my-1">
  414. <!----------Relationship 2 END------------->
  415.  
  416.  
  417. <!----------Relationship 3------------->
  418. <div class="row no-gutters my-2">
  419. <!----Image----->
  420. <div class="card card-outline-primary rounded-circle mx-auto" style="height:150px;width:150px;
  421.  
  422. background: url(https://64.media.tumblr.com/85ec1e14a9d4c550fc1fdfb0e473ff4f/63e3060d3fc2ce99-30/s250x400/b18656d9a307382b51786de45c434feac1532782.png) center;
  423.  
  424. background-repeat:no-repeat; background-size:cover;"></div>
  425.  
  426. <div class="col-12 col-lg-8">
  427. <a class="text-uppercase text-primary " style="font-weight:400; letter-spacing:1px"
  428. href="URL_HERE">
  429. Character Name
  430. </a>
  431.  
  432. <!----Info Delete this if you don't it------>
  433. <div>
  434. <span class="mx-2">
  435. <i class="fa-light fa-drum"></i>
  436. Relationship Type
  437. </span>
  438.  
  439. <span class="mx-2">
  440. <i class="fa-light fa-hourglass-end"></i>
  441. Age
  442. </span>
  443.  
  444. <span class="mx-2">
  445. <i class="fa-light fa-user"></i>
  446. Pronouns
  447. </span>
  448.  
  449. </div>
  450. <!--------Info End------->
  451.  
  452. <!-----Text------>
  453. <p>
  454. 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.
  455. </p>
  456. </div>
  457.  
  458. </div>
  459. <hr class="my-1">
  460. <!----------Relationship 3 END------------->
  461.  
  462.  
  463. <!----------Relationship 4------------->
  464. <div class="row no-gutters my-2 text-right">
  465.  
  466. <div class="col-12 col-lg-8">
  467. <a class="text-uppercase text-primary " style="font-weight:400; letter-spacing:1px"
  468. href="URL_HERE">
  469. Character Name
  470. </a>
  471.  
  472. <!----Info Delete this if you don't it------>
  473. <div>
  474. <span class="mx-2">
  475. <i class="fa-light fa-microphone-stand"></i>
  476. Relationship Type
  477. </span>
  478.  
  479. <span class="mx-2">
  480. <i class="fa-light fa-hourglass-end"></i>
  481. Age
  482. </span>
  483.  
  484. <span class="mx-2">
  485. <i class="fa-light fa-user"></i>
  486. Pronouns
  487. </span>
  488.  
  489. </div>
  490. <!--------Info End------->
  491.  
  492. <!-----Text------>
  493. <p>
  494. 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.
  495. </p>
  496.  
  497. </div>
  498.  
  499. <!----Image----->
  500. <div class="card card-outline-primary rounded-circle mx-auto" style="height:150px;width:150px;
  501.  
  502. background: url(https://64.media.tumblr.com/1b512d99ec25e7aed99434be0b11c382/63e3060d3fc2ce99-a4/s250x400/6875a5791c908157a78ad99b3cf0973a79cfd96c.png) center;
  503.  
  504. background-repeat:no-repeat; background-size:cover;"></div>
  505. </div>
  506. <hr class="my-1">
  507. <!----------Relationship 4 END------------->
  508.  
  509. </div>
  510.  
  511. </div>
  512. </div>
  513. </div>
  514.  
  515. <!--------Credit do not remove----------->
  516. <div class="col-12 col-lg-8 text-center my-1 mx-auto">
  517. <a href="/LeafJelly" title="HTML by LeafJelly"><i class="fal fa-code text-muted mx-1"></i></a>
  518. </div>
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!