API tools faq
paste
tricksterkid

tumblr page // summertime

tricksterkid
Sep 7th, 2020 (edited)
1,622
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!-- @NUCLEARTHEMES ON TUMBLR || PLEASE DON'T DELETE CREDIT -->
  4.  
  5. <!--
  6. || CREDITS ||
  7.  
  8. Chat speech bubbles made with Bubbly >> http://projects.verou.me/bubbly/
  9.  
  10. Custom tooltips by Atomiks >> https://atomiks.github.io/tippyjs/
  11.  
  12. Fonts from Google >> https://fonts.google.com/
  13.  
  14. Placeholders from Unsplash >> https://unsplash.com/
  15.  
  16. -->
  17.  
  18. <html>
  19.  
  20. <head>
  21.  
  22. <title>{Name} / title</title> <!-- page title -->
  23.  
  24. <link rel="shortcut icon" href="{Favicon}">
  25.  
  26. <link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave:400,400i,700,700i|Zilla+Slab:400,400i,700,700i|Josefin+Sans:400,400i,700,700i" rel="stylesheet">
  27.  
  28. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  29.  
  30. <style type="text/css">
  31.  
  32. /* ----------------------------------------------------------------------- */
  33. /* ---------- CUSTOM TOOLTIPS ---------- */
  34.  
  35. .tippy-tooltip.custom-theme {
  36. background-color: #fc4270;
  37. color: #f4f4f4;
  38. font-family: inherit;
  39. text-align: center;
  40. }
  41.  
  42. /* ----------------------------------------------------------------------- */
  43. /* ---------- CUSTOM SELECTION & SCROLLBAR ---------- */
  44.  
  45. ::-moz-selection {background: #ffe6d9; color: #f77748;}
  46. ::selection {background: #ffe6d9; color: #f77748;}
  47.  
  48. ::-webkit-scrollbar-thumb {background: #f79383;border-radius:5px;}
  49. ::-webkit-scrollbar {background: #f4f4f4; width: 7px;}
  50.  
  51. * {margin:0; padding:0;}
  52.  
  53. /* ----------------------------------------------------------------------- */
  54. /* ---------- BODY CSS ---------- */
  55.  
  56. body {
  57. background: #f4f4f4; /* background color */
  58. color: #353535; /* text color */
  59. font-family: 'Josefin Sans'; /* font */
  60. font-size: 15px; /* font size */
  61. text-align: justify; /* text align */
  62. }
  63.  
  64. #container {
  65. background: #ffe6d9; /* container background color */
  66. height: 600px;
  67. left: 50%;
  68. margin-bottom: 40px;
  69. overflow: hidden;
  70. position: absolute;
  71. top: 50%;
  72. transform: translate(-50%,-50%);
  73. width: 950px;
  74. }
  75.  
  76. /* ----------------------------------------------------------------------- */
  77. /* ---------- PAGE TITLE CSS ---------- */
  78.  
  79. h1 {
  80. background:
  81. -webkit-linear-gradient(right, #f77748, #fc4270);
  82. -webkit-background-clip: text;
  83. -webkit-text-fill-color: transparent;
  84. bottom: -2%;
  85.  
  86. /* make this number smaller if the title doesn't fit! */
  87. left: 18%;
  88. /* you can even make it negative if you have to :P */
  89.  
  90. font-family: 'Sedgwick Ave';
  91. font-size: 70px;
  92. position: fixed;
  93. z-index: 999;
  94. }
  95.  
  96. /* ----------------------------------------------------------------------- */
  97. /* ---------- TEXT CSS ---------- */
  98.  
  99. h2 { /* top title */
  100. color: #f79383;
  101. font-family: 'Zilla Slab';
  102. font-size: 25px;
  103. font-weight: normal;
  104. text-align: right;
  105. }
  106.  
  107. h3 { /* bottom title */
  108. color: #f79383;
  109. font-family: 'Zilla Slab';
  110. font-size: 25px;
  111. font-weight: normal;
  112. text-align: left;
  113. }
  114.  
  115. a {
  116. color: #ffb8a6; /* link color */
  117. text-decoration: none;
  118. }
  119.  
  120. a:hover {
  121. color: #f79383; /* link hover color */
  122. transition: 0.4s;
  123. }
  124.  
  125. b { /* bold text */
  126. color: #f79383;
  127. }
  128.  
  129. /* ----------------------------------------------------------------------- */
  130. /* ---------- CONTENT CSS ---------- */
  131.  
  132. img {
  133. float: left;
  134. height: 600px;
  135. width: 400px;
  136. }
  137.  
  138. #upper { /* top section */
  139. background-color: #f4f4f4;
  140. border-radius: 20px;
  141. float: right;
  142. height: 160px;
  143. margin: 20px 20px 40px 20px;
  144. padding: 20px;
  145. position: relative;
  146. width: 470px;
  147. }
  148.  
  149. #upper:after { /* top section speech arrow */
  150. border: 22px solid transparent;
  151. border-top-color: #f4f4f4;
  152. border-bottom: 0;
  153. border-right: 0;
  154. bottom: 0;
  155. content: '';
  156. height: 0;
  157. left: 90%;
  158. margin-bottom: -22px;
  159. margin-left: -11px;
  160. position: absolute;
  161. width: 0;
  162. }
  163.  
  164. #left { /* left column */
  165. border-right: 1px solid #ffb8a6;
  166. float: left;
  167. height: 125px;
  168. line-height: 22px;
  169. margin-right: 10px;
  170. padding: 5px 15px 5px 5px;
  171. text-transform: uppercase;
  172. }
  173.  
  174. #right { /* right column */
  175. float: left;
  176. height: 125px;
  177. line-height: 22px;
  178. margin-left: 5px;
  179. margin-right: 10px;
  180. padding: 5px 15px 5px 5px;
  181. text-transform: lowercase;
  182. }
  183.  
  184. #lower { /* bottom section */
  185. background-color: #f4f4f4;
  186. border-radius: 20px;
  187. float: right;
  188. height: 160px;
  189. margin: 20px;
  190. padding: 20px;
  191. position: relative;
  192. width: 470px;
  193. }
  194.  
  195. #lower:after { /* bottom section speech arrow */
  196. border: 22px solid transparent;
  197. border-top-color: #f4f4f4;
  198. border-bottom: 0;
  199. border-left: 0;
  200. bottom: 0;
  201. content: '';
  202. height: 0;
  203. left: 10%;
  204. margin-bottom: -22px;
  205. margin-left: -11px;
  206. position: absolute;
  207. width: 0;
  208. }
  209.  
  210. #text { /* text in bottom section */
  211. overflow-y: auto;
  212. height: 120px;
  213. margin-top: 10px;
  214. padding-right: 10px;
  215. }
  216.  
  217. #linkcontainer { /* invisible container around links */
  218. bottom: 0;
  219. height: 45px;
  220. padding: 20px;
  221. position: absolute;
  222. right: 0;
  223. text-align: right;
  224. }
  225.  
  226. .links { /* bottom links */
  227. background-color: #ffb8a6;
  228. border-radius: 5px;
  229. color: #f4f4f4;
  230. display: inline-block;
  231. height: 25px;
  232. margin-left: 20px;
  233. padding: 10px;
  234. text-align: center;
  235. width: 25px;
  236. }
  237.  
  238. .links:hover { /* bottom links hover */
  239. background-color: #f79383;
  240. transition: 0.4s;
  241. }
  242.  
  243. /* ----------------------------------------------------------------------- */
  244. /* ---------- CREDIT CSS ---------- */
  245.  
  246. #credit {
  247. background-color: #f4f4f4;
  248. border-radius: 5px;
  249. color: #ffb8a6;
  250. bottom: 0;
  251. display: inline;
  252. margin: 15px;
  253. padding: 10px;
  254. position: fixed;
  255. right: 0;
  256. }
  257.  
  258. #credit:hover {
  259. background-color: #ffe6d9;
  260. color: #f79383;
  261. transition: 0.4s;
  262. }
  263.  
  264. </style>
  265.  
  266. </head>
  267.  
  268. <body>
  269.  
  270. <div id="container">
  271.  
  272. <h1>summertime</h1> <!-- main title -->
  273.  
  274. <img src="https://i.imgur.com/9j4DpSG.png"> <!-- 400x600 -->
  275.  
  276. <!-- start section 1 -->
  277.  
  278. <div id="upper">
  279.  
  280. <h2>about me</h2> <!-- section subtitle -->
  281.  
  282. <div id="left">
  283.  
  284. <i class="fa fa-arrow-right"></i> name
  285. <br>
  286. <i class="fa fa-arrow-right"></i> age
  287. <br>
  288. <i class="fa fa-arrow-right"></i> gender
  289. <br>
  290. <i class="fa fa-arrow-right"></i> pronouns
  291. <br>
  292. <i class="fa fa-arrow-right"></i> sexuality
  293. <br>
  294. <i class="fa fa-arrow-right"></i> zodiac
  295.  
  296. </div>
  297.  
  298. <div id="right">
  299.  
  300. your name
  301. <br>
  302. your age
  303. <br>
  304. your gender
  305. <br>
  306. your pronouns
  307. <br>
  308. your sexuality
  309. <br>
  310. your zodiac
  311.  
  312. </div>
  313.  
  314. </div>
  315.  
  316. <!-- end section 1 -->
  317.  
  318. <!-- start section 2 -->
  319.  
  320. <div id="lower">
  321.  
  322. <h3>type anything!</h3> <!-- section subtitle -->
  323.  
  324. <div id="text">
  325.  
  326. Here, you can put whatever you want! It could be a before you follow section, or maybe a rule section. You can keep typing for as long as you want, because this section has automatic overflow! This is <a href="">a link</a>. <b>This is bold text</b> and <i>this is italic text</i>!
  327.  
  328. <br><br>
  329.  
  330. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In ante metus dictum at tempor commodo ullamcorper a lacus. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. Egestas congue quisque egestas diam in arcu cursus euismod quis.
  331.  
  332. <br><br>
  333.  
  334. Scelerisque viverra mauris in aliquam sem. Tellus molestie nunc non blandit massa enim nec. Velit laoreet id donec ultrices tincidunt arcu. Elit pellentesque habitant morbi tristique senectus et netus et malesuada. Quisque egestas diam in arcu cursus. Varius duis at consectetur lorem donec massa. Mollis nunc sed id semper risus in hendrerit.
  335.  
  336.  
  337. </div>
  338.  
  339. </div>
  340.  
  341. <!-- end section 2 -->
  342.  
  343. <!-- start bottom links -->
  344.  
  345. <div id="linkcontainer">
  346.  
  347. <!--
  348. url goes in "a href", leave it on "/" for homepage
  349. tooltip content goes in "a title"
  350. icon is determined by "fa fa-[icon name]"
  351. -->
  352.  
  353. <a href="/" title="home">
  354. <div class="links">
  355. <i class="fa fa-home" style="font-size:20px"></i>
  356. </div>
  357. </a>
  358.  
  359. <a href="/" title="link 1">
  360. <div class="links">
  361. <i class="fa fa-star" style="font-size:20px"></i>
  362. </div>
  363. </a>
  364.  
  365. <a href="/" title="link 2">
  366. <div class="links">
  367. <i class="fa fa-moon-o" style="font-size:20px"></i>
  368. </div>
  369. </a>
  370.  
  371. <a href="/" title="link 3">
  372. <div class="links">
  373. <i class="fa fa-rocket" style="font-size:20px"></i>
  374. </div>
  375. </a>
  376.  
  377. </div>
  378.  
  379. <!-- end bottom links -->
  380.  
  381. </div>
  382.  
  383. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  384.  
  385. <a id="credit" target="blank" href="https://nuclearthemes.tumblr.com/" title="by bones"><i class="fa fa-anchor" style="font-size:15px"></i></a>
  386.  
  387. <script src="https://unpkg.com/popper.js@1"></script>
  388. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  389. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  390.  
  391. <script>
  392. tippy('a[title]', {
  393. theme: 'custom',
  394. arrow: false,
  395. delay: [120, 0],
  396. zIndex: 9999999999,
  397. maxWidth: 300,
  398.  
  399. content(reference) {
  400. const title = reference.getAttribute('title');
  401. reference.removeAttribute('title');
  402. return title;
  403. },
  404. });
  405. </script>
  406.  
  407. </body>
  408.  
  409. </html>
Advertisement
Add Comment
Please, Sign In to add comment
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!