API tools faq
paste
lizacodes

Family Page 01

lizacodes
Apr 24th, 2018
1,401
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.13 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4.  
  5. <title>fandom family</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7.  
  8. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  9.  
  10.  
  11.  
  12. <style type="text/css">
  13.  
  14.  
  15.  
  16. /* SCROLLBAR */
  17.  
  18. ::-webkit-scrollbar-thumb:vertical {
  19. background-color:#999999;
  20. -moz-border-radius:10px;
  21. -webkit-border-radius:10px;
  22. }
  23.  
  24. ::-webkit-scrollbar {
  25. width:2px;
  26. height:2px;
  27. background-color:#ffffff; /* SCROLLBAR BACKGROUND COLOUR */
  28. }
  29.  
  30.  
  31.  
  32. body {
  33. color:#666; /* TEXT COLOUR */
  34. background-color:#fff; /* BACKGROUND COLOUR */
  35. font-family:Lato;
  36. font-style:normal;
  37. font-size:11px;
  38. font-weight:300;
  39. text-decoration:none;
  40. line-height:200%;
  41. text-align:center;
  42. }
  43.  
  44.  
  45.  
  46. a {
  47. color:#000;
  48. text-decoration:none;
  49. border-bottom:1px solid #eee;
  50. }
  51.  
  52.  
  53. a:hover, a:active {
  54. color:#cc949c; /* CHANGE LINK HOVER COLOUR */
  55. border-bottom-color:#cc949c; /* CHANGE LINK HOVER COLOUR */
  56. -webkit-transition-duration:.6s;
  57. -moz-transition-duration:.6s;
  58. -o-transition-duration:.6s;
  59. -ms-transition-duration:.6s;
  60.  
  61. }
  62.  
  63. b, em {
  64. font-weight:bold;
  65. color:#cc949c; /* CHANGE BOLD LETTERS COLOUR */
  66. }
  67.  
  68. h1 {
  69. margin:0;
  70. font-size:9px;
  71. letter-spacing:1px;
  72. font-family:Lato;
  73. }
  74.  
  75.  
  76. /*-- tumblr controls --*/
  77. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{
  78. z-index:999999999!important;
  79. }
  80.  
  81.  
  82.  
  83. /* TITLE */
  84. #title{
  85. font-size:20px;
  86. color:#727272; /* TITLE COLOUR */
  87. width:500px;
  88. margin:0 auto;
  89. margin-top:40px;
  90. margin-bottom:10px;
  91. letter-spacing:1px;
  92. border-bottom:1px solid #A6A6A6;
  93. }
  94.  
  95. .links {
  96. text-transform:uppercase;
  97. margin-top:15px;
  98. font-size:9px;
  99. font-family: FontAwesome;
  100. font-weight: normal;
  101. margin:auto;
  102. margin-top:10px;
  103. }
  104.  
  105. .links a {
  106. border:none;
  107. padding:0px 4px;
  108. color:#666;
  109. }
  110.  
  111. .links a:hover {
  112. color:#cc949c;
  113.  
  114. }
  115.  
  116. .fa.fa-home, .fa.fa-book, .fa.fa-envelope-o, .fa.fa-tag, .fa.fa-globe {
  117. color: #bfbfbf; /* NAVIGATION ICONS COLOUR */
  118. margin:auto;
  119. }
  120.  
  121.  
  122. .desc{
  123. width:400px;
  124. margin-top:15px;
  125. margin-bottom:15px;
  126. margin-left:50px;
  127. font-size:10px;
  128. color:#727272;
  129. }
  130.  
  131. .container {
  132. width:700px;
  133. height:auto;
  134. float:center;
  135. margin:auto;
  136. top: 30px;
  137. left:0px;
  138. position:relative;
  139.  
  140. }
  141.  
  142.  
  143. .cont{
  144. position:relative;
  145. margin-top:70px;
  146. margin-left:10px;
  147. width:150px;
  148. height:210px;
  149. background:#fff; /* CHANGE THE BACKGROUND OF THE CHARACTER INFO */
  150. border:1px solid #eee;
  151. display:inline-block;
  152. }
  153.  
  154. .cont img{
  155. position:relative;
  156. max-width:150px;
  157. max-height:150px;
  158. transition-duration: 0.8s;
  159. filter:grayscale(70%);
  160. -webkit-filter:grayscale(70%);
  161. }
  162.  
  163. .cont img:hover{
  164. filter:grayscale(0%);
  165. -webkit-filter:grayscale(0%);
  166. }
  167.  
  168. .cont a {
  169. color:#444; /* CHANGE LINK COLOUR */
  170. font-size:8px;
  171. letter-spacing:1px;
  172. display:block;
  173. text-align:center;
  174. padding:5px 0px;
  175. font-family:Lato;
  176. }
  177.  
  178. .cont a:hover {
  179. color:#cc949c; /* CHANGE LINK HOVER COLOUR */
  180. }
  181.  
  182. .text {
  183. text-align:center;
  184. font-size:8px; /* YOU CAN CHANGE THE FONT SIZE IF IT IS TOO SMALL FOR YOU */
  185. }
  186.  
  187.  
  188. /* credit pls don't remove */
  189. .credit {
  190. position:fixed;
  191. right:14px;
  192. font-size:13px;
  193. bottom:10px;}
  194. /* credit pls don't remove */
  195.  
  196.  
  197.  
  198.  
  199. </style>
  200. </head>
  201.  
  202. <body>
  203.  
  204. <div id="title">
  205. <!-- TITLE HERE --> FAMILY PAGE 01 <!-- TITLE HERE -->
  206.  
  207.  
  208. <!--- TEMPLATE FOR NAVIGATION LINK PART WITHOUT THE ICONS
  209.  
  210. <div class="links">
  211. <a href="/"><span title=home><i class="fa fa-home"></i></span></a> <a href="/ask"><span title=ask><i class="fa fa-envelope-o"></i></span></a>
  212. <a href="/about"><span title=about><i class="fa fa-book"></i></span></a> <a href="/navi"><span title=navigation><i class="fa fa-globe"></i></span></a>
  213. <a href="/"><span title="link title"><i class="fa fa-tag"></i></span></a>
  214. </div>
  215. --->
  216.  
  217. <!--- TEMPLATE FOR NAVIGATION LINK PART WITHOUT THE ICONS
  218.  
  219. <div class="links">
  220. <a href="/">home</a>
  221. <a href="/ask">ask</a>
  222. <a href="/about">about</a>
  223. <a href="/">link 1</a>
  224. </div>
  225. --->
  226.  
  227. <!-- NAVIGATION LINK PART START -->
  228. <div class="links">
  229. <a href="/"><span title=home><i class="fa fa-home"></i></span></a> <a href="/ask"><span title=ask><i class="fa fa-envelope-o"></i></span></a>
  230. <a href="/about"><span title=about><i class="fa fa-book"></i></span></a> <a href="/navi"><span title=navigation><i class="fa fa-globe"></i></span></a>
  231. <a href="/"><span title="link title"><i class="fa fa-tag"></i></span></a>
  232.  
  233. </div>
  234. <!-- NAVIGATION LINK PART END -->
  235.  
  236.  
  237. <div class="desc">
  238. <!-- DESCRIPTION HERE -->
  239. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  240. <!-- DESCRIPTION HERE -->
  241. </div>
  242. </div>
  243.  
  244.  
  245.  
  246.  
  247. <div class="container">
  248.  
  249.  
  250. <!-- CHARACTER TEMPLATE
  251. <div class="cont">
  252. <img class="img" src="IMAGE URL">
  253. <a href="URL">jane doe</a>
  254. <div class="text">name, @url</div>
  255. </div>
  256. -->
  257.  
  258.  
  259.  
  260. <!-- 1st -->
  261. <div class="cont">
  262. <img class="img" src="https://i.pinimg.com/564x/7c/46/d7/7c46d762c4ddc9de3fd513184554b574.jpg">
  263. <a href="URL">JANE DOE</a>
  264. <div class="text">NAME - @url</div>
  265. </div>
  266.  
  267. <!-- 2nd -->
  268. <div class="cont">
  269. <img class="img" src="https://i.pinimg.com/564x/3f/9d/02/3f9d023dce55e43ba87589dda11a046a.jpg">
  270. <a href="URL">JANE DOE</a>
  271. <div class="text">NAME - @url</div>
  272. </div>
  273.  
  274. <!-- 3rd -->
  275. <div class="cont">
  276. <img class="img" src="https://i.pinimg.com/564x/ac/51/ed/ac51ed063a4db6582edf5dea8fb42ad9.jpg">
  277. <a href="URL">JANE DOE</a>
  278. <div class="text">NAME - @url</div>
  279. </div>
  280.  
  281. <!-- 4th -->
  282. <div class="cont">
  283. <img class="img" src="https://i.pinimg.com/564x/08/9b/18/089b1878a10b9de21372136b4a528b4c.jpg">
  284. <a href="URL">JANE DOE</a>
  285. <div class="text">NAME - @url</div>
  286. </div>
  287.  
  288. <!-- 5th -->
  289. <div class="cont">
  290. <img class="img" src="https://i.pinimg.com/564x/e5/da/c7/e5dac78ab62d2b8e4b7c855eec2e04ba.jpg">
  291. <a href="URL">JANE DOE</a>
  292. <div class="text">NAME - @url</div>
  293. </div>
  294.  
  295. <!-- 6th -->
  296. <div class="cont">
  297. <img class="img" src="https://i.pinimg.com/564x/09/9f/41/099f4149c702f974f696c716857be392.jpg">
  298. <a href="URL">JANE DOE</a>
  299. <div class="text">NAME - @url</div>
  300. </div>
  301.  
  302. <!-- 7th -->
  303. <div class="cont">
  304. <img class="img" src="https://i.pinimg.com/564x/18/85/31/1885317adcb7322ec91b0d1839922675.jpg">
  305. <a href="URL">JANE DOE</a>
  306. <div class="text">NAME - @url</div>
  307. </div>
  308.  
  309. <!-- 8th -->
  310. <div class="cont">
  311. <img class="img" src="https://i.pinimg.com/564x/90/4a/71/904a713c6502c951a8fa095d11b1fd80.jpg">
  312. <a href="URL">JOHN DOE</a>
  313. <div class="text">NAME - @url</div>
  314. </div>
  315.  
  316.  
  317.  
  318. </div>
  319.  
  320. <!-- PLEASE DON'T TOUCH -->
  321. <div class="container"><br><p><br><p><br><p><hr><p></div>
  322. <div class="credit"><a href="https://lizascodes.tumblr.com/">©</a></div>
  323.  
  324. </body>
  325. </html>
  326.  
  327.  
  328. <!-- !!! COMMENTS !!!
  329.  
  330. -this is my first code ever. i am currently having classes on html,
  331. css and javascript but we have barely touched the basics.
  332. -i made this thing from scratch. i did use a base code of a blogroll
  333. page by azurethemes as a reference, but i doubt there is much of it
  334. left here.
  335. -other than that i did check out a few other (base or not) codes
  336. from other pages BUT I NEVER COPIED AND PASTED SECTIONS OF THOSE
  337. CODES. NEVER. i only checked out they wat they worked to get a
  338. better idea on what it should be like.
  339. -if you have any issues don't hesitate to ask me @lizascodes.
  340. http://lizascodes.tumblr.com (you can find more info there too)
  341.  
  342.  
  343. -->
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!