-
Notifications
You must be signed in to change notification settings - Fork 0
/
vision.html
241 lines (226 loc) · 14.3 KB
/
vision.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Futurize - The rising of our future</title>
<link rel="icon" type="favicon.ico" href="./assets/img/webicon.png">
<link rel="stylesheet" href="./assets/fonts/fontawesome-free-6.2.1-web/css/all.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/css/base.css">
<link rel="stylesheet" href="./assets/css/main.css">
</head>
<body>
<!-- Header -->
<div class="header fixed-top">
<nav class="navbar navbar-dark bg-dark navbar-expand-lg" style="height: var(--header-height);">
<div class="container-md">
<!-- Logo -->
<a class="navbar-brand fw-semibold fst-italic fs-3" href="./index.html">
<i class="fa-solid fa-bolt-lightning"></i>
Futurize
</a>
<!-- Nav links -->
<div class="justify-content-end d-flex position-relative">
<ul class="navbar-nav navbar__nav-links" id="navLinks">
<!-- Exit Btn -->
<i class="fa-solid fa-x navbar__xbtn" onclick="closeMenu()"></i>
<li class="nav-item navbar__nav-links-item me-2">
<a class="nav-link header__nav-link" aria-current="page" href="solutions.html">Solutions</a>
</li>
<li class="nav-item navbar__nav-links-item me-2">
<a class="nav-link header__nav-link" href="#">Vision</a>
</li>
<li class="nav-item navbar__nav-links-item me-2">
<a class="nav-link header__nav-link" href="programs.html">Programs</a>
</li>
<li class="nav-item navbar__nav-links-item me-4">
<a class="nav-link header__nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item navbar__nav-links-item navbar__nav-links-login me-4">
<a class="nav-link p-0 d-flex align-items-center" style="font-size: 1.2rem;" href="#">
<i class="fa-regular fa-user me-1" style="color: var(--nav-hover-color);"></i>
<span class="fw-light header__nav-loginbtn" style="color: var(--nav-hover-color);">Log
in</span>
</a>
</li>
</ul>
<div class="navbar__">
<button class="btn btn-outline-light header__nav-btn">Get Started</button>
<button class="navbar-toggler ms-2" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation" onclick="showMenu()">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</div>
</nav>
</div>
<!-- Content -->
<div class="content">
<!-- Intro section -->
<div class="content__intro solutions__intro" style="background-repeat:repeat;">
<div class="container-md text-center text-lg-start">
<h5 class="lh-1 text-white fw-normal slide-from-left-1 text-sm-center text-lg-start">Our Mission</h5>
<p
class="card-text vision__intro-desc text-white lh-sm mt-4 mt-lg-5 slide-from-left-2 text-sm-center text-lg-start">
I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or
double click me to
add your own content and make changes to the font. I’m a great place for you to tell a story and let
your users know a
little more about you.</p>
</div>
</div>
<!-- Services Section -->
<div class="container-lg translate-yt-50">
<!-- Our Story -->
<div class="row vision__row border border-secondary border-1 border-sm-md-0">
<div class="col-lg-5 col-12 desc__col-1 d-flex align-items-center justify-content-center sm-min-height-300" style="background-image: url(assets/img/vision__rowbg1.jpg) ;">
<h3 class="fs-2 fw-semibold text-white p-3 slide-from-bottom text-center reveal"
style="font-size:30px;">Our Story</h3>
</div>
<div class="col-lg-7 col-12 desc__col-2 h-100 border-start border-secondary border-1 border-start-sm-md-0">
<div class="desc__info text-center text-lg-start">
<p class="slide-from-left-1 text-center text-lg-start reveal" style="font-size:16px; color:#8a8a8a;">
I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit
Text” or double click me to
add your own content and make changes to the font. Feel free to drag and drop me anywhere
you like on your page. I’m a great place for you to tell a story and let your users know a
little more about you.</p>
<p class="slide-from-left-1 text-center text-lg-start reveal" style="font-size:16px; color:#8a8a8a;">
This is a great space to write a long text about your company and your services. You can use
this space to go into a
little more detail about your company. Talk about your team and what services you provide.
Tell your visitors the story
of how you came up with the idea for your business and what makes you different from your
competitors. Make your company
stand out and show your visitors who you are.</p>
</div>
</div>
</div>
<!-- Experience Leadership -->
<div class="row vision__row border border-secondary border-1 border-sm-md-0 flex-column-reverse flex-lg-row">
<div class="col-lg-7 col-12 desc__col-2 h-100 ">
<div class="desc__info text-center text-lg-start">
<p class="slide-from-left-1 text-center text-lg-start reveal" style="font-size:16px; color:#8a8a8a;">
I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit
Text” or double click me to
add your own content and make changes to the font. Feel free to drag and drop me anywhere
you like on your page. I’m a
great place for you to tell a story and let your users know a little more about you.</p>
<p class="slide-from-left-1 text-center text-lg-start reveal" style="font-size:16px; color:#8a8a8a;">
This is a great space to write a long text about your company and your services. You can use
this space to go into a
little more detail about your company. Talk about your team and what services you provide.
Tell your visitors the story
of how you came up with the idea for your business and what makes you different from your
competitors. Make your company
stand out and show your visitors who you are.</p>
</div>
</div>
<div class="col-lg-5 col-12 desc__col-1 d-flex align-items-center justify-content-center sm-min-height-300 border-start border-secondary border-1 border-start-sm-md-0" style="background-image: url(assets/img/vision__rowbg2.jpg) ;">
<h3 class="fs-2 fw-semibold text-white p-3 slide-from-bottom text-center reveal"
style="font-size:30px;">Experienced Leadership
</h3>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="container-lg trans">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 text-center text-lg-start mb-4 mb-md-0">
<div class="footer__contact-head text-white mb-3 mb-md-4">
<a href="google.com" class="fs-3 text-decoration-none text-white">
<i class="fa-solid fa-bolt-lightning"></i>
Futurize
</a>
</div>
<ul class="footer__contact-info list-unstyled text-color" style="font-size: 18px;">
<li class="mb-2">123-456-7890</li>
<li class="mb-2"><a class="text-decoration-none text-color" href="#">Info@mysite.com</a>
</li>
<li class="mb-2">500 Terry Transcord St</li>
<li>San Francisco, CA 94158</li>
</ul>
</div>
<div class="col-lg-2 col-md-6 col-sm-12 text-center text-lg-start">
<ul class="footer__navigating list-unstyled mt-2" style="font-size: 18px;">
<li class="footer__navigating-link mb-3 mb-md-4">
<a class="text-color text-decoration-none" href="solutions.html">Solutions</a>
</li>
<li class="footer__navigating-link mb-3 mb-md-4">
<a class="text-color text-decoration-none" href="#">Vision</a>
</li>
<li class="footer__navigating-link mb-3 mb-md-4">
<a class="text-color text-decoration-none" href="programs.html">Programs</a>
</li>
<li class="footer__navigating-link">
<a class="text-color text-decoration-none" href="blog.html">Blog</a>
</li>
</ul>
<button class="btn btn-danger mt-3 mb-0 px-3 py-3 intro__btn">Get Started</button>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 text-center text-lg-start mt-5 mt-lg-0 px-4 px-lg-0"
style="font-size: 18px;">
<p class="text-color mt-2">Subscribe to Our Newsletter</p>
<label for="emailform" class="form-label text-color fs-6">Email*</label>
<input type="email" id="emailform"
class="form-control bg-transparent text-color py-3 footer__input" required>
<button class="btn btn-outline-secondary header__nav-btn px-4 py-3 mt-4"
type="submit">Submit</button>
</div>
<div class="col-lg-2 col-md-12 col-sm-12 text-center text-lg-start mt-5 mt-lg-0">
<p class="text-color mt-2" style="font-size: 18px;">Follow Us On: </p>
<div class="footer__social mb-5">
<a href="#" class="footer__social-link me-1"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="#" class="footer__social-link me-1"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" class="footer__social-link me-1"><i class="fa-brands fa-twitter"></i></a>
</div>
<p class="text-color mt-5" style="font-size:14px;">@ 2035 by Futurize.com. <br> Powered and
secured
by <a class="text-secondary" href="#">JesseCN</a></p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous">
</script>
<script>
var navbarLinks = document.getElementById("navLinks");
function showMenu() {
navbarLinks.style.display = "block";
// console.log("haidu");
}
function closeMenu() {
navbarLinks.style.display = "none";
// alert("haidu");
}
// Review on Scroll
window.addEventListener('scroll', reveal);
// Every time scrolling, the funcion will be triggered
function reveal() {
// Call varibles on of the scrolling animation els
var reveals = document.querySelectorAll('.reveal');
// Call each of them
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var revealtop = reveals[i].getBoundingClientRect().top;
var revealpoint = 10; /*The less the value is, the faster it will play when scrolling down*/
// The top of the reveal lies below the (fullpageheight - revealpoint)
if (revealtop < windowHeight - revealpoint) {
reveals[i].classList.add('active');
}
else {
// In case you want to make the animation replay after scroll it again
// reveals[i].classList.remove('active');
}
}
}
</script>
</body>
</html>