-
Notifications
You must be signed in to change notification settings - Fork 0
/
success.html
130 lines (122 loc) · 5.34 KB
/
success.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>六角家具工坊 | 付款成功</title>
<link rel="stylesheet" href="stylesheet/all.css">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css"
integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
</link>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">六角家具工坊</a>
<a class="nav-link d-flex align-items-center order-md-1 text-accent" href="cart.html"><i
class="fas fa-shopping-cart"></i></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">首頁 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="product.html">家具</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">登入</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="header mb-md-6">
<div class="container px-0">
<div class="header-img bg-cover d-flex flex-column justify-content-center align-items-center"
style="background-image: url(https://images.unsplash.com/photo-1449247709967-d4461a6a6103?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60);">
<div class="success-line"></div>
<h1 class="text-hide">
付款成功
<img src="./img/success-text.svg" width="190" alt="">
</h1>
<div class="progress-line">
<div class="progress-pointer"></div>
<div class="progress-pointer"></div>
<div class="progress-pointer"></div>
</div>
<a href="product.html"
class="btn btn-contrast btn-block btn-lg text-accent py-3 w-25 d-none d-md-block">繼續逛逛</a>
</div>
</div>
</header>
<a href="product.html" class="btn btn-contrast btn-block btn-lg text-accent py-3 d-md-none">繼續逛逛</a>
<section class="bg-accent p-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-5 d-flex align-items-center justify-content-center justify-content-md-start mb-4 mb-md-0">
<span class="text-white h4 mb-0">訂閱你我的甜蜜郵件</span>
</div>
<div class="col-md-5">
<div class="form-group mb-0">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
</div>
<input type="email" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append">
<button class="btn btn-contrast text-accent" type="button"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="text-accent bg-light p-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-5 d-flex flex-column justify-content-between">
<div>
<img src="./img/footer-logo.svg" height="27" alt="">
</div>
<div class="my-5">
<div>07-1234-5678</div>
<div>[email protected]</div>
<div>800 高雄市新興區幸福路 520 號</div>
</div>
</div>
<div class="col-md-5 text-right d-none d-md-block">
<img src="./img/footer-text.svg" width="60" alt="">
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col-md-5 mt-2">
<a href="#"><img src="./img/[email protected]" height="32" width="32" alt=""></a>
<a href="#"><img src="./img/ic-facebook.svg" height="32" width="32" alt=""></a>
</div>
<div class="col-md-5 text-md-right mt-2">
<span>© 2018 Sweetaste* All Rights Reserved</span>
</div>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>