API tools faq
paste
bychloethemes

Network Theme 1 - by Chloe

bychloethemes
May 18th, 2015
486
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.51 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--Network Theme 1 by Chloe | @bychloethemes.
  4. Don't be a douche and delete the credit-->
  5. <head>
  6. <meta name="image:Background" content="" />
  7. <meta name="image:Header" content=""/>
  8. <meta name="image:1" content="" />
  9. <meta name="image:2" content="" />
  10. <meta name="image:3" content="" />
  11. <meta name="image:4" content="" />
  12. <meta name="image:5" content="" />
  13. <meta name="image:6" content="" />
  14. <meta name="image:7" content="" />
  15. <meta name="image:8" content="" />
  16. <meta name="image:9" content="" />
  17. <meta name="image:10" content="" />
  18. <meta name="image:11" content="" />
  19. <meta name="image:12" content="" />
  20. <meta name="color:Background" content="#fff" />
  21. <meta name="color:Text" content="#000" />
  22. <meta name="font:Body" content='verdana,sans-serif'/>
  23. <meta name="if:Tiled Background" content="0" />
  24. <meta name="if:Header Image" content="0" />
  25. <meta name="if:Show Description" content="0" />
  26. <meta name="if:No Member Descriptions" contetn="0" />
  27. <meta name="if:4 per Row" content="0" />
  28. <meta name="if:4 Members" content="0" />
  29. <meta name="if:6 Members" content="0" />
  30. <meta name="if:8 Members" content="0" />
  31. <meta name="if:9 Members" content="0" />
  32. <meta name="if:12 Members" content="0" />
  33. <meta name="text:R Value" content="0" />
  34. <meta name="text:G Value" content="0" />
  35. <meta name="text:B Value" content="0" />
  36. <meta name="text:Username 1" content="" />
  37. <meta name="text:Link 1" content="" />
  38. <meta name="text:Description 1" content="" />
  39. <meta name="text:Username 2" content="" />
  40. <meta name="text:Link 2" content="" />
  41. <meta name="text:Description 2" content="" />
  42. <meta name="text:Username 3" content="" />
  43. <meta name="text:Link 3" content="" />
  44. <meta name="text:Description 3" content="" />
  45. <meta name="text:Username 4" content="" />
  46. <meta name="text:Link 4" content="" />
  47. <meta name="text:Description 4" content="" />
  48. <meta name="text:Username 5" content="" />
  49. <meta name="text:Link 5" content="" />
  50. <meta name="text:Description 5" content="" />
  51. <meta name="text:Username 6" content="" />
  52. <meta name="text:Link 6" content="" />
  53. <meta name="text:Description 6" content="" />
  54. <meta name="text:Username 7" content="" />
  55. <meta name="text:Link 7" content="" />
  56. <meta name="text:Description 7" content="" />
  57. <meta name="text:Username 8" content="" />
  58. <meta name="text:Link 8" content="" />
  59. <meta name="text:Description 8" content="" />
  60. <meta name="text:Username 9" content="" />
  61. <meta name="text:Link 9" content="" />
  62. <meta name="text:Description 9" content="" />
  63. <meta name="text:Username 10" content="" />
  64. <meta name="text:Link 10" content="" />
  65. <meta name="text:Description 01" content="" />
  66. <meta name="text:Username 11" content="" />
  67. <meta name="text:Link 11" content="" />
  68. <meta name="text:Description 11" content="" />
  69. <meta name="text:Username 12" content="" />
  70. <meta name="text:Link 12" content="" />
  71. <meta name="text:Description 12" content="" />
  72. {block:Description}
  73. <meta name="description" content="{MetaDescription}" />
  74. {/block:Description}
  75. <meta charset="utf-8">
  76. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  77. <title>{Title}</title>
  78. <link rel="shortcut icon" href="{Favicon}">
  79. <script src="https://dl.dropboxusercontent.com/s/o9k67nbw3tvczys/modernizr.custom.97074.js?dl=0"></script>
  80. <style type="text/css">
  81. body {
  82. background: {color:Background} url('{image:Background}'){block:IfNotTiledBackground}no-repeat center center fixed;
  83. -webkit-background-size: cover;
  84. -moz-background-size: cover;
  85. -o-background-size: cover;
  86. background-size: cover;
  87. {/block:IfNotTiledBackground}
  88. {block:IfTiledBackground}
  89. repeat;
  90. background-attachment:fixed;
  91. {/block:IfTiledBackground}
  92. color: {color:Text};
  93. font-family: {font:Body};
  94. font-size: 0.7em;
  95. margin: 0;
  96. padding: 0;
  97. }
  98. h1 {
  99. margin: 30px 50px 0px 50px;
  100. padding: 0;
  101. font-size: 100px;
  102. text-align: center;
  103. text-shadow:
  104. 0 0 1px #fff,
  105. 0 1px 2px rgba(0,0,0,0.7);
  106. font-family: 'Open Sans', Arial, sans-serif;
  107. }
  108. header p {
  109. width:500px;
  110. margin:20px auto;
  111. font-size:30px;
  112. }
  113.  
  114. a:link, a:visited {
  115. color: {color:Text};
  116. text-decoration:none;
  117. }
  118.  
  119. a:hover {
  120. color: {color:Text};
  121. text-decoration:none;
  122. font-style:italic;
  123. }
  124. header {
  125. width:900px;
  126. margin: 30px auto;
  127. }
  128. header img {
  129. width:100%;
  130. }
  131. .main {
  132. {block:IfNot4perRow}
  133. width: 800px;
  134. {/block:IfNot4perRow}
  135. {block:If4perRow}
  136. width: 1100px;
  137. {/block:If4perRow}
  138. margin: 0px auto 50px auto;
  139. }
  140. .ch-grid {
  141. padding: 0;
  142. list-style: none;
  143. display: block;
  144. text-align: center;
  145. width: 100%;
  146. }
  147.  
  148. .ch-grid:after,
  149. .ch-item:before {
  150. content: '';
  151. display: table;
  152. }
  153.  
  154. .ch-grid:after {
  155. clear: both;
  156. }
  157.  
  158. .ch-grid li {
  159. width: 220px;
  160. height: 220px;
  161. display: inline-block;
  162. margin: 20px;
  163. }
  164. .ch-item {
  165. width: 100%;
  166. height: 100%;
  167. border-radius: 50%;
  168. position: relative;
  169. cursor: default;
  170. box-shadow:
  171. inset 0 0 0 0 rgba({text:R Value},{text:G Value},{text:B Value}, 0.6),
  172. inset 0 0 0 12px rgba(255,255,255,0.4),
  173. 0 1px 2px rgba(0,0,0,0.1);
  174.  
  175. -webkit-transition: all 0.4s ease-in-out;
  176. -moz-transition: all 0.4s ease-in-out;
  177. -o-transition: all 0.4s ease-in-out;
  178. -ms-transition: all 0.4s ease-in-out;
  179. transition: all 0.4s ease-in-out;
  180. border:3px solid #fff;
  181. }
  182.  
  183. .ch-img-1 {
  184. background-image: url('{Image:1}');
  185. }
  186.  
  187. .ch-img-2 {
  188. background-image: url('{Image:2}');
  189. }
  190.  
  191. .ch-img-3 {
  192. background-image: url('{Image:3}');
  193. }
  194.  
  195. .ch-img-4 {
  196. background-image: url('{Image:4}');
  197. }
  198.  
  199. .ch-img-5 {
  200. background-image: url('{Image:5}');
  201. }
  202.  
  203. .ch-img-6 {
  204. background-image: url('{Image:6}');
  205. }
  206.  
  207. .ch-img-7 {
  208. background-image: url('{Image:7}');
  209. }
  210.  
  211. .ch-img-8 {
  212. background-image: url('{Image:8}');
  213. }
  214.  
  215. .ch-img-9 {
  216. background-image: url('{Image:9}');
  217. }
  218.  
  219. .ch-img-10 {
  220. background-image: url('{Image:10}');
  221. }
  222.  
  223. .ch-img-11 {
  224. background-image: url('{Image:11}');
  225. }
  226.  
  227. .ch-img-12 {
  228. background-image: url('{Image:12}');
  229. }
  230.  
  231. .ch-info {
  232. position: absolute;
  233. width: 100%;
  234. height: 100%;
  235. border-radius: 50%;
  236. opacity: 0;
  237.  
  238. -webkit-transition: all 0.4s ease-in-out;
  239. -moz-transition: all 0.4s ease-in-out;
  240. -o-transition: all 0.4s ease-in-out;
  241. -ms-transition: all 0.4s ease-in-out;
  242. transition: all 0.4s ease-in-out;
  243.  
  244. -webkit-transform: scale(0);
  245. -moz-transform: scale(0);
  246. -o-transform: scale(0);
  247. -ms-transform: scale(0);
  248. transform: scale(0);
  249.  
  250. -webkit-backface-visibility: hidden; /*for a smooth font */
  251.  
  252. }
  253.  
  254. .ch-info h3 {
  255. color: {color:Text};
  256. text-transform: uppercase;
  257. position: relative;
  258. letter-spacing: 2px;
  259. font-size: 22px;
  260. margin: 0 30px;
  261. {block:IfNotNoMemberDescriptions}
  262. padding: 85px 0 0 0;
  263. {/block:IfNotNoMemberDescriptions}
  264. {block:IfNoMemberDescriptions}
  265. padding: 95px 0 0 0;
  266. {/block:IfNoMemberDescriptions}
  267. font-family: 'Open Sans', Arial, sans-serif;
  268. text-shadow:
  269. 0 0 1px #fff,
  270. 0 1px 2px rgba(0,0,0,0.3);
  271. }
  272.  
  273. .ch-info a:link, .ch-info a:visited {
  274. color: {color:Text};
  275. text-decoration:none;
  276. }
  277.  
  278. .ch-info a:hover {
  279. color: {color:Text};
  280. text-decoration:none;
  281. font-style:italic;
  282. }
  283.  
  284. .ch-info p {
  285. color: {color:Text};
  286. padding: 10px 5px;
  287. font-style: italic;
  288. margin: 0 30px;
  289. font-size: 12px;
  290. border-top: 1px solid {color:Text};
  291. }
  292.  
  293. .ch-item:hover {
  294. box-shadow:
  295. inset 0 0 0 110px rgba({text:R Value},{text:G Value},{text:B Value},0.6),
  296. inset 0 0 0 12px rgba(255,255,255,0.6),
  297. 0 1px 2px rgba(0,0,0,0.1);
  298. }
  299.  
  300. .ch-item:hover .ch-info {
  301. opacity: 1;
  302.  
  303. -webkit-transform: scale(1);
  304. -moz-transform: scale(1);
  305. -o-transform: scale(1);
  306. -ms-transform: scale(1);
  307. transform: scale(1);
  308. }
  309. </style>
  310. </head>
  311. <body>
  312. <header>
  313. {block:IfHeaderImage}
  314. <img src="{Image:Header}">
  315. {/block:IfHeaderImage}
  316. {block:IfNotHeaderImage}
  317. <h1>{Title}</h1>
  318. {/block:IfNotHeaderImage}
  319. {block:IfShowDescription}
  320. <p>{Description}</p>
  321. {/block:IfShowDescription}
  322. </header>
  323. <section class="main">
  324.  
  325. <ul class="ch-grid">
  326. <li>
  327. <div class="ch-item ch-img-1">
  328. <div class="ch-info">
  329. <h3><a href="{Link 1}">{text:Username 1}</a></h3>
  330. {block:IfNotNoMemberDescriptions}<p>{text:Description 1}</p>{/block:IfNotNoMemberDescriptions}
  331. </div>
  332. </div>
  333. </li>
  334. <li>
  335. <div class="ch-item ch-img-2">
  336. <div class="ch-info">
  337. <h3><a href="{Link 2}">{text:Username 2}</a></h3>
  338. {block:IfNotNoMemberDescriptions}<p>{text:Description 2}</p>{/block:IfNotNoMemberDescriptions}
  339. </div>
  340. </div>
  341. </li>
  342. <li>
  343. <div class="ch-item ch-img-3">
  344. <div class="ch-info">
  345. <h3><a href="{Link 3}">{text:Username 3}</a></h3>
  346. {block:IfNotNoMemberDescriptions}<p>{text:Description 3}</p>{/block:IfNotNoMemberDescriptions}
  347. </div>
  348. </div>
  349. </li>
  350. {block:If4Members}
  351. <li>
  352. <div class="ch-item ch-img-4">
  353. <div class="ch-info">
  354. <h3><a href="{Link 4}">{text:Username 4}</a></h3>
  355. {block:IfNotNoMemberDescriptions}<p>{text:Description 4}</p>{/block:IfNotNoMemberDescriptions}
  356. </div>
  357. </div>
  358. </li>
  359. {/block:If4Members}
  360.  
  361. {block:If6Members}
  362. <li>
  363. <div class="ch-item ch-img-5">
  364. <div class="ch-info">
  365. <h3><a href="{Link 5}">{text:Username 5}</a></h3>
  366. {block:IfNotNoMemberDescriptions}<p>{text:Description 5}</p>{/block:IfNotNoMemberDescriptions}
  367. </div>
  368. </div>
  369. </li>
  370. <li>
  371. <div class="ch-item ch-img-6">
  372. <div class="ch-info">
  373. <h3><a href="{Link 6}">{text:Username 6}</a></h3>
  374. {block:IfNotNoMemberDescriptions}<p>{text:Description 6}</p>{/block:IfNotNoMemberDescriptions}
  375. </div>
  376. </div>
  377. </li>
  378. {/block:If6Members}
  379.  
  380. {block:If8Members}
  381. <li>
  382. <div class="ch-item ch-img-7">
  383. <div class="ch-info">
  384. <h3><a href="{Link 7}">{text:Username 7}</a></h3>
  385. {block:IfNotNoMemberDescriptions}<p>{text:Description 7}</p>{/block:IfNotNoMemberDescriptions}
  386. </div>
  387. </div>
  388. </li>
  389. <li>
  390. <div class="ch-item ch-img-8">
  391. <div class="ch-info">
  392. <h3><a href="{Link 8}">{text:Username 8}</a></h3>
  393. {block:IfNotNoMemberDescriptions}<p>{text:Description 8}</p>{/block:IfNotNoMemberDescriptions}
  394. </div>
  395. </div>
  396. </li>
  397. {/block:If8Members}
  398.  
  399. {block:If9Members}
  400. <li>
  401. <div class="ch-item ch-img-9">
  402. <div class="ch-info">
  403. <h3><a href="{Link 9}">{text:Username 9}</a></h3>
  404. {block:IfNotNoMemberDescriptions}<p>{text:Description 9}</p>{/block:IfNotNoMemberDescriptions}
  405. </div>
  406. </div>
  407. </li>
  408. {/block:If9Members}
  409.  
  410. {block:If12Members}
  411. <li>
  412. <div class="ch-item ch-img-10">
  413. <div class="ch-info">
  414. <h3><a href="{Link 10}">{text:Username 10}</a></h3>
  415. {block:IfNotNoMemberDescriptions}<p>{text:Description 10}</p>{/block:IfNotNoMemberDescriptions}
  416. </div>
  417. </div>
  418. </li>
  419. <li>
  420. <div class="ch-item ch-img-11">
  421. <div class="ch-info">
  422. <h3><a href="{Link 11}">{text:Username 11}</a></h3>
  423. {block:IfNotNoMemberDescriptions}<p>{text:Description 11}</p>{/block:IfNotNoMemberDescriptions}
  424. </div>
  425. </div>
  426. </li>
  427. <li>
  428. <div class="ch-item ch-img-12">
  429. <div class="ch-info">
  430. <h3><a href="{Link 12}">{text:Username 12}</a></h3>
  431. {block:IfNotNoMemberDescriptions}<p>{text:Description 12}</p>{/block:IfNotNoMemberDescriptions}
  432. </div>
  433. </div>
  434. </li>
  435. {block:If12Members}
  436. </ul>
  437.  
  438. </section>
  439. </body>
  440. </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!