Design com HTML e CSS

1. Melhore seu cabeçalho

• Coloque o seguinte código no fim do arquivo app/assets/stylesheets/application.css:

.navbar {
  min-height: 38px;
  background-color: #f55e55;
}

Agora recarregue a página e verifique as mudanças. Você pode tentar mudar a cor ou a fonte do topo (header). Você pode checar a referência de cores dessse site: http://color.uisdc.com/.

Treinadores: fale sobre a propriedade display, sobre inline e block element.

• Agora coloque essas linhas no final:

.navbar a.brand {
  font-size: 18px;
}
.navbar a.brand:hover {
  color: #fff;
  background-color: transparent;
  text-decoration: none;
}

Treinadores: explique os 4 estados de um link

2. Faça sua tabela

• Nós vamos usar o Bootstrap para Melhorar nossa tabela. Ache nessa linha no arquivo app/views/ideas/index.html.erb e troque:

<table>

por

<table class="table">

• Modifique o tamanho da imagem usando as seguintes linhas:

<%= image_tag(idea.picture_url, :width => 600) if idea.picture.present? %>

tente mudar a largura e veja o que vai acontecer

• Adicione as seguintes linhas no final do arquivo app/assets/stylesheets/ideas.css.scss:

.container a:hover {
  color: #f55e55;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0);
}

• Tente usar a propriedade background-image para colocar um background, veja http://subtlepatterns.com/ para alguns padrões.

1. Adicione algum estilo ao footer

• Adicione as seguintes linhas no fim do arquivo app/assets/stylesheets/application.css:

footer {
  background-color: #ebebeb;
  padding: 30px 0;
}

tente colocar mais coisas nofooter, então ajuste sua posição.

1. Coloque algum estilo no botão

• Abra http://localhost:3000/ideas/new e procure o botão Criar Ideia.

adicione essas linhas ao app/assets/stylesheets/ideas.css.scss

.container input[type="submit"] {
  height: 30px;
  font-size: 13px;
  background-color: #f55e55;
  border: none;
  color: #fff;
}

Treinadores: Explique como usar border em css, tente modificar o estilo do botão para arrendondá-lo, adicione sombra ou cor.

Anterior   Próximo