API tools faq
paste
rollyjogered

page theme two: coastline

rollyjogered
Mar 1st, 2019 (edited)
2,850
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. page theme two: coastline by pirateskinned
  7.  
  8. please don't: edit & repost / claim as your own
  9. please don't: delete or move the credit
  10. please don't: steal bits of coding
  11.  
  12. if you need any help, feel free to
  13. message me at pirateskinned.tumblr.com
  14.  
  15. ------
  16.  
  17. tumblr controls styling by odeysseus.tumblr.com
  18. icon font by suiomi.com/font
  19.  
  20. -->
  21.  
  22. <title>coastline - about page</title>
  23.  
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26. <meta name="description" content="{MetaDescription}" />
  27.  
  28. <!-- scripts -->
  29.  
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  31.  
  32. <!-- fonts -->
  33.  
  34. <link href="https://fonts.googleapis.com/css?family=Poppins:300,500,700,900" rel="stylesheet">
  35.  
  36. <!-- icon font -- http://suiomi.com/font -->
  37.  
  38. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  39.  
  40. <!-- tooltips -->
  41.  
  42. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  43.  
  44. <script>
  45. (function($){
  46. $(document).ready(function(){
  47. $("a[title]").style_my_tooltips({
  48. tip_follows_cursor:true,
  49. tip_delay_time:30,
  50. tip_fade_speed:300,
  51. attribute:"title"
  52. });
  53. });
  54. })(jQuery);
  55. </script>
  56.  
  57. <style type="text/css">
  58.  
  59. /* --- tumblr controls styling by odeysseus
  60. http://odeysseus.tumblr.com/post/163708246967/ --- */
  61.  
  62. .tmblr-iframe {
  63. white-space:nowrap;
  64. -webkit-filter: invert(100%);
  65. -moz-filter: invert(100%);
  66. -o-filter: invert(100%);
  67. -ms-filter: invert(100%);
  68. filter: invert(100%);
  69. opacity:.2;
  70. transition: .4s ease-in-out;
  71. -webkit-transition: .4s ease-in-out;
  72. -moz-transition: .4s ease-in-out;
  73. -o-transition: .4s ease-in-out;
  74. position:fixed!important;
  75. right:-10px!important;
  76. transform:scale(0.7,0.7);
  77. }
  78.  
  79. .tmblr-iframe:hover {
  80. opacity:1;
  81. }
  82.  
  83. /* --- tooltips & scrollbars --- */
  84.  
  85. #s-m-t-tooltip {
  86. position:absolute;
  87. margin-top: 15px;
  88. z-index:9999;
  89. padding:3px 5px;
  90. background:#ffffff;
  91. color:#1d1d1d;
  92. border-radius:3px;
  93. font-size:10px;
  94. -webkit-box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  95. -moz-box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  96. box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  97. }
  98.  
  99. ::-webkit-scrollbar-thumb:vertical {background-color:#e3c7be;}
  100. ::-webkit-scrollbar-button:horizontal {background-color:#e3c7be;}
  101. ::-webkit-scrollbar {background-color:transparent; width:3px;}
  102.  
  103. /* --- basics --- */
  104.  
  105. body {
  106. position:absolute;
  107. top: 0; bottom: 0; left: 0; right: 0;
  108. height: 100%;
  109. background-color:#8da7bc;
  110. color:#1d1d1d;
  111. font-family: 'Poppins', sans-serif;
  112. font-size:10px;
  113. line-height:15px;
  114. font-weight:300;
  115. text-align:justify;
  116. margin:0;
  117. }
  118.  
  119. body:before {
  120. content: "";
  121. position: absolute;
  122. background-image: url('https://images.unsplash.com/photo-1545815817-6530f410acc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80');
  123. background-size: cover;
  124. z-index: -1;
  125. height: 20%; width: 20%; /* Using Glen Maddern's trick /via @mente */
  126.  
  127. /* don't forget to use the prefixes you need */
  128. transform: scale(5);
  129. transform-origin: top left;
  130. filter: blur(1px);
  131. }
  132.  
  133. a {
  134. color:#1d1d1d;
  135. text-decoration:none;
  136. transition-duration: 0.5s;
  137. }
  138.  
  139. a:hover {
  140. color:#1d1d1d;
  141. text-decoration:none;
  142. }
  143.  
  144. img {
  145. border:none;
  146. text-decoration:none;
  147. }
  148.  
  149. b, strong, bold {
  150. color:#e4ab4c;
  151. font-weight:500;
  152. }
  153.  
  154. i, em, italic {
  155. color:#e4ab4c;
  156. }
  157.  
  158. u {
  159. text-decoration:none;
  160. border-bottom:1px solid #e4ab4c;
  161. }
  162.  
  163. s, strike {
  164. text-decoration-color:#e4ab4c;
  165. }
  166.  
  167. /* --- container --- */
  168.  
  169. .container {
  170. position:absolute;
  171. margin-top:-275px;
  172. margin-left:-450px;
  173. top:50%;
  174. left:50%;
  175. width:900px;
  176. height:550px;
  177. overflow:hidden;
  178. background-color:#f6f6f6;
  179. box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  180. border-radius:5px;
  181. }
  182.  
  183. /* --- navigation --- */
  184.  
  185. .nav {
  186. position:absolute;
  187. left:-235px;
  188. top:235px;
  189. width:550px;
  190. height:80px;
  191. text-align:center;
  192. box-sizing:border-box;
  193. padding:0px;
  194. background-color:#e4ab4c; /* --- change your accent colour here --- */
  195. transform:rotate(-90deg);
  196. }
  197.  
  198. .nav a {
  199. display:inline-block;
  200. width:auto;
  201. height:40px;
  202. line-height:40px;
  203. text-align:center;
  204. font-size:14px;
  205. margin:20px 10px;
  206. color:#fff;
  207. letter-spacing:1px;
  208. font-weight:500;
  209. border-bottom:1px solid transparent;
  210. }
  211.  
  212. .nav a:hover {
  213. font-style:italic;
  214. }
  215.  
  216. /* --- I M A G E S --- */
  217.  
  218. /* --- big image --- */
  219.  
  220. .img {
  221. position:absolute;
  222. top:40px;
  223. left:130px;
  224. width:270px;
  225. height:300px;
  226. border-top:10px solid #fff;
  227. border-right:10px solid #fff;
  228. border-bottom:50px solid #fff;
  229. border-left:10px solid #fff;
  230. background-image:url('https://images.unsplash.com/photo-1543689347-c0c3ca7296a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2736&q=80');
  231. background-position:center center;
  232. background-repeat:no-repeat;
  233. background-size:cover;
  234. box-shadow: 80px 50px 0px 0px #80bce1; /* --- change hex to change the coloured block on the right of the image --- */
  235. outline:1px solid #e8e8e8;
  236. }
  237.  
  238. /* --- small image --- */
  239.  
  240. .smallimg {
  241. position:absolute;
  242. top:140px;
  243. left:720px;
  244. width:130px;
  245. height:100px;
  246. border-top:10px solid #fff;
  247. border-right:10px solid #fff;
  248. border-bottom:50px solid #fff;
  249. border-left:10px solid #fff;
  250. background-image:url('https://images.unsplash.com/photo-1543689347-6deb11b87640?ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80');
  251. background-position:center center;
  252. background-repeat:no-repeat;
  253. background-size:cover;
  254. transform:rotate(-7deg);
  255. outline:1px solid #e8e8e8;
  256. }
  257.  
  258. /* --- big letter --- */
  259.  
  260. .letter {
  261. position:absolute;
  262. top:380px;
  263. left:370px;
  264. font-size:120px;
  265. font-weight:700;
  266. transform:rotate(7deg);
  267. }
  268.  
  269. /* --- big title --- */
  270.  
  271. .title {
  272. position:absolute;
  273. top:50px;
  274. left:480px;
  275. width:auto;
  276. height:60px;
  277. line-height:60px;
  278. font-size:60px;
  279. text-align:left;
  280. font-weight:500;
  281. box-shadow:#e3f2fc 0px -20px 0px inset;
  282. }
  283.  
  284. /* --- stats --- */
  285.  
  286. .stats {
  287. position:absolute;
  288. top:130px;
  289. left:530px;
  290. width:180px;
  291. height:180px;
  292. line-height:25px;
  293. padding-right:10px;
  294. overflow-y:auto;
  295. }
  296.  
  297. .stats b {
  298. color:#fff;
  299. background-color:#e4ab4c; /* --- change your accent colour here --- */
  300. padding:3px 5px;
  301. margin-right:5px;
  302. }
  303.  
  304. /* --- likes & dislikes --- */
  305.  
  306. .likes {
  307. top:350px;
  308. left:530px;
  309. }
  310.  
  311. .dislikes {
  312. top:350px;
  313. left:715px;
  314. }
  315.  
  316. .likes, .dislikes {
  317. position:absolute;
  318. width:160px;
  319. height:105px;
  320. text-align-last:justify;
  321. z-index:10;
  322. padding-right:10px;
  323. overflow-y:auto;
  324. text-indent:40px;
  325. }
  326.  
  327. .likes b, .dislikes b {
  328. font-size:70px;
  329. font-weight:900;
  330. margin-top:0px;
  331. margin-left:-80px;
  332. z-index:-1;
  333. position:fixed;
  334. }
  335.  
  336. /* --- quote at the bottom --- */
  337.  
  338. .infoline {
  339. position:absolute;
  340. top:490px;
  341. left:80px;
  342. width:820px;
  343. height:50px;
  344. text-align:center;
  345. font-size:14px;
  346. box-sizing:border-box;
  347. padding:0px 10px;
  348. }
  349.  
  350. .accent {
  351. position:absolute;
  352. width:100%;
  353. height:120px;
  354. bottom:0px;
  355. left:0px;
  356. z-index:0;
  357. background-color:#e3f2fc;
  358. }
  359.  
  360.  
  361. /* --- credit --- */
  362.  
  363. .credit a {
  364. position:fixed;
  365. font-size:14px;
  366. right:10px;
  367. bottom:10px;
  368. text-align:center;
  369. width:15px;
  370. height:15px;
  371. line-height:15px;
  372. color:#fff;
  373. }
  374.  
  375.  
  376. </style>
  377. </head>
  378. <body>
  379.  
  380.  
  381. <div class="container">
  382.  
  383. <div class="accent"></div>
  384.  
  385. <!-- start of navigation -->
  386.  
  387. <div class="nav">
  388. <a href="/">home</a>
  389. <a href="/ask">message</a>
  390. <a href="/">link three</a>
  391. <a href="/">link four</a>
  392. </div>
  393.  
  394. <!-- image feature -->
  395.  
  396. <div class="img"></div>
  397.  
  398. <!-- big letter -->
  399.  
  400. <div class="letter">
  401. X
  402. </div>
  403.  
  404. <!-- quote -->
  405.  
  406. <div class="infoline">
  407. <b>&ldquo;</b> put your quote in here <b>&rdquo;</b>
  408. </div>
  409.  
  410. <!-- about info -->
  411.  
  412. <div class="title">
  413. about me
  414. </div>
  415.  
  416. <div class="stats">
  417. <b>name:</b> x
  418. <br>
  419. <b>pronouns:</b> x
  420. <br>
  421. <b>age:</b> x
  422. <br>
  423. <b>x:</b> x
  424. <br>
  425. <b>x:</b> x
  426. <br>
  427. <b>x:</b> x
  428. <br>
  429. <b>x:</b> x
  430. </div>
  431.  
  432. <div class="smallimg"></div>
  433.  
  434. <div class="likes">
  435. <b>+</b> likes
  436. </div>
  437.  
  438. <div class="dislikes">
  439. <b>-</b> dislikes
  440. </div>
  441.  
  442.  
  443. </div> <!-- end of .container -->
  444.  
  445. <div class="credit"><a class="sf sf-ship" href="http://pirateskinned.tumblr.com/" title="coded by pirateskinned"></a></div>
  446.  
  447. </body></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!