API tools faq
paste
Advertisement
ciralism

Grape Expectations (all-in-one)

ciralism
Jan 8th, 2016
2,696
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.70 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <!---
  4.  
  5. GRAPE EXPECTATIONS
  6. an all-in-one page by @ciralism
  7.  
  8. // follow the rules please
  9. // customization instructions are in gray
  10. // please read all instructions before asking questions
  11. // please ask questions off anon
  12. // enjoy!
  13.  
  14. --->
  15. <head>
  16. <title>{Title}</title>
  17. <link rel="shortcut icon" href="{Favicon}">
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19. <link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900' rel='stylesheet' type='text/css'>
  20. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  21. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  22.  
  23. <style type="text/css">
  24.  
  25. body {width:100%;height:100%;background-color:#1a1a1a;font-family:Lato, Sans-Serif;font-size:11px;overflow-x:hidden;}
  26. a {text-decoration:none;color:#000;border:none;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;transition-duration:500ms;}
  27. a:hover, a:visited {text-decoration:none;color:#000;}
  28. a:hover {color:#2c3b74;/*ACCENT COLOR*/}
  29. #tumblr_controls, .tmblr-iframe {display:none!important;}
  30. b, i, em, pre {font-size:1em;}
  31. ul {list-style-type:none;margin-left:-20px;}
  32. ol {list-style-type:upper-roman;}
  33. ul li {padding-left:15px;position:relative;}
  34. ul li:before {content:'\00BB';position:absolute;left:0px;}
  35. /* Credit // DO NOT TOUCH */
  36. #credit {color:#fff;position:fixed;text-transform:uppercase;font-size:7px;font-style:normal;right:10px;bottom:3px;letter-spacing:1px;font-family:Lato;font-weight:900;width:41px;overflow:hidden;transition-delay:800ms;-webkit-transition-delay:800ms;-moz-transition-delay:800ms;-ms-transition-delay:800ms;-o-transition-delay:800ms;}
  37. #credit .l {font-weight:300!important;display:inline;}
  38. #credit:hover {color:#fff;width:78px;transition-delay:0ms;-webkit-transition-delay:0ms;-moz-transition-delay:0ms;-ms-transition-delay:0ms;-o-transition-delay:0ms;}
  39. #credit .n {color:#eee;text-transform:lowercase;font-weight:normal;font-style:italic;display:block;width:78px;margin-bottom:-9px;-webkit-transition-duration:400ms;-o-transition-duration:400ms;-moz-transition-duration:400ms;-ms-transition-duration:400ms;transition-delay:400ms;-webkit-transition-delay:400ms;-moz-transition-delay:400ms;-ms-transition-delay:400ms;-o-transition-delay:400ms;}
  40. .n::after {width:25px;height:1px;content:"";position:absolute;background-color:transparent;margin-top:5px;margin-left:3px;-webkit-transition-duration:400ms;-o-transition-duration:400ms;-moz-transition-duration:400ms;-ms-transition-duration:400ms;transition-delay:0ms;-webkit-transition-delay:0ms;-moz-transition-delay:0ms;-ms-transition-delay:0ms;-o-transition-delay:0ms;}
  41. #credit:hover .n::after {box-shadow:inset 24px 0px 0px 0px #a6d06e;transition-delay:800ms;-webkit-transition-delay:800ms;-moz-transition-delay:800ms;-ms-transition-delay:800ms;-o-transition-delay:800ms;}
  42. #credit:hover .n {margin-bottom:0px;}
  43.  
  44. /*--don't change any of this--*/
  45. .container {padding:50px;text-align:center;height:80%;top:10%;}
  46. .grapes {text-align:center;margin-top:50px;}
  47. .stem {width:2px;height:12px;background-color:#fff;display:inline-block;margin-bottom:3px;}
  48. .grape {cursor:pointer;display:inline-block;width:8px;height:8px;border:2px solid #fff;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;margin-left:2px;margin-top:2px;transition-duration:600ms;-webkit-transition-duration:600ms;-moz-transition-duration:600ms;-o-transition-duration:600ms;-ms-transition-duration:600ms;}
  49. .main {color:#fff;font-size:15px;line-height:230%;letter-spacing:2px;font-weight:100;width:500px;margin:25px auto;padding:0;display:block;-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;-ms-transition-duration:1s;transition-duration:1s;}
  50. .home-button {top:15px;left:15px;position:fixed;color:#fff;padding:10px;border:1px solid #aaa;width:20px;height:20px;-webkit-transition-duration:700ms;-o-transition-duration:700ms;-moz-transition-duration:700ms;-ms-transition-duration:700ms;transition-duration:700ms;}
  51. .arrow {-webkit-filter:invert(100%);filter:invert(100%);background:url('https://cdn3.iconfinder.com/data/icons/vector-iso-icon-bundle-1/512/arrow-thin-right-512.png');background-size:35px;width:35px;height:35px;position:absolute;margin-left:-25px;margin-top:-8px;opacity:.7;-webkit-transition-duration:700ms;-o-transition-duration:700ms;-moz-transition-duration:700ms;-ms-transition-duration:700ms;transition-duration:700ms;}
  52. .home-button:hover .arrow {margin-left:-9px;opacity:1;}
  53. .home-button:hover {border-color:#ffffff;}
  54. .link-text {margin-left:50px;margin-top:2px;color:#aaa;font-weight:300;text-transform:uppercase;font-size:10px;letter-spacing:2px;vertical-align:bottom;-webkit-transition-duration:700ms;-o-transition-duration:700ms;-moz-transition-duration:700ms;-ms-transition-duration:700ms;transition-duration:700ms;}
  55. .home-button:hover .link-text {color:#fff;}
  56. .biography {background-color:transparent;border:1px solid #aaa;font-weight:300;color:#eee;padding:20px;line-height:180%;width:280px;font-size:12px;letter-spacing:1px;text-align:center;position:absolute;left:50%;margin-left:-150px;top:60%;margin-bottom:50px;-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;-ms-transition-duration:1s;transition-duration:1s;}
  57. .navigation {top:60%;background-color:transparent;color:#fff;-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;-ms-transition-duration:1s;transition-duration:1s;position:absolute;width:180px;left:50%;margin-left:-360px;}
  58. .nav-title {text-transform:uppercase;font-size:9px;font-weight:bold;letter-spacing:3px;padding:15px 10px;border:1px solid #aaa;text-align:left;}
  59. .navigation a {display:block;padding:9px 10px;text-align:left;color:#fff;border:1px solid #999;font-weight:300;letter-spacing:3px;font-size:8px;text-transform:uppercase;margin-top:6px;}
  60. .navigation a:hover {padding-left:20px;border-color:#fff;}
  61. .first {margin-top:8px!important;}
  62. .hide {opacity:0;}
  63. .show {opacity:1;}
  64.  
  65. /*--GRAPE COLORS---
  66. feel free to change the border and background colors for each grape*/
  67.  
  68. .bio:hover, .select1 {border-color:#a6d06e;background-color:#c3f284;}
  69. .navi:hover, .select2 {background-color:#a5ec9a;border-color:#66c558;}
  70. .blogroll:hover, .select3 {background-color:#d3f456;border-color:#9cab60;}
  71. .menu:hover, .select4 {background-color:#8be5a8;border-color:#42c56c;}
  72. .clicker:hover, .select5 {background-color:#56f250;border-color:#28b423;}
  73. .social:hover, .select6 {background-color:#b2d06e;border-color:#7c9641;}
  74.  
  75. /*--the default look of the grapes--*/
  76. .plain {border-color:#fff;background-color:transparent;}
  77.  
  78. ::selection {background-color:#d3f456;}
  79. .bio:hover .biotitle {opacity:1!important;}
  80. .broll {width:180px;text-align:left;position:absolute;top:60%;left:50%;margin-left:200px;-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;-ms-transition-duration:1s;transition-duration:1s;}
  81. .broll-title {color:#fff;text-transform:uppercase;font-size:9px;font-weight:bold;letter-spacing:3px;padding:15px 10px;border:1px solid #aaa;text-align:left;}
  82. .broll-content {display:block;margin-left:-5px;margin-top:5px;width:calc(100% + 20px);overflow-x:hidden;overflow-y:scroll;height:140px;}
  83. .following {display:inline-block;margin:5px 5px;padding:5px;border:1px solid #aaa;}
  84. .following img {width:25px;height:25px;}
  85.  
  86. ::-webkit-scrollbar {width:5px;background-color:#1a1a1a;}
  87. ::-webkit-scrollbar-thumb {background-color:#fff;border:2px solid #1a1a1a;}
  88.  
  89. .men {position:fixed;top:15px;right:15px;-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;-ms-transition-duration:1s;transition-duration:1s;}
  90. .men div {display:inline-block;margin-left:5px;}
  91. .dash {width:40px;height:40px;border:1px solid #aaa;display:block;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;transition-duration:500ms;}
  92. .house {-webkit-filter:invert(100%);filter:invert(100%);background:url(http://www.megaicons.net/static/img/icons_sizes/8/60/256/basic-home-icon.png);background-size:20px;width:20px;height:20px;opacity:.7;margin-top:9px;right:60px;position:absolute;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;transition-duration:500ms;}
  93. .dash:hover .house,.dash:hover .plus {opacity:1;}
  94. .dash:hover {border-color:#fff;}
  95. .plus {-webkit-filter:invert(100%);filter:invert(100%);background:url(http://iconshow.me/media/images/ui/ios7-icons/png/512/plus-empty.png);background-size:25px;width:25px;height:25px;position:absolute;opacity:.8;margin-top:3px;right:8px;top:5px;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;transition-duration:500ms;}
  96.  
  97. .quote {color:#fff;font-size:15px;line-height:230%;letter-spacing:2px;font-weight:100;width:500px;padding:0;left:50%;margin-left:-250px;position:absolute;margin-top:-120px;-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;-ms-transition-duration:1s;transition-duration:1s;}
  98. .source {font-weight:bold;font-size:10px;text-transform:uppercase;letter-spacing:3px;}
  99.  
  100. .soc {position:fixed;right:20px;top:60px;-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;-ms-transition-duration:1s;transition-duration:1s;}
  101. .soc a {color:#ccc;display:block;padding:7px 8px;border-radius:50%;border:1px solid #647c55;margin-top:25px;}
  102. .soc a::after {content:"";width:6px;height:6px;background-color:#9ec387;border-radius:#9ec387;position:absolute;margin-top:-23px;margin-left:-7px;border-radius:50%;}
  103. .soc a:hover {border-color:#fff;color:#fff;}
  104.  
  105.  
  106. </style>
  107. </head>
  108. <body>
  109. <div class="home-button"><a href="/"><div class="arrow"></div><div class="link-text">Return</div></a></div>
  110. <div class="container">
  111. <div class="grapes">
  112. <div class="stem"></div>
  113. <br>
  114. <div class="grape bio plain"></div>
  115. <div class="grape navi plain"></div>
  116. <div class="grape blogroll plain"></div>
  117. <br>
  118. <div class="grape menu plain"></div>
  119. <div class="grape clicker plain"></div>
  120. <br>
  121. <div class="grape social plain"></div>
  122. </div>
  123. <script>
  124. $('.clicker').click(function(){
  125. $('.main').toggleClass('hide show');
  126. $('.quote').toggleClass('hide show');
  127. $('.clicker').toggleClass('select5 plain');
  128. });
  129. </script>
  130. <!---Your description goes here--->
  131. <div class="main show">YOUR MAIN DESCRIPTION GOES HERE. YOU MAY WRITE AS MUCH AS YOU WANT. I RECOMMEND 2-3 LINES.</div>
  132.  
  133. <!---Your quote goes here--->
  134. <div class="quote hide">"Insert your quote"<div class="source">insert source</div></div>
  135.  
  136.  
  137. <script>
  138. $(".bio").click(function(){
  139. $(".biography").toggleClass('hide show');
  140. $('.bio').toggleClass('select1 plain');
  141. });
  142. </script>
  143.  
  144. <!---Your biography goes here--->
  145. <div class="biography hide">Put in a biography here. Make it as long or short as you want. The page will scroll if this box is too long.</div>
  146.  
  147. <script>
  148. $(".navi").click(function(){
  149. $(".navigation").toggleClass('hide show');
  150. $('.navi').toggleClass('select2 plain');
  151. });
  152. </script>
  153. <!---Your navigation goes here--->
  154. <div class="navigation hide">
  155. <div class="nav-title">Navigation</div>
  156. <!---You may add as many links as you would like--->
  157. <a href="/" class="first">contact</a>
  158. <a href="/">archive</a>
  159. <a href="/">creations</a>
  160. <a href="/">other</a>
  161. </div>
  162.  
  163. <script>
  164. $(".blogroll").click(function(){
  165. $(".broll").toggleClass('hide show');
  166. $('.blogroll').toggleClass('select3 plain');
  167. });
  168. </script>
  169.  
  170. <!--This is your blogroll. You don't need to do anything to it.-->
  171. <div class="broll hide">
  172. <div class="broll-title">Blogroll</div>
  173. <div class="broll-content">
  174. {block:Following}{block:Followed}<a target='_blank' class="following" href='{FollowedURL}'><img src='{FollowedPortraitURL-64}'/></a>{/block:Followed}{/block:Following}
  175. </div>
  176. </div>
  177.  
  178. <script>
  179. $('.menu').click(function() {
  180. $('.men').toggleClass('hide show');
  181. $('.menu').toggleClass('select4 plain');
  182. });
  183. </script>
  184.  
  185. <!--These are the controls in the right corner. Change USERNAME to your username to get a functioning follow button--->
  186. <div class="men hide">
  187. <div class="dash"><a href="http://tumblr.com"><div class="house"></div></a></div>
  188. <div class="dash"><a href="http://www.tumblr.com/follow/USERNAME"><div class="plus"></div></a></div>
  189. </div>
  190.  
  191. <script>
  192. $('.social').click(function() {
  193. $('.soc').toggleClass('hide show');
  194. $('.social').toggleClass('select6 plain');
  195. });
  196. </script>
  197.  
  198. <!---These are your social links. Add the URLS to your social media to get full social links! You can add any social media site you want. To get icons, simply do <i class="fa fa-NAMEOFSITE"></i>. Available icons include twitter, google-plus, facebook, instagram, pinterest, and reddit. For a full list of icons, visit http://fortawesome.github.io/Font-Awesome/icons/-->
  199. <div class="soc hide">
  200. <a href="FACEBOOK LINK"><i class="fa fa-facebook"></i></a>
  201. <a href="INSTAGRAM LINK"><i class="fa fa-instagram"></i></a>
  202. <a href="PINTEREST LINK"><i class="fa fa-pinterest"></i></a>
  203. </div>
  204.  
  205. </div>
  206.  
  207.  
  208. <!---if you do anything to this you are the scum of the earth and I hope you choke--->
  209. <a href="http://ciralism.tumblr.com" id="credit" target="_blank">Ciralism<span class="l">themes</span><span class="n">by Caroline</span></a>
  210. </body>
  211. </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!