API tools faq
paste
silbrigthemes

Google (Page #16)

silbrigthemes
Sep 4th, 2018
448
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.05 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. GOOGLE
  6. Page #16 by silbrigthemes
  7.  
  8. A tags page inspired by Google.
  9.  
  10. ––––––––––––
  11.  
  12. Rules:
  13.  
  14. 1) Do not steal (parts of) the code.
  15. 2) Do not delete or alter the credit.
  16. 3) Do not edit beyond recognition.
  17. 4) Do not claim as your own.
  18. 5) Do not use as a base code.
  19.  
  20. If you need help with customization or encounter a problem, please feel free to send me a message.
  21.  
  22. Have fun!
  23.  
  24. -->
  25.  
  26. <html>
  27. <head>
  28.  
  29. <meta charset="utf-16">
  30. <title>{Title} | Tags</title>
  31. <link rel="shortcut icon" href="{Favicon}"/>
  32. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  33. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  34.  
  35. <!-- Necessary for the theme to be responsive. -->
  36. <meta name="viewport" content="width=device-width, initial-scale=1">
  37.  
  38. <!-- Necessary for the scripts to work. -->
  39. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  40.  
  41. <!-- Changes the toolbar color on mobile. -->
  42. <meta name="theme-color" content="#ccc"/>
  43.  
  44. <!-- Tooltip Script -->
  45. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  46. <script>
  47. (function($){
  48. $(document).ready(function(){
  49. $("[title]").style_my_tooltips({
  50. tip_follows_cursor:true,
  51. tip_delay_time:200,
  52. tip_fade_speed:300
  53. }
  54. );
  55. });
  56. })(jQuery);
  57. </script>
  58.  
  59. <!-- Custom font "Open Sans". -->
  60. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  61.  
  62. <style>
  63. body{
  64. margin:0;
  65. top:0;
  66. left:0;
  67. background-color:white; /* global background */
  68. font-size:1em; /* font-size = 16px */
  69. font-family:"Open Sans", Verdana;
  70. color:#444; /* global text color */
  71. }
  72.  
  73. /* Custom Scrollbar */
  74. ::-webkit-scrollbar{
  75. width:10px;
  76. border:4px solid white;
  77. background-color:#ccc;
  78. }
  79.  
  80. ::-webkit-scrollbar-thumb{
  81. width:10px;
  82. border:2px solid white;
  83. background-color:#ccc;
  84. border-radius:5px;
  85. }
  86.  
  87. /* Custom Text Selection */
  88. ::selection{
  89. background-color:#eee; /* background */
  90. color:#333; /* text color */
  91. text-shadow:none;
  92. }
  93.  
  94. ::-moz-selection{
  95. background-color:#eee;
  96. color:#333;
  97. text-shadow:none;
  98. }
  99.  
  100. ::-o-selection{
  101. background-color:#eee;
  102. color:#333;
  103. text-shadow:none;
  104. }
  105.  
  106. ::-webkit-selection{
  107. background-color:#eee;
  108. color:#333;
  109. text-shadow:none;
  110. }
  111.  
  112. /* Custom Tooltips */
  113. #s-m-t-tooltip{
  114. max-width:300px;
  115. margin:15px;
  116. padding:0.5em;
  117. background-color: #eee; /* background */
  118. color:#333; /* text color */
  119. z-index:9999999999999;
  120. font-size:12px;
  121. text-transform:uppercase;
  122. }
  123.  
  124. /* Entire Container */
  125. #container{
  126. width:80vw;
  127. margin-left:10vw;
  128. margin-top:10vh;
  129. height:auto;
  130. display:flex;
  131. align-items:center;
  132. justify-content:center;
  133. flex-direction:column;
  134. }
  135.  
  136. /* Searchbar Container */
  137. #searchbar-container{
  138. width:80vw;
  139. height:auto;
  140. display:flex;
  141. align-items:center;
  142. justify-content:center;
  143. }
  144.  
  145. /* Searchbar */
  146. .sfm input {
  147. width:calc(60vw - 16px);
  148. background-color: white;
  149. font-size: 2em;
  150. border: 1px solid #ccc;
  151. border-radius:1em;
  152. color: #666;
  153. padding: 4px 8px;
  154. font-family: "Open Sans", Verdana;
  155. text-align:center;
  156. }
  157.  
  158. /* Tags Container */
  159. #tags-container{
  160. width:80vw;
  161. height:auto;
  162. margin-top:16px;
  163. display:flex;
  164. align-items:flex-start;
  165. justify-content:space-between;
  166. flex-wrap:wrap;
  167. }
  168.  
  169. /* Box including title and tags */
  170. .tags{
  171. width:calc(18vw - 2em);
  172. padding:1em;
  173. border-radius:1em;
  174. }
  175.  
  176. /* Tag Box Title */
  177. .title{
  178. color:white;
  179. padding:4px 8px;
  180. font-size:1.5em;
  181. border-radius:1em;
  182. text-align:center;
  183. }
  184.  
  185. /* Red Title */
  186. .red .title{
  187. background-color:#d62d20;
  188. }
  189.  
  190. /* Yellow Title */
  191. .yellow .title{
  192. background-color:#ffa700;
  193. }
  194.  
  195. /* Green Title */
  196. .green .title{
  197. background-color:#008744;
  198. }
  199.  
  200. /* Blue Title */
  201. .blue .title{
  202. background-color:#0057e7;
  203. }
  204.  
  205. /* Box containing only tags */
  206. .box{
  207. margin-top:4px;
  208. display:flex;
  209. align-items:center;
  210. justify-content:space-evenly;
  211. flex-wrap:wrap;
  212. }
  213.  
  214. /* Links */
  215. a.taglink{
  216. text-decoration:none;
  217. }
  218.  
  219. /* Tags mark */
  220. mark{
  221. background-color:white;
  222. border-radius:1em;
  223. padding:4px 8px;
  224. line-height:2.25em;
  225. margin-right:4px;
  226. }
  227.  
  228. /* Red tags mark */
  229. .red mark{
  230. border:2px solid #d62d20;
  231. transition:0.5s;
  232. -moz-transition:0.5s;
  233. -o-transition:0.5s;
  234. -webkit-transition:0.5s;
  235. }
  236.  
  237. .red mark:hover{
  238. background-color:#d62d20;
  239. color:white;
  240. transition:0.5s;
  241. -moz-transition:0.5s;
  242. -o-transition:0.5s;
  243. -webkit-transition:0.5s;
  244. }
  245.  
  246. /* Yellow tags mark */
  247. .yellow mark{
  248. border:2px solid #ffa700;
  249. transition:0.5s;
  250. -moz-transition:0.5s;
  251. -o-transition:0.5s;
  252. -webkit-transition:0.5s;
  253. }
  254.  
  255. .yellow mark:hover{
  256. background-color:#ffa700;
  257. color:white;
  258. transition:0.5s;
  259. -moz-transition:0.5s;
  260. -o-transition:0.5s;
  261. -webkit-transition:0.5s;
  262. }
  263.  
  264. /* Green tags mark */
  265. .green mark{
  266. border:2px solid #008744;
  267. transition:0.5s;
  268. -moz-transition:0.5s;
  269. -o-transition:0.5s;
  270. -webkit-transition:0.5s;
  271. }
  272.  
  273. .green mark:hover{
  274. background-color:#008744;
  275. color:white;
  276. transition:0.5s;
  277. -moz-transition:0.5s;
  278. -o-transition:0.5s;
  279. -webkit-transition:0.5s;
  280. }
  281.  
  282. /* Blue tags mark */
  283. .blue mark{
  284. border:2px solid #0057e7;
  285. transition:0.5s;
  286. -moz-transition:0.5s;
  287. -o-transition:0.5s;
  288. -webkit-transition:0.5s;
  289. }
  290.  
  291. .blue mark:hover{
  292. background-color:#0057e7;
  293. color:white;
  294. transition:0.5s;
  295. -moz-transition:0.5s;
  296. -o-transition:0.5s;
  297. -webkit-transition:0.5s;
  298. }
  299.  
  300. /** RESPONSIVE LAYOUT **/
  301. /* Responsive for tablets */
  302. @media only screen and (max-width:800px){
  303. .tags{
  304. width:calc(38vw - 2em);
  305. }
  306. }
  307.  
  308. /* Responsive for phones */
  309. @media only screen and (max-width:400px){
  310. .sfm input{
  311. width:calc(80vw - 32px);
  312. }
  313.  
  314. .tags{
  315. width:calc(78vw - 2em);
  316. }
  317. }
  318.  
  319. /** CREDIT **/
  320. /* Do not delete or alter this credit!
  321. Otherwise you will be blocked! -->
  322. #credit{
  323. position:fixed;
  324. bottom:8px;
  325. right:8px;
  326. width:32px;
  327. height:32px;
  328. border-radius:50%;
  329. background-color:white;
  330. border-top:2px solid #d62d20;
  331. border-left:2px solid #ffa700;
  332. border-bottom:2px solid #008744;
  333. border-right:2px solid #0057e7;
  334. display:flex;
  335. align-items:center;
  336. justify-content:center;
  337. color:#333;
  338. font-size:1.5em;
  339. transition:0.5s;
  340. -moz-transition:0.5s;
  341. -o-transition:0.5s;
  342. -webkit-transition:0.5s;
  343. }
  344.  
  345. #credit:hover{
  346. border-bottom:2px solid #d62d20;
  347. border-right:2px solid #ffa700;
  348. border-top:2px solid #008744;
  349. border-left:2px solid #0057e7;
  350. transform:scale(1.05);
  351. transition:0.5s;
  352. -moz-transition:0.5s;
  353. -o-transition:0.5s;
  354. -webkit-transition:0.5s;
  355. }
  356.  
  357. /* Hides the tumblr app button. By @yeoli-thm */
  358. .tmblr-iframe--app-cta-button {
  359. display: none!important;
  360. }
  361.  
  362. /* Hides standard tumblr controls */
  363. body > iframe:first-child {
  364. display: none !important;
  365. }
  366.  
  367. </style>
  368. </head>
  369.  
  370. <body>
  371.  
  372. <div id="container">
  373. <!-- Searchbar Container -->
  374. <div id="searchbar-container">
  375. <form action="/search" method="get" class="sfm" name="theform">
  376. <input type="text" name="q" value="Search …"/>
  377. </form>
  378. </div>
  379.  
  380. <!-- Tags Container -->
  381. <div id="tags-container">
  382. <!-- Red Tags Section -->
  383. <div class="tags red">
  384. <div class="title">Section 1</div>
  385. <div class="box">
  386. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  387. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  388. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  389. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  390. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  391. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  392. </div>
  393. </div>
  394.  
  395. <!-- Yellow Tags Section -->
  396. <div class="tags yellow">
  397. <div class="title">Section 2</div>
  398. <div class="box">
  399. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  400. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  401. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  402. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  403. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  404. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  405. </div>
  406. </div>
  407.  
  408. <!-- Green Tags Section -->
  409. <div class="tags green">
  410. <div class="title">Section 3</div>
  411. <div class="box">
  412. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  413. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  414. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  415. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  416. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  417. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  418. </div>
  419. </div>
  420.  
  421. <!-- Blue Tags Section -->
  422. <div class="tags blue">
  423. <div class="title">Section 4</div>
  424. <div class="box">
  425. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  426. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  427. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  428. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  429. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  430. <a href="/tagged/tag" title="tagged as: tag" class="taglink"><mark>Tag</mark></a>
  431. </div>
  432. </div>
  433. </div>
  434. </div>
  435.  
  436. <!-- CREDIT -->
  437. <!-- Do not delete or alter this credit, otherwise you will be blocked! -->
  438. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="taglink">
  439. <div id="credit">S</div>
  440. </a>
  441.  
  442. </body>
  443. </html>
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!