API tools faq
paste
Carolaine_Vieira

Sucking color page

Carolaine_Vieira
Mar 13th, 2016
2,887
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.91 KB | None | 0 0
raw download clone embed print report
  1. <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  2. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  3. <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  4. <link rel="stylesheet" href="cosmo/bootstrap.min.css">
  5. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  6. <link href='https://fonts.googleapis.com/css?family=Lovers+Quarrel' rel='stylesheet' type='text/css'>
  7. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
  8. <link href='https://fonts.googleapis.com/css?family=Quicksand:400,700,300' rel='stylesheet' type='text/css'>
  9.  
  10. <title>Hello There!</title>
  11. <link rel="shortcut icon" href="{Favicon}"/>
  12.  
  13. <style type="text/css">
  14.  
  15. a {text-decoration:none; color:#efa9a9;}
  16. a:hover {text-decoration:none; background:#efa9a9; color:#fff;}
  17. a:active {text-decoration:none;}
  18.  
  19. u {text-decoration:none; border-bottom:1px solid #efa9a9;}
  20. b {color:#efa9a9; text-transform:uppercase; font-size:10px;}
  21. i {color:#efa9a9;}
  22.  
  23. body {
  24.  
  25. background:#f3f3f3;
  26. font-family:Open Sans;
  27. color:#999;
  28. font-size:11px;
  29. }
  30.  
  31. #content {
  32.  
  33. margin-top:50px;
  34. padding:20px;
  35. width:900px;
  36. margin-left:400px;
  37. background:transparent;
  38.  
  39. }
  40.  
  41. .tab-content .tab-pane {
  42. display: none;
  43. margin-left:0px;
  44. background-color: #fff;
  45. padding:25px;
  46. overflow-y: auto;
  47. height:500px;
  48. margin-top:60px;
  49. }
  50.  
  51. .tab-content .active { display: block; text-decoration:none; }
  52.  
  53. #navigation{
  54. z-index:4;
  55. background:#fff;
  56. float:left;
  57. margin-left:0px;
  58. width:250px;
  59. margin-top:30px;
  60. }
  61. #navigation a {
  62. cursor:pointer;
  63. text-shadow:none;
  64. margin-top:10px;
  65. font-size:10px;
  66. font-family:Quicksand;
  67. font-weight:bold;
  68. display:inline-block;
  69. text-align:left;
  70. color:#999;
  71. width:240px;
  72. padding:10px;
  73. margin-left:30px;
  74. background:#fbfbfb;
  75. border:1px solid #eee;
  76. border-radius:5px;
  77. text-transform:uppercase;
  78. -webkit-transition:all 0.3s ease-out;
  79. -moz-transition:all 0.3s ease-out;
  80. transition:all 0.3s ease-out;
  81. }
  82. #navigation a:hover {
  83. text-shadow:none;
  84. color:#fff;
  85. box-shadow:inset 310px 0px #efa9a9;
  86. -webkit-transition:all 0.3s ease-out;
  87. -moz-transition:all 0.3s ease-out;
  88. transition:all 0.3s ease-out;
  89. }
  90.  
  91. ::-webkit-scrollbar{
  92. width:3px;
  93. height:4px;
  94. background:#fff
  95. }
  96.  
  97. ::-webkit-scrollbar-thumb{
  98. background-color:#eee;
  99. }
  100.  
  101. .fb {
  102.  
  103. padding-top:0px;
  104. padding:10px;
  105. background:transparent;
  106.  
  107. }
  108.  
  109. .fb img{
  110.  
  111. width:70px;
  112. padding:4px;
  113. background:#fbfbfb;
  114. border:1px solid #eee;
  115. margin:9.5px;
  116. -webkit-transition: all 0.5s ease;
  117. -moz-transition: all 0.5s ease;
  118. -o-transition: all 0.5s ease;
  119. -ms-transition: all 0.5s ease;
  120. transition: all 0.5s ease;
  121. border-radius:2px;
  122.  
  123. }
  124.  
  125. .ff {
  126.  
  127. padding-top:0px;
  128. padding:10px;
  129. background:transparent;
  130.  
  131. }
  132.  
  133. .ff img{
  134.  
  135. max-width:48px;
  136. padding:4px;
  137. background:#efa9a9;
  138. margin:7px;
  139. -webkit-transition: all 0.5s ease;
  140. -moz-transition: all 0.5s ease;
  141. -o-transition: all 0.5s ease;
  142. -ms-transition: all 0.5s ease;
  143. transition: all 0.5s ease;
  144. border-radius:100%;
  145.  
  146. }
  147. .ff a:hover {background:transparent;}
  148. .ff img:hover {
  149.  
  150. -webkit-transition: all 0.5s ease;
  151. -moz-transition: all 0.5s ease;
  152. -o-transition: all 0.5s ease;
  153. -ms-transition: all 0.5s ease;
  154. transition: all 0.5s ease;
  155. -webkit-transform: rotate(-360deg);
  156. -moz-transform: rotate(-360deg);
  157. -o-transform: rotate(-360deg);
  158. -ms-transform: rotate(-360deg);
  159. transform: rotate(-360deg);
  160. border-radius:10%;
  161.  
  162. }
  163.  
  164. .title {
  165.  
  166. font-family:quicksand;
  167. text-align:left;
  168. font-size:15px;
  169. padding:15px;
  170. font-weight:bold;
  171. color:#141414;
  172. text-transform:uppercase;
  173. background:#fbfbfb;
  174. border:1px solid #eee;
  175. border-radius:2px;
  176. margin-bottom:20px;
  177.  
  178. }
  179.  
  180. #pi {
  181. background:#efa9a9;
  182. color:#fff;
  183. margin-left:-15px;
  184. margin-top:-15px;
  185. margin-bottom:-15px;
  186. padding:18px;
  187. font-size:22px;
  188. margin-right:10px;
  189. }
  190.  
  191. #sidebar {
  192.  
  193. background:#fff;
  194. height:100%;
  195. width:300px;
  196. left:0px;
  197. top:0px;
  198. position:fixed;
  199.  
  200. }
  201.  
  202. #link{
  203. z-index:4;
  204. background:#fff;
  205. float:left;
  206. margin-left:0px;
  207. margin-top:10px;
  208. }
  209. #link a {
  210. cursor:pointer;
  211. text-shadow:none;
  212. margin-top:0px;
  213. margin-right:15px;
  214. font-size:12px;
  215. font-family:Quicksand;
  216. font-weight:bold;
  217. display:inline-block;
  218. text-align:left;
  219. color:#999;
  220. width:385px;
  221. padding:15px;
  222. background:transparent;
  223. border-bottom:1px solid #eee;
  224. text-transform:uppercase;
  225. -webkit-transition:all 0.3s ease-out;
  226. -moz-transition:all 0.3s ease-out;
  227. transition:all 0.3s ease-out;
  228. }
  229. #link a:hover {
  230. text-shadow:none;
  231. letter-spacing:3px;
  232. -webkit-transition:all 0.3s ease-out;
  233. -moz-transition:all 0.3s ease-out;
  234. transition:all 0.3s ease-out;
  235. }
  236.  
  237. h4 {
  238.  
  239. background:#efa9a9;
  240. text-transform:uppercase;
  241. text-align:left;
  242. color:#fff;
  243. font-size:12px;
  244. font-weight:bold;
  245. padding:15px;
  246.  
  247. }
  248.  
  249. h5 {
  250.  
  251. background:#f7d4d4;
  252. text-align:left;
  253. font-size:11.5px;
  254. font-weight:bold;
  255. padding:15px;
  256. padding-left:35px;
  257.  
  258. }
  259.  
  260. #favicon {
  261.  
  262. float:left;
  263. margin-right:10px;
  264. margin-bottom:0px;
  265. width:70px;
  266. padding:5px;
  267. background:#fbfbfb;
  268. border:1px solid #eee;
  269.  
  270. }
  271.  
  272. .ab:first-letter {font-size:15px; font-style:italic; color:#efa9a9;}
  273.  
  274. hr {
  275. border-color:#eee;
  276. width:200px;
  277. margin-left:auto;
  278. margin-right:auto;
  279. margin-top:25px;
  280. margin-bottom:25px;
  281. }
  282.  
  283. #fz {width:300px;}
  284.  
  285. #top1 { position:fixed; width:auto; height:auto; letter-spacing: 1px; right:10px; bottom:10px; padding:8px; font-size:30px; font-family:Lovers Quarrel; line-height:14px; text-align:right; z-index:99;
  286. -webkit-transition:all 0.3s ease-out;
  287. -moz-transition:all 0.3s ease-out;
  288. transition:all 0.3s ease-out;
  289. text-shadow:none;
  290. }
  291.  
  292. </style>
  293.  
  294. <div id="sidebar">
  295. <img id="fz" src="SIDEBAR-IMAGE-URL" />
  296.  
  297. <div id="navigation">
  298.  
  299. <a href="#home" data-toggle="tab" class="active"><li class="fa fa-user"></li>&nbsp;&nbsp;About</a>
  300. <a href="#icons" data-toggle="tab"><li class="fa fa-file-image-o"></li>&nbsp;&nbsp;Icons</a>
  301. <a href="#nav" data-toggle="tab"><li class="fa fa-bars"></li>&nbsp;&nbsp;Links</a>
  302. <a href="#follow" data-toggle="tab"><li class="fa fa-plus"></li>&nbsp;&nbsp;Blogroll</a>
  303. <a href="#subm" data-toggle="tab"><li class="fa fa-paper-plane"></li>&nbsp;&nbsp;Message</a>
  304. <a href="#ask" data-toggle="tab"><li class="fa fa-question"></li>&nbsp;&nbsp;Faq</a>
  305. <a href="/"><li class="fa fa-sign-out"></li>&nbsp;&nbsp;Back</a>
  306.  
  307. </div>
  308.  
  309. </div>
  310.  
  311. <div id="content">
  312.  
  313. <div id="myTabContent" class="tab-content">
  314.  
  315. <div class="tab-pane active" id="home">
  316.  
  317. <div class="title"><li id="pi" class="fa fa-user"></li>ABOUT</div>
  318.  
  319. <img id="favicon" src="PUT-FAVICON-URL-HERE" />
  320.  
  321. <div class="ab">
  322.  
  323. <b>Bold</b>
  324. <i>Italic</i>
  325. <u>Underline</u>
  326. <a href="/">link</a>
  327. <hr>
  328.  
  329. </div>
  330.  
  331. </div>
  332.  
  333. <div class="tab-pane" id="icons">
  334.  
  335. <div class="title"><li id="pi" class="fa fa-file-image-o"></li>icons</div>
  336.  
  337. <div class="fb">
  338.  
  339. <img src="http://i.imgur.com/faNvvHr.jpg" />
  340. <img src="http://i.imgur.com/RPGzbKe.jpg" />
  341.  
  342. <!--- REPLACE FOR MORE -->
  343. <img src="URL-IMAGE-HERE" />
  344. <!--- REPLACE FOR MORE -->
  345.  
  346. </div>
  347.  
  348. </div>
  349.  
  350. <div class="tab-pane" id="nav">
  351.  
  352. <div class="title"><li id="pi" class="fa fa-bars"></li>Links</div>
  353.  
  354. <div id="link">
  355.  
  356. <!--- REPLACE FOR MORE -->
  357. <a href="">LINK</a>
  358. <!--- REPLACE FOR MORE -->
  359.  
  360.  
  361. </div>
  362.  
  363. </div>
  364.  
  365. <div class="tab-pane" id="follow">
  366.  
  367. <div class="title"><li id="pi" class="fa fa-plus"></li>following</div>
  368.  
  369. <div class="ff">
  370.  
  371. {block:Following}{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}"></a>{/block:Followed}{/block:Following}
  372.  
  373. </div>
  374. </div>
  375.  
  376. <div class="tab-pane" id="subm">
  377.  
  378. <div class="title"><li id="pi" class="fa fa-question"></li>Ask me</div>
  379.  
  380. <iframe style="margin-top:20px; margin-bottom:25px;" frameborder="0" height="200px" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/YOUR-URL.tumblr.com" width="100%"></iframe>
  381.  
  382. <div class="title"><li id="pi" class="fa fa-paper-plane"></li>submit</div>
  383.  
  384. <iframe style="margin-top:20px;" frameborder="0" height="400px" id="ask_form" scrolling="yes" src="http://www.tumblr.com/submit_form/YOUR-URL.tumblr.com" width="100%"></iframe>
  385.  
  386. </div>
  387.  
  388. <div class="tab-pane" id="ask">
  389.  
  390. <div class="title"><li id="pi" class="fa fa-info"></li>Frequently asked questions</div>
  391.  
  392. <!--- REPLACE FOR MORE -->
  393. <h4>Pergunta or Question ?</h4>
  394. <h5>Resposta or Answer</h5>
  395. <!--- REPLACE FOR MORE -->
  396.  
  397. </div>
  398. </div>
  399.  
  400. </div>
  401.  
  402. <div id="top1">
  403. <a href="http://amplamente.tumblr.com/" title="amplamente">Am</a>
  404. </div>
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!