API tools faq
paste
fallenvvings

Congregation (pt. 1) [Network page #1)

fallenvvings
Apr 23rd, 2015
260
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html><head>
  2. <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  3. <title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. <style>
  7.  
  8. ::-webkit-scrollbar {width: 7px;height: 5px;}
  9. ::-webkit-scrollbar-track-piece {background-color: #2A90CC;}
  10. ::-webkit-scrollbar-thumb:horizontal {height: 3px; background-color: #042B43; border:1px solid #2A90CC;}
  11.  
  12. body {background-color:#A7DBF9;} /*background color*/
  13.  
  14. .out-c {
  15. width:1340px;
  16. height:305px;
  17. padding:5px;
  18. overflow:auto;
  19. margin-top:190px;
  20. background-color:#2A90CC; /*outline color of members box*/
  21. }
  22.  
  23. .in-c {
  24. width:10000px;
  25. height:300px;
  26. padding:5px;
  27. background-color:#68BDEF; /*background color of members box*/
  28. }
  29.  
  30. .pers {
  31. display:inline-block;
  32. padding:30px;
  33. -webkit-transition: all 0.5s ease-in-out;
  34. -moz-transition: all 0.5s ease-in-out;
  35. -o-transition: all 0.5s ease-in-out;
  36. }
  37.  
  38. .pers img{
  39. width:230px;
  40. height:230px;
  41. position: relative;
  42. -webkit-filter: grayscale(50%); /*you can take this line out or*/
  43. } /*you can change it to 0%*/
  44.  
  45. .perst {
  46. margin-top:-234px;
  47. padding:3px;
  48. font-family:corbel; /*font of description*/
  49. height:224px;
  50. position: relative;
  51. background-color:rgba(255,255,255,0.8);
  52. opacity:0;
  53. width:224px;
  54. font-size:14px; /*font size of description*/
  55. text-align:center; /*this could change to left or right*/
  56. -webkit-transition: all 0.5s ease-in-out;
  57. -moz-transition: all 0.5s ease-in-out;
  58. -o-transition: all 0.5s ease-in-out;
  59. }
  60.  
  61. .pers:hover .perst {
  62. opacity:1;
  63. -webkit-transition: all 0.5s ease-in-out;
  64. -moz-transition: all 0.5s ease-in-out;
  65. -o-transition: all 0.5s ease-in-out;
  66. }
  67.  
  68. .pers:hover img{
  69. -webkit-filter: grayscale(0%); /*this could be removed or change to 100% to work with the other one*/
  70. -webkit-transition: all 0.5s ease-in-out;
  71. -moz-transition: all 0.5s ease-in-out;
  72. -o-transition: all 0.5s ease-in-out;
  73. }
  74.  
  75. h4 {
  76. border-top:1px solid gray;
  77. border-bottom:1px solid gray;
  78. text-align:center;
  79. font-weight:600;
  80. margin-top:3px;
  81. text-transform:uppercase;
  82. padding:0px;
  83. margin-top:-15px;
  84. }
  85.  
  86. p {
  87. width:200px;
  88. margin-top:-15px;
  89. margin-left:5px;
  90. padding:0px;
  91. text-align:center; /*could be changed to left or right*/
  92. }
  93.  
  94. #links {
  95. position:fixed;
  96. bottom:40px;
  97. left:520px;
  98. width:300px;
  99. height:30px;
  100. }
  101.  
  102. a {
  103. text-decoration:none;
  104. font-family:corbel; /*link font family*/
  105. color: #0E547E; /*link colors*/
  106. }
  107.  
  108. #links a{
  109. font-size:18px; /*size of links at the bottom*/
  110. border-top:1px solid gray;
  111. border-bottom:1px solid gray;
  112. margin-left:15px;
  113. padding:3px;
  114. }
  115.  
  116. .perstitle {
  117. padding:0px;
  118. position:relative;
  119. font-size:13px;
  120. text-align:center;
  121. top:-5px;
  122. }
  123.  
  124. #ti {
  125. font-family: 'Pacifico';
  126. position:fixed;
  127. top:50px;
  128. left:520px;
  129. width:300px;
  130. height:30px;
  131. color:#042B43; /*title font color and size*/
  132. font-size:35px;
  133. }
  134.  
  135. </style></head><body>
  136. <!--title of page-->
  137. <div id="ti">The Family Network</div>
  138.  
  139. <div id="links">
  140. <a href="/">back</a>
  141. <a href="/ask">ask</a><!--change links here-->
  142. <a href="http://tumblr.com">dashboard</a><!--make sure you use http://-->
  143. <a href="http://fallenvvingsthemes.tumblr.com">credit</a><!--DO NOT REMOVE-->
  144. </div>
  145. <!--OKAY, this is the fun part! Here we gooooo...-->
  146. <div class="out-c"><div class="in-c">
  147. <!--copy an image's url and post it between the ""-->
  148. <!--as you can see, it CAN be a gif.-->
  149. <div class="pers"><img src="http://images5.fanpop.com/image/photos/30600000/Sam-sam-winchester-30612571-200-200.gif"><div class="perst"></br>
  150.  
  151. <!--ADD <a href="link">name</a> if you want to make this person's name a link--><!--\/ person's name here-->
  152. <h4>name</h4><p><!--to remove this title, delete from here--><div class="perstitle">admin</div><!--to here-->
  153. description of person or character, please try not to make your descriptions too long because the text will get weird
  154. </p></div></div>
  155. <!--to add more people, copy and paste the template below (since this one has a lot of directions on it)-->
  156. <!--THAT'S IT! If you have any questions head over to fallenvvings.co.vu/ask-->
  157.  
  158. <div class="pers"><img src="http://static.tumblr.com/fb1d6a25f758705aeb2389350a371e1f/mklysf4/5w4n0e33p/tumblr_static_large.gif"><div class="perst"></br>
  159. <h4>name</h4><p><div class="perstitle">member</div>
  160. description of person or character, please try not to make your descriptions too long because the text will get weird
  161. </p></div></div>
  162.  
  163. <div class="pers"><img src="http://24.media.tumblr.com/ac540f0a24eebd670f645aa0a57495a0/tumblr_mx3tttwSSy1si5qd6o1_250.jpg"><div class="perst"></br>
  164. <h4>name</h4><p><div class="perstitle">member</div>
  165. description of person or character, please try not to make your descriptions too long because the text will get weird
  166. </p></div></div>
  167.  
  168. <div class="pers"><img src="https://33.media.tumblr.com/0a635246ff003b00bd70d22b93071c5d/tumblr_inline_mmfiiltG4W1qz4rgp.gif"><div class="perst"></br>
  169. <h4>name</h4><p><div class="perstitle">member</div>
  170. description of person or character, please try not to make your descriptions too long because the text will get weird
  171. </p></div></div>
  172.  
  173. <div class="pers"><img src="http://images6.fanpop.com/image/photos/36700000/Kevin-Tran-image-kevin-tran-36716142-200-200.png"><div class="perst"></br>
  174. <h4>name</h4><p><div class="perstitle">member</div>
  175. description of person or character, please try not to make your descriptions too long because the text will get weird
  176. </p></div></div>
  177.  
  178. </div>
  179.  
  180. </div></div>
  181.  
  182. </body>
  183. </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!