envio

Marchioroo · Aug 6, 2024 · caecdf2 · caecdf2
1 parent 2883af4
commit caecdf2
Show file tree

Hide file tree

Showing 7 changed files with 197 additions and 4 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/descricao-jogos.html b/descricao-jogos.html
@@ -157,7 +157,7 @@ <h3>ENTRAR</h3>
         </ul>
       </header>
 
-      <!-- AREA DE INFOAMÇÃO DO GAME -->
+      <!-- AREA DE INFOAMÇÃO DO GAME --><!-- AREA DE INFOAMÇÃO DO GAME --><!-- AREA DE INFOAMÇÃO DO GAME --><!-- AREA DE INFOAMÇÃO DO GAME -->
       <main class="container__descricao-jogo">
         <section class="jogo__info-vendas">
           <div class="carrossel">
@@ -179,9 +179,37 @@ <h4 class="info-vendas-desenvolvido">
             </h4>
             <h4 class="info-vendas-valor"><span id="h4">Valor: </span></h4>
             <button class="btn__secondary">ADICIONAR AO CARRINHO</button>
-            <button class="btn__primary">COMPRE AGORA</button>
+            <button  id="abrirModal" class="btn__primary">COMPRE AGORA</button>
           </div>
         </section>
+        <!-- MODAL MODAL MODAL  MODAL MODAL MODAL  MODAL MODAL MODAL  MODAL MODAL MODAL  MODAL MODAL MODAL  MODAL MODAL MODAL -->
+
+
+        <div id="meuModal" class="modal">
+          <div class="modal-content">
+              <span class="close">&times;</span>
+              <div class="modal-box">
+              <div class="left">
+                <span>Finalizar compra</span>
+                <p>métodos de pagamento</p>
+
+                <div class="modal-buttons">
+                <div class="modal-button">Cartao de credito</div>
+                <div class="modal-button">Cartao de débito</div>
+                <div class="modal-button">PIX</div>
+                <div class="modal-button">Paypal</div>
+              </div>
+
+
+              </div>
+              <div class="right"></div>
+            </div>
+
+          </div>
+      </div>
+
+
+         <!-- MODAL MODAL MODAL  MODAL MODAL MODAL  MODAL MODAL MODAL  MODAL MODAL MODAL  MODAL MODAL MODAL  MODAL MODAL MODAL -->
 
         <section class="jogo__infos">
           <h3 class="jogo__infos-nome"></h3>

