PR para correção e comentários #5
Conversation
Páginas Home e Quem somos Projeto f4Life
F4life contato
F4life faq
Arrumando fonte e linkando paginas
paula-aribeiro
left a comment
paula-aribeiro
left a comment
There was a problem hiding this comment.
Oi pessoal, parabéns pelo trabalho em equipe e pela landing page de vocês, ficou animal!
Vocês captaram bem a ideia da marca, tanto no layout, com as escolhas de cores e fonte, quanto no conteúdo, com a escolha dos textos e das seções do site. Também gostei que vocês tiveram o cuidado de manter o header e footer padronizados, o que torna a usabilidade muito fluida.
Quanto ao código, no geral está bem organizado, exceto algumas correções que fiz abaixo. Eu só queria destacar um ponto negativo que é a repetição de código nos arquivos CSS. Entendo que vocês quiseram fazer um CSS pra cada um, pra ficar mais fácil trabalhar em paralelo. Mas o usual é ter um style.css, que contém as estilizações comuns em todas as páginas (como header e footer) e outros arquivos com as estilizações específicas. Isso evita que o código fique repetido e se algum dia alguém quiser trocar a cor de um menu, não tem que caçar todos os menus em todos os CSS para alterar.
Parabéns pelo trabalho e continuem evoluindo 🚀 🚀 🚀
| <p><a href="f4lifefaq.html" class="menuFAQ">FAQ</a><p><a href="quemSomosf4life.html" class="menu">Quem Somos</a></nav> | ||
| </header> | ||
| <section class="sobreNos"> | ||
| <h1 class="empresaNome">F 4 L I F E</h1> |
There was a problem hiding this comment.
É possível usar o CSS para controlar o espaçamento entre as letras. Veja como fazer isso aqui: https://cssreference.io/property/letter-spacing/
| <section class="sobreNos"> | ||
| <h1 class="empresaNome">F 4 L I F E</h1> | ||
| <h2>Moradias univesitárias</h2> | ||
| <h3 class="slogan">As melhores moradias para as melhores pessoas.</h3> |
There was a problem hiding this comment.
Senti falta de mais informações sobre a empresa na página principal. Entendo que vocês quiseram separar os arquivos para ficar mais fácil trabalhar em paralelo, mas a página inicial tem que ser a mais cativante em uma landing page
| .brianImage { | ||
| display: block; | ||
| width: 15vw; | ||
| height: 30vh; | ||
| grid-column-start: 1; | ||
| grid-column-end: 2; | ||
| } | ||
|
|
||
| .brianNome { | ||
| display: block; | ||
| grid-column-start: 1; | ||
| grid-column-end: 2; | ||
| grid-row-start: 2; | ||
| } | ||
|
|
||
| .yanImage { | ||
| display: block; | ||
| width: 15vw; | ||
| height: 30vh; | ||
| grid-column-start: 2; | ||
| grid-column-end: 3; | ||
| } | ||
|
|
||
| .yanNome { | ||
| display: block; | ||
| grid-column-start: 2; | ||
| grid-column-end: 3; | ||
| grid-row-start: 2; | ||
| grid-row-end: 3; | ||
| } | ||
|
|
||
| .jhonatanImage { | ||
| display: block; | ||
| width: 15vw; | ||
| height: 30vh; | ||
| grid-column-start: 3; | ||
| grid-column-end: 4; | ||
| } | ||
|
|
||
| .jonathanNome { | ||
| display: block; | ||
| grid-column-start: 3; | ||
| grid-column-end: 4; | ||
| grid-row-start: 2; | ||
| grid-row-end: 3; | ||
| } |
There was a problem hiding this comment.
As classes de nome e de imagem estão com código repetido. Poderia ser criada uma classe para as propriedades em comum e ids para propriedades específicas
| .faceLogo { | ||
| margin-top: 30px; | ||
| margin-left: 13px; | ||
| width: 30px; | ||
| height: 30px; | ||
| } | ||
|
|
||
| .faceLogo:hover{ | ||
| opacity: 50%; | ||
| } | ||
|
|
||
| .instaLogo { | ||
| margin-top: 30px; | ||
| margin-left: 13px; | ||
| width: 30px; | ||
| height: 30px; | ||
| } | ||
|
|
||
| .instaLogo:hover{ | ||
| opacity: 50%; | ||
| } | ||
|
|
||
| .twitterLogo { | ||
| margin-top: 30px; | ||
| margin-left: 13px; | ||
| width: 30px; | ||
| height: 30px; | ||
| } | ||
|
|
||
| .twitterLogo:hover{ | ||
| opacity: 50%; | ||
| } |
There was a problem hiding this comment.
Mesma coisa em relação a código repetido e criação de classe
| } | ||
|
|
||
|
|
||
| @media screen and (max-device-width : 420px){ |
There was a problem hiding this comment.
Para o modelo responsivo, faltou ajustar o menu
O restante ficou muito bom!
| <select id="assunto"> | ||
| <option>Informações</option> | ||
| <option>Dúvidas</option> | ||
| <option>Sugestões</option> | ||
| <option>Críticas</option> | ||
| <option>Outros</option> | ||
| </select> |
| </section> | ||
| <footer> | ||
| <a target="_blank" href="https://www.facebook.com/"><img src="white-facebook-icon-transparent-0.jpg" alt="facebook" class="faceLogo"></a> | ||
| <a target="_blank" href="https://www.instagram.com/?hl=pt-br"><img src="Instagram-Logo-White-300x300.png" alt="instagram" class="instaLogo"></a> | ||
| <a target="_blank" href="https://twitter.com/login?lang=pt"><img src="twitter-xxl.png" alt="twitter" class="twitterLogo"></a> | ||
| <p class="copyRight">Copyright © 2019 | Designer by Yan Corrêa, Jhonatan Felipe and Brian Mello </p> | ||
| </footer> | ||
| </body> | ||
| </html> No newline at end of file |
| border: #6cd8d1 3px solid; | ||
| } | ||
|
|
||
| @media screen and (max-width:650px){ |
There was a problem hiding this comment.
Essa página também ficou muito boa no formato mobile, mas poderia ter colocado uma margem para que o formulário não ficasse tão próximo da borda da tela
| section { | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr 1fr 1fr; | ||
| grid-template-rows: 1fr 1fr; | ||
| grid-gap: 20px; | ||
| background-color: #3c495f; | ||
| height: 100%; | ||
| justify-items: center; | ||
| align-items: center; | ||
| padding: 100px 20px 100px; | ||
| } |
| section{ | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr; | ||
| padding: 50px 20px 50px | ||
| } |
4 participants
No description provided.