API tools faq
paste
Advertisement
whitexlixs

Muse Loona SS22 - Free code

whitexlixs
Jun 4th, 2022
392
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 87.25 KB | None | 0 0
raw download clone embed print report
  1. <html lang="en">
  2. <head>
  3. <!-- Required meta tags -->
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <!-- Bootstrap CSS -->
  7. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  8. <script src="https://kit.fontawesome.com/d62d4bf391.js" crossorigin="anonymous"></script>
  9. <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">
  10. <style type="text/css">
  11. /* Hide scrollbar for Chrome, Safari and Opera */
  12. .container::-webkit-scrollbar {
  13. display: none;
  14. }
  15. .info::-webkit-scrollbar {
  16. display: none;
  17. }
  18. body{
  19. background-image: url( /* write the url of your background here */ );
  20. background-color:; /*background color for the page*/
  21. /*background image for all the page*/
  22. }
  23. .container{
  24. background-color: #000; /*background color of the container*/
  25. margin-top: 4%; -ms-overflow-style: none;
  26. padding-top: 2%;
  27. overflow: scroll;
  28. height: 550px;
  29. }
  30. .columna{
  31. width: 150px;
  32. }
  33. .themuses{
  34. padding-top: 1%;
  35. float: auto;
  36. font-family: 'Abril Fatface', cursive;
  37. font-size: 25px;
  38. color: #fff; /*color of the 'meet the muses'*/
  39. line-height: 15px;
  40. width: 100%;
  41. padding-bottom: 1%;
  42. background-color: #000; /*background color of the 'meet muses'*/
  43. }
  44. .container p{
  45. font-family: 'Abril Fatface', cursive;
  46. font-size: 25px;
  47. text-align: center;
  48. color: #fff; /*color for the character names*/
  49. }
  50. @media (min-width: 576px){
  51. .modal-dialog {
  52. max-width: 885px;
  53. margin: 1.75rem auto;
  54. }
  55. }
  56. /* Hide scrollbar for IE and Edge. don't touch this. */
  57. .modal-footer{
  58. border-top: none;
  59. }
  60. .info{
  61. text-align: justify;
  62. height: 274px;
  63. font-size: 13px;
  64. background: #fff;
  65. padding-top: 2%;
  66. overflow: scroll;
  67. padding-right: 2%;
  68. -ms-overflow-style: none;
  69. margin-top: 2%;
  70. padding-left: 2%;
  71. }
  72. .info-general strong{
  73. background: #000; /*color for 'name, city, etc' in the modal*/
  74. padding: 1%;
  75. text-transform: uppercase;
  76. color: #fff;
  77. }
  78. .info h1{
  79. font-family: 'Abril Fatface', cursive;
  80. }
  81. .fa, .far, .fas, .fa-pinterest{
  82. color:#000; /*color for the social media icons*/
  83. }
  84. h1{
  85. font-family: 'Abril Fatface', cursive;
  86. color:#000; /*color for character name in the modal*/
  87. }
  88. .instagram h3, .pinterest h3{
  89. font-size: 18px;
  90. text-align: left;
  91. }
  92. .instagram h5{
  93. font-size: 10px;
  94. text-align: left;
  95. }
  96. .modal-body{
  97. padding-top: 0px;
  98. background-color: #fff; /*color for the background color in the modal*/
  99. }
  100. .pinterest{
  101. font-size: 11px;
  102. text-align: left;
  103. }
  104. .instagram, .pinterest{
  105. border: 1px solid #fff;
  106. padding: 2%;
  107. background: #fff;
  108. }
  109. .instagram h4{
  110. text-align: left;
  111. font-size: 10px;
  112. }
  113. .themuses a{
  114. font-size: 10px;
  115. text-decoration: none;
  116. color: #fff;
  117. }
  118.  
  119.  
  120. /*
  121. filtros*/
  122. .filtros button{
  123. color: #fff;
  124. }
  125.  
  126.  
  127.  
  128. .filterDiv {
  129. float: left;
  130.  
  131. display: none; /* Hidden by default */
  132. }
  133.  
  134. /* The "show" class is added to the filtered elements */
  135. .show {
  136. display: initial;
  137. }
  138.  
  139. .filtros a{
  140. color: #fff; /* the filter color */
  141. padding: 1%;
  142. font-family: 'Abril Fatface', cursive;
  143. text-decoration: none;
  144. }
  145. </style>
  146. <title>my muses 2020;</title>
  147. </head>
  148. <body>
  149.  
  150. <!--
  151. Hi! I know this looks a bit complicated, but don't worry.
  152. How to find the modal (the popup) of your character? easy. where it says 'data-target' you'll find the tagged for the character.
  153. for example, character one has the tag #character1. search with control + f and you will find their modal. -->
  154.  
  155. <div class="container">
  156.  
  157.  
  158. <div class="row">
  159. <div class="col-6 col-md-4 columna filterDiv "> <!-- here you must add the filter labels. -->
  160. <a href="#" data-toggle="modal" data-target="#character1">
  161. <img src="https://via.placeholder.com/350x200" class="img-fluid"></a>
  162. <p>Character 1 name</p>
  163. </div>
  164. <div class="col-6 col-md-4 columna filterDiv ">
  165. <a href="#" data-toggle="modal" data-target="#character2">
  166. <img src="https://via.placeholder.com/350x200" class="img-fluid">
  167. </a>
  168. <p>Character 2 name</p>
  169. </div>
  170. <div class="col-6 col-md-4 columna filterDiv ">
  171. <a href="#" data-toggle="modal" data-target="#character3">
  172. <img src="https://via.placeholder.com/350x200" class="img-fluid">
  173. </a>
  174. <p>Character 3 name</p>
  175. </div>
  176. <br>
  177. <div class="col-6 col-md-4 columna filterDiv ">
  178. <a href="#" data-toggle="modal" data-target="#character4">
  179. <img src="https://via.placeholder.com/350x200" class="img-fluid"></a>
  180. <p>Character 4 name</p>
  181. </div>
  182. <div class="col-6 col-md-4 columna filterDiv ">
  183. <a href="" href="#" data-toggle="modal" data-target="#character5">
  184. <img src="https://via.placeholder.com/350x200" class="img-fluid">
  185. </a>
  186. <p>Character 5 name</p>
  187. </div>
  188. <div class="col-6 col-md-4 columna filterDiv ">
  189. <a href="" href="#" data-toggle="modal" data-target="#character6">
  190. <img src="https://via.placeholder.com/350x200" class="img-fluid">
  191. </a>
  192. <p>Character 6 name</p>
  193. </div>
  194. <br><br>
  195. <div class="col-6 col-md-4 columna filterDiv ">
  196. <a href="" href="#" data-toggle="modal" data-target="#character7">
  197. <img src="https://via.placeholder.com/350x200" class="img-fluid">
  198. </a>
  199. <p>Character 7 name</p>
  200. </div>
  201. <div class="col-6 col-md-4 columna filterDiv ">
  202. <a href="" href="#" data-toggle="modal" data-target="#character8">
  203. <img src="https://via.placeholder.com/350x200" class="img-fluid">
  204. </a>
  205. <p>Character 8 name</p>
  206. </div>
  207. <div class="col-6 col-md-4 columna filterDiv ">
  208. <a href="" href="#" data-toggle="modal" data-target="#character9">
  209. <img src="https://via.placeholder.com/350x200" class="img-fluid"> </a>
  210. <p>Character 9 name</p>
  211. </div>
  212.  
  213.  
  214. <!-- if you need a new muse here is the place, you can find the html for a new muse in the zip :)
  215. -->
  216. <br><br>
  217. </div>
  218. </div>
  219.  
  220.  
  221. <center>
  222. <div class="themuses">
  223. <p style="margin-bottom: 0px;">meet my muses</p>
  224. <a style="margin:0px;" href="#">home</a> <a style="margin:0px;" href="https://whitexlixs.tumblr.com/">credit </a> <!-- please don't delete this ): -->
  225. </div>
  226.  
  227. <!-- Modal 1 - character 1 -->
  228. <div class="modal fade" id="character1" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  229. <div class="modal-dialog" role="document">
  230. <div class="modal-content">
  231. <div class="modal-body ">
  232. <div class="text-right"><a href="#" style="color:#000; text-decoration: none;" data-dismiss="modal" >X</a></div>
  233. <div class="row">
  234. <div class="col-md-6 ">
  235. <div class="instagram">
  236. <div class="row">
  237. <div class="col-md-8">
  238. <h3>Name • username</h3>
  239. <h5>286 post - 2500 followers - 150 following</h5>
  240. <h4>quote. </h4>
  241. </div>
  242. <div class="col-md-4">
  243. <img src="https://via.placeholder.com/75x75" class="rounded-circle">
  244. </div>
  245. </div>
  246. <br>
  247. <div class="row " style="padding-right: 4%;" >
  248. <div class="col-md-3 ">
  249. <img src="https://via.placeholder.com/90x90" >
  250. </div>
  251. <div class="col-md-3">
  252. <img src="https://via.placeholder.com/90x90">
  253. </div>
  254. <div class="col-md-3 ">
  255. <img src="https://via.placeholder.com/90x90">
  256. </div>
  257. <div class="col-md-3 ">
  258. <img src="https://via.placeholder.com/90x90">
  259. </div>
  260. </div>
  261. <br>
  262. <div class="row" style="padding-right: 4%;">
  263. <div class="col-md-3">
  264. <img src="https://via.placeholder.com/90x90">
  265. </div>
  266. <div class="col-md-3">
  267. <img src="https://via.placeholder.com/90x90">
  268. </div>
  269. <div class="col-md-3">
  270. <img src="https://via.placeholder.com/90x90">
  271. </div>
  272. <div class="col-md-3">
  273. <img src="https://via.placeholder.com/90x90">
  274. </div>
  275. </div>
  276. </div>
  277. <br>
  278. <div class="pinterest">
  279. <h3>pinterest user name</h3>
  280. <p>quote </p>
  281. <div class="row">
  282. <div class="col-md-3" style="max-width: 24.2%;">
  283. <img src="https://via.placeholder.com/90x90">
  284. </div>
  285. <div class="col-md-3" style="max-width: 23%;">
  286. <img src="https://via.placeholder.com/90x90">
  287. </div>
  288. <div class="col-md-3" style="max-width: 24.2%;">
  289. <img src="https://via.placeholder.com/90x90">
  290. </div>
  291. <div class="col-md-3" style="max-width: 24.2%;">
  292. <img src="https://via.placeholder.com/90x90">
  293. </div>
  294. </div>
  295. </div>
  296. </div>
  297. <div class="col-md-6" style="padding-left: 0px !important;">
  298. <h1>character one name</h1>
  299. <div class="info">
  300. <p>bio</p>
  301. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sagittis arcu. Sed diam sem, dapibus in tempor nec, volutpat sit amet magna. Suspendisse ultricies mi diam, vel vulputate ipsum porta non. Cras fermentum accumsan turpis non commodo. Aliquam vitae fringilla arcu, id lacinia massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a egestas augue, vel porttitor purus. Nunc elit dui, convallis eget euismod sit amet, ultricies id augue. Morbi ac aliquam sem, vitae mattis mi. Curabitur fringilla lectus metus, ac malesuada nisl mollis ut. Phasellus feugiat nisi non ante consequat tempor. Pellentesque eu dolor mauris. Praesent eget ante et est vehicula volutpat et non dui. Duis interdum dignissim justo, vel vehicula magna eleifend nec. Sed tincidunt ornare accumsan. Donec feugiat pharetra massa, sed efficitur turpis tristique a.</p>
  302. <p>Nam lobortis libero mauris. Sed eu volutpat diam, at scelerisque sapien. Proin id eros a erat condimentum pulvinar nec in purus. Proin posuere aliquet quam, sed cursus orci. Vestibulum eu elit erat. Nulla mollis lacus id felis posuere, quis volutpat ex tempor. Nunc ac mauris sit amet orci cursus placerat ac ut ante. Curabitur mollis neque sed est elementum, sed consectetur dolor gravida. Sed imperdiet libero at malesuada volutpat. Vivamus a erat in dui semper efficitur sit amet sed quam. Duis scelerisque turpis ac purus mattis pellentesque. Integer justo elit, hendrerit ut leo eget, euismod varius arcu. Nulla sagittis erat sit amet orci rhoncus pulvinar. Curabitur imperdiet sit amet ex eget dictum. Nullam lacinia, purus nec cursus pharetra, ex lorem bibendum lorem, non ullamcorper ipsum nibh sed lacus.</p>
  303. <p>Aenean sagittis felis eu nisi dapibus pretium. Vivamus pellentesque pellentesque risus id posuere. Etiam ut est quis mauris lobortis accumsan. Donec dictum euismod metus, pellentesque semper urna. Sed gravida, nibh sit amet volutpat laoreet, dolor ligula elementum orci, et semper nisl ipsum ut lectus. In hac habitasse platea dictumst. Ut rhoncus ex id metus ultrices, in blandit neque maximus. Proin sit amet odio at nisi semper vestibulum quis vel arcu. Cras imperdiet, ante a sagittis molestie, mauris dui ornare elit, quis imperdiet orci nibh sed nisl. Ut tincidunt lacus sed leo placerat facilisis. Donec dictum, nulla vel fringilla posuere, lectus nulla aliquam justo, at pretium lorem est vitae enim. Pellentesque ligula metus, fermentum id pharetra sit amet, tincidunt at leo.</p>
  304. </div>
  305. <div style="text-align: left; font-size:13px;" class="info-general">
  306. <br>
  307. <div class="row">
  308. <div class="col-md-6">
  309. <strong>Name:</strong> character name.<br>
  310. <strong>Age:</strong> info.<br>
  311. <strong>Sexuality:</strong> info.<br>
  312. <strong>FC:</strong>info<br>
  313. </div>
  314. <div class="col-md-6">
  315. <strong>City:</strong> info.<br>
  316. <strong>info:</strong> info<br>
  317. <strong>info:</strong> info<br>
  318. <strong>info:</strong> info<br>
  319. </div>
  320. </div>
  321. <br>
  322. </div>
  323. <a href="#"><i class="fas fa-user" title="muse"></i></a>
  324. <a href="#"><i class="fas fa-heart" title="musings"></i></a>
  325. <a href="#"><i class="fas fa-quote-right" title="theads"></i></a>
  326. <a href="#"><i class="fas fa-music" title="music"></i></a>
  327. <a href="#"><i class="fab fa-pinterest" title="pinterest"></i></a>
  328. <a href="#"><i class="fas fa-female" title="style"></i></a>
  329. </div>
  330. </div>
  331. </div>
  332. </div>
  333. </div>
  334. </div>
  335.  
  336. <!-- Modal 2 - character 2 -->
  337. <div class="modal fade" id="character2" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  338. <div class="modal-dialog" role="document">
  339. <div class="modal-content">
  340. <div class="modal-body ">
  341. <div class="text-right"><a href="#" style="color:#000; text-decoration: none;" data-dismiss="modal" >X</a></div>
  342. <div class="row">
  343. <div class="col-md-6 ">
  344. <div class="instagram">
  345. <div class="row">
  346. <div class="col-md-8">
  347. <h3>Name • username</h3>
  348. <h5>286 post - 2500 followers - 150 following</h5>
  349. <h4>quote. </h4>
  350. </div>
  351. <div class="col-md-4">
  352. <img src="https://via.placeholder.com/75x75" class="rounded-circle">
  353. </div>
  354. </div>
  355. <br>
  356. <div class="row " style="padding-right: 4%;" >
  357. <div class="col-md-3 ">
  358. <img src="https://via.placeholder.com/90x90" >
  359. </div>
  360. <div class="col-md-3">
  361. <img src="https://via.placeholder.com/90x90">
  362. </div>
  363. <div class="col-md-3 ">
  364. <img src="https://via.placeholder.com/90x90">
  365. </div>
  366. <div class="col-md-3 ">
  367. <img src="https://via.placeholder.com/90x90">
  368. </div>
  369. </div>
  370. <br>
  371. <div class="row" style="padding-right: 4%;">
  372. <div class="col-md-3">
  373. <img src="https://via.placeholder.com/90x90">
  374. </div>
  375. <div class="col-md-3">
  376. <img src="https://via.placeholder.com/90x90">
  377. </div>
  378. <div class="col-md-3">
  379. <img src="https://via.placeholder.com/90x90">
  380. </div>
  381. <div class="col-md-3">
  382. <img src="https://via.placeholder.com/90x90">
  383. </div>
  384. </div>
  385. </div>
  386. <br>
  387. <div class="pinterest">
  388. <h3>pinterest user name</h3>
  389. <p>quote </p>
  390. <div class="row">
  391. <div class="col-md-3" style="max-width: 24.2%;">
  392. <img src="https://via.placeholder.com/90x90">
  393. </div>
  394. <div class="col-md-3" style="max-width: 23%;">
  395. <img src="https://via.placeholder.com/90x90">
  396. </div>
  397. <div class="col-md-3" style="max-width: 24.2%;">
  398. <img src="https://via.placeholder.com/90x90">
  399. </div>
  400. <div class="col-md-3" style="max-width: 24.2%;">
  401. <img src="https://via.placeholder.com/90x90">
  402. </div>
  403. </div>
  404. </div>
  405. </div>
  406. <div class="col-md-6" style="padding-left: 0px !important;">
  407. <h1>character two name</h1>
  408. <div class="info">
  409. <p>bio</p>
  410. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sagittis arcu. Sed diam sem, dapibus in tempor nec, volutpat sit amet magna. Suspendisse ultricies mi diam, vel vulputate ipsum porta non. Cras fermentum accumsan turpis non commodo. Aliquam vitae fringilla arcu, id lacinia massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a egestas augue, vel porttitor purus. Nunc elit dui, convallis eget euismod sit amet, ultricies id augue. Morbi ac aliquam sem, vitae mattis mi. Curabitur fringilla lectus metus, ac malesuada nisl mollis ut. Phasellus feugiat nisi non ante consequat tempor. Pellentesque eu dolor mauris. Praesent eget ante et est vehicula volutpat et non dui. Duis interdum dignissim justo, vel vehicula magna eleifend nec. Sed tincidunt ornare accumsan. Donec feugiat pharetra massa, sed efficitur turpis tristique a.</p>
  411. <p>Nam lobortis libero mauris. Sed eu volutpat diam, at scelerisque sapien. Proin id eros a erat condimentum pulvinar nec in purus. Proin posuere aliquet quam, sed cursus orci. Vestibulum eu elit erat. Nulla mollis lacus id felis posuere, quis volutpat ex tempor. Nunc ac mauris sit amet orci cursus placerat ac ut ante. Curabitur mollis neque sed est elementum, sed consectetur dolor gravida. Sed imperdiet libero at malesuada volutpat. Vivamus a erat in dui semper efficitur sit amet sed quam. Duis scelerisque turpis ac purus mattis pellentesque. Integer justo elit, hendrerit ut leo eget, euismod varius arcu. Nulla sagittis erat sit amet orci rhoncus pulvinar. Curabitur imperdiet sit amet ex eget dictum. Nullam lacinia, purus nec cursus pharetra, ex lorem bibendum lorem, non ullamcorper ipsum nibh sed lacus.</p>
  412. <p>Aenean sagittis felis eu nisi dapibus pretium. Vivamus pellentesque pellentesque risus id posuere. Etiam ut est quis mauris lobortis accumsan. Donec dictum euismod metus, pellentesque semper urna. Sed gravida, nibh sit amet volutpat laoreet, dolor ligula elementum orci, et semper nisl ipsum ut lectus. In hac habitasse platea dictumst. Ut rhoncus ex id metus ultrices, in blandit neque maximus. Proin sit amet odio at nisi semper vestibulum quis vel arcu. Cras imperdiet, ante a sagittis molestie, mauris dui ornare elit, quis imperdiet orci nibh sed nisl. Ut tincidunt lacus sed leo placerat facilisis. Donec dictum, nulla vel fringilla posuere, lectus nulla aliquam justo, at pretium lorem est vitae enim. Pellentesque ligula metus, fermentum id pharetra sit amet, tincidunt at leo.</p>
  413. </div>
  414. <div style="text-align: left; font-size:13px;" class="info-general">
  415. <br>
  416. <div class="row">
  417. <div class="col-md-6">
  418. <strong>Name:</strong> character name.<br>
  419. <strong>Age:</strong> info.<br>
  420. <strong>Sexuality:</strong> info.<br>
  421. <strong>FC:</strong>info<br>
  422. </div>
  423. <div class="col-md-6">
  424. <strong>City:</strong> info.<br>
  425. <strong>info:</strong> info<br>
  426. <strong>info:</strong> info<br>
  427. <strong>info:</strong> info<br>
  428. </div>
  429. </div>
  430. <br>
  431. </div>
  432. <a href="#"><i class="fas fa-user" title="muse"></i></a>
  433. <a href="#"><i class="fas fa-heart" title="musings"></i></a>
  434. <a href="#"><i class="fas fa-quote-right" title="theads"></i></a>
  435. <a href="#"><i class="fas fa-music" title="music"></i></a>
  436. <a href="#"><i class="fab fa-pinterest" title="pinterest"></i></a>
  437. <a href="#"><i class="fas fa-female" title="style"></i></i></a>
  438. </div>
  439. </div>
  440. </div>
  441. </div>
  442. </div>
  443. </div>
  444.  
  445. <!-- Modal 3 - character 3 -->
  446. <div class="modal fade" id="character3" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  447. <div class="modal-dialog" role="document">
  448. <div class="modal-content">
  449. <div class="modal-body ">
  450. <div class="text-right"><a href="#" style="color:#000; text-decoration: none;" data-dismiss="modal" >X</a></div>
  451. <div class="row">
  452. <div class="col-md-6 ">
  453. <div class="instagram">
  454. <div class="row">
  455. <div class="col-md-8">
  456. <h3>Name • username</h3>
  457. <h5>286 post - 2500 followers - 150 following</h5>
  458. <h4>quote. </h4>
  459. </div>
  460. <div class="col-md-4">
  461. <img src="https://via.placeholder.com/75x75" class="rounded-circle">
  462. </div>
  463. </div>
  464. <br>
  465. <div class="row " style="padding-right: 4%;" >
  466. <div class="col-md-3 ">
  467. <img src="https://via.placeholder.com/90x90" >
  468. </div>
  469. <div class="col-md-3">
  470. <img src="https://via.placeholder.com/90x90">
  471. </div>
  472. <div class="col-md-3 ">
  473. <img src="https://via.placeholder.com/90x90">
  474. </div>
  475. <div class="col-md-3 ">
  476. <img src="https://via.placeholder.com/90x90">
  477. </div>
  478. </div>
  479. <br>
  480. <div class="row" style="padding-right: 4%;">
  481. <div class="col-md-3">
  482. <img src="https://via.placeholder.com/90x90">
  483. </div>
  484. <div class="col-md-3">
  485. <img src="https://via.placeholder.com/90x90">
  486. </div>
  487. <div class="col-md-3">
  488. <img src="https://via.placeholder.com/90x90">
  489. </div>
  490. <div class="col-md-3">
  491. <img src="https://via.placeholder.com/90x90">
  492. </div>
  493. </div>
  494. </div>
  495. <br>
  496. <div class="pinterest">
  497. <h3>pinterest user name</h3>
  498. <p>quote </p>
  499. <div class="row">
  500. <div class="col-md-3" style="max-width: 24.2%;">
  501. <img src="https://via.placeholder.com/90x90">
  502. </div>
  503. <div class="col-md-3" style="max-width: 23%;">
  504. <img src="https://via.placeholder.com/90x90">
  505. </div>
  506. <div class="col-md-3" style="max-width: 24.2%;">
  507. <img src="https://via.placeholder.com/90x90">
  508. </div>
  509. <div class="col-md-3" style="max-width: 24.2%;">
  510. <img src="https://via.placeholder.com/90x90">
  511. </div>
  512. </div>
  513. </div>
  514. </div>
  515. <div class="col-md-6" style="padding-left: 0px !important;">
  516. <h1>character 3 name</h1>
  517. <div class="info">
  518. <p>bio</p>
  519. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sagittis arcu. Sed diam sem, dapibus in tempor nec, volutpat sit amet magna. Suspendisse ultricies mi diam, vel vulputate ipsum porta non. Cras fermentum accumsan turpis non commodo. Aliquam vitae fringilla arcu, id lacinia massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a egestas augue, vel porttitor purus. Nunc elit dui, convallis eget euismod sit amet, ultricies id augue. Morbi ac aliquam sem, vitae mattis mi. Curabitur fringilla lectus metus, ac malesuada nisl mollis ut. Phasellus feugiat nisi non ante consequat tempor. Pellentesque eu dolor mauris. Praesent eget ante et est vehicula volutpat et non dui. Duis interdum dignissim justo, vel vehicula magna eleifend nec. Sed tincidunt ornare accumsan. Donec feugiat pharetra massa, sed efficitur turpis tristique a.</p>
  520. <p>Nam lobortis libero mauris. Sed eu volutpat diam, at scelerisque sapien. Proin id eros a erat condimentum pulvinar nec in purus. Proin posuere aliquet quam, sed cursus orci. Vestibulum eu elit erat. Nulla mollis lacus id felis posuere, quis volutpat ex tempor. Nunc ac mauris sit amet orci cursus placerat ac ut ante. Curabitur mollis neque sed est elementum, sed consectetur dolor gravida. Sed imperdiet libero at malesuada volutpat. Vivamus a erat in dui semper efficitur sit amet sed quam. Duis scelerisque turpis ac purus mattis pellentesque. Integer justo elit, hendrerit ut leo eget, euismod varius arcu. Nulla sagittis erat sit amet orci rhoncus pulvinar. Curabitur imperdiet sit amet ex eget dictum. Nullam lacinia, purus nec cursus pharetra, ex lorem bibendum lorem, non ullamcorper ipsum nibh sed lacus.</p>
  521. <p>Aenean sagittis felis eu nisi dapibus pretium. Vivamus pellentesque pellentesque risus id posuere. Etiam ut est quis mauris lobortis accumsan. Donec dictum euismod metus, pellentesque semper urna. Sed gravida, nibh sit amet volutpat laoreet, dolor ligula elementum orci, et semper nisl ipsum ut lectus. In hac habitasse platea dictumst. Ut rhoncus ex id metus ultrices, in blandit neque maximus. Proin sit amet odio at nisi semper vestibulum quis vel arcu. Cras imperdiet, ante a sagittis molestie, mauris dui ornare elit, quis imperdiet orci nibh sed nisl. Ut tincidunt lacus sed leo placerat facilisis. Donec dictum, nulla vel fringilla posuere, lectus nulla aliquam justo, at pretium lorem est vitae enim. Pellentesque ligula metus, fermentum id pharetra sit amet, tincidunt at leo.</p>
  522. </div>
  523. <div style="text-align: left; font-size:13px;" class="info-general">
  524. <br>
  525. <div class="row">
  526. <div class="col-md-6">
  527. <strong>Name:</strong> character name.<br>
  528. <strong>Age:</strong> info.<br>
  529. <strong>Sexuality:</strong> info.<br>
  530. <strong>FC:</strong>info<br>
  531. </div>
  532. <div class="col-md-6">
  533. <strong>City:</strong> info.<br>
  534. <strong>info:</strong> info<br>
  535. <strong>info:</strong> info<br>
  536. <strong>info:</strong> info<br>
  537. </div>
  538. </div>
  539. <br>
  540. </div>
  541. <a href="#"><i class="fas fa-user" title="muse"></i></a>
  542. <a href="#"><i class="fas fa-heart" title="musings"></i></a>
  543. <a href="#"><i class="fas fa-quote-right" title="theads"></i></a>
  544. <a href="#"><i class="fas fa-music" title="music"></i></a>
  545. <a href="#"><i class="fab fa-pinterest" title="pinterest"></i></a>
  546. <a href="#"><i class="fas fa-female" title="style"></i></i></a>
  547. </div>
  548. </div>
  549. </div>
  550. </div>
  551. </div>
  552. </div>
  553. </center>
  554.  
  555. <!-- Modal 4 - character 4 -->
  556. <div class="modal fade" id="character4" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  557. <div class="modal-dialog" role="document">
  558. <div class="modal-content">
  559. <div class="modal-body ">
  560. <div class="text-right"><a href="#" style="color:#000; text-decoration: none;" data-dismiss="modal" >X</a></div>
  561. <div class="row">
  562. <div class="col-md-6 ">
  563. <div class="instagram">
  564. <div class="row">
  565. <div class="col-md-8">
  566. <h3>Name • username</h3>
  567. <h5>286 post - 2500 followers - 150 following</h5>
  568. <h4>quote. </h4>
  569. </div>
  570. <div class="col-md-4">
  571. <img src="https://via.placeholder.com/75x75" class="rounded-circle">
  572. </div>
  573. </div>
  574. <br>
  575. <div class="row " style="padding-right: 4%;" >
  576. <div class="col-md-3 ">
  577. <img src="https://via.placeholder.com/90x90" >
  578. </div>
  579. <div class="col-md-3">
  580. <img src="https://via.placeholder.com/90x90">
  581. </div>
  582. <div class="col-md-3 ">
  583. <img src="https://via.placeholder.com/90x90">
  584. </div>
  585. <div class="col-md-3 ">
  586. <img src="https://via.placeholder.com/90x90">
  587. </div>
  588. </div>
  589. <br>
  590. <div class="row" style="padding-right: 4%;">
  591. <div class="col-md-3">
  592. <img src="https://via.placeholder.com/90x90">
  593. </div>
  594. <div class="col-md-3">
  595. <img src="https://via.placeholder.com/90x90">
  596. </div>
  597. <div class="col-md-3">
  598. <img src="https://via.placeholder.com/90x90">
  599. </div>
  600. <div class="col-md-3">
  601. <img src="https://via.placeholder.com/90x90">
  602. </div>
  603. </div>
  604. </div>
  605. <br>
  606. <div class="pinterest">
  607. <h3>pinterest user name</h3>
  608. <p>quote </p>
  609. <div class="row">
  610. <div class="col-md-3" style="max-width: 24.2%;">
  611. <img src="https://via.placeholder.com/90x90">
  612. </div>
  613. <div class="col-md-3" style="max-width: 23%;">
  614. <img src="https://via.placeholder.com/90x90">
  615. </div>
  616. <div class="col-md-3" style="max-width: 24.2%;">
  617. <img src="https://via.placeholder.com/90x90">
  618. </div>
  619. <div class="col-md-3" style="max-width: 24.2%;">
  620. <img src="https://via.placeholder.com/90x90">
  621. </div>
  622. </div>
  623. </div>
  624. </div>
  625. <div class="col-md-6" style="padding-left: 0px !important;">
  626. <h1>character 4 name</h1>
  627. <div class="info">
  628. <p>bio</p>
  629. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sagittis arcu. Sed diam sem, dapibus in tempor nec, volutpat sit amet magna. Suspendisse ultricies mi diam, vel vulputate ipsum porta non. Cras fermentum accumsan turpis non commodo. Aliquam vitae fringilla arcu, id lacinia massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a egestas augue, vel porttitor purus. Nunc elit dui, convallis eget euismod sit amet, ultricies id augue. Morbi ac aliquam sem, vitae mattis mi. Curabitur fringilla lectus metus, ac malesuada nisl mollis ut. Phasellus feugiat nisi non ante consequat tempor. Pellentesque eu dolor mauris. Praesent eget ante et est vehicula volutpat et non dui. Duis interdum dignissim justo, vel vehicula magna eleifend nec. Sed tincidunt ornare accumsan. Donec feugiat pharetra massa, sed efficitur turpis tristique a.</p>
  630. <p>Nam lobortis libero mauris. Sed eu volutpat diam, at scelerisque sapien. Proin id eros a erat condimentum pulvinar nec in purus. Proin posuere aliquet quam, sed cursus orci. Vestibulum eu elit erat. Nulla mollis lacus id felis posuere, quis volutpat ex tempor. Nunc ac mauris sit amet orci cursus placerat ac ut ante. Curabitur mollis neque sed est elementum, sed consectetur dolor gravida. Sed imperdiet libero at malesuada volutpat. Vivamus a erat in dui semper efficitur sit amet sed quam. Duis scelerisque turpis ac purus mattis pellentesque. Integer justo elit, hendrerit ut leo eget, euismod varius arcu. Nulla sagittis erat sit amet orci rhoncus pulvinar. Curabitur imperdiet sit amet ex eget dictum. Nullam lacinia, purus nec cursus pharetra, ex lorem bibendum lorem, non ullamcorper ipsum nibh sed lacus.</p>
  631. <p>Aenean sagittis felis eu nisi dapibus pretium. Vivamus pellentesque pellentesque risus id posuere. Etiam ut est quis mauris lobortis accumsan. Donec dictum euismod metus, pellentesque semper urna. Sed gravida, nibh sit amet volutpat laoreet, dolor ligula elementum orci, et semper nisl ipsum ut lectus. In hac habitasse platea dictumst. Ut rhoncus ex id metus ultrices, in blandit neque maximus. Proin sit amet odio at nisi semper vestibulum quis vel arcu. Cras imperdiet, ante a sagittis molestie, mauris dui ornare elit, quis imperdiet orci nibh sed nisl. Ut tincidunt lacus sed leo placerat facilisis. Donec dictum, nulla vel fringilla posuere, lectus nulla aliquam justo, at pretium lorem est vitae enim. Pellentesque ligula metus, fermentum id pharetra sit amet, tincidunt at leo.</p>
  632. </div>
  633. <div style="text-align: left; font-size:13px;" class="info-general">
  634. <br>
  635. <div class="row">
  636. <div class="col-md-6">
  637. <strong>Name:</strong> character name.<br>
  638. <strong>Age:</strong> info.<br>
  639. <strong>Sexuality:</strong> info.<br>
  640. <strong>FC:</strong>info<br>
  641. </div>
  642. <div class="col-md-6">
  643. <strong>City:</strong> info.<br>
  644. <strong>info:</strong> info<br>
  645. <strong>info:</strong> info<br>
  646. <strong>info:</strong> info<br>
  647. </div>
  648. </div>
  649. <br>
  650. </div>
  651. <a href="#"><i class="fas fa-user" title="muse"></i></a>
  652. <a href="#"><i class="fas fa-heart" title="musings"></i></a>
  653. <a href="#"><i class="fas fa-quote-right" title="theads"></i></a>
  654. <a href="#"><i class="fas fa-music" title="music"></i></a>
  655. <a href="#"><i class="fab fa-pinterest" title="pinterest"></i></a>
  656. <a href="#"><i class="fas fa-female" title="style"></i></i></a>
  657. </div>
  658. </div>
  659. </div>
  660. </div>
  661. </div>
  662. </div>
  663.  
  664. <!-- Modal 5 - character 5 -->
  665. <div class="modal fade" id="character5" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  666. <div class="modal-dialog" role="document">
  667. <div class="modal-content">
  668. <div class="modal-body ">
  669. <div class="text-right"><a href="#" style="color:#000; text-decoration: none;" data-dismiss="modal" >X</a></div>
  670. <div class="row">
  671. <div class="col-md-6 ">
  672. <div class="instagram">
  673. <div class="row">
  674. <div class="col-md-8">
  675. <h3>Name • username</h3>
  676. <h5>286 post - 2500 followers - 150 following</h5>
  677. <h4>quote. </h4>
  678. </div>
  679. <div class="col-md-4">
  680. <img src="https://via.placeholder.com/75x75" class="rounded-circle">
  681. </div>
  682. </div>
  683. <br>
  684. <div class="row " style="padding-right: 4%;" >
  685. <div class="col-md-3 ">
  686. <img src="https://via.placeholder.com/90x90" >
  687. </div>
  688. <div class="col-md-3">
  689. <img src="https://via.placeholder.com/90x90">
  690. </div>
  691. <div class="col-md-3 ">
  692. <img src="https://via.placeholder.com/90x90">
  693. </div>
  694. <div class="col-md-3 ">
  695. <img src="https://via.placeholder.com/90x90">
  696. </div>
  697. </div>
  698. <br>
  699. <div class="row" style="padding-right: 4%;">
  700. <div class="col-md-3">
  701. <img src="https://via.placeholder.com/90x90">
  702. </div>
  703. <div class="col-md-3">
  704. <img src="https://via.placeholder.com/90x90">
  705. </div>
  706. <div class="col-md-3">
  707. <img src="https://via.placeholder.com/90x90">
  708. </div>
  709. <div class="col-md-3">
  710. <img src="https://via.placeholder.com/90x90">
  711. </div>
  712. </div>
  713. </div>
  714. <br>
  715. <div class="pinterest">
  716. <h3>pinterest user name</h3>
  717. <p>quote </p>
  718. <div class="row">
  719. <div class="col-md-3" style="max-width: 24.2%;">
  720. <img src="https://via.placeholder.com/90x90">
  721. </div>
  722. <div class="col-md-3" style="max-width: 23%;">
  723. <img src="https://via.placeholder.com/90x90">
  724. </div>
  725. <div class="col-md-3" style="max-width: 24.2%;">
  726. <img src="https://via.placeholder.com/90x90">
  727. </div>
  728. <div class="col-md-3" style="max-width: 24.2%;">
  729. <img src="https://via.placeholder.com/90x90">
  730. </div>
  731. </div>
  732. </div>
  733. </div>
  734. <div class="col-md-6" style="padding-left: 0px !important;">
  735. <h1>character 5 name</h1>
  736. <div class="info">
  737. <p>bio</p>
  738. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sagittis arcu. Sed diam sem, dapibus in tempor nec, volutpat sit amet magna. Suspendisse ultricies mi diam, vel vulputate ipsum porta non. Cras fermentum accumsan turpis non commodo. Aliquam vitae fringilla arcu, id lacinia massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a egestas augue, vel porttitor purus. Nunc elit dui, convallis eget euismod sit amet, ultricies id augue. Morbi ac aliquam sem, vitae mattis mi. Curabitur fringilla lectus metus, ac malesuada nisl mollis ut. Phasellus feugiat nisi non ante consequat tempor. Pellentesque eu dolor mauris. Praesent eget ante et est vehicula volutpat et non dui. Duis interdum dignissim justo, vel vehicula magna eleifend nec. Sed tincidunt ornare accumsan. Donec feugiat pharetra massa, sed efficitur turpis tristique a.</p>
  739. <p>Nam lobortis libero mauris. Sed eu volutpat diam, at scelerisque sapien. Proin id eros a erat condimentum pulvinar nec in purus. Proin posuere aliquet quam, sed cursus orci. Vestibulum eu elit erat. Nulla mollis lacus id felis posuere, quis volutpat ex tempor. Nunc ac mauris sit amet orci cursus placerat ac ut ante. Curabitur mollis neque sed est elementum, sed consectetur dolor gravida. Sed imperdiet libero at malesuada volutpat. Vivamus a erat in dui semper efficitur sit amet sed quam. Duis scelerisque turpis ac purus mattis pellentesque. Integer justo elit, hendrerit ut leo eget, euismod varius arcu. Nulla sagittis erat sit amet orci rhoncus pulvinar. Curabitur imperdiet sit amet ex eget dictum. Nullam lacinia, purus nec cursus pharetra, ex lorem bibendum lorem, non ullamcorper ipsum nibh sed lacus.</p>
  740. <p>Aenean sagittis felis eu nisi dapibus pretium. Vivamus pellentesque pellentesque risus id posuere. Etiam ut est quis mauris lobortis accumsan. Donec dictum euismod metus, pellentesque semper urna. Sed gravida, nibh sit amet volutpat laoreet, dolor ligula elementum orci, et semper nisl ipsum ut lectus. In hac habitasse platea dictumst. Ut rhoncus ex id metus ultrices, in blandit neque maximus. Proin sit amet odio at nisi semper vestibulum quis vel arcu. Cras imperdiet, ante a sagittis molestie, mauris dui ornare elit, quis imperdiet orci nibh sed nisl. Ut tincidunt lacus sed leo placerat facilisis. Donec dictum, nulla vel fringilla posuere, lectus nulla aliquam justo, at pretium lorem est vitae enim. Pellentesque ligula metus, fermentum id pharetra sit amet, tincidunt at leo.</p>
  741. </div>
  742. <div style="text-align: left; font-size:13px;" class="info-general">
  743. <br>
  744. <div class="row">
  745. <div class="col-md-6">
  746. <strong>Name:</strong> character name.<br>
  747. <strong>Age:</strong> info.<br>
  748. <strong>Sexuality:</strong> info.<br>
  749. <strong>FC:</strong>info<br>
  750. </div>
  751. <div class="col-md-6">
  752. <strong>City:</strong> info.<br>
  753. <strong>info:</strong> info<br>
  754. <strong>info:</strong> info<br>
  755. <strong>info:</strong> info<br>
  756. </div>
  757. </div>
  758. <br>
  759. </div>
  760. <a href="#"><i class="fas fa-user" title="muse"></i></a>
  761. <a href="#"><i class="fas fa-heart" title="musings"></i></a>
  762. <a href="#"><i class="fas fa-quote-right" title="theads"></i></a>
  763. <a href="#"><i class="fas fa-music" title="music"></i></a>
  764. <a href="#"><i class="fab fa-pinterest" title="pinterest"></i></a>
  765. <a href="#"><i class="fas fa-female" title="style"></i></i></a>
  766. </div>
  767. </div>
  768. </div>
  769. </div>
  770. </div>
  771. </div>
  772.  
  773.  
  774. <!-- Modal 6 - character 6-->
  775. <div class="modal fade" id="character6" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  776. <div class="modal-dialog" role="document">
  777. <div class="modal-content">
  778. <div class="modal-body ">
  779. <div class="text-right"><a href="#" style="color:#000; text-decoration: none;" data-dismiss="modal" >X</a></div>
  780. <div class="row">
  781. <div class="col-md-6 ">
  782. <div class="instagram">
  783. <div class="row">
  784. <div class="col-md-8">
  785. <h3>Name • username</h3>
  786. <h5>286 post - 2500 followers - 150 following</h5>
  787. <h4>quote. </h4>
  788. </div>
  789. <div class="col-md-4">
  790. <img src="https://via.placeholder.com/75x75" class="rounded-circle">
  791. </div>
  792. </div>
  793. <br>
  794. <div class="row " style="padding-right: 4%;" >
  795. <div class="col-md-3 ">
  796. <img src="https://via.placeholder.com/90x90" >
  797. </div>
  798. <div class="col-md-3">
  799. <img src="https://via.placeholder.com/90x90">
  800. </div>
  801. <div class="col-md-3 ">
  802. <img src="https://via.placeholder.com/90x90">
  803. </div>
  804. <div class="col-md-3 ">
  805. <img src="https://via.placeholder.com/90x90">
  806. </div>
  807. </div>
  808. <br>
  809. <div class="row" style="padding-right: 4%;">
  810. <div class="col-md-3">
  811. <img src="https://via.placeholder.com/90x90">
  812. </div>
  813. <div class="col-md-3">
  814. <img src="https://via.placeholder.com/90x90">
  815. </div>
  816. <div class="col-md-3">
  817. <img src="https://via.placeholder.com/90x90">
  818. </div>
  819. <div class="col-md-3">
  820. <img src="https://via.placeholder.com/90x90">
  821. </div>
  822. </div>
  823. </div>
  824. <br>
  825. <div class="pinterest">
  826. <h3>pinterest user name</h3>
  827. <p>quote </p>
  828. <div class="row">
  829. <div class="col-md-3" style="max-width: 24.2%;">
  830. <img src="https://via.placeholder.com/90x90">
  831. </div>
  832. <div class="col-md-3" style="max-width: 23%;">
  833. <img src="https://via.placeholder.com/90x90">
  834. </div>
  835. <div class="col-md-3" style="max-width: 24.2%;">
  836. <img src="https://via.placeholder.com/90x90">
  837. </div>
  838. <div class="col-md-3" style="max-width: 24.2%;">
  839. <img src="https://via.placeholder.com/90x90">
  840. </div>
  841. </div>
  842. </div>
  843. </div>
  844. <div class="col-md-6" style="padding-left: 0px !important;">
  845. <h1>character 6 name</h1>
  846. <div class="info">
  847. <p>bio</p>
  848. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sagittis arcu. Sed diam sem, dapibus in tempor nec, volutpat sit amet magna. Suspendisse ultricies mi diam, vel vulputate ipsum porta non. Cras fermentum accumsan turpis non commodo. Aliquam vitae fringilla arcu, id lacinia massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a egestas augue, vel porttitor purus. Nunc elit dui, convallis eget euismod sit amet, ultricies id augue. Morbi ac aliquam sem, vitae mattis mi. Curabitur fringilla lectus metus, ac malesuada nisl mollis ut. Phasellus feugiat nisi non ante consequat tempor. Pellentesque eu dolor mauris. Praesent eget ante et est vehicula volutpat et non dui. Duis interdum dignissim justo, vel vehicula magna eleifend nec. Sed tincidunt ornare accumsan. Donec feugiat pharetra massa, sed efficitur turpis tristique a.</p>
  849. <p>Nam lobortis libero mauris. Sed eu volutpat diam, at scelerisque sapien. Proin id eros a erat condimentum pulvinar nec in purus. Proin posuere aliquet quam, sed cursus orci. Vestibulum eu elit erat. Nulla mollis lacus id felis posuere, quis volutpat ex tempor. Nunc ac mauris sit amet orci cursus placerat ac ut ante. Curabitur mollis neque sed est elementum, sed consectetur dolor gravida. Sed imperdiet libero at malesuada volutpat. Vivamus a erat in dui semper efficitur sit amet sed quam. Duis scelerisque turpis ac purus mattis pellentesque. Integer justo elit, hendrerit ut leo eget, euismod varius arcu. Nulla sagittis erat sit amet orci rhoncus pulvinar. Curabitur imperdiet sit amet ex eget dictum. Nullam lacinia, purus nec cursus pharetra, ex lorem bibendum lorem, non ullamcorper ipsum nibh sed lacus.</p>
  850. <p>Aenean sagittis felis eu nisi dapibus pretium. Vivamus pellentesque pellentesque risus id posuere. Etiam ut est quis mauris lobortis accumsan. Donec dictum euismod metus, pellentesque semper urna. Sed gravida, nibh sit amet volutpat laoreet, dolor ligula elementum orci, et semper nisl ipsum ut lectus. In hac habitasse platea dictumst. Ut rhoncus ex id metus ultrices, in blandit neque maximus. Proin sit amet odio at nisi semper vestibulum quis vel arcu. Cras imperdiet, ante a sagittis molestie, mauris dui ornare elit, quis imperdiet orci nibh sed nisl. Ut tincidunt lacus sed leo placerat facilisis. Donec dictum, nulla vel fringilla posuere, lectus nulla aliquam justo, at pretium lorem est vitae enim. Pellentesque ligula metus, fermentum id pharetra sit amet, tincidunt at leo.</p>
  851. </div>
  852. <div style="text-align: left; font-size:13px;" class="info-general">
  853. <br>
  854. <div class="row">
  855. <div class="col-md-6">
  856. <strong>Name:</strong> character name.<br>
  857. <strong>Age:</strong> info.<br>
  858. <strong>Sexuality:</strong> info.<br>
  859. <strong>FC:</strong>info<br>
  860. </div>
  861. <div class="col-md-6">
  862. <strong>City:</strong> info.<br>
  863. <strong>info:</strong> info<br>
  864. <strong>info:</strong> info<br>
  865. <strong>info:</strong> info<br>
  866. </div>
  867. </div>
  868. <br>
  869. </div>
  870. <a href="#"><i class="fas fa-user" title="muse"></i></a>
  871. <a href="#"><i class="fas fa-heart" title="musings"></i></a>
  872. <a href="#"><i class="fas fa-quote-right" title="theads"></i></a>
  873. <a href="#"><i class="fas fa-music" title="music"></i></a>
  874. <a href="#"><i class="fab fa-pinterest" title="pinterest"></i></a>
  875. <a href="#"><i class="fas fa-female" title="style"></i></i></a>
  876. </div>
  877. </div>
  878. </div>
  879. </div>
  880. </div>
  881. </div>
  882.  
  883.  
  884. <!-- Modal 7 - character 7 -->
  885. <div class="modal fade" id="character7" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  886. <div class="modal-dialog" role="document">
  887. <div class="modal-content">
  888. <div class="modal-body ">
  889. <div class="text-right"><a href="#" style="color:#000; text-decoration: none;" data-dismiss="modal" >X</a></div>
  890. <div class="row">
  891. <div class="col-md-6 ">
  892. <div class="instagram">
  893. <div class="row">
  894. <div class="col-md-8">
  895. <h3>Name • username</h3>
  896. <h5>286 post - 2500 followers - 150 following</h5>
  897. <h4>quote. </h4>
  898. </div>
  899. <div class="col-md-4">
  900. <img src="https://via.placeholder.com/75x75" class="rounded-circle">
  901. </div>
  902. </div>
  903. <br>
  904. <div class="row " style="padding-right: 4%;" >
  905. <div class="col-md-3 ">
  906. <img src="https://via.placeholder.com/90x90" >
  907. </div>
  908. <div class="col-md-3">
  909. <img src="https://via.placeholder.com/90x90">
  910. </div>
  911. <div class="col-md-3 ">
  912. <img src="https://via.placeholder.com/90x90">
  913. </div>
  914. <div class="col-md-3 ">
  915. <img src="https://via.placeholder.com/90x90">
  916. </div>
  917. </div>
  918. <br>
  919. <div class="row" style="padding-right: 4%;">
  920. <div class="col-md-3">
  921. <img src="https://via.placeholder.com/90x90">
  922. </div>
  923. <div class="col-md-3">
  924. <img src="https://via.placeholder.com/90x90">
  925. </div>
  926. <div class="col-md-3">
  927. <img src="https://via.placeholder.com/90x90">
  928. </div>
  929. <div class="col-md-3">
  930. <img src="https://via.placeholder.com/90x90">
  931. </div>
  932. </div>
  933. </div>
  934. <br>
  935. <div class="pinterest">
  936. <h3>pinterest user name</h3>
  937. <p>quote </p>
  938. <div class="row">
  939. <div class="col-md-3" style="max-width: 24.2%;">
  940. <img src="https://via.placeholder.com/90x90">
  941. </div>
  942. <div class="col-md-3" style="max-width: 23%;">
  943. <img src="https://via.placeholder.com/90x90">
  944. </div>
  945. <div class="col-md-3" style="max-width: 24.2%;">
  946. <img src="https://via.placeholder.com/90x90">
  947. </div>
  948. <div class="col-md-3" style="max-width: 24.2%;">
  949. <img src="https://via.placeholder.com/90x90">
  950. </div>
  951. </div>
  952. </div>
  953. </div>
  954. <div class="col-md-6" style="padding-left: 0px !important;">
  955. <h1>character 7 name</h1>
  956. <div class="info">
  957. <p>bio</p>
  958. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sagittis arcu. Sed diam sem, dapibus in tempor nec, volutpat sit amet magna. Suspendisse ultricies mi diam, vel vulputate ipsum porta non. Cras fermentum accumsan turpis non commodo. Aliquam vitae fringilla arcu, id lacinia massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a egestas augue, vel porttitor purus. Nunc elit dui, convallis eget euismod sit amet, ultricies id augue. Morbi ac aliquam sem, vitae mattis mi. Curabitur fringilla lectus metus, ac malesuada nisl mollis ut. Phasellus feugiat nisi non ante consequat tempor. Pellentesque eu dolor mauris. Praesent eget ante et est vehicula volutpat et non dui. Duis interdum dignissim justo, vel vehicula magna eleifend nec. Sed tincidunt ornare accumsan. Donec feugiat pharetra massa, sed efficitur turpis tristique a.</p>
  959. <p>Nam lobortis libero mauris. Sed eu volutpat diam, at scelerisque sapien. Proin id eros a erat condimentum pulvinar nec in purus. Proin posuere aliquet quam, sed cursus orci. Vestibulum eu elit erat. Nulla mollis lacus id felis posuere, quis volutpat ex tempor. Nunc ac mauris sit amet orci cursus placerat ac ut ante. Curabitur mollis neque sed est elementum, sed consectetur dolor gravida. Sed imperdiet libero at malesuada volutpat. Vivamus a erat in dui semper efficitur sit amet sed quam. Duis scelerisque turpis ac purus mattis pellentesque. Integer justo elit, hendrerit ut leo eget, euismod varius arcu. Nulla sagittis erat sit amet orci rhoncus pulvinar. Curabitur imperdiet sit amet ex eget dictum. Nullam lacinia, purus nec cursus pharetra, ex lorem bibendum lorem, non ullamcorper ipsum nibh sed lacus.</p>
  960. <p>Aenean sagittis felis eu nisi dapibus pretium. Vivamus pellentesque pellentesque risus id posuere. Etiam ut est quis mauris lobortis accumsan. Donec dictum euismod metus, pellentesque semper urna. Sed gravida, nibh sit amet volutpat laoreet, dolor ligula elementum orci, et semper nisl ipsum ut lectus. In hac habitasse platea dictumst. Ut rhoncus ex id metus ultrices, in blandit neque maximus. Proin sit amet odio at nisi semper vestibulum quis vel arcu. Cras imperdiet, ante a sagittis molestie, mauris dui ornare elit, quis imperdiet orci nibh sed nisl. Ut tincidunt lacus sed leo placerat facilisis. Donec dictum, nulla vel fringilla posuere, lectus nulla aliquam justo, at pretium lorem est vitae enim. Pellentesque ligula metus, fermentum id pharetra sit amet, tincidunt at leo.</p>
  961. </div>
  962. <div style="text-align: left; font-size:13px;" class="info-general">
  963. <br>
  964. <div class="row">
  965. <div class="col-md-6">
  966. <strong>Name:</strong> character name.<br>
  967. <strong>Age:</strong> info.<br>
  968. <strong>Sexuality:</strong> info.<br>
  969. <strong>FC:</strong>info<br>
  970. </div>
  971. <div class="col-md-6">
  972. <strong>City:</strong> info.<br>
  973. <strong>info:</strong> info<br>
  974. <strong>info:</strong> info<br>
  975. <strong>info:</strong> info<br>
  976. </div>
  977. </div>
  978. <br>
  979. </div>
  980. <a href="#"><i class="fas fa-user" title="muse"></i></a>
  981. <a href="#"><i class="fas fa-heart" title="musings"></i></a>
  982. <a href="#"><i class="fas fa-quote-right" title="theads"></i></a>
  983. <a href="#"><i class="fas fa-music" title="music"></i></a>
  984. <a href="#"><i class="fab fa-pinterest" title="pinterest"></i></a>
  985. <a href="#"><i class="fas fa-female" title="style"></i></i></a>
  986. </div>
  987. </div>
  988. </div>
  989. </div>
  990. </div>
  991. </div>
  992.  
  993. <!-- Modal 8 - character 8 -->
  994. <div class="modal fade" id="character8" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  995. <div class="modal-dialog" role="document">
  996. <div class="modal-content">
  997. <div class="modal-body ">
  998. <div class="text-right"><a href="#" style="color:#000; text-decoration: none;" data-dismiss="modal" >X</a></div>
  999. <div class="row">
  1000. <div class="col-md-6 ">
  1001. <div class="instagram">
  1002. <div class="row">
  1003. <div class="col-md-8">
  1004. <h3>Name • username</h3>
  1005. <h5>286 post - 2500 followers - 150 following</h5>
  1006. <h4>quote. </h4>
  1007. </div>
  1008. <div class="col-md-4">
  1009. <img src="https://via.placeholder.com/75x75" class="rounded-circle">
  1010. </div>
  1011. </div>
  1012. <br>
  1013. <div class="row " style="padding-right: 4%;" >
  1014. <div class="col-md-3 ">
  1015. <img src="https://via.placeholder.com/90x90" >
  1016. </div>
  1017. <div class="col-md-3">
  1018. <img src="https://via.placeholder.com/90x90">
  1019. </div>
  1020. <div class="col-md-3 ">
  1021. <img src="https://via.placeholder.com/90x90">
  1022. </div>
  1023. <div class="col-md-3 ">
  1024. <img src="https://via.placeholder.com/90x90">
  1025. </div>
  1026. </div>
  1027. <br>
  1028. <div class="row" style="padding-right: 4%;">
  1029. <div class="col-md-3">
  1030. <img src="https://via.placeholder.com/90x90">
  1031. </div>
  1032. <div class="col-md-3">
  1033. <img src="https://via.placeholder.com/90x90">
  1034. </div>
  1035. <div class="col-md-3">
  1036. <img src="https://via.placeholder.com/90x90">
  1037. </div>
  1038. <div class="col-md-3">
  1039. <img src="https://via.placeholder.com/90x90">
  1040. </div>
  1041. </div>
  1042. </div>
  1043. <br>
  1044. <div class="pinterest">
  1045. <h3>pinterest user name</h3>
  1046. <p>quote </p>
  1047. <div class="row">
  1048. <div class="col-md-3" style="max-width: 24.2%;">
  1049. <img src="https://via.placeholder.com/90x90">
  1050. </div>
  1051. <div class="col-md-3" style="max-width: 23%;">
  1052. <img src="https://via.placeholder.com/90x90">
  1053. </div>
  1054. <div class="col-md-3" style="max-width: 24.2%;">
  1055. <img src="https://via.placeholder.com/90x90">
  1056. </div>
  1057. <div class="col-md-3" style="max-width: 24.2%;">
  1058. <img src="https://via.placeholder.com/90x90">
  1059. </div>
  1060. </div>
  1061. </div>
  1062. </div>
  1063. <div class="col-md-6" style="padding-left: 0px !important;">
  1064. <h1>character 8 name</h1>
  1065. <div class="info">
  1066. <p>bio</p>
  1067. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sagittis arcu. Sed diam sem, dapibus in tempor nec, volutpat sit amet magna. Suspendisse ultricies mi diam, vel vulputate ipsum porta non. Cras fermentum accumsan turpis non commodo. Aliquam vitae fringilla arcu, id lacinia massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a egestas augue, vel porttitor purus. Nunc elit dui, convallis eget euismod sit amet, ultricies id augue. Morbi ac aliquam sem, vitae mattis mi. Curabitur fringilla lectus metus, ac malesuada nisl mollis ut. Phasellus feugiat nisi non ante consequat tempor. Pellentesque eu dolor mauris. Praesent eget ante et est vehicula volutpat et non dui. Duis interdum dignissim justo, vel vehicula magna eleifend nec. Sed tincidunt ornare accumsan. Donec feugiat pharetra massa, sed efficitur turpis tristique a.</p>
  1068. <p>Nam lobortis libero mauris. Sed eu volutpat diam, at scelerisque sapien. Proin id eros a erat condimentum pulvinar nec in purus. Proin posuere aliquet quam, sed cursus orci. Vestibulum eu elit erat. Nulla mollis lacus id felis posuere, quis volutpat ex tempor. Nunc ac mauris sit amet orci cursus placerat ac ut ante. Curabitur mollis neque sed est elementum, sed consectetur dolor gravida. Sed imperdiet libero at malesuada volutpat. Vivamus a erat in dui semper efficitur sit amet sed quam. Duis scelerisque turpis ac purus mattis pellentesque. Integer justo elit, hendrerit ut leo eget, euismod varius arcu. Nulla sagittis erat sit amet orci rhoncus pulvinar. Curabitur imperdiet sit amet ex eget dictum. Nullam lacinia, purus nec cursus pharetra, ex lorem bibendum lorem, non ullamcorper ipsum nibh sed lacus.</p>
  1069. <p>Aenean sagittis felis eu nisi dapibus pretium. Vivamus pellentesque pellentesque risus id posuere. Etiam ut est quis mauris lobortis accumsan. Donec dictum euismod metus, pellentesque semper urna. Sed gravida, nibh sit amet volutpat laoreet, dolor ligula elementum orci, et semper nisl ipsum ut lectus. In hac habitasse platea dictumst. Ut rhoncus ex id metus ultrices, in blandit neque maximus. Proin sit amet odio at nisi semper vestibulum quis vel arcu. Cras imperdiet, ante a sagittis molestie, mauris dui ornare elit, quis imperdiet orci nibh sed nisl. Ut tincidunt lacus sed leo placerat facilisis. Donec dictum, nulla vel fringilla posuere, lectus nulla aliquam justo, at pretium lorem est vitae enim. Pellentesque ligula metus, fermentum id pharetra sit amet, tincidunt at leo.</p>
  1070. </div>
  1071. <div style="text-align: left; font-size:13px;" class="info-general">
  1072. <br>
  1073. <div class="row">
  1074. <div class="col-md-6">
  1075. <strong>Name:</strong> character name.<br>
  1076. <strong>Age:</strong> info.<br>
  1077. <strong>Sexuality:</strong> info.<br>
  1078. <strong>FC:</strong>info<br>
  1079. </div>
  1080. <div class="col-md-6">
  1081. <strong>City:</strong> info.<br>
  1082. <strong>info:</strong> info<br>
  1083. <strong>info:</strong> info<br>
  1084. <strong>info:</strong> info<br>
  1085. </div>
  1086. </div>
  1087. <br>
  1088. </div>
  1089. <a href="#"><i class="fas fa-user" title="muse"></i></a>
  1090. <a href="#"><i class="fas fa-heart" title="musings"></i></a>
  1091. <a href="#"><i class="fas fa-quote-right" title="theads"></i></a>
  1092. <a href="#"><i class="fas fa-music" title="music"></i></a>
  1093. <a href="#"><i class="fab fa-pinterest" title="pinterest"></i></a>
  1094. <a href="#"><i class="fas fa-female" title="style"></i></i></a>
  1095. </div>
  1096. </div>
  1097. </div>
  1098. </div>
  1099. </div>
  1100. </div>
  1101.  
  1102.  
  1103. <!-- Modal 9 - character 9 -->
  1104. <div class="modal fade" id="character9" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  1105. <div class="modal-dialog" role="document">
  1106. <div class="modal-content">
  1107. <div class="modal-body ">
  1108. <div class="text-right"><a href="#" style="color:#000; text-decoration: none;" data-dismiss="modal" >X</a></div>
  1109. <div class="row">
  1110. <div class="col-md-6 ">
  1111. <div class="instagram">
  1112. <div class="row">
  1113. <div class="col-md-8">
  1114. <h3>Name • username</h3>
  1115. <h5>286 post - 2500 followers - 150 following</h5>
  1116. <h4>quote. </h4>
  1117. </div>
  1118. <div class="col-md-4">
  1119. <img src="https://via.placeholder.com/75x75" class="rounded-circle">
  1120. </div>
  1121. </div>
  1122. <br>
  1123. <div class="row " style="padding-right: 4%;" >
  1124. <div class="col-md-3 ">
  1125. <img src="https://via.placeholder.com/90x90" >
  1126. </div>
  1127. <div class="col-md-3">
  1128. <img src="https://via.placeholder.com/90x90">
  1129. </div>
  1130. <div class="col-md-3 ">
  1131. <img src="https://via.placeholder.com/90x90">
  1132. </div>
  1133. <div class="col-md-3 ">
  1134. <img src="https://via.placeholder.com/90x90">
  1135. </div>
  1136. </div>
  1137. <br>
  1138. <div class="row" style="padding-right: 4%;">
  1139. <div class="col-md-3">
  1140. <img src="https://via.placeholder.com/90x90">
  1141. </div>
  1142. <div class="col-md-3">
  1143. <img src="https://via.placeholder.com/90x90">
  1144. </div>
  1145. <div class="col-md-3">
  1146. <img src="https://via.placeholder.com/90x90">
  1147. </div>
  1148. <div class="col-md-3">
  1149. <img src="https://via.placeholder.com/90x90">
  1150. </div>
  1151. </div>
  1152. </div>
  1153. <br>
  1154. <div class="pinterest">
  1155. <h3>pinterest user name</h3>
  1156. <p>quote </p>
  1157. <div class="row">
  1158. <div class="col-md-3" style="max-width: 24.2%;">
  1159. <img src="https://via.placeholder.com/90x90">
  1160. </div>
  1161. <div class="col-md-3" style="max-width: 23%;">
  1162. <img src="https://via.placeholder.com/90x90">
  1163. </div>
  1164. <div class="col-md-3" style="max-width: 24.2%;">
  1165. <img src="https://via.placeholder.com/90x90">
  1166. </div>
  1167. <div class="col-md-3" style="max-width: 24.2%;">
  1168. <img src="https://via.placeholder.com/90x90">
  1169. </div>
  1170. </div>
  1171. </div>
  1172. </div>
  1173. <div class="col-md-6" style="padding-left: 0px !important;">
  1174. <h1>character 9 name</h1>
  1175. <div class="info">
  1176. <p>bio</p>
  1177. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sagittis arcu. Sed diam sem, dapibus in tempor nec, volutpat sit amet magna. Suspendisse ultricies mi diam, vel vulputate ipsum porta non. Cras fermentum accumsan turpis non commodo. Aliquam vitae fringilla arcu, id lacinia massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a egestas augue, vel porttitor purus. Nunc elit dui, convallis eget euismod sit amet, ultricies id augue. Morbi ac aliquam sem, vitae mattis mi. Curabitur fringilla lectus metus, ac malesuada nisl mollis ut. Phasellus feugiat nisi non ante consequat tempor. Pellentesque eu dolor mauris. Praesent eget ante et est vehicula volutpat et non dui. Duis interdum dignissim justo, vel vehicula magna eleifend nec. Sed tincidunt ornare accumsan. Donec feugiat pharetra massa, sed efficitur turpis tristique a.</p>
  1178. <p>Nam lobortis libero mauris. Sed eu volutpat diam, at scelerisque sapien. Proin id eros a erat condimentum pulvinar nec in purus. Proin posuere aliquet quam, sed cursus orci. Vestibulum eu elit erat. Nulla mollis lacus id felis posuere, quis volutpat ex tempor. Nunc ac mauris sit amet orci cursus placerat ac ut ante. Curabitur mollis neque sed est elementum, sed consectetur dolor gravida. Sed imperdiet libero at malesuada volutpat. Vivamus a erat in dui semper efficitur sit amet sed quam. Duis scelerisque turpis ac purus mattis pellentesque. Integer justo elit, hendrerit ut leo eget, euismod varius arcu. Nulla sagittis erat sit amet orci rhoncus pulvinar. Curabitur imperdiet sit amet ex eget dictum. Nullam lacinia, purus nec cursus pharetra, ex lorem bibendum lorem, non ullamcorper ipsum nibh sed lacus.</p>
  1179. <p>Aenean sagittis felis eu nisi dapibus pretium. Vivamus pellentesque pellentesque risus id posuere. Etiam ut est quis mauris lobortis accumsan. Donec dictum euismod metus, pellentesque semper urna. Sed gravida, nibh sit amet volutpat laoreet, dolor ligula elementum orci, et semper nisl ipsum ut lectus. In hac habitasse platea dictumst. Ut rhoncus ex id metus ultrices, in blandit neque maximus. Proin sit amet odio at nisi semper vestibulum quis vel arcu. Cras imperdiet, ante a sagittis molestie, mauris dui ornare elit, quis imperdiet orci nibh sed nisl. Ut tincidunt lacus sed leo placerat facilisis. Donec dictum, nulla vel fringilla posuere, lectus nulla aliquam justo, at pretium lorem est vitae enim. Pellentesque ligula metus, fermentum id pharetra sit amet, tincidunt at leo.</p>
  1180. </div>
  1181. <div style="text-align: left; font-size:13px;" class="info-general">
  1182. <br>
  1183. <div class="row">
  1184. <div class="col-md-6">
  1185. <strong>Name:</strong> character name.<br>
  1186. <strong>Age:</strong> info.<br>
  1187. <strong>Sexuality:</strong> info.<br>
  1188. <strong>FC:</strong>info<br>
  1189. </div>
  1190. <div class="col-md-6">
  1191. <strong>City:</strong> info.<br>
  1192. <strong>info:</strong> info<br>
  1193. <strong>info:</strong> info<br>
  1194. <strong>info:</strong> info<br>
  1195. </div>
  1196. </div>
  1197. <br>
  1198. </div>
  1199. <a href="#"><i class="fas fa-user" title="muse"></i></a>
  1200. <a href="#"><i class="fas fa-heart" title="musings"></i></a>
  1201. <a href="#"><i class="fas fa-quote-right" title="theads"></i></a>
  1202. <a href="#"><i class="fas fa-music" title="music"></i></a>
  1203. <a href="#"><i class="fab fa-pinterest" title="pinterest"></i></a>
  1204. <a href="#"><i class="fas fa-female" title="style"></i></i></a>
  1205. </div>
  1206. </div>
  1207. </div>
  1208. </div>
  1209. </div>
  1210. </div>
  1211.  
  1212.  
  1213.  
  1214.  
  1215. <script>
  1216. filterSelection("all")
  1217. function filterSelection(c) {
  1218. var x, i;
  1219. x = document.getElementsByClassName("filterDiv");
  1220. if (c == "all") c = "";
  1221. for (i = 0; i < x.length; i++) {
  1222. w3RemoveClass(x[i], "show");
  1223. if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  1224. }
  1225. }
  1226.  
  1227. function w3AddClass(element, name) {
  1228. var i, arr1, arr2;
  1229. arr1 = element.className.split(" ");
  1230. arr2 = name.split(" ");
  1231. for (i = 0; i < arr2.length; i++) {
  1232. if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  1233. }
  1234. }
  1235.  
  1236. function w3RemoveClass(element, name) {
  1237. var i, arr1, arr2;
  1238. arr1 = element.className.split(" ");
  1239. arr2 = name.split(" ");
  1240. for (i = 0; i < arr2.length; i++) {
  1241. while (arr1.indexOf(arr2[i]) > -1) {
  1242. arr1.splice(arr1.indexOf(arr2[i]), 1);
  1243. }
  1244. }
  1245. element.className = arr1.join(" ");
  1246. }
  1247.  
  1248. // Add active class to the current button (highlight it)
  1249. var btnContainer = document.getElementById("myBtnContainer");
  1250. var btns = btnContainer.getElementsByClassName("btn");
  1251. for (var i = 0; i < btns.length; i++) {
  1252. btns[i].addEventListener("click", function(){
  1253. var current = document.getElementsByClassName("active");
  1254. current[0].className = current[0].className.replace(" active", "");
  1255. this.className += " active";
  1256. });
  1257. }
  1258. </script>
  1259. <!-- Optional JavaScript -->
  1260. <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  1261. <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  1262. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  1263. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  1264. </body>
  1265. </html>
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!