API tools faq
paste
Advertisement
x-venom

about page #01 downtown [xvenom]

x-venom
Dec 2nd, 2020 (edited)
85
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.27 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <!--
  3. page theme by xvenom
  4. (xvenomcodes.tumblr.com)
  5. full credits → https://pastebin.com/raw/Z9jDprGP
  6. -->
  7. <head>
  8. <title>{Title}</title>
  9. <!-- FONTS -->
  10. <link href="https://fonts.googleapis.com/css2?family=Parisienne&display=swap" rel="stylesheet">
  11. <script src="https://kit.fontawesome.com/6f0e1d2b00.js" crossorigin="anonymous"></script>
  12.  
  13. <style type="text/css">
  14. :root {
  15. --bg-main: url(https://funkyimg.com/i/394Ge.png);
  16. --accent1: #8e642fff;
  17. --accent2: #c18101ff;
  18. --accent3: #dfbb26ff;
  19. --accent4: #8a2d02ff;
  20. --accent5: #723501ff;
  21. --color1: #281300ff;
  22. --type1: 'arial';
  23. --type2: 'times new roman';
  24. --fonti2: 'Parisienne', cursive;
  25. --bg-col: #141414;
  26. --your-icon: url(https://i.pinimg.com/originals/94/cb/db/94cbdb2cd9e7f5e2842436f217164acb.png);
  27. --fa: 'Font Awesome 5 Free';
  28. --fab: 'Font Awesome 5 Brands';
  29.  
  30. .iframe-controls-container {
  31. display: none;
  32. }
  33.  
  34. }
  35.  
  36. /*-- BASE --*/
  37.  
  38. body {
  39. background: var(--bg-col);
  40. font-family: var(--type1);
  41. cursor: default;
  42. }
  43.  
  44. #main-box {
  45. background: var(--bg-main);
  46. background-repeat: no-repeat;
  47. background-position: center;
  48. position: fixed;
  49. top: 18%;
  50. left: 26%;
  51. width: 47.5vw;
  52. height: 64vh;
  53. box-shadow: 0 0 20px rgb(0, 0, 0, .4);
  54. }
  55.  
  56. ::selection {
  57. background: var(--accent3);
  58. color: #222;
  59. }
  60.  
  61. h1 {
  62. position: fixed;
  63. width: 100%;
  64. text-align: center;
  65. top: 10%;
  66. z-index: 9999;
  67. color: var(--accent3);
  68. font-family: var(--fonti2);
  69. font-weight: normal;
  70. font-size: 42px;
  71. mix-blend-mode: overlay;
  72. }
  73.  
  74. /*-- FUNFACT BOX --*/
  75.  
  76. .more:before {
  77. content:'';
  78. visibility: visible;
  79. position: fixed;
  80. display: block;
  81. top: 20%;
  82. right: 28.5%;
  83. width: 80px;
  84. height: 80px;
  85. border-radius: 100%;
  86. border: 3px solid var(--accent2);
  87. background: var(--your-icon);
  88. background-size: 80px;
  89. box-shadow: 0 0 20px rgb(0, 0, 0, .4);
  90. opacity: .8;
  91. transition: .3s;
  92. }
  93.  
  94. .more:hover:before {
  95. opacity: 1;
  96. transition: .3s;
  97. }
  98.  
  99. .more {
  100. position: fixed;
  101. top: 22%;
  102. right: 12%;
  103. width: 13%;
  104. height: 10%;
  105. padding: 12px;
  106. }
  107.  
  108. .more:hover {
  109. visibility: visible;
  110. opacity: 1;
  111. transition: .3s;
  112. }
  113.  
  114. .inner {
  115. width: 15%;
  116. height: 10%;
  117. border-radius: 8px;
  118. border: 3px solid var(--accent2);
  119. background: var(--accent5);
  120. background-size: 80px;
  121. padding: 12px;
  122. box-shadow: 0 0 20px rgb(0, 0, 0, .4);
  123. font-family: var(--type1);
  124. font-size: 11px;
  125. text-transform: uppercase; /*this makes all your text in uppercases, you can delete it*/
  126. color: var(--color1);
  127. opacity: 0;
  128. transition: .3s;
  129. }
  130.  
  131. .inner:before {
  132. content: "";
  133. background: #fff;
  134. width: 90px;
  135. height: 90px;
  136. border-radius: 100%;
  137. position: fixed;
  138. top: 19.8%;
  139. right: 28.3%;
  140. z-index: 9;
  141. opacity: 0;
  142. }
  143.  
  144. .inner:hover {
  145. opacity: 1;
  146. transition: .3s;
  147. }
  148.  
  149. .more .inner {
  150. width: 100%;
  151. height: 100%;
  152. overflow: auto;
  153. text-align: justify;
  154. }
  155.  
  156. .more h4 {
  157. text-align: center;
  158. font-family: var(--fonti2);
  159. padding: 0;
  160. text-transform: none !important;
  161. margin: -.1em 0 .3em 0;
  162. font-size: 32px;
  163. }
  164.  
  165. .inner::-webkit-scrollbar {
  166. background: var(--accent5);
  167. width: 3px;
  168. border-radius: 30px;
  169. }
  170.  
  171. .inner::-webkit-scrollbar-thumb {
  172. border-radius: 10px;
  173. background: var(--accent2);
  174. }
  175.  
  176.  
  177. /*-- MAIN BOX --*/
  178.  
  179. #main-inner {
  180. position: fixed;
  181. top: 19%;
  182. left: 27%;
  183. width: 17vw;
  184. height: 59vh;
  185. padding: 12px;
  186. overflow: auto;
  187. color: #fff;
  188. background: rgb(0, 0, 0, .5);
  189. box-shadow: 0 0 20px rgb(0, 0, 0, .4);
  190. }
  191.  
  192.  
  193. span.text, span.list {
  194. display: block;
  195. width: 100%;
  196. text-align: justify;
  197. font-size: 12px; /*you can change 12 to the other value */
  198.  
  199. }
  200.  
  201. ul.list1 {
  202. list-style: none;
  203. text-align: center;
  204. margin-left: -4em;
  205. }
  206.  
  207. ul.list1 li:before {
  208. content: "\f834";
  209. font-family: var(--fab);
  210. color: var(--accent3);
  211. display: inline-block;
  212. width: 17px;
  213. height: 15px;
  214. padding-top: 2px;
  215. transform: rotate(90deg);
  216. transition: .3s;
  217. }
  218.  
  219. ul.list1 li {
  220. text-transform: uppercase;
  221. font-size: 10px;
  222. letter-spacing: 2px;
  223. cursor: default;
  224. }
  225.  
  226. ul.list1 li:hover:before {
  227. transform: rotate(-270deg);
  228. transition: .3s;
  229. }
  230.  
  231. #main-inner::-webkit-scrollbar {
  232. background: rgb(0, 0, 0, 0);
  233. width: 4px;
  234. height: 4px;
  235. }
  236.  
  237.  
  238. #main-inner::-webkit-scrollbar-thumb {
  239. background: var(--accent2);
  240. }
  241.  
  242. #main-inner h3 {
  243. font-family: var(--type2);
  244. text-transform: uppercase;
  245. font-size: 24px;
  246. letter-spacing: 2px;
  247. text-shadow: 2px 2px 0 #000, 3px 3px 0 var(--accent3);
  248. }
  249.  
  250. a.link {
  251. text-decoration: none;
  252. color: var(--accent2);
  253. display: block;
  254. text-transform: uppercase;
  255. font-size: 10px;
  256. letter-spacing: 2px;
  257. text-align: center;
  258. font-family: 'arial';
  259. background: #000;
  260. box-shadow: 0 3px 0 rgb(193, 129, 1, .5) inset, 0 -3px 0 rgb(193, 129, 1, .5) inset;
  261. padding: 5px 0;
  262. margin: 0 0 .5em 0;
  263. width: 100%;
  264. transition: .5s;
  265. }
  266.  
  267. a.link:hover {
  268. cursor: pointer;
  269. box-shadow: 0 100px 0 var(--accent1) inset, 0 -100px 0 var(--accent1) inset;
  270. color: #000;
  271. transition: .5s;
  272. }
  273.  
  274. /*-- BACK HOME LINK --*/
  275. .back {
  276. position: fixed;
  277. background: rgb(255, 255, 255, .4);
  278. color: #000;
  279. bottom: 19%;
  280. right: 26.5%;
  281. padding: 2px 0;
  282. display: block;
  283. width: 120px;
  284. text-decoration: none;
  285. text-transform: uppercase;
  286. font-size: 10px;
  287. letter-spacing: 2px;
  288. float: right;
  289. border-radius: 10px 0 0 10px;
  290. transition: .4s;
  291. }
  292.  
  293. .back:hover {
  294. transition: .4s;
  295. background: rgb(0, 0, 0, .4);
  296. color: #fff;
  297. }
  298.  
  299. /*-- CREDIT - DO NOT DELETE! --*/
  300. #credit {
  301. position: fixed;
  302. bottom: 1em;
  303. right: 1em;
  304. transform: scale(1.0);
  305. opacity: .4;
  306. transition: .2s;
  307. }
  308.  
  309. #credit:hover {
  310. transform: scale(1.15);
  311. opacity: .4;
  312. transition: .2s;
  313. }
  314.  
  315. #s-m-t-tooltip {
  316. max-width: 300px;
  317. letter-spacing: 1px;
  318. margin: 15px;
  319. padding: 5px 5px 5px 6px;
  320. border-radius: 0px;
  321. font-weight: 700;
  322. color: var(--accent2);
  323. background: rgb(255, 255, 255, .1);
  324. z-index: 999999;
  325. font-size: 9px;
  326. font-style: none;
  327. font-weight: lighter;
  328. text-transform: uppercase;
  329.  
  330. }
  331.  
  332.  
  333. </style>
  334.  
  335. </head>
  336. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  337.  
  338. <script src="https://static.tumblr.com/fiw4iub/4jdnu5ta4/jquery.style-my-tooltips.js"></script>
  339. <script>
  340. (function($){
  341. $(document).ready(function(){
  342. $("a[title]").style_my_tooltips({
  343. tip_follows_cursor:true,
  344. tip_delay_time:90,
  345. tip_fade_speed:600,
  346. attribute:"title"
  347. });
  348. });
  349. })(jQuery);
  350. </script>
  351. <body>
  352. <center>
  353. <h1 class="about-tit">about page title</h1>
  354. <div id="main-box">
  355. <div id="main-inner">
  356. <div class="sec1">
  357. <h3>first subtitle</h3>
  358. <span class="text">HERE GOES YOUR TEXT
  359. </span>
  360. </div>
  361. <div class="sec2">
  362. <h3>second subtitle</h3>
  363. <span class="list">
  364. <ul class="list1"><!-- instead of my hobbies, write your own -->
  365. <li>photography</li>
  366. <li>music</li>
  367. <li>graphics</li>
  368. <li>coding</li>
  369. <li>kpop</li>
  370. <li>reading books</li>
  371. </ul>
  372. </span>
  373. </div>
  374. <div class="sec3">
  375. <h3>third subtitle</h3>
  376. <div class="links"> <!-- instead of '/' paste your URL and instead of 'links' write your link name -->
  377. <a class="link" href="/">links</a>
  378. <a class="link" href="/">links</a>
  379. <a class="link" href="/">links</a>
  380. <a class="link" href="/">links</a>
  381. <a class="link" href="/">links</a>
  382. <a class="link" href="/">links</a>
  383. <a class="link" href="/">links</a>
  384. </div>
  385. </div>
  386. </div>
  387. <div class="more">
  388. <div class="inner">
  389. <h4>Funfact</h4>
  390. <b>Here goes your bold text</b> Here goes the rest of your text.
  391. </div>
  392. </div>
  393. <a class="back" href="/">back home</a><!--if you don't want it, you can delete this line-->
  394. </div>
  395. </center>
  396. <!-- CREDIT - DO NOT DELETE -->
  397. <div id="credit"><a title="xvenom codes" href="http://xvenomcodes.tumblr.com/"><img src="https://funkyimg.com/i/38Qg3.png" width="30px" height="30px"></a></div>
  398. </body>
  399. </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!