:root { /* O :root CSS pseudo-class representa o elemento root da arvore do documento. Aplicado ao HTML, :root representa o elemento e é idêntico ao seletor html, exceto que sua especificidade é mais alta. "cria as variaveis" */ --home-bg-color: #c0f8e3; --menu-bg-color: #cbcbc2; --silde-btn-border: #808080; --slide-btn-bg: #ddf2db; --slide-btn-hoverbg: #f1fff1; --alpha-green: rgba(33, 96, 47, 0.51); --text-color: #616161; --border-color: #709680; --heading-color: #344a39; --box-shadow-color: #b5b5ac; --lightest-green: #86a58d; --light-green: #9ab09a; --dark-green: rgba(52, 74, 57, 0.86); --box-shadow: 0px 0px 3px 5px var(--box-shadow-color); --border-radius: 60px 5px; --fade-green: rgba(57, 87, 64, 0.55); } *, *::before, /*before cria um pseudo-elemento que é o primeiro filho do elemento atingido É frequentemente utilizado para adicionar conteúdo decorativo à um element utilizando a propriedade content. Este elemento é inline por padrão.*/ *::after { /*:after cria um pseudo-elemento que é o último filho do elemento selecionado. Muitas vezes é usado para adicionar e melhorar o conteúdo */ margin: 0; padding: 0; box-sizing: border-box; list-style: none; } body, html { width: 100%; font-size: 10px; color: var(--text-color); font-weight: normal; font-family: sans-serif; background-color: var(--home-bg-color); } #ham-menu { display: none; } label[for="ham-menu"] { display: block; position: fixed; top: 24px; left: 20px; z-index: 999; width: 60px; height: 60px; background-color: var(--home-bg-color); border-radius: 15px; border: 2px solid var(--border-color); } .ham-menu { /*menu sai da lateral esquerda*/ width: 48vw; height: 65%; position: fixed; top: -40px; visibility: hidden; transform: translate(-110%); z-index: 998; background-color: var(--lightest-green); transition: 1s; display: flex; justify-content: center; align-items: center; } .ham-menu > ul { margin-left: -35px; padding: 20px; height: 40%; } .ham-menu > ul > li { font-size: 3rem; letter-spacing: 0.15em; cursor: pointer; color: rgb(97, 97, 97); } #ham-menu:checked + label { background-color: transparent; border-color: var(--dark-green); } #ham-menu:checked ~ div.ham-menu { transform: translate(0px); visibility: visible; } .full-page-green { /*plano de fundo do fundo do menu*/ position: fixed; top: 0; left: 0; width: 100%; height: 50%; background-color: var(--dark-green); z-index: 997; opacity: 0; visibility: hidden; display: none; transition: 500ms; position: fixed; top: 0; left: 0; } #ham-menu:checked ~ div.full-page-green { display: block; opacity: 1; visibility: visible; } [for="ham-menu"] > div { width: 100%; height: 100%; display: flex; flex-flow: column wrap; align-content: center; align-items: center; } .menu-line { display: block; width: 17px; height: 2px; margin: 10px 0 5px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; background-color: var(--border-color); transition: 500ms; transform-origin: right center; } /*transformação da label e span */ [for="ham-menu"] > div > span:nth-child(4), [for="ham-menu"] > div > span:nth-child(5), [for="ham-menu"] > div > span:nth-child(6) { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 2px; border-bottom-right-radius: 2px; transform-origin: left center; } #ham-menu:checked + label span { background-color: var(--dark-green); } #ham-menu:checked + label span:nth-child(2), #ham-menu:checked + label span:nth-child(5) { transform: scale(0); } #ham-menu:checked + label span:nth-child(1) { transform: translateY(17px) rotate(45deg); } #ham-menu:checked + label span:nth-child(4) { transform: translateY(17px) rotate(-45deg); } #ham-menu:checked + label span:nth-child(3) { transform: translateY(-17px) rotate(-45deg); } #ham-menu:checked + label span:nth-child(6) { transform: translateY(-17px) rotate(45deg); } .centre-text { text-align: left; } .bold-text { font-weight: bold; } .descricao { text-align: center; font-size: 20px; margin: 10.3em auto; width: 250px; height: 210px; display: block; border-radius: 0.25em; box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25); box-sizing: border-box; padding: 3px; transition: all 0.5s; cursor: pointer; } .descricao:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .box-total { height: 50px; margin-top: 40%; } .box-button1 { margin-top: -58px; margin-left: 12px; width: 25%; height: 43vh; } .bteesquerdo { margin-left: -300px; height: 30%; display: flex; } .bte { cursor: pointer; font-size: 14px; line-height: 1; border-radius: 500px; transition-property: background-color, border-color, color, box-shadow, filter; transition-duration: 0.3s; border: 1px solid transparent; letter-spacing: 2px; min-width: 160px; text-transform: uppercase; white-space: normal; font-weight: 700; text-align: center; padding: 16px 14px 18px; color: #616467; box-shadow: inset 0 0 0 2px #616467; background-color: transparent; height: 48px; } .bte:hover { color: #fff; background-color: #f56653; } .box-button2 { margin-top: -375px; width: 25%; height: 43vh; margin-left: 70%; } .btdireito { height: 100%; display: flex; align-items: center; justify-content: center; } .btd { cursor: pointer; font-size: 14px; line-height: 1; border-radius: 500px; transition-property: background-color, border-color, color, box-shadow, filter; transition-duration: 0.3s; border: 1px solid transparent; letter-spacing: 2px; min-width: 160px; text-transform: uppercase; white-space: normal; font-weight: 700; text-align: center; padding: 16px 14px 18px; color: #616467; box-shadow: inset 0 0 0 2px #616467; background-color: transparent; height: 48px; } .btd:hover { color: #fff; background-color: #d1e706; } /********************************************Media Query Tablet**************************************************************/ @media screen and (min-width: 600px) { .ham-menu { /*menu sai da lateral esquerda*/ width: 30vw; height: 65%; position: fixed; top: -40px; visibility: hidden; transform: translate(-110%); z-index: 998; background-color: var(--lightest-green); transition: 1s; display: flex; justify-content: center; align-items: center; } .ham-menu > ul { margin-left: -3%; padding: 20px; height: 40%; } /*caixa dos botões*/ .box-total { height: 50px; margin-top: 13%; } /*caixa botão esquerdo*/ .box-button1 { margin-top: -6%; margin-left: 20px; width: 15%; height: 25%; } /*caixa botão direito*/ .box-button2 { margin-top: 5px; margin-left: 82%; width: 15%; height: 25%; } } /******************************************Media Query PC*********************************************************************/ @media screen and (min-width: 998px) { .ham-menu { /*menu sai da lateral esquerda*/ width: 25vw; height: 65%; position: fixed; top: -40px; visibility: hidden; transform: translate(-110%); z-index: 998; background-color: var(--lightest-green); transition: 1s; display: flex; justify-content: center; align-items: center; } .ham-menu > ul { margin-left: -100px; padding: 20px; height: 40%; } .box-total { height: 32%; margin-top: 13%; } .box-button1 { margin-top: -4%; margin-left: 29px; width: 15%; height: 25%; } .box-button2 { margin-top: -52px; margin-left: 84%; width: 15%; height: 25%; } }