-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
296 lines (296 loc) · 19.6 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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<title>Document</title>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="node_modules/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<header class="hero d-flex justify-content-center align-items-center flex-column position-static">
<nav class="navbar bg-transparent navbar-white fix container-fluid align-baseline justify-content-between navbar-expand-lg z-1" id="main-nav">
<a class="navbar-brand text-danger fs-1 fw-bold bg-transparent" href="#">Simple Site</a>
<div class="collapse navbar-collapse bg-transparent" id="nav">
<ul class="navbar-nav bg-transparent">
<li class="nav-item bg-transparent"><a class="nav-link" href="#">Make free website or blog</a></li>
<li class="nav-item bg-transparent"><a class="nav-link" href="#">Customer Service</a></li>
<li class="nav-item bg-transparent"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item bg-transparent"><a class="nav-link" href="#">Themes</a></li>
</ul>
</div>
<div class="d-flex bg-transparent w-110 justify-content-around">
<button class="navbar-toggler bg-transparent" data-bs-target="#nav" data-bs-toggle="collapse">
<i class="bi bi-arrows-expand fs-3 mx-2 bg-transparent"></i>
</button>
<a class="d-flex nav-link" href="#"><i class="bi bi-globe fs-3 text-dark bg-transparent"></i><span class="d-none d-lg-inline-block align-self-lg-end text-white">English</span></a>
</div>
</nav>
<div class=" d-flex flex-column justify-content-sm-between align-items-center"><h1
class="slogan text-light text-center fw-lighter mb-1">Create your website in <strong>three simple
steps</strong></h1>
<p class="text-light fs-2 fst-italic my-4">- It's free! -</p>
<button class="btn btn-danger rounded-pill btn-lg btn-long border border-light mt-1">START HERE</button>
</div>
</header>
<div class="d-flex pt-3 w-100 h-400 flex-column align-items-center justify-content-evenly mb-2 mb-lg-5">
<h2 class="position-relative fs-2 fw-bold text-center text-dark">THEMES <span class="bar d-inline-block"></span>
</h2>
<p class="text-center text-dark w-75 text-muted">Pick a theme that fits the kind of website YOU want to make. We’ve
made sure
there
are plenty of beautiful templates to choose from. Really, there’s something for everyone! Each template can be
completely customized, so let your imagination run free. </p>
</div>
<div class="carousel carousel-fade carousel-dark slide m-auto w-75 mb-80 mb-lg-140" data-bs-ride="carousel" id="slider">
<div class="carousel-indicators">
<button class="active" data-bs-slide-to="0" data-bs-target="#slider"></button>
<button data-bs-slide-to="1" data-bs-target="#slider"></button>
<button data-bs-slide-to="2" data-bs-target="#slider"></button>
<button data-bs-slide-to="3" data-bs-target="#slider"></button>
<button data-bs-slide-to="4" data-bs-target="#slider"></button>
<button data-bs-slide-to="5" data-bs-target="#slider"></button>
<button data-bs-slide-to="6" data-bs-target="#slider"></button>
<button data-bs-slide-to="7" data-bs-target="#slider"></button>
<button data-bs-slide-to="8" data-bs-target="#slider"></button>
<button data-bs-slide-to="9" data-bs-target="#slider"></button>
<button data-bs-slide-to="10" data-bs-target="#slider"></button>
</div>
<ol class="carousel-inner">
<li class="carousel-item active"><img alt="" class="d-block w-100" src="img/1.png"></li>
<li class="carousel-item"><img alt="" class="d-block w-100" src="img/2.png"></li>
<li class="carousel-item"><img alt="" class="d-block w-100" src="img/3.png"></li>
<li class="carousel-item"><img alt="" class="d-block w-100" src="img/4.png"></li>
<li class="carousel-item"><img alt="" class="d-block w-100" src="img/5.png"></li>
<li class="carousel-item"><img alt="" class="d-block w-100" src="img/6.png"></li>
<li class="carousel-item"><img alt="" class="d-block w-100" src="img/7.png"></li>
<li class="carousel-item"><img alt="" class="d-block w-100" src="img/8.png"></li>
<li class="carousel-item"><img alt="" class="d-block w-100" src="img/9.png"></li>
<li class="carousel-item"><img alt="" class="d-block w-100" src="img/10.png"></li>
<li class="carousel-item"><img alt="" class="d-block w-100" src="img/11.png"></li>
</ol>
<button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#slider"><span
class="carousel-control-prev-icon"></span></button>
<button class="carousel-control-next" data-bs-slide="next" data-bs-target="#slider"><span
class="carousel-control-next-icon"></span></button>
</div>
<div class="d-flex flex-column justify-content-center align-items-center mb-80 mb-lg-140">
<h2 class="position-relative fs-2 fw-bold text-center text-dark text-uppercase mb-5 text-dark"> Why SimpleSite<span
class="d-inline-block bar"></span></h2>
<div class="d-flex flex-column flex-lg-row align-items-center">
<div class="d-flex flex-column align-items-center align-items-lg-start justify-content-center order-lg-2 col-8 col-lg-4 offset-lg-1 mb-5">
<p class="text-dark text-muted text-lg-start text-center">At SimpleSite we believe it's important to offer
people of all
technological levels the ability to tap into the web's endless potential. Our solution isn't made
for professional web developers; it’s made for anybody with a desire to have their own little corner
of the internet. No designers, developers, or webmasters necessary.</p>
<p class="text-dark text-muted text-lg-start text-center">Best of all, you can have your own website online
within minutes!</p>
<p class="text-dark text-muted text-lg-start text-center">Simply choose the type of website you'd like to
have, customize its look
with our guided design wizard, then fill in the information needed to make it yours. Make your own
website today!</p>
<button class="btn btn-danger btn-long rounded-pill text-uppercase mt-5 mt-lg-3">start here</button>
</div>
<div class="d-flex order-lg-1 col-lg-5 offset-1"><img alt="" class="img h-100 w-100"
src="img/image%20section%202.png"></div>
</div>
</div>
<div class="d-flex flex-column justify-content-center align-items-center mb-80 mb-lg-140">
<h2 class="position-relative fs-2 fw-bold text-center text-dark text-uppercase mb-5 text-dark d-lg-none"><span
class="d-block">Mobile ready </span><span class="d-block fw-light text-muted">Edit on-the-go</span><span
class="d-inline-block bar"></span></h2>
<div class="d-flex flex-column flex-lg-row align-items-center">
<div class="d-flex flex-column align-items-center align-items-lg-end justify-content-center col-8 col-lg-4 offset-lg-1 mb-5">
<h2 class="d-none d-lg-block position-relative fs-2 fw-bold text-dark text-uppercase mb-5 text-dark text-end"><span
class="d-block">Mobile ready </span><span
class="d-block fw-light text-muted">Edit on-the-go</span><span
class="d-inline-block bar left-lg-100"></span></h2>
<p class="text-dark text-muted text-lg-end text-center">What makes SimpleSite stand out is that we are the
only website builder that fully supports<strong> mobile-friendly editing</strong> in a mobile browser -
no special app needed! This means you can view and edit your website on your smartphone.</p>
<p class="text-dark text-muted text-lg-end text-center">SimpleSite automatically gives you a website that
looks stunning on both desktop and mobile. On top of that we also have a full mobile-optimized interface
that gives you the freedom to access and edit everything on mobile devices. Edit the design and content
of your website from the comfort of your couch or on the go - it’s all possible with SimpleSite’s mobile
website editor.</p>
<button class="btn btn-danger btn-long rounded-pill text-uppercase mt-5 mt-lg-3">start here</button>
</div>
<div class="d-flex col-lg-5 offset-1"><img alt="" class="img h-100 w-100" src="img/mockups%20mobile.png">
</div>
</div>
</div>
<div class="d-flex flex-column justify-content-center align-items-center mb-80 mb-lg-140">
<div class="col-10 d-flex flex-column align-items-center">
<h2 class="position-relative fw-bold fs-2 text-uppercase text-dark text-center mb-5">features<span
class="bar d-inline-block"></span></h2>
<p class="text-center text-dark text-muted">Check out all the great features that are included on your website.
SimpleSite provides everything you need to create a beautiful and professional website.</p>
</div>
<div class="d-flex flex-column flex-lg-row col-lg-10 align-items-lg-baseline align-items-center justify-content-lg-between mb-2">
<div class="col-10 col-lg-2 d-flex flex-column align-items-center ">
<div class="d-flex zoom"><img alt="" class="img" src="img/all%20devices.png"></div>
<h3 class="fs-5 fw-bold text-dark text-center">Mobile-optimized</h3>
<p class="text-center text-dark text-muted">All SimpleSite websites are 100% mobile-friendly, ensuring your
website visitors have a great mobile experience when they visit your website.</p>
</div>
<div class="col-10 col-lg-2 d-flex flex-column align-items-center ">
<div class="d-flex zoom"><img alt="" class="img" src="img/design.png"></div>
<h3 class="fs-5 fw-bold text-dark text-center">Stunning themes</h3>
<p class="text-center text-dark text-muted">A SimpleSite website lets you choose between hundreds of unique
designs. Choose between our themes or go with a ready-made design.</p>
</div>
<div class="col-10 col-lg-2 d-flex flex-column align-items-center mt-5 mt-lg-0">
<div class="d-flex position-relative move-up"><img alt="" class="img" src="img/guided.png"></div>
<h3 class="fs-5 fw-bold text-dark text-center">Guided Step by Step </h3>
<p class="text-center text-dark text-muted">We will guide you every step of the way, empowering you to grow
your business online. Whether you want to open a restaurant, or start a daycare, we have the resources
for you!</p>
</div>
<div class="col-10 col-lg-2 d-flex flex-column align-items-center ">
<div class="d-flex zoom"><img alt="" class="img" src="img/customer%20service.png"></div>
<h3 class="fs-5 fw-bold text-dark text-center">Customer support </h3>
<p class="text-center text-dark text-muted">Our customer service is ready to help you when you have
questions. You can also check out our frequently asked questions in our customer service section.</p>
</div>
</div>
<button class="btn btn-danger btn-long rounded-pill text-uppercase mt-5 mt-lg-3">start here</button>
</div>
<footer class="container-fluid px-5 align-items-baseline bg-dark bg-footer py-5">
<div class="d-md-flex align-items-lg-baseline justify-content-lg-between justify-content-md-start">
<div class="accordion accordion-flush accordion mb-4 order-md-2 d-lg-none offset-md-2" id="acc">
<div class="accordion-item bg-transparent">
<h3 class="accordion-header bg-transparent" id="acc-header-1">
<button class="collapsed accordion-button text-uppercase text-light fs-4 bg-transparent px-0"
data-bs-target="#acc-1" data-bs-toggle="collapse">product
</button>
</h3>
<div class="collapse accordion-collapse" data-bs-parent="#acc" id="acc-1">
<div class="accordion-body">
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">Feature</a></h4>
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">Themes</a></h4>
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">Gift
Certificate</a></h4>
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">Pricing</a></h4>
</div>
</div>
</div>
<div class="accordion-item bg-transparent">
<h3 class="accordion-header bg-transparent" id="acc-header-2">
<button class="collapsed accordion-button text-uppercase text-light fs-4 bg-transparent px-0"
data-bs-target="#acc-2" data-bs-toggle="collapse">company
</button>
</h3>
<div class="collapse accordion-collapse" data-bs-parent="#acc" id="acc-2">
<div class="accordion-body">
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">Term of use</a>
</h4>
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">Privacy
Policy</a></h4>
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">Cookie
Policy</a></h4>
</div>
</div>
</div>
<div class="accordion-item bg-transparent">
<h3 class="accordion-header bg-transparent" id="acc-header-3">
<button class="collapsed accordion-button text-uppercase text-light fs-4 bg-transparent px-0"
data-bs-target="#acc-3" data-bs-toggle="collapse">community
</button>
</h3>
<div class="collapse accordion-collapse" data-bs-parent="#acc" id="acc-3">
<div class="accordion-body">
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">Customers
Service</a></h4>
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">QAF</a></h4>
</div>
</div>
</div>
</div>
<div class="d-lg-flex w-100 justify-content-between">
<div class="d-flex flex-column align-items-start order-md-1 max-w">
<h3 class="fs-3 text-start text-light text-uppercase position-relative">SimpleSite<span
class="bar d-inline-block l-0"></span>
</h3>
<p class="text-start text-light my-5">
Our user experience ideals run through every vein of our company. Our ideals are not to attain
perfection, but rather to attain pleasure. Using our product should feel enjoyable - like playing a
game
- it should be easy, exciting and uplifting. Something to try and subsequently to learn from. This
is
the same experience our employees have working for us.
</p>
</div>
<div class="d-lg-flex flex-column align-items-start order-md-1 max-w-md d-none max-w-md">
<h3 class="fs-3 text-start text-light text-uppercase position-relative">product<span
class="bar d-inline-block l-0"></span>
</h3>
<div class="d-flex flex-column align-items-start my-5">
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">Feature</a>
</h4>
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">Themes</a></h4>
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">Gift Certificate</a>
</h4>
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">Pricing</a></h4>
</div>
</div>
<div class="d-lg-flex flex-column align-items-start order-md-1 max-w-md d-none max-w-md">
<h3 class="fs-3 text-start text-light text-uppercase position-relative">Company<span
class="bar d-inline-block l-0"></span>
</h3>
<div class="d-flex flex-column align-items-start my-5">
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">
Terms of use </a>
</h4>
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">Privacy Policy</a>
</h4>
</div>
</div>
<div class="d-lg-flex flex-column align-items-start order-md-1 max-w-md d-none max-w-md">
<h3 class="fs-3 text-start text-light text-uppercase position-relative">Community<span
class="bar d-inline-block l-0"></span>
</h3>
<div class="d-flex flex-column align-items-start my-5">
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">Customer service</a>
</h4>
<h4 class="text-light fs-6"><a class="text-decoration-none text-light" href="#">FAQ</a></h4>
</div>
</div>
</div>
</div>
<div class="d-flex w-200 justify-content-between align-items-start">
<a class="text-light" href="#"><i class="fs-2 bi bi-facebook"></i></a>
<a class="text-light" href="#"><i class="fs-2 bi bi-youtube"></i></a>
<a class="text-light" href="#"><i class="fs-2 bi bi-twitter"></i></a>
<a class="text-light" href="#"><i class="fs-2 bi bi-linkedin"></i></a>
</div>
</footer>
</body>
</html>
<script>
let navBar = document.getElementById("main-nav");
window.addEventListener("scroll", () => {
if (window.scrollY === 0){
navBar.classList.add("bg-transparent")
navBar.classList.add("navbar-white")
navBar.classList.remove("navbar-light")
navBar.classList.remove("bg-light")
navBar.classList.remove("border-bottom")
navBar.classList.remove("border-danger")
}else{
navBar.classList.remove("bg-transparent")
navBar.classList.remove("navbar-white")
navBar.classList.add("navbar-light")
navBar.classList.add("bg-light")
navBar.classList.add("border-bottom")
navBar.classList.add("border-danger")
}
})
</script>