doceria_single_page/index.html at master · CleilsonAndrade/doceria_single_page · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Doceria</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="script.js" defer></script>
</head>

<body>
  <div class="container">
    <div id="sidebar">
      <div class="sidebar-container">
        <img src="img/stand.png" alt="Logo Doceria" class="logo-doceria">
        <h1>Doceria</h1>
        <nav>
          <ul>
            <li><a href="#sessao-bemvindo">Bem vindo</a></li>
            <li><a href="#sessao-sobre">Sobre nós</a></li>
            <li><a href="#sessao-doces1">Doces 1</a></li>
            <li><a href="#sessao-doces2">Doces 2</a></li>
            <li><a href="#sessao-doces3">Doces 3</a></li>
            <li><a href="#sessao-contato">Entre em contato</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="content">
      <main>
        <section id="sessao-bemvindo">
          <div class="banner"></div>
          <div class="sessao-bemvindo-content">
            <h1>Seja bem vindo a doceria</h1>
            <div class="sessao-minibanner"></div>
            <div class="sessao-descricao">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio incidunt aliquam dolores eveniet
                ullam, commodi doloribus hic eius ratione voluptate blanditiis accusantium enim error quae modi sequi
                fugit ipsam atque.
              </p>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio incidunt aliquam dolores eveniet
                ullam, commodi doloribus hic eius ratione voluptate blanditiis accusantium enim error quae modi sequi
                fugit ipsam atque.
              </p>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio incidunt aliquam dolores eveniet
                ullam, commodi doloribus hic eius ratione voluptate blanditiis accusantium enim error quae modi sequi
                fugit ipsam atque.
              </p>
              <a href="#" class="sessao-bemvindo-btn">Leia mais</a>
            </div>
          </div>
        </section>
        <section id="sessao-sobre">
          <div class="sessao-content">
            <h1>Sobre nós</h1>
            <div class="sessao-minibanner"></div>
            <div class="sessao-descricao">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio incidunt aliquam dolores eveniet
                ullam, commodi doloribus hic eius ratione voluptate blanditiis accusantium enim error quae modi sequi
                fugit ipsam atque.
              </p>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio incidunt aliquam dolores eveniet
                ullam, commodi doloribus hic eius ratione voluptate blanditiis accusantium enim error quae modi sequi
                fugit ipsam atque.
              </p>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio incidunt aliquam dolores eveniet
                ullam, commodi doloribus hic eius ratione voluptate blanditiis accusantium enim error quae modi sequi
                fugit ipsam atque.
              </p>
            </div>
          </div>
        </section>
        <section id="sessao-doces1">
          <h2>Doces 1</h2>
          <div class="doces1-imgs banner-galeria" id="img1"></div>
          <div class="doces1-imgs banner-galeria" id="img2"></div>
          <div class="doces1-imgs banner-galeria" id="img3"></div>
          <div class="doces1-imgs banner-galeria" id="img4"></div>
          <div class="doces1-imgs banner-galeria" id="img5"></div>
        </section>
        <section id="sessao-doces2">
          <h2>Doces 2</h2>
          <div class="doces2-imgs banner-galeria" id="img6"></div>
          <div class="doces2-imgs banner-galeria" id="img7"></div>
          <div class="doces2-imgs banner-galeria" id="img8"></div>
        </section>
        <section id="sessao-doces3">
          <h2>Doces 3</h2>
          <div class="doces3-imgs banner-galeria" id="img9"></div>
          <div class="doces3-imgs banner-galeria" id="img10"></div>
          <div class="doces3-imgs banner-galeria" id="img11"></div>
          <div class="doces3-imgs banner-galeria" id="img12"></div>
        </section>
        <section id="sessao-contato">
          <h2>Entre em contato</h2>
          <form id="form-contato">
            <input type="text" name="name" placeholder="Nome">
            <input type="email" name="name" placeholder="E-mail">
            <textarea name="message" placeholder="Escreva a sua mensagem"></textarea>
            <input type="submit" value="Enviar">
          </form>
        </section>
        <footer>
          <p>Rodapé</p>
        </footer>
      </main>
    </div>
  </div>
</body>

</html>