diff --git a/contato.css b/contato.css index 4652428..e69d524 100644 --- a/contato.css +++ b/contato.css @@ -28,6 +28,13 @@ 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; @@ -35,6 +42,7 @@ body{ 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 index f8457f5..bf3fb08 100644 --- 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 index 73375fd..88682fa 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -30,7 +30,7 @@
- Gothic Wedding + Gothic Wedding
- +
@@ -74,12 +74,7 @@

O que fazemos

Celebração

-

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.

+

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.

@@ -89,13 +84,13 @@

Ambientes

Trajaes

-

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.

+

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.

Confeitaria

-

- 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. +

+ 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.

@@ -318,15 +313,10 @@

Decoração

Locação de Ambientes

Os mais diversos ambientes para locação.

-
- - +
-
    -
  • @@ -632,25 +622,21 @@

    Os mais diversos ambientes para locação.

    • -
- - - -
+ next + + + +
    - - - -
      diff --git a/styles.css b/styles.css index c6346d0..38b6ef6 100644 --- 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 index 670d230..f6568ba 100644 --- 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 index 70164da..1e5e6a8 100644 --- a/trajes.html +++ b/trajes.html @@ -16,13 +16,18 @@
      - - Gothic Wedding + + Penido Gothic Wedding - - + +
      +
      @@ -104,6 +109,17 @@

      Penido Gothic Wedding

      + + + +