API tools faq
paste
Advertisement
silbrigthemes

Blumig (Page #4) - Light

silbrigthemes
Feb 8th, 2018
591
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. BLUMIG (Page #4) by @silbrigthemes
  7.  
  8. Simple about and navigation page with a gooey menu and icon navigation.
  9.  
  10. Rules:
  11. 1. Do not edit or delete the credit.
  12. 2. Do not change the style / layout beyond recognition.
  13. 3. Do not use this code as a base.
  14. 4. Do not distribute this code as your own.
  15. 5. It would be nice if you reblogged / liked this post if you plan on using this page.
  16.  
  17. -->
  18.  
  19. <head>
  20.  
  21. <!-- Necessary for the icon font to work. -->
  22. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  23.  
  24. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  25. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900&amp;subset=cyrillic,latin-ext,vietnamese" rel="stylesheet">
  26.  
  27. <style>
  28.  
  29. body{
  30. margin:0;
  31. background-color:#92a8d1;
  32. color:#666;
  33. font-family:"Open Sans", Verdana;
  34. overflow:hidden;
  35. }
  36.  
  37. a{
  38. color:#92a8d1;
  39. }
  40.  
  41. a:hover{
  42. color:#fff;
  43. }
  44.  
  45. /* Custom scrollbar */
  46. ::-webkit-scrollbar{
  47. width:6px;
  48. background-color:#fff; /* background color of the scrollbar */
  49. }
  50.  
  51. ::-webkit-scrollbar-thumb{
  52. background-color:#92a8d1; /* background color of the scrollbar thumb */
  53. }
  54.  
  55. ::-webkit-scrollbar-track{
  56. background-color:#92a8d1; /* background color of the scrollbar track */
  57. border:2px solid #fff; /* border around the scrollbar track*/
  58. }
  59.  
  60. /* Custom selection */
  61. ::selection{
  62. background-color:#92a8d1; /* selection background color */
  63. color:#fff; /* selection text color */
  64. }
  65.  
  66. ::-webkit-selection{
  67. background-color:#92a8d1;
  68. color:#fff;
  69. }
  70.  
  71. ::-o-selection{
  72. background-color:#92a8d1;
  73. color:#fff;
  74. }
  75.  
  76. ::-moz-selection{
  77. background-color:#92a8d1;
  78. color:#fff;
  79. }
  80.  
  81. #contain{
  82. width:650px;
  83. height:550px;
  84. margin-left:calc(50vw - 325px);
  85. margin-top:calc(50vh - 275px);
  86. display:flex;
  87. align-items:center;
  88. justify-content:center;
  89. border:5px solid #fff;
  90. border-radius:2%;
  91. background-color:#f7cac9;
  92. }
  93.  
  94. #circle{
  95. width:200px;
  96. height:200px;
  97. border-radius:50%;
  98. border:5px solid #f7cac9;
  99. margin-left:-134px;
  100. z-index:20;
  101. background-image:url("https://78.media.tumblr.com/243339b75ee9939ccb374a1db4aa96fd/tumblr_p3smscNMS61wsskx3o1_500.jpg");
  102. background-size:cover;
  103. display:flex;
  104. align-items:center;
  105. justify-content:center;
  106. }
  107.  
  108.  
  109. #card{
  110. width:400px;
  111. height:500px;
  112. border-radius:2%;
  113. border:5px solid #f7cac9;
  114. display:flex;
  115. align-items:center;
  116. justify-content:center;
  117. background-color:#fff;
  118. }
  119.  
  120. #about{
  121. width:250px;
  122. height:calc(400px - 2em);
  123. /*border:2px solid #eee;*/
  124. margin-left:1em;
  125.  
  126. }
  127.  
  128. #about-title{
  129. font-size:3em;
  130. text-align:center;
  131. font-family:"Playfair Display", "Times New Roman";
  132. font-weight:bold;
  133. font-style:italic;
  134. color:#92a8d1;
  135. text-shadow:2px 2px 2px #ccc;
  136. }
  137.  
  138. #about-text{
  139. overflow-y:scroll;
  140. max-height:300px;
  141. padding-right:1em;
  142. text-align:justify;
  143. }
  144.  
  145. #about-text ul{
  146. list-style-type:none;
  147. }
  148.  
  149. #about-text mark{
  150. background-color:#f7cac9;
  151. color:#92a8d1;
  152. text-shadow:1px 1px 2px #fff;
  153. font-weight:bold;
  154. padding:0.25em;
  155. line-height:2em;
  156. border-radius:5px;
  157. }
  158.  
  159.  
  160. #credit img{
  161. width:6em;
  162. height:auto;
  163. bottom:2em;
  164. right:2em;
  165. position:absolute;
  166. }
  167.  
  168. .tmblr-iframe{
  169. display:none!important;
  170. }
  171.  
  172. .tmblr-iframe-pushdown {
  173. padding-top:0!important;
  174.  
  175. }
  176.  
  177. /* I have played with this by commenting out the .menu{}, and apparently it does not affect the styling on the customization page. */
  178. .menu {
  179. filter: url("#goo");
  180. }
  181.  
  182. /* These lines are very important as they are responsible for styling the whole menu. Without them, the icons just appear in one row. */
  183. .menu-item, .menu-open-button {
  184. background: #92a8d1; /* pink background of the menu*/
  185. border-radius: 50%; /* minimum is 50% for a perfect circle */
  186. width: 80px; /* circle width */
  187. height: 80px; /* circle height */
  188. position: absolute;
  189. color: #f7cac9; /* color of the icons */
  190. text-align: center; /* horizontal centering of icons */
  191. line-height: 80px; /* vertical centering of icons */
  192. transform: translate3d(0, 0, 0);
  193. transition: transform ease-out 200ms;
  194. /* transformation and duration of the transformation */
  195. }
  196.  
  197. /* These lines seemingly only affect the margin to the left. */
  198. .menu-open {
  199. display: none;
  200. }
  201.  
  202. /* Hamburger menu (≡) within the pink circle. */
  203. .hamburger {
  204. width: 25px; /* line width */
  205. height: 3px; /* line height */
  206. background: #f7cac9; /* color of the lines (≡) */
  207. display: block;
  208. position: absolute;
  209. top: 50%; /* offset from top */
  210. left: 50%; /* offset from left */
  211. /* since the lines are 25px long and 3px high, the following lines are necessary to center-align the menu properly */
  212. margin-left: -12.5px;
  213. margin-top: -1.5px;
  214. /* transformation duration */
  215. transition: transform 200ms;
  216.  
  217. }
  218.  
  219. .hamburger-1 {
  220. transform: translate3d(0, -8px, 0);
  221. /* (-8px) is the offset to the second line*/
  222. }
  223.  
  224. .hamburger-2 {
  225. transform: translate3d(0, 0, 0);
  226. }
  227.  
  228. .hamburger-3 {
  229. transform: translate3d(0, 8px, 0);
  230. /* (8px) is the offset to the second line*/
  231. }
  232.  
  233. /* Upon clicking on the menu, the lines of the hamburger menu rotate and realign. The middle line is scaled down to 0, so that it disappeares. The top and bottom lines will be rotated so that they form an (x). */
  234. .menu-open:checked + .menu-open-button .hamburger-1 {
  235. transform: translate3d(0, 0, 0) rotate(45deg);
  236. }
  237. .menu-open:checked + .menu-open-button .hamburger-2 {
  238. transform: translate3d(0, 0, 0) scale(0, 1);
  239. }
  240. .menu-open:checked + .menu-open-button .hamburger-3 {
  241. transform: translate3d(0, 0, 0) rotate(-45deg);
  242. }
  243.  
  244. .menu {
  245. position: relative;
  246. width: 380px;
  247. height: 380px;
  248. font-size: 20px;
  249. text-align: left;
  250. left: -40px;
  251. top: 150px;
  252. padding: 180px;
  253. transition: 0.5s;
  254. -moz-transition: 0.5s;
  255. -o-transition: 0.5s;
  256. -webkit-transition: 0.5s;
  257.  
  258. }
  259.  
  260. .menu-item:hover {
  261. background: #f7cac9;
  262. color: #92a8d1;
  263. border:2px solid rgba(255,255,255,0);
  264. transition:0.5s;
  265. -moz-transition:0.5s;
  266. -o-transition:0.5s;
  267. -webkit-transition:0.5s;
  268.  
  269. }
  270.  
  271. /*
  272. duration for the items to be displayed
  273. the items are displayed after one another
  274. */
  275. .menu-item:nth-child(3) {
  276. transition-duration: 180ms;
  277. }
  278. .menu-item:nth-child(4) {
  279. transition-duration: 180ms;
  280. }
  281. .menu-item:nth-child(5) {
  282. transition-duration: 180ms;
  283. }
  284. .menu-item:nth-child(6) {
  285. transition-duration: 180ms;
  286. }
  287. .menu-item:nth-child(7) {
  288. transition-duration: 180ms;
  289. }
  290. .menu-item:nth-child(8) {
  291. transition-duration: 180ms;
  292. }
  293. .menu-item:nth-child(9) {
  294. transition-duration: 180ms;
  295. }
  296.  
  297. .menu-open-button {
  298. z-index: 2;
  299. transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  300. transition-duration: 400ms;
  301. transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  302. cursor: pointer;
  303. }
  304.  
  305. .menu-open-button:hover {
  306. transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  307. }
  308.  
  309. .menu-open:checked + .menu-open-button {
  310. transition-timing-function: linear;
  311. transition-duration: 200ms;
  312. transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  313. }
  314.  
  315. .menu-open:checked ~ .menu-item {
  316. transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  317. }
  318. .menu-open:checked ~ .menu-item:nth-child(3) {
  319. transition-duration: 180ms;
  320. transform: translate3d(0.08361px, -104.99997px, 0);
  321. }
  322. .menu-open:checked ~ .menu-item:nth-child(4) {
  323. transition-duration: 280ms;
  324. transform: translate3d(90.9466px, -52.47586px, 0);
  325. }
  326. .menu-open:checked ~ .menu-item:nth-child(5) {
  327. transition-duration: 380ms;
  328. transform: translate3d(90.9466px, 52.47586px, 0);
  329. }
  330. .menu-open:checked ~ .menu-item:nth-child(6) {
  331. transition-duration: 480ms;
  332. transform: translate3d(0.08361px, 104.99997px, 0);
  333. }
  334. .menu-open:checked ~ .menu-item:nth-child(7) {
  335. transition-duration: 580ms;
  336. transform: translate3d(-90.86291px, 52.62064px, 0);
  337. }
  338. .menu-open:checked ~ .menu-item:nth-child(8) {
  339. transition-duration: 680ms;
  340. transform: translate3d(-91.03006px, -52.33095px, 0);
  341. }
  342. .menu-open:checked ~ .menu-item:nth-child(9) {
  343. transition-duration: 780ms;
  344. transform: translate3d(-0.25084px, -104.9997px, 0);
  345. }
  346.  
  347. </style>
  348. </head>
  349. <body>
  350. <div id="contain">
  351.  
  352. <div id="card">
  353. <div id="circle">
  354.  
  355. <!-- HAMBURGER MENU -->
  356. <!-- Hamburger menu within the pink circle. -->
  357. <nav class="menu">
  358. <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
  359. <label class="menu-open-button" for="menu-open">
  360. <span class="hamburger hamburger-1"></span>
  361. <span class="hamburger hamburger-2"></span>
  362. <span class="hamburger hamburger-3"></span>
  363. </label>
  364.  
  365. <!-- GOOEY MENU -->
  366. <!-- This is where the menu links start. -->
  367. <!-- Replace the '#' with the link of your choice. -->
  368. <!-- i.e.: <a href="#"></a> ==> <a href="/ask"></a> -->
  369. <!-- If you want to change the displayed icons, just change i.e.
  370. 'fa fa-heart' to 'fa fa-adjust' or any icon of your choice.
  371. -->
  372. <a href="/" class="menu-item"> <i class="fa fa-home"></i> </a>
  373. <a href="/ask" class="menu-item"> <i class="fa fa-envelope"></i> </a>
  374. <a href="/archive" class="menu-item"> <i class="fa fa-th-large"></i> </a>
  375. <a href="/about" class="menu-item"> <i class="fa fa-user"></i> </a>
  376. <a href="/navi" class="menu-item"> <i class="fa fa-compass"></i> </a>
  377. <!-- Don't touch this link it's my credit and I expect from you to leave it this way! -->
  378. <a href="https://silbrigthemes.tumblr.com/" class="menu-item"> <i class="fa fa-code"></i> </a>
  379.  
  380. </nav>
  381. </div>
  382.  
  383. <!-- ABOUT SECTION -->
  384. <div id="about">
  385. <div id="about-title">Moin!</div>
  386. <div id="about-text">
  387. <p>
  388. Nice to meet you, I'm Julia, the maker of this page.
  389. </p>
  390. <p>
  391. Here is some general information about me before I explain what is so special about this page.
  392. <ul>
  393. <li><mark>Name:</mark> Julia </li>
  394. <li><mark>Birthday:</mark> 2nd Aug 1998 </li>
  395. <li><mark>Pronouns:</mark> She / Her </li>
  396. <li><mark>Location:</mark> Germany </li>
  397. <li><mark>Languages:</mark> German, English, French </li>
  398. </ul>
  399. </p>
  400. <p>
  401. What you're seeing here is a simple page which combines an about section and a very special type of navigation.
  402. </p>
  403. <p>
  404. You might have noticed the <b>hamburger menu (≡)</b> on the left side of this description.
  405. </p>
  406. <p>
  407. Click on that and six circles with icons will be revealed. Those are the navigation links. This type of navigation is called "<b>gooey menu</b>".
  408. </p>
  409. <p>
  410. You can always change the links and the icons in the code. (<i>I have also annotated the code to make it easier for you.</i>)
  411. </p>
  412. <p>
  413. Well, I hope you are having fun with this page!
  414. </p>
  415. </div>
  416. </div>
  417. </div>
  418. </div>
  419.  
  420.  
  421. <div id="credit">
  422. <a href="https://silbrigthemes.tumblr.com/">
  423. <img src="https://78.media.tumblr.com/e8d8da337e182f0f6df8338914fa4272/tumblr_p3smscNMS61wsskx3o2_r1_1280.png" alt="credit @silbrigthemes">
  424. </a>
  425. </div>
  426.  
  427.  
  428. <!-- Filters -->
  429. <!-- Keep those lines.-->
  430. <!-- Only delete / change them if you know what you are doing. -->
  431. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  432. <defs>
  433. <filter id="shadowed-goo">
  434.  
  435. <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
  436. <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
  437. <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
  438. <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow" />
  439. <feOffset in="shadow" dx="1" dy="1" result="shadow" />
  440. <feComposite in2="shadow" in="goo" result="goo" />
  441. <feComposite in2="goo" in="SourceGraphic" result="mix" />
  442. </filter>
  443. <filter id="goo">
  444. <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
  445. <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
  446. <feComposite in2="goo" in="SourceGraphic" result="mix" />
  447. </filter>
  448. </defs>
  449. </svg>
  450.  
  451. </body>
  452. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!