Skip to content

Commit

Permalink
Create style.css
Browse files Browse the repository at this point in the history
  • Loading branch information
@ericaviana12
ericaviana12 authored Nov 13, 2024
1 parent 94575f5 commit ac47a17
Showing 1 changed file with 108 additions and 0 deletions.
108 changes: 108 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
/* Estilos básicos */
* { /* Seleciona todos os elementos na página */
margin: 0; /* Remove a margem padrão */
padding: 0; /* Remove o preenchimento (padding) padrão */
box-sizing: border-box; /* Faz com que o padding e a borda sejam incluídos no cálculo do tamanho total do elemento */
font-family: Arial, sans-serif; /* Define a fonte padrão para Arial, ou sans-serif se Arial não estiver disponível */
}

/* Estilo do corpo da página */
body { /* Seleciona o elemento <body> */
background-color: #f5f5f5; /* Define a cor de fundo da página como um cinza claro */
display: flex; /* Define o modelo de layout como flexbox */
flex-direction: column; /* Organiza os itens no eixo vertical (coluna) */
align-items: center; /* Alinha os itens no centro do eixo horizontal */
justify-content: center; /* Alinha os itens no centro do eixo vertical */
min-height: 100vh; /* Garante que o corpo tenha pelo menos a altura da janela do navegador */
color: #333; /* Define a cor do texto como um cinza escuro */
}

/* Estilo do título principal */
h1 { /* Seleciona o elemento <h1> */
font-size: 2rem; /* Define o tamanho da fonte como 2rem (relativo ao tamanho da fonte do documento) */
color: #4a90e2; /* Define a cor do texto como um tom de azul */
margin-bottom: 1rem; /* Define a margem inferior do título */
}

/* Estilo do formulário */
form { /* Seleciona o elemento <form> */
background-color: #ffffff; /* Define o fundo do formulário como branco */
padding: 1.5rem; /* Define o preenchimento interno do formulário */
border-radius: 8px; /* Arredonda as bordas do formulário */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Aplica uma sombra suave ao redor do formulário */
width: 100%; /* Define a largura do formulário como 100% do seu contêiner */
max-width: 400px; /* Define a largura máxima do formulário */
text-align: center; /* Alinha o texto dentro do formulário ao centro */
}

/* Estilo dos rótulos e inputs */
label { /* Seleciona o elemento <label> */
display: block; /* Exibe o <label> como um bloco, ocupando toda a largura disponível */
margin-bottom: 0.5rem; /* Define a margem inferior do <label> */
font-weight: bold; /* Torna o texto do <label> em negrito */
color: #4a90e2; /* Define a cor do texto como azul */
}

input[type="number"],
input[type="text"] { /* Seleciona os inputs de tipo number e text */
width: 100%; /* Define a largura dos inputs como 100% do seu contêiner */
padding: 0.5rem; /* Adiciona preenchimento interno aos inputs */
margin-bottom: 1rem; /* Define a margem inferior dos inputs */
border: 1px solid #ccc; /* Aplica uma borda fina e cinza ao redor dos inputs */
border-radius: 4px; /* Arredonda as bordas dos inputs */
font-size: 1rem; /* Define o tamanho da fonte dentro dos inputs */
}

/* Estilo dos botões */
button[type="submit"],
button[type="reset"] { /* Seleciona os botões de tipo submit e reset */
padding: 0.7rem 1.5rem; /* Define o preenchimento interno dos botões */
font-size: 1rem; /* Define o tamanho da fonte dos botões */
border: none; /* Remove a borda padrão dos botões */
border-radius: 4px; /* Arredonda as bordas dos botões */
cursor: pointer; /* Define o cursor como uma mãozinha ao passar o mouse sobre o botão */
transition: background-color 0.3s; /* Aplica uma transição suave para a mudança de cor do fundo */
}

button[type="submit"] { /* Seleciona o botão de tipo submit */
background-color: #4a90e2; /* Define o fundo do botão como azul */
color: white; /* Define a cor do texto dentro do botão como branco */
}

button[type="reset"] { /* Seleciona o botão de tipo reset */
background-color: #ccc; /* Define o fundo do botão como cinza */
color: #333; /* Define a cor do texto dentro do botão como cinza escuro */
margin-left: 1rem; /* Define a margem esquerda do botão */
}

button[type="submit"]:hover { /* Aplica estilo ao botão de submit quando o mouse passa sobre ele */
background-color: #357abd; /* Muda a cor do fundo para um tom mais escuro de azul */
}

button[type="reset"]:hover { /* Aplica estilo ao botão de reset quando o mouse passa sobre ele */
background-color: #999; /* Muda a cor do fundo para um tom mais escuro de cinza */
}

/* Estilo da frase "Volume do aquário:" */
p { /* Seleciona o elemento <p> */
font-size: 1.1rem; /* Define o tamanho da fonte como 1.1rem */
font-weight: bold; /* Torna o texto em negrito */
color: #4a90e2; /* Define a cor do texto como azul */
margin-top: 1.5rem; /* Define a margem superior do <p> */
text-align: center; /* Alinha o texto dentro do <p> ao centro */
}

/* Ajuste para o input de resultado */
#resultado { /* Seleciona o elemento com id "resultado" */
width: 80%; /* Define a largura como 80% do contêiner */
padding: 0.7rem; /* Adiciona preenchimento interno ao input */
border: 2px solid #4a90e2; /* Aplica uma borda de 2px e cor azul */
border-radius: 6px; /* Arredonda as bordas do input */
background-color: #e6f7ff; /* Define o fundo como azul claro */
color: #333; /* Define a cor do texto como cinza escuro */
font-size: 1.1rem; /* Define o tamanho da fonte do input */
font-weight: bold; /* Torna o texto dentro do input em negrito */
text-align: center; /* Alinha o texto dentro do input ao centro */
margin-top: 0.5rem; /* Define a margem superior do input */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Aplica uma sombra suave ao redor do input */
}

0 comments on commit ac47a17

Please sign in to comment.