API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 30th, 2016
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.82 KB | None | 0 0
raw download clone embed print report
  1. *{
  2. /* A universal CSS reset */
  3. margin:0;
  4. padding:0;
  5. }
  6.  
  7. body{
  8. font-size:14px;
  9. color:#666;
  10. background-image: url("bg.jpg");
  11. /* CSS3 Radial Gradients */
  12. font-family:Arial, Helvetica, sans-serif;
  13. }
  14.  
  15. #navigationMenu li{
  16. list-style:none;
  17. height:39px;
  18. padding:2px;
  19. width:40px;
  20. }
  21.  
  22. #navigationMenu span{
  23. /* Container properties */
  24. width:0;
  25. left:38px;
  26. padding:0;
  27. position:absolute;
  28. overflow:hidden;
  29.  
  30. /* Text properties */
  31. font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
  32. font-size:18px;
  33. font-weight:bold;
  34. letter-spacing:0.6px;
  35. white-space:nowrap;
  36. line-height:39px;
  37.  
  38. /* CSS3 Transition: */
  39. -webkit-transition: 0.25s;
  40.  
  41. /* Future proofing (these do not work yet): */
  42. -moz-transition: 0.25s;
  43. transition: 0.25s;
  44. }
  45.  
  46. #navigationMenu a{
  47. background:url('img/navigation.jpg') no-repeat;
  48.  
  49. height:39px;
  50. width:38px;
  51. display:block;
  52. position:relative;
  53. }
  54.  
  55. /* General hover styles */
  56.  
  57. #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
  58. #navigationMenu a:hover{
  59. text-decoration:none;
  60.  
  61. /* CSS outer glow with the box-shadow property */
  62. -moz-box-shadow:0 0 5px #9ddff5;
  63. -webkit-box-shadow:0 0 5px #9ddff5;
  64. box-shadow:0 0 5px #9ddff5;
  65. }
  66.  
  67. /* Green Button */
  68.  
  69. #navigationMenu .home { background-position:0 0;}
  70. #navigationMenu .home:hover { background-position:0 -39px;}
  71. #navigationMenu .home span{
  72. background-color:#7da315;
  73. color:#3d4f0c;
  74. text-shadow:1px 1px 0 #99bf31;
  75. }
  76.  
  77. /* Blue Button */
  78.  
  79. #navigationMenu .about { background-position:-38px 0;}
  80. #navigationMenu .about:hover { background-position:-38px -39px;}
  81. #navigationMenu .about span{
  82. background-color:#1e8bb4;
  83. color:#223a44;
  84. text-shadow:1px 1px 0 #44a8d0;
  85. }
  86.  
  87. /* Orange Button */
  88.  
  89. #navigationMenu .services { background-position:-76px 0;}
  90. #navigationMenu .services:hover { background-position:-76px -39px;}
  91. #navigationMenu .services span{
  92. background-color:#c86c1f;
  93. color:#5a3517;
  94. text-shadow:1px 1px 0 #d28344;
  95. }
  96.  
  97. /* Yellow Button */
  98.  
  99. #navigationMenu .portfolio { background-position:-114px 0;}
  100. #navigationMenu .portfolio:hover{ background-position:-114px -39px;}
  101. #navigationMenu .portfolio span{
  102. background-color:#d0a525;
  103. color:#604e18;
  104. text-shadow:1px 1px 0 #d8b54b;
  105. }
  106.  
  107. /* Purple Button */
  108.  
  109. #navigationMenu .contact { background-position:-152px 0;}
  110. #navigationMenu .contact:hover { background-position:-152px -39px;}
  111. #navigationMenu .contact span{
  112. background-color:#af1e83;
  113. color:#460f35;
  114. text-shadow:1px 1px 0 #d244a6;
  115. }
  116.  
  117. /* The styles below are only needed for the demo page */
  118.  
  119. #main{
  120. margin:0px;
  121. position:left;
  122. width:0px;
  123. }
  124.  
  125.  
  126. h1{
  127. color:#fff;
  128. font-size:30px;
  129. font-weight:normal;
  130. padding:60px 0 20px;
  131. text-align:left;
  132. }
  133.  
  134. h2{
  135. font-weight:normal;
  136. text-align:left;
  137. }
  138.  
  139. h1,h2{
  140. font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
  141. }
  142.  
  143. a, a:visited,a:active {
  144. color:#0196e3;
  145. text-decoration:none;
  146. outline:none;
  147. }
  148.  
  149. a:hover{
  150. text-decoration:underline;
  151. }
  152.  
  153. a img{
  154. border:none;
  155. }
  156.  
  157. p.note{
  158. color:#707070;
  159. font-size:10px;
  160. text-align:left;
  161. margin:50px;
  162. }
  163. * {
  164. box-sizing: border-box;
  165. }
  166. *{
  167. /* A universal CSS reset */
  168. margin:0;
  169. padding:0;
  170. }
  171.  
  172. body{
  173. font-size:14px;
  174. color:#666;
  175. background:#111 no-repeat;
  176.  
  177. /* CSS3 Radial Gradients */
  178. background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
  179. background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
  180.  
  181. font-family:Arial, Helvetica, sans-serif;
  182. }
  183.  
  184. #navigationMenu li{
  185. list-style:none;
  186. height:39px;
  187. padding:2px;
  188. width:40px;
  189. }
  190.  
  191. #navigationMenu span{
  192. /* Container properties */
  193. width:0;
  194. left:38px;
  195. padding:0;
  196. position:absolute;
  197. overflow:hidden;
  198.  
  199. /* Text properties */
  200. font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
  201. font-size:18px;
  202. font-weight:bold;
  203. letter-spacing:0.6px;
  204. white-space:nowrap;
  205. line-height:39px;
  206.  
  207. /* CSS3 Transition: */
  208. -webkit-transition: 0.25s;
  209.  
  210. /* Future proofing (these do not work yet): */
  211. -moz-transition: 0.25s;
  212. transition: 0.25s;
  213. }
  214.  
  215. #navigationMenu a{
  216. background:url('img/navigation.jpg') no-repeat;
  217.  
  218. height:39px;
  219. width:38px;
  220. display:block;
  221. position:relative;
  222. }
  223.  
  224. /* General hover styles */
  225.  
  226. #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
  227. #navigationMenu a:hover{
  228. text-decoration:none;
  229.  
  230. /* CSS outer glow with the box-shadow property */
  231. -moz-box-shadow:0 0 5px #9ddff5;
  232. -webkit-box-shadow:0 0 5px #9ddff5;
  233. box-shadow:0 0 5px #9ddff5;
  234. }
  235.  
  236. /* Green Button */
  237.  
  238. #navigationMenu .home { background-position:0 0;}
  239. #navigationMenu .home:hover { background-position:0 -39px;}
  240. #navigationMenu .home span{
  241. background-color:#7da315;
  242. color:#3d4f0c;
  243. text-shadow:1px 1px 0 #99bf31;
  244. }
  245.  
  246. /* Blue Button */
  247.  
  248. #navigationMenu .about { background-position:-38px 0;}
  249. #navigationMenu .about:hover { background-position:-38px -39px;}
  250. #navigationMenu .about span{
  251. background-color:#1e8bb4;
  252. color:#223a44;
  253. text-shadow:1px 1px 0 #44a8d0;
  254. }
  255.  
  256. /* Orange Button */
  257.  
  258. #navigationMenu .services { background-position:-76px 0;}
  259. #navigationMenu .services:hover { background-position:-76px -39px;}
  260. #navigationMenu .services span{
  261. background-color:#c86c1f;
  262. color:#5a3517;
  263. text-shadow:1px 1px 0 #d28344;
  264. }
  265.  
  266. /* Yellow Button */
  267.  
  268. #navigationMenu .portfolio { background-position:-114px 0;}
  269. #navigationMenu .portfolio:hover{ background-position:-114px -39px;}
  270. #navigationMenu .portfolio span{
  271. background-color:#d0a525;
  272. color:#604e18;
  273. text-shadow:1px 1px 0 #d8b54b;
  274. }
  275.  
  276. /* Purple Button */
  277.  
  278. #navigationMenu .contact { background-position:-152px 0;}
  279. #navigationMenu .contact:hover { background-position:-152px -39px;}
  280. #navigationMenu .contact span{
  281. background-color:#af1e83;
  282. color:#460f35;
  283. text-shadow:1px 1px 0 #d244a6;
  284. }
  285.  
  286. /* The styles below are only needed for the demo page */
  287.  
  288.  
  289.  
  290. h1{
  291. color:#fff;
  292. font-size:30px;
  293. font-weight:normal;
  294. padding:60px 0 20px;
  295. text-align:center;
  296. }
  297.  
  298. h2{
  299. font-weight:normal;
  300. text-align:center;
  301. }
  302.  
  303. h1,h2{
  304. font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
  305. }
  306.  
  307. a, a:visited,a:active {
  308. color:#0196e3;
  309. text-decoration:none;
  310. outline:none;
  311. }
  312.  
  313. a:hover{
  314. text-decoration:underline;
  315. }
  316.  
  317. a img{
  318. border:none;
  319. }
  320.  
  321. p.note{
  322. color:#707070;
  323. font-size:10px;
  324. text-align:center;
  325. margin:50px;
  326. }
  327. body {
  328. background-image: url("bg.jpg");
  329. }
  330.  
  331. ul {
  332. list-style-type: none;
  333. padding: 0;
  334. margin: 0;
  335. }
  336. .box { width: 100%; background: white;}
  337. .box h1, .box p {margin: 0 700px;}
  338. .box h1 {font-size:150%; color:white; }
  339. .box .top, .box .bottom{display:block;background: white;}
  340. .box .top b, .box .bottom b
  341. {
  342. display:block;height: 112px; overflow: hidden; background: white;
  343. }
  344. .box .r1{margin: 0 20px;}
  345. .box .r2{margin: 0 20px;}
  346. .box .r3{margin: 0 20px;}
  347. .box .top .r4, .box .bottom .r4{margin: 0 1px;height: 20px;}
  348. fieldset {
  349. -moz-border-radius: 11px;
  350. -khtml-border-radius: 11px;
  351. -webkit-border-radius: 11px;
  352. }
  353. .nav {
  354. position: fixed;
  355. z-index: 1;
  356. top: 0;
  357. left: 0;
  358. width: 100px;
  359. -webkit-backface-visibility: hidden;
  360. backface-visibility: hidden;
  361. }
  362. .nav__list {
  363. display: -webkit-box;
  364. display: -webkit-flex;
  365. display: -ms-flexbox;
  366. display: flex;
  367. -webkit-flex-flow: column wrap;
  368. -ms-flex-flow: column wrap;
  369. flex-flow: column wrap;
  370. height: 85vh;
  371. -webkit-transform: translate(0, -100%);
  372. transform: translate(0, -100%);
  373. -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  374. transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  375. }
  376. .nav__list--active {
  377. -webkit-transform: translate(0, 0);
  378. transform: translate(0, 0);
  379. }
  380. .nav__item {
  381. -webkit-box-flex: 1;
  382. -webkit-flex: 1;
  383. -ms-flex: 1;
  384. flex: 1;
  385. position: relative;
  386. }
  387. .nav__link {
  388. display: -webkit-box;
  389. display: -webkit-flex;
  390. display: -ms-flexbox;
  391. display: flex;
  392. -webkit-box-pack: center;
  393. -webkit-justify-content: center;
  394. -ms-flex-pack: center;
  395. justify-content: center;
  396. -webkit-box-align: center;
  397. -webkit-align-items: center;
  398. -ms-flex-align: center;
  399. align-items: center;
  400. position: absolute;
  401. height: 100%;
  402. width: 100%;
  403. top: 0;
  404. left: 0;
  405. text-decoration: none;
  406. font-size: 24px;
  407. background: #2b3033;
  408. -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  409. transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  410. }
  411. .nav__link:hover {
  412. background: #272b2e;
  413. }
  414. @media (max-width: 640px) {
  415. .nav {
  416. width: 70px;
  417. }
  418. .nav__list {
  419. height: 90vh;
  420. }
  421. }
  422.  
  423. .burger {
  424. height: 15vh;
  425. position: relative;
  426. display: -webkit-box;
  427. display: -webkit-flex;
  428. display: -ms-flexbox;
  429. display: flex;
  430. -webkit-box-pack: center;
  431. -webkit-justify-content: center;
  432. -ms-flex-pack: center;
  433. justify-content: center;
  434. -webkit-box-align: center;
  435. -webkit-align-items: center;
  436. -ms-flex-align: center;
  437. align-items: center;
  438. z-index: 2;
  439. background: #2b3033;
  440. cursor: pointer;
  441. -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  442. transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  443. }
  444. .burger:hover {
  445. background: #272b2e;
  446. }
  447. .burger__patty {
  448. position: relative;
  449. height: 2px;
  450. width: 40px;
  451. background: white;
  452. }
  453. .burger__patty:before {
  454. content: "";
  455. position: absolute;
  456. top: -10px;
  457. left: 0;
  458. height: 2px;
  459. width: 100%;
  460. background: white;
  461. }
  462. .burger__patty:after {
  463. content: "";
  464. position: absolute;
  465. top: 10px;
  466. left: 0;
  467. height: 2px;
  468. width: 100%;
  469. background: white;
  470. }
  471. .burger__patty, .burger__patty:before, .burger__patty:after {
  472. will-change: transform;
  473. -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  474. transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  475. }
  476. .burger--active .burger__patty {
  477. -webkit-transform: rotate(90deg);
  478. transform: rotate(90deg);
  479. }
  480. .burger--active .burger__patty:before {
  481. -webkit-transform: rotate(-45deg) translate(-7px, -7px) scaleX(0.7);
  482. transform: rotate(-45deg) translate(-7px, -7px) scaleX(0.7);
  483. }
  484. .burger--active .burger__patty:after {
  485. -webkit-transform: rotate(45deg) translate(-7px, 7px) scaleX(0.7);
  486. transform: rotate(45deg) translate(-7px, 7px) scaleX(0.7);
  487. }
  488. @media (max-width: 640px) {
  489. .burger {
  490. height: 10vh;
  491. }
  492. .burger__patty {
  493. -webkit-transform: scale(0.8);
  494. transform: scale(0.8);
  495. }
  496. .burger--active .burger__patty {
  497. -webkit-transform: scale(0.8) rotate(90deg);
  498. transform: scale(0.8) rotate(90deg);
  499. }
  500. }
  501.  
  502. .panel {
  503. min-height: 100vh;
  504. display: -webkit-box;
  505. display: -webkit-flex;
  506. display: -ms-flexbox;
  507. display: flex;
  508. -webkit-box-align: center;
  509. -webkit-align-items: center;
  510. -ms-flex-align: center;
  511. align-items: center;
  512. -webkit-box-pack: center;
  513. -webkit-justify-content: center;
  514. -ms-flex-pack: center;
  515. justify-content: center;
  516. overflow: hidden;
  517. }
  518. .panel__wrapper {
  519. padding: 7vh 7vw;
  520. -webkit-perspective: 1000px;
  521. perspective: 1000px;
  522. }
  523. .panel__content {
  524. will-change: transform;
  525. -webkit-transform: scale(0.7) rotateX(-230deg);
  526. transform: scale(0.7) rotateX(-230deg);
  527. -webkit-transform-origin: center 80%;
  528. transform-origin: center 80%;
  529. opacity: 0;
  530. -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  531. transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  532. }
  533. .panel__content--active {
  534. -webkit-transform: none;
  535. transform: none;
  536. opacity: 1;
  537. }
  538. .panel__headline {
  539. font-weight: 700;
  540. opacity: 0.8;
  541. font-size: 48px;
  542. margin: 0 0 25px 0;
  543. }
  544. .panel p {
  545. margin: 0 0 25px 0;
  546. color: #1a1a1a;
  547. font-size: 24px;
  548. max-width: 800px;
  549. }
  550. .panel p:last-child {
  551. margin-bottom: 0;
  552. }
  553. .panel__block {
  554. height: 3px;
  555. background: rgba(0, 0, 0, 0.2);
  556. margin: 0 0 25px 0;
  557. }
  558. @media (max-width: 640px) {
  559. .panel__headline {
  560. font-size: 36px;
  561. }
  562. .panel__wrapper {
  563. padding: 10vh 10vw;
  564. }
  565. .panel p {
  566. font-size: 16px;
  567. }
  568. }
  569.  
  570. .c-blue {
  571. color: #5fc7ea;
  572. }
  573.  
  574. .c-red {
  575. color: #e68568;
  576. }
  577.  
  578. .c-green {
  579. color: #68e6ac;
  580. }
  581.  
  582. .c-yellow {
  583. color: #e6d068;
  584. }
  585.  
  586. .b-blue {
  587. background-image: url("bg.jpg");
  588. }
  589.  
  590. .b-red {
  591. background-image: url("bg.jpg");
  592. }
  593.  
  594. .b-green {
  595. background-image: url("bg.jpg");
  596. }
  597.  
  598. .b-yellow {
  599. background-image: url("bg.jpg");
  600. }
  601.  
  602. .logo {
  603. position: fixed;
  604. bottom: 3vh;
  605. right: 3vw;
  606. z-index: 2;
  607. }
  608. .logo img {
  609. width: 65px;
  610. -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  611. transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  612. -webkit-transform: rotate(0);
  613. transform: rotate(0);
  614. }
  615. .logo img:hover {
  616. -webkit-transform: rotate(180deg) scale(1.1);
  617. transform: rotate(180deg) scale(1.1);
  618. }
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!