API tools faq
paste
Advertisement
cvndythemes

Network #01 - Page

cvndythemes
Sep 20th, 2016
2,822
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.01 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. >> ETHEREAL THEMES // NETWORK PAGE #01
  4.  
  5. Designed by etherealthemes
  6. etherealthemes.tumblr.com
  7. ⓒ 2016 - 2017
  8.  
  9. >> TERMS OF USE
  10.  
  11. Do NOT remove the credit
  12. Do NOT claim as your own
  13.  
  14. *You can move the credit, but leave it visible
  15. *Edit as much as you'd like
  16. *Feel free to ask about basic customization
  17. *Theme suggestions always welcomed
  18.  
  19. >> EXTRAS
  20.  
  21. Fonts by Google Fonts
  22. Icons by FontAwesome
  23.  
  24. NOTE:
  25. This page will auto center and auto align the characters. While editing, the characters might be mis-aligned. Once you go to yoururl.tumblr.com/page the characters will auto-fill the screen depending on the screen size that's being used to view.
  26.  
  27. Inverting Tumblr Controls - Search "Tumblr Controls" and delete the second code with the invert settings.
  28.  
  29. To change colors, press CTRL+F and "search for" the original hex code. Then change the color with the "replace with" to change all the associated colors. Then you can go through and tweak individual colors. This just makes it easier to go from light to dark without having to go through each color.
  30.  
  31. COLOR CHEATSHEET:
  32. Pink - Topbar Title - #f3b9cf
  33. Grey - Topbar border hover - Member name - #b6b6b6
  34. Black - Text - #000000
  35.  
  36. -->
  37.  
  38. <!DOCTYPE html>
  39. <html>
  40. <title> TITLE HERE </title>
  41.  
  42. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  43.  
  44. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  45.  
  46. <link href='https://fonts.googleapis.com/css?family=Open+Sans|Josefin+Sans:400,700i' rel='stylesheet' type='text/css'>
  47.  
  48. <style type="text/css">
  49.  
  50. /* --- Scrollbar --- */
  51.  
  52. ::-webkit-scrollbar {width:7px;background-color:#ffffff;}
  53. ::-webkit-scrollbar-thumb {background-color:;}
  54.  
  55. /* --- General --- */
  56.  
  57. body {
  58. margin:0px;
  59. color:#000000;
  60. font-size:9px;
  61. letter-spacing:0px;
  62. background-color:#ffffff;
  63. font-family: 'Open Sans', sans-serif;
  64. }
  65.  
  66. p {
  67. text-align: justify;
  68. text-align-last: center!important;
  69. }
  70.  
  71. hr {
  72. display: block;
  73. margin-top: 0.5em;
  74. margin-bottom: 0.5em;
  75. margin-left: auto;
  76. margin-right: auto;
  77. border-style: inset;
  78. border-bottom: 1px;
  79. }
  80.  
  81. #et {
  82. background:transparent;
  83. color:#000000;
  84. background:transparent;
  85. right:0px;
  86. bottom:0px;
  87. padding:5px;
  88. position:fixed;
  89. letter-spacing:1px;
  90. opacity:0.4;
  91. }
  92.  
  93. #et a {
  94. color:#000000;
  95. text-decoration:none;
  96. border:0px;
  97. }
  98.  
  99. /* --- Tumblr Controls --- */
  100.  
  101. iframe.tmblr-iframe {
  102. z-index:5!important;
  103. top:0px!important;
  104. right:-10px!important;
  105. opacity:0.4!important;
  106. padding-right:10px;
  107. transform:scale(0.6);
  108. transform-origin:100% 0;
  109. -webkit-transform:scale(0.6);
  110. -webkit-transform-origin:100% 0;
  111. -o-transform:scale(0.6);
  112. -o-transform-origin:100% 0;
  113. -moz-transform:scale(0.6);
  114. -moz-transform-origin:100% 0;
  115. -ms-transform:scale(0.6);
  116. -ms-transform-origin:100% 0;
  117. }
  118.  
  119. iframe.tmblr-iframe {
  120. filter:invert(1);
  121. -webkit-filter:invert(1);
  122. -o-filter:invert(1);
  123. -moz-filter:invert(1);
  124. -ms-filter:invert(1);
  125. }
  126.  
  127.  
  128. /* Top Bar */
  129.  
  130. #topbar {
  131. background-color:#ffffff;
  132. top:0;
  133. left:0;
  134. width:100%;
  135. height:120px;
  136. position:fixed!important;
  137. z-index:3;
  138. text-align:center;
  139. }
  140.  
  141. .topbartitle {
  142. color:#f3b9cf;
  143. font-family: 'Josefin Sans', sans-serif;
  144. font-weight:700;
  145. font-style:italic;
  146. text-transform: uppercase;
  147. font-size:25px;
  148. text-align:center;
  149. margin-top:30px;
  150. margin-bottom:10px;
  151. }
  152.  
  153. a.topbarnavi, a.topbarnavi:visited {
  154. text-transform: uppercase;
  155. font-size:10px;
  156. text-decoration:none;
  157. letter-spacing:1px;
  158. color:#777777;
  159. padding:3px 10px 3px 10px;
  160. margin-left:3px;
  161. margin-right:3px;
  162. text-decoration:none;
  163. border-bottom:1px solid #ffffff;
  164. -webkit-transition: all 350ms linear;
  165. -moz-transition: all 350ms linear;
  166. -ms-transition: all 350ms linear;
  167. -o-transition: all 350ms linear;
  168. transition: all 350ms linear;
  169. }
  170.  
  171. a.topbarnavi:hover {
  172. color:#777777;
  173. border-bottom:1px solid #b6b6b6;
  174. }
  175.  
  176. /* --- Container --- */
  177.  
  178. #container {
  179. width: 80%;
  180. margin: 0 auto;
  181. }
  182.  
  183. #content {
  184. float:center;
  185. width: 100%!important;
  186. padding:5px;
  187. background:transparent;
  188. margin-top:130px!important;
  189. }
  190.  
  191. /* --- Member Boxes --- */
  192.  
  193. #memberbox {
  194. margin: 0 auto;
  195. width:140px;
  196. height:140px;
  197. display:inline-block;
  198. margin:0px 10px 20px 10px;
  199. background-size:100%;
  200. font-family: 'Open Sans', sans-serif;
  201. font-size:10px;
  202. color:#000;
  203. padding:5px;
  204. -webkit-transition: all 350ms ease-in-out;
  205. -moz-transition: all 350ms ease-in-out;
  206. -o-transition: all 350ms ease-in-out;
  207. }
  208. #memberimg {
  209. margin-top:-5px;
  210. margin-left:-5px;
  211. max-width:150px;
  212. max-height:150px;
  213. z-index:1;
  214. }
  215.  
  216. #memberbox:hover .memberinfo {opacity:1;}
  217.  
  218. .memberinfo {
  219. padding:5px;
  220. margin-top:-140px!important;
  221. margin-left:5px;
  222. width:120px;
  223. height:120px;
  224. text-align:center;
  225. font-family: 'Open Sans', sans-serif;
  226. background-color:#ffffff!important;
  227. z-index:2;
  228. position:absolute;
  229. overflow:scroll;
  230. opacity:0;
  231. -webkit-transition: all 350ms ease-in-out;
  232. -moz-transition: all 350ms ease-in-out;
  233. -o-transition: all 350ms ease-in-out;
  234. }
  235.  
  236. .memberinfo:hover {
  237. margin-top:-140px!important;
  238. margin-left:5px;
  239. opacity:1;
  240. width:120px;
  241. height:120px;
  242. -webkit-transition: all 350ms ease-in-out;
  243. Theia-transition: all 350ms ease-in-out;
  244. -o-transition: all 350ms ease-in-out;
  245. }
  246.  
  247. .memberinfo a {
  248. display:block;
  249. font-size:10px;
  250. color:#4a4a4a;
  251. text-transform:lowercase;
  252. font-style:italic;
  253. text-decoration:none;
  254. letter-spacing:1px;
  255. border:none;
  256. margin-bottom:3px;
  257. display:inline-block;
  258. padding:3px;
  259. width:90%;
  260. -webkit-transition: all 350ms ease-in-out;
  261. -moz-transition: all 350ms ease-in-out;
  262. -o-transition: all 350ms ease-in-out;
  263. }
  264.  
  265. .memberinfo a:hover {
  266. color:#777777;
  267. text-decoration:none;
  268. border:none;
  269. -webkit-transition: all 350ms ease-in-out;
  270. -moz-transition: all 350ms ease-in-out;
  271. -o-transition: all 350ms ease-in-out;
  272. }
  273.  
  274. /* --- Titles --- */
  275.  
  276. h2 {
  277. color:#b6b6b6;
  278. font-size:13px;
  279. font-style:italic;
  280. padding:5px;
  281. margin-top:0px;
  282. text-align:center;
  283. text-transform:uppercase;
  284. margin-bottom:0px!important;
  285. }
  286.  
  287. </style>
  288.  
  289.  
  290. </head>
  291. <body>
  292. <!-- Start Main Container -->
  293. <div id="container">
  294. <div id="content">
  295. <center>
  296.  
  297.  
  298. <!-- Start Member Box / copy from here -->
  299. <div id="memberbox">
  300. <div id="memberimg">
  301. <img src="http://68.media.tumblr.com/54a43d6414f2137e5725fafad4c74c63/tumblr_odhwo0pB811ucjeiho2_250.jpg" /> <!-- Member photo here -->
  302. </div>
  303.  
  304. <div class="memberinfo">
  305. <h2>Desirae</h2> <!-- Member name goes here -->
  306. <a href="http://charlesluciano.tumblr.com">charlesluciano</a>
  307.  
  308. <hr><!-- Adds a line break -->
  309.  
  310. <!-- Start Description -->
  311. <p>
  312. bang bang
  313. </p>
  314. <!-- End Description -->
  315.  
  316. </div></div>
  317. <!-- End Member Box / to here and paste below to duplicate -->
  318.  
  319.  
  320.  
  321.  
  322. <!-- Start Member Box / copy from here -->
  323. <div id="memberbox">
  324. <div id="memberimg">
  325. <img src="http://68.media.tumblr.com/efe62e6c1a6c6146f79cb65643f7dc61/tumblr_odhwo0pB811ucjeiho3_250.jpg" /> <!-- Member photo here -->
  326. </div>
  327.  
  328. <div class="memberinfo">
  329. <h2>Alyssa</h2> <!-- Member name goes here -->
  330. <a href="http://charlesluciano.tumblr.com">charlesluciano</a>
  331.  
  332. <hr><!-- Adds a line break -->
  333.  
  334. <!-- Start Description -->
  335. <p>
  336. Description goes here.
  337. </p>
  338. <!-- End Description -->
  339.  
  340. </div></div>
  341. <!-- End Member Box / to here and paste below to duplicate -->
  342.  
  343.  
  344.  
  345.  
  346. <!-- Start Member Box / copy from here -->
  347. <div id="memberbox">
  348. <div id="memberimg">
  349. <img src="http://68.media.tumblr.com/743a76c61c15f5356e307d34f51a1936/tumblr_odhwo0pB811ucjeiho4_250.jpg" /> <!-- Member photo here -->
  350. </div>
  351.  
  352. <div class="memberinfo">
  353. <h2>Sarah</h2> <!-- Member name goes here -->
  354. <a href="http://charlesluciano.tumblr.com">charlesluciano</a>
  355.  
  356. <hr><!-- Adds a line break -->
  357.  
  358. <!-- Start Description -->
  359. <p>
  360. Description goes here.
  361. </p>
  362. <!-- End Description -->
  363.  
  364. </div></div>
  365. <!-- End Member Box / to here and paste below to duplicate -->
  366.  
  367.  
  368.  
  369.  
  370. <!-- Start Member Box / copy from here -->
  371. <div id="memberbox">
  372. <div id="memberimg">
  373. <img src="http://68.media.tumblr.com/0e05ee725d9779c57e388c709ee13834/tumblr_odhwo0pB811ucjeiho8_250.jpg" /> <!-- Member photo here -->
  374. </div>
  375.  
  376. <div class="memberinfo">
  377. <h2>Michael</h2> <!-- Member name goes here -->
  378. <a href="http://charlesluciano.tumblr.com">charlesluciano</a>
  379.  
  380. <hr><!-- Adds a line break -->
  381.  
  382. <!-- Start Description -->
  383. <p>
  384. Description goes here.
  385. </p>
  386. <!-- End Description -->
  387.  
  388. </div></div>
  389. <!-- End Member Box / to here and paste below to duplicate -->
  390.  
  391.  
  392.  
  393. <!-- Start Member Box / copy from here -->
  394. <div id="memberbox">
  395. <div id="memberimg">
  396. <img src="http://68.media.tumblr.com/5d96dd33c3ff64c8e014fcad4aa012e7/tumblr_odhwo0pB811ucjeiho5_250.jpg" /> <!-- Member photo here -->
  397. </div>
  398.  
  399. <div class="memberinfo">
  400. <h2>Johnny</h2> <!-- Member name goes here -->
  401. <a href="http://charlesluciano.tumblr.com">charlesluciano</a>
  402.  
  403. <hr><!-- Adds a line break -->
  404.  
  405. <!-- Start Description -->
  406. <p>
  407. Description goes here.
  408. </p>
  409. <!-- End Description -->
  410.  
  411. </div></div>
  412. <!-- End Member Box / to here and paste below to duplicate -->
  413.  
  414.  
  415.  
  416.  
  417. <!-- Start Member Box / copy from here -->
  418. <div id="memberbox">
  419. <div id="memberimg">
  420. <img src="http://68.media.tumblr.com/763264b4d3184064948ec4192d078a7b/tumblr_odhwo0pB811ucjeiho1_250.jpg
  421. " /> <!-- Member photo here -->
  422. </div>
  423.  
  424. <div class="memberinfo">
  425. <h2>Amanda</h2> <!-- Member name goes here -->
  426. <a href="http://charlesluciano.tumblr.com">charlesluciano</a>
  427.  
  428. <hr><!-- Adds a line break -->
  429.  
  430. <!-- Start Description -->
  431. <p>
  432. Description goes here.
  433. </p>
  434. <!-- End Description -->
  435.  
  436. </div></div>
  437. <!-- End Member Box / to here and paste below to duplicate -->
  438.  
  439.  
  440.  
  441.  
  442. <!-- Start Member Box / copy from here -->
  443. <div id="memberbox">
  444. <div id="memberimg">
  445. <img src="http://68.media.tumblr.com/6b84f80321b2cda2b50baddb70e892b8/tumblr_odhwo0pB811ucjeiho6_250.jpg" /> <!-- Member photo here -->
  446. </div>
  447.  
  448. <div class="memberinfo">
  449. <h2>Raelyn</h2> <!-- Member name goes here -->
  450. <a href="http://charlesluciano.tumblr.com">charlesluciano</a>
  451.  
  452. <hr><!-- Adds a line break -->
  453.  
  454. <!-- Start Description -->
  455. <p>
  456. Description goes here.
  457. </p>
  458. <!-- End Description -->
  459.  
  460. </div></div>
  461. <!-- End Member Box / to here and paste below to duplicate -->
  462.  
  463.  
  464.  
  465.  
  466.  
  467. <!-- Start Member Box / copy from here -->
  468. <div id="memberbox">
  469. <div id="memberimg">
  470. <img src="http://68.media.tumblr.com/dc57a68eb6d2cfff6bb246878a095f3d/tumblr_odhwo0pB811ucjeiho7_250.jpg" /> <!-- Member photo here -->
  471. </div>
  472.  
  473. <div class="memberinfo">
  474. <h2>Destiny</h2> <!-- Member name goes here -->
  475. <a href="http://charlesluciano.tumblr.com">charlesluciano</a>
  476.  
  477. <hr><!-- Adds a line break -->
  478.  
  479. <!-- Start Description -->
  480. <p>
  481. Description goes here.
  482. </p>
  483. <!-- End Description -->
  484.  
  485. </div></div>
  486. <!-- End Member Box / to here and paste below to duplicate -->
  487.  
  488. </center>
  489. </div></div></div>
  490. <!-- End Main Container -->
  491.  
  492. <!-- Start Topbar -->
  493. <div id="topbar">
  494.  
  495. <div class="topbartitle">Topbar Title</div>
  496.  
  497. <a class="topbarnavi" href="#">Link 1</a>
  498. <a class="topbarnavi" href="#">Link 2</a>
  499. <a class="topbarnavi" href="#">Link 3</a>
  500. <a class="topbarnavi" href="#">Link 4</a>
  501. <a class="topbarnavi" href="#">Link 5</a>
  502. <a class="topbarnavi" href="#">Link 6</a>
  503.  
  504. </div>
  505. <!-- End Topbar -->
  506.  
  507. <div id="et"><a href="http://etherealthemes.co.vu/"><i class="fa fa-paint-brush"></i></a></div>
  508.  
  509. </body>
  510. </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!