diff --git a/page1.css b/page1.css index 2f4ee0d..522dfdd 100644 --- a/page1.css +++ b/page1.css @@ -1,86 +1,340 @@ -/* Importação da fonte */ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); - -/* Reset CSS e definição da fonte padrão */ +/* Reset básico */ * { margin: 0; padding: 0; box-sizing: border-box; - font-family: 'Poppins', sans-serif; } -/* Estilos gerais do body */ body { - background: #eaeaea; + font-family: Arial, sans-serif; + background-color: #f4f4f4; +} + +/* Cabeçalho */ +header { + background-color: #002e4f; /* Cor do cabeçalho azul escuro */ + padding: 20px; + display: flex; + justify-content: space-between; + align-items: center; + color: white; +} + +.header-left { + display: flex; + align-items: center; +} + +.logo img { + margin-right: 20px; +} + +.social-media { + display: flex; + gap: 15px; +} + +/* Menu de navegação */ +nav ul { + list-style-type: none; + display: flex; + gap: 20px; } -/* Estilos do cabeçalho */ -.header { +nav ul li a { + color: white; + text-decoration: none; + font-size: 16px; +} + +/* Dropdown */ +.dropdown-content { + display: none; + position: absolute; + background-color: #002e4f; + min-width: 160px; + z-index: 1; +} + +.dropdown:hover .dropdown-content { + display: block; +} + +.dropdown-content a { + color: white; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.dropdown-content a:hover { + background-color: #004d7a; +} + +/* Banner com imagem e degradê */ +.banner { position: relative; + height: 300px; + background-image: linear-gradient(rgba(0, 46, 79, 0.7), rgba(0, 46, 79, 0.7)), url('https://s1.static.brasilescola.uol.com.br/be/conteudo/images/selecao-feminina-volei-brasileiro-vs-republica-dominicana-durante-copa-mundo-voleibol-em-milao-2014-5a61dd1800d77.jpg'); + background-size: cover; + background-position: center; +} + +.banner-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; text-align: center; +} + +.highlight { + color: #ffcc00; +} + +/* Grid de notícias */ +.noticias { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + padding: 20px; +} + +.noticia-card { + background-color: white; + padding: 15px; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.noticia-card img { width: 100%; - padding: 30px 8%; - background: transparent; + height: auto; + border-radius: 8px; + margin-bottom: 15px; +} + +.noticia-card h3 { + font-size: 18px; + margin-bottom: 10px; +} + +/* Rodapé */ +footer { + background-color: #ffffff; /* Fundo do rodapé branco */ + padding: 20px; + border-top: 1px solid #cccccc; /* Linha separadora no topo */ +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; /* Espaço inferior */ +} + +.footer-left { display: flex; - justify-content: center; align-items: center; - z-index: 100; } -/* Estilos do logo */ -.logo { - font-size: 25px; - color: #222; +.footer-left .logo img { + width: 70px; + height: 70px; +} + +.footer-social-media a { + margin: 0 10px; text-decoration: none; - font-weight: 600; - opacity: 0; - animation: slideRight 1s ease forwards; + color: #000; /* Cor do texto */ +} + +.footer-partners, +.footer-suppliers { + display: flex; + flex-direction: column; /* Coloca os títulos e as imagens em coluna */ + align-items: center; /* Centraliza os itens */ + text-align: center; /* Centraliza o texto dentro dos itens */ + margin-bottom: 20px; /* Espaçamento inferior */ } -/* Estilos da barra de navegação */ -.navbar { +.footer-partners .partner-row { display: flex; + justify-content: center; /* Centraliza as imagens na linha */ + margin-bottom: 10px; /* Espaçamento entre as linhas de parcerias */ +} + +.footer-partners h3, +.footer-suppliers h3 { + margin-bottom: 10px; /* Espaçamento inferior nos títulos */ +} + +.footer-partners img, +.footer-suppliers img { + width: 120px; /* Largura das imagens */ + height: auto; /* Mantém a proporção */ + margin: 0 10px; /* Espaçamento entre as imagens */ +} + +.footer-suppliers { + margin-top: 20px; /* Espaçamento superior */ +} + +.footer-supplier { + display: flex; + justify-content: center; /* Centraliza as imagens dos fornecedores */ +} + +.footer-supplier img { + width: 120px; /* Largura das imagens */ + height: auto; /* Mantém a proporção */ + margin: 0 10px; /* Espaçamento entre as imagens */ +} + +.footer-technical-sustainability { + display: flex; + justify-content: space-between; /* Espaçamento entre as seções */ + margin-top: 20px; /* Espaçamento superior */ +} + +.footer-technical-sustainability div { + width: 45%; /* Largura das seções técnico e sustentabilidade */ + text-align: left; /* Alinha o texto à esquerda */ +} + +.footer-bottom { + text-align: center; /* Centraliza o texto do rodapé */ + margin-top: 20px; /* Espaçamento superior */ + font-size: 14px; /* Tamanho da fonte */ +} +.footer-black { + background-color: #000000; /* Fundo preto */ + color: #FFFFFF; /* Texto branco */ + padding: 20px; + margin-top: 20px; /* Espaçamento superior em relação ao rodapé anterior */ +} + +.footer-black .footer-content { + display: flex; + justify-content: space-between; /* Espaço entre logo e redes sociais */ align-items: center; } -.navbar a { - font-size: 18px; - color: #000; +.footer-black .footer-left { + display: flex; + align-items: center; +} + +.footer-black .footer-left .logo img { + width: 70px; + height: 70px; +} + +.footer-black .footer-social-media a { + margin: 0 10px; +} + +.footer-black .footer-bottom { + text-align: center; /* Centraliza o texto do rodapé */ + margin-top: 10px; /* Espaçamento superior */ + font-size: 14px; /* Tamanho da fonte */ +} +header h1 { + margin-bottom: 10px; +} + +nav ul { + list-style-type: none; + display: flex; + justify-content: center; + padding: 0; +} + +nav ul li { + position: relative; + margin: 0 15px; +} + +nav ul li a { + color: white; text-decoration: none; - font-weight: 500; - margin: 0 20px; - transition: 0.3s; + padding: 10px; + display: block; +} + +nav ul li:hover a { + background-color: #004d99; } -/* Estilos do conteúdo do menu dropdown */ -.navbar .dropdown-content a { +.dropdown-content { + display: none; + position: absolute; + background-color: white; + min-width: 150px; + box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); + z-index: 1; + text-align: left; +} + +.dropdown-content li { + margin: 0; +} + +.dropdown-content li a { + color: #333; + padding: 12px 16px; display: block; - padding: 10px 20px; + text-decoration: none; } -.navbar a:hover { - color: #1743e3; +.dropdown-content li a:hover { + background-color: #ddd; } -header { - background-color: black; - width: 100%; - height: 60px; - text-align: center; - color: white; +/* Dropdown aparece ao passar o mouse */ +.dropdown:hover .dropdown-content { + display: block; +} + +main { + padding: 20px; + background-color: white; + margin: 20px auto; + width: 80%; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); +} + + +.footer-content { display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 20px; } -header h1 { - font-size: 17px; - padding-left: 25px; - margin-top: 20px; +.footer-column { + width: 22%; } -header h1:nth-child(5) { - margin-right: 150px; +.footer-column h3 { + color: blue; + margin-bottom: 10px; +} + +.footer-column ul { + list-style-type: none; + padding: 0; +} + +.footer-column ul li { + margin-bottom: 5px; +} + +.footer-contact { + text-align: center; } -header h1:nth-child(6) { - margin-right: 80px; +.footer-contact p { + margin-bottom: 10px; }