-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path08_redeemMobile.html
160 lines (160 loc) · 8.1 KB
/
08_redeemMobile.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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">
<title>Offer Detail</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.nested.css">
</head>
<body>
<section class="notice">
<div class="container">
<div class="row">
<div class="col">
<h4>Save Successfuly! </h4>
<p class="notice-description">Don't forget to redeem the offer!</p>
<button class="btn-action btn-3 btn-200">browse more offers</button>
<button class="btn-action btn-3 btn-200">see my favorites</button>
<div class="btn-exit"><img src="svg/icon-x-2.svg"></div>
</div>
</div>
</div>
</section>
<section class="menu-mobile">
<div class="back-button">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 75 50" style="enable-background:new 0 0 75 50;" xml:space="preserve" class="back-arrow">
<path d="M3,23h69c1.1,0,2,0.9,2,2v0c0,1.1-0.9,2-2,2H3c-1.1,0-2-0.9-2-2v0C1,23.9,1.9,23,3,23z"></path>
<path d="M4,23.2l10.5,6.1c1,0.5,1.3,1.8,0.7,2.7l0,0c-0.5,1-1.8,1.3-2.7,0.7L2,26.7c-1-0.6-1.3-1.8-0.7-2.7l0,0C1.8,23,3.1,22.7,4,23.2z"></path>
<path d="M2,23.3l10.5-6.1c1-0.6,2.2-0.2,2.7,0.7l0,0c0.5,1,0.2,2.2-0.7,2.7L4,26.8c-1,0.6-2.2,0.2-2.7-0.7l0,0C0.7,25.1,1.1,23.9,2,23.3z"></path>
</svg>
</div>
<div class="menu-mobile-content">
<div class="cat-wrapper"><img src="svg/icon-cat-retail-light.svg" class="icon-cat-mobile">
<div class="cat-text-field inline">
<div class="cat-name">Retail</div>
<div class="cat-count">(26)</div>
</div>
</div>
<div class="cat-wrapper"><img src="svg/icon-cat-fitness-light.svg" class="icon-cat-mobile">
<div class="cat-text-field inline">
<div class="cat-name">Fitness</div>
<div class="cat-count">(26)</div>
</div>
</div>
<div class="cat-wrapper"><img src="svg/icon-cat-er-light.svg" class="icon-cat-mobile">
<div class="cat-text-field inline">
<div class="cat-name">Emergency Service</div>
<div class="cat-count">(26)</div>
</div>
</div>
<div class="cat-wrapper"><img src="svg/icon-cat-entertainment-light.svg" class="icon-cat-mobile">
<div class="cat-text-field inline">
<div class="cat-name">Entertainment</div>
<div class="cat-count">(26)</div>
</div>
</div>
<div class="cat-wrapper"><img src="svg/icon-cat-homeimprovement-light.svg" class="icon-cat-mobile">
<div class="cat-text-field inline">
<div class="cat-name">Home Improvement</div>
<div class="cat-count">(26)</div>
</div>
</div>
<div class="cat-wrapper"><img src="svg/icon-cat-nhoguide-light.svg" class="icon-cat-mobile">
<div class="cat-text-field inline">
<div class="cat-name">NHO Guide</div>
<div class="cat-count">(26)</div>
</div>
</div>
</div>
</section>
<header>
<div class="container">
<div class="row">
<div class="col"><img src="svg/icon-hamburger.svg" class="hamburger"><img src="svg/logo.svg" class="logo">
<nav><a class="nav-profile"> jay engstrom<span>(5)</span></a><a class="nav-favorite"> my favorite offers</a>
</nav>
</div>
</div>
</div>
</header>
<!-- fill up 80px header's height -->
<section class="header-shift"> </section>
<!-- screen section 5.1 (see redeem flow chart)-->
<section class="redeem-wrapper top-buffer-xs">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<div class="redeem-box"><img src="image/retailLogo-nobu.png" class="redeem-logo top-buffer-xs"><img src="image/offer-image-nobu2.png" class="redeem-image top-buffer-xs">
<h5>$25 off </h5>
<h6>your total bill, lets see it when this get extended to two lines </h6>
<div class="geo-location top-buffer-xs">
<div class="geo-location__icon">
<div class="padding-left--small"><span class="geo-location__city">Costa Mesa,</span><span class="geo-location__state">CA</span></div>
</div>
<div class="geo-location__mile">1.1 miles</div>
</div>
<button class="btn-action btn-3">direction</button>
<button class="btn-action btn-1">ready to redeem</button>
<div class="redeem-code top-buffer-xs"><span class="code-title">NHO Codes:</span><span class="code-digit">LXKC213</span></div>
<div class="detail-restric top-buffer-xs">
<div class="restric-title">Deal Restrictions</div>
<p>Must be used during displayed time frame. Deals cannot be combined with other deals or subsutituted</p>
<p class="expire top-buffer-xs">Expiration Date:<span> 01/16/2017</span></p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- screen section 5.2 - Modal(need HTML mockup in dev server) -->
<!-- screen section 5.3 (see redeem flow chart) -->
<section class="redeem-wrapper top-buffer-xs">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<div class="redeem-box"><img src="image/retailLogo-nobu.png" class="redeem-logo top-buffer-xs">
<h5>$25 off </h5>
<h6>your total bill, lets see it when this get extended to two lines </h6>
<div class="redeem-code"> <span class="code-title">NHO Codes:</span><span class="code-digit">LXKC213</span></div>
<button class="btn-action btn-1">redeemed</button>
<div class="explore-offer top-buffer-xs"><span> <a href="#" class="teal-1">Find More Offers</a></span><span>NHOO.COM</span></div>
</div>
</div>
</div>
</div>
</section>
<!-- screen section 5.4 button disabled (see redeem flow chart) -->
<section class="redeem-wrapper top-buffer-xs">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<div class="redeem-box"><img src="image/retailLogo-nobu.png" class="redeem-logo top-buffer-xs">
<h5>$25 off </h5>
<h6>your total bill, lets see it when this get extended to two lines </h6>
<div class="redeem-code"> <span class="code-title">NHO Codes:</span><span class="code-digit">LXKC213</span></div>
<button disabled="disabled" class="btn-action btn-1">redeemed</button>
<div class="explore-offer top-buffer-xs"><span> <a href="#" class="teal-1">Find More Offers</a></span><span>NHOO.COM</span></div>
</div>
</div>
</div>
</div>
</section>
<footer class="top-buffer">
<div class="container">
<div class="row justify-content-center">
<div class="col">
<div class="footer-link"><a>Privacy</a><a>Terms of Use</a><a>FAQ</a><a>Contact Us</a></div>
<div class="footer-copywrite">Copyright 2017 DBM Group. All Rights Reserved.</div>
</div>
</div>
</div>
</footer>
</body>
<!--JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--Slick Carousel-->
<script type="text/javascript" src="slick/slick.min.js"></script>
<!--custom javascript by Dylan (for clicking events)-->
<script src="script/main.js"></script>
</html>