diff --git a/images/imagens-descricao-jogos/.DS_Store b/images/imagens-descricao-jogos/.DS_Store
diff --git a/jogos.js b/jogos.js
@@ -802,7 +802,7 @@ export const jogos = [
         Lance ataques táticos devastadores contra Máquinas e também tribos rivais, enquanto explora um mundo aberto cheio de vida selvagem e perigos.
         <br>
         Horizon Zero Dawn™ é um RPG de aventura e ação vencedor de vários prêmios – e esta Edição Completa inclui a expansão The Frozen Wilds, com novos territórios e novas habilidades, armas e Máquinas`,
-        valor: 299.90,
+        valor: 199.90,
         lancamento: "07/08/2020",
         desenvolvido: "Guerrilla",
         requisitos: {

diff --git a/main.js b/main.js
@@ -1,5 +1,29 @@
 import { jogos } from './jogos.js';
 
+// // script.js
+
+// // Obtém os elementos
+// var modal = document.getElementById("myModal");
+// var btn = document.getElementById("openModal");
+// var span = document.getElementsByClassName("close")[0];
+
+// // Quando o usuário clicar no botão, abre o modal
+// btn.onclick = function() {
+//     modal.classList.add("show");
+// }
+
+// // Quando o usuário clicar no "x" (fechar), fecha o modal
+// span.onclick = function() {
+//     modal.classList.remove("show");
+// }
+
+// // Quando o usuário clicar fora do modal, fecha o modal
+// window.onclick = function(event) {
+//     if (event.target == modal) {
+//         modal.classList.remove("show");
+//     }
+// }
+
 const menuMobile = document.querySelector('.menu__mobile-lista');
 const iconMenu = document.querySelector('.menu__humburguer');
 

diff --git a/style/descricao-jogo.css b/style/descricao-jogo.css
@@ -355,3 +355,141 @@
 
 }
 
+
+ /* <!-- MODAL MODAL MODAL  MODAL MODAL MODAL  MODAL MODAL MODAL  MODAL MODAL MODAL  MODAL MODAL MODAL  MODAL MODAL MODAL --> */
+
+ .modal {
+    position: fixed; /* Fixa na tela */
+    z-index: 1; /* Fica acima do conteúdo */
+    left: 0;
+    top: 0;
+    width: 100%; /* Largura total */
+    height: 100%; /* Altura total */
+    overflow: hidden; /* Adiciona rolagem se necessário */
+    background-color: rgba(0,0,0,0.4);
+    opacity: 1; /* Começa invisível */
+
+    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transições para opacidade e visibilidade */
+}
+
+    .modal-content {
+        background-color:var(--black-dark);
+        margin: 8% 8% 8% 16%;  
+        border: 1px solid #888;
+        border-radius:10px;
+        width: 70%;
+        height: 70%; 
+        transform: translateY(-30px); 
+    }
+    .close {
+        color: #aaa;
+        width: auto;
+        font-size: 22px;
+        float: right;
+        height: 0;
+        z-index: 0;
+        margin-right: 10px;
+        font-weight: bold;
+
+    }
+
+    .close:hover,
+    .close:focus {
+        color: black;
+        text-decoration: none;
+        cursor: pointer;
+    }
+
+    .modal-box {
+        display: flex;   
+        justify-content: center;
+        align-items: center;
+        flex-direction: row;
+        width: 100%;
+        height: 100%;
+        gap: 2rem; 
+        padding: 1rem;
+        box-sizing: border-box; 
+    }
+
+    .left {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        flex: 1; 
+        /* background-color: blue; */
+        max-width: 30rem; 
+        height: 35rem; 
+        border-radius:10px;
+    }
+    .left span{
+
+    }
+
+    .right {
+        flex: 2; 
+        background-color: blue;
+        max-width: 50rem; 
+        height: 35rem; 
+        border-radius:10px;
+    }
+
+
+    .modal-buttons{
+        display: flex;
+        margin: auto ;
+        justify-content: flex-end;
+        align-items: center;
+        flex-direction: column;
+        width: 25rem;
+        height: 18rem;
+        /* background-color: red; */
+        margin-bottom:2rem;
+
+    }
+
+    .modal-button{
+        display: flex;
+        justify-content: center;
+        text-align: center;
+        align-items: center;
+        height: 2.8rem;
+        margin:10px;
+        border-radius:10px;
+        width: 25rem;
+        border: 2px solid var(--lightBulue);
+
+        &:hover{
+            background-color: #041046;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .modal-content {
+
+            width: 80%;
+            height: 95%; 
+        }
+
+        .modal-box {
+            flex:2;
+            flex-direction: column; /* Empilha os itens verticalmente em telas menores */
+            gap: 1rem; /* Ajusta o espaçamento entre os itens */
+        }
+        .modal-buttons{
+            display: flex;
+            margin: auto ;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            width: 20rem;
+            height: 8rem;
+            /* background-color: red; */
+        }
+
+        .left, .right {
+            width: 100%; /* Ajusta a largura dos elementos para 100% em telas menores */
+            height: auto; /* Ajusta a altura automaticamente para manter a proporção */
+        }
+    }
+
diff --git a/style/style-home.css b/style/style-home.css
@@ -467,6 +467,7 @@ li {
         color: var(--blue);
         padding: 1rem;
         position: relative;
+
     }
 
     .bx {
@@ -475,13 +476,14 @@ li {
         cursor: pointer;
         z-index: 999;
         position: relative;
+        transition: all .2 ease;
 
         &::after {
             content: '';
             position: absolute;
             top: 40%;
             left: 16%;
-
+            transition: all .2 ease;
             width: 70%;
             height: 2px;
             background: var(--gradient-dark);
@@ -574,6 +576,7 @@ li {
     .wrapper__home {
         width: 100%;
         left: 0;
+
     }
 
     .descricao__card p {