/* ========================================================= ESTILO.CSS SITE: CANIL GROENENDAEL PARTE 1/5 HTML5 + CSS3 Compatível com KompoZer Sem JavaScript Otimizado para smartphone ========================================================= */ /* ====================================================== RESET GERAL ====================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ====================================================== CONFIGURAÇÃO GERAL DA PÁGINA ====================================================== */ html { font-size: 100%; scroll-behavior: smooth; } body { background: #ffffff; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; text-align: center; margin: 0; padding: 0; } /* ====================================================== IMAGENS ====================================================== */ img { max-width: 100%; height: auto; border: 0; } /* ====================================================== LINKS ====================================================== */ a { color: #1b5e9b; text-decoration: none; } a:hover { text-decoration: underline; } /* ====================================================== TITULOS ====================================================== */ h1, h2, h3, h4, h5 { font-family: Georgia, "Times New Roman", serif; font-weight: bold; color: #164b7a; line-height: 1.3; margin-bottom: 15px; } h1 { font-size: 2em; letter-spacing: 1px; } h2 { font-size: 1.6em; } h3 { font-size: 1.3em; } h4, h5 { font-size: 1.1em; } /* ====================================================== PARÁGRAFOS ====================================================== */ p { margin-bottom: 15px; text-align: justify; } /* ====================================================== LISTAS ====================================================== */ ul, ol { margin-left: 30px; margin-bottom: 15px; } li { margin-bottom: 8px; } /* ====================================================== CONTAINER PRINCIPAL ====================================================== */ #wrapper { width: 100%; max-width: 1100px; margin: 0 auto; padding-left: 20px; padding-right: 20px; background: #ffffff; } /* ====================================================== ÁREA GERAL DO SITE ====================================================== */ .container { width: 100%; margin: 0 auto; } /* ====================================================== ÁREA DE CONTEÚDO PRINCIPAL ====================================================== */ main { width: 100%; padding: 20px; text-align: left; } /* ====================================================== CLASSES AUXILIARES ====================================================== */ .clear { clear: both; } .centralizar { text-align: center; } .esquerda { text-align: left; } .direita { text-align: right; } /* ====================================================== FIM DA PARTE 1 ====================================================== */ /* ========================================================= ESTILO.CSS SITE: CANIL GROENENDAEL PARTE 2/5 CABEÇALHO LOGO BANNER MENU HORIZONTAL ========================================================= */ /* ====================================================== CABEÇALHO PRINCIPAL ====================================================== */ header { width: 100%; background: #ffffff; text-align: center; padding: 20px; } /* ====================================================== ÁREA DO LOGOTIPO ====================================================== */ .logo { width: 100%; text-align: center; margin-bottom: 15px; } .logo img { max-width: 250px; height: auto; } .logo h1 { margin-top: 10px; color: #164b7a; font-size: 2em; } /* ====================================================== SLOGAN / TEXTO DO CABEÇALHO ====================================================== */ .slogan { font-size: 1.1em; color: #555555; margin-bottom: 20px; } /* ====================================================== BANNER SUPERIOR ====================================================== */ .banner { width: 100%; margin: 0 auto 20px auto; text-align: center; overflow: hidden; } .banner img { width: 100%; max-height: 350px; object-fit: cover; } /* ====================================================== MENU PRINCIPAL HORIZONTAL ====================================================== */ nav { width: 100%; background: #164b7a; margin: 0 auto 25px auto; padding: 0; } nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; } nav ul li { margin: 0; padding: 0; } nav ul li a { display: block; padding: 12px 18px; color: #ffffff; font-size: 16px; text-decoration: none; } nav ul li a:hover { background: #0d3558; text-decoration: none; } nav ul li.ativo a { background: #0d3558; color: #ffffff; font-weight: bold; } /* ====================================================== MENU ALTERNATIVO POR CLASSE (compatível com páginas antigas) ====================================================== */ .menu { width: 100%; text-align: center; } .menu a { display: inline-block; padding: 10px 15px; margin: 2px; background: #164b7a; color: #ffffff; border-radius: 3px; } .menu a:hover { background: #0d3558; } /* ====================================================== FAIXAS E TÍTULOS DE SEÇÃO ====================================================== */ .titulo-secao { background: #164b7a; color: #ffffff; padding: 12px; margin-bottom: 20px; font-size: 1.4em; text-align: center; } /* ====================================================== FIM DA PARTE 2 ====================================================== */ /* ========================================================= ESTILO.CSS SITE: CANIL GROENENDAEL PARTE 3/5 CONTEÚDO PRINCIPAL COLUNAS SIDEBAR CAIXAS INTERNAS GALERIAS ========================================================= */ /* ====================================================== ÁREA PRINCIPAL DO SITE ====================================================== */ #conteudo { width: 100%; padding: 20px; text-align: left; } /* ====================================================== LAYOUT COM DUAS COLUNAS ====================================================== */ #principal { width: 70%; float: left; padding-right: 25px; } #lateral { width: 30%; float: right; padding-left: 15px; } /* ====================================================== ÁREA LATERAL / SIDEBAR ====================================================== */ .sidebar { background: #f5f5f5; border: 1px solid #dddddd; padding: 15px; margin-bottom: 20px; } .sidebar h2 { font-size: 1.3em; color: #164b7a; margin-bottom: 10px; } .sidebar ul { margin-left: 20px; } /* ====================================================== CAIXAS DE INFORMAÇÃO ====================================================== */ .caixa { background: #f8f8f8; border: 1px solid #dddddd; padding: 20px; margin-bottom: 20px; } .caixa-destaque { background: #eef5fa; border-left: 5px solid #164b7a; padding: 20px; margin-bottom: 20px; } /* ====================================================== ARTIGOS E TEXTOS ====================================================== */ .artigo { width: 100%; margin-bottom: 30px; } .artigo img { margin: 10px 0; } /* ====================================================== IMAGENS DENTRO DO CONTEÚDO ====================================================== */ .imagem-esquerda { float: left; margin: 0 20px 15px 0; } .imagem-direita { float: right; margin: 0 0 15px 20px; } .imagem-centro { display: block; margin: 20px auto; text-align: center; } /* ====================================================== GALERIA DE FOTOS ====================================================== */ .galeria { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; } .galeria-item { width: 30%; text-align: center; } .galeria-item img { width: 100%; border: 1px solid #cccccc; padding: 5px; background: #ffffff; } .galeria-item p { text-align: center; font-size: 0.9em; } /* ====================================================== TABELAS ====================================================== */ table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } table th { background: #164b7a; color: #ffffff; padding: 10px; text-align: center; } table td { border: 1px solid #dddddd; padding: 10px; } /* ====================================================== BOTÕES ====================================================== */ .botao { display: inline-block; background: #164b7a; color: #ffffff; padding: 10px 20px; border-radius: 4px; text-decoration: none; } .botao:hover { background: #0d3558; text-decoration: none; } /* ====================================================== AJUSTE DE ELEMENTOS FLUTUANTES ====================================================== */ .clearfix::after { content: ""; display: table; clear: both; } /* ====================================================== FIM DA PARTE 3 ====================================================== */ /* ========================================================= ESTILO.CSS SITE: CANIL GROENENDAEL PARTE 4/5 RODAPÉ FORMULÁRIOS ELEMENTOS ESPECIAIS ACABAMENTO GERAL ========================================================= */ /* ====================================================== RODAPÉ DO SITE ====================================================== */ footer { width: 100%; background: #164b7a; color: #ffffff; text-align: center; padding: 25px 20px; margin-top: 30px; } footer p { color: #ffffff; text-align: center; margin-bottom: 8px; } footer a { color: #ffffff; } footer a:hover { color: #dddddd; } /* ====================================================== ÁREA DE CRÉDITOS ====================================================== */ .creditos { font-size: 0.9em; margin-top: 15px; } /* ====================================================== FORMULÁRIO DE CONTATO ====================================================== */ form { width: 100%; max-width: 700px; margin: 0 auto; text-align: left; } label { display: block; font-weight: bold; margin-bottom: 5px; color: #333333; } input, textarea, select { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #cccccc; font-family: Arial, Helvetica, sans-serif; font-size: 16px; } textarea { min-height: 150px; resize: vertical; } input:focus, textarea:focus, select:focus { border-color: #164b7a; outline: none; } /* ====================================================== BOTÃO DO FORMULÁRIO ====================================================== */ input[type="submit"] { width: auto; background: #164b7a; color: #ffffff; padding: 12px 25px; cursor: pointer; border: none; } input[type="submit"]:hover { background: #0d3558; } /* ====================================================== MAPA / LOCALIZAÇÃO ====================================================== */ .mapa { width: 100%; margin: 20px auto; text-align: center; } .mapa iframe { max-width: 100%; border: 0; } /* ====================================================== AVISOS E DESTAQUES ====================================================== */ .aviso { background: #fff7d6; border: 1px solid #e6d48a; padding: 15px; margin-bottom: 20px; } .sucesso { background: #e8f5e9; border: 1px solid #a5d6a7; padding: 15px; margin-bottom: 20px; } .alerta { background: #ffebee; border: 1px solid #ef9a9a; padding: 15px; margin-bottom: 20px; } /* ====================================================== SEPARADORES ====================================================== */ .linha { width: 100%; height: 1px; background: #dddddd; margin: 25px 0; } /* ====================================================== CITAÇÕES ====================================================== */ blockquote { background: #f5f5f5; border-left: 5px solid #164b7a; padding: 15px 20px; margin: 20px 0; font-style: italic; } /* ====================================================== ESPAÇAMENTOS AUXILIARES ====================================================== */ .margem-topo { margin-top: 20px; } .margem-baixo { margin-bottom: 20px; } .padding { padding: 20px; } /* ====================================================== FIM DA PARTE 4 ====================================================== */ /* ========================================================= ESTILO.CSS SITE: CANIL GROENENDAEL PARTE 5/5 AJUSTES PARA SMARTPHONE MEDIA QUERY MARGENS LATERAIS MENU MOBILE COLUNAS ========================================================= */ /* ====================================================== TABLETS ====================================================== */ @media screen and (max-width: 900px) { #principal { width: 100%; float: none; padding-right: 0; } #lateral { width: 100%; float: none; padding-left: 0; margin-top: 20px; } .galeria-item { width: 45%; } } /* ====================================================== SMARTPHONES ====================================================== */ @media screen and (max-width: 600px) { /* ----------------------------------------------- Margens laterais para evitar texto colado nas bordas do celular ----------------------------------------------- */ body { padding-left: 10px; padding-right: 10px; } #wrapper { width: 100%; padding-left: 15px; padding-right: 15px; } header { padding: 15px 10px; } main, #conteudo { padding: 10px; } /* ----------------------------------------------- Tipografia ajustada para telas pequenas ----------------------------------------------- */ h1 { font-size: 1.6em; } h2 { font-size: 1.35em; } h3 { font-size: 1.15em; } p { font-size: 16px; line-height: 1.7; } /* ----------------------------------------------- Menu vertical para celular ----------------------------------------------- */ nav ul { display: block; } nav ul li { width: 100%; } nav ul li a { text-align: center; padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.20); } /* ----------------------------------------------- Galeria adaptada ----------------------------------------------- */ .galeria { display: block; } .galeria-item { width: 100%; margin-bottom: 20px; } /* ----------------------------------------------- Imagens flutuantes anuladas para melhor leitura ----------------------------------------------- */ .imagem-esquerda, .imagem-direita { float: none; display: block; margin: 15px auto; } /* ----------------------------------------------- Tabelas em telas pequenas ----------------------------------------------- */ table { font-size: 14px; } table th, table td { padding: 8px; } /* ----------------------------------------------- Formulários ----------------------------------------------- */ form { width: 100%; } input, textarea, select { font-size: 16px; } /* ----------------------------------------------- Rodapé ----------------------------------------------- */ footer { padding: 20px 10px; } } /* ====================================================== CELULARES MUITO PEQUENOS ====================================================== */ @media screen and (max-width: 380px) { #wrapper { padding-left: 12px; padding-right: 12px; } h1 { font-size: 1.4em; } nav ul li a { font-size: 15px; } } /* ====================================================== FIM DO ESTILO.CSS CONSOLIDADO ====================================================== */