API tools faq
paste
Advertisement
oliviacodes

there goes the fear

oliviacodes
Nov 6th, 2018
142
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.17 KB | None | 0 0
raw download clone embed print report
  1.  
  2. [dohtml]
  3. <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  4. <link href="https://fonts.googleapis.com/css?family=Gothic+A1:100,200,300,400,500,600,700,800,900" rel="stylesheet">
  5.  
  6. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  7.  
  8.  
  9. <div id="daisy">
  10. <input type="radio" name="daisytabs" id="daisyn1" checked>
  11. <label for="daisyn1">CHARACTER 1 NAME</label>
  12. <input type="radio" name="daisytabs" id="daisyn2">
  13. <label for="daisyn2">CHARACTER 2 NAME</label>
  14. <input type="radio" name="daisytabs" id="daisyn3">
  15. <label for="daisyn3">CHARACTER 3 NAME</label>
  16.  
  17. <input type="radio" name="daisytabs" id="daisyn4">
  18. <label for="daisyn4">CHARACTER 4 NAME</label>
  19.  
  20. <bg1></bg1>
  21. <bottom>
  22. <name1>CHARACTER 1 NAME</name1>
  23. <name2>CHARACTER 2 NAME</name2>
  24. <name3>CHARACTER 3 NAME</name3>
  25. <name4>CHARACTER 4 NAME</name4>
  26. </bottom>
  27. <div id="daisy-pcont">
  28. <img1 style="background-image: url(IMG HERE WILL RESIZE TO FIT)"></img1>
  29.  
  30. <img2 style="background-image: url(IMG HERE WILL RESIZE TO FIT)"></img2>
  31. <img3 style="background-image: url(IMG HERE WILL RESIZE TO FIT)"></img3>
  32. <img4 style="background-image: url(IMG HERE WILL RESIZE TO FIT)"></img4>
  33.  
  34. <scr1></scr1><scr2></scr2><scr3></scr3><scr4></scr4>
  35. </div>
  36.  
  37. <div id="daisytxtc">
  38. <div id="daisytxt1">
  39. <input type="checkbox" id="daisytog1">
  40. <label for="daisytog1"><ar1><span class="lnr lnr-arrow-left"></span></ar1><ar2><span class="lnr lnr-arrow-right"></span></ar2>
  41. <abt>about</abt>
  42. <rels>relationships</rels>
  43. </label>
  44. <div class="daisy-txta">
  45. <h1>title</h1>
  46. TEXT HERE
  47.  
  48. </div>
  49. <div class="daisy-txtb">
  50. <h1>friends</h1>
  51. FRIENDS HERE
  52.  
  53. <p><h1>enemies</h1>
  54. ENEMIES HERE
  55.  
  56. <p><h1>lovers</h1>
  57. LOVERS HERE
  58.  
  59. </div>
  60.  
  61. </div>
  62.  
  63. <div id="daisytxt2">
  64. <input type="checkbox" id="daisytog2">
  65. <label for="daisytog2"><ar1><span class="lnr lnr-arrow-left"></span></ar1><ar2><span class="lnr lnr-arrow-right"></span></ar2>
  66. <abt>about</abt>
  67. <rels>relationships</rels>
  68.  
  69. </label>
  70. <div class="daisy-txta">
  71. <h1>title</h1>
  72. TEXT HERE
  73.  
  74. </div>
  75. <div class="daisy-txtb">
  76. <h1>friends</h1>
  77. FRIENDS HERE
  78.  
  79. <p><h1>enemies</h1>
  80. ENEMIES HERE
  81.  
  82. <p><h1>lovers</h1>
  83. LOVERS HERE
  84.  
  85. </div>
  86. </div>
  87.  
  88. <div id="daisytxt3">
  89. <input type="checkbox" id="daisytog3">
  90. <label for="daisytog3">
  91. <ar1><span class="lnr lnr-arrow-left"></span></ar1><ar2><span class="lnr lnr-arrow-right"></span></ar2>
  92. <abt>about</abt>
  93. <rels>relationships</rels>
  94. </label>
  95.  
  96. <div class="daisy-txta">
  97. <h1>title</h1>
  98. TEXT HERE
  99.  
  100. </div>
  101. <div class="daisy-txtb">
  102. <h1>friends</h1>
  103. FRIENDS HERE
  104.  
  105. <p><h1>enemies</h1>
  106. ENEMIES HERE
  107.  
  108. <p><h1>lovers</h1>
  109. LOVERS HERE
  110.  
  111. </div> </div>
  112.  
  113. <div id="daisytxt4">
  114. <input type="checkbox" id="daisytog4">
  115. <label for="daisytog4">
  116. <ar1><span class="lnr lnr-arrow-left"></span></ar1><ar2><span class="lnr lnr-arrow-right"></span></ar2>
  117. <abt>about</abt>
  118. <rels>relationships</rels>
  119. </label>
  120.  
  121. <div class="daisy-txta">
  122. <h1>title</h1>
  123. TEXT HERE
  124.  
  125. </div>
  126. <div class="daisy-txtb">
  127. <h1>friends</h1>
  128. FRIENDS HERE
  129.  
  130. <p><h1>enemies</h1>
  131. ENEMIES HERE
  132.  
  133. <p><h1>lovers</h1>
  134. LOVERS HERE
  135.  
  136. </div>
  137.  
  138.  
  139. </div>
  140. </div>
  141. </div>
  142.  
  143. <a href="http://candylandcouture.b1.jcink.com/index.php?showuser=6763"><div style="width: 600px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">liv's codes</div></a>
  144.  
  145. <style>
  146. #daisy {height: 650px; width: 598px; background: #f0f0f0; margin: auto; outline: 1px solid #777; outline-offset: -15px; border: 1px solid #777; position: relative; }
  147. #daisy bottom {height: 60px; width: 570px; background: #fcfcfc; border-top: 1px solid #777; display: block; position: absolute; bottom: 14px; left: 14px; -webkit-transition: 0.4s ease; -moz-transition: 0.4s ease; -ms-transition: 0.4s ease; -o-transition: 0.4s ease;}
  148. #daisy name1, #daisy name2, #daisy name3, #daisy name4 {height: 60px; width: 510px; line-height: 60px; font-family: poppins; left: 30px; position: absolute; text-transform: uppercase; font-weight: 900; font-size: 25px; color: #000; opacity: 0; letter-spacing: 1px}
  149. #daisy-pcont {height: 515px; position: absolute; width: 300px; border: 1px solid #777; left: 35px; top: 35px; z-index: 5; overflow: hidden}
  150. #daisy img1, #daisy img2, #daisy img3, #daisy img4 {height: 515px; width: 300px; background-size: cover; background-position: center; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); display: block; position: absolute; -webkit-transition: 0.7s ease; -moz-transition: 0.7s ease; -ms-transition: 0.7s ease; -o-transition: 0.7s ease;}
  151. #daisy scr1, #daisy scr2, #daisy scr3, #daisy scr4 {height: 515px; width: 300px; mix-blend-mode: multiply; position: absolute; -webkit-transition: 0.7s ease; -moz-transition: 0.7s ease; -ms-transition: 0.7s ease; -o-transition: 0.7s ease;}
  152. #daisy scr1 {background-color: #C59494; left: 0}
  153. #daisy scr2 {background-color: #94A5C5; left: 300px}
  154. #daisy scr3 {background-color: #D6C683; left: 600px}
  155. #daisy scr4 {background-color: #B8AFD8; left: 900px}
  156.  
  157.  
  158. #daisy bg1 {z-index: 2; border-bottom: 1px solid #777; box-sizing: border-box; width: 570px; height: 150px; top: 14px; left: 14px; position: absolute; -webkit-transition: 0.4s ease; -moz-transition: 0.4s ease; -ms-transition: 0.4s ease; -o-transition: 0.4s ease;}
  159.  
  160. #daisy input {display: none}
  161.  
  162. #daisyn1+label, #daisyn2+label, #daisyn3+label, #daisyn4+label {height: 30px; left: 350px; background: none; z-index: 3; position: absolute; font-family: gothic a1; font-weight: 200; line-height: 35px; border-bottom: 1px solid #777; font-size: 11px; letter-spacing: 1px; font-style: italic; text-transform: lowercase; color: #000; font-weight: 900; cursor: crosshair; }
  163. #daisyn1+label {top: 30px;}
  164. #daisyn2+label {top: 60px;}
  165. #daisyn3+label {top: 90px;}
  166. #daisyn4+label {top: 120px;}
  167.  
  168. #daisyn1:hover+label, #daisyn2:hover+label, #daisyn3:hover+label, #daisyn4:hover+label {color: #777}
  169. #daisyn1:checked+label, #daisyn2:checked+label, #daisyn3:checked+label, #daisyn4:checked+label {border-bottom: 3px double #777; }
  170.  
  171.  
  172. #daisyn1:checked+label ~ bg1, #daisyn1:checked+label ~ bottom {background-color: #C59494}
  173. #daisyn2:checked+label ~ bg1, #daisyn2:checked+label ~ bottom {background-color: #94A5C5}
  174. #daisyn3:checked+label ~ bg1, #daisyn3:checked+label ~ bottom {background-color: #D6C683}
  175. #daisyn4:checked+label ~ bg1, #daisyn4:checked+label ~ bottom {background-color: #B8AFD8}
  176.  
  177. #daisyn1:checked+label ~ bottom > name1 {opacity: 1}
  178. #daisyn2:checked+label ~ bottom > name2 {opacity: 1}
  179. #daisyn3:checked+label ~ bottom > name3 {opacity: 1}
  180. #daisyn4:checked+label ~ bottom > name4 {opacity: 1}
  181.  
  182. #daisyn1:checked+label ~ #daisy-pcont > scr1, #daisyn1:checked+label ~ #daisy-pcont > img1 {left: 0}
  183. #daisyn1:checked+label ~ #daisy-pcont > scr2, #daisyn1:checked+label ~ #daisy-pcont > img2 {left: 300px}
  184. #daisyn1:checked+label ~ #daisy-pcont > scr3, #daisyn1:checked+label ~ #daisy-pcont > img3 {left: 600px}
  185. #daisyn1:checked+label ~ #daisy-pcont > scr4, #daisyn1:checked+label ~ #daisy-pcont > img4 {left: 900px}
  186.  
  187. #daisyn2:checked+label ~ #daisy-pcont > scr1, #daisyn2:checked+label ~ #daisy-pcont > img1 {left: -300px}
  188. #daisyn2:checked+label ~ #daisy-pcont > scr2, #daisyn2:checked+label ~ #daisy-pcont > img2 {left: 0px}
  189. #daisyn2:checked+label ~ #daisy-pcont > scr3, #daisyn2:checked+label ~ #daisy-pcont > img3 {left: 300px}
  190. #daisyn2:checked+label ~ #daisy-pcont > scr4, #daisyn2:checked+label ~ #daisy-pcont > img4 {left: 600px}
  191.  
  192. #daisyn3:checked+label ~ #daisy-pcont > scr1, #daisyn3:checked+label ~ #daisy-pcont > img1 {left: -600px}
  193. #daisyn3:checked+label ~ #daisy-pcont > scr2, #daisyn3:checked+label ~ #daisy-pcont > img2 {left: -300px}
  194. #daisyn3:checked+label ~ #daisy-pcont > scr3, #daisyn3:checked+label ~ #daisy-pcont > img3 {left: 0px}
  195. #daisyn3:checked+label ~ #daisy-pcont > scr4, #daisyn3:checked+label ~ #daisy-pcont > img4 {left: 300px}
  196.  
  197. #daisyn4:checked+label ~ #daisy-pcont > scr1, #daisyn4:checked+label ~ #daisy-pcont > img1 {left: -900px}
  198. #daisyn4:checked+label ~ #daisy-pcont > scr2, #daisyn4:checked+label ~ #daisy-pcont > img2 {left: -600px}
  199. #daisyn4:checked+label ~ #daisy-pcont > scr3, #daisyn4:checked+label ~ #daisy-pcont > img3 {left: -300px}
  200. #daisyn4:checked+label ~ #daisy-pcont > scr4, #daisyn4:checked+label ~ #daisy-pcont > img4 {left: 0px}
  201.  
  202. #daisytxtc {height: 360px; width: 205px; right: 35px; bottom: 100px; box-sizing: border-box; border: 1px solid #777; position: absolute; overflow: hidden}
  203. #daisytxt1, #daisytxt2, #daisytxt3, #daisytxt4 {height: 360px; width: 203px; box-sizing: border-box; position: absolute; bottom: 0; background: #f0f0f0; -webkit-transition: 0.7s ease; -moz-transition: 0.7s ease; -ms-transition: 0.7s ease; -o-transition: 0.7s ease; text-align: justify; overflow: hidden}
  204. .daisy-txta, .daisy-txtb {height: 320px; width: 203px; position: absolute; box-sizing:border-box; border: 15px solid transparent; border-right: 8px solid transparent; padding-right: 7px; bottom: 0; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; font-family: gothic a1; font-size: 11px; display: block; overflow: auto; color: #000; line-height: 15px;}
  205. #daisytxt1 {left: 0}
  206. #daisytxt2 {left: 205px}
  207. #daisytxt3 {left: 410px}
  208. #daisytxt4 {left: 615px}
  209.  
  210. #daisyn1:checked+label ~ #daisytxtc > #daisytxt1 {left: 0}
  211. #daisyn2:checked+label ~ #daisytxtc > #daisytxt1 {left: -205px}
  212. #daisyn3:checked+label ~ #daisytxtc > #daisytxt1 {left: -410px}
  213. #daisyn4:checked+label ~ #daisytxtc > #daisytxt1 {left: -615px}
  214.  
  215. #daisyn1:checked+label ~ #daisytxtc > #daisytxt2 {left: 205px}
  216. #daisyn2:checked+label ~ #daisytxtc > #daisytxt2 {left: 0px}
  217. #daisyn3:checked+label ~ #daisytxtc > #daisytxt2 {left: -205px}
  218. #daisyn4:checked+label ~ #daisytxtc > #daisytxt2 {left: -410px}
  219.  
  220. #daisyn1:checked+label ~ #daisytxtc > #daisytxt3 {left: 410px}
  221. #daisyn2:checked+label ~ #daisytxtc > #daisytxt3 {left: 205px}
  222. #daisyn3:checked+label ~ #daisytxtc > #daisytxt3 {left: 0px}
  223. #daisyn4:checked+label ~ #daisytxtc > #daisytxt3 {left: -205px}
  224.  
  225. #daisyn1:checked+label ~ #daisytxtc > #daisytxt4 {left: 615px}
  226. #daisyn2:checked+label ~ #daisytxtc > #daisytxt4 {left: 410px}
  227. #daisyn3:checked+label ~ #daisytxtc > #daisytxt4 {left: 205px}
  228. #daisyn4:checked+label ~ #daisytxtc > #daisytxt4 {left: 0px}
  229.  
  230. #daisytog1+label, #daisytog2+label, #daisytog3+label, #daisytog4+label {height: 40px; width: 205px; border-bottom: 1px solid #777; position: absolute; top: 0; background: #e0e0e0; }
  231.  
  232. #daisytog1+label {background: #C59494}
  233. #daisytog2+label {background: #94A5C5}
  234. #daisytog3+label {background: #D6C683}
  235. #daisytog4+label {background: #B8AFD8}
  236.  
  237. #daisy abt {position: absolute; display: block; font-family: poppins; font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; height: 40px; line-height: 40px; left:10px; opacity: 1; -webkit-transition: 0.15s linear; -moz-transition: 0.15s linear; -ms-transition: 0.15s linear; -o-transition: 0.15s linear; color: #000}
  238. #daisy rels {position: absolute; display: block; font-family: poppins; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; height: 40px; line-height: 40px; right:10px; opacity: 0; width: 185px; text-align: right; z-index: 3; -webkit-transition: 0.15s linear; -moz-transition: 0.15s linear; -ms-transition: 0.15s linear; -o-transition: 0.15s linear; color: #000}
  239.  
  240. .daisy-txta {left: 0}
  241. .daisy-txtb {left: 205px}
  242. #daisytog1:checked+label ~ .daisy-txta, #daisytog2:checked+label ~ .daisy-txta, #daisytog3:checked+label ~ .daisy-txta, #daisytog4:checked+label ~ .daisy-txta {left: -205px}
  243. #daisytog1:checked+label ~ .daisy-txtb, #daisytog2:checked+label ~ .daisy-txtb, #daisytog3:checked+label ~ .daisy-txtb, #daisytog4:checked+label ~ .daisy-txtb {left: 0px}
  244. #daisy ar1, #daisy ar2 {height: 40px; width: 40px; position: absolute; display: block; text-align: center; -webkit-transition: 0.15s linear; -moz-transition: 0.15s linear; -ms-transition: 0.15s linear; -o-transition: 0.15s linear; color: #000}
  245. #daisy span {line-height: 40px;}
  246. #daisy ar2 {right: 0; opacity: 1}
  247. #daisy ar1 {opacity: 0}
  248. #daisytog1:checked+label ar1, #daisytog1:checked+label rels, #daisytog2:checked+label ar1, #daisytog2:checked+label rels, #daisytog3:checked+label ar1, #daisytog3:checked+label rels, #daisytog4:checked+label ar1, #daisytog4:checked+label rels {opacity: 1}
  249. #daisytog1:checked+label ar2, #daisytog1:checked+label abt, #daisytog2:checked+label ar2, #daisytog2:checked+label abt, #daisytog3:checked+label ar2, #daisytog3:checked+label abt, #daisytog4:checked+label ar2, #daisytog4:checked+label abt {opacity: 0}
  250. #daisy h1 {font-family: gothic a1; text-transform: uppercase; color: #000; font-weight: 900; margin: 5px 0 -5px 0; font-size: 15px; text-transform: lowercase; font-style: italic; padding: 5px 12px 5px 5px; display: inline-block;}
  251. #daisytxt1 h1 {background: #C59494}
  252. #daisytxt2 h1 {background: #94A5C5}
  253. #daisytxt3 h1 {background: #D6C683}
  254. #daisytxt4 h1 {background: #B8AFD8}
  255.  
  256. .daisy-txta::-webkit-scrollbar, .daisy-txtb::-webkit-scrollbar {width: 7px}
  257. .daisy-txta::-webkit-scrollbar-thumb, .daisy-txtb::-webkit-scrollbar-thumb {background: #eee; border: 1px solid #000;}
  258. .daisy-txta::-webkit-scrollbar-track, .daisy-txtb::-webkit-scrollbar-track {background: none!important; border: none!important}
  259. #daisytxt1 .daisy-txta::-webkit-scrollbar-thumb, #daisytxt1 .daisy-txtb::-webkit-scrollbar-thumb {background: #C59494}
  260. #daisytxt2 .daisy-txta::-webkit-scrollbar-thumb, #daisytxt2 .daisy-txtb::-webkit-scrollbar-thumb {background: #94A5C5}
  261. #daisytxt3 .daisy-txta::-webkit-scrollbar-thumb, #daisytxt3 .daisy-txtb::-webkit-scrollbar-thumb {background: #D6C683}
  262. #daisytxt4 .daisy-txta::-webkit-scrollbar-thumb, #daisytxt4 .daisy-txtb::-webkit-scrollbar-thumb{background: #B8AFD8}
  263.  
  264. </style>
  265. [/dohtml]
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!