From f3360a280b8895756f68712ef73856601ff6a771 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Miguel?= <97974646+Cavera360JM@users.noreply.github.com> Date: Fri, 11 Oct 2024 11:55:13 -0300 Subject: [PATCH] Update page1.css --- page1.css | 232 +----------------------------------------------------- 1 file changed, 1 insertion(+), 231 deletions(-) diff --git a/page1.css b/page1.css index b3b764b..54ca7cd 100644 --- a/page1.css +++ b/page1.css @@ -1,231 +1 @@ -/* 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 */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Poppins', sans-serif; -} - -/* Estilos gerais do body */ -body { - background: #eaeaea; -} - -/* Estilos do cabeçalho */ -.header { - position: relative; - width: 100%; - padding: 30px 8%; - background: transparent; - display: flex; - justify-content: space-between; - align-items: center; - z-index: 100; -} - -/* Estilos do logo */ -.logo { - font-size: 25px; - color: #222; - text-decoration: none; - font-weight: 600; - opacity: 0; - animation: slideRight 1s ease forwards; -} - -/* Estilos da barra de navegação */ -.navbar { - display: flex; - align-items: center; -} - -.navbar a { - font-size: 18px; - color: #000; - text-decoration: none; - font-weight: 500; - margin: 0 20px; - transition: 0.3s; -} - -/* Estilos do conteúdo do menu dropdown */ -.navbar .dropdown-content a { - display: block; - padding: 10px 20px; -} - -.navbar a:hover { - color: #1743e3; -} - -/* Estilos das redes sociais */ -.social-media { - display: flex; - justify-content: space-between; - width: 150px; - height: 40px; -} - -.social-media a { - display: inline-flex; - justify-content: center; - align-items: center; - width: 40px; - height: 40px; - background: transparent; - border: 2px solid transparent; - text-decoration: none; - transform: rotate(45deg); - transition: 0.5s; -} - -.social-media a:hover { - border-color: #eaeaea; -} - -.social-media a i { - font-size: 24px; - color: #eaeaea; - transform: rotate(-45deg); -} - -/* Estilos da seção home */ -.home { - position: relative; - width: 100%; - height: 100vh; - display: flex; - justify-content: space-between; - align-items: center; - padding: 50px 8% 0; - overflow: hidden; -} - -/* Estilos do conteúdo da seção home */ -.home-content { - max-width: 630px; - position: relative; - z-index: 1; - margin-left: -12px; -} - -.home-content h1 { - font-size: 50px; - line-height: 1.2; -} - -.home-content h3 { - font-size: 25px; - color: #1743e3; - margin-bottom: 10px; -} - -.home-content p { - font-size: 16px; - margin: 5px 0 20px; - padding-left: 1px; -} - -/* Estilos do botão */ -.btn { - display: inline-block; - padding: 10px 28px; - background: #1743e3; - border: 2px solid #1743e3; - border-radius: 6px; - box-shadow: 0 0 10px rgba(0, 0, 0, .1); - font-size: 16px; - color: #eaeaea; - letter-spacing: 1px; - text-decoration: none; - font-weight: 600; - transition: .5s; -} - -.btn:hover { - background: transparent; - color: #1743e3; -} - -/* Estilos da imagem na seção home */ -.home-img { - position: relative; - right: -7%; - width: 450px; - height: 450px; - transform: rotate(45deg); -} - -.home-img .rhombus { - position: absolute; - width: 100%; - height: 100%; - background: #eaeaea; - border: 10px solid #1743e3; - box-shadow: -15px 15px 15px rgba(0, 0, 0, .2); -} - -.home-img .rhombus img { - position: absolute; - top: 80px; - left: -200px; - max-width: 750px; - transform: rotate(-45deg); -} - -/* Elemento de fundo da seção home */ -.home .rhombus2 { - position: absolute; - top: -25%; - right: -25%; - width: 700px; - height: 700px; - background: #1743e3; - transform: rotate(45deg); - z-index: -1; -} - -/* Estilos do menu dropdown */ -.dropdown-content { - display: none; - position: absolute; - background-color: #f9f9f9; - min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); - z-index: 1; -} - -.dropdown:hover .dropdown-content { - display: block; -} - -/* Animação de entrada do logo */ -@keyframes slideRight { - 0% { - transform: translateX(-100px); - opacity: 0; - } - 100% { - transform: translateX(0); - opacity: 1; - } -} - - - @keyframes slideDown { - from { - transform: translateY(0); - opacity: 1; - } - to { - transform: translateY(100%); - opacity: 0; - } - } - - .slide-down { - animation: slideDown 1s ease forwards; /* Ajuste a duração para 1 segundo */ - } +*{ padding: 0; margin: 0; font-family: 'Josefin Sans', sans-serif; box-sizing: border-box; } .background{ background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUK_9oQlt10hst8pgqFfI14Wmk83gdj8XTuw&s); background-size: cover; background-position: center; height: 100vh; width: 100%; } nav{ display: flex; align-items: center; justify-content: space-between; padding: 45px; padding-left: 8%; padding-right: 8%; } .logo{ color: #fff; font-size: 35px; cursor: pointer; letter-spacing: 1px; } span{ color: #EAD609;; } nav ul li{ list-style-type: none; display: inline-block; padding: 10px 25px; } nav ul li a{ color: #fff; text-decoration: none; font-weight: bold; text-transform: capitalize; } nav ul li{ list-style-type: none; display: inline-block; padding: 10px 25px; } nav ul li a{ color: #fff; text-decoration: none; font-weight: bold; text-transform: capitalize; } nav ul li a:hover{ color: #EAD609; transform: .4s; } .Main span{ color: #EAD609; } h1{ color: #fff; margin: 20px 0px 20px; font-size: 75px; }