diff --git a/style.css b/style.css index 418ebca..9cb8ac8 100644 --- 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 {