projeto mario bros

alvarodev12 · Jul 19, 2024 · f48220b · f48220b
commit f48220b
Show file tree

Hide file tree

Showing 8 changed files with 262 additions and 0 deletions.
diff --git a/assets/logo whatsapp.png b/assets/logo whatsapp.png
diff --git a/assets/logo-header.png b/assets/logo-header.png
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/assets/mario.png b/assets/mario.png
diff --git a/assets/video.mp4 b/assets/video.mp4
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Mario Bros</title>
+</head>
+
+<body>
+    <div class="mascara-formulario" onclick="esconderForm()"></div>
+
+    <div class="header">
+        <img src="./assets/logo-header.png" alt="logo mario">
+        <a>Home</a>
+        <a>Nossos Serviços</a>
+        <a>Fale Conosco</a>
+    </div>
+
+    <div class="caixa-mae">
+        <div class="caixa-principal">
+            <img src="./assets/logo.png" alt="logo mario bros" class="logo-mario">
+            <p>Encanadores Mario & Luigi - Resolvemos seus Problemas com Estilo!</p>
+            <p>Você já se encontrou em uma situação de emergência com encanadores? 
+                <br>
+                Vazamentos inesperados e torneiras que não param de pingar? 
+                <br>
+                Não se preocupe, porque estamos aqui para salvar o dia! Apresentamos a vocês os encanadores mais famosos do Reino dos Cogumelos - Mario & Luigi!</p>
+            <button onclick="mostrarForm()">Entre em Contato</button>
+        </div>
+
+        <div>
+            <img src="./assets/mario.png" alt="logo mario e luigi" class="imagem-mario-luigi">
+        </div>
+    </div>
+
+
+    <div class="caixa-video">
+        <video src="./assets/video.mp4" autoplay muted loop></video>
+        <div class="mascara"></div>
+    </div>
+
+    <a href="https://api.whatsapp.com/send?phone=5511950176320&text=Opa,%20quero%20ajuda%20dos%20irm%C3%A3os%20Mario%20&%20Luigi!"
+        class="link-whatsapp">
+        <img src="./assets/logo whatsapp.png" alt="link para o whatsapp">
+
+    </a>
+
+    <form 
+        class="formulario-fale-conosco" 
+        action="https://formcarry.com/s/D6ajSwfoJUx" 
+        method="POST"
+        enctype="multipart/form-data">
+            <input placeholder="Seu nome" type="text" name="nome">
+            <input placeholder="Seu telefone" type="tel" telephone="telefone">
+            <input placeholder="Seu E-mail" type="email" Email="Email">
+            <textarea placeholder="Digite seu problema aqui"  name="duvidas"></textarea>
+            <button type="submit">Pedir Orçamento</button>
+
+    </form>
+</body>
+<script src="./scripts.js"></script>
+
+</html>
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,16 @@
+const form = document.querySelector(".formulario-fale-conosco")
+const mascara = document.querySelector(".mascara-formulario")
+
+
+
+function mostrarForm() {
+    form.style.left = "50%"
+    form.style.transform = "translateX(-50%)"
+    mascara.style.visibility = "visible"
+}
+
+function esconderForm() {
+    form.style.left = "-300px"
+    form.style.transform = "translateX(0)"
+    mascara.style.visibility = "hidden"
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,181 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Mukta', sans-serif;
+}
+
+.logo-mario {
+    height: 200px;
+}
+
+p {
+    color: white;
+    font-size: 20px;
+}
+
+button {
+    color: white;
+    background-color: #c51111;
+    border-radius: 3px;
+    border: none;
+    width: 200px;
+    height: 50px;
+    cursor: pointer;
+    text-transform: uppercase;
+    font-weight: bold;
+    margin-top: 30px;
+}
+
+.imagem-mario-luigi {
+    height: 500px;
+}
+
+body {
+    height: 100vh;
+}
+
+.caixa-mae {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 100px;
+    height: 100vh;
+}
+
+.caixa-principal {
+    width: 40%;
+}
+
+.caixa-video {
+    position: fixed;
+    top: 0;
+    z-index: -1;
+}
+
+video {
+    min-height: 100%;
+    min-width: 100%;
+    position: fixed;
+    top: 0;
+}
+
+.mascara {
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(109deg, rgba(10, 12, 16, 0.99) 15%, rgba(10, 12, 16, 0.7) 50%, rgba(10, 12, 16, 0.99) 85%);
+    position: fixed;
+    top: 0;
+}
+
+.link-whatsapp img {
+    height: 60px;
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+    margin: 30px;
+}
+
+.header img {
+    height: 60px;
+}
+
+.header a {
+    color: white;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.header a:hover {
+    color: #c51111;
+    font-size: 25px;
+    transition: 0.5s ease-in-out;
+}
+
+.formulario-fale-conosco {
+    background-color: white;
+    display: flex;
+    gap: 20px;
+    flex-direction: column;
+    position: fixed;
+    left: -300px;
+    top: 30%;
+    padding: 20px;
+    border-radius: 5px;
+    transition: left 1s ease-in-out;
+}
+
+input {
+    height: 40px;
+    border-radius: 5px;
+    border: 1px solid gray;
+    padding-left: 5px;
+    outline-color: #18d80f;
+}
+
+textarea {
+    width: 270px;
+    height: 100px;
+    border-radius: 5px;
+    border: 1px solid gray;
+    padding-left: 5px;
+    outline-color: #18d80f;
+}
+
+.mascara-formulario {
+    visibility: hidden;
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: linear-gradient(109deg, rgba(10, 12, 16, 0.99) 15%, rgba(10, 12, 16, 0.7) 50%, rgba(10, 12, 16, 0.99) 85%);
+    transition: visibility 1s ease-in-out;
+}
+
+
+@media(max-width: 1100px) {
+
+    p {
+        display: none;
+    }
+
+    .caixa-mae {
+        flex-direction: column;
+        justify-content: flex-start;
+        padding: 10px;
+    }
+
+    .caixa-principal {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .imagem-mario-luigi {
+        width: 80vw;
+        height: auto;
+
+    }
+
+    .header {
+        margin: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .header img {
+        display: none;
+    }
+
+    .header a {
+        font-size: 20px;
+    }
+
+}