|
|
| 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 18h20min de 18 de setembro de 2024
/** o código CSS colocado aqui será aplicado a todos os temas */
* { font-family: arial}
* { font-size: 16px }
