update

izabellyarmeris · Apr 4, 2024 · 73ab096 · 73ab096
1 parent 67183cf
commit 73ab096
Show file tree

Hide file tree

Showing 31 changed files with 653 additions and 420 deletions.
diff --git a/cadastro.css b/cadastro.css
@@ -1,3 +1,6 @@
-form{
-    height: 90%;
+form {
+  height: 90%;
+}
+.cadastro_h1 {
+  color: beige;
 }
diff --git a/cadastro.html b/cadastro.html
@@ -1,57 +1,73 @@
 <!DOCTYPE html>
 <html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bel viagens | Cadastro</title>
+    <link rel="stylesheet" href="login.css" />
+    <link rel="stylesheet" href="cadastro.css" />
+    <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=Roboto&display=swap"
+      rel="stylesheet"
+    />
+  </head>
 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title> Bel viagens | Cadastro </title>
-    <link rel="stylesheet" href="login.css">
-    <link rel="stylesheet" href="cadastro.css">
-    <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=Roboto&display=swap" rel="stylesheet">
-</head>
-
-<body>
+  <body>
     <main>
-        <img src="./midia/airport-animate.svg" alt="airport-animate">
-        <form action="viagens.html" method="get">
-
-        <h1> Cadastre-se!</h1>
+      <img src="./midia/airport-animate.svg" alt="airport-animate" />
+      <form action="viagens.html" method="get">
+        <h1 class="cadastro_h1">Cadastre-se!</h1>
 
         <div>
-            <label for="name">Seu nome:</label>
-            <input type="text" placeholder=" Seu nome" id="name" autofocus>
+          <label for="name">Seu nome:</label>
+          <input type="text" placeholder=" Seu nome" id="name" autofocus />
         </div>
         <div>
-            <label for="sobrenome">Seu Sobrenome:</label>
-            <input type="text" placeholder="Seu sobrenome" id="sobrenome">
+          <label for="sobrenome">Seu Sobrenome:</label>
+          <input type="text" placeholder="Seu sobrenome" id="sobrenome" />
         </div>
         <div>
-            <label for="data-de-nascimento"> Data de Nascimento:</label>
-            <input type="date" name="date" id="data-de-nascimento">
+          <label for="data-de-nascimento"> Data de Nascimento:</label>
+          <input type="date" name="date" id="data-de-nascimento" />
         </div>
         <div>
-            <label for="email"> Email:</label>
-            <input type="email" id="email" placeholder="Seu email" required>
+          <label for="email"> Email:</label>
+          <input type="email" id="email" placeholder="Seu email" required />
         </div>
         <div>
-            <label for="confirmacao-email"> Confirme seu Email: </label>
-            <input type="email" placeholder="Confirme seu email" id="confirmacao-email">
+          <label for="confirmacao-email"> Confirme seu Email: </label>
+          <input
+            type="email"
+            placeholder="Confirme seu email"
+            id="confirmacao-email"
+          />
         </div>
         <div>
-            <label for="senha">Senha:</label>
-            <input type="password" id="senha" placeholder="Sua senha" maxlength="12"
-                title="sua senha deve ter 12 caracteres" required>
+          <label for="senha">Senha:</label>
+          <input
+            type="password"
+            id="senha"
+            placeholder="Sua senha"
+            maxlength="12"
+            title="sua senha deve ter 12 caracteres"
+            required
+          />
         </div>
         <div>
-            <label for="confirmar-senha">Confirme sua senha:</label>
-            <input type="password" id="confirmar-senha" placeholder="Confirme sua senha" maxlength="12"
-            title="sua senha precisa ser igual ao formulário anterior" required>
+          <label for="confirmar-senha">Confirme sua senha:</label>
+          <input
+            type="password"
+            id="confirmar-senha"
+            placeholder="Confirme sua senha"
+            maxlength="12"
+            title="sua senha precisa ser igual ao formulário anterior"
+            required
+          />
         </div>
-        <input type="submit" value="entrar" class="enviar">
-    </form>
+        <input type="submit" value="entrar" class="enviar" />
+      </form>
     </main>
-</body>
-
-</html>
+  </body>
+</html>
diff --git a/login.css b/login.css
@@ -1,86 +1,104 @@
-body{
-    background-color: #374151;
-    background-repeat: no-repeat;
-    background-size: cover;
-
+body {
+  background-color: #374151;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
-*{
-    padding: 0;
-    margin: 0;
-    font-family: 'Roboto', sans-serif;
+* {
+  padding: 0;
+  margin: 0;
+  font-family: "Roboto", sans-serif;
+  color: beige;
 }
-main{
-    display: flex; 
-    align-items: center;
-    justify-content: space-around;
-    height: 100vh;
-    gap: 20px;
+main {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 100vh;
+  gap: 20px;
 }
 
 main img {
-    width: 700px;
+  width: 700px;
 }
-form{
-    border: 2px solid black;
-    width: 25%;
-    height: 60%;
-    background-color: #212E40;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-radius: 15px;
-
+form {
+  border: 2px solid black;
+  width: 30%;
+  height: 60%;
+  background-color: #212e40;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 15px;
 }
-div{
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    margin-bottom: 10px;
+div {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-bottom: 10px;
 }
-div input{
-    height: 40px;
-    width: 250px;
-    padding-left: 6px;
-    border-radius: 15px;
-    border: none;
+div input {
+  height: 40px;
+  width: 250px;
+  padding-left: 6px;
+  border-radius: 15px;
+  border: none;
 }
 
-
-h1{
-    margin-bottom: 30px;
-    color: white;
+.login_h1 {
+  margin-bottom: 30px;
+  color: white;
 }
-.enviar{
-    width: 150px;
-    height: 50px;
-    padding: 10px;
-    border-radius: 6px;
-    text-transform: uppercase;
-    border: none;
-    margin-top: 10px;
-    transition: 500ms;
-    background-color: #407BFF;
-    color: #FFFFFF;
-    cursor: pointer;
+.enviar {
+  width: 150px;
+  height: 50px;
+  padding: 10px;
+  border-radius: 6px;
+  text-transform: uppercase;
+  border: none;
+  margin-top: 10px;
+  transition: 500ms;
+  background-color: #407bff;
+  color: #ffffff;
+  cursor: pointer;
 }
 
 .enviar:hover {
-    opacity: 0.8;
+  opacity: 0.8;
 }
 
+a {
+  color: white;
+  text-decoration: none;
+  margin-top: 15px;
+  transition: 0.6s all;
+}
 
-a{
-    color:white;
-    text-decoration: none;
-    margin-top: 15px;
-    transition: 0.6s all;
+a:hover {
+  opacity: 0.5;
+  text-decoration: underline;
+}
+label {
+  color: white;
 }
+@media screen and (max-width: 920px) {
+  main {
+    flex-direction: column;
+  }
 
-a:hover{
-    opacity: 0.5;
-    text-decoration: underline;
+  main img {
+    width: 100%;
+    justify-content: center;
+  }
+  form {
+    width: 100%;
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+  div {
+    width: 90%;
+  }
+  div input {
+    width: 100%;
+  }
 }
-label{
-    color: white;
-}
diff --git a/login.html b/login.html
@@ -1,35 +1,47 @@
 <!DOCTYPE html>
 <html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LOGIN</title>
+    <link rel="stylesheet" href="login.css" />
+    <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=Roboto&display=swap"
+      rel="stylesheet"
+    />
+  </head>
 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title> LOGIN </title>
-    <link rel="stylesheet" href="login.css">
-    <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=Roboto&display=swap" rel="stylesheet">
-</head>
-
-<body>
+  <body>
     <main>
-        <img src="./midia/world-animate.svg"> 
-        <form action="viagens.html" method="get">
-            <h1> Faça seu login </h1>
-            <div>
-                <label for="email"> Login:</label>
-                <input type="email" id="email" placeholder="Seu email" required autofocus>
-            </div>
-            <div>
-                <label for="senha">Senha:</label>
-                <input type="password" id="password" placeholder="Sua senha" maxlength="12"
-                    title="sua senha deve ter 12 caracteres" required>
-            </div>
-            <input type="submit" value="entrar" class="enviar">
-            <a href="./cadastro.html">Não possui login? Faça seu cadastro!</a> 
-
-        </form>
+      <img src="./midia/world-animate.svg" />
+      <form action="viagens.html" method="get">
+        <h1 class="login_h1">Faça seu login</h1>
+        <div>
+          <label for="email"> Login:</label>
+          <input
+            type="email"
+            id="email"
+            placeholder="Seu email"
+            required
+            autofocus
+          />
+        </div>
+        <div>
+          <label for="senha">Senha:</label>
+          <input
+            type="password"
+            id="password"
+            placeholder="Sua senha"
+            maxlength="12"
+            title="sua senha deve ter 12 caracteres"
+            required
+          />
+        </div>
+        <input type="submit" value="entrar" class="enviar" />
+        <a href="./cadastro.html">Não possui login? Faça seu cadastro!</a>
+      </form>
     </main>
-</body>
-
-</html>
+  </body>
+</html>
diff --git a/midia/Rio-de-Janeiro-57.webp b/midia/Rio-de-Janeiro-57.webp
diff --git a/midia/arca45fundo.png b/midia/arca45fundo.png
diff --git a/midia/arcanejinx.png b/midia/arcanejinx.png
diff --git a/midia/azul-caneta.webp b/midia/azul-caneta.webp
diff --git a/midia/bandeira-removebg-preview.png b/midia/bandeira-removebg-preview.png
diff --git a/midia/bandeiraitali-removebg-preview.png b/midia/bandeiraitali-removebg-preview.png
diff --git a/midia/corridinha_manoel_gomes.mp4 b/midia/corridinha_manoel_gomes.mp4
diff --git a/midia/cristo-removebg-preview.png b/midia/cristo-removebg-preview.png
diff --git a/midia/decolar.png b/midia/decolar.png
diff --git a/midia/gramadors1.jpeg b/midia/gramadors1.jpeg
diff --git a/midia/italia.jpg b/midia/italia.jpg
diff --git a/midia/italia.png b/midia/italia.png
diff --git a/midia/italiaimagem-removebg-preview.png b/midia/italiaimagem-removebg-preview.png
diff --git a/midia/italiano23-removebg-preview.png b/midia/italiano23-removebg-preview.png
diff --git a/midia/italy-removebg-preview.png b/midia/italy-removebg-preview.png
diff --git a/midia/jinx2.jpg b/midia/jinx2.jpg
diff --git a/midia/logoarcane-removebg-preview.png b/midia/logoarcane-removebg-preview.png
diff --git a/midia/logoitalia-removebg-preview.png b/midia/logoitalia-removebg-preview.png
diff --git a/midia/lol-removebg-preview.png b/midia/lol-removebg-preview.png
diff --git a/midia/lulu-removebg-preview.png b/midia/lulu-removebg-preview.png
diff --git a/midia/popopo-removebg-preview.png b/midia/popopo-removebg-preview.png
diff --git a/midia/suecia1.webp b/midia/suecia1.webp
diff --git a/midia/violao.webp b/midia/violao.webp
diff --git a/midia/zaun.jpg b/midia/zaun.jpg
diff --git a/readme.md b/readme.md
@@ -2,11 +2,11 @@
 
 ## Descrição:
 
-- Projeto desenvolvido durante o curso Proprofissão do Instituto Proa. Este projeto é um site de viagens que contém formulário de login/cadastro e uma landing page.
+- Projeto responsivo desenvolvido utilizando tecnologias de front-end. Desenvolvi no meu curso de programação web no Instituto Proa.
 
 <br>
 
-## Tecnologias utilizadas: 
+## Tecnologias utilizadas:
 
 - HTML
 - CSS
@@ -16,4 +16,4 @@
 
 ## Links importantes:
 
-- [Clique aqui para navegar no projeto](https://izabellyarmeris.github.io/formularioViagens/login.html)
+- [Clique aqui para navegar no projeto](https://izabellyarmeris.github.io/formularioViagens/login.html)