labenuexercicios · vitornpaes · Oct 9, 2023 · Oct 9, 2023 · Oct 9, 2023 · Oct 9, 2023
diff --git a/assets/4safe.png b/assets/4safe.png
diff --git a/assets/azul.jpg b/assets/azul.jpg
diff --git a/assets/azul2.jpg b/assets/azul2.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>4Safe Seguros</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,200&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <header>
+      <h2>4Safe</h2>
+      <a id="language-toggle" href="#" onclick="toggleLanguage ()">
+        Escolha o idioma:
+        <span id="language-span">Português</span>
+      </a>
+    </header>
+    <main>
+      <img src="assets/4safe.png" alt="logo-4safe" />
+
+      <div class="main__description-container">
+        <p id="description">
+          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.
+        </p>
+        <button
+          type="button"
+          class="hire-button"
+          onclick="redirecionarParaForm()"
+        >
+          Contrate agora!
+        </button>
+      </div>
+    </main>
+    <footer>
+      <div class="footer-wrapper">
+        <div class="contact">
+          <div class="first-contact">
+            <div class="link-box">
+              <a
+                href="https://www.linkedin.com/in/vitor-noe-b72023281/"
+                target="_blank"
+                title="Vitor"
+                rel="noreferrer"
+              >
+                <p>in</p>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div class="copyright" id="copyright">
+          <p>© 2023 Desenvolvido por Vitor Paes.</p>
+        </div>
+      </div>
+    </footer>
+    <div class="form" id="form">
+      <div class="form-conteiner" id="form-conteiner">
+        <h1 id="form-conteiner h1">4Safe Contato</h1>
+        <p id="form-conteiner p">Nós entraremos em contato com você!</p>
+
+        <div class="contact">
+          <label for="email">E-mail</label>
+          <input id="email" class="contact-input" />
+        </div>
+        <button
+          type="button"
+          class="hire-button form-button"
+          id="form-button"
+          onclick="verificarCadastro()"
+        >
+          Contato
+        </button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/script.js 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
@@ -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;
+  }
+}