/*Configuração para o documento inteiro*/ *{ margin: 0 auto; padding: 0; box-sizing: border-box; } /*======================================================================================================================================== (Configurações para a página) =========================================================================================================================================*/ body{ overflow-y: hidden; } /*Configurações para Class Página*/ div.Pagina{ display: grid; grid-template-columns: 100%; grid-template-rows: 20vh 70vh 10vh; grid-template-areas: "Cabecalho" "Conteudo" "Rodape" ; }/*Final das configurações da class Pagina*/ /*=========================================================================================================================================== (CONFIGURAÇÕES DA ÁREA CABEÇALHO) ===========================================================================================================================================*/ /*Configurações para class Cabeçalho*/ div.Cabecalho{ display: grid; grid-template-columns: 25% 60% 7.5% 7.5%; grid-template-rows: 4vw 4vw; grid-template-areas: "Logo Frase Reservado Reservado" "Logo Opcoes AreaReservadaAluno AreaReservadaFuncionarios "; grid-area: Cabecalho; max-width: 100%; width: 100%; padding: 1%; background-color: #00AFEF; }/*Final das configurações da class Cabeçalho*/ /*(Configurações para os herdeiros da class cabeçalho)*/ div.Logo{ grid-area: Logo; max-width: 100%; width: 100%; }/*Final das configurações da class logo*/ /*Configurações para imagem do logo*/ img.LogoColegio{ max-width: 70%; width: 100%; margin-left: 15%; }/*Final das configurações da class logo do colégio*/ div.Frase{ max-width: 95%; width: 100%; grid-area: Frase; font-size:2.5vw; color: #F7E017; text-align: center; }/*Final das configurações da class Frase*/ p.Slogan{ line-height: 4vw; }/*Final das configurações do paragrafo slogan*/ /*=========================================================================================================================================== (CONFIGURAÇÕES DA ÁREA MENU) ===========================================================================================================================================*/ div.Menu{ max-width: 95%; width: 100%; line-height: 4vw; grid-area: Opcoes; display: grid; grid-template-columns: 25% 25% 25% 25% ; grid-template-rows: 4vw; grid-template-areas: "EducacaoInfantil EnsinoFundamental1 EnsinoFundamental2 EnsinoMedio"; background-color: #1E7DB0; border: 0.11vw solid black; border-radius: 0.5vw; }/*Final das configurações da class menu*/ /*Configurações para class Cursos*/ div.Cursos{ grid-area: Cursos; line-height: 1vw; }/*Final das configurações da class cursos*/ /*Configurações para class Educação Infantil*/ div.EducacaoInfantil{ grid-area: EducacaoInfantil; line-height: 2vw; }/*Final das configurações da class educação infantil*/ /*Configurações da foto da educação infantil*/ img.FiguraEducacaoInfantil{ max-width: 20%; width: 100%; margin-top:2.5%; margin-left:5%; }/*Final das configurações da educação infantil*/ /*Configurações para o link a dos itens do menu*/ a.Linkpaginas{ display:inline; font-size:1.3vw; font-weight:bold; color:white; text-decoration: none; cursor: pointer; }/*Final das configurações dos link dos itens do menu*/ /*Configurações para quando o mouse estiver em cima do menu*/ a.Linkpaginas:hover{ color:#F7E017; }/*Final das configurações quando o mouse estiver em cima do menu*/ /*Configurações para class Ensino Fundamental 1*/ div.EnsinoFundamental1{ grid-area: EnsinoFundamental1; }/*Final das configurações da class Ensino fundamental 1*/ /*Configurações da foto do ensino fundamental (I)*/ img.FiguraEnsinoFundamentalI{ max-width: 20%; width: 100%; margin-top:2.5%; margin-left:8%; }/*Final das configurações do ensino fundamental (I)*/ /*Configurações para class Ensino Fundamental 2*/ div.EnsinoFundamental2{ grid-area: EnsinoFundamental2; }/*Final das configurações da class Ensino fundamental 1*/ /*Configurações da foto do ensino fundamental (II)*/ img.FiguraEnsinoFundamentalII{ max-width: 20%; width: 100%; margin-top:3%; margin-left:5%; color:white; }/*Final das configurações do ensino fundamental (II)*/ /*Configurações para class Ensino Médio*/ div.EnsinoMedio{ grid-area: EnsinoMedio; }/*Final das configurações da class Ensino Médio*/ /*Configurações da foto do ensino médio*/ img.FiguraEnsinoMedio{ max-width: 20%; width: 100%; margin-top:2.5%; margin-left:10%; }/*Final das configurações do ensino médio*/ /*=========================================================================================================================================== (CONFIGURAÇÕES DA ÁREA RESERVADA) ===========================================================================================================================================*/ div.Resevada{ max-width: 100%; width: 100%; grid-area: Reservado; font-size: 1.3vw; font-weight: bold; text-align: center; color:#F7E017; border-left:0.3vw solid #F7E017; }/*Final das configurações da class area reservada */ img.IconeMenuCelulares{ display:none; max-width: 10%; width:100%; } /* Final das configurações para o icone do menu para celulares */ p.AreasReservadas{ line-height: 4vw; }/*Final das configurações da class Areas Reservadas*/ div.AreaReservadaAluno{ grid-area: AreaReservadaAluno; max-width: 100%; width: 100%; line-height: 4vw; border-left:0.3vw solid #F7E017; }/*Final das configurações da class area reservada aluno*/ Button.BotaoAreadosAlunos{ max-width: 80%; width:100%; height: 2.5vw; margin-left: 20%; background-color: white; font-size: 0.8vw; font-weight: bold; border-radius: 0.5vw; border:none; border-right:0.25vw solid gray; border-bottom:0.25vw solid gray; cursor: pointer; }/*Final das configurações do botão área reservada alunos*/ Button.BotaoAreadosAlunos:hover{ background-color: yellow; color:black; border-right:0.3vw solid black; border-bottom:0.3vw solid black; }/*Final das configurações do botão área reservada alunos quando o mouse esta em cima*/ Button.BotaoAreadosAlunos:active{ border-right:0.1vw solid gray; border-bottom:0.1vw solid gray; }/*Final das configurações do botão área reservada alunos quando clicado*/ div.AreaReservadaFuncionarios{ grid-area: AreaReservadaFuncionarios; max-width: 100%; width: 100%; line-height: 4vw; }/*Final das configurações da class area reservada funcionários*/ Button.BotaoAreadosFuncionarios{ max-width: 80%; width:100%; height: 2.5vw; margin-left: 20%; background-color: white; font-size: 0.8vw; font-weight: bold; border-radius: 0.5vw; border:none; border-right:0.25vw solid gray; border-bottom:0.25vw solid gray; cursor: pointer; }/*Final das configurações do botão área reservada funcionários*/ Button.BotaoAreadosFuncionarios:hover{ background-color: yellow; color:black; border-right:0.3vw solid black; border-bottom:0.3vw solid black; }/*Final das configurações do botão área reservada funcionários com o mouse em cima*/ Button.BotaoAreadosFuncionarios:active{ border-right:0.1vw solid gray; border-bottom:0.1vw solid gray; }/*Final das configurações do botão área reservada funcionários com o mouse em cima*/ /*=========================================================================================================================================== (CONFIGURAÇÕES DA ÁREA CONTEÚDO) ===========================================================================================================================================*/ /*Configurações para class Conteúdo*/ div.Conteudo{ display: grid; grid-area: Conteudo; max-width: 100%; width: 100%; border-top: 0.3vw solid #F7E017; border-bottom: 0.3vw solid #F7E017; grid-template-columns: 100%; grid-template-rows: 31vw 15vw; grid-template-areas: "BannerMatriculas" "DiferenciaisColegio" ; overflow-y: scroll; scrollbar-width: auto; scrollbar-color:#F7E017 #00AFEF; }/*Final das configurações da class Conteúdo*/ /*Configurações para banner de matrículas*/ div.BannerMatriculas{ max-width: 99%; width:100%; height: 30vw; grid-area: BannerMatriculas; margin-top: 1%; border: 0.2vw solid black; overflow: hidden; }/*Final das configurações banner matrículas*/ /*Configurações da imagem matrículas abertas*/ img.FotoMatriculasAbertas{ max-width: 100%; width:100%; height: 30vw; }/*Final das configurações da imagem matrículas abertas*/ /*Configurações para o slide*/ div.slide{ display: none; }/*Final das configurações slide*/ /*Configurações */ .fade { animation-name: fade; animation-duration: 2.5s; } @keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } /*Configurações dos diferenciais do colégio */ div.DiferenciaisColegio{ display:grid; max-width: 100%; width: 100%; grid-area: DiferenciaisColegio; grid-template-columns: 100%; grid-template-rows: 5vw 10vw; grid-template-areas: "TituloDiferenciaisdoColegio" "FigurasdosDiferenciaisdoColegio"; }/*Final das configurações dos diferenciais do colégio */ /*Configurações para o título dos diferenciais do colégio*/ div.TituloDiferenciaisdoColegio{ max-width: 100%; width:100%; line-height: 5vw; grid-area: TituloDiferenciaisdoColegio; font-size: 2vw; font-weight: bold; color:#F7E017; text-align: center; }/*Final das configurações do titulo dos diferenciais do colegio*/ /*Configurações para as classe figuras dos diferenciais do colégio*/ div.Figurasdosdiferenciais{ display: grid; max-width:100%; width:100%; grid-area:FigurasdosDiferenciaisdoColegio; display: grid; grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%; grid-template-rows: 10vw; grid-template-areas: "AmbienteAcolhedor TurmasPequenas FormacaoHumana LinguaInglesa Mecatronica Musica" ; }/*Final das configurações da classe figuras dos diferenciais do colégio*/ /*Configurações da classe Ambiente Acolhedor*/ div.AmbienteAcolhedor{ grid-area: AmbienteAcolhedor; max-width: 100%; width: 100%; }/*Final da classe Ambiente Acolhedor*/ /*Configurações da classe turmas pequenas*/ div.TurmasPequenas{ grid-area: TurmasPequenas; max-width: 100%; width: 100%; }/*Final da classe turmas pequenas*/ /*Configurações da classe formação humana*/ div.FormacaoHumana{ grid-area: FormacaoHumana; max-width: 100%; width: 100%; }/*Final da classe formação humana*/ /*Configurações da classe Lingua Inglesa*/ div.LinguaInglesa{ grid-area: LinguaInglesa; max-width: 100%; width: 100%; }/*Final da classe Lingua Inglesa*/ /*Configurações da classe Mecatronica*/ div.Mecatronica{ grid-area: Mecatronica; max-width: 100%; width: 100%; }/*Final da classe Mecatronica*/ /*Configurações da classe Musica*/ div.Musica{ grid-area: Musica; max-width: 100%; width: 100%; }/*Final da classe Musica*/ /*Configurações da classe imagem Figuras diferenciais*/ img.FigurasDiferenciais{ max-width: 80%; width:100%; margin-top:3%; margin-left:10%; }/* Final das configurações da classe imagem figuras diferenciais*/ /*Configurações da classe imagem Figuras diferenciais*/ img.FigurasDiferenciaisMusica{ max-width: 70%; width:100%; height:9vw; margin-top:3%; margin-left:15%; }/* Final das configurações da classe imagem figuras diferenciais*/ /*=========================================================================================================================================== (CONFIGURAÇÕES DA ÁREA RODAPÉ) ===========================================================================================================================================*/ /*Configurações para class rodapé*/ div.Rodape{ display:grid; grid-area: Rodape; max-width: 100%; width: 100%; line-height: 3vw; padding: 1%; background-color: #00AFEF; grid-template-columns: 35% 30% 35%; grid-template-rows: 3vw; grid-template-areas: "Contatos FraseRodape Localizacao"; }/*Final das configurações da class rodapé*/ /* ---------------------------------------------- (CONFIGURAÇÕES DA DIV CONTATOS E SEUS FILHOS) -----------------------------------------------*/ /*Configurações da class contatos*/ div.Contatos{ grid-area: Contatos; max-width: 100%; width:100%; }/*Final das configurações da class contatos*/ /*Configurações da class imagem telefone*/ img.FiguraTelefone{ max-width: 7%; width: 100%; margin-left:4%; }/*Final das configurações da class imagem telefone */ /*Configurações da class numero de telefone */ p.NumerodeTelefone{ margin-top:-11%; margin-left: 13%; margin-bottom:-8%; font-size:1vw; font-weight: bold; color:black; }/*Final das configurações da class numero de telefone*/ /*Configurações da class imagem email*/ img.Figuraemail{ margin-left: 35%; max-width: 7%; width: 100%; }/*Final das configurações da class imagem email */ /*Configurações da class email */ p.email{ margin-top:-10%; margin-left: 43%; font-size:1vw; font-weight: bold; color:black; }/*Final das configurações da class email*/ /* ---------------------------------------------- (CONFIGURAÇÕES DA DIV FRASE DO RODAPÉ) -----------------------------------------------*/ /*Configurações da class frase do rodapé*/ div.FraseRodape{ grid-area: FraseRodape; line-height: 3vw; }/*Final das configurações da class frase do rodapé*/ /* ---------------------------------------------- (CONFIGURAÇÕES DA DIV LOCALIZAÇÃO) -----------------------------------------------*/ /*Configurações da class localizção*/ div.Localizacao{ grid-area: Localizacao; max-width: 100%; width:100%; line-height: 3vw; }/*Final das configurações da class localização*/ /*Configurações da class imagem email*/ img.FiguraLocalizacao{ max-width: 8%; width: 100%; margin-left: 25%; }/*Final das configurações da class imagem localização */ /*Configurações da class endereço */ p.Endereco{ margin-top:-13%; margin-left: 40%; font-size:1vw; font-weight: bold; color:black; }/*Final das configurações da class endereço*/ /*Configurações da class rua */ p.Rua{ margin-top:-5%; margin-left: 37%; font-size:1vw; font-weight: bold; color:black; }/*Final das configurações da class rua*/ /******************************************************************************************************************************************************* ======================================================================================================================================================== (INICIO DAS CONFIGURAÇÕES PARA NAVEGADORES E TELAS DIFERENTES) ======================================================================================================================================================== ******************************************************************************************************************************************************/ /* Configurações para celulares de tela entre 360 px a 389 px */ @media screen and (max-width: 768px){ /*Configurações para Class Página*/ div.Pagina{ display: grid; grid-template-columns: 100%; grid-template-rows: 15dvh 75dvh 10dvh; grid-template-areas: "Cabecalho" "Conteudo" "Rodape" ; }/*Final das configurações da class Pagina*/ /*=========================================================================================================================================== (CONFIGURAÇÕES DA ÁREA CABEÇALHO) ===========================================================================================================================================*/ /*Configurações para class Cabeçalho*/ div.Cabecalho{ display: grid; grid-template-columns: 90% 10%; grid-template-rows: 15dvh; grid-template-areas: "Logo Reservado"; grid-area: Cabecalho; }/*Final das configurações da class Cabeçalho*/ /*(Configurações para os herdeiros da class cabeçalho)*/ /*Configurações para imagem do logo*/ img.LogoColegio{ max-width: 55%; width: 100%; margin-top: 1.5%; margin-left: 30%; }/*Final das configurações da class logo do colégio*/ div.Frase{ display: none; } div.Menu{ display: none; } div.Resevada{ border-left:none; }/*Final das configurações da class area reservada */ img.IconeMenuCelulares{ display: block; max-width: 60%; width: 100%; margin-top: 60%; } /* Final das configurações para o icone do menu para celulares */ p.AreasReservadas{ display:none; }/*Final das configurações da class Areas Reservadas*/ div.AreaReservadaAluno{ display:none; }/*Final das configurações da class area reservada aluno*/ div.AreaReservadaFuncionarios{ display:none; }/*Final das configurações da class area reservada funcionários*/ /*Configurações para class rodapé*/ div.Rodape{ display:grid; grid-area: Rodape; max-width: 100%; width: 100%; padding: 1%; background-color: #00AFEF; grid-template-columns: 50% 50%; grid-template-rows: 10dvh; grid-template-areas: "Contatos Localizacao"; }/*Final das configurações da class rodapé*/ /*Configurações da class imagem telefone*/ img.FiguraTelefone{ max-width: 15%; width: 100%; margin-top: 0%; margin-left:4%; }/*Final das configurações da class imagem telefone */ /*Configurações da class numero de telefone */ p.NumerodeTelefone{ margin-top:-11%; margin-left: 23%; margin-bottom:-8%; font-size:5vw; font-weight: bold; color:black; }/*Final das configurações da class numero de telefone*/ /*Configurações da class imagem email*/ img.Figuraemail{ max-width: 15%; width: 100%; margin-top: 14%; margin-left: 45%; }/*Final das configurações da class imagem email */ /*Configurações da class email */ p.email{ margin-top:2%; margin-left: 5%; font-size:2vw; font-weight: bold; color:black; }/*Final das configurações da class email*/ /* ---------------------------------------------- (CONFIGURAÇÕES DA DIV LOCALIZAÇÃO) -----------------------------------------------*/ /*Configurações da class localizção*/ div.Localizacao{ grid-area: Localizacao; max-width: 100%; width:100%; }/*Final das configurações da class localização*/ /*Configurações da class imagem email*/ img.FiguraLocalizacao{ max-width: 18%; width: 100%; margin-top:7%; margin-left: 15%; }/*Final das configurações da class imagem localização */ /*Configurações da class endereço */ p.Endereco{ margin-top:-18%; margin-left: 35%; font-size:2.2vw; font-weight: bold; color:black; }/*Final das configurações da class endereço*/ /*Configurações da class rua */ p.Rua{ margin-top:3%; margin-left: 37%; font-size:2.2vw; font-weight: bold; color:black; text-align: center; }/*Final das configurações da class rua*/ } /* Final da Midia @media (min-width:10px) and (max-width:479px)*/