Advertisement
xlrnxnlx

aap

May 25th, 2014
225
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.51 KB | None | 0 0
  1. *, *::after, *::before {
  2.     margin: 0; padding: 0;
  3.     -webkit-box-sizing: border-box !important;
  4.        -moz-box-sizing: border-box !important;
  5.             box-sizing: border-box !important;
  6. }
  7.  
  8. body {
  9.     min-width: 100%;
  10.     min-height: 100%;
  11. }
  12.  
  13. body > aside {
  14.     position: fixed;
  15.     top: 0; left: 0; bottom: 0;
  16.     width: 250px;
  17.     background: #333;
  18.     box-shadow: 0 0 8px 2px rgba(0,0,0,0.6);
  19.     z-index: 1; /* Sobrepor a div do "conteudo" */
  20. }
  21.  
  22. body > div {
  23.     position: absolute;
  24.     top: 0; right: 0; bottom: 0; left: 250px; /* Tamanho do aside */
  25.     background: #32c973;
  26.     z-index: -1;
  27. }
  28.  
  29. body > aside > nav {
  30.     position: absolute;
  31.     top: 36%; left: 0; right: 0;
  32.     padding: 10px 0;
  33. }
  34.  
  35. body > aside > nav
  36. a {
  37.     display: block;
  38.     width: 100%;
  39.     padding: 16px 0;
  40.     text-align: center;
  41.     text-decoration: none;
  42. }
  43.  
  44. body > aside > nav
  45. a::before {
  46.     color: #32c973;
  47.     font-size: 1.8em;
  48.     font-weight: 900;
  49.     text-shadow: 0 0 1px #99ff99;
  50. }
  51.  
  52. body > aside > nav
  53. a > h4 {
  54.     color: #fff;
  55.     display: inline;
  56.     font-family: 'sitefont';
  57.     font-size: 1.8em;
  58.     font-weight: normal;
  59.     text-shadow: 0 0 6px #666;
  60.     margin-left: 6px;
  61.     white-space: nowrap;
  62. }
  63.  
  64. body > aside > nav ul li a h4::after {
  65.     display: inline;
  66.     width: 100%;
  67.     color: #ccc;
  68.     float: left;
  69.     font-size: 0.4em;
  70.     font-family: 'sitefont';
  71. }
  72.  
  73. body > aside > nav ul li:nth-child(1)
  74. a h4::after {
  75.     content: "Nossa missão e valores";
  76.     text-indent: 100px;
  77. }
  78.  
  79. body > aside > nav ul li:nth-child(2)
  80. a h4::after {
  81.     content: "O que gostamos de fazer";
  82.     text-indent: 100px;
  83. }
  84.  
  85. body > aside > nav ul li:nth-child(3)
  86. a h4::after {
  87.     content: "Entre em contato";
  88.     text-indent: 130px;
  89. }
  90.  
  91.  
  92. body > aside > footer {
  93.     position: absolute;
  94.     bottom: 0; left: 0; right: 0;
  95.     padding: 10px 0;
  96.     text-align: center;
  97.     background: linear-gradient(to bottom, transparent, #333 80%);
  98. }
  99.  
  100. body > aside > footer a {
  101.     color: #32c973;
  102.     display: inline-block;
  103.     font-size: 1.8em;
  104.     font-weight: 900;
  105.     text-decoration: none;
  106.     white-space: nowrap;
  107.     margin: 0 4px 0 4px;
  108. }
  109.  
  110. /* LOGO */
  111.  
  112. body > aside > a {
  113.     position: absolute;
  114.     top: 5%; left: 0; right: 0;
  115.     display: block;
  116.     padding: 6px 0;
  117.     color: #32c973;
  118.     font-family: 'cat';
  119.     font-size: 5em;
  120.     text-align: center;
  121.     text-decoration: none;
  122.     white-space: nowrap;
  123.     overflow: hidden;
  124.     vertical-align: middle;
  125.     text-indent: 0px;
  126. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement