0

Mini sistema de cadastro de pets (acesso através do localStorage) parte6

#HTML #JavaScript #CSS
Fernanda Oliveira
Fernanda Oliveira

#meuPrimeiroProjeto

#parte6 - Estilização das páginas e responsividade


Vamos lá!!

Vou começar falando de um site (pra quem não conhece ainda) que é o google fonts. Caso você ainda não conheça, vou deixar o link aqui e nele você encontra uma grande variedade de fontes para usar em seus trabalhos de graça e foi lá que importei essa que estou utilizando no projeto (tem opção de fazer download também).
https://fonts.google.com/

No estilo, fiz uso do flexbox para organizar nosso projetinho. Querendo conhecer um pouco mais vou deixar alguns links aqui:

1. Não está em português mas vale a pena conferir e está sempre sendo atualizado:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2. Muito legal esse pen:
https://codepen.io/justd/full/yydezN/

3. Praticar online de um jeito divertido: 
https://flexboxfroggy.com/


As seções mais importantes estão comentadas. Caso haja alguma dúvida você pode colocar nos comentários e se eu puder ajudar vai ser um prazer ;-)



Folha de estilo padrão (style.css):

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700&display=swap');

*{
  margin: 0;
  padding: 0;
}


  /* Nosso body tem uma imagem de fundo e a aplicação de um gradiente.  Essa imagem não vai se repetir (no-repeat), vai estar em uma posição centralizada na tela do dispositivo ocupando sua totalidade (cover) e ficará fixa (mesmo que utilizemos a barra de rolagem ela se manterá fixa) */

body{
  background:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.52)), url(../images/bg1.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  min-height: 100vh; /* vh é uma unidade relativa da altura da viewport/tamanho da tela */
  overflow-y: hidden; /*  */
  font-family: 'Baloo 2', cursive;
  font-weight: 400;
  color: #2F1242;
}

/* ID do body que dá permissão a exibição da barra de rolagem na página de consulta */

#vertical{ 
  min-height: initial;
  overflow: auto;
}

p{
  margin-bottom: 20px;
  font-size: 16px;
}

h1{
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 20px;
}

h2{
  font-weight: 700;
  font-size: 18px;
  margin-top: -15px;
  margin-bottom: 20px;
  text-transform: uppercase;
}


.geral {
  margin: 16px 140px 0px 140px;  
  min-height: 100vh;
}


/* Header com logo e nav */
header{
  background-color: #FFF;
  display: flex;  
  align-items: center;
  padding: 10px 8px;
  -webkit-box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.10);
  -moz-box-shadow:    4px 4px 10px 0px rgba(50, 50, 50, 0.10);
  box-shadow:         4px 4px 10px 0px rgba(50, 50, 50, 0.10);
}

header .logo,
header nav,
.index-content,
.cadastro-content,
#consulta-content,
.pet-image{
  width: 50%;
}

header .logo img{
  width: 240px;
}

header nav{
  padding: 4px 10px;
  text-align: right;
}

header nav ul li{
  display: inline;
  margin: 0px 10px;
}

header nav a{
  color: #2F1242;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block; /* elementos alinhados lado a lado */
  font-size: 16px;
  cursor: pointer;
  font-weight: 700;
}

header nav a:link,
header nav a:visited{
  color:#2F1242;
}

header nav a:hover,
header nav a:active{
  color: #b048c5;
}





/* Conteúdo principal */
.wrapper{
  margin-top: 5%;
  /* nosso container e divs alinhados no centro, verticalmente e horizontalmente */
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-index img{
  width: 68%;
  height: auto;
}

.image-cadastro img{
  width: 98%;
  height: auto;
}

.image-consultar img{
  width: 74%;
  height: auto;
}

.index-content span{
  color: #FD64A7;
}

.cadastro-content{
  /* O conteúdo dessa div está centralizada e os elementos ficarão alinhados em colunas (h1 e form) */
  display: flex;
  align-items: center;
  flex-direction: column;
}

.consulta-content ul li{
  margin-left: 60px;
}




/* Links das redes sociais na index */
.links div{
  display: flex;
  align-items: center;
}

.links i{
  font-size: 20px;
  margin-right: 8px;
}

.links a{
  margin-right: 30px;
  color: #2F1242;
  text-decoration: none;
}

.links a:link,
.links a:visited{
  color:#2F1242;
}

.links a:hover,
.links a:active{
  color: #b048c5;
}





/* Formulário de cadastro */
.bg-form{
  width: 300px;
  padding: 5px 16px;
  background-color: #2F1242;
  display: flex;
  justify-content: center;
  border-radius: 10px;
}

form div{
  margin: 16px;
}

label{
  display: inline-block;
  width: 120px;
  color: #FFF;
}

input{
  width: 200px;
  height: 30px;
  border-radius: 2px;
  display: block;
  margin-top: 2px;
  padding-left: 10px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ccc;
  font-family: 'Baloo 2', cursive;
  font-weight: 400;
}

#btn-envio input,
#consulta-content input{
  display: inline-block;
  width: 98px;
  cursor: pointer;
  text-transform: uppercase;
  padding: 0;
  background-color: #DDCBFD;
  color: #2F1242;
  font-weight: 700;
  border: 0;
}

#btn-envio input:hover{
  background-color: #FFF;
  color: #2F1242;
}

#consulta-content input:hover{
  background-color: #b048c5;
  color: #FFF;
}

#registroPet::placeholder,
#nomePet::placeholder,
#tipoPet::placeholder,
#idadePet::placeholder{
  color: #CCC;
}


Nosso responsivo (responsive.css):

/* até a largura máxima de 1212 vamos ter esse estilo */
@media (max-width: 1212px) {
  .geral {
    margin: 10px 100px;  
  }
}








/* até a largura máxima de 768px vamos ter esse estilo */
@media (max-width: 768px) {
  .geral {
    margin: 10px 20px;  
  }  
  header{
    padding: 10px 0px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  header .logo,
  header nav{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #consulta-content{
    margin-left: 30px;
  }
  .index-content,
  .cadastro-content,
  #consulta-content,
  .pet-image{
    width: 100%;
  }
  .pet-image {
    display: none;
  }  
}








/* até a largura máxima de 365px vamos ter esse estilo */
@media (max-width: 365px) {  
  header nav a,
  label{
    font-size: 14px;
  }
  h1{
    font-size: 36px;
  }
  .bg-form{
    width: 280px;
    padding: 5px 6px;
  }  
}

GitHub do projeto:
https://github.com/fegoncalves/petshop-sistem

Página do projeto:
https://fegoncalves.github.io/petshop-sistem/


Se quiser o formulário simples, pode vê-lo e copiar aqui no codePen:
https://codepen.io/fegoncalves/pen/gOwRQBq


Quer acompanhar esse projeto desde início? Acesse os endereços:
Mini sistema de cadastro de pets (acesso através do localStorage)

Parte 5 - Construção do layout (consultar.html)
https://bit.ly/2X9wYC3


Parte 4 - Construção do layout (consulta.html)
https://bityli.com/Ow8tU

Parte 3 - Construção do layout (index.html)
https://bityli.com/RgjWK

Parte 2 - Estrutura básica do nosso HTML
https://bityli.com/3ibcb

Parte 1 - Introdução
https://bityli.com/mIkjd


Até+ no próximo artigo :-)
0
46

Comentários (0)

Futura dev full stack <3

Brasil