Dando estilos

ibrahimhc19 · ibrahimhc19 · commit cf2350ec996c · 2023-10-05T15:38:38.000-05:00
diff --git a/02 - Login Form/index.html b/02 - Login Form/index.html
@@ -9,7 +9,10 @@
 <body>
 
     <div class="form-container">
-        
+        <h1 class="titulo">Login</h1>
+        <input type="text" name="text" class="userName" placeholder="username">
+        <input type="password" placeholder="password" class="password">
+        <button class="loginBtn">Login</button>
     </div>
 
 </body>
diff --git a/02 - Login Form/styles.css b/02 - Login Form/styles.css
@@ -11,22 +11,64 @@
 }
 
 :root{
-  --bg-color: linear-gradient(217deg, #ee6fca, rgba(255, 0, 0, 0) 70.71%), 
-							linear-gradient(127deg, #67bad4, rgba(0, 255, 0, 0) 70.71%), 
-							linear-gradient(336deg, #24b6e7, rgba(0, 0, 255, 0) 70.71%);
+  --bg-color: linear-gradient(217deg, #F1B6E0, rgba(255, 0, 0, 0) 70.71%), 
+							linear-gradient(127deg, #B3B0F8, rgba(0, 255, 0, 0) 70.71%), 
+							linear-gradient(336deg, #8ADDF8, rgba(0, 0, 255, 0) 70.71%);
   --altura: 5rem;
 }
 
 body{
-  background-color: #dbcce9;
+  /* background-color: #dbcce9; */
+  background: var(--bg-color);
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
 }
 
 
 .form-container{
   width: 350px;
   height: 450px;
+  /* background: var(--bg-color); */
   background: var(--bg-color);
+  border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.userName, .password{
+  padding: .7rem 2rem .7rem 0;
+  /* border-radius: 2rem; */
+  margin: 1rem;
+  outline: none;
+  border: none;
+  /* text-align: center; */
+  /* width: 15rem; */
+  background: transparent;
+  border-bottom: solid 1px white;
+}
+
+.titulo{
+  margin-bottom: 2rem;
+}
+
+.loginBtn{
+  padding: 1rem 3rem;
+  /* border-radius: 6rem; */
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 1rem;
+  cursor: pointer;
+  border: solid 1px white;
+  margin-top: 1rem;
+  transition: all .5s;
+}
+
+.loginBtn:hover{
+  transform: scale(1.1);
 }
