API tools faq
paste
dansmilth

Gallery Theme 02 (Part 2)

dansmilth
Jul 19th, 2015
1,222
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.09 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <!-----------
  5.  
  6. GALLERY THEME 02 by clumhood
  7.  
  8. :> ------------>
  9.  
  10. <title>Home - HQ 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. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  32.  
  33. <style type="text/css">
  34.  
  35. body {
  36. font-family:arial;
  37. font-size:12px;
  38. background:#f8f8f8; /**this is the color of the bg.*/
  39. margin:0px;
  40.  
  41. }
  42.  
  43. a {
  44. color:#676767; /**this is the color of the links.*/
  45. text-decoration:none;
  46. }
  47.  
  48. h1 {
  49. font-family:'roboto', sans-serif;
  50. font-size:13px;
  51. text-transform:uppercase;
  52. }
  53.  
  54. ::-webkit-scrollbar {
  55. background-color: white;
  56. height:8px;
  57. width:5px
  58. }
  59.  
  60. ::-webkit-scrollbar-thumb:vertical {
  61. background-color:black;
  62. height:50px
  63. }
  64.  
  65. ::-webkit-scrollbar-thumb:horizontal {
  66. background-color:black;
  67. height:8px!important
  68. }
  69.  
  70.  
  71. .header {
  72. margin-left:calc(50% - 550px);
  73. width:1100px;
  74.  
  75. }
  76.  
  77. .navi {
  78. width:1040px;
  79. margin-left:calc(50% - 550px);
  80. padding:30px;
  81. background:white;
  82. }
  83.  
  84. .navi a {
  85. font-family:'roboto', sans-serif;
  86. font-size:12px;
  87. text-transform:uppercase;
  88. font-weight:bold;
  89. padding:30px;
  90. border-right:1px solid #eee;
  91.  
  92. }
  93.  
  94. .navi a:hover {
  95. -webkit-transition: all 0.5s ease-in;
  96. -moz-transition: all 0.5s ease-in;
  97. -o-transition: all 0.5s ease-in;
  98. background:#d0465d;/*this is the color of the background of the topbar links when you hover over them.*/
  99. color:white;/**this is the color of the topbar links when you hover over them.*/
  100. }
  101.  
  102.  
  103. .navi a:first-child {
  104. margin-left:-30px;
  105. }
  106.  
  107. .navi a:last-child {
  108. margin-right:-30px;
  109. border:none;
  110. }
  111.  
  112.  
  113.  
  114. .container {
  115. width:1100px;
  116. margin-top:10px;
  117. padding:30px;
  118. margin-left:calc(50% - 560px);
  119. margin-bottom:10px;
  120.  
  121. }
  122.  
  123. .content {
  124. margin:20px;
  125. overflow:hidden;
  126. width:140px;
  127. float:left;
  128.  
  129. }
  130.  
  131. .content img {
  132. display:inline-block;
  133. padding:5px;
  134.  
  135. }
  136.  
  137.  
  138.  
  139. .hover {
  140. width:135px;
  141. height:140px;
  142. margin-top:-145px;
  143. position:absolute;
  144. z-index:1;
  145. opacity:0;
  146. margin-left:5px;
  147.  
  148. }
  149.  
  150. .hover:hover {
  151. -webkit-transition: all 0.5s ease-in;
  152. -moz-transition: all 0.5s ease-in;
  153. -o-transition: all 0.5s ease-in;
  154. opacity:1;
  155. width:135px;
  156. height:140px;
  157. background:URL("http://static.tumblr.com/ododrup/HNsnqf2wp/hover.png");
  158. }
  159.  
  160. .desc {
  161. padding:10px;
  162. width:100px;
  163. font-size:10px;
  164. margin-top:40px;
  165. letter-spacing:1px;
  166. color:white; /**this is the color of the text when you hover over your preview pictures.*/
  167. line-height:150%;
  168.  
  169. }
  170.  
  171. .date {
  172. padding:5px;
  173. background:#eee; /**this is the color of the date's background.*/
  174. text-transform:uppercase;
  175. font-family:'roboto', sans-serif;
  176. font-size:11px;
  177. font-weight:bold;
  178. position:absolute;
  179. width:127px;
  180. margin-left:4px;
  181. }
  182.  
  183. #footer {
  184. margin-top: 20px;
  185. background:black; /**this is the color of the background of the disclaimer.*/
  186. float: left;
  187. width: 1100px;
  188. height: auto;
  189. padding-top: 50px;
  190. padding-bottom: 30px;
  191. margin-left:calc(50% - 550px);
  192. margin-top:70px;
  193. }
  194.  
  195. #footer-align {
  196. vertical-align: middle;
  197. display: table-cell;
  198. width: 100%;
  199. height: auto;
  200. }
  201.  
  202. #footer-content {
  203. width: 1000px;
  204. margin: 0 auto;
  205.  
  206. }
  207.  
  208. #footer-title {
  209. font-weight: bold;
  210. font-size: 12px;
  211. text-transform: uppercase;
  212. color: #5d5d5d;/*this is the color of the words 'LUKEHEMMOSOURCE' of the disclaimer.*/
  213. text-decoration: none;
  214. letter-spacing:1px;
  215. float: center;
  216. margin-right: -5px;
  217. margin-bottom: 10px;
  218. font-family:'roboto', sans-serif;
  219.  
  220. }
  221.  
  222. #footer-content {
  223. margin-top: -5px;
  224. font-size: 8pt;
  225. line-height: 12pt;
  226. color: #5d5d5d; /*this is the color of the words of the disclaimer.*/
  227. float:center;
  228. text-align: justify;
  229. font-family:'roboto', sans-serif;
  230. letter-spacing:1px;
  231. }
  232.  
  233. #footer-site {
  234. font-weight: bold;
  235. text-transform: uppercase;
  236. }
  237.  
  238. #footer a {
  239. color: #d0465d; /*this is the color of the links of the disclaimer.*/
  240. font-weight: bold;
  241. }
  242.  
  243. #footer a:hover{
  244. color: #ffffff; /**this is the color of the disclaimer links hover.*/
  245. text-decoration: none;
  246. font-weight: bold;
  247. }
  248.  
  249. </style>
  250. </head>
  251.  
  252. <body>
  253.  
  254. <!-- TOPBAR LINKS -->
  255.  
  256. <div class="navi">
  257. <a href="/gallery">refresh</a>
  258. <a href="/ask">contact</a>
  259. <a href="/">back to lhs</a>
  260.  
  261. <!-- SOCIAL MEDIA LINKS -->
  262.  
  263. <font style="float:right;"><a href="http://twitter.com/luke5sos"><i class="fa fa-twitter"></i></a>
  264. <a href="http://instagram.com/luke_is_a_penquin"><i class="fa fa-instagram"></i></a>
  265. <a href="https://www.youtube.com/channel/UC-vKwDHcbPLtjml81ohGRng"><i class="fa fa-youtube-play"></i></a>
  266. <a href="http://5sos.com/"><i class="fa fa-globe"></i></a></font>
  267. </div>
  268.  
  269. <!-- HEADER IMAGE 1100X500px -->
  270.  
  271. <div class="header"><img src="http://static.tumblr.com/zy3qjic/NAnnrc7k4/h1.png"></div>
  272.  
  273.  
  274. <!-- CONTENT -->
  275.  
  276. <div class="container">
  277.  
  278. <!-- CATEGORY -->
  279.  
  280. <h1>Candids 2015</h1>
  281. <center>
  282.  
  283.  
  284. <!-- TO ADD A NEW CATEGORY JUST COPY AND PASTE STARTING FROM HERE -->
  285. <div class="content">
  286. <img src="http://static.tumblr.com/zy3qjic/27anrfsur/12.png"> <!-- PREVIEW IMAGE -->
  287. <a href="/tagged/10072015hq"><div class="hover"><center><div class="desc">Arriving in Los Angeles.</div></center></div></a>
  288. <center><div class="date">july 10</div></center>
  289. </div>
  290. <!-- ENDING HERE -->
  291.  
  292. <div class="content">
  293. <img src="http://static.tumblr.com/zy3qjic/HDjnrfsvo/1.png">
  294. <a href="http://hotdamn5sos.minus.com/mbqbc9IgGD4Esb"><div class="hover"><center><div class="desc">Arriving in Brisbane.</div></center></div></a>
  295. <center><div class="date">june 23</div></center>
  296. </div>
  297.  
  298. <div class="content">
  299. <img src="http://static.tumblr.com/zy3qjic/wiFnrfsw2/2.png">
  300. <a href="/tagged/17062015hq"><div class="hover"><center><div class="desc">Out and about in Auckland.</div></center></div></a>
  301. <center><div class="date">june 17</div></center>
  302. </div>
  303.  
  304. <div class="content">
  305. <img src="http://static.tumblr.com/zy3qjic/7Qrnrfsxf/3.png">
  306. <a href="http://hotdamn5sos.minus.com/m3qiAEPT566G1"><div class="hover"><center><div class="desc">Leaving Mahiki in London.</div></center></div></a>
  307. <center><div class="date">june 14</div></center>
  308. </div>
  309.  
  310. <div class="content">
  311. <img src="http://static.tumblr.com/zy3qjic/3gmnrfsz7/4.png">
  312. <a href="/tagged/25052015"><div class="hover"><center><div class="desc">Leaving Mahiki in London.</div></center></div></a>
  313. <center><div class="date">may 25</div></center>
  314. </div>
  315.  
  316. <div class="content">
  317. <img src="http://static.tumblr.com/zy3qjic/28Qnrfszj/5.png">
  318. <a href="/tagged/24042015"><div class="hover"><center><div class="desc">Leaving Mahiki in London.</div></center></div></a>
  319. <center><div class="date">april 24</div></center>
  320. </div>
  321.  
  322. <div class="content">
  323. <img src="http://static.tumblr.com/zy3qjic/sgMnrft03/6.png">
  324. <a href="/tagged/13042015"><div class="hover"><center><div class="desc">Arriving in Sydney.</div></center></div></a>
  325. <center><div class="date">april 13</div></center>
  326. </div>
  327.  
  328. <div class="content">
  329. <img src="http://static.tumblr.com/zy3qjic/Naqnrft13/7.png">
  330. <a href="/tagged/04042015"><div class="hover"><center><div class="desc">Leaving the Nice Guy.</div></center></div></a>
  331. <center><div class="date">april 04</div></center>
  332. </div>
  333.  
  334.  
  335.  
  336. <div class="content">
  337. <img src="http://static.tumblr.com/zy3qjic/uQ6nrft1w/8.png">
  338. <a href="/tagged/02032015"><div class="hover"><center><div class="desc">Arriving at LAX.</div></center></div></a>
  339. <center><div class="date">march 02</div></center>
  340. </div>
  341.  
  342.  
  343. <div class="content">
  344. <img src="http://static.tumblr.com/zy3qjic/kHinrft2k/9.png">
  345. <a href="/tagged/22022015"><div class="hover"><center><div class="desc">Arriving in Japan.</div></center></div></a>
  346. <center><div class="date">february 22</div></center>
  347. </div>
  348.  
  349. <div class="content">
  350. <img src="http://static.tumblr.com/zy3qjic/7Qdnrft35/10.png">
  351. <a href="/tagged/29012015"><div class="hover"><center><div class="desc">Arriving at LAX.</div></center></div></a>
  352. <center><div class="date">january 29</div></center>
  353. </div>
  354.  
  355. <div class="content">
  356. <img src="http://static.tumblr.com/zy3qjic/687nrft3k/11.png">
  357. <a href="/tagged/10012015"><div class="hover"><center><div class="desc">Leaving The Island in Sydney.</div></center></div></a>
  358. <center><div class="date">january 10</div></center>
  359. </div>
  360.  
  361.  
  362. </div>
  363.  
  364. <!-- DISCLAIMER -->
  365.  
  366. <div id="footer"> <div id="footer-content"> <div id="footer-align"> <div id="footer-title">© lukehemmosource <font style="float:right;">© Designed by <a href="http://clumhood.tumblr.com/">CLUMHOOD</a></font> </div> <div class="footer-content"><b>Disclaimer:</b> We do not claim any ownership for any type of multimedia content posted unless stated otherwise. The information on this blog is copyright to its respectful owners. If there's any content posted that belongs to you and you do not wish for it to appear on this site, please message us with the link of the post you'd like to be removed. We're in no way affiliated with Luke, the rest of the 5SOS boys, friends, family or management. </div> </div> </div> </div></div>
  367.  
  368. </body>
  369. </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!