-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo-landing.html
159 lines (146 loc) · 5.72 KB
/
demo-landing.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
<html>
<head>
<!-- Page Info -->
<title>Mable - a Multipourpouse HTML Template</title>
<meta name="description" content="This is where you put a little bit of information about your company">
<meta name="keywords" content="Put, some, keywords, here">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS Sheets -->
<link type="text/css" rel="stylesheet" href="css/style.css">
<!-- Themes -->
<link type="text/css" rel="stylesheet" href="themes/sample-theme" id="custom-theme-sheet">
</head>
<body>
<!-- Header -->
<header class="section-dark fixed section-transparent-top">
<div class="container-large">
<ul>
<li><a href="index.html">Go Home</a></li>
<li>|</li>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a class="button pill">Start Free Trial <i class="fa-solid fa-arrow-right"></i></a></li>
<li><input type="text" placeholder="Try Another Theme" onkeypress="checkHeaderTheme(event)" id="header-theme-field"></li>
</ul>
</div>
</header>
<!-- Title Section -->
<section class="section-dark section-large large" id="title-section" style="background:linear-gradient( rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65) ),url('images/demos/landing/office.jpg');background-size:cover;background-position:center;">
<div class="container">
<div class="row">
<h1>Something to grab attention</h1>
<h2 class="tagline">You should describe what you do here in a short and sweet way.</h2>
<p><a href="#" class="button">Learn More <i class="fa fa-arrow-right"></i></a> <a href="#" class="button hollow">Buy Now <i class="fas fa-shopping-cart"></i></a></p>
</div>
</div>
<div class="bottom">
<div class="container text-center">
<div class="row">
<a href="#features"><i class="fas fa-arrow-down"></i></a>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="section-large section-light dark-enabled" id="features">
<div class="container text-center">
<div class="row">
<h1>Put Some Big Feature Here</h1>
<p>It's always best to put enticing features towards the top of the webpage. A few sentences about what your product does and how it is different from competing ones should suffice. Make sure to not annoy a possible customer with lots of text.</p>
<a href="#" class="button">Start Free Trial <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</section>
<!-- Pricing Section -->
<section class="section-dark" id="pricing">
<div class="container-large">
<div class="row text-center">
<h1>Pricing</h1>
</div>
<div class="row grid">
<div class="col-4 section-light dark-enabled text-center" style="padding:20px">
<h6>Basic</h6>
<h2 class="tagline">5 shares per month</h2>
<h1 style="margin:20px 0">$9/mo</h1>
<ul>
<li>30 Day Refunds</li>
<li>Basic Support</li>
<li>Full attack protection</li>
</ul>
<a class="button">Start Free Trial <i class="fa-solid fa-arrow-right"></i></a>
</div>
<div class="col-4 section-theme text-center" style="padding:20px">
<h6>Standard</h6>
<h2 class="tagline">10 shares per month</h2>
<h1 style="margin:20px 0">$15/mo</h1>
<ul>
<li>30 Day Refunds</li>
<li>Advanced Support</li>
<li>Full attack protection</li>
<li>90 day backup</li>
</ul>
<a class="button">Start Free Trial <i class="fa-solid fa-arrow-right"></i></a>
</div>
<div class="col-4 section-theme-inverted text-center" style="padding:20px">
<h6>Premeir</h6>
<h2 class="tagline">25 shares per month</h2>
<h1 style="margin:20px 0">$25/mo</h1>
<ul>
<li>30 Day Refunds</li>
<li>Advanced Support</li>
<li>Full attack protection</li>
<li>180 day backup</li>
</ul>
<a class="button">Start Free Trial <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
</div>
</section>
<!-- Call To Action Section -->
<section class="section-thin section-light dark-enabled text-center" id="call-to-action">
<div class="container-large">
<div class="row">
<h1>Get the best</h1>
<a class="button">Start Free Trial <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="section-theme">
<div class="container-large">
<div class="row">
<h1>Mable HTML Template</h1>
<input type="text" placeholder="Try Another Theme" onkeypress="checkFooterTheme(event)" id="footer-theme-field">
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="js/top.js"></script>
<script>
var customTheme = document.getElementById("custom-theme-sheet");
function checkHeaderTheme(e){
let customThemeInputHeader = document.getElementById("header-theme-field").value;
if(e.keyCode == 13){
if (customThemeInputHeader.substr(0,5) == 'http:' || customThemeInputHeader.substr(0,6) == 'https:' || customThemeInputHeader.substr(0,6) == 'local:') {
customTheme.href = customThemeInputHeader;
}
else {
customTheme.href = "https://cdn.mablesite.com/themes/" + customThemeInputHeader + ".css";
}
}
}
function checkFooterTheme(e){
let customThemeInputFooter = document.getElementById("footer-theme-field").value;
if(e.keyCode == 13){
if (customThemeInputFooter.substr(0,5) == 'http:' || customThemeInputFooter.substr(0,6) == 'https:' || customThemeInputFooter.substr(0,6) == 'local:') {
customTheme.href = customThemeInputFooter;
}
else {
customTheme.href = "https://cdn.mablesite.com/themes/" + customThemeInputFooter + ".css";
}
}
}
</script>
</body>
</html>