API tools faq
paste
amboise

reverie

amboise
Jun 4th, 2018
3,049
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.79 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4. reverie : page by amboise
  5. be cool and don't steal nor copy
  6.  
  7. i really don't know if i made this clear enough or not, that's why i left a few examples so you can see how links go changing accordingly. still, don't hesitate to ask something at https://amboise.tumblr.com/contact if it gets confusing.
  8.  
  9. if there's any section you don't want simply delete it's corresponding div.
  10.  
  11. feel free to change fonts and icons
  12.  
  13.  
  14. -->
  15. <!DOCTYPE html>
  16. <head>
  17.  
  18. <title>reverie : page by amboise</title> <!-- window title -->
  19.  
  20. <link rel="shortcut icon" href="{favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  24.  
  25. <!-- font - ------------------------------------------------------------------->
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
  28.  
  29. <!-- icons by saturnthms ------------------------------------------------------>
  30.  
  31. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  32.  
  33. <!-- css customization -------------------------------------------------------->
  34.  
  35. <style type="text/css">
  36.  
  37. /* media queries */
  38.  
  39. @media only screen and (max-width:768px) {
  40. header {width:75%!important;}
  41. }
  42.  
  43. /* tumblr controls by@cyantists */
  44.  
  45. iframe.tmblr-iframe {
  46. z-index:99999999999999!important;
  47. top:12.5px!important;
  48. right:8px!important;
  49. opacity:0;
  50. padding-right:38px;
  51. /* delete invert(1) from here */
  52. filter:invert(1) contrast(150%);
  53. -webkit-filter:invert(1) contrast(150%);
  54. -o-filter:invert(1) contrast(150%);
  55. -moz-filter:invert(1) contrast(150%);
  56. -ms-filter:invert(1) contrast(150%);
  57. /* to here if your blog has a dark background */
  58. transform:scale(0.65);
  59. transform-origin:100% 0;
  60. -webkit-transform:scale(0.65);
  61. -webkit-transform-origin:100% 0;
  62. -o-transform:scale(0.65);
  63. -o-transform-origin:100% 0;
  64. -moz-transform:scale(0.65);
  65. -moz-transform-origin:100% 0;
  66. -ms-transform:scale(0.65);
  67. -ms-transform-origin:100% 0;
  68. }
  69.  
  70. iframe.tmblr-iframe:hover {
  71. opacity:0.6!important;
  72. }
  73.  
  74. .hcontrols {
  75. position:fixed;
  76. top:15px;
  77. right:8px;
  78. z-index:999999999;
  79. }
  80.  
  81. .hcontrols svg {
  82. width:14px;
  83. height:14px;
  84. padding:9px;
  85. }
  86.  
  87. .hcontrols svg path {
  88. fill:#888888;
  89. }
  90.  
  91. /* credit */
  92.  
  93. .credit {
  94. position:fixed;
  95. bottom:18.5px;
  96. right:16.5px;
  97. }
  98.  
  99. .credit svg {
  100. color:#939292;
  101. }
  102.  
  103. /* text selection color */
  104.  
  105. ::selection {background:#f0f0f0;color:#000000;}
  106. ::-moz-selection {background:#f0f0f0;color:#000000;}
  107. ::-webkit-selection {background:#f0f0f0;color:#000000;}
  108.  
  109. /* scrollbar */
  110.  
  111. ::-webkit-scrollbar{
  112. height:11px;
  113. width:11px;
  114. background:inherit;
  115. }
  116.  
  117. ::-webkit-scrollbar-thumb {background-color:#d5d5d5;}
  118.  
  119. ::-webkit-scrollbar-track {background-color:#eee;}
  120.  
  121. ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {
  122. border:5px solid #fff;} /* scrollbar background color */
  123.  
  124. /* main structure */
  125.  
  126. body {
  127. color:#000000; /* font color */
  128. background-color:rgb(255,255,255); /* background color */
  129. font-size:14px; /* font size */
  130. font-family: 'Karla', sans-serif;
  131. word-wrap:break-word;
  132. line-height:1.6em;
  133. margin:0;
  134. /* if you want to add a background image instead */
  135. background-image:url(""); /* image link goes between the quotation marks */
  136. background-repeat:repeat; /* or no-repeat */
  137. background-attachment:fixed; /* or scroll (defautl) */
  138. }
  139.  
  140. a {
  141. color:#000000; /* link color */
  142. text-decoration:none;
  143. }
  144.  
  145. header img {
  146. display:block;
  147. width:30px; /* icon width */
  148. height:30px; /* icon height */
  149. overflow:hidden;
  150. border-radius:.4em; /* icon radius - circular 50% - rectangular 0 */
  151. margin:0 auto 15px;
  152. }
  153.  
  154. header {
  155. max-width:100%;
  156. margin:75px auto;
  157. width:300px;
  158. text-align:center;
  159. }
  160.  
  161. section {
  162. max-width:100%;
  163. margin:0 auto;
  164. width:250px;
  165. }
  166.  
  167. .title {
  168. font-size:16px; /* title font size */
  169. }
  170.  
  171. .welcome {
  172. margin-top:2px;
  173. }
  174.  
  175. .welcome, .bye {
  176. font-size:13px; /* description and footer font size */
  177. }
  178.  
  179. /* links */
  180.  
  181. .subs {
  182. width:224px;
  183. background-color:rgb(255,255,255); /* background color */
  184. border:1px solid #eee;
  185. margin-bottom:5px;
  186. padding:12px;
  187. }
  188.  
  189. /* links border color */
  190. /* make sure you match this colors with the one you use for their respective icons | if you want to change these colors you can go to https://yukoki.tumblr.com/tagged/ms-paint and choose the palette of your liking or to https://coolors.co/ */
  191.  
  192. .one {border-left:5px solid #e7f3cd;} /* link one */
  193. .two {border-left:5px solid #ddf1cd;} /* link two */
  194. .three {border-left:5px solid #c5edcd;} /* link three */
  195. .four {border-left:5px solid #b9edcd;} /* link four */
  196. .five {border-left:5px solid #b9eddd;} /* link five */
  197. .six {border-left:5px solid #c9e5f3;} /* link six */
  198. .seven {border-left:5px solid #cae1e7;} /* link seven */
  199. .eight {border-left:5px solid #dfe4e7;} /* link eight */
  200.  
  201. /* icons */
  202.  
  203. .sf {
  204. font-size:10px;/* icon size */
  205. margin-right:10px;
  206. }
  207.  
  208. /* icons + colors */
  209.  
  210. .sf-home {color:#e7f3cd;}
  211. .sf-user {color:#ddf1cd;}
  212. .sf-chat {color:#c5edcd;}
  213. .sf-palette {color:#b9edcd;}
  214. .sf-location {color:#b9eddd;}
  215. .sf-star {color:#c9e5f3;}
  216. .sf-calendar {color:#cae1e7;}
  217. .sf-write {color:#dfe4e7;margin-right:9px;}
  218.  
  219. /* search bar by @lmthemes */
  220.  
  221. .sfm input {
  222. color:#000; /* font color */
  223. background-color:#fff; /* background color */
  224. font-size:14px;
  225. font-family:'Karla', helvetica, arial;
  226. text-transform:lowercase;
  227. border:0;
  228. margin:0;
  229. }
  230.  
  231. input:focus,
  232. select:focus,
  233. textarea:focus,
  234. button:focus {
  235. outline:none;
  236. }
  237.  
  238. footer {
  239. max-width:100%;
  240. margin:100px auto 150px;
  241. width:300px;
  242. text-align:center;
  243. }
  244.  
  245. </style>
  246. </head>
  247.  
  248. <body>
  249.  
  250. <header>
  251.  
  252. <!-- icon -->
  253. <img src="https://78.media.tumblr.com/77339ee21ed9e3f32d7b11fc4103b6f0/tumblr_p5xjrqReaa1w3k7yao7_r1_100.png"/>
  254.  
  255. <!-- title -->
  256. <div class="title">
  257. reverie
  258. </div>
  259.  
  260. <!-- description -->
  261. <div class="welcome">
  262. be gentle my little thunderstorm
  263. </div>
  264.  
  265. </header>
  266.  
  267. <section>
  268.  
  269. <!-- links -->
  270.  
  271. <!-- if you want to link externally add http:// or https:// if the link is from within your blog add /yourlink
  272.  
  273. if you want to change icons go to saturnthms.com/font there are instrcutions there to help you use them easily -->
  274.  
  275.  
  276. <!-- link one -->
  277. <div class="subs one">
  278. <i class="sf sf-home" aria-hidden="true"></i> <!-- icon goes here -->
  279. <a href="/yourlink"> <!-- link goes here -->
  280. home <!-- link name goes here -->
  281. </a>
  282. </div>
  283.  
  284. <!-- link two -->
  285. <div class="subs two">
  286. <i class="sf sf-user" aria-hidden="true"></i>
  287. <a href="/yourlink">profile</a>
  288. </div>
  289.  
  290. <!-- link three -->
  291. <div class="subs three">
  292. <i class="sf sf-chat" aria-hidden="true"></i>
  293. <a href="/ask">message</a>
  294. </div>
  295.  
  296. <!-- link four -->
  297. <div class="subs four">
  298. <i class="sf sf-palette" aria-hidden="true"></i>
  299. <a href="/yourlink">palettes</a>
  300. </div>
  301.  
  302. <!-- link five -->
  303. <div class="subs five">
  304. <i class="sf sf-location" aria-hidden="true"></i>
  305. <a href="/yourlink">location</a>
  306. </div>
  307.  
  308. <!-- link six -->
  309. <div class="subs six">
  310. <i class="sf sf-star" aria-hidden="true"></i>
  311. <a href="/yourlink">favorites</a>
  312. </div>
  313.  
  314. <!-- link seven -->
  315. <div class="subs seven">
  316. <i class="sf sf-calendar" aria-hidden="true"></i>
  317. <a href="/archive">history</a>
  318. </div>
  319.  
  320. <!-- link eight -->
  321. <div class="subs eight">
  322.  
  323. <script language="javascript">
  324. function send()
  325. {document.theform.submit()}
  326. </script>
  327.  
  328. <form action="/search" method="get" class="sfm" name="theform">
  329. <i class="sf sf-write" aria-hidden="true"></i>
  330. <input type="text" name="q" placeholder="search" id="sf"/>
  331. </form>
  332.  
  333. </div>
  334.  
  335. <footer>
  336.  
  337. <!-- footer text - if you won't use this section just delete the following div and not the footer itself -->
  338.  
  339. <div class="bye">
  340. the world is just not ready.
  341. </div>
  342.  
  343. </footer>
  344.  
  345. <!-- don't change anything from this point on -->
  346.  
  347. <a class="credit" href="https://amboise.tumblr.com/"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-power"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path><line x1="12" y1="2" x2="12" y2="12"></line></svg></a>
  348.  
  349. <div class="hcontrols"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M106.6,134c14.3,0,26-11.7,26-26s-11.7-26-26-26s-26,11.7-26,26S92.2,134,106.6,134z M106.6,94c7.7,0,14,6.3,14,14s-6.3,14-14,14s-14-6.3-14-14S98.9,94,106.6,94z M40.4,124.6l7.2,3.3c3,1.4,4.4,4.8,3.3,7.9l-2.8,7.4c-2.1,5.7-1.4,11.8,2.1,16.7c3.4,5,9,7.9,15,7.9c2.2,0,4.4-0.4,6.5-1.2l7.4-2.8c0.7-0.3,1.4-0.4,2.2-0.4c2.4,0,4.7,1.4,5.7,3.7l3.3,7.2c3,6.6,9.4,10.7,16.6,10.7s13.6-4.1,16.6-10.7l3.3-7.2c1-2.2,3.2-3.7,5.7-3.7c0.7,0,1.5,0.1,2.2,0.4l7.4,2.8c2.1,0.8,4.3,1.2,6.5,1.2c0,0,0,0,0,0c5.9,0,11.5-3,15-7.9c3.4-5,4.2-11.1,2.1-16.7l-2.8-7.4c-1.1-3.1,0.3-6.5,3.3-7.9l7.2-3.3c6.6-3,10.7-9.4,10.7-16.6s-4.1-13.6-10.7-16.6l-7.2-3.3c-3-1.4-4.4-4.8-3.3-7.9l2.8-7.4c2.1-5.7,1.4-11.8-2.1-16.7c-3.4-5-9-7.9-15-7.9c-2.2,0-4.4,0.4-6.5,1.2l-7.4,2.8c-0.7,0.3-1.4,0.4-2.2,0.4c-2.4,0-4.7-1.4-5.7-3.7l-3.3-7.2c-3-6.6-9.4-10.7-16.6-10.7S93,35.2,90,41.8l-3.3,7.2c-1,2.2-3.2,3.7-5.7,3.7c-0.7,0-1.5-0.1-2.2-0.4l-7.4-2.8c-2.1-0.8-4.3-1.2-6.5-1.2c-5.9,0-11.5,3-15,7.9c-3.4,5-4.2,11.1-2.1,16.7l2.8,7.4c1.1,3.1-0.3,6.5-3.3,7.9l-7.2,3.3c-6.6,3-10.7,9.4-10.7,16.6S33.8,121.6,40.4,124.6z M45.3,102.3l7.2-3.3c8.7-4,12.9-14.1,9.5-23l-2.8-7.4c-1-2.7,0-4.7,0.7-5.7c1.6-2.4,4.6-3.4,7.4-2.3l7.4,2.8c2.1,0.8,4.2,1.2,6.4,1.2c0,0,0,0,0,0c7.1,0,13.6-4.2,16.6-10.7l3.3-7.2c1.5-3.4,4.7-3.7,5.7-3.7s4.1,0.3,5.7,3.7l3.3,7.2c3,6.5,9.5,10.7,16.6,10.7c2.2,0,4.3-0.4,6.4-1.2l7.4-2.8c2.8-1,5.7,0,7.4,2.3c0.7,1,1.7,3,0.7,5.7l-2.8,7.4c-3.3,8.9,0.8,19,9.5,23l7.2,3.3c3.4,1.5,3.7,4.7,3.7,5.7s-0.3,4.1-3.7,5.7l-7.2,3.3c-8.7,4-12.9,14.1-9.5,23l2.8,7.4c1,2.7,0,4.7-0.7,5.7c-1.6,2.4-4.6,3.4-7.4,2.3l-7.4-2.8c-2.1-0.8-4.2-1.2-6.4-1.2c-7.1,0-13.6,4.2-16.6,10.7l-3.3,7.2c-1.5,3.4-4.7,3.7-5.7,3.7s-4.1-0.3-5.7-3.7l-3.3-7.2c-3-6.5-9.5-10.7-16.6-10.7c-2.2,0-4.3,0.4-6.4,1.2l-7.4,2.8c-2.8,1-5.7,0-7.4-2.3c-0.7-1-1.7-3-0.7-5.7l2.8-7.4c3.3-8.9-0.8-19-9.5-23l-7.2-3.3c-3.4-1.5-3.7-4.7-3.7-5.7S41.9,103.9,45.3,102.3z"/></svg></div>
  350.  
  351. </body>
  352. </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!