API tools faq
paste
Advertisement
cornetespoir

{Nav:1} Campfire

cornetespoir
Feb 2nd, 2016
1,199
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.88 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. // {Nav:1}
  4.  
  5. Campfire
  6.  
  7. by espoirthemes //
  8.  
  9. + basic html and css knowledge is required to customize this page
  10. + follow the instructions in the code to help you make edits
  11. + please do not move or remove the credit
  12.  
  13. *unless you really know what you're doing, don't edit too much of the CSS. All of the "images" and animation is just CSS, and changing it could make it stop working.
  14. -->
  15.  
  16. <!DOCTYPE html>
  17. <html>
  18. <head>
  19.  
  20.  
  21. <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  22. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  23.  
  24. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  25.  
  26. <script>
  27.  
  28. (function($){
  29.  
  30. $(document).ready(function(){
  31.  
  32. $("[title]").style_my_tooltips({
  33.  
  34. tip_follows_cursor:true,
  35.  
  36. tip_delay_time:90,
  37.  
  38. tip_fade_speed:600,
  39.  
  40. attribute:"title"
  41.  
  42. });
  43.  
  44. });
  45.  
  46. })(jQuery);
  47.  
  48. </script>
  49.  
  50.  
  51.  
  52.  
  53. <link rel="shortcut icon" href="{Favicon}" />
  54. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  55. <title>{Title}</title>
  56. </head>
  57.  
  58. <style type="text/css">
  59. /*tooltips */
  60.  
  61. .tooltip{
  62. display: inline;
  63. position: relative;
  64. }
  65. #s-m-t-tooltip {
  66. max-width:300px;
  67. border-radius:10px;
  68. padding:10px;
  69. margin:20px 7px -2px 20px;
  70. background-color:#ffffff;
  71. letter-spacing:2px;
  72. color:#000;
  73. z-index:9999999999999999999999999999;}
  74.  
  75.  
  76. /* body styling */
  77. body{
  78. background-color:#2E232B;
  79. margin:0;
  80. font-size:16px;
  81. font-family: 'Quicksand', sans-serif;
  82. }
  83.  
  84.  
  85. /*links */
  86. a{text-decoration:none; color:#2E2328; transition:.6s;}
  87. a:hover{transition:.6s; color:chocolate;}
  88. /*tag title */
  89. h1{
  90. text-align:center;
  91. color:#E83363;
  92. padding:0px;
  93. font-size:1.4em;
  94. }
  95. /*about title */
  96. h2{background-color:#B2CAAA;
  97. border-bottom:2px solid #9E8E6A;}
  98.  
  99.  
  100.  
  101.  
  102. .mallow:after{
  103. position:absolute;
  104. width:100px;
  105. height:4px;
  106. background:saddlebrown;
  107.  
  108. top:16px;
  109. left:-100px;
  110. content:'';
  111. }
  112.  
  113. .mallow:before{
  114. position:absolute;
  115. width:20px;
  116. height:4px;
  117. background:saddlebrown;
  118. border-bottom-left-radius:30px;
  119. border-top-left-radius:30px;
  120. top:16px;
  121. left:25.2px;
  122. content:'';
  123. }
  124. .m {opacity:0;margin-top:-50px; margin-left:-50px; width: 0; height: 0; border-left: 70px solid transparent; z-index:-999;border-right: 70px solid transparent; border-bottom: 100px solid #DB3918; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}
  125. .mallow { margin-top:100px;
  126. margin-left:100px;width: 32px; height: 36px; background: #F9FCF5; position: fixed; border-radius: 12px; z-index:99;
  127. font-family:arial;
  128. }
  129. .mallow:hover .m{animation-name: mallow;
  130. animation-duration: 1s;
  131. animation-iteration-count: 1;}
  132. .mallow:hover{transition:1s; background:#2B1E16;}
  133.  
  134. @keyframes mallow{
  135. 0%{opacity:.6; transform:rotate(4deg);}
  136. 25%{opacity:.4;border-bottom: 100px solid #ED8F32; transform:rotate(-4deg);}
  137. 50%{opacity:.2;}
  138. 75%(opacity:.1)
  139. 100%{opacity:.1;}
  140. }
  141.  
  142. aside {
  143. position:fixed;
  144. left:18%;
  145. top:100px;
  146. }
  147.  
  148. #boop{position:fixed; margin-top:420px; background:
  149. #1B0B05;
  150. border-radius:90px;width: 140px; height: 39px; transform: rotate(-20deg);}
  151. #boop2{position:fixed; margin-top:420px; background:
  152. #200F08;
  153. border-radius:90px;width: 140px; height: 39px; transform: rotate(20deg);}
  154.  
  155. #beep3 {
  156. width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 100px solid #EDCE5F; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -ms-transform: rotate(-14deg); /* IE 9 */
  157. -webkit-transform: rotate(-14deg); /* Chrome, Safari, Opera */
  158. transform: rotate(-14deg);
  159.  
  160. position: absolute;
  161. -webkit-animation-name: flame3; /* Chrome, Safari, Opera */
  162. -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
  163. -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
  164. animation-name: flame3;
  165. animation-duration: 2s;
  166. animation-iteration-count: infinite;
  167. }
  168. #beep3:hover{-webkit-animation-play-state: paused;
  169. -moz-animation-play-state: paused; opacity:1; z-index:5555;
  170. -o-animation-play-state: paused;
  171. animation-play-state: paused;}
  172.  
  173. #beep2 {
  174. width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 100px solid #ED8F32; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -ms-transform: rotate(7deg); /* IE 9 */
  175. -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
  176. transform: rotate(7deg);
  177.  
  178. position: absolute;
  179. -webkit-animation-name: flame2; /* Chrome, Safari, Opera */
  180. -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
  181. -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
  182. animation-name: flame2;
  183. animation-duration: 2s;
  184. animation-iteration-count: infinite;
  185. }
  186. #beep2:hover{-webkit-animation-play-state: paused;
  187. -moz-animation-play-state: paused;
  188. -o-animation-play-state: paused;
  189. animation-play-state: paused;}
  190.  
  191.  
  192. #beep {
  193. width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 100px solid #DB3918; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
  194.  
  195. position: absolute;
  196. -webkit-animation-name: flame; /* Chrome, Safari, Opera */
  197. -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
  198. -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
  199. animation-name: flame;
  200. animation-duration: 2s;
  201. animation-iteration-count: infinite;
  202. }
  203. #beep:hover{-webkit-animation-play-state: paused;
  204. -moz-animation-play-state: paused; opacity:1;
  205. -o-animation-play-state: paused; z-index:5555;
  206. animation-play-state: paused;}
  207.  
  208.  
  209. @keyframes flame {
  210. 0% { margin-left:0px; top:300px;1}
  211. 25% { margin-left:0px; top:220px; opacity:.8;}
  212. 50% { margin-left:4px; top:300px; opacity:1;}
  213. 75% { margin-left:0px; top:280px; opacity:.8;}
  214. 100% { margin-left:8px; top:300px; opacity:.4;}
  215. }
  216.  
  217. @keyframes flame2 {
  218. 0% { margin-left:20px; top:304px;}
  219. 25% { margin-left:20px; top:284px; opacity:.6;}
  220. 50% { margin-left:22px; top:254px; opacity:.8;}
  221. 75% { margin-left:20px; top:284px; opacity:1;}
  222. 100% { margin-left:18px; top:294px; opacity:.6;}
  223. }
  224.  
  225.  
  226. @keyframes flame3 {
  227. 0% { margin-left:-20px; top:290px;opacity:.8;}
  228. 25% { margin-left:-20px; top:260px; opacity:.2;}
  229. 50% { margin-left:-22px; top:290px; opacity:.6;}
  230. 75% { margin-left:-20px; top:280px; opacity:.1;}
  231. 100% { margin-left:-22px; top:300px; opacity:.8;}
  232. }
  233.  
  234. article {
  235. width:40%;
  236. position:relative;
  237. left:40%;
  238.  
  239. margin-top:50px;
  240.  
  241. }
  242.  
  243. article p {
  244. padding:20px;
  245. width:100%;
  246. background:white;
  247. border-radius:20px;
  248. }
  249.  
  250. main {
  251. column-count:2;
  252. column-gap:20px;
  253. transform:translate(20px, 0);
  254. }
  255.  
  256. section p {
  257. width:auto;
  258. padding:10px;
  259. }
  260.  
  261. section {
  262. width:calc(100% - 40px);
  263. display:inline-block;
  264. break-inside:avoid;
  265. background:white;
  266. padding:20px;
  267.  
  268. margin-top:20px;
  269. border-radius:20px;
  270. }
  271.  
  272.  
  273. section a {
  274. padding:4px;
  275. margin:10px;
  276. }
  277.  
  278. section a[aria-disabled="true"] {
  279. color:#444;
  280. text-decoration:line-through;
  281. opacity:.8;
  282. }
  283.  
  284. </style>
  285. <body>
  286. <nav>
  287. <!--you may edit the title/urls of the marshmallow links if you want, but do *not* touch the credit. I worked really hard on this -->
  288. <a href="/" title="home"><div class="mallow"><div class="m"></div></div></a>
  289.  
  290. <a href="/ask" title="ask"><div class="mallow" style="margin-top:200px"><div class="m"></div></div></a>
  291.  
  292. <a hef="http://espoirthemesr.tumblr.com" title="credit"><div class="mallow" style="margin-top:300px"><div class="m"></div></div></a></nav>
  293.  
  294. <!--don't edit this -->
  295.  
  296. <aside>
  297. <div id="boop"></div>
  298. <div id="boop2"></div>
  299. <div id="beep"></div>
  300. <div id="beep2"></div>
  301. <div id="beep3"></div></aside>
  302. <!-- -->
  303.  
  304. <!-- start of page content -->
  305. <article>
  306. <!-- you can put a title or description here -->
  307. <p> Camping Checklist </p>
  308.  
  309. <!-- start of link sections -->
  310. <main>
  311.  
  312. <!-- section 1 -->
  313. <section>
  314. <!-- title -->
  315. <h1>Shelter</h1>
  316. <p>
  317. <!-- links -->
  318. <a href="/">tent</a> <br>
  319. <a href="/">sleeping bags</a> <br>
  320. <a href="/">pillows</a> <br>
  321. <a href="/">blankets</a> <br>
  322. <a href="/">flashlights</a> <br>
  323. <!-- end links -->
  324. </p>
  325. </section>
  326.  
  327. <!-- section 2 -->
  328. <section>
  329. <h1>Food</h1>
  330. <p>
  331. <a href="/">smores</a> <br>
  332. <a href="/">hot dogs</a> <br>
  333. <a href="/">popcorn</a> <br>
  334. </p>
  335. </section>
  336.  
  337. <!-- section 3 -->
  338. <section>
  339. <h1>Personal</h1>
  340. <p>
  341. <a href="/tagged/">sunblock</a> <br>
  342. <a href="/tagged/">first aid</a> <br>
  343. <a href="/tagged/">toothbrush</a> <br>
  344. <a href="/tagged/">toothpaste</a> <br>
  345. <a href="/tagged/">insect repellent</a> <br>
  346. <a href="/tagged/">water</a> <br>
  347. </p>
  348. </section>
  349.  
  350. <!-- section 4 -->
  351. <section>
  352. <h1>Plan</h1>
  353. <p>
  354.  
  355. <!-- if you want a link on the list, but you don't have the page yet, you can add aria-disabled="true"-->
  356. <a href="/tagged/" aria-disabled="true">make checklist</a> <br>
  357. <a href="/tagged/">pack</a> <br>
  358. <a href="/tagged/">go camping</a> <br>
  359.  
  360.  
  361. </p>
  362. </section>
  363.  
  364. </main>
  365. </article>
  366. </body>
  367.  
  368. <!--and that's it! hopefully this wasn't *too* confusing, I know it's a lot of stuff to scroll through. Please feel free to ask me if you need help! -->
  369.  
  370. </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!