From bdc08523b7af1b81133cccc13b12e6ee4f9c6c8f Mon Sep 17 00:00:00 2001
From: Mateus Ribeiro <160142915+Mateus-Ribeir0@users.noreply.github.com>
Date: Wed, 29 May 2024 14:23:23 -0300
Subject: [PATCH] Update style.css

---
 style/style.css | 381 ++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 367 insertions(+), 14 deletions(-)

diff --git a/style/style.css b/style/style.css
index 549de5a..e073230 100644
--- a/style/style.css
+++ b/style/style.css
@@ -1,3 +1,5 @@
+
+
 /*FONTES*/
 
 @font-face {
@@ -24,8 +26,7 @@
 }
 
 header {
-  background-color: #e1cb6af0;
-  padding: 10px 20px;
+  background-color: #e1cb6a;
   position: fixed;
   top: 0;
   width: 100%;
@@ -34,6 +35,59 @@ header {
   z-index: 1000;
 }
 
+/* Estilização do container dos botões */
+#language-switcher {
+  display: flex;
+  justify-content: center;
+  margin-right: 40px;
+}
+
+/* Estilização dos botões */
+#language-switcher button {
+  background-color:  rgb(165, 42, 42);
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  margin: 5px;
+  font-size: 16px;
+  font-family: 'Arial', sans-serif;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.3s;
+}
+
+#language-switcher button:hover {
+  background-color: #45a049; 
+  transform: scale(1.05); 
+}
+
+#language-switcher button:focus {
+  outline: none;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
+}
+
+
+#language-switcher button.active {
+  background-color: #2E7D32; 
+}
+
+
+/* Estilo do ícone de hambúrguer */
+.hamburger {
+  display: none;
+  flex-direction: column;
+  cursor: pointer;
+  margin-right: 40px;
+  z-index: 1001;
+}
+
+.hamburger div {
+  width: 25px;
+  height: 4px;
+  background-color: #059424;
+  margin: 5px 0;
+}
+
 .navbar {
   display: flex;
   justify-content: space-between;
@@ -139,13 +193,16 @@ main {
 
 .conteiner_img {
   display: flex;
-  background-color: #059424;
+  background-image: url('/img/backgroundItalia.png');
+  background-size: 2000px;
+  background-position: top;
+  background-repeat: no-repeat;
   padding: 0;
   margin-bottom: 0;
 }
 
 .img_text {
-  max-width: 450px;
+  max-width: 420px;
   max-height: auto;
   margin-right: 0;
 }
@@ -168,8 +225,8 @@ main {
 
 .text_img p {
   text-align: justify;
-  padding-right: 40px;
-  padding-left: 40px;
+  padding-right: 60px;
+  padding-left: 60px;
   font-size: 18px;
   color: white;
   font-family: italiana;
@@ -202,6 +259,7 @@ main {
   background-repeat: no-repeat;
   margin-top: 0px;
   padding-top: 40px;
+  
 }
 
 .espacos {
@@ -314,14 +372,28 @@ main {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
 .foto {
-  width: calc(20% - 10px);
+  width: 250px;
+  height: 250px; 
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
+  border-radius: 10px; 
+  transition: all 0.5s ease;
+  width: calc(20% - 20px);
   margin-bottom: 20px;
   border: 4px #059424 ridge;
 }
 
+.foto:hover {
+  transform: scale(1.05); 
+  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
 .foto img {
   width: 100%;
   height: 100%;
@@ -403,7 +475,7 @@ main {
   color:#CE2B37;
 }
 
-fieldset{
+fieldset {
   padding-left: 40px;
 }
 
@@ -454,7 +526,7 @@ textarea {
 }
 
 input[type="submit"] {
-  width: 93%;
+  width: 100%;
   padding: 10px;
   border: none;
   border-radius: 4px;
@@ -468,8 +540,8 @@ input[type="submit"]:hover {
   background-color: #009246;
 }
 
-.forms-content{
-  background-color:  #ddc559;
+.forms-content {
+  background-color: #ddc559;
   padding: 40px;
   margin-top: 0px;
 }
@@ -494,12 +566,12 @@ input[type="submit"]:hover {
   margin: 0 12px;
 }
 
-#textura{
+#textura {
   background-image: url('/img/textura.png');
   background-size: 60px;
   background-position: bottom right;
   background-repeat: repeat;
-  background-color:  #ddc559;
+  background-color: #ddc559;
   padding-top: 40px;
 }
 
@@ -516,4 +588,285 @@ footer p {
   font-size: 24px;
   color: #ddc559;
   margin: 0;
-}
\ No newline at end of file
+}
+
+/* Regras de mídia para largura máxima de 768px */
+@media only screen and (max-width: 768px) {
+  .navbar-items {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    padding: 0;
+    position: absolute;
+    top: 60px;
+    right: 0;
+    background-color: rgba(225, 203, 106);
+    width: 100%;
+    transition: all 0.3s ease;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+  }
+
+  #hamburger{
+    margin:0;
+    padding: 0;
+  }
+
+  .navbar-items li {
+    display: block;
+    margin: 15px 0;
+    text-align: center;
+  }
+
+  .navbar-items a {
+    text-decoration: none;
+    color: #333;
+    font-size: 18px;
+    transition: color 0.3s ease;
+  }
+
+  .navbar-items a:hover {
+    color: #059424;
+  }
+
+  .hamburger {
+    display: flex;
+    margin-left: 10px!important;
+  }
+
+
+/* Estilo para mostrar o menu no modo responsivo */
+.navbar-items.show {
+  display: flex;
+}
+
+/* Adicionando transições */
+.navbar-items {
+  transition: all 0.3s ease;
+}
+
+  .container_video {
+    height: 600px;
+    padding-top: 40px;
+  }
+
+  .over-video {
+    font-size: 28px;
+    padding: 10px;
+    border-radius: 25px;
+  }
+
+  .over-video-img {
+    max-width: 200px;
+  }
+
+  .conteiner_img {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .img_text {
+    display: none;
+  }
+
+  .text_img h3 {
+    font-size: 36px;
+  }
+
+  .text_img p {
+    padding: 0 20px;
+  }
+
+  #cardapio_geral,
+  #cardapio_geral2 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 10px;
+  }
+
+  #side-left,
+  #side-right,
+  #side-left2,
+  #side-right2 {
+    width: 100%;
+    padding: 0;
+    margin-bottom: 20px;
+  }
+
+  .fotos {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .foto {
+    width: 45%;
+    margin: 5px;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  iframe {
+    width: 100%;
+    height: 300px;
+  }
+
+  .centro-galeria { 
+    background-image: none; 
+  }
+
+  /* Estilos para o formulário */
+
+  .teste {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .coluna {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+
+  .coluna label {
+    display: block;
+    margin-bottom: 5px;
+    color: #333;
+  }
+
+  .coluna input,
+  .coluna select,
+  .coluna textarea {
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    border: 1px solid #ccc; 
+    border-radius: 4px; 
+  }
+
+  .coluna textarea {
+    height: 100px;
+  }
+
+  .coluna input[type="submit"] {
+    padding: 0;
+    width: 120px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px; 
+    margin: auto;
+  }
+
+  #botao{
+    text-align: center;
+    margin:0;
+  }
+
+  .coluna input[type="submit"]:hover {
+    background-color: #555;
+  }
+
+  form#contato {
+    width: 100%;
+    max-width: 768px;
+    margin: 0 auto;
+  }
+
+  #textura{
+    display: none;
+  }
+
+  fieldset{
+    padding-left: 0px;
+  }
+
+  .container {
+    padding: 0 0px;
+    text-align: center;
+    margin: 0;
+  }
+
+  .horario,
+  .horario2 {
+    text-align: center;
+    margin-bottom: 20px;
+    border: none;
+    padding-left: 100px;
+    padding-right: 100px;
+  }
+
+  .horario2 {
+    padding-top: 0 !important;
+  }
+
+  .fotos {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .foto {
+    width: 45%;
+    margin: 5px;
+  }
+
+  .galeria-total{
+    padding-bottom: 50px;
+  }
+
+  .centro {
+    margin-top: 0px;
+    padding-top: 100px;
+    background-size: 130px;
+    background-position: right 20px;
+  }
+
+  .text_img{
+    background-color: #059424;
+    padding-bottom: 60px;
+
+  }
+  .text_img p{
+    background-color: #059424;
+    font-size: 16px;
+  }
+
+  #side-left2 {
+    background-position: left 0px;
+    background-size: 130px;
+  }
+
+  .navbar-items{
+    background-color: #e1cb6a;
+    box-shadow: none;
+  }
+
+.navbar-items {
+  display: none;
+}
+
+.navbar-items.show {
+  display: block;
+  animation: fadeIn 0.5s ease forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.content p{
+  margin-top: 120px;
+}
+
+}