API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 13th, 2019
521
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.36 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. ❝ ❥「 codes by bella || benitalks.tumblr.com 」
  4.  
  5. ❛ 003. butterfly ❜
  6. — dont redistribute/claim as your own
  7. — dont remove the credits
  8. — dont copy parts of the code
  9. — edit how much you want!
  10.  
  11. 「 thanks for using my codes! ♡ 」
  12.  
  13. --->
  14.  
  15. <!DOCTYPE html>
  16. <html>
  17. <link rel="shortcut icon" href="{Favicon}" />
  18. <head>
  19.  
  20. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  21. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  22.  
  23. <script>
  24. (function($){
  25. $(document).ready(function() {
  26. $("[title],a[title],img[title]").style_my_tooltips({
  27. tip_follows_cursor:true,
  28. tip_delay_time:90,
  29. tip_fade_speed:600,
  30. attribute:"title"
  31. });
  32. });
  33. })(jQuery);
  34. </script>
  35.  
  36. <title>meet the muses.</title> <!--- page title --->
  37.  
  38. <link href="https://fonts.googleapis.com/css?family=ABeeZee" rel="stylesheet">
  39. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  40.  
  41. </head>
  42.  
  43. <style>
  44. @font-face { font-family: "andara kapital"; src: url('https://dl.dropboxusercontent.com/s/lucqhbpdzuk2uns/andara%20sans%20-%20kapital.ttf'); format("truetype");}
  45. </style>
  46.  
  47. <style type="text/css">
  48. /* ------------------------- credits ------------------------- */
  49. /* -------------------- don't touch this! -------------------- */
  50. .credit {
  51. position: fixed;
  52. bottom: 15px;
  53. right: 15px;
  54. width: 15px;
  55. height: 15px;
  56. border-radius: 50%;
  57. padding: 5px;
  58. font-size:15px;
  59. background: rgba(255,255,255,0.5);
  60. }
  61.  
  62. /* ------------------------- scrollbar ------------------------- */
  63. ::-webkit-scrollbar-thumb {
  64. background-color: #DBBAE5; /* -- bar color -- */
  65. }
  66.  
  67. ::-webkit-scrollbar-track {
  68. background-color: #F1F1F1; /* -- bg color -- */
  69. }
  70.  
  71. ::-webkit-scrollbar {
  72. height:2px;
  73. width:2px;
  74. }
  75.  
  76. /* ------------------------- selection ------------------------- */
  77. ::-moz-selection {
  78. background: RGB(255,163,152, 0.5); /* -- background color -- */
  79. color: #FFF; /* -- text color -- */
  80. }
  81.  
  82. ::selection {
  83. background: RGB(255,163,152, 0.5); /* -- background color -- */
  84. color: #FFF; /* -- text color -- */
  85. }
  86.  
  87.  
  88. /* ------------------------- tooltip ------------------------- */
  89. #s-m-t-tooltip {
  90. max-width: 300px;
  91. border-radius: 3px;
  92. padding: 5px 5px;
  93. margin: 25px 20px 5px 0px;
  94. color: #FFF; /* -- text color -- */
  95. background: rgba(255,163,152,0.8); /* -- bg color -- */
  96. z-index: 99999;
  97. font-size: 7px;
  98. text-transform: uppercase;
  99. font-family: 'ABeeZee';
  100. }
  101.  
  102. /* ------------------------- basics ------------------------- */
  103. body {
  104. background-image: url('urlhere'); /* -- image bg url (if u want) -- */
  105. background-color: #f0f0f0; /* -- bg color -- */
  106. padding: 30px;
  107. font-family: 'ABeeZee', sans-serif;
  108. font-size: 9px;
  109. letter-spacing: 1px;
  110. text-align: justify;
  111. line-height: 110%;
  112. color: #818181; /* -- font color -- */
  113. }
  114.  
  115. b, strong {
  116. color: #DBBAE5; /* -- bold color -- */
  117. }
  118.  
  119. i, em {
  120. color: #FFA398; /* -- italics color -- */
  121. }
  122.  
  123. u {
  124. text-decoration: none;
  125. padding: 2px;
  126. font-size: 7px;
  127. text-transform: uppercase;
  128. color: #FFA398; /* -- underlined color -- */
  129. background: rgba(0,0,0,0.8); /* -- background color -- */
  130. border-radius: 3px;
  131. }
  132.  
  133. a {
  134. text-decoration: none;
  135. text-transform: uppercase;
  136. color: #DBBAE5; /* -- link color -- */
  137. -webkit-transition: ease-in-out .5s;
  138. -moz-transition: ease-in-out .5s;
  139. -o-transition: ease-in-out .5s;
  140. -ms-transition: ease-in-out .5s;
  141. transition: ease-in-out .5s;
  142. }
  143.  
  144. a:hover {
  145. color: #FFA398; /* -- link hover color -- */
  146. }
  147.  
  148. h1 {
  149. text-align: center;
  150. line-height: 140%;
  151. color: #AAA; /* -- title color -- */
  152. text-shadow: 1px 1px 1px #000;
  153. margin: 0;
  154. }
  155.  
  156. .container {
  157. margin: auto;
  158. width: 1040px;
  159. }
  160.  
  161. /* ------------------------- header ------------------------- */
  162.  
  163. label, .nav {
  164. width: 45px;
  165. border-radius: 3px;
  166. float: left;
  167. text-align: center;
  168. font-size: 7px;
  169. text-transform: uppercase;
  170. background: rgba(255,255,255,0.8);
  171. box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  172. color: #888; /* -- nav links color -- */
  173. margin: 5px;
  174. padding: 12px 5px;
  175. margin-bottom: 10px;
  176. cursor: pointer;
  177. -webkit-transition: ease-in-out .5s;
  178. -moz-transition: ease-in-out .5s;
  179. -o-transition: ease-in-out .5s;
  180. -ms-transition: ease-in-out .5s;
  181. transition: ease-in-out .5s;
  182. }
  183.  
  184. label:hover {
  185. color: #CCC; /* -- nav links hover color -- */
  186. }
  187.  
  188. .about {
  189. width: 500px;
  190. height: 45px;
  191. border-radius: 3px;
  192. float: left;
  193. text-align: center;
  194. background: rgba(255,255,255,0.8);
  195. box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  196. line-height: 100%;
  197. color: #222222; /* -- description text color -- */
  198. margin: 5px;
  199. padding: 5px;
  200. margin-bottom: 10px;
  201. }
  202.  
  203. .nic {
  204. font-size: 20px;
  205. padding-bottom: 3px;
  206. }
  207.  
  208. /* ------------------------- filter ------------------------- */
  209. /* -------------------- don't touch this! ------------------- */
  210. input[type="radio"] {
  211. display:none;
  212. }
  213.  
  214. input[type="radio"][id="blue"]:checked + label {
  215. color:#222;
  216. }
  217. input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green, input[type="radio"][id="blue"]:checked ~ .yellow {
  218. width:0;
  219. height:0;
  220. padding:0;
  221. margin:0;
  222. opacity:0;
  223. }
  224.  
  225. input[type="radio"][id="red"]:checked + label {
  226. color:#222;
  227. }
  228. input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green, input[type="radio"][id="red"]:checked ~ .yellow {
  229. width:0;
  230. height:0;
  231. padding:0;
  232. margin:0;
  233. opacity:0;
  234. }
  235. input[type="radio"][id="green"]:checked + label {
  236. color:#222;
  237. }
  238. input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red, input[type="radio"][id="green"]:checked ~ .yellow {
  239. width:0;
  240. height:0;
  241. padding:0;
  242. margin:0;
  243. opacity:0;
  244. }
  245.  
  246. input[type="radio"][id="yellow"]:checked + label {
  247. color:#222;
  248. }
  249. input[type="radio"][id="yellow"]:checked ~ .blue, input[type="radio"][id="yellow"]:checked ~ .red, input[type="radio"][id="yellow"]:checked ~ .green {
  250. width:0;
  251. height:0;
  252. padding:0;
  253. margin:0;
  254. opacity:0;
  255. }
  256.  
  257. /* ------------------------- boxes ------------------------- */
  258.  
  259. .box {
  260. width: 250px;
  261. height: 400px;
  262. margin: 5px;
  263. background-color: rgba(255,255,255,0.5);
  264. border-radius: 5px;
  265. line-height: 150%;
  266. float:left;
  267. transition: all 1s;
  268. box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  269. }
  270.  
  271. .wrapper {
  272. background-image: linear-gradient(rgba(0,0,0,0) 75%, rgba(0,0,0,0.5));
  273. border-radius: 3px;
  274. height: 360px;
  275. padding: 20px;
  276. }
  277.  
  278. .initials {
  279. font-family: "andara kapital";
  280. text-transform: uppercase;
  281. letter-spacing: -3px;
  282. font-size: 26px;
  283. line-height: 26px;
  284. color: rgba(255,255,255,0.8); /* -- initials color -- */
  285. padding-bottom: 10px;
  286. }
  287.  
  288. .icon {
  289. float: right;
  290. padding-right: 4px;
  291. }
  292.  
  293. .slide {
  294. width: auto;
  295. height: 120px;
  296. margin-top: 220px;
  297. overflow: hidden;
  298. color: #FFFFFF; /* -- arrow color -- */
  299. -webkit-transition: ease-in-out .5s;
  300. -moz-transition: ease-in-out .5s;
  301. -o-transition: ease-in-out .5s;
  302. -ms-transition: ease-in-out .5s;
  303. transition: ease-in-out .5s;
  304. }
  305.  
  306. .slide:hover {
  307. height: 320px;
  308. margin-top: 25px;
  309. }
  310.  
  311. .name {
  312. font-family: "andara kapital";
  313. text-transform: uppercase;
  314. font-size: 26px;
  315. line-height: 36px;
  316. letter-spacing: -2px;
  317. color: rgba(255,255,255,1); /* -- name color -- */
  318. text-shadow: 1px 1px 1px rgba(0,0,0,1); /* -- shadow for the name; change the last 0 to 0.3 or 0.5 if you want it -- */
  319. }
  320.  
  321. .tags {
  322. text-align: left;
  323. line-height: 20px;
  324. }
  325.  
  326. .tags u {
  327. font-size: inherit;
  328. text-transform: lowercase;
  329. margin-right: 5px;
  330. background-color: rgba(255,255,255,0.8); /* -- tags background color -- */
  331. color: #222; /* -- tags text color -- */
  332. }
  333.  
  334. .up {
  335. text-align: center;
  336. margin: 10px
  337. }
  338.  
  339. .desc {
  340. height: 145px;
  341. padding: 5px;
  342. overflow: auto;
  343. color: #FFA398; /* -- description text color -- */
  344. text-shadow: 1px 1px 1px rgb(0,0,0,1);
  345. background-color: rgba(0,0,0,0.6);
  346. }
  347.  
  348. .links {
  349. margin-top: 8px;
  350. text-align: center;
  351. font-size: 20px;
  352. letter-spacing: 8px;
  353. }
  354.  
  355. .links a {
  356. color: rgba(255,255,255,0.8); /* -- oc links color -- */
  357. -webkit-transition: ease-in-out .5s;
  358. -moz-transition: ease-in-out .5s;
  359. -o-transition: ease-in-out .5s;
  360. -ms-transition: ease-in-out .5s;
  361. transition: ease-in-out .5s;
  362. }
  363.  
  364. .links a:hover {
  365. text-shadow: 0px 0px 5px rgba(255,255,255,0.8); /* -- oc links shadow on hover color -- */
  366. }
  367.  
  368. </style>
  369. <body>
  370. <div class="credit"><a href="http://benitalks.tumblr.com" class="th th-bee-o"></a></div>
  371.  
  372. <h1>GODS IN SPACE</h1>
  373.  
  374. <div class="container">
  375.  
  376. <!------------------------- description ------------------------->
  377. <div class="about">this is the description. it doesn't overflows, so don't write too much!
  378. <br>.
  379. <br>.
  380. <br><b>bold</b> <i>italic</i> <a href="url">link</a> <u>underlined</u> <strike>dashed</strike>
  381. <br><b>tip:</b> filters on the left, navigation on the right!</div>
  382.  
  383. <!------------------------- filters -------------------------
  384. PS: yes, you can try to change the colors from the filter names,
  385. but i tried and the thing simply didn't work, so i'd recommend you
  386. to just roll with it.
  387. HOW TO MAKE IT WORK: just put blue/red/green inside the very first div
  388. class of each box. like this: <div class="box COLOR" ...
  389. don't delete the box tho! just change the color!
  390. ------------------------- filters ------------------------->
  391.  
  392. <input type="radio" id="blue" name="color" />
  393. <label for="blue"><span class="nic th-flash-o"></span><br> greek</label>
  394. <input type="radio" id="red" name="color"/>
  395. <label for="red"><span class="nic th-tree-o"></span><br> norse</label>
  396. <input type="radio" id="green" name="color"/>
  397. <label for="green"><span class="nic th-flower-1-o"></span><br> shinto</label>
  398. <input type="radio" id="yellow" name="color"/>
  399. <label for="yellow"><span class="nic th-rainbow-o"></span><br> celtic</label>
  400.  
  401. <!------------------------- filters 2 ------------------------->
  402. <input type="radio" id="blue" name="color" />
  403. <label for="blue"><span class="nic th-flash-o"></span><br> greek</label>
  404. <input type="radio" id="red" name="color"/>
  405. <label for="red"><span class="nic th-tree-o"></span><br> norse</label>
  406. <input type="radio" id="green" name="color"/>
  407. <label for="green"><span class="nic th-heart-1-o"></span><br> green</label>
  408. <input type="radio" id="reset" name="color"/>
  409. <label for="reset"><span class="nic th-infinity-o"></span><br> reset</label>
  410.  
  411. <!------------------------- box begins ------------------------->
  412. <div class="box red" style="background-image:url('https://i.imgur.com/w3VMgs5.png')">
  413. <div class="wrapper">
  414. <div class="initials">
  415. &nbsp;
  416. <div class="icon"><span class="th th-tree-o"></span></div>
  417. </div>
  418. <div class="slide"><br><br>
  419. <u class="fc">matthew daddario as</u>
  420. <div class="name">odin</div>
  421. <div class="tags"><u>age</u> <u>occupation</u></div>
  422. <div class="up"><span class="th th-up-arrow"></span></div>
  423. <div class="desc">
  424. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  425. </div>
  426. <div class="links">
  427. <a href="" title="character tag"><span class="th th-bookmark-1-o"></a>
  428. <a href="" title="pinterest board"><span class="th th-picture-o"></a>
  429. <a href="" title="spotify playlist"><span class="th th-music-o"></a>
  430. <a href="" title="character blog"><span class="th th-notebook-o"></a>
  431. <a href="" title="end game"><span class="th th-heart-1-o"></a>
  432. </div>
  433. </div>
  434. </div>
  435. </div>
  436. <!------------------------- box ends ------------------------->
  437.  
  438. <!------------------------- box begins ------------------------->
  439. <div class="box blue" style="background-image:url('https://i.imgur.com/Ov5O3R4.png')">
  440. <div class="wrapper">
  441. <div class="initials">
  442. &nbsp;
  443. <div class="icon"><span class="th th-flash-o"></span></div>
  444. </div>
  445. <div class="slide"><br><br>
  446. <u class="fc">jessica parker kennedy as</u>
  447. <div class="name">psyche</div>
  448. <div class="tags"><u>age</u> <u>occupation</u></div>
  449. <div class="up"><span class="th th-up-arrow"></span></div>
  450. <div class="desc">
  451. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  452. </div>
  453. <div class="links">
  454. <a href="" title="character tag"><span class="th th-bookmark-1-o"></a>
  455. <a href="" title="pinterest board"><span class="th th-picture-o"></a>
  456. <a href="" title="spotify playlist"><span class="th th-music-o"></a>
  457. <a href="" title="character blog"><span class="th th-notebook-o"></a>
  458. <a href="" title="end game"><span class="th th-heart-1-o"></a>
  459. </div>
  460. </div>
  461. </div>
  462. </div>
  463. <!------------------------- box ends ------------------------->
  464.  
  465. <!------------------------- box begins ------------------------->
  466. <div class="box blue" style="background-image:url('https://i.imgur.com/4evdOUn.png')">
  467. <div class="wrapper">
  468. <div class="initials">
  469. &nbsp;
  470. <div class="icon"><span class="th th-flash-o"></span></div>
  471. </div>
  472. <div class="slide"><br><br>
  473. <u class="fc">jack o'connell as</u>
  474. <div class="name">hephaestus</div>
  475. <div class="tags"><u>age</u> <u>occupation</u></div>
  476. <div class="up"><span class="th th-up-arrow"></span></div>
  477. <div class="desc">
  478. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  479. </div>
  480. <div class="links">
  481. <a href="" title="character tag"><span class="th th-bookmark-1-o"></a>
  482. <a href="" title="pinterest board"><span class="th th-picture-o"></a>
  483. <a href="" title="spotify playlist"><span class="th th-music-o"></a>
  484. <a href="" title="character blog"><span class="th th-notebook-o"></a>
  485. <a href="" title="end game"><span class="th th-heart-1-o"></a>
  486. </div>
  487. </div>
  488. </div>
  489. </div>
  490. <!------------------------- box ends ------------------------->
  491.  
  492. <!------------------------- box begins ------------------------->
  493. <div class="box blue" style="background-image:url('https://i.imgur.com/1K0y9JK.png')">
  494. <div class="wrapper">
  495. <div class="initials">
  496. &nbsp;
  497. <div class="icon"><span class="th th-flash-o"></span></div>
  498. </div>
  499. <div class="slide"><br><br>
  500. <u class="fc">shay mitchell as</u>
  501. <div class="name">persephone</div>
  502. <div class="tags"><u>age</u> <u>occupation</u></div>
  503. <div class="up"><span class="th th-up-arrow"></span></div>
  504. <div class="desc">
  505. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  506. </div>
  507. <div class="links">
  508. <a href="" title="character tag"><span class="th th-bookmark-1-o"></a>
  509. <a href="" title="pinterest board"><span class="th th-picture-o"></a>
  510. <a href="" title="spotify playlist"><span class="th th-music-o"></a>
  511. <a href="" title="character blog"><span class="th th-notebook-o"></a>
  512. <a href="" title="end game"><span class="th th-heart-1-o"></a>
  513. </div>
  514. </div>
  515. </div>
  516. </div>
  517. <!------------------------- box ends ------------------------->
  518.  
  519. <!------------------------- box begins ------------------------->
  520. <div class="box COLOR" style="background-image:url('https://i.imgur.com/4vO9ZVA.png')">
  521. <div class="wrapper">
  522. <div class="initials">
  523. &nbsp;
  524. <div class="icon"><span class="th th-heart-1-o"></span></div>
  525. </div>
  526. <div class="slide"><br><br>
  527. <u class="fc">faceclaim as</u>
  528. <div class="name">surname name</div>
  529. <div class="tags"><u>age</u> <u>occupation</u></div>
  530. <div class="up"><span class="th th-up-arrow"></span></div>
  531. <div class="desc">
  532. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  533. </div>
  534. <div class="links">
  535. <a href="" title="character tag"><span class="th th-bookmark-1-o"></a>
  536. <a href="" title="pinterest board"><span class="th th-picture-o"></a>
  537. <a href="" title="spotify playlist"><span class="th th-music-o"></a>
  538. <a href="" title="character blog"><span class="th th-notebook-o"></a>
  539. <a href="" title="end game"><span class="th th-heart-1-o"></a>
  540. </div>
  541. </div>
  542. </div>
  543. </div>
  544. <!------------------------- box ends ------------------------->
  545.  
  546. <!------------------------- box begins ------------------------->
  547. <div class="box COLOR" style="background-image:url('https://i.imgur.com/4vO9ZVA.png')">
  548. <div class="wrapper">
  549. <div class="initials">
  550. &nbsp;
  551. <div class="icon"><span class="th th-heart-1-o"></span></div>
  552. </div>
  553. <div class="slide"><br><br>
  554. <u class="fc">faceclaim as</u>
  555. <div class="name">surname name</div>
  556. <div class="tags"><u>age</u> <u>occupation</u></div>
  557. <div class="up"><span class="th th-up-arrow"></span></div>
  558. <div class="desc">
  559. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  560. </div>
  561. <div class="links">
  562. <a href="" title="character tag"><span class="th th-bookmark-1-o"></a>
  563. <a href="" title="pinterest board"><span class="th th-picture-o"></a>
  564. <a href="" title="spotify playlist"><span class="th th-music-o"></a>
  565. <a href="" title="character blog"><span class="th th-notebook-o"></a>
  566. <a href="" title="end game"><span class="th th-heart-1-o"></a>
  567. </div>
  568. </div>
  569. </div>
  570. </div>
  571. <!------------------------- box ends ------------------------->
  572.  
  573. <!------------------------- box begins ------------------------->
  574. <div class="box COLOR" style="background-image:url('https://i.imgur.com/4vO9ZVA.png')">
  575. <div class="wrapper">
  576. <div class="initials">
  577. &nbsp;
  578. <div class="icon"><span class="th th-heart-1-o"></span></div>
  579. </div>
  580. <div class="slide"><br><br>
  581. <u class="fc">faceclaim as</u>
  582. <div class="name">surname name</div>
  583. <div class="tags"><u>age</u> <u>occupation</u></div>
  584. <div class="up"><span class="th th-up-arrow"></span></div>
  585. <div class="desc">
  586. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  587. </div>
  588. <div class="links">
  589. <a href="" title="character tag"><span class="th th-bookmark-1-o"></a>
  590. <a href="" title="pinterest board"><span class="th th-picture-o"></a>
  591. <a href="" title="spotify playlist"><span class="th th-music-o"></a>
  592. <a href="" title="character blog"><span class="th th-notebook-o"></a>
  593. <a href="" title="end game"><span class="th th-heart-1-o"></a>
  594. </div>
  595. </div>
  596. </div>
  597. </div>
  598. <!------------------------- box ends ------------------------->
  599.  
  600. <!------------------------- box begins ------------------------->
  601. <div class="box COLOR" style="background-image:url('https://i.imgur.com/4vO9ZVA.png')">
  602. <div class="wrapper">
  603. <div class="initials">
  604. &nbsp;
  605. <div class="icon"><span class="th th-heart-1-o"></span></div>
  606. </div>
  607. <div class="slide"><br><br>
  608. <u class="fc">faceclaim as</u>
  609. <div class="name">surname name</div>
  610. <div class="tags"><u>age</u> <u>occupation</u></div>
  611. <div class="up"><span class="th th-up-arrow"></span></div>
  612. <div class="desc">
  613. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  614. </div>
  615. <div class="links">
  616. <a href="" title="character tag"><span class="th th-bookmark-1-o"></a>
  617. <a href="" title="pinterest board"><span class="th th-picture-o"></a>
  618. <a href="" title="spotify playlist"><span class="th th-music-o"></a>
  619. <a href="" title="character blog"><span class="th th-notebook-o"></a>
  620. <a href="" title="end game"><span class="th th-heart-1-o"></a>
  621. </div>
  622. </div>
  623. </div>
  624. </div>
  625. <!------------------------- box ends ------------------------->
  626. </ul>
  627. </body>
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!