-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
209 lines (191 loc) · 7.49 KB
/
index.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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Commissioner:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<!-- Fontawesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<!-- Custom css -->
<link rel="stylesheet" href="./css/style.css" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<title>Frontend Mentor | Crowdfunding product page</title>
</head>
<body>
<!-- Header -->
<header id="header">
<div class="container">
<!-- Nav wrapper -->
<nav id="navbar" class="flex">
<div class="logo">
<img src="./images/logo.svg" alt="crowdfund" />
</div>
<ul id="main-nav" class="flex">
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Discover</a></li>
<li class="nav-item">
<a href="#" class="nav-link">Get Started</a>
</li>
</ul>
<button id="hamburger" class="hamburger">
<div class="line" id="line1"></div>
<div class="line" id="line2"></div>
<div class="line" id="line3"></div>
</button>
</nav>
</div>
</header>
<!-- Main content -->
<section id="main-content">
<div class="content-container">
<div class="card flex flex__col" id="first-card">
<div class="card-img">
<img src="./images/logo-mastercraft.svg" alt="" />
</div>
<h2 class="lg-heading">Mastercraft Bamboo Monitor Riser</h2>
<p class="lead">
A beautiful & handcrafted monitor stand to reduce neck and eye
strain.
</p>
<div class="btn-wrapper flex">
<button href="#" class="btn btn-primary">Back this project</button>
<button class="btn btn-light flex">
<img src="./images/icon-bookmark.svg" alt="" />
Bookmark
</button>
<button class="btn btn-dark">
<img src="./images/icon-bookmark.svg" alt="" />
</button>
</div>
</div>
<!-- === -->
<div class="card flex flex__col">
<div class="pricing flex">
<div>
<h4>$89,914</h4>
<p class="lead">of $100,000 backed</p>
</div>
<div>
<h4>5,007</h4>
<p class="lead">total backers</p>
</div>
<div>
<h4>56</h4>
<p class="lead">days left</p>
</div>
</div>
<div class="progress-bar"></div>
</div>
<div class="card flex flex__col">
<div>
<h3 class="md-heading">About this project</h3>
<p class="lead">
The Mastercraft Bamboo Monitor Riser is a sturdy and stylish
platform that elevates your screen to a more comfortable viewing
height. Placing your monitor at eye level has the potential to
improve your posture and make you more comfortable while at work,
helping you stay focused on the task at hand.
</p>
<p class="lead">
Featuring artisan craftsmanship, the simplicity of design creates
extra desk space below your computer to allow notepads, pens, and
USB sticks to be stored under the stand.
</p>
</div>
<div class="card flex flex__col">
<div class="card-head flex">
<h3 class="sm-heading">Bamboo Stand</h3>
<p class="blue-lead">Pledge $75 or more</p>
</div>
<p class="lead">
You get an ergonomic stand made of natural bamboo. You've helped
us launch our promotional campaign, and you’ll be added to a
special Backer member list.
</p>
<div class="card-bottom flex">
<h5>101 <sup>left</sup></h5>
<button class="btn btn-primary">Select Reward</button>
</div>
</div>
<div class="card flex flex__col">
<div class="card-head flex">
<h3 class="sm-heading">Black Edition Stand</h3>
<p class="blue-lead">Pledge $75 or more</p>
</div>
<p class="lead">
You get a Black Special Edition computer stand and a personal
thank you. You’ll be added to our Backer member list. Shipping is
included.
</p>
<div class="card-bottom flex">
<h5>64 <sup>left</sup></h5>
<button class="btn btn-primary">Select Reward</button>
</div>
</div>
<!-- -->
<div class="card card__disabled flex flex__col">
<div class="card-head flex">
<h3 class="sm-heading">Mahogany Special Edition</h3>
<p class="blue-lead">Pledge $200 or more</p>
</div>
<p class="lead">
You get two Special Edition Mahogany stands, a Backer T-Shirt, and
a personal thank you. You’ll be added to our Backer member list.
Shipping is included.
</p>
<div class="card-bottom flex">
<h5>0 <sup>left</sup></h5>
<button class="btn btn-primary">Out of stock</button>
</div>
</div>
</div>
</div>
</section>
<!-- Selection modal start -->
<!-- Back this project Want to support us in bringing Mastercraft Bamboo Monitor
Riser out in the world? Pledge with no reward Choose to support us without a
reward if you simply believe in our project. As a backer, you will be signed
up to receive product updates via email. Bamboo Stand Pledge $25 or more You
get an ergonomic stand made of natural bamboo. You've helped us launch our
promotional campaign, and you’ll be added to a special Backer member list.
101 left -->
<!-- Selected pledge start -->
<!-- Enter your pledge $25 Continue -->
<!-- Selected pledge end -->
<!--
Black Edition Stand Pledge $75 or more You get a Black Special Edition
computer stand and a personal thank you. You’ll be added to our Backer
member list. Shipping is included. 64 left -->
<!-- Selected pledge start -->
<!-- Enter your pledge $75 Continue -->
<!-- Selected pledge end -->
<!-- Mahogany Special Edition Pledge $200 or more You get two Special Edition
Mahogany stands, a Backer T-Shirt, and a personal thank you. You’ll be added -->
<!-- to our Backer member list. Shipping is included. 0 left -->
<!-- Selected pledge start -->
<!-- Enter your pledge $200 Continue -->
<!-- Selected pledge end -->
<!-- Selection modal end -->
<!-- Success modal start -->
<!--
Thanks for your support! Your pledge brings us one step closer to sharing
Mastercraft Bamboo Monitor Riser worldwide. You will get an email once our
campaign is completed. Got it! -->
<!-- Success modal end -->
<script src="./js/app.js"></script>
</body>
</html>