API tools faq
paste
Advertisement
sercndipity

   —— · ❝ ❥「 003. BUTTERFLY 」

sercndipity
Mar 19th, 2019 (edited)
4,029
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 23.33 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3.                *   ( codes by bella || serendipitythms )
  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 as much as 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="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet">
  40. <script src="//pull.cappuccicons.com/cpf.js"></script>
  41.  
  42. </head>
  43.  
  44. <style type="text/css">
  45. /* ------------------------- credits ------------------------- */
  46. /* -------------------- don't touch this! -------------------- */
  47. .credit {
  48.   position: fixed;
  49.   bottom: 15px;
  50.   right: 15px;
  51.   width: 15px;
  52.   height: 15px;
  53.   border-radius: 50%;
  54.   padding: 5px;
  55.   font-size:15px;
  56.   background: rgba(255,255,255,0.5);
  57. }
  58.  
  59. /* ------------------------- scrollbar ------------------------- */
  60. ::-webkit-scrollbar-thumb {
  61.   background-color: #DBBAE5; /* -- bar color -- */
  62. }
  63.  
  64. ::-webkit-scrollbar-track {
  65.   background-color: #F1F1F1; /* -- bg color -- */
  66. }
  67.  
  68. ::-webkit-scrollbar {
  69.   height:2px;
  70.   width:2px;
  71. }
  72.  
  73. /* ------------------------- selection ------------------------- */
  74. ::-moz-selection {
  75.   background: RGB(255,163,152, 0.5); /* -- background color -- */
  76.   color: #FFF; /* -- text color -- */
  77. }
  78.  
  79. ::selection {
  80.   background: RGB(255,163,152, 0.5); /* -- background color -- */
  81.   color: #FFF; /* -- text color -- */
  82. }
  83.  
  84.  
  85. /* ------------------------- tooltip ------------------------- */
  86. #s-m-t-tooltip {
  87.   max-width: 300px;
  88.   border-radius: 3px;
  89.   padding: 5px 5px;
  90.   margin: 25px 20px 5px 0px;
  91.   color: #FFF; /* -- text color -- */
  92.   background: rgba(255,163,152,0.8); /* -- bg color -- */
  93.   z-index: 99999;
  94.   font-size: 7px;
  95.   text-transform: uppercase;
  96.   font-family: 'ABeeZee';
  97. }
  98.  
  99. /* ------------------------- basics ------------------------- */
  100. body {
  101.   background-image: url('urlhere'); /* -- image bg url (if u want) -- */
  102.   background-color: #f0f0f0; /* -- bg color -- */
  103.   padding: 30px;
  104.   font-family: 'ABeeZee', sans-serif;
  105.   font-size: 9px;
  106.   letter-spacing: 1px;
  107.   text-align: justify;
  108.   line-height: 110%;
  109.   color: #818181; /* -- font color -- */
  110. }
  111.  
  112. b, strong {
  113.   color: #DBBAE5; /* -- bold color -- */
  114. }
  115.  
  116. i, em {
  117.   color: #FFA398; /* -- italics color -- */
  118. }
  119.  
  120. u {
  121.   text-decoration: none;
  122.   padding: 3px 2px 2px 3px;
  123.   font-size: 7px;
  124.   text-transform: uppercase;
  125.   color: #FFA398; /* -- underlined color -- */
  126.   background: rgba(0,0,0,0.5); /* -- background color -- */
  127.   border-radius: 3px;
  128. }
  129.  
  130. a {
  131.   text-decoration: none;
  132.   text-transform: uppercase;
  133.   color: #DBBAE5; /* -- link color -- */
  134.   -webkit-transition: ease-in-out .5s;
  135.   -moz-transition: ease-in-out .5s;
  136.   -o-transition: ease-in-out .5s;
  137.   -ms-transition: ease-in-out .5s;    
  138.   transition: ease-in-out .5s;
  139. }
  140.  
  141. a:hover {
  142.   color: #FFA398; /* -- link hover color -- */
  143. }
  144.  
  145. h1 {
  146.   text-align: center;
  147.   line-height: 140%;
  148.   color: #DBBAE5; /* -- title color -- */
  149.   margin: 0;
  150. }
  151.  
  152. .container {
  153.   margin: auto;
  154.   width: 1040px;
  155. }
  156.  
  157. /* ------------------------- header ------------------------- */
  158.  
  159. label, .nav {
  160.   width: 45px;
  161.   border-radius: 3px;
  162.   float: left;
  163.   text-align: center;
  164.   font-size: 7px;
  165.   text-transform: uppercase;
  166.   background: rgba(255,255,255,0.8);
  167.   box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  168.   color: #FFA398; /* -- nav links color -- */
  169.   margin: 5px;
  170.   padding: 12px 5px;
  171.   margin-bottom: 10px;
  172.   cursor: pointer;
  173.   -webkit-transition: ease-in-out .5s;
  174.   -moz-transition: ease-in-out .5s;
  175.   -o-transition: ease-in-out .5s;
  176.   -ms-transition: ease-in-out .5s;    
  177.   transition: ease-in-out .5s;
  178. }
  179.  
  180. label:hover {
  181.   color: #DBBAE5; /* -- nav links hover color -- */
  182. }
  183.  
  184. .about {
  185.   width: 500px;
  186.   height: 45px;
  187.   border-radius: 3px;
  188.   float: left;
  189.   text-align: center;
  190.   background: rgba(255,255,255,0.8);
  191.   box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  192.   line-height: 100%;
  193.   color: #222222; /* -- description text color -- */
  194.   margin: 5px;
  195.   padding: 5px;
  196.   margin-bottom: 10px;
  197. }
  198.  
  199. .nic {
  200.   font-size: 20px;
  201.   padding-bottom: 3px;
  202. }
  203.  
  204. /* ------------------------- filter ------------------------- */
  205. /* -------------------- don't touch this! ------------------- */
  206. input[type="radio"] {
  207.     display:none;
  208. }
  209.  
  210. input[type="radio"][id="blue"]:checked + label {
  211.   color:#222;
  212. }
  213. input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green {
  214.   width:0;
  215.   height:0;
  216.   padding:0;
  217.   margin:0;
  218.   opacity:0;
  219. }
  220. input[type="radio"][id="red"]:checked + label {
  221.   color:#222;
  222. }
  223. input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green {
  224.   width:0;
  225.   height:0;
  226.   padding:0;
  227.   margin:0;
  228.   opacity:0;
  229. }
  230. input[type="radio"][id="green"]:checked + label {
  231.   color:#222;
  232. }
  233. input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red {
  234.   width:0;
  235.   height:0;
  236.   padding:0;
  237.   margin:0;
  238.   opacity:0;
  239. }
  240.  
  241. /* ------------------------- boxes ------------------------- */
  242.  
  243. .box {
  244.   width: 250px;
  245.   height: 400px;
  246.   margin: 5px;
  247.   background-color: rgba(255,255,255,0.5);
  248.   border-radius: 3px;
  249.   line-height: 150%;
  250.   float:left;
  251.   transition: all 1s;
  252.   box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  253. }
  254.  
  255. .wrapper {
  256.   background-image: linear-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,0.9));
  257.   /* if you wanna change the gradient size/opacity, it's here! the percentage is where the gradient begins, and the last 0.9 is the opacity [1 being default] */
  258.   border-radius: 3px;
  259.   height: 360px;
  260.   padding: 20px;
  261. }
  262.  
  263. .initials {
  264.   font-family: 'Rubik', sans-serif;
  265.   text-transform: uppercase;
  266.   letter-spacing: -2px;
  267.   font-size: 26px;
  268.   line-height: 26px;
  269.   color: rgba(255,255,255,0.8); /* -- initials color -- */
  270.   border-bottom: 1px solid;
  271.   padding-bottom: 10px;
  272. }
  273.  
  274. .icon {
  275.   float: right;
  276.   padding-right: 4px;
  277. }
  278.  
  279. .slide {
  280.   width: auto;
  281.   height: 120px;
  282.   margin-top: 220px;
  283.   overflow: hidden;
  284.   color: #FFFFFF; /* -- arrow color -- */
  285.   -webkit-transition: ease-in-out .5s;
  286.   -moz-transition: ease-in-out .5s;
  287.   -o-transition: ease-in-out .5s;
  288.   -ms-transition: ease-in-out .5s;    
  289.   transition: ease-in-out .5s;
  290. }
  291.  
  292. .slide:hover {
  293.   height: 300px;
  294.   margin-top: 35px;
  295. }
  296.  
  297. .name {
  298.   font-family: 'Rubik', sans-serif;
  299.   text-transform: uppercase;
  300.   font-size: 26px;
  301.   line-height: 36px;
  302.   letter-spacing: -2px;
  303.   color: rgba(255,255,255,0.8); /* -- name color -- */
  304.   text-shadow: 1px 1px 1px rgba(0,0,0,0); /* -- shadow for the name; change the last 0 to 0.3 or 0.5 if you want it -- */
  305. }
  306.  
  307. .tags {
  308.   text-align: left;
  309.   line-height: 20px;
  310. }
  311.  
  312. .tags u {
  313.   font-size: inherit;
  314.   text-transform: lowercase;
  315.   margin-right: 5px;
  316.   background-color: rgba(255,255,255,0.8); /* -- tags background color -- */
  317.   color: #222; /* -- tags text color -- */
  318. }
  319.  
  320. .up {
  321.   text-align: center;
  322.   margin: 10px
  323. }
  324.  
  325. .desc {
  326.   height: 145px;
  327.   padding-right: 5px;
  328.   overflow: auto;
  329.   color: #ffffff; /* -- description text color -- */
  330. }
  331.  
  332. .links {
  333.   margin-top: 8px;
  334.   text-align: center;
  335.   font-size: 20px;
  336.   letter-spacing: 8px;
  337. }
  338.  
  339. .links a {
  340.   color: rgba(255,255,255,0.8); /* -- oc links color -- */
  341.   -webkit-transition: ease-in-out .5s;
  342.   -moz-transition: ease-in-out .5s;
  343.   -o-transition: ease-in-out .5s;
  344.   -ms-transition: ease-in-out .5s;    
  345.   transition: ease-in-out .5s;
  346. }
  347.  
  348. .links a:hover {
  349.   text-shadow: 0px 0px 5px rgba(255,255,255,0.8); /* -- oc links shadow on hover color -- */
  350. }
  351.  
  352. </style>
  353. <body>
  354. <!--- CREDITS, PLEASE DON'T TOUCH THIS --->
  355. <div class="credit"><a href="http://serendipitythms.tumblr.com" title="coded by bella"><i class="cp cp-bee-o"></i></a></div>
  356.  
  357. <h1>title here</h1>
  358.  
  359. <div class="container">
  360.  
  361. <!------------------------- filters -------------------------
  362.  PS: yes, you can try to change the colors from the filter names,
  363.  but i tried and the thing simply didn't work, so i'd recommend you
  364.  to just roll with it.
  365.  HOW TO MAKE IT WORK: just put blue/red/green inside the very first div
  366.  class of each box. like this: <div class="box COLOR" ...
  367.  don't delete the box tho! just change the color!
  368.  ------------------------- filters ------------------------->
  369.  
  370.   <input type="radio" id="blue" name="color" />
  371.   <label for="blue"><span class="nic cp cp-heart-o"></span><br> blue</label>
  372.   <input type="radio" id="red" name="color"/>
  373.   <label for="red"><span class="nic cp cp-heart-o"></span><br> red</label>
  374.   <input type="radio" id="green" name="color"/>
  375.   <label for="green"><span class="nic cp cp-heart-o"></span><br> green</label>
  376.   <input type="radio" id="reset" name="color"/>
  377.   <label for="reset"><span class="nic cp cp-heart-o"></span><br> reset</label>
  378.  
  379. <!------------------------- description ------------------------->
  380.   <div class="about">this is the description. it doesn't overflows, so don't write too much!
  381.   <br>.
  382.   <br>.
  383.   <br><b>bold</b> <i>italic</i> <a href="url">link</a> <u>underlined</u> <strike>dashed</strike>
  384.   <br><b>tip:</b> filters on the left, navigation on the right!</div>
  385.  
  386. <!------------------------- navigation ------------------------->
  387.   <a class="nav" title="" href=""><span class="nic cp cp-heart-o"></span><br> first</a>
  388.   <a class="nav" title="" href=""><span class="nic cp cp-heart-o"></span><br> second</a>
  389.   <a class="nav" title="" href=""><span class="nic cp cp-heart-o"></span><br> third</a>
  390.   <a class="nav" title="" href=""><span class="nic cp cp-heart-o"></span><br> fourth</a>
  391.  
  392. <!------------------------- box begins ------------------------->
  393.   <div class="box COLOR" style="background-image:url('https://via.placeholder.com/250x400/cccccc')">
  394.     <div class="wrapper">
  395.       <div class="initials">
  396.         xxx.
  397.         <div class="icon"><span class="cp cp-heart-o"></span></div>
  398.       </div>
  399.       <div class="slide">
  400.         <u class="fc">faceclaim as</u>
  401.         <div class="name">surname name</div>
  402.         <div class="tags"><u>aka <b>alias</b></u> <u>age</u> <u>gender</u> <u>zodiac</u> <u>occupation</u> <u><b>♡</b> end game</u></div>
  403.         <div class="up"><span class="cp cp-arrow-up"></span></div>
  404.         <div class="desc">
  405.           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.
  406.         </div>
  407.         <div class="links">
  408.           <a href="" title="character tag"><span class="cp cp-bookmark-o"></a>
  409.           <a href="" title="pinterest board"><span class="cp cp-image-o"></a>
  410.           <a href="" title="spotify playlist"><span class="cp cp-music-note"></a>
  411.           <a href="" title="character blog"><span class="cp cp-notes-o"></a>
  412.           <a href="" title="end game"><span class="cp cp-heart-o"></a>
  413.         </div>
  414.       </div>
  415.     </div>
  416.   </div>
  417. <!------------------------- box ends ------------------------->
  418.  
  419. <!------------------------- box begins ------------------------->
  420.   <div class="box COLOR" style="background-image:url('https://via.placeholder.com/250x400/cccccc')">
  421.     <div class="wrapper">
  422.       <div class="initials">
  423.         xxx.
  424.         <div class="icon"><span class="cp cp-heart-o"></span></div>
  425.       </div>
  426.       <div class="slide">
  427.         <u class="fc">faceclaim as</u>
  428.         <div class="name">surname name</div>
  429.         <div class="tags"><u>aka <b>alias</b></u> <u>age</u> <u>gender</u> <u>zodiac</u> <u>occupation</u> <u><b>♡</b> end game</u></div>
  430.         <div class="up"><span class="cp cp-arrow-up"></span></div>
  431.         <div class="desc">
  432.           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.
  433.         </div>
  434.         <div class="links">
  435.           <a href="" title="character tag"><span class="cp cp-bookmark-o"></a>
  436.           <a href="" title="pinterest board"><span class="cp cp-image-o"></a>
  437.           <a href="" title="spotify playlist"><span class="cp cp-music-note"></a>
  438.           <a href="" title="character blog"><span class="cp cp-notes-o"></a>
  439.           <a href="" title="end game"><span class="cp cp-heart-o"></a>
  440.         </div>
  441.       </div>
  442.     </div>
  443.   </div>
  444. <!------------------------- box ends ------------------------->
  445.  
  446. <!------------------------- box begins ------------------------->
  447.   <div class="box COLOR" style="background-image:url('https://via.placeholder.com/250x400/cccccc')">
  448.     <div class="wrapper">
  449.       <div class="initials">
  450.         xxx.
  451.         <div class="icon"><span class="cp cp-heart-o"></span></div>
  452.       </div>
  453.       <div class="slide">
  454.         <u class="fc">faceclaim as</u>
  455.         <div class="name">surname name</div>
  456.         <div class="tags"><u>aka <b>alias</b></u> <u>age</u> <u>gender</u> <u>zodiac</u> <u>occupation</u> <u><b>♡</b> end game</u></div>
  457.         <div class="up"><span class="cp cp-arrow-up"></span></div>
  458.         <div class="desc">
  459.           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.
  460.         </div>
  461.         <div class="links">
  462.           <a href="" title="character tag"><span class="cp cp-bookmark-o"></a>
  463.           <a href="" title="pinterest board"><span class="cp cp-image-o"></a>
  464.           <a href="" title="spotify playlist"><span class="cp cp-music-note"></a>
  465.           <a href="" title="character blog"><span class="cp cp-notes-o"></a>
  466.           <a href="" title="end game"><span class="cp cp-heart-o"></a>
  467.         </div>
  468.       </div>
  469.     </div>
  470.   </div>
  471. <!------------------------- box ends ------------------------->
  472.  
  473. <!------------------------- box begins ------------------------->
  474.   <div class="box COLOR" style="background-image:url('https://via.placeholder.com/250x400/cccccc')">
  475.     <div class="wrapper">
  476.       <div class="initials">
  477.         xxx.
  478.         <div class="icon"><span class="cp cp-heart-o"></span></div>
  479.       </div>
  480.       <div class="slide">
  481.         <u class="fc">faceclaim as</u>
  482.         <div class="name">surname name</div>
  483.         <div class="tags"><u>aka <b>alias</b></u> <u>age</u> <u>gender</u> <u>zodiac</u> <u>occupation</u> <u><b>♡</b> end game</u></div>
  484.         <div class="up"><span class="cp cp-arrow-up"></span></div>
  485.         <div class="desc">
  486.           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.
  487.         </div>
  488.         <div class="links">
  489.           <a href="" title="character tag"><span class="cp cp-bookmark-o"></a>
  490.           <a href="" title="pinterest board"><span class="cp cp-image-o"></a>
  491.           <a href="" title="spotify playlist"><span class="cp cp-music-note"></a>
  492.           <a href="" title="character blog"><span class="cp cp-notes-o"></a>
  493.           <a href="" title="end game"><span class="cp cp-heart-o"></a>
  494.         </div>
  495.       </div>
  496.     </div>
  497.   </div>
  498. <!------------------------- box ends ------------------------->
  499.  
  500. <!------------------------- box begins ------------------------->
  501.   <div class="box COLOR" style="background-image:url('https://via.placeholder.com/250x400/cccccc')">
  502.     <div class="wrapper">
  503.       <div class="initials">
  504.         xxx.
  505.         <div class="icon"><span class="cp cp-heart-o"></span></div>
  506.       </div>
  507.       <div class="slide">
  508.         <u class="fc">faceclaim as</u>
  509.         <div class="name">surname name</div>
  510.         <div class="tags"><u>aka <b>alias</b></u> <u>age</u> <u>gender</u> <u>zodiac</u> <u>occupation</u> <u><b>♡</b> end game</u></div>
  511.         <div class="up"><span class="cp cp-arrow-up"></span></div>
  512.         <div class="desc">
  513.           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.
  514.         </div>
  515.         <div class="links">
  516.           <a href="" title="character tag"><span class="cp cp-bookmark-o"></a>
  517.           <a href="" title="pinterest board"><span class="cp cp-image-o"></a>
  518.           <a href="" title="spotify playlist"><span class="cp cp-music-note"></a>
  519.           <a href="" title="character blog"><span class="cp cp-notes-o"></a>
  520.           <a href="" title="end game"><span class="cp cp-heart-o"></a>
  521.         </div>
  522.       </div>
  523.     </div>
  524.   </div>
  525. <!------------------------- box ends ------------------------->
  526.  
  527. <!------------------------- box begins ------------------------->
  528.   <div class="box COLOR" style="background-image:url('https://via.placeholder.com/250x400/cccccc')">
  529.     <div class="wrapper">
  530.       <div class="initials">
  531.         xxx.
  532.         <div class="icon"><span class="cp cp-heart-o"></span></div>
  533.       </div>
  534.       <div class="slide">
  535.         <u class="fc">faceclaim as</u>
  536.         <div class="name">surname name</div>
  537.         <div class="tags"><u>aka <b>alias</b></u> <u>age</u> <u>gender</u> <u>zodiac</u> <u>occupation</u> <u><b>♡</b> end game</u></div>
  538.         <div class="up"><span class="cp cp-arrow-up"></span></div>
  539.         <div class="desc">
  540.           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.
  541.         </div>
  542.         <div class="links">
  543.           <a href="" title="character tag"><span class="cp cp-bookmark-o"></a>
  544.           <a href="" title="pinterest board"><span class="cp cp-image-o"></a>
  545.           <a href="" title="spotify playlist"><span class="cp cp-music-note"></a>
  546.           <a href="" title="character blog"><span class="cp cp-notes-o"></a>
  547.           <a href="" title="end game"><span class="cp cp-heart-o"></a>
  548.         </div>
  549.       </div>
  550.     </div>
  551.   </div>
  552. <!------------------------- box ends ------------------------->
  553.  
  554. <!------------------------- box begins ------------------------->
  555.   <div class="box COLOR" style="background-image:url('https://via.placeholder.com/250x400/cccccc')">
  556.     <div class="wrapper">
  557.       <div class="initials">
  558.         xxx.
  559.         <div class="icon"><span class="cp cp-heart-o"></span></div>
  560.       </div>
  561.       <div class="slide">
  562.         <u class="fc">faceclaim as</u>
  563.         <div class="name">surname name</div>
  564.         <div class="tags"><u>aka <b>alias</b></u> <u>age</u> <u>gender</u> <u>zodiac</u> <u>occupation</u> <u><b>♡</b> end game</u></div>
  565.         <div class="up"><span class="cp cp-arrow-up"></span></div>
  566.         <div class="desc">
  567.           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.
  568.         </div>
  569.         <div class="links">
  570.           <a href="" title="character tag"><span class="cp cp-bookmark-o"></a>
  571.           <a href="" title="pinterest board"><span class="cp cp-image-o"></a>
  572.           <a href="" title="spotify playlist"><span class="cp cp-music-note"></a>
  573.           <a href="" title="character blog"><span class="cp cp-notes-o"></a>
  574.           <a href="" title="end game"><span class="cp cp-heart-o"></a>
  575.         </div>
  576.       </div>
  577.     </div>
  578.   </div>
  579. <!------------------------- box ends ------------------------->
  580.  
  581. <!------------------------- box begins ------------------------->
  582.   <div class="box COLOR" style="background-image:url('https://via.placeholder.com/250x400/cccccc')">
  583.     <div class="wrapper">
  584.       <div class="initials">
  585.         xxx.
  586.         <div class="icon"><span class="cp cp-heart-o"></span></div>
  587.       </div>
  588.       <div class="slide">
  589.         <u class="fc">faceclaim as</u>
  590.         <div class="name">surname name</div>
  591.         <div class="tags"><u>aka <b>alias</b></u> <u>age</u> <u>gender</u> <u>zodiac</u> <u>occupation</u> <u><b>♡</b> end game</u></div>
  592.         <div class="up"><span class="cp cp-arrow-up"></span></div>
  593.         <div class="desc">
  594.           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.
  595.         </div>
  596.         <div class="links">
  597.           <a href="" title="character tag"><span class="cp cp-bookmark-o"></a>
  598.           <a href="" title="pinterest board"><span class="cp cp-image-o"></a>
  599.           <a href="" title="spotify playlist"><span class="cp cp-music-note"></a>
  600.           <a href="" title="character blog"><span class="cp cp-notes-o"></a>
  601.           <a href="" title="end game"><span class="cp cp-heart-o"></a>
  602.         </div>
  603.       </div>
  604.     </div>
  605.   </div>
  606. <!------------------------- box ends ------------------------->
  607. </ul>
  608. </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!