Skip to content

Commit

Permalink
feat: add footer on contact page
Browse files Browse the repository at this point in the history
  • Loading branch information
Bernardo Fernandez Teixeira committed Jul 5, 2024
1 parent 44a282e commit 46583b7
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 90 deletions.
119 changes: 61 additions & 58 deletions contato/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
</header>

<div class="contact-box">
<!--
<!--
<div class="contact-ways">
<div class="contact-items">
<ion-icon name="location-outline"></ion-icon>
Expand Down Expand Up @@ -65,82 +65,85 @@ <h2>Lorem ipsum dolor, sit amet consectetur</h2>



</div>


<div class="contact-form">
<h1>Contato</h1>
<div class="form-content">

<form id="contactForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>

<button id="submit" onclick="showCustomAlert()">Submit</button>
<div id="custom-alert" class="custom-alert hidden">
<div class="custom-alert-content">
<span class="btn-close" onclick="closeCustomAlert()">&times;</span>
<p>Obrigado pelo FeedBack!</p>
<button id="closeSubmit"onclick="closeCustomAlert()">Fechar</button>
<span class="btn-close" onclick="closeCustomAlert()">&times;</span>
<p>Obrigado pelo FeedBack!</p>
<button id="closeSubmit" onclick="closeCustomAlert()">Fechar</button>
<div id="successMessage" class="hidden">Thank you for contacting us!
</div>
</div>
</div>
</form>
<div id="successMessage" class="hidden">Thank you for contacting us!</div>
<!-- Popup Modal -->

</div>

</div>
</div>
<footer class="footer">
<div class="footer-container">
<div class="row">
<div class="footer-col">
<h4>company</h4>
<ul>
<li><a href="#">about us</a></li>
<li><a href="#">our services</a></li>
<li><a href="#">privacy policy</a></li>
<li><a href="#">affiliate program</a></li>
</ul>
</div>
<div class="footer-col">
<h4>get help</h4>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">shipping</a></li>
<li><a href="#">returns</a></li>
<li><a href="#">order status</a></li>
<li><a href="#">payment options</a></li>
</ul>
</div>
<div class="footer-col">
<h4>online shop</h4>
<ul>
<li><a href="#">watch</a></li>
<li><a href="#">bag</a></li>
<li><a href="#">shoes</a></li>
<li><a href="#">dress</a></li>
</ul>
</div>
<div class="footer-col">
<h4>follow us</h4>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>

<footer class="footer">
<div class="footer-container">
<div class="row">
<div class="footer-col">
<h4>company</h4>
<ul>
<li><a href="#">about us</a></li>
<li><a href="#">our services</a></li>
<li><a href="#">privacy policy</a></li>
<li><a href="#">affiliate program</a></li>
</ul>
</div>
<div class="footer-col">
<h4>get help</h4>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">shipping</a></li>
<li><a href="#">returns</a></li>
<li><a href="#">order status</a></li>
<li><a href="#">payment options</a></li>
</ul>
</div>
<div class="footer-col">
<h4>online shop</h4>
<ul>
<li><a href="#">watch</a></li>
<li><a href="#">bag</a></li>
<li><a href="#">shoes</a></li>
<li><a href="#">dress</a></li>
</ul>
</div>
<div class="footer-col">
<h4>follow us</h4>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</footer>
</div>
</footer>


<h1></h1>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script src="./script.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script src="./script.js"></script>
</body>

</html>
33 changes: 1 addition & 32 deletions contato/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,48 +12,17 @@ document
// Simulate form submission
setTimeout(function () {
document.getElementById("successMessage").classList.remove("hidden");
document.getElementById("contactForm").reset();
}, 1000);
} else {
document.getElementById("successMessage").classList.add("hidden");
console.log("contactform", contactForm);
}
});

document
.getElementById("contactForm")
.addEventListener("submit", function (event) {
event.preventDefault();

var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var message = document.getElementById("message").value;

if (name && email && message) {
document.getElementById("modalMessage").textContent =
document.getElementById("successMessage").textContent;
document.getElementById("successModal").style.display = "block";
// Clear the form fields
document.getElementById("contactForm").reset();
}
});

// Script para fechar o modal
var modal = document.getElementById("successModal");
var span = document.getElementsByClassName("close")[0];

span.onclick = function () {
modal.style.display = "none";
};

window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
// Mostrar popup ao enviar formulário
function showCustomAlert() {
document.getElementById("custom-alert").classList.remove("hidden");
document.getElementById("contactForm").reset();
}
// Fechar popup do formulário
function closeCustomAlert() {
Expand Down
1 change: 1 addition & 0 deletions contato/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ header > .menu {
}

form {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
Expand Down

0 comments on commit 46583b7

Please sign in to comment.