API tools faq
paste
dansmilth

Gallery Theme 01

dansmilth
Jul 19th, 2015
1,464
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.19 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <!-----------
  5.  
  6. GALLERY THEME 01 by clumhood
  7.  
  8. :> ------------>
  9.  
  10. <title>GALLERY</title>
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  13. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  14.  
  15. <link href='http://fonts.googleapis.com/css?family=Roboto:700,400' rel='stylesheet' type='text/css'>
  16.  
  17. <script type="text/javascript">
  18. WebFontConfig = {
  19. google: { families: [ 'Roboto:700,400:latin' ] }
  20. };
  21. (function() {
  22. var wf = document.createElement('script');
  23. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  24. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  25. wf.type = 'text/javascript';
  26. wf.async = 'true';
  27. var s = document.getElementsByTagName('script')[0];
  28. s.parentNode.insertBefore(wf, s);
  29. })(); </script>
  30.  
  31. <style type="text/css">
  32.  
  33. body {
  34. font-family:arial;
  35. font-size:12px;
  36. background:#ffffff; /**this is the color of the bg.*/
  37.  
  38. }
  39.  
  40. a {
  41. color:#676767; /**this is the color of the links.*/
  42. text-decoration:none;
  43. }
  44.  
  45. ::-webkit-scrollbar {
  46. background-color: white;
  47. height:8px;
  48. width:5px
  49. }
  50.  
  51. ::-webkit-scrollbar-thumb:vertical {
  52. background-color:black;
  53. height:50px
  54. }
  55.  
  56. ::-webkit-scrollbar-thumb:horizontal {
  57. background-color:black;
  58. height:8px!important
  59. }
  60.  
  61.  
  62. .header {
  63. width:970px;
  64. background:white; /*if you don't want to use a picture as your header background, this is the color of your header background*/
  65. padding:100px;
  66. color:black;
  67. text-align:center;
  68. font-family:'roboto', sans-serif;
  69. font-size:20px;
  70. background:url(http://static.tumblr.com/zy3qjic/eL3nr8oh6/bg.png); /*this is your header background image sized 1171x224px*/
  71. box-shadow:0px 3px 10px rgba(0,0,0,.15);
  72.  
  73.  
  74. }
  75.  
  76. .header a {
  77. font-family:'roboto', sans-serif;
  78. font-size:15px;
  79. margin-left:10px;
  80. text-transform:uppercase;
  81. padding:2px;
  82. color:black;
  83. }
  84.  
  85. .header a:hover {
  86. color:#eee;
  87. -webkit-transition: all 0.5s ease-in;
  88. -moz-transition: all 0.5s ease-in;
  89. -o-transition: all 0.5s ease-in;
  90. }
  91.  
  92.  
  93. .container {
  94. width:1080px;
  95. margin-top:10px;
  96.  
  97.  
  98. }
  99.  
  100. .content {
  101. margin:10px;
  102. overflow:hidden;
  103. width:250px;
  104. float:left;
  105. box-shadow:0px 3px 10px rgba(0,0,0,.15);
  106.  
  107.  
  108.  
  109. }
  110.  
  111. .content img {
  112. display:block;
  113. }
  114.  
  115. .info {
  116. position:absolute;
  117. z-index:1;
  118. width:230px;
  119. height:280px;
  120. padding:10px;
  121. margin-top:-300px;
  122. color:white; /*this is the color of the text of the info on your categories.*/
  123. opacity:0;
  124.  
  125. }
  126.  
  127. .info:hover {
  128. -webkit-transition: all 0.5s ease-in;
  129. -moz-transition: all 0.5s ease-in;
  130. -o-transition: all 0.5s ease-in;
  131. opacity:1;
  132. width:230px;
  133. height:280px;
  134. padding:10px;
  135. background:URL("http://static.tumblr.com/ododrup/HNsnqf2wp/hover.png");
  136.  
  137. }
  138.  
  139. .info .title {
  140. opacity:1;
  141. font-family:'roboto', sans-serif;
  142. font-size:20px;
  143. text-transform:uppercase;
  144. margin-top:40px;
  145. font-weight:bold;
  146.  
  147. }
  148.  
  149. .desc {
  150. margin-top:50px;
  151. width:150px;
  152. text-align:left;
  153. font-size:11px;
  154. line-height:150%;
  155. letter-spacing:1px;
  156. text-align:justify;
  157. }
  158.  
  159. .view {
  160. text-transform:uppercase;
  161. font-family:'robot', sans-serif;
  162. font-size:15px;
  163. font-weight:bold;
  164. padding:5px;
  165. width:50px;
  166.  
  167. }
  168.  
  169.  
  170.  
  171. .view a {
  172. color:white; /*this is the color of the words of the view button.*/
  173. }
  174.  
  175. .view a:hover {
  176. color:black;
  177. -webkit-transition: all 0.5s ease-in;
  178. -moz-transition: all 0.5s ease-in;
  179. -o-transition: all 0.5s ease-in;
  180. padding:5;
  181. background:white;
  182.  
  183. }
  184.  
  185.  
  186.  
  187.  
  188. </style>
  189. </head>
  190.  
  191. <body>
  192.  
  193.  
  194. <center><div class="header">
  195. <b>HALSEYSOURCE</b> <a href="/gallery">Refresh</a> <a href="/ask">Message</a> <a href="/">back</a> <a href="http://clumhood.tumblr.com/">credit</a> </div></center>
  196.  
  197.  
  198. <center><div class="container">
  199.  
  200. <!-- COPY AND PASTE THIS CODE EVERYTIME YOU WANT A NEW CATEGORY
  201. -->
  202.  
  203.  
  204. <!-- STARTING FROM HERE -->
  205. <div class="content">
  206. <img src="http://static.tumblr.com/zy3qjic/kRjnr0vl4/1.png">
  207. <div class="info">
  208. <div class="title">All hqs</div>
  209. <div class="desc">Here you will find all HQ pictures of Halsey.</div><br><br>
  210. <div class="view"><a href="/tagged/hq">View</a></div> <!-- COPY AND PASTE THIS TO ADD ANOTHER BUTTON AND DONT FORGET TO ADD <BR> AFTER THE FIRST <div class="view"><a href="/">View</a></div> <BR> LIKE SO -->
  211. </div>
  212. </div>
  213. <!-- ENDING HERE -->
  214.  
  215.  
  216. <div class="content">
  217. <img src="http://static.tumblr.com/zy3qjic/UX7nr0vlp/2.png">
  218. <div class="info">
  219. <div class="title">appearances</div>
  220. <div class="desc">Pictures of Halsey at different events.</div><br>
  221. <div class="view"><a href="/appearances2015">2015</a></div>
  222. </div>
  223. </div>
  224.  
  225. <div class="content">
  226. <img src="http://static.tumblr.com/zy3qjic/Wranr6n2a/1.png">
  227. <div class="info">
  228. <div class="title">candids</div>
  229. <div class="desc">Pictures of Halsey spotted in various places.</div><br>
  230. <div class="view"><a href="/candids2014">2014</a></div>
  231. </div>
  232. </div>
  233.  
  234. <div class="content">
  235. <img src="http://static.tumblr.com/zy3qjic/ap9nr0vm1/3.png">
  236. <div class="info">
  237. <div class="title">live</div>
  238. <div class="desc">Pictures of Halsey performing on tour or at music festivals.</div><br>
  239. <div class="view"><a href="/live2014">2014</a></div>
  240. <div class="view"><a href="/live2015">2015</a></div>
  241. </div>
  242. </div>
  243.  
  244. <div class="content">
  245. <img src="http://static.tumblr.com/zy3qjic/fm9nr0vy8/6.png">
  246. <div class="info">
  247. <div class="title">Performances</div>
  248. <div class="desc">Pictures of Halsey performing at special events.</div><br>
  249. <div class="view"><a href="/performances2015">2015</a></div>
  250. </div>
  251. </div>
  252.  
  253. <div class="content">
  254. <img src="http://static.tumblr.com/zy3qjic/8RKnr0vmg/4.png">
  255. <div class="info">
  256. <div class="title">Photoshoots</div>
  257. <div class="desc">Portraits, magazine outtakes and shoots of Halsey taken by professional photographers. </div><br>
  258. <div class="view"><a href="/photoshoots2014">2014</a></div>
  259. <div class="view"><a href="/photoshoots2015">2015</a></div>
  260. </div>
  261. </div>
  262.  
  263. <div class="content">
  264. <img src="http://static.tumblr.com/zy3qjic/NaRnr0vmt/5.png">
  265. <div class="info">
  266. <div class="title">Fan pictures</div>
  267. <div class="desc">Pictures of Halsey with fans.</div>
  268. <div class="view"><a href="/tagged/fan pic">View</a></div>
  269. </div>
  270. </div>
  271.  
  272.  
  273.  
  274.  
  275. </div></center>
  276.  
  277.  
  278.  
  279. </body>
  280. </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!