[go: up one dir, main page]
API tools faq
paste
peachygirl

vaquerita crd code w instructions

peachygirl
Nov 22nd, 2021 (edited)
3
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.79 KB
raw download clone embed print report
  1. <!--- DONT POST IN ANOTHER PASTEBIN cr enbyself if use please enjoy it ! --->
  2.  
  3. <link rel="preconnect" href="https://fonts.googleapis.com">
  4. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  5. <link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap" rel="stylesheet">
  6. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
  7. <link rel="preconnect" href="https://fonts.googleapis.com">
  8. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  9. <link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
  10.  
  11. <style>
  12. @font-face { /* font for vaquerita com */
  13. font-family: astral;
  14. src:url(https://dl.dropbox.com/s/ld98ab3o395z147/Astral%20Delight%20Black%20Upright.ttf);
  15. }
  16.  
  17. @font-face {
  18. font-family: handy;
  19. src: url(https://dl.dropbox.com/s/ga9hf4idu3egjb5/handy00.ttf);
  20. }
  21.  
  22. * { margin: 0; padding: 0; }
  23.  
  24. .brillo { /* main container */
  25. width: 85%;
  26. height:200px;
  27. margin-left:40px;
  28. overflow-x:hidden;
  29. overflow-y: scroll;
  30. border-radius: 3px;
  31. border: 1px solid white;
  32. padding-top:15px;
  33. padding-bottom:15px;
  34. padding-left:20px;
  35. padding-right:20px;
  36. -webkit-box-shadow: 0px 0px 5px 0px rgba(255,143,210,1);
  37. -moz-box-shadow: 0px 0px 5px 0px rgba(255,143,210,1);
  38. box-shadow: 0px 0px 5px 0px rgba(255,143,210,1);
  39.  
  40. /* gradiente bg with image, you can change it for a regular one */
  41. background-image: linear-gradient(360deg, rgba(255,255,255,0.902) 20%, rgba(255,255,255,0.38) 80%), url("https://dl.dropbox.com/s/7x70q5sjz219g2q/Foto%2011-10-21%2020%2014%2055.gif");
  42. background-size: 100%, 50%;
  43. background-repeat: repeat, repeat;
  44. /* END of the bgs css */
  45.  
  46. font-family: 'Questrial', sans-serif;
  47. color: #955136;
  48. font-size:0.8em;
  49. line-height: 1.1;
  50. }
  51.  
  52. .cuadrito { /* scrollbox inside main container */
  53. background: rgba(255, 199, 232, 0.5);
  54. margin:auto;
  55. height:160px;
  56. overflow-y:scroll;
  57. border-radius: 3px;
  58. border: 1px solid white;
  59. padding:10px;
  60. -webkit-box-shadow: 0px 0px 5px 0px rgba(255,143,210,1);
  61. -moz-box-shadow: 0px 0px 5px 0px rgba(255,143,210,1);
  62. box-shadow: 0px 0px 5px 0px rgba(255,143,210,1);
  63. font-family: 'Questrial', sans-serif;
  64. color: #955136;
  65. }
  66.  
  67. mark {
  68. background: white;
  69. padding-bottom:1px;
  70. padding-top:1px;
  71. padding-left: 5px;
  72. padding-right: 5px;
  73. border-radius: 5px;
  74. margin: 0em auto 10em;
  75. border:1px solid #955136;
  76. font-family: 'Berkshire Swash', cursive;
  77. color:#955136;
  78. font-style: bold;
  79. }
  80.  
  81. #hov { /* links */
  82. font-family: 'Questrial', sans-serif;
  83. font-style: bold;
  84. text-shadow: -1px 0 #955136, 0 1px #955136, 1px 0 #955136, 0 -1px #955136, 0 0;
  85. }
  86. a:hover {color: #FFBFE5;}
  87. a { color: #FF8FD2; text-decoration: none;}
  88.  
  89. .doll { /* class for doll image. you can change the filter and the animation DON'T change the position, it was made to look good on mobile and desktop */
  90.  
  91. filter: drop-shadow(1px 1px 0 rgba(255, 199, 232, 0.4)) drop-shadow(-1px 1px 0 rgba(255, 199, 232, 0.4)) drop-shadow(0 2px 0 rgba(255, 199, 232, 0.4)) drop-shadow(0 -1px 0 rgba(255, 199, 232, 0.4)) drop-shadow(0 1px 1.5px rgba(255, 199, 232, 0.4)) drop-shadow(0 -1px 1.5px rgba(255, 199, 232, 0.4)) drop-shadow(1px -1px 1.5px rgba(255, 199, 232, 0.4)) drop-shadow(-1px -1px 1.5px rgba(255, 199, 232, 0.4));
  92. width:auto;
  93. height:18em;
  94. position:absolute;
  95. left:0.8em;
  96. top:-1em;
  97. z-index:500;
  98. animation-name: floating;
  99. animation-duration: 5s;
  100. animation-iteration-count: infinite;
  101. animation-timing-function: ease-in-out;
  102. }
  103.  
  104. @keyframes floating {
  105. 0% { transform: translate(0, 0px); }
  106. 50% { transform: translate(0, 15px); }
  107. 100% { transform: translate(0, -0px); }
  108. }
  109.  
  110. /* vaquerita com css */
  111. .title {
  112. top: -0.75em;
  113. font-size: 1.7em;
  114. z-index:500;
  115. }
  116.  
  117. #rainbow {
  118. font-family: astral;
  119. -webkit-text-stroke-width: 1px;
  120. -webkit-text-stroke-color: #fff;
  121. line-spacing: 0.134em;
  122. -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 199, 232, 0.8));
  123. }
  124. /* END of vaquerita com css */
  125.  
  126. /* START of music player */
  127.  
  128. #musicplayer{
  129. margin-top:10px;
  130. margin-left:65px;
  131. display:grid;
  132. grid-template-columns:20px auto;
  133. align-items:center;
  134. width: 90px;
  135. font-family:handy;
  136. font-size:11px;
  137. color:#955136;
  138. line-height:140%;
  139. border: 2px solid #F9CDE2;
  140. border-radius: 2px;
  141. background:white;
  142. -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 199, 232, 0.8));
  143. }
  144.  
  145. #musictitle{
  146. font-family:handy;
  147. overflow: hidden;
  148. white-space: nowrap;
  149. display:inline-block;
  150. width: calc(100% - 10px - 1px);
  151. margin-left: calc(10px + 1px);
  152. }
  153.  
  154. #musicpixel{
  155. width:120%;
  156. paddin-top:0px;
  157. position:relative;
  158. min-height: 15px;
  159. background:white;
  160. border-right: 2px solid #F9CDE2;
  161. }
  162.  
  163. .overlay {
  164. opacity:0;
  165. position:absolute;
  166. top:0;
  167. left:0;
  168. text-align:center;
  169. width:100%;
  170. height:100%;
  171. transition:0.3s ease;
  172. background:white;
  173. }
  174.  
  175. #musicplayer:hover .overlay {
  176. opacity: 1;
  177. transition:0.3s ease;
  178. }
  179.  
  180. .playpause{
  181. padding:5px;
  182. position: absolute;
  183. top: 50%;
  184. left: 50%;
  185. transform: translate(-50%, -50%);
  186. }
  187.  
  188. .playpause:hover{ cursor:help; }
  189.  
  190. #musicpixel img{ display:block; }
  191.  
  192. .marquee{
  193. display: inline-block;
  194. padding-left: 100%;
  195. animation: marquee 5s linear infinite;
  196. }
  197.  
  198. @keyframes marquee{
  199. 0% {
  200. transform: translate(0, 0);
  201. }
  202. 100% {
  203. transform: translate(-100%, 0);
  204. }
  205. }
  206. /* END of music player */
  207.  
  208. /* Scrollbar settings */
  209.  
  210. html {
  211. overflow: scroll;
  212. overflow-x: hidden;
  213. }
  214.  
  215. ::-webkit-scrollbar {
  216. width: 0; /* eemove scrollbar space */
  217. background: transparent; /* to make scrollbar invisible */
  218. }
  219. ::-webkit-scrollbar-thumb {
  220. background: #FF0000;
  221. }
  222. </style>
  223.  
  224. <div align="right"><span class="title"><span id="rainbow">VAQUERITA.COM</span>
  225.   </div>
  226.  
  227. <img class="doll" src="https://vaquerita.crd.co/assets/images/image01.png?v=0838d460">
  228.   <div class="brillo">
  229. <div align="left"><div class="cuadrito">
  230. <strong><mark>01. About me</mark></strong>
  231.   <br/>
  232.   <br/>
  233. <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  234.  
  235. <br>
  236.  
  237. <strong><mark>02. Likes</mark></strong>
  238.   <br/>
  239.   <br/>
  240. <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  241. <br>
  242. <div align="center"><div id="hov"><a href="URL">link</a> <a href="URL">link</a></div></div>
  243. </div>
  244.  
  245. <br>
  246.  
  247. <div class="cuadrito">
  248. <strong><mark>03. Before you Follow</mark></strong>
  249.   <br/>
  250.   <br/>
  251. <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  252. <br>
  253. <strong><mark>04. Don't Follow</mark></strong>
  254.  <br/>
  255.  <br/>
  256. <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  257. </div>
  258.  
  259. <br>
  260.  
  261. <div class="cuadrito">
  262. <strong><mark>05. Music</mark></strong>
  263.  <br/>
  264.  <br/>
  265. <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  266. <br>
  267. <strong><mark>06. More</mark></strong>
  268.  <br/>
  269.  <br/>
  270. <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  271. </div>
  272. </div>
  273. </div>
  274.  
  275. <div id='musicplayer'><div id='musicpixel'><img src='https://gnome.crd.co/assets/images/plants/1d8b019c.gif?v=57709862'>
  276.  
  277. <div class='overlay'><div class='playpause'><i class="fas fa-play"></i>
  278.  
  279. </div></div></div><div id='musictitle'><span class='marquee'>eat my love by BIBI</span></div></div>
  280.  
  281. <audio id='musicsrc' loop src='https://dl.dropbox.com/s/wb4o4l23oceoiju/Eat%20My%20Love%20%28%EC%82%AC%EB%9E%91%EC%9D%98%20%EB%AC%98%EC%95%BD%29.mp3'></audio>
  282.  
  283.  
  284. <script>
  285. document.querySelector('.playpause').addEventListener('click', playpause);
  286.  
  287. function playpause(){
  288. if(document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>'){
  289. document.querySelector('#musicsrc').play();
  290. document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
  291. } else{
  292. document.querySelector('#musicsrc').pause();
  293. document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
  294. }
  295.  
  296. }
  297. </script>
  298.  
  299. <script>
  300. var speed=150;
  301. var glow=3;
  302. var raincol=new Array("#FF8FD2", "#ffadde");
  303. var alink="";
  304. /****************************
  305. * Rainbow Text Effect *
  306. *(c)2003-13 mf2fm web-design*
  307. * http://www.mf2fm.com/rv *
  308. * DON'T EDIT BELOW THIS BOX *
  309. ****************************/
  310. var rainbow, raintxt, raincnt=0;
  311.  
  312. function addLoadEvent(funky) {
  313. var oldonload=window.onload;
  314. if (typeof(oldonload)!='function') window.onload=funky;
  315. else window.onload=function() {
  316. if (oldonload) oldonload();
  317. funky();
  318. }
  319. }
  320.  
  321. addLoadEvent(regenbogen);
  322.  
  323. function regenbogen() { if (document.getElementById) {
  324. var i, rainbeau;
  325. rainbow=document.getElementById("rainbow");
  326. raintxt=rainbow.firstChild.nodeValue;
  327. while (rainbow.childNodes.length) rainbow.removeChild(rainbow.childNodes[0]);
  328. for (i=0; i<raintxt.length; i++) {
  329. rainbeau=document.createElement("span");
  330. rainbeau.setAttribute("id", "rain"+i);
  331. rainbeau.appendChild(document.createTextNode(raintxt.charAt(i)));
  332. if (alink) {
  333. rainbeau.style.cursor="pointer";
  334. rainbeau.onclick=function() { top.location.href=alink; }
  335. }
  336. rainbow.appendChild(rainbeau);
  337. }
  338. rainbow=setInterval ("raining()", speed);
  339. }}
  340.  
  341. function raining() {
  342. var i, c;
  343. for (i=0; i<raintxt.length; i++) {
  344. c=raincol[(i+raincnt)%raincol.length];
  345. document.getElementById("rain"+i).style.color=c;
  346. if (glow) document.getElementById("rain"+i).style.textShadow=c+" 0px 0px "+glow+"px";
  347. }
  348. raincnt++;
  349. }
  350. // ]]>
  351. </script>
RAW Paste Data
Public Pastes
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!