update

ocultei os botões do slider
SimonePenido · Sep 15, 2024 · b04cfe0 · b04cfe0
1 parent 0645733
commit b04cfe0
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 49 deletions.
diff --git a/contato.css b/contato.css
@@ -28,13 +28,21 @@ body{
     list-style-type: none;
     text-decoration: none;
 }
+@media screen and (max-width: 768px) {
+    .nav-container .brand {
+        font-size: 1.5rem;
+    }
+
+}
+
 /* Estilos para o contêiner */
 .container {
     display: flex;
     align-items: center;
     justify-content: space-between; /* Adicionado para alinhar os itens nas extremidades */
 }
 
+
 /* Estilos para o formulário */
 form {
     width: 50%; /* Defina a largura do formulário conforme necessário */
@@ -85,11 +93,13 @@ input[type=text], input[type=email], input[type=tel], textarea {
     .container {
         flex-direction: column; /* Mudar para empilhamento em telas menores */
         align-items: center; /* Centralizar os itens */
+        display: flex;
     }
 
-    .imagem,
-    form {
-        width: 80%; /* Reduzir a largura dos itens para melhor ajuste em telas menores */
+    .form {
+        align-items: center;
+        width: 100%; /* Defina a largura do formulário para 100% */
+
     }
 }
 
diff --git a/footer.css b/footer.css
@@ -240,7 +240,8 @@ footer ul {
     .footer-container {
         flex-direction: column; /* Empilha os elementos verticalmente */
         padding: 1rem;
-        text-align: center; /* Centraliza o conteúdo */
+        text-align: center;
+        width: 90%; 
     }
 
     .footer-desc-container,

diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="pt-br">
+<html lang="pt-BR">
 
 <head>
   <meta charset="UTF-8">
@@ -30,7 +30,7 @@
     <div class="nav-container">
 
       <a href="" class="brand">
-        <object data="img/logo2.png" class="fa fa-bars"> </object>   Gothic Wedding
+        <object data="img/logo2.png" class="fa fa-bars"> </object>Gothic Wedding
       </a>
       <nav>
         <ul class="nav-container-navbar">
@@ -65,7 +65,7 @@ <h1>As mais memoráveis Cerimônias de Casamento</h1>
       <a href="contato.html" target="_blank" class="btn"> Fazer Orçamento </a>
     </div>
   </header>
-  <!-- Serviços -->
+
   <main>
 
     <div id="servicos" class="services-container">
@@ -74,12 +74,7 @@ <h2>O que fazemos</h2>
         <div class="services-card">
           <object data="img/saude.png"> </object>
           <h3>Celebração</h3>
-          <p>Se vocês estão buscando uma celebração cheia de personalidade, com toques góticos que refletem sua paixão,
-            a
-            Penido Gothic Wedding está pronta para transformar seu sonho em realidade. Imagine se vestir com trajes
-            vitorianos, entrar em um cenário temático, ouvir trilhas sonoras marcantes e interagir com cada peça do
-            nosso
-            acervo.</p>
+          <p>Se vocês estão buscando uma celebração cheia de personalidade, com toques góticos que refletem sua paixão, a Penido Gothic Wedding está pronta para transformar seu sonho em realidade. Imagine se vestir com trajes vitorianos, entrar em um cenário temático, ouvir trilhas sonoras marcantes e interagir com cada peça do nosso acervo.</p>
         </div>
         <div class="services-card">
           <object data="img/livro-de-convidados.png"> </object>
@@ -89,13 +84,13 @@ <h3>Ambientes</h3>
         <div class="services-card">
           <object data="img/casamento.png"> </object>
           <h3>Trajaes</h3>
-            <p>A Penido Gothic Wedding oferece uma ampla seleção de trajes temáticos para casamentos góticos. Desde vestidos de noiva e trajes de noivo inspirados na era vitoriana até acessórios e detalhes góticos, temos tudo o que você precisa para criar um visual memorável. Nossos trajes são cuidadosamente selecionados e confeccionados para garantir a qualidade e autenticidade. </p>
+            <p>A Penido Gothic Wedding oferece uma ampla seleção de trajes temáticos para casamentos góticos. Desde vestidos de noiva e trajes de noivo inspirados na era vitoriana até acessórios e detalhes góticos, temos tudo o que você precisa para criar um visual memorável. Nossos trajes são cuidadosamente selecionados e confeccionados para garantir a qualidade e autenticidade.</p>
         </div>
         <div class="services-card">
           <object data="img/bolo-de-casamento.png"> </object>
           <h3>Confeitaria</h3>
-            <p></p>
-        Na Penido Gothic Wedding, nossa confeitaria é especializada em criar bolos góticos que são verdadeiras obras de arte. Cada bolo é cuidadosamente elaborado para refletir a estética sombria e elegante que caracteriza nossos eventos. Utilizamos ingredientes de alta qualidade e técnicas avançadas de confeitaria para garantir que cada detalhe seja perfeito. Desde bolos com detalhes em preto e vermelho até designs inspirados na arquitetura gótica, nossos bolos são feitos para impressionar e encantar.
+            <p>
+        Na Penido Gothic Wedding, nossa confeitaria é especializada em criar bolos góticos que são verdadeiras obras de arte. Cada bolo é cuidadosamente elaborado para refletir a estética sombria e elegante que caracteriza nossos eventos. Utilizamos ingredientes de alta qualidade e técnicas avançadas de confeitaria para garantir que cada detalhe seja perfeito. Desde bolos com detalhes em preto e vermelho até designs inspirados na arquitetura gótica, nossos bolos são feitos para impressionar e encantar.</p>
         </div>
         <div class="services-card">
           <object data="img/casamento-video.png"> </object>
@@ -318,15 +313,10 @@ <h2>Decoração</h2>
       <div id="ambientes">
         <h2>Locação de Ambientes</h2>
         <h3>Os mais diversos ambientes para locação.</h3>
-        <div
-          uk-slider="clsActivated: uk-transition-active; center: true; finite: false; pause-on-hover: true; autoplay: true; autoplay-interval: 3500;">
-
-
+        <div uk-slider="clsActivated: uk-transition-active; center: true; finite: false; pause-on-hover: true; autoplay: true; autoplay-interval: 3500;">
 
           <div id="ambientes" class="uk-position-relative uk-visible-toggle uk-light">
-
             <ul class="uk-slider-items uk-child-width-1-2@s uk-grid">
-
               <li>
                 <div class="uk-card uk-card-default">
                   <div class="uk-card-media-top">
@@ -632,25 +622,21 @@ <h3>Os mais diversos ambientes para locação.</h3>
                     </div>
                   </div>
                 </li>
-
               </ul>
-
-
-
-
           </div>
 
+          <a class="uk-position-center-right uk-position-small uk-hidden-hover " href="#" uk-slidenav-next
+          uk-slider-item="next">next</a>
+
+          <a class="uk-position-center-left uk-position-small uk-hidden-hover " href="#" uk-slidenav-previous
+          uk-slider-item="previous"></a>
+
+          <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
         </div>
 
         <!-- Slider Navigation -->
 
-        <a class="uk-position-center-right uk-position-small uk-hidden-hover " href="#" uk-slidenav-next
-        uk-slider-item="next"></a>
-
-        <a class="uk-position-center-left uk-position-small uk-hidden-hover " href="#" uk-slidenav-previous
-        uk-slider-item="previous"></a>
 
-        <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
 
 
   </main>

diff --git a/styles.css b/styles.css
@@ -3,7 +3,7 @@
     --primary-color: rgb(36, 34, 34);
     --light-color: #FFF;
     --dark-color: #181920;
-    --text-color: #8B8E94;
+    --text-color: #414242;
     --black: #000;
     --secondary-bg: #E5EAFF;
     --footer-bg: #1D1D1D;
@@ -153,6 +153,13 @@ nav {
     text-decoration: none;
 }
 
+@media screen and (max-width: 768px) {
+    .nav-container .brand {
+        font-size: 1.7rem;
+    }
+
+}
+
 
 .nav-container-navbar {
     display: flex;
@@ -171,7 +178,7 @@ nav {
 /* Anchor styles */
 .nav-container ul li a {
     color: #A6A6A6;
-    font-size: 1.3rem;
+    font-size: 1rem;
 }
 
 .nav-container ul li a:hover {
@@ -180,12 +187,12 @@ nav {
     padding: 0.3em;
     border-radius: 3px;
     text-decoration: none;
-    transform: scale(0.9); 
+    transform: scale(0.5); 
 }
 
 /* Mobile styles for icon bars */
 .nav-container .fas.fa-bars {
-    font-size: 2rem;
+    font-size: 1.5rem;
     color: #FFF;
     display: none;
 }
@@ -211,15 +218,15 @@ nav {
 @media only screen and (max-width: 768px) {
     .title-container {
         text-align: center;
-        padding: 2rem;
-        font-size: inherit;
+        padding: 3rem;
+        font-size: 1rem;
     }
 }
 
 
 /* Heading 2 styles */
 .title-container h2 {
-    font-size: 3rem;
+    font-size: 2.5rem;
     color: #FFF;
     text-shadow:
         -1px -1px 0px #000,
@@ -231,7 +238,7 @@ nav {
 
 /* Heading 1 styles */
 .title-container h1 {
-    font-size: 4rem;
+    font-size: 3rem;
     margin: 1em;
     color: #FFF;
     text-shadow:
@@ -256,6 +263,12 @@ nav {
     list-style-type: none;
 }
 
+.title-container ul {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+}
+
 .title-container a:hover,
 .services-container a:hover {
     background-color: #181717d5;
@@ -357,6 +370,7 @@ nav {
 /* Paragraph styles */
 .services-card-container p {
     color: var(--text-color);
+    text-align: center;
 }
 
 /* Hover effect styles for services card */
@@ -401,6 +415,12 @@ nav {
     }
 }
 
+@media screen and (max-width: 768px) {
+    .gallery {
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    }
+
+}
 
 .gallery-sample {
     width: 100%;
@@ -466,12 +486,15 @@ nav {
     padding: 0 20px;
     text-align: center;
     padding: 2rem;
-    font-size: 3reem;
+    font-size: 3rem;
     color: var(--black);
 }
 
 /* ambiente */
 
+.uk-slider-nav {
+    display: none; /* Esconde os botões de navegação (dots) */
+}
 
 .uk-card.uk-card-default {
     background: rgb(68, 67, 67);
@@ -486,6 +509,23 @@ nav {
     object-fit: cover;
 }
 
+.uk-card-body a {
+    font-size: 1.5rem;
+    padding: 1em;
+    margin: 0;
+}   
+
+@media screen and (max-width: 768px) {
+    .uk-card img {
+        height: 350px;
+    }
+    .uk-card-body{
+        font-size: 1rem;
+        padding: 0.3em;
+        margin: 0;
+    }
+
+}
 
 
 

diff --git a/trajes.css b/trajes.css
@@ -198,15 +198,41 @@ nav {
     text-decoration: none;
 }
 
-
+/* Esconde o menu por padrão em telas pequenas */
 .nav-container-navbar {
     display: flex;
-    align-items: center;
-    height: 100%;
     list-style-type: none;
     text-decoration: none;
 }
 
+@media only screen and (max-width: 768px) {
+    .nav-container-navbar {
+        display: none; /* Esconde o menu inicialmente em telas pequenas */
+        flex-direction: column; /* Empilha os links em uma coluna */
+        background-color: black;
+        position: absolute;
+        top: 70px; /* Ajuste conforme necessário */
+        width: 100%;
+        left: 0;
+        padding: 1rem 0;
+        z-index: 99;
+    }
+
+    /* Exibe o ícone do menu sanduíche */
+    #menu-toggle {
+        display: block;
+        font-size: 2rem;
+        color: #FFF;
+        cursor: pointer;
+    }
+}
+
+/* Exibe o menu quando ativado */
+.nav-active {
+    display: flex; /* Mostra o menu */
+}
+
+
 
 .container {
 	max-width: 100%;

diff --git a/trajes.html b/trajes.html
@@ -16,13 +16,18 @@
 <body>
     <header id="main-banner">
         <div class="nav-container">
-            <a href="index.html" class="brand">
-                <object data="img/logo2.png" class="fa fa-bars"> </object> Gothic Wedding
+            <a href="" class="brand">
+                <object data="img/logo2.png" class="fa fa-bars"></object>Penido Gothic Wedding
             </a>
-
-            <i class="fas fa-bars"></i>
+            <nav>
+                <ul class="nav-container-navbar">
+                    <li><a href="index.html" class="btn">Home</a></li>
+                </ul>
+            </nav>
+            <i class="fas fa-bars" id="menu-toggle"></i>
         </div>
     </header>
+
 
     <main>
         <div class="container">
@@ -104,6 +109,17 @@ <h3 class="footer-title">Penido Gothic Wedding</h3>
             </div>
         </div>
     </footer>
+
+    <script>
+        const menuToggle = document.getElementById('menu-toggle');
+        const navbar = document.querySelector('.nav-container-navbar');
+
+        menuToggle.addEventListener('click', () => {
+            navbar.classList.toggle('nav-active'); // Alterna entre mostrar e esconder o menu
+        });
+    </script>
+
+
 </body>
 
 </html>