Add files via upload

lseryh · Aug 30, 2024 · 4ff2391 · 4ff2391
commit 4ff2391
Show file tree

Hide file tree

Showing 6 changed files with 323 additions and 0 deletions.
diff --git a/corretor1.jpg b/corretor1.jpg
diff --git a/corretor2.jpg b/corretor2.jpg
diff --git a/image.png b/image.png
diff --git a/index.html b/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Imóvel Guide</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>Imóvel Guide</h1>
+        <nav>
+            <ul>
+                <li><a href="#">Condomínios</a></li>
+                <li><a href="#">Fórum</a></li>
+                <li><a href="#">Guia</a></li>
+                <li><a href="#">Artigos</a></li>
+                <li><a href="#">Ferramentas</a></li>
+                <li><a href="#">Cotar Imóvel</a></li>
+                <li><a href="#">Planos</a></li>
+                <li><a href="#">Entrar</a></li>
+                <li><a href="#" class="btn">Cadastre-se</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section class="section-1">
+            <div class="corretor">
+                <img src="corretor1.jpg" alt="Corretora">
+                <div>
+                    <h2>Nome Corretora</h2>
+                    <p>3.000 pontos</p>
+                    <button onclick="verTelefone('telefone1')">Ver telefone</button>
+                    <p id="telefone1" class="telefone">Telefone oculto</p>
+                </div>
+            </div>
+            <div class="corretor">
+                <img src="corretor2.jpg" alt="Corretor">
+                <div>
+                    <h2>Nome Corretor</h2>
+                    <p>1.260 pontos</p>
+                    <button onclick="verTelefone('telefone2')">Ver telefone</button>
+                    <p id="telefone2" class="telefone">Telefone oculto</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="section-2">
+            <form id="formulario">
+                <h2>Mande uma mensagem:</h2>
+                <input type="text" id="cpf" placeholder="Digite seu CPF">
+                <input type="text" id="telefone" placeholder="Digite seu telefone">
+                <input type="text" placeholder="Digite o assunto">
+                <button type="button" onclick="enviarMensagem()">Enviar Mensagem</button>
+            </form>
+        </section>
+
+        <section class="section-3">
+            <h2>Regra de 3</h2>
+            <input type="text" id="input1" placeholder="60">
+            <span>---</span>
+            <input type="text" id="input2" placeholder="100">
+            <input type="text" id="input3" placeholder="30">
+            <button onclick="calcularRegra3()">Calcular</button>
+            <div id="resultado"></div>
+        </section>
+
+        <section class="section-4">
+            <button onclick="abrirModal()">ABRIR IMAGEM NO MODAL</button>
+            <div id="modal" class="modal">
+                <div class="modal-content">
+                    <span class="close" onclick="fecharModal()">&times;</span>
+                    <img src="image.png" alt="Imagem da casa">
+                </div>
+            </div>
+        </section>
+            <div class="imagem-abaixo">
+                <img src="image.png" alt="Imagem Abaixo do Modal">
+            </div>
+        </div>
+
+
+        <section class="section-5">
+            <button onclick="baixarImagem()">Download</button>
+        </section>
+    </main>
+
+    <footer>
+        <p>© Copyright 2024. Todos os direitos reservados.</p>
+    </footer>
+
+    <script src="projeto.js"></script>
+</body>
+</html>
diff --git a/projeto.js b/projeto.js
@@ -0,0 +1,59 @@
+// Mostrar telefone ao clicar
+function verTelefone(id) {
+    document.getElementById(id).textContent = "(21) 99927-6614";
+}
+
+// Enviar mensagem e exibir alerta
+function enviarMensagem() {
+    alert('Mensagem enviada com sucesso!');
+}
+
+// Calcular regra de 3
+function calcularRegra3() {
+    let valor1 = parseFloat(document.getElementById('input1').value);
+    let valor2 = parseFloat(document.getElementById('input2').value);
+    let valor3 = parseFloat(document.getElementById('input3').value);
+
+    if (valor1 && valor2 && valor3) {
+        let resultado = (valor3 * valor2) / valor1;
+        document.getElementById('resultado').textContent = resultado.toFixed(2);
+    } else {
+        alert('Por favor, preencha todos os campos!');
+    }
+}
+
+// Abrir modal
+function abrirModal() {
+    document.getElementById('modal').style.display = "block";
+}
+
+// Fechar modal
+function fecharModal() {
+    document.getElementById('modal').style.display = "none";
+}
+
+// Baixar imagem
+function baixarImagem() {
+    html2canvas(document.querySelector(".section-5")).then(canvas => {
+        let link = document.createElement("a");
+        link.download = "imovel-guide.png";
+        link.href = canvas.toDataURL();
+        link.click();
+    });
+}
+
+// Adicionar máscara de CPF e Telefone
+document.getElementById('cpf').addEventListener('input', function(e) {
+    let cpf = e.target.value.replace(/\D/g, "");
+    cpf = cpf.replace(/(\d{3})(\d)/, "$1.$2");
+    cpf = cpf.replace(/(\d{3})(\d)/, "$1.$2");
+    cpf = cpf.replace(/(\d{3})(\d{1,2})$/, "$1-$2");
+    e.target.value = cpf;
+});
+
+document.getElementById('telefone').addEventListener('input', function(e) {
+    let telefone = e.target.value.replace(/\D/g, "");
+    telefone = telefone.replace(/(\d{2})(\d)/, "($1) $2");
+    telefone = telefone.replace(/(\d{4})(\d)/, "$1-$2");
+    e.target.value = telefone;
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,169 @@
+/* Reset básico */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+}
+
+body {
+    background-color: #f7f7f7;
+}
+
+header {
+    background-color: #1B2653;
+    color: white;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+header h1 {
+    color: #FE6613;
+}
+
+nav ul {
+    list-style: none;
+    display: flex;
+    gap: 15px;
+}
+
+nav ul li {
+    display: inline;
+}
+
+nav ul li a {
+    color: white;
+    text-decoration: none;
+}
+
+.btn {
+    background-color: #FE6613;
+    padding: 10px 20px;
+    border-radius: 5px;
+}
+
+main {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    padding: 20px;
+    justify-content: center;
+}
+
+.corretor {
+    display: flex;
+    gap: 15px;
+    background-color: white;
+    padding: 15px;
+    border-radius: 10px;
+
+}
+
+.corretor img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 50%;
+}
+
+.imagem-abaixo {
+    margin-top: 10px; /* Espaço entre o botão e a imagem */
+    width: 100%; /* Ocupará toda a largura disponível */
+    max-width: 150px; /* Limite máximo da largura */
+    max-height: 150px; /* Limite máximo da altura */
+    overflow: hidden; /* Esconderá o excesso da imagem se necessário */
+}
+
+.imagem-abaixo img {
+    width: 100%;
+    height: auto;
+    border-radius: 10px
+}
+
+#formulario {
+    background-color: white;
+    padding: 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.section-3, .section-4, .section-5 {
+    background-color: white;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+}
+
+input[type="text"] {
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    width: 100%;
+}
+
+button {
+    padding: 10px 20px;
+    background-color: #FE6613;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    cursor: pointer;
+}
+
+footer {
+    background-color: #1B2653;
+    color: white;
+    padding: 20px;
+    text-align: center;
+    margin-top: 20px;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4);
+    padding-top: 60px;
+}
+.modal-content {
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 695px;
+    animation: fadeInZoom 0.5s ease-out;
+}
+@keyframes fadeInZoom {
+    from {
+        opacity: 0;
+        transform: scale(0.5); 
+    }
+    to {
+        opacity: 1;
+        transform: scale(1); /* Cresce até o tamanho normal */
+    }
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+    .close:hover,
+    .close:focus {
+        color: black;
+        text-decoration: none;
+        cursor: pointer;
+    }