|
|
| Linha 4: |
Linha 4: |
|
| |
|
| * { font-size: 16px } | | * { font-size: 16px } |
|
| |
| * {
| |
| :root{
| |
| --main-color:#fff;
| |
| }
| |
|
| |
| *{
| |
| padding: 0;
| |
| margin: 0;
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| body{
| |
| font-family:'Roboto' , 'sans-serif';
| |
| overflow:hidden;
| |
| }
| |
|
| |
| .main-header{
| |
| background: #4FB391;
| |
| width: 100%;
| |
| height:50px;
| |
| }
| |
|
| |
| nav{
| |
| position: absolute;
| |
| left:0;
| |
| top:0;
| |
| width: 200px;
| |
| top:50px;
| |
| height:calc(100vh - 50px);
| |
| background:#2D6653;
| |
| transform:translateX(-100%);
| |
| transition:.4s ease;
| |
| }
| |
|
| |
| .navigation li{
| |
| list-style:none;
| |
| width: 100%;
| |
| border-bottom: 1px solid rgba(255,255,255,.5);
| |
| }
| |
|
| |
| .navigation a{
| |
| color:var(--main-color);
| |
| display: block;
| |
| line-height:3.5;
| |
| padding: 0 10px;
| |
| text-decoration:none;
| |
| transition:.4s ease;
| |
| }
| |
|
| |
| .navigation a:hover{
| |
| transform:translateX(10%);
| |
| }
| |
|
| |
| #btn-nav{
| |
| display: none;
| |
| }
| |
|
| |
| #btn-nav:checked ~ nav{
| |
| transform:translateX(0);
| |
| }
| |
|
| |
| .btn-nav{
| |
| color:var(--main-color);
| |
| font-size:30px;
| |
| position: absolute;
| |
| left:0;
| |
| top:0;
| |
| cursor:pointer;
| |
| padding:6.5px 15px;
| |
| transition:.2s ease;
| |
| background:rgba(0,0,0,.1);
| |
| }
| |
|
| |
| .btn-nav:hover{
| |
| background:rgba(0,0,0,.3);
| |
| }
| |
|
| |
| }
| |
Edição das 21h20min de 18 de setembro de 2024
/** o código CSS colocado aqui será aplicado a todos os temas */
* { font-family: arial}
* { font-size: 16px }
