API tools faq
paste
clerihew

13. google about

clerihew
Feb 1st, 2019
428
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.38 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <!--
  4. © Clerihew Themes 2019
  5.  
  6. Do not use without reading terms of use.
  7.  
  8. Contact me at clerihew.tumblr.com if you have problems with any
  9. un-heavily edited code or if you have questions on how to use this theme.
  10. -->
  11.  
  12. <title>About</title>
  13.  
  14. <link rel="shortcut icon" href="{Favicon}"/>
  15.  
  16. <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  17.  
  18. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  19.  
  20. <style>
  21.  
  22. /* page background color, font-family */
  23. body {
  24. background-color: #fff;
  25. font-family: "Montserrat";
  26. }
  27.  
  28. /* topbar background color */
  29. .topbar {
  30. z-index: 10;
  31. height: 40px;
  32. width: 100%;
  33. position: fixed;
  34. left: 0;
  35. top: 0;
  36. border-bottom: 1px solid #ebebeb;
  37. box-shadow: 1px 1px 7px rgba(56, 56, 56, 0.4);
  38. background-color: #fff;
  39. }
  40.  
  41. /* title color */
  42. .topbar h1 {
  43. font-size: 25px;
  44. margin-top: 5px;
  45. margin-left: 20px;
  46. color: #34a853;
  47. -webkit-transition: color 0.5s;
  48. -moz-transition: color 0.5s;
  49. -o-transition: color 0.5s;
  50. transition: color 0.5s;
  51. }
  52.  
  53. /* title color hover */
  54. .topbar h1:hover {
  55. color: #99d3a9;
  56. }
  57.  
  58. .topbar a {
  59. text-decoration: none;
  60. }
  61.  
  62. .topbar .searchbar {
  63. margin-left: 20px;
  64. position: fixed;
  65. top: 8px;
  66. }
  67.  
  68. /* border of search bar */
  69. .topbar input[type=text] {
  70. padding: 6px;
  71. border-radius: 15px;
  72. border: 0.5px solid #dfe1e5;
  73. }
  74.  
  75. .topbar input:focus {
  76. outline: none;
  77. box-shadow: 1px 1px 2px rgba(56, 56, 56, 0.2);
  78. }
  79.  
  80. /* color of search icon */
  81. .topbar .searchbar button {
  82. color: #4285f4;
  83. font-size: 15px;
  84. border: none;
  85. background-color: #fff;
  86. }
  87.  
  88. .topbar .searchbar button:hover {
  89. cursor: pointer;
  90. }
  91.  
  92. .topbar button:focus {
  93. outline: none;
  94. }
  95.  
  96. .topbar h1, .searchbar {
  97. display: inline-block;
  98. }
  99.  
  100. #main {
  101. margin: 55px 100px;
  102. }
  103.  
  104. #main .header {
  105. width: auto;
  106. height: 250px;
  107. }
  108.  
  109. #main .header img {
  110. border: 2px solid #dadce0;
  111. border-radius: 100px;
  112. margin: 20px 0px auto 0px;
  113. }
  114.  
  115. /* header title color */
  116. #main .header .typewriter h1 {
  117. max-width: 550px;
  118. color: #212121;
  119. text-align: center;
  120. overflow: hidden;
  121. border-right: .15em solid #dfe1e5; /* typwriter cursor color */
  122. white-space: nowrap;
  123. margin: 0 auto;
  124. letter-spacing: .12em;
  125. animation:
  126. typing 4.5s steps(40, end),
  127. blink-caret .75s step-end infinite;
  128. }
  129.  
  130. @keyframes typing {
  131. from { width: 0 }
  132. to { width: 100% }
  133. }
  134.  
  135. /* typewriter cursor effect color (same as above) */
  136. @keyframes blink-caret {
  137. from, to { border-color: transparent }
  138. 50% { border-color: #dfe1e5; }
  139. }
  140.  
  141. /* quote color */
  142. #main .header p {
  143. text-align: center;
  144. color: #212121;
  145. }
  146.  
  147. #main .flip-card {
  148. display: inline-block;
  149. padding-bottom: 50px;
  150. padding-left: 50px;
  151. padding-right: 50px;
  152. background-color: transparent;
  153. width: 350px;
  154. height: 350px;
  155. perspective: 1000px;
  156. }
  157.  
  158. #main .flip-card-inner {
  159. position: relative;
  160. width: 100%;
  161. height: 100%;
  162. text-align: center;
  163. transition: transform 1s;
  164. transform-style: preserve-3d;
  165. }
  166.  
  167. #main .flip-card:hover .flip-card-inner {
  168. transform: rotateY(180deg);
  169. }
  170.  
  171. #main .flip-card-front, .flip-card-back {
  172. position: absolute;
  173. width: 100%;
  174. height: 100%;
  175. backface-visibility: hidden;
  176. }
  177.  
  178. /* front background color, border, text color */
  179. #main .flip-card-front {
  180. text-align: left;
  181. background-color: white;
  182. color: #4285f4;
  183. border: 1px solid #dfe1e5;
  184. border-radius: 10px;
  185. }
  186.  
  187. #main .flip-card-front h3 {
  188. margin-left: 20px;
  189. margin-top: 10px;
  190. }
  191.  
  192. /* back background color */
  193. #main .flip-card-back {
  194. border-radius: 10px;
  195. background-color: #dfe1e5;
  196. transform: rotateY(180deg);
  197. }
  198.  
  199. /* back title color */
  200. #main .flip-card-back h1 {
  201. color: #34a853;
  202. margin-left: 8px;
  203. margin-right: 8px;
  204. }
  205.  
  206. /* back text color */
  207. #main .flip-card-back p {
  208. color: #212121;
  209. margin-left: 8px;
  210. margin-right: 8px;
  211. }
  212.  
  213. /* back link color */
  214. #main .flip-card-back a {
  215. color: #4285f4;
  216. text-decoration: none;
  217. -webkit-transition: color 0.5s;
  218. -moz-transition: color 0.5s;
  219. -o-transition: color 0.5s;
  220. transition: color 0.5s;
  221. }
  222.  
  223. /* back link hover color */
  224. #main .flip-card-back a:hover {
  225. color: #a0c2f9;
  226. text-decoration: underline;
  227. }
  228.  
  229. /* DO NOT TOUCH THIS */
  230. .credit a {
  231. display: inline-block;
  232. text-decoration: none;
  233. margin: 0;
  234. font-size: 12px;
  235. color: #4285f4;
  236. -webkit-transition: color 0.5s;
  237. -moz-transition: color 0.5s;
  238. -o-transition: color 0.5s;
  239. transition: color 0.5s;
  240. }
  241.  
  242. .credit a:hover {
  243. color: #ccc;
  244. text-decoration: underline;
  245. }
  246.  
  247. /* thanks @shythemes */
  248. ::-webkit-scrollbar {
  249. width: 17px;
  250. height: 17px;
  251. }
  252.  
  253. /* scrollbar background */
  254. ::-webkit-scrollbar {
  255. background-color: #fff;
  256. }
  257.  
  258. ::-webkit-scrollbar-track {
  259. border: 8px solid #fff; /* background color */
  260. background-color: #dfe1e5; /* light border color */
  261. }
  262.  
  263. ::-webkit-scrollbar-thumb {
  264. border: 8px solid #fff; /* background color */
  265. background-color: #212121; /* dark border color */
  266. min-height:24px;
  267. min-width:24px;
  268. }
  269.  
  270. /* creds to @cyantists */
  271. iframe.tmblr-iframe {
  272. z-index:99999999999999!important;
  273. top:0!important;
  274. right:0!important;
  275. opacity:0.6;
  276. /* delete invert(1) from here */
  277. filter:invert(1) contrast(150%);
  278. -webkit-filter:invert(1) contrast(150%);
  279. -o-filter:invert(1) contrast(150%);
  280. -moz-filter:invert(1) contrast(150%);
  281. -ms-filter:invert(1) contrast(150%);
  282. /* to here if your blog has a dark background */
  283. transform:scale(0.65);
  284. transform-origin:100% 0;
  285. -webkit-transform:scale(0.65);
  286. -webkit-transform-origin:100% 0;
  287. -o-transform:scale(0.65);
  288. -o-transform-origin:100% 0;
  289. -moz-transform:scale(0.65);
  290. -moz-transform-origin:100% 0;
  291. -ms-transform:scale(0.65);
  292. -ms-transform-origin:100% 0;}
  293.  
  294. iframe.tmblr-iframe:hover {
  295. opacity:0.8!important;}
  296.  
  297. </style>
  298.  
  299. </head>
  300. <body>
  301.  
  302. <div class="topbar">
  303. <!-- put blog title here -->
  304. <a href="/"><h1>About</h1></a>
  305. <div class="searchbar">
  306. <form action="/search" method="get">
  307. <input type="text" name="q">
  308. <!-- replace <span> class with something from honeybee if you want a different search icon -->
  309. <button type="submit" value="Search"><span class="th th-loupe-o"></span></button>
  310. </form>
  311. </div>
  312. </div>
  313.  
  314. <div id="main">
  315. <div class="header">
  316. <div align="center">
  317. <img src="{PortraitURL-96}"/>
  318. </div>
  319. <div class="typewriter">
  320. <h1>Welcome to my about page.</h1>
  321. </div>
  322. <!-- i would suggest a quote here, since your actual info will be in the boxes below -->
  323. <p>“The right and wrong answers should come from your heart.”</p>
  324. </div>
  325.  
  326. <div align="center">
  327. <!-- this is the start of the about flip cards. copy a direct link from Imgur into the src="" for a different picture. -->
  328. <!-- flip card 1 -->
  329. <div class="flip-card">
  330. <div class="flip-card-inner">
  331. <div class="flip-card-front">
  332. <img src="https://i.imgur.com/fE8Q2ad.jpg" style="width:350px;height:300px;border-radius:10px 10px 0px 0px"/>
  333. <h3>About</h3>
  334. </div>
  335. <div class="flip-card-back">
  336. <!-- here you can type the info for the card. use <h1> for titles and <p> for regular text and <ul> for lists. wrap <p> in <a> for links. -->
  337. <h1>Google</h1>
  338. <p>Google LLC is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, search engine, cloud computing, software, and hardware. <a href="https://en.wikipedia.org/wiki/Google">Wikipedia</a></p>
  339. </div>
  340. </div>
  341. </div>
  342.  
  343. <!-- flip card 2-->
  344. <div class="flip-card">
  345. <div class="flip-card-inner">
  346. <div class="flip-card-front">
  347. <img src="https://i.imgur.com/OUx1oBr.jpg" style="width:350px;height:300px;border-radius:10px 10px 0px 0px"/>
  348. <h3>Quick Facts</h3>
  349. </div>
  350. <div class="flip-card-back">
  351. <h1>Quick Facts</h1>
  352. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus pulvinar diam, sed tincidunt purus suscipit a. Nulla id ultricies ante. Vivamus efficitur turpis egestas faucibus pretium. Vestibulum malesuada, libero et pharetra imperdiet, urna lacus consequat elit, elementum congue augue metus at ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
  353. </div>
  354. </div>
  355. </div>
  356.  
  357. <!-- flip card 3 -->
  358. <div class="flip-card">
  359. <div class="flip-card-inner">
  360. <div class="flip-card-front">
  361. <img src="https://i.imgur.com/mZkUwUB.jpg" style="width:350px;height:300px;border-radius:10px 10px 0px 0px"/>
  362. <h3>Favorite Songs</h3>
  363. </div>
  364. <div class="flip-card-back">
  365. <h1>Favorite Songs</h1>
  366. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus pulvinar diam, sed tincidunt purus suscipit a. Nulla id ultricies ante. Vivamus efficitur turpis egestas faucibus pretium. Vestibulum malesuada, libero et pharetra imperdiet, urna lacus consequat elit, elementum congue augue metus at ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
  367. </div>
  368. </div>
  369. </div>
  370.  
  371. <!-- flip card 4 -->
  372. <div class="flip-card">
  373. <div class="flip-card-inner">
  374. <div class="flip-card-front">
  375. <img src="https://i.imgur.com/sAHMDaG.jpg" style="width:350px;height:300px;border-radius:10px 10px 0px 0px"/>
  376. <h3>Favorite Video Games</h3>
  377. </div>
  378. <div class="flip-card-back">
  379. <h1>Favorite Video Games</h1>
  380. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus pulvinar diam, sed tincidunt purus suscipit a. Nulla id ultricies ante. Vivamus efficitur turpis egestas faucibus pretium. Vestibulum malesuada, libero et pharetra imperdiet, urna lacus consequat elit, elementum congue augue metus at ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
  381. </div>
  382. </div>
  383. </div>
  384. </div>
  385.  
  386. <!-- DO NOT TOUCH THIS -->
  387. <div align="center">
  388. <div class="credit">
  389. <a href="https://clerihew.tumblr.com">theme by clerihew</a>
  390. </div>
  391. </div>
  392. </div>
  393.  
  394. </div>
  395. </body>
  396. </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!