: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: -25px; 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; } header { justify-content: center; text-align: center; align-items: center; } header { font-size: 2rem; } img { width: 100%; height: 50%; display: inline-block; border-radius: 10px; } footer { background-color: #415aca; padding: 50px 0; } .container-footer { max-width: 1400px; padding: 0 4%; margin: auto; } .row-footer { display: flex; flex-wrap: wrap; } .footer-col { width: 25%; padding: 0 15px; } .footer-col h4 { font-size: 22px; color: white; margin-bottom: 20px; font-weight: 500; position: relative; text-transform: uppercase; } .footer-col ul { list-style: none; } .footer-col ul li { margin: 10px 0; } .footer-col ul li a { font-size: 16px; text-transform: capitalize; color: white; text-decoration: none; font-weight: 300; display: block; transition: all 0.3s ease; } .footer-col ul li a:hover { color: #cecdcd; padding-left: 10px; } .footer-col .medias-socias { margin-top: 30px; } .footer-col .medias-socias a { display: inline-flex; align-items: center; justify-content: center; height: 40px; width: 40px; margin: 0 10px 10px 0; text-decoration: none; border-radius: 50%; color: white; border: 1px solid white; transition: all 0.5s ease; } .footer-col .medias-socias a i { font-size: 20px; } .footer-col .medias-socias a:hover { color: #415aca; background-color: white; } .footer-col .form-sub input { width: 100%; padding: 10px; font-size: 15px; outline: none; border: 1px solid white; color: white; background-color: #415aca; } .footer-col .form-sub input::placeholder { color: white; } .footer-col .form-sub button { width: 100%; margin-top: 10px; padding: 10px; font-size: 17px; outline: none; border: none; cursor: pointer; color: #415aca; border-radius: 3px; font-weight: bold; background-color: white; } /* Responsivo */ @media (max-width: 800px) { .footer-col { width: 50%; margin-bottom: 30px; } } @media (max-width: 600px) { .footer-col { width: 100%; } } @media screen and (min-width: 600px) { .footer .content .container { grid-template-columns: repeat(1, 1fr); row-gap: 3.5rem; } .ham-menu > ul { margin-left: -45%; padding: 20px; height: 40%; } } @media screen and (min-width: 998px) { .footer .content .container { grid-template-columns: repeat(1, 1fr); row-gap: 3.5rem; } .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: -25%; padding: 20px; height: 40%; } }