Skip to content

Commit fa4ff2a

Browse files
author
Grzegorz
committed
update index.html
1 parent 3ca039c commit fa4ff2a

File tree

1 file changed

+241
-82
lines changed

1 file changed

+241
-82
lines changed

‎index.html‎

100755100644
Lines changed: 241 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,250 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6-
<meta http-equiv="x-ua-compatible" content="ie=edge" />
7-
<title>Material Design for Bootstrap</title>
8-
<!-- MDB icon -->
9-
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
10-
<!-- Font Awesome -->
11-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
12-
<!-- Google Fonts Roboto -->
13-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
14-
<!-- Bootstrap core CSS -->
15-
<link rel="stylesheet" href="css/bootstrap.min.css">
16-
<!-- Material Design Bootstrap -->
17-
<link rel="stylesheet" href="css/mdb.min.css">
18-
<!-- Your custom styles (optional) -->
19-
<link rel="stylesheet" href="css/style.css">
20-
</head>
21-
<body>
22-
<!-- Start your project here-->
23-
<div class="container">
24-
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
25-
<div class="text-center">
26-
<h2>Release surprise! </h2>
27-
<p class="h4 fw-bold">50% OFF MDB PRO</p>
28-
<div class="row justify-content-center">
29-
<div class="col-md-6">
30-
<img src="https://mdbootstrap.com/img/Marketing/campaigns/50off-SJARV.png" class="img-fluid" alt="" />
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta http-equiv="x-ua-compatible" content="ie=edge">
7+
<title>Material Design for Bootstrap</title>
8+
<!-- MDB icon -->
9+
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
10+
<!-- Font Awesome -->
11+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
12+
<!-- Google Fonts Roboto -->
13+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
14+
<!-- Bootstrap core CSS -->
15+
<link rel="stylesheet" href="css/bootstrap.min.css">
16+
<!-- Material Design Bootstrap -->
17+
<link rel="stylesheet" href="css/mdb.min.css">
18+
<!-- Your custom styles (optional) -->
19+
<link rel="stylesheet" href="css/style.css">
20+
</head>
21+
<body>
22+
<!-- Start your project here-->
23+
<!-- Container for demo purpose -->
24+
<div class="container my-5 py-5">
25+
<style>
26+
.fw-900 {
27+
font-weight: 900;
28+
}
29+
.fw-500 {
30+
font-weight: 500!important;
31+
}
32+
.fw-bold {
33+
font-weight: 700!important;
34+
}
35+
.rounded-6 {
36+
border-radius: .75rem!important;
37+
}
38+
.text-end {
39+
text-align: right!important;
40+
}
41+
.md-form.md-outline label.active {
42+
background-color: #212121 !important;
43+
}
44+
.md-form.md-outline label {
45+
color: #fff;
46+
}
47+
.md-form.md-outline input[type="text"]:focus:not([readonly]) {
48+
box-shadow: inset 0 0 0 1px #fff;
49+
border-color: #fff;
50+
}
51+
.md-form.md-outline input[type="text"]:focus:not([readonly])+label {
52+
color: #fff;
53+
}
54+
.card .bg-image img {
55+
border-top-left-radius: .25rem;
56+
border-top-right-radius: .25rem;
57+
}
58+
.text-decoration-underline {
59+
text-decoration: underline!important;
60+
}
61+
.fs-1 {
62+
font-size: calc(1.375rem + 1.5vw)!important;
63+
}
64+
.fw-normal {
65+
font-weight: 400!important;
66+
}
67+
@media (min-width: 1200px) {
68+
.text-xl-start {
69+
text-align: left!important;
70+
}
71+
.fs-1 {
72+
font-size: 2.5rem!important;
73+
}
74+
}
75+
</style>
76+
<!--Counter-->
77+
<section class="text-center">
78+
<!-- Time Counter -->
79+
<h1 class="mb-0 text-black fw-500">Black November <span class="text-danger fw-bold">Waiting List</span></h1>
80+
<hr class="my-5">
81+
<p class="text-black lead">All offers will be <span class="text-danger fw-bold">limited</span>.
82+
Don't lose your chance, be the <span class="text-danger fw-bold">first</span> to get notified.</p>
83+
</section>
84+
<!--Counter-->
85+
<!-- Section: Waiting List -->
86+
<section class="my-5">
87+
88+
<div class="bg-dark text-white text-center text-xl-start rounded-6">
89+
<div class="container px-4" style="padding-top: 5rem; padding-bottom: 5rem;">
90+
<div class="row mx-xl-1 d-flex justify-content-center justify-xl-content-start align-items-center">
91+
<div class="col-md-10 col-lg-7 col-xl-7">
92+
<h2 class="fs-1 fw-900">Join the waiting list <span class="text-danger fw-bold">NOW</span>
93+
</h2>
94+
<p class="lead fw-normal mb-4 pb-md-1 pb-xl-0 mb-xl-0">
95+
You will only receive emails related to the Black November promotions and after the promotion is over,
96+
you will be unsubscribed. We won't spam you.
97+
</p>
98+
</div>
99+
<div class="col-md-10 col-lg-7 col-xl-5">
100+
<div class="d-md-flex mb-3 mb-md-2 ms-xl-4">
101+
<div class="flex-fill me-md-1 mb-3 mb-md-0">
102+
<form action="https://app.convertkit.com/forms/2663020/subscriptions" class="seva-form formkit-form"
103+
method="post" data-sv-form="2663020" data-uid="30443eba65" data-format="inline" data-version="5"
104+
data-options="{&quot;settings&quot;:{&quot;after_subscribe&quot;:{&quot;action&quot;:&quot;message&quot;,&quot;success_message&quot;:&quot;Success! Now check your email to confirm your subscription.&quot;,&quot;redirect_url&quot;:&quot;https://mdbootstrap.com/confirm/&quot;},&quot;analytics&quot;:{&quot;google&quot;:null,&quot;facebook&quot;:null,&quot;segment&quot;:null,&quot;pinterest&quot;:null,&quot;sparkloop&quot;:null,&quot;googletagmanager&quot;:null},&quot;modal&quot;:{&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;powered_by&quot;:{&quot;show&quot;:false,&quot;url&quot;:&quot;https://convertkit.com?utm_campaign=poweredby&amp;utm_content=form&amp;utm_medium=referral&amp;utm_source=dynamic&quot;},&quot;recaptcha&quot;:{&quot;enabled&quot;:true},&quot;return_visitor&quot;:{&quot;action&quot;:&quot;show&quot;,&quot;custom_content&quot;:&quot;&quot;},&quot;slide_in&quot;:{&quot;display_in&quot;:&quot;bottom_right&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;sticky_bar&quot;:{&quot;display_in&quot;:&quot;top&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15}},&quot;version&quot;:&quot;5&quot;}">
105+
<!--Errors-->
106+
<ul class="text-danger fw-bold" data-element="errors" data-group="alert"></ul>
107+
<!--Fields-->
108+
<div data-element="fields" data-stacked="false"
109+
class="d-flex d-inline-block justify-content-center">
110+
<!--Email address-->
111+
<div class="md-form md-outline form-lg">
112+
<input type="text" id="form1" name="email_address" required="" type="email" class="form-control form-control-lg">
113+
<label for="form1">Your email address</label>
114+
</div>
115+
<!--Button-->
116+
<div>
117+
<button class="btn btn-danger" data-element="submit" style="margin-top: 1.5rem;">
118+
JOIN
119+
</button>
120+
</div>
121+
</div>
122+
</form>
123+
</div>
124+
</div>
31125
</div>
32126
</div>
33-
34-
<h5 class="mb-3">Use this coupon code before it expires and claim the reward</h5>
35-
<p class="mb-3">The coupon code will be valid until the end of the week</p>
36-
37-
<div class="mt-2">
38-
39-
<!--Coupon code-->
40-
<code class="h2 border rounded py-1 px-5 flex-item me-2">T9TTVSQB</code>
41-
<br>
42-
43-
<!--Copy to clipboard-->
44-
45-
<a id="disc-50" href="#" type="button" class="btn-lg btn-info" style="background-color: #009FE7;">COPY TO
46-
CLIPBOARD <i class="far fa-copy ml-2"></i></a>
47-
<a class="btn btn-outline-primary btn-lg mt-3" href="https://mdbootstrap.com/docs/standard/getting-started/"
48-
target="_blank" style="border-color: #009FE7; color: #009FE7;" role="button">Start MDB tutorial</a>
49-
50-
127+
</div>
128+
</div>
129+
<p class="text-muted text-center">
130+
<small>By subscribing you agree to receive Black November notifications from the data
131+
administrator StartupFlow s.c. Kijowska 7, Warsaw.
132+
<a href="https://mdbootstrap.com/general/privacy-policy/" class="text-decoration-underline text-reset">Privacy
133+
Policy</a>.
134+
</small>
135+
</p>
136+
</section>
137+
<!-- Section: Waiting List -->
138+
<!--Products-->
139+
<section class="my-5 pt-5">
140+
<p class="lead text-center">Explore products that will be discounted:</p>
141+
<!--Row-->
142+
<div class="row">
143+
<!--Standard-->
144+
<div class="col-md-3">
145+
<div class="card shadow-2-strong">
146+
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
147+
<img src="https://v1.mdbootstrap.com/wp-content/uploads/2021/10/bootstrap-standard.webp"
148+
class="img-fluid" />
149+
<a href="https://mdbootstrap.com/docs/standard/pro/" target="_blank">
150+
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
151+
</a>
152+
</div>
153+
<div class="card-body">
154+
<h5 class="card-title fw-500">MDB Standard PRO</h5>
155+
<p class="card-text">
156+
Components, templates, plugins, premium support and much more for the <strong>latest Bootstrap v5 as
157+
well as v4</strong>.
158+
</p>
159+
<div class="text-end">
160+
<a href="https://mdbootstrap.com/docs/standard/pro/" type="button"
161+
class="btn btn-sm btn-link text-muted" target="_blank">View product <i
162+
class="fas fa-external-link-alt"></i></a>
163+
</div>
164+
</div>
165+
</div>
166+
</div>
167+
<!--Angular-->
168+
<div class="col-md-3">
169+
<div class="card shadow-2-strong">
170+
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
171+
<img src="https://v1.mdbootstrap.com/wp-content/uploads/2021/10/angular.webp" class="img-fluid" />
172+
<a href="https://mdbootstrap.com/docs/b5/angular/pro/" target="_blank">
173+
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
174+
</a>
175+
</div>
176+
<div class="card-body">
177+
<h5 class="card-title fw-500">MDB Angular PRO</h5>
178+
<p class="card-text">
179+
Components, templates, plugins, premium support and much more for the <strong>latest Bootstrap v5 as
180+
well as v4</strong>.
181+
</p>
182+
<div class="text-end">
183+
<a href="https://mdbootstrap.com/docs/b5/angular/pro/" type="button" class="btn btn-sm btn-link text-muted"
184+
target="_blank">View product <i class="fas fa-external-link-alt"></i></a>
185+
</div>
186+
</div>
187+
</div>
188+
</div>
189+
<!--React-->
190+
<div class="col-md-3">
191+
<div class="card shadow-2-strong">
192+
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
193+
<img src="https://v1.mdbootstrap.com/wp-content/uploads/2021/10/react.webp" class="img-fluid" />
194+
<a href="https://mdbootstrap.com/docs/b5/react/pro/" target="_blank">
195+
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
196+
</a>
197+
</div>
198+
<div class="card-body">
199+
<h5 class="card-title fw-500">MDB React PRO</h5>
200+
<p class="card-text">
201+
Components, templates, plugins, premium support and much more for the <strong>latest Bootstrap v5 as
202+
well as v4</strong>.
203+
</p>
204+
<div class="text-end">
205+
<a href="https://mdbootstrap.com/docs/b5/react/pro/" type="button" class="btn btn-sm btn-link text-muted"
206+
target="_blank">View product <i class="fas fa-external-link-alt"></i></a>
207+
</div>
208+
</div>
51209
</div>
52-
<p>See <a href="https://mdbootstrap.com/pro/">prices</a></p>
53-
<div class=" my-2 alert alert-success" id="code-success" style="display: none;">
54-
Copied
210+
</div>
211+
<!--Vue-->
212+
<div class="col-md-3">
213+
<div class="card shadow-2-strong">
214+
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
215+
<img src="https://v1.mdbootstrap.com/wp-content/uploads/2021/10/vue.webp" class="img-fluid" />
216+
<a href="https://mdbootstrap.com/docs/b5/vue/pro/" target="_blank">
217+
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
218+
</a>
219+
</div>
220+
<div class="card-body">
221+
<h5 class="card-title fw-500">MDB Vue PRO</h5>
222+
<p class="card-text">
223+
Components, templates, plugins, premium support and much more for the <strong>latest Bootstrap v5 as
224+
well as v4</strong>.
225+
</p>
226+
<div class="text-end">
227+
<a href="https://mdbootstrap.com/docs/b5/vue/pro/" type="button" class="btn btn-sm btn-link text-muted"
228+
target="_blank">View product <i class="fas fa-external-link-alt"></i></a>
229+
</div>
230+
</div>
55231
</div>
56-
57232
</div>
58233
</div>
59-
</div>
60-
<!-- End your project here-->
61-
<!-- jQuery -->
62-
<script type="text/javascript" src="js/jquery.min.js"></script>
63-
<!-- Bootstrap tooltips -->
64-
<script type="text/javascript" src="js/popper.min.js"></script>
65-
<!-- Bootstrap core JavaScript -->
66-
<script type="text/javascript" src="js/bootstrap.min.js"></script>
67-
<!-- MDB core JavaScript -->
68-
<script type="text/javascript" src="js/mdb.min.js"></script>
69-
<!-- Your custom scripts (optional) -->
70-
<script type="text/javascript">
71-
var a = document.getElementById('disc-50');
72-
a.onclick = function () {
73-
Clipboard_CopyTo("T9TTVSQB");
74-
var div = document.getElementById('code-success');
75-
div.style.display = 'block';
76-
setTimeout(function () {
77-
document.getElementById('code-success').style.display = 'none';
78-
}, 900);
79-
};
80-
81-
function Clipboard_CopyTo(value) {
82-
var tempInput = document.createElement("input");
83-
tempInput.value = value;
84-
document.body.appendChild(tempInput);
85-
tempInput.select();
86-
document.execCommand("copy");
87-
document.body.removeChild(tempInput);
88-
}
89-
</script>
90-
</body>
234+
</section>
235+
<!--Products-->
236+
</div>
237+
<!-- Container for demo purpose -->
238+
<!-- End your project here-->
239+
<!-- jQuery -->
240+
<script type="text/javascript" src="js/jquery.min.js"></script>
241+
<!-- Bootstrap tooltips -->
242+
<script type="text/javascript" src="js/popper.min.js"></script>
243+
<!-- Bootstrap core JavaScript -->
244+
<script type="text/javascript" src="js/bootstrap.min.js"></script>
245+
<!-- MDB core JavaScript -->
246+
<script type="text/javascript" src="js/mdb.min.js"></script>
247+
<!-- Your custom scripts (optional) -->
248+
<script type="text/javascript"></script>
249+
</body>
91250
</html>

0 commit comments

Comments
 (0)