Alterando cores do título e do menu cadastrar

ifpi-picos · Jun 30, 2023 · 36fc1a7 · 36fc1a7
1 parent 72c5032
commit 36fc1a7
Showing 1 changed file with 70 additions and 44 deletions.
diff --git a/style.css b/style.css
@@ -13,9 +13,9 @@ padding: 20px;
 color: var(--secondary-color);
 }
 
-/* personalizar o título do projeto */
+/* Personalizar o título do projeto */
 .title {
-    background-color: #698269;
+    background-color: #37393A;
     color: var(--secondary-color);
     padding: 20px;
     text-transform: uppercase;
@@ -33,61 +33,44 @@ color: var(--secondary-color);
     left: 50%;
     transform: translate(-50%, -50%);
 }
-
-/* personalizar "Cadastrar Livro" */
-h2 {
-    background-color: #3A98B9;
+
+/* Personalizar "Cadastrar Livro" (título) */
+.cadastrar {
+    background-color: #37393A;
+    display: flex;
+    justify-content: center;
     text-align: center;
     margin-top: 20px;
-    margin-bottom: 35px;
-    color: var(--secondary-color);
-    padding: 20px;
-    border-radius: 5px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-/* personalizar "Listagem de Livros" */
-.listagem {
-    background-color: #b475db;
-    text-align: center;
-    margin-top: 80px;
+    margin-bottom: 40px;
     color: var(--secondary-color);
     padding: 20px;
     border-radius: 5px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    width: 20%;
-    position: relative;
-    top: 20%;
-    left: 50%;
-    transform: translate(-50%, -50%);
 }
-    
+
 form {
     margin-bottom: 20px;
 }
-
-.form-container {
-    background-color: #A9907E;
-    border: 3px solid #7bf064;
+
+/* Alterar o bloco do menu cadatrar */
+.form-container{
+    background-color: #8b7565;
+    border: 3px solid #37393A;
     padding: 20px;
     border-radius: 5px;
     margin-bottom: 20px;
-    width: 400px;
-    height: 400px;
+    margin-left: 50px;
+    width: 300px;
+    height: 390px;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: center;
     align-items: center;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    margin: 0 auto;
-}
-
-/*título, autor e data (nomes para alteração)*/
-label {
     font-weight: bold;
-    color: var(--secondary-color);
 }
-
+
+/*Alterar os campos de texto */
 input[type="text"],
 select {
     text-align: center;
@@ -97,11 +80,11 @@ select {
     border: none;
     border-radius: 5px;
     background-color: var(--secondary-color);
-    color: var(--primary-color);
+    color: #37393A;
     margin-bottom: 20px;
 }
-  
-/* alterar a caixinha da data */
+
+/* Alterar a caixinha da data */
 input[type="date"] {
     text-align: center;
     width: 50%;
@@ -110,10 +93,11 @@ input[type="date"] {
     border: none;
     border-radius: 5px;
     background-color: var(--secondary-color);
-    color: var(--primary-color);
+    color: #37393A;
     margin-bottom: 20px;
 }
-
+
+/* Alterar o botão */
 input[type="submit"] {
     display: block;
     width: 40%;
@@ -122,12 +106,54 @@ input[type="submit"] {
     font-weight: bold;
     border: none;
     border-radius: 5px;
-    background-color: var(--primary-color);
+    background-color: #37393A;
     color: var(--secondary-color);
     cursor: pointer;
     transition: background-color 0.3s ease-in-out;
     margin: 0 auto;
 }
+
+/* personalizar "Listagem de Livros" */
+.listagem {
+    background-color: #b475db;
+    text-align: center;
+    margin-top: 80px;
+    color: var(--secondary-color);
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    width: 20%;
+    position: relative;
+    top: 20%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+form {
+    margin-bottom: 20px;
+}
+
+.form-container {
+    background-color: #A9907E;
+    border: 3px solid #7bf064;
+    padding: 20px;
+    border-radius: 5px;
+    margin-bottom: 20px;
+    width: 400px;
+    height: 400px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    margin: 0 auto;
+}
+
+/*título, autor e data (nomes para alteração)*/
+label {
+    font-weight: bold;
+    color: var(--secondary-color);
+}
 
 /* alterar a cor do botão quando o cursor passa por cima dele */
 input[type="submit"]:hover {