-
Notifications
You must be signed in to change notification settings - Fork 0
/
festival.html
134 lines (128 loc) · 6.41 KB
/
festival.html
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="en">
<head>
<title>年節系列|四秀仔</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<link rel="icon" type="image/png" href="img/favicon-1.png" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="animationShape" class="animationShape"><img class="wow tada" data-wow-duration="2s" src="img/四秀-1.svg" alt="" style="width:100vw;height: 50vh;text-align:center;margin-top: 5%;"></div>
<nav class="navbar navbar-expand-sm navbar-light px-3" style="background:#ECB88A;">
<a class="navbar-brand" href="index.html"></a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId"
aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0 ">
<li class="nav-item active px-2">
<a class="nav-link" href="index.html">首頁 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active px-2">
<a class="nav-link " href="about.html">關於我們</a>
</li>
<li class="nav-item active dropdown px-2">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">產品列表</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="nostalgic.html">懷舊系列</a>
<a class="dropdown-item" href="#">年節系列</a>
<a class="dropdown-item" href="dense.html">綿密系列</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0 ">
<input class="form-control mr-sm-2" type="text" placeholder="輸入產品名稱">
<button class="btn btn-outline-success my-2 my-sm-0 mx-auto" type="submit">搜尋</button>
<a class="login ml-3" href="login.html">會員登入</a>
<a class="car" href="#" data-toggle="modal" data-target="#exampleModalCenter"> <i
class="fas fa-shopping-cart mx-3"></i></a>
</form>
</div>
</nav>
<div class="container-fluid">
<div class="d-flex">
<div class="left-wrapper">
<div class="left left-bg2 wow fadeInUp delay-2s">
<!-- <figure>
<img src="img/about-01.jpg" alt="">
</figure> -->
<ul class="d-flex wow fadeInUp delay-3s">
<li><a href="nostalgic.html" title="懷舊商品">懷舊系列</a></li>
<li><a href="#" style="background:rgba(247,190,76,.7);" title="年節商品">年節系列</a></li>
<li><a href="dense.html" title="綿密商品">綿密系列</a></li>
</ul>
</div>
</div>
<div class="right-wrapper">
<div class="right wow fadeInDown delay-2s">
<h1>年節系列</h1>
<h5>Spring Festival Series</h5>
<h3>喜氣洋洋，嘴角都上揚</h3>
<br>
<hr>
<ul class="d-flex ">
<li class="d-flex"><a href=""><img src="img/瓜子.png" class="lazyload" alt="" title="瓜子"></a>
<div class="text">
<h4>瓜子<span class="heart"><i class="far fa-heart fa-fa-1g"></i></h4>
<p>瓜子是在華人地區常見的一種零食，原料為西瓜籽。為了增加風味可以同時加入鹽、花椒、桂皮、大茴等調味料。亦有不添加調味料烘炒的瓜子，被稱作干炒。</p>
</div>
</li>
<li class="d-flex"><a href=""><img src="img/開心果.png" class="lazyload" alt="" title="開心果"></a>
<div class="text">
<h4>開心果<span class="heart"><i class="far fa-heart fa-fa-1g"></i></h4>
<p>開心果營養豐富，味道可口，是很受歡迎的零食。最早的商品名是開口笑。現在是過年過節必備不可缺少的商品之一。</p>
</div>
</li>
<li class="d-flex"><a href=""><img src="img/腰果.png" class="lazyload" alt="" title="腰果"></a>
<div class="text">
<h4>腰果<span class="heart"><i class="far fa-heart fa-fa-1g"></i></h4>
<p>腰果仁（通稱腰果）是十分受歡迎的零嘴，因本身風味十足而時常單獨食用，僅在烘焙後灑上少數鹽或糖提味；亦可裹上巧克力。</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="plugin/wow.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
<script>
$(window).width(function () {
var x = $(window).width();
console.log(x);
if (x < 1100) {
$(".left").removeClass("wow");
$(".left ul").removeClass("wow");
$(".right").removeClass("wow");
}
});
$(".fa-heart").click(function () {
$(this).toggleClass("fas");
})
new WOW().init();
$("img.lazyload").lazyload();
</script>
</body>
</html>