diff --git a/assets/4safe.png b/assets/4safe.png new file mode 100644 index 00000000..dcb1e551 Binary files /dev/null and b/assets/4safe.png differ diff --git a/assets/azul.jpg b/assets/azul.jpg new file mode 100644 index 00000000..94be2ed0 Binary files /dev/null and b/assets/azul.jpg differ diff --git a/assets/azul2.jpg b/assets/azul2.jpg new file mode 100644 index 00000000..e6beaa80 Binary files /dev/null and b/assets/azul2.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..7f6c0d10 --- /dev/null +++ b/index.html @@ -0,0 +1,85 @@ + + + + + + 4Safe Seguros + + + + + + + +
+

4Safe

+ + Escolha o idioma: + Português + +
+
+ logo-4safe + +
+

+ A 4Safe é uma empresa focada na digitalização dos produtos de + seguridade. Sua proposta é oferecer seguros de vida, de carro e outros + para clientes jovens que não gostam da burocracia das seguradoras + tradicionais. +

+ +
+
+ +
+
+

4Safe Contato

+

Nós entraremos em contato com você!

+ +
+ + +
+ +
+
+ + diff --git a/script.js b/script.js new file mode 100644 index 00000000..47a1926e --- /dev/null +++ b/script.js @@ -0,0 +1,54 @@ +var currentLanguage = "Português"; + +function toggleLanguage() { + var languageSpan = document.getElementById("language-span"); + var description = document.getElementById("description"); + var hireButton = document.querySelector(".hire-button"); + var copyright = document.querySelector(".copyright"); + var contatoButton = document.querySelector(".form-button"); + var formTitle = document.querySelector(".form-conteiner h1"); + var formDescription = document.querySelector(".form-conteiner p"); + + if (currentLanguage === "Português") { + languageSpan.textContent = "English"; + description.textContent = + "4Safe is a company focused on digitizing security products. Its proposition is to offer life insurance, car insurance, and more to young customers who dislike the bureaucracy of traditional insurance companies."; + hireButton.textContent = "Get a Quote Now!"; + copyright.textContent = "2023 Developed by Vitor Paes."; + contatoButton.textContent = "Contact"; + formTitle.textContent = "4Safe Contact"; + formDescription.textContent = "We will contact you!"; + contatoButton.style.position = "initial"; + contatoButton.style.left = "initial"; + + currentLanguage = "English"; + } else { + languageSpan.textContent = "Português"; + description.textContent = + "A 4Safe é uma empresa focada na digitalização dos produtos de seguridade. Sua proposta é oferecer seguros de vida, de carro e outros para clientes jovens que não gostam da burocracia das seguradoras tradicionais."; + hireButton.textContent = "Contrate agora!"; + copyright.textContent = "2023 Desenvolvido por Vitor Paes."; + contatoButton.textContent = "Contato"; + formTitle.textContent = "4Safe Contato"; + formDescription.textContent = "Nós entraremos em contato com você!"; + currentLanguage = "Português"; + } +} + +function redirecionarParaForm() { + var divForm = document.getElementById("form"); + + if (divForm) { + divForm.scrollIntoView(); + } +} + +function verificarCadastro() { + var email = document.querySelector('input[type="text"][name="email"]'); + + if (email !== "") { + window.alert("Contato realizado com sucesso!"); + } else { + window.alert("Por favor, preencha o campo."); + } +} diff --git a/style.css b/style.css new file mode 100644 index 00000000..283cd898 --- /dev/null +++ b/style.css @@ -0,0 +1,194 @@ +@charset "utf-8"; + +:root { + --white: #ffffff; + --gray-100: #e1e1e6; + --gray-300: #c4c4cc; + --gray-400: #8d8d99; + --gray-600: #323238; + --gray-700: #29292e; + --gray-800: #202024; + --gray-900: #121214; + --green-300: #00b37e; + --green-500: #00875f; + --red-500: #f75a68; +} + +body, +input, +header, +button { + font-family: "Montserrat", sans-serif; + font-weight: bolder; + font-size: 1rem; + color: var(--white); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +header { + display: flex; + justify-content: space-around; + margin-top: 1rem; + +} + +body { + background-image: url(assets/azul2.jpg); + background-position: 100%; +} + +main { + width: 100%; + margin: 280px 0; + + display: flex; + justify-content: center; + text-align: justify; +} + +main p { + max-width: 60%; + margin-bottom: 20px; +} + +.hire-button { + margin-top: 1.5rem; + width: 250px; + background: var(--green-300); + border: none; + border-radius: 8px; + padding: 1rem 1.5rem; + margin-top: 1rem; + border-radius: 8px; + border: 0; + background: var(--green-500); + color: var(--white); + font-weight: bold; + cursor: pointer; +} + +.hire-button:active { + box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); +} + +.main__description-container { + width: 50%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +img { + width: 200px; + height: 200px; + margin-right: 1rem; +} + +a { + cursor: pointer; + border: none; + color: white; + text-decoration: none; +} + +footer { + background: #212529; + border: 10px solid #212529; + font-size: 0.9em; +} + +footer a { + font-size: 12px; + color: #fff; + text-decoration: none; + text-align: center; +} + +footer a:hover { + background: #0073b2; + transition: all 0.1s ease-in-out; +} + +.footer-wrapper { + display: flex; + flex-direction: column; + align-items: center; +} + +.link-box { + transition: all 0.1s ease-in-out; + background: #777; + width: 45px; + height: 45px; + border-radius: 50%; + box-shadow: 0 0 6px #fff; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 8px; +} + +.link-box:hover { + background: #0073b2; + transition: 0.8s ease-in-out; + box-shadow: 0 0 60px #0073b2; +} + +.copyright { + color: #555; + font-size: 0.9em; +} + +/*------------------Contact page---------------------*/ + +.form{ + height: 908px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + +} + +.form-conteiner{ + margin-bottom: 200px; +} + +.form-button{ + position: relative; + left: 30px; +} + +.contact{ + display: flex; + flex-direction: column; + gap: 10px; + margin: 20px 0; +} +.contact-input{ + color: black; + +} + + +@media (max-width: 700px) { + main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; + margin: 8rem 0; + } + + main p { + max-width: 100%; + margin-bottom: 20px; + } +}