/*como o nome mesmo já diz a tag é o corpo do site*/ body { /*A é uma propriedade que é utilizada para fazer distanciamento da parte externa, ao redor do elemento, e pode ser definida com diferentes unidades*/ margin-top: 10px; margin-right: 30px; margin-bottom:50px; margin-left:80px; } /*Essa parte do CSS foi para fazer que o elemento de texto do HTML seja renderizado como bloco*/ section { display: block } /*O @import serve para importar regas de estilo de outros arquivos CSS ou seja de outras folhas de estilo, neste caso foi usado para importar desta URL*/ @import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); /*O e são pseudo-elementos, que foram utilizados para fazer o efeito decorativo*/ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /*O elemento

é para apontar para outras páginas, aqui foi usado para apontar para a lista*/ nav { user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; } nav > ul, nav > ul > li { outline: 0; } nav > ul > li > a { text-decoration: none; } body { min-height: 100vh; background: linear-gradient(90deg, #aea4e3, #d3ffe8); } /* MAIN MENU */ /*Abaixo tem algumas definições para o menu como posição diante das bordas do topo, direita, esquerda, e estilizações com trasições*/ .main-menu { position:fixed; top: 0; left: 0; height: 100%; width: 60px; overflow:hidden; background: #0009; transition: width .05s linear; -webkit-transition: width .05s linear; z-index: 10; padding-top: 10px; } /*A class no menu foi utilizada para que houvesse a interação quando passar o mouse sobre o menu*/ .main-menu:hover { width: 180px; overflow:visible; } .main-menu > ul > li { position: relative; display: block; width: 180px; } .main-menu > ul > li > a { display: flex; flex-direction: row; align-items: center; justify-content: center; color:#999; font-size: 1rem; transition:all .1s linear; -webkit-transition:all .1s linear; padding: 10px 0; } /*Essa class foi usada para ajustes dos icones no menu*/ .nav-icon { width: 60px; height: 20px; font-size: 20px; text-align: center; } /*Essa class foi usada para ajustes dos textos no menu*/ .nav-text { width: 120px; height: 20px; font-family: "Mulish", sans-serif; } /*A class foi criada para ter total ligação com o botão de logout no final da sidebar*/ .logout { position: absolute; left: 0; bottom: 0; } .main-menu li:hover > a, .main-menu li.active > a, .main-menu li > a:focus { text-decoration: none; color: #fff; background-color: rgb(29, 79, 215, 0.7); } /* ANIMATED BACKGROUND */ /*A class foi usado para agrupar outros elementos e assim manter as mesmas caracteristicas de formatação*/ .container { background:#1F2024; min-height: 100vh; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } /*O @keyframes são regras que são definidas, ao criar a estialização do menu utilizado no site, essas regras são usadas para lidarmos com as mudanças de propriedades no CSS durante o processo de animação*/ @keyframes transform { 0%, 100% { border-radius: 33% 67% 70% 30% / 30% 40% 70% 70%; } 20% { border-radius: 37% 63% 51% 49% / 37% 35% 35% 63%; } 40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 26%; } 60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 73%; } 80% { border-radius: 40% 60% 42% 58% / 51% 51% 49% 59%; } } @keyframes movement_one { 0%, 100% { transform: none; } 50% { transform: translate(50%, 20%) rotateY(10deg) scale(1); } } @keyframes movement_two { 0%, 500% { transform: none; } 50% { transform: translate(50%, 100%) rotate(-200deg) scale(1.3);} } /*A

é para representar uma seção genérica do documento*/ section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 80px 40px 40px 80px; } /*O @media é para que seja possível determinar mais de um estilo de CSS para cada mídia, no caso do site optei por manter o mesmo mais pode ser usado @media screen e @media print no mesmo CSS por exemplo.*/ @media (max-width: 900px) { section { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { section { grid-template-columns: repeat(1, 1fr); } } *{ padding: 0; margin: 0; font-family:initial } body{ background: #000; } .conteiner{ position: absolute; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; } .conteiner span{ text-transform: uppercase; display: block; } .texto1 { font-size: 60px; font-weight: 700; letter-spacing: 8px; margin-bottom: 20px; background: black; animation: text 6s infinite; color: white; position: relative; } .texto2{ font-size: 30px; color: green; font-weight: 200; animation: opacity 6s infinite; } @keyframes text { 0% { color: black; margin-bottom: -40px; } 15% { color: black; margin-bottom: -40px; } 30% { color: darkgrey; letter-spacing:8px; margin-bottom: -40px; } 80% { letter-spacing: 35px; margin-bottom: -40px; } } @keyframes opacity { 50%{ letter-spacing: 8px; } 75%{ letter-spacing: 16px; } } .container { width: 50%; margin: 0 auto; } .form-contact { width: 100%; font-family: "Arial", Times, serif; } .form-contact-input { width: 100%; color: #292929; font-size: 18px; background-color: #E9E9E9; border: 1px solid #E9E9E9; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; height: 40px; margin-bottom: 20px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; text-indent: 20px; } .form-contact-textarea { width: 100%; color: #292929; font-size: 18px; background-color: #E9E9E9; border: 1px solid #E9E9E9; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; height: 200px; margin-bottom: 20px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; text-indent: 20px; padding-top: 16px; padding-left: 0; padding-right: 0; font-family: "Arial", Times, serif; } .form-contact-button { width: 100%; font-size: 18px; border-radius: 4px; color: #fff; height: 40px; opacity: .8; margin-bottom: 20px; cursor: pointer; background: #B22222; display: block; border: none; border-bottom: 1px solid #500707; border-right: 1px solid #500707; transition: 1s; } .form-contact-button:hover { opacity: 1; }