From c052b10d2f79b5896dc8e47dc3c2b98ce1a0120a Mon Sep 17 00:00:00 2001 From: Debora Date: Mon, 24 Jun 2024 11:02:53 -0300 Subject: [PATCH] =?UTF-8?q?estiliza=C3=A7=C3=A3o=20p=C3=A1gina=20de=20logi?= =?UTF-8?q?n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/cadastro.css | 177 ++++++++++++++++++++++------------------ image/img-pageLogin.svg | 1 + login.html | 97 ++++++---------------- 3 files changed, 123 insertions(+), 152 deletions(-) create mode 100644 image/img-pageLogin.svg diff --git a/css/cadastro.css b/css/cadastro.css index d31fdf2..b91365a 100644 --- a/css/cadastro.css +++ b/css/cadastro.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap'); + * { margin: 0; padding: 0; @@ -5,89 +7,139 @@ } body { - font-family: Arial, sans-serif; + font-family: 'Quicksand', sans-serif; + display: flex; + justify-content: center; align-items: center; + height: 100vh; + margin: 0; + background-color: #f8b842; } -main { +/* ESTILIZAÇÃO DA PAGINA DE LOGIN */ + +main.login-page { + display: flex; width: 100%; + height: 100%; + flex-direction: row; +} + +.login-image { + flex: 1; display: flex; - flex-direction: column; align-items: center; + justify-content: center; padding: 2rem; - background-color: #f8b842; } -/* ESTILIZAÇÃO FOOTER */ - -footer { - background-color: #f8f8f8; - padding: 2rem 1rem; - border-top: 1px solid #ddd; +.login-image img { + max-width: 100%; + height: auto; } -.footer-container { +.container-formulario-login { + flex: 1.5; display: flex; - justify-content: space-between; - align-items: flex-start; - flex-wrap: wrap; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 2rem; + background-color: transparent; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; } -.footer-column { - flex: 1; - margin: 0 1rem; +.logo img { + max-width: 100%; + height: auto; + margin-bottom: 2rem; } -.footer-column.large { - flex: 2; - margin-left: 3rem; - margin-top: 2rem; +.formulario-login { + width: 100%; + max-width: 800px; + background: #f8f8f8; + padding: 2rem; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } -.footer-logo { - max-width: 100%; - height: auto; +.card-cabecalho { + text-align: center; margin-bottom: 1rem; } -.social-icons a { - margin-right: 1rem; - color: #555; - text-decoration: none; +.card-cadastro-titulo { font-size: 1.5rem; + color: #333; } -.social-icons a:hover { - color: #000; +.campo-cadastro { + margin-bottom: 1.5rem; + position: relative; } -.footer-column h3 { - font-size: 1.2rem; +.campo-cadastro label { + display: flex; + align-items: center; + font-size: 1rem; + color: #333; margin-bottom: 0.5rem; } -.footer-column ul { - list-style-type: none; - padding-left: 0; +.campo-cadastro i { + margin-right: 0.5rem; } -.footer-column ul li { - margin-bottom: 0.5rem; +.campo-cadastro input { + width: 100%; + padding: 0.75rem; + padding-left: 2rem; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 1rem; } -.footer-column ul li a { +.campo-cadastro input::placeholder { + color: #aaa; +} + +.botao-cadastro { + background-color: #37A416; + border: none; + color: #FFFFFF; + padding: 1rem 2rem; + font-family: Inter, sans-serif; + font-weight: bold; + text-align: center; text-decoration: none; - color: #555; + display: inline-block; + font-size: 1rem; + cursor: pointer; + border-radius: 20px; + transition: background-color 0.5s ease; + width: 100%; +} + +.botao-cadastro:hover { + background-color: #7edb61; + color: #FFFFFF; +} + +.formulario-login p { + text-align: center; + font-size: 1rem; + color: #333; } -.footer-column ul li a:hover { - color: #000; +.formulario-login a { + color: #37A416; + text-decoration: none; } -footer p { - color: #777; - font-size: 0.9rem; - margin-top: 1rem; +.formulario-login a:hover { + text-decoration: underline; } .logo-titulo-cadastro { @@ -161,40 +213,5 @@ footer p { color: #3F3E3E; } -.botao-cadastro { - background-color: #37A416; - border: none; - color: #FFFFFF; - padding: 15px 32px; - font-family: Inter, sans-serif; - font-weight: bold; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 16px; - margin: 4px 2px; - cursor: pointer; - border-radius: 20px; - transition: background-color 0.5s ease; -} - -.botao-cadastro:hover { - background-color: #7edb61; - color: #FFFFFF; -} - -/* ESTILIZAÇÃO DA PAGINA DE LOGIN */ -.formulario-login p, .formulario-login a { - font-size: 1rem; - color: #3F3E3E; - text-decoration: none; -} -.formulario-login a { - font-weight: bold; - color:#37A416; -} -.formulario-login a:hover { - color: #f8b842; -} \ No newline at end of file diff --git a/image/img-pageLogin.svg b/image/img-pageLogin.svg new file mode 100644 index 0000000..8c104b5 --- /dev/null +++ b/image/img-pageLogin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/login.html b/login.html index b2ca049..eb6cd50 100644 --- a/login.html +++ b/login.html @@ -1,5 +1,5 @@ - + @@ -12,83 +12,36 @@ -
-
+
+ + - -
- +