Zeplin_testWeb/index.html at master · VinChien/Zeplin_testWeb · 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
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>渴不渴以</title>
    <!-- 連接css -->
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <nav>
      <div id="box">
        <a href="#">
          <img src="./img/logo.png" alt="渴不渴以 logo" />
        </a>
        <div></div>
        <div id="link">
          <a href="#">最新消息</a>
          <a href="#">推薦飲品</a>
          <a href="#">經營理念</a>
        </div>
        <div></div>
        <div id="social">
          <a href="#">
            <img src="./img/facebook.png" alt="facebook" />
          </a>
          <a href="#">
            <img src="./img/instagram.png" alt="instagram" />
          </a>
        </div>
      </div>
    </nav>
    <div id="banner">
      <img src="./img/banner_title.png" alt="渴不渴以喝一口" />
    </div>

    <div id="contant">
      <h1>最新消息</h1>
      <section id="news">
        <div>
          <h3>優惠資訊</h3>
          <h4>夏日特惠，所有飲品8折起</h4>
          <hr />
          <p>
            夏日炎炎，即日起至2020.10.31日，全館所有飲品8折起，快來渴不渴以解你的渴吧!
          </p>
          <div>
            <img src="./img/new.png" alt="最新消息縮圖" />
          </div>
        </div>
        <div>
          <h3>優惠資訊</h3>
          <h4>夏日特惠，所有飲品8折起</h4>
          <hr />
          <p>
            夏日炎炎，即日起至2020.10.31日，全館所有飲品8折起，快來渴不渴以解你的渴吧!
          </p>
          <div>
              <img src="./img/new.png" alt="最新消息縮圖" />
          </div>
        </div>
        <div>
          <h3>優惠資訊</h3>
          <h4>夏日特惠，所有飲品8折起</h4>
          <hr />
          <p>
            夏日炎炎，即日起至2020.10.31日，全館所有飲品8折起，快來渴不渴以解你的渴吧!
          </p>
          <div>
              <img src="./img/new.png" alt="最新消息縮圖" />
          </div>
        </div>
      </section>
      <h1>推薦飲品</h1>
      <section id="product">
        <img src="./img/drink.png" alt="推薦飲品縮圖" />
        <div>
          <h3>夏日鳳梨冰茶</h3>
          <h4>Summer Pineapple Tea</h4>
          <p>
            炎炎夏日，最適合來一杯帶有鳳梨果粒配上青茶的消暑茶飲，快來渴不渴以來一杯夏日鳳梨冰茶吧!
          </p>
        </div>
      </section>
      <h1>經營理念</h1>
      <section id="idea">
        <img src="./img/idea.png" alt="經營理念縮圖" />
        <div>
          <h2>唯有按部就班，才能成就「好茶」。</h2>
          <p>七十二小時慢火熬煮。<br />三十道工程手工打造。</p>
          <a href="#">閱讀更多</a>
        </div>
      </section>
      <footer>
        <img src="./img/logo.png" alt="渴不渴以" />
        <p>臺南市安南區安南路一段1號|cobucoyi@gmail.com</p>
        <p>© 2015 - 2020 渴不渴以 All right reserved.</p>
      </footer>
    </div>
  </body>
</html>