3

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

#HTML #JavaScript #CSS
Fernanda Oliveira
Fernanda Oliveira
#meuPrimeiroProjeto
#parte3 - Construção do layout (index.html)

Oii gente, tudo bem com vocês?
Nesse artigo vou tratar da construção do nosso layout. Caso você não tenha visto as telas de como ele vai ficar, clique nesse link: https://postimg.cc/gallery/9r1hnV5

E vamos lá pro nosso HTML =)

Bem, aqui é aquela estrutura básica anteriormente enviada, sendo que adicionei os links que vão fazer ponte para os nossos arquivos de estilos que são: style.css e responsive.css.
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sistema Reformulado de PetShop do Prof Caio Delgado na Digital Innovation One</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/responsive.css">
</head>

Iniciando o conteúdo dentro do body, criei uma classe chamada geral para organizar os demais conteúdos dentro dela assim como aplicar estilos únicos.

A 1ª parte vai ser o nosso cabeçalho, onde temos o header e criei uma div logo para inserção da mesma. A outra servirá de navegação entre as páginas que é o nosso nav.

A 2ª parte é ref. o nosso conteúdo principal, onde temos a classe wrapper para organizar nossas duas seções que são: a coluna esquerda e a direita. A esquerda (pet-image) vai conter apenas a imagem dos nossos pets, e a direita (index-content) vai trazer nosso texto da página principal.

A classe links são aqueles contatos do GitHub, Linkedin e Discord.
<body>


  <div class="geral">



    <!-- 1ª parte - Cabeçalho -->
    <header>
      <div class="logo">
      </div>

      <nav>
      </nav>
    </header>




    <!-- 2ª parte - Conteúdo principal do nosso site -->
    <main>
      <div class="wrapper">

        <!-- Imagem dos pets -->
        <div class="pet-image image-index">
          <img src="images/3.png">
        </div>


        <!-- Conteúdo de interação -->
        <div class="index-content">
        </div>


        <div class="links">
        </div>
        
       </div>


      </div>
    </main>




  </div>
  <!-- /geral -->



</body>
</html>

Agora vamos inserir as informações:
1ª parte - Cabeçalho
<header>
      <div class="logo">
        <a href="index.html"><img src="images/logo.jpg"></a>
      </div>


      <nav>
        <ul>
          <li><a href="index.html">Início</a></li>
          <li><a href="cadastro.html">Cadastrar</a></li>
          <li><a href="consultar.html">Consultar</a></li>
        </ul>
      </nav>
    </header>


2ª parte - Conteúdo principal do nosso site
<main>
      <div class="wrapper">


        <!-- Imagem -->
        <div class="pet-image image-index">
          <img src="images/3.png">
        </div>



        <!-- Conteúdo de interação -->
        <div class="index-content">
          <h1>span>Mini sistema</span> de cadastro de pets para clínicas veterinárias</h1>
            <h2>acesso através do localStorage com JavaScript</h2>


          <p>Oii gente!!!  Me chamo Fernanda Gonçalves, sou aluna na plataforma da DIO e estou dando início a esse projetinho com o objetivo de praticar JavaScript - juntamente com interações em páginas HTML - para aprimorar os conhecimentos.</p>
          <p>Já o meu propósito em compartilhar essas práticas, é inspirar outros estudantes assim como eu, a desafiar a si mesmo no mundo da programação.</p>


          <div class="links">
              <i class="fab fa-github-square"></i><a href=""> GitHub</a>
              <i class="fab fa-linkedin"></i><a href=""> LinkedIn</a>
              <i class="fab fa-discord"></i><a href="">Discord: fegoncalves#3737</a>
          </div>
        </div>


      </div>
    </main>

Pra finalizar, vamos adicionar também os scripts antes da tag de fechamento do nosso body:
  <!-- Scripts -->
  <script src="js/script.js"></script>
  <script src="https://kit.fontawesome.com/2c36e9b7b1.js"></script>
O primeiro arquivo é o nosso futuro código que vai fazer a interação com o nosso HTML <3
O segundo é pela utilização dos ícones da página Font awesome. Uma vez feito o cadastro, esse código deve ser inserido no site e podemos utilizar os ícones free que eles disponibilizam.

Caso alguma informação passou despercebido, posso editar esse artigo ou qualquer coisa comento no próximo artigo e também vou disponibilizar o link do meu gitHub com essas informações e as demais que for colocando aqui para que possam baixar e ter uma melhor visualização.

Até+
4
67

Comentários (4)

0
Fernanda Oliveira

Fernanda Oliveira

29/12/2020 02:02

Que bom que gostou...obrigada Felipe :-)

1
Felipe

Felipe

29/12/2020 00:36

Muito bom! nada como ver passo a passo as lições que aprendemos!

0
Fernanda Oliveira

Fernanda Oliveira

28/12/2020 22:09

Vitor :-)

1
V

Vitor Silva

28/12/2020 20:57

Muito bom! ^^

Futura dev full stack <3

Brasil