API tools faq
paste
Advertisement
luciam

Network #1

luciam
Oct 9th, 2014
7,994
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.42 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <!-------------------------------------------------
  4. NETWORK PAGE #01 BY:
  5.  
  6. http://phoenixthemes.tumblr.com
  7. http://robbarya.tumblr.com (INSTRUCTIONS IN CODE)
  8. ...................................................
  9. ...................................................
  10.  
  11. TERMS OF USE:
  12. - DON'T CLAIM AS YOUR OWN
  13. - DON'T REMOVE OR MOVE THE CREDIT
  14. - DON'T REDISTRIBUTE
  15. - DON'T USE AS A BASE. YOU CAN EDIT IT AS MUCH AS YOU LIKE AS LONG AS THE CREDIT IS STILL IN ITS ORIGINAL PLACE- Thank you
  16. --------------------------------------------->
  17.  
  18.  
  19. <!--- Instructions here:
  20. Press ctrl+f (cmd+f in mac) and in the searchbox that appears type:
  21. Color: to get to the spots to change all the colors
  22. Title: to change the titles
  23. Description: to change descriptions
  24. Image: to change the images
  25. Link: to change links
  26. Member: to customize the newtwork members
  27. ----->
  28.  
  29. <title>Network</title> <!--Title: browser title--->
  30. <link rel="shortcut icon" href="{Favicon}" />
  31.  
  32.  
  33. <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'><script src="http://code.jquery.com/jquery-latest.min.js"></script>
  34. <script type="text/javascript" src="http://static.tumblr.com/d4tdea8/bWOnd58a6/jquery.diamonds.js"></script>
  35.  
  36. <head>
  37.  
  38.  
  39. <style type="text/css">
  40.  
  41. /*-------------------------------SCROLL----------------------------------*/
  42.  
  43. ::-webkit-scrollbar-thumb:vertical {
  44. border-left: 1px solid #999; /*Color:scrollbar*/
  45. background:transparent;
  46. height:5px;
  47. }
  48.  
  49. ::-webkit-scrollbar-thumb:horizontal {
  50. border-top: 1px solid #999;/*Color:scrollbar*/
  51. background:transparent;
  52. height:3px;
  53. }
  54.  
  55. ::-webkit-scrollbar-corner {
  56. background-color: transparent;
  57. }
  58.  
  59. ::-webkit-scrollbar {
  60. background-color: transparent;
  61. height:2px;
  62. width:5px;
  63. }
  64.  
  65.  
  66. * {
  67. -webkit-transition: all 0.4s ease-out;
  68. -moz-transition: all 0.4s ease-out;
  69. -ms-transition: all 0.4s ease-out;
  70. -o-transition: all 0.4s ease-out;
  71. transition: all 0.4s ease-out;
  72. }
  73.  
  74.  
  75. body {
  76. background-color:#eee;/*Color:background*/
  77. background-image:url(''); /*Image: background*/
  78. font-family: consolas, calibri;
  79. font-size:10px;
  80. letter-spacing:0.2em;
  81. }
  82.  
  83. a, a:active, a:visited {
  84. text-decoration:none;
  85. }
  86.  
  87. a:hover {
  88. text-decoration:underline;
  89. }
  90.  
  91. header {
  92. width:50%;
  93. height:100px;
  94. margin: 20px auto 0px auto;
  95. padding:20px;
  96. background:#fff;/*Color: header*/
  97. }
  98.  
  99. header:after {
  100. display:block;
  101. content:"";
  102. width: 0;
  103. height: 0;
  104. margin:30px auto;
  105. border-style: solid;
  106. border-width: 50px 50px 0 50px;
  107. border-color: #fff transparent transparent transparent; /*Color: header arrow (don't change the transparents)*/
  108.  
  109. }
  110.  
  111. nav {
  112. display:block;
  113. width: 100%;
  114. margin: 5px auto;
  115. text-align:center;
  116. }
  117.  
  118. nav a {
  119. text-transform:uppercase;
  120. color: #666;/*Color: header links*/
  121. letter-spacing:0.2em;
  122. font-size: 8px;
  123. font-weight:bold;
  124. margin-right:10px;
  125. }
  126.  
  127. nav a:hover {
  128. color: #333;/*Color: header links hover*/
  129. }
  130.  
  131. #title {
  132. font-family: 'Ubuntu Condensed', consolas, sans-serif;
  133. font-size:20px;
  134. letter-spacing: 0.3em;
  135. width: 100%;
  136. text-align:center;
  137. margin:10px auto 0 auto;
  138. text-transform:uppercase;
  139. color: #333; /*Color:title*/
  140. }
  141.  
  142. #description {
  143. width: 60%;
  144. margin: 10px auto;
  145. text-align:center;
  146. font-size:8px;
  147. color:#666; /*Color: description*/
  148. }
  149.  
  150. #blogroll {
  151. width: 80%;
  152. margin: 10px auto;
  153. text-align:center;
  154. }
  155.  
  156. .imagedesc {
  157. width:0px;
  158. height:0px;
  159. margin-top:50%;
  160. margin-left:50%;
  161. background: rgba(0,0,0,0.6); /*Color: member description background. Use a rgba color if you want opacity.*/
  162. margin-bottom:0px;
  163. z-index:23123123;
  164. position:absolute;
  165. opacity:0;
  166. -ms-transform: rotate(45deg);
  167. -webkit-transform: rotate(45deg);
  168. transform: rotate(45deg);
  169. }
  170.  
  171. .imagecontainer:hover img{
  172. width:220px;
  173. height:220px;
  174. }
  175.  
  176. .imagecontainer:hover .imagedesc {
  177. width:150px;
  178. height:150px;
  179. opacity:1;
  180. margin-top:20px;
  181. margin-left:20px;
  182. }
  183.  
  184. .imagecontainer figcaption {
  185. width:140px;
  186. height:140px;
  187. -ms-transform: rotate(-45deg);
  188. -webkit-transform: rotate(-45deg);
  189. transform: rotate(-45deg);
  190. margin:15px 0px 0px 20px;
  191. text-align:center;
  192. padding:10px;
  193. overflow:hidden;
  194. white-space:normal;
  195. }
  196.  
  197. .imagecontainer .name {
  198. display:block;
  199. font-family:'Ubuntu Condensed', consolas, sans-serif;
  200. font-size:16px;
  201. text-transform:uppercase;
  202. color: #fff; /*Color: member name*/
  203. }
  204.  
  205. .imagecontainer .desc {
  206. display:block;
  207. margin-top:12px;
  208. font-size:8px;
  209. color:#fff; /*Color: member description*/
  210. }
  211.  
  212. .imagecontainer a {
  213. display:block;
  214. margin-top:15px;
  215. font-size:8px;
  216. color:#fff; /*Color: member url*/
  217. text-transform:uppercase;
  218. }
  219.  
  220. .diamonds {
  221. text-align: center;
  222. overflow: visible;
  223. white-space: nowrap;
  224. display: inline-block;
  225. }
  226.  
  227. .diamond-row-wrap {
  228. text-align: center;
  229. position: relative;
  230. float: left;
  231. clear: both;
  232. }
  233. .diamond-row-upper, .diamond-row-lower {
  234. overflow: visible;
  235. clear: both;
  236. width: 100%;
  237. }
  238. .diamond-row-lower {
  239. position: absolute;
  240. bottom: 0;
  241. }
  242. .diamond-row-lower .diamond-box {
  243. margin-left: 64.644660941%;
  244. margin-top: 64.644660941%;
  245. }
  246.  
  247. .diamond-box-wrap {
  248. float: left;
  249. width: 150px;
  250. height: 150px;
  251. }
  252.  
  253. .diamond-box {
  254. -webkit-transform: rotate(45deg);
  255. -moz-transform: rotate(45deg);
  256. -ms-transform: rotate(45deg);
  257. transform: rotate(45deg);
  258.  
  259. -webkit-box-sizing: border-box;
  260. -moz-box-sizing: border-box;
  261. -ms-box-sizing: border-box;
  262. box-sizing: border-box;
  263.  
  264. overflow: hidden;
  265.  
  266. position: relative;
  267. z-index: 1;
  268.  
  269. width: 70.710678118%;
  270. height: 70.710678118%;
  271. margin: 14.644660941%;
  272.  
  273. border: 1px solid transparent;
  274. }
  275.  
  276. .diamond-box-inner {
  277. -webkit-transform: rotate(-45deg);
  278. -moz-transform: rotate(-45deg);
  279. -ms-transform: rotate(-45deg);
  280. transform: rotate(-45deg);
  281.  
  282. -webkit-transform-origin: center center;
  283. -moz-transform-origin: center center;
  284. -ms-transform-origin: center center;
  285. transform-origin: center center;
  286.  
  287. -webkit-box-sizing: border-box;
  288. -moz-box-sizing: border-box;
  289. -ms-box-sizing: border-box;
  290. box-sizing: border-box;
  291.  
  292. width: 141.421356237%;
  293. height: 141.421356237%;
  294. margin: -20.7106781185% 0 0 -20.7106781185%;
  295. }
  296.  
  297. .diamonds {
  298. text-align: center;
  299. overflow: visible;
  300. white-space: nowrap;
  301. display: inline-block;
  302. }
  303.  
  304. .diamonds img {
  305. width: 200px;
  306. height:200px;
  307. }
  308.  
  309.  
  310. </style>
  311. </head>
  312. <body>
  313.  
  314. <header>
  315. <div id="title">newtwork</div><!--Title: main-->
  316.  
  317. <nav>
  318. <a href="/">home</a> <!--Link: -->
  319. <a href="http://tumblr.com/dashboard">dashboard</a> <!--Link: -->
  320. <a href="/">link 1</a><!--Link: -->
  321. <a href="/">link 2</a><!--Link: -->
  322. <a href="/">link 3</a><!--Link: -->
  323.  
  324. <a href="http://robbarya.tumblr.com">credit</a>
  325. </nav>
  326.  
  327. <div id="description">When you play the game of thrones you win or you die, there's no middle ground</div> <!--Description: main page description -->
  328. </header>
  329.  
  330. <div id="blogroll">
  331.  
  332. <!--Member: 1-->
  333. <figure>
  334. <div class="imagecontainer">
  335. <div class="imagedesc">
  336. <figcaption>
  337. <span class="name">arya</span> <!--Name--->
  338. <span class="desc">Swift as a deer. Quiet as a shadow. Fear cuts deeper than swords.</span> <!--Description: --->
  339. <a href="http://blogname.tumblr.com">Blog name</a> <!--Link: Member blog--->
  340. </figcaption>
  341. </div>
  342. <img src="http://static.tumblr.com/d4tdea8/rwind5u4m/as_copia.jpg" /> <!--Image: Member blog--->
  343. </div>
  344. </figure>
  345. <!--End Member: 1-->
  346.  
  347. <!--Member: 2-->
  348. <figure>
  349. <div class="imagecontainer">
  350. <div class="imagedesc">
  351. <figcaption>
  352. <span class="name">Jon</span>
  353. <span class="desc">Kill the boy, Jon Snow. Winter is almost upon us. Kill the boy and let the man be born</span>
  354. <a href="http://blogname.tumblr.com">Blog name</a>
  355. </figcaption>
  356. </div>
  357. <img alt="" src="http://static.tumblr.com/d4tdea8/xixnd5u9o/network-3.jpg" />
  358. </div>
  359. </figure>
  360. <!--End Member: 2-->
  361. <!--Starts at <figure> and ends at </figure>, delete or add as many as you want--->
  362.  
  363. <figure>
  364. <div class="imagecontainer">
  365. <div class="imagedesc">
  366. <figcaption>
  367. <span class="name">Jaime</span>
  368. <span class="desc">There are no men like me. There's only me</span>
  369. <a href="http://blogname.tumblr.com">Blog name</a>
  370. </figcaption>
  371. </div>
  372. <img alt="" src="http://static.tumblr.com/d4tdea8/wVAnd5tef/network-tumblr-1_copia.jpg" /></div></figure>
  373.  
  374.  
  375. <figure>
  376. <div class="imagecontainer">
  377. <div class="imagedesc">
  378. <figcaption>
  379. <span class="name">Daenerys</span>
  380. <span class="desc">He was no dragon. Fire cannot kill a dragon</span>
  381. <a href="http://blogname.tumblr.com">Blog name</a>
  382. </figcaption>
  383. </div>
  384. <img src="http://static.tumblr.com/d4tdea8/jktnd5ugx/network-4.jpg" /></div></figure>
  385.  
  386.  
  387. <figure>
  388. <div class="imagecontainer">
  389. <div class="imagedesc">
  390. <figcaption>
  391. <span class="name">Catelyn</span>
  392. <span class="desc">Laughter is poison to fear.</span>
  393. <a href="http://blogname.tumblr.com">Blog name</a>
  394. </figcaption>
  395. </div>
  396. <img src="http://static.tumblr.com/d4tdea8/7YFnd5up9/network-5.jpg" /></div></figure>
  397.  
  398. <figure>
  399. <div class="imagecontainer">
  400. <div class="imagedesc">
  401. <figcaption>
  402. <span class="name">Melisandre</span>
  403. <span class="desc">Soon comes the cold, and the night that never ends</span>
  404. <a href="http://blogname.tumblr.com">Blog name</a>
  405. </figcaption>
  406. </div>
  407. <img alt="" src="http://static.tumblr.com/d4tdea8/680nd5uou/network-6.jpg" /></div></figure>
  408.  
  409. <figure>
  410. <div class="imagecontainer">
  411. <div class="imagedesc">
  412. <figcaption>
  413. <span class="name">Arry</span>
  414. <span class="desc">I wish I was home</span>
  415. <a href="http://blogname.tumblr.com">Blog name</a>
  416. </figcaption>
  417. </div>
  418. <img src="http://static.tumblr.com/d4tdea8/rwind5u4m/as_copia.jpg" />
  419. </div>
  420. </figure>
  421.  
  422.  
  423.  
  424.  
  425. </div>
  426.  
  427. <script>
  428. $("#blogroll").diamonds({
  429. size : 250,
  430. gap : 20,
  431. hideIncompleteRow : false,
  432. autoRedraw : true,
  433. itemSelector : ".imagecontainer"
  434. });
  435. </script>
  436.  
  437. <!-----SCRIPT CREDIT: http://www.jqueryscript.net/layout/Fancy-Responsive-jQuery-Diamond-Layout-Plugin-diamonds-js.html
  438.  
  439. IMAGES CREDIT: http://etienne-ripzaad.deviantart.com/------->
  440.  
  441. </body>
  442. </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!