forked from raaghavendrahm/HTML-and-CSS-Projects
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
349 lines (308 loc) · 15.8 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
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
<!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">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> <!-- link for the favicon. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/lightbox.min.css">
<link rel="stylesheet" href="css/main.css">
<title>Welcome To EdgeLedger</title>
</head>
<body id="home">
<!-- Navbar -->
<header class="hero">
<div id="navbar" class="navbar top">
<h1 class="logo">
<span class="text-primary"><i class="fas fa-book-open"></i>Edge</span>Ledger
</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#cases">Cases</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="content">
<h1>The sky is the limit</h1>
<p>We provide world class financial assistance</p>
<a href="#about" class="btn-primary"><i class="fas fa-chevron-right"></i> Read More</a>
</div>
</header>
<main> <!-- Everything except the footer will be inside main tag -->
<!-- About: Icons -->
<section id="about" class="icons bg-light">
<div class="flex-container">
<div>
<i class="fas fa-university fa-2x"></i>
<div>
<h3>Investment Banking</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam, illum.</p>
</div>
</div>
<div>
<i class="fas fa-book-reader fa-2x"></i>
<div>
<h3>Portfolio Manager</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam, illum.</p>
</div>
</div>
<div>
<i class="fas fa-pencil-alt fa-2x"></i>
<div>
<h3>Tax & Custodial</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam, illum.</p>
</div>
</div>
</div>
</section>
<!-- About: Solutions -->
<section class="solutions">
<div class="column">
<div class="column-1">
<img src="img/home/people.jpg" alt="">
</div>
</div>
<div class="column">
<div class="column-2 bg-primary">
<h4>What are you looking for</h4>
<h2>We provide bespoke solutions</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, nulla! Nihil necessitatibus asperiores corrupti enim dolorum, cum unde saepe voluptates voluptatibus quisquam mollitia natus ut quas dolor nam! Eveniet, corporis!</p>
<a href="#" class="btn-outline">
<i class="fas fa-chevron-right"></i> Read More
</a>
</div>
</div>
</section>
<!-- Cases -->
<section id="cases" class="cases">
<div class="section-header">
<h4>This is what we do</h4>
<h2>Business Cases</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, provident?</p>
</div>
<div class="row-1">
<a href="img/cases/cases1.jpg" data-lightbox = "cases"
data-title = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, provident?" class="img">
<img src="img/cases/cases1.jpg" alt="">
</a>
<a href="img/cases/cases2.jpg" data-lightbox = "cases"
data-title = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, provident?" class="img">
<img src="img/cases/cases2.jpg" alt="">
</a>
<a href="img/cases/cases3.jpg" data-lightbox = "cases"
data-title = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, provident?" class="img">
<img src="img/cases/cases3.jpg" alt="">
</a>
<a href="img/cases/cases4.jpg" data-lightbox = "cases"
data-title = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, provident?" class="img">
<img src="img/cases/cases4.jpg" alt="">
</a>
<!-- Below is enough if lightroom is not needed -->
<!--
<img src="img/cases/cases1.jpg" alt="" class="img">
<img src="img/cases/cases2.jpg" alt="" class="img">
<img src="img/cases/cases3.jpg" alt="" class="img">
<img src="img/cases/cases4.jpg" alt="" class="img">
-->
</div>
<div class="row-2">
<a href="img/cases/cases5.jpg" data-lightbox = "cases"
data-title = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, provident?" class="img">
<img src="img/cases/cases5.jpg" alt="">
</a>
<a href="img/cases/cases6.jpg" data-lightbox = "cases"
data-title = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, provident?" class="img">
<img src="img/cases/cases6.jpg" alt="">
</a>
<a href="img/cases/cases7.jpg" data-lightbox = "cases"
data-title = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, provident?" class="img">
<img src="img/cases/cases7.jpg" alt="">
</a>
<a href="img/cases/cases8.jpg" data-lightbox = "cases"
data-title = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, provident?" class="img">
<img src="img/cases/cases8.jpg" alt="" class="last-img">
</a>
<!-- Below is enough if lightroom is not needed -->
<!--
<img src="img/cases/cases5.jpg" alt="" class="img">
<img src="img/cases/cases6.jpg" alt="" class="img">
<img src="img/cases/cases7.jpg" alt="" class="img">
<img src="img/cases/cases8.jpg" alt="" class="img">
-->
</div>
</section>
<!-- Blog -->
<section id="blog" class="blog">
<div class="column">
<div class="column-1">
<img src="img/home/blog.jpg" alt="">
</div>
</div>
<div class="column">
<div class="column-2 bg-secondary">
<h4>June 03, 2021</h4>
<h2>Latest Blog Post</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, nulla! Nihil necessitatibus asperiores corrupti enim dolorum, cum unde saepe voluptates voluptatibus quisquam mollitia natus ut quas dolor nam! Eveniet, corporis!</p>
<a href="blog.html" class="btn-outline">
<i class="fas fa-chevron-right"></i> Read Our Blog
</a>
</div>
</div>
</section>
<!-- Team -->
<section id="team" class="team">
<div class="section-header">
<h4>Who we are</h4>
<h2>Our Professional Team</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, provident?</p>
</div>
<div class="row-1">
<div class="item">
<img src="img/team/person1.jpg" alt="" class="img">
<p class="bold">John Doe</p>
<p>President</p>
</div>
<div class="item">
<img src="img/team/person2.jpg" alt="" class="img">
<p class="bold">Jane Doe</p>
<p>Vice President</p>
</div>
<div class="item">
<img src="img/team/person3.jpg" alt="" class="img">
<p class="bold">Steve Smith</p>
<p>Marketing Head</p>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="contact">
<div class="column">
<div class="column-1">
<img src="img/home/contact.jpg" alt="">
</div>
</div>
<div class="column">
<div class="column-2 bg-light">
<h2>Request Callback</h2>
<form class="callback-form" name="contact" method="POST" data-netlify="true" data-netlify-recaptcha = "true">
<!-- Except 'class' all the attributes are for netlify -->
<div class="form-control">
<label for="name"></label>
<input type="text" name="name" id="name" placeholder="Enter Name" required>
</div>
<div class="form-control">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter Email" required>
</div>
<div class="form-control">
<label for="phone"></label>
<input type="number" name="phone" id="phone" placeholder="Enter Phone Number" required> <!-- Input type is made 'number' so that it takes only number value -->
</div>
<div data-netlify-recaptcha="true"></div>
<input type="submit" value="Send" id="submit" class="btn-primary">
</form>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer bg-dark">
<div class="social">
<a href="#"><i class="fab fa-facebook fa-2x"></i></a>
<a href="#"><i class="fab fa-twitter fa-2x"></i></a>
<a href="#"><i class="fab fa-youtube fa-2x"></i></a>
<a href="#"><i class="fab fa-linkedin fa-2x"></i></a>
</div>
<p>Copyright © 2021 - EdgeLedger</p>
</footer>
<!-- JQuery cdn for smooth scrolling -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- JS link for the lightbox -->
<script src="js/lightbox.min.js"></script>
<!-- Our Custom Code -->
<!-- BACKGROUND CHANGE AND TRANSITION OF NAVBAR -->
<script>
const navbar = document.querySelector('.navbar'); // selects the navbar
let scrolled = false; // for bounce effect
window.onscroll = function() {
if(window.pageYOffset > 100) {
navbar.classList.remove('top');
// for bounce effect start
if(!scrolled) {
navbar.style.transform = 'translateY(-70px)'; // note that 'transition' property is added to .navbar in 'main.scss' for smooth transition.
}
setTimeout(function(){
navbar.style.transform = 'translateY(0)';
scrolled = true;
}, 200);
// for bounce effect end
} else {
navbar.classList.add('top');
// for bounce effect
scrolled = false;
}
}
// BACKGROUND CHANGE:
// In the above code, when the "onscroll" event is fired, the function will be executed. The function removes the 'top' class name from the navbar, which results in getting the dark color background from transparent. This happens when we scroll pass 100px. When we are in the region less than 100px from the top of the window, it will add 'top' classname to the navbar which changes the background from dark color to transparent. So, when we are in the region from top (zero) to 100px, the background of the navbar will be transparent. When it crosses 100px, the backgroud will be dark color.
// BOUNCING EFFECT:
// Note that, the code inside 'bounce effect start and ends', comment next to the line as 'bounce effect' are the once which are giving it. In addition, 'transition' property added in the 'main.scss' under '.navbar'. Others are related to the first part, which is changing the background of navbar from dark color to transparent and vice-versa.
// Let's understand the code for bouncing effect of the navbar:
/*
- First, a variable "scrolled" is initialized with the value 'false'.
- When we cross 100px with change in background from transparent to dark color, a condition for "not scrolled" (!scrolled) for 'true' is checked.
- As the "scrolled" is set to 'false', the condition of 'not scrolled' is 'true'. So, the navbar is translated to 70px upwards (-70px). So, the navbar disappears as its height is 70px and it is pulled up.
- This process will be instant. So to make it smooth, 'transition' property is added for '.navbar' in 'main.scss'. So, the upper movement will be smooth.
- Now, we want to pull it back to its original position of 0px. This is done using translateY value of 0px. But, we want this to happen in certain time. This is achieved by using 'setTimeout' and it takes the parameter of time and we have set it to 200ms.
- So, once the navbar is pulled out after 100px of scroll smoothly, it will be pulled back to its original position of 200 ms.
- Immedietly, the value of 'scrolled' is set to 'true' to avoid the repetition of the process (Bcz, the above translation happens when the value of scrolled is 'false').
- Finally, in the 'else' statement, which represents the position of the navbar within 100px from the top, the value of "scrolled" is set to 'false' as we need the bounce effect there.
- This is the algorithm of bounce effect.
*/
// SMOOTH SCROLLING:
// When we click on the elements of our navbar like "about", "cases" etc, they land on that specific section dranstically. To make this a smooth scrolling, we use a ready-made JQuery solution.
// So, the JQuery cdn is pasted above our custom JS code.
// The custom code for smooth scrolling is below:
// Smooth Scrolling
$('#navbar a, .btn').on('click', function (e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body').animate(
{
scrollTop: $(hash).offset().top - 100,
},
800
);
}
});
// Need to understand the above code once we understand JS properly.
// Note that above is the simple solution. There are other solutions without using JQuery as well.
// The smooth scrolling effect is not needed for "Blog" page and "post-1, 2, and 3" pages. But, we need the background change and bouncing effect. So, we must paste those codes on those html pages as well. Don't forget to add "top" class in addition to "navbar" in all the pages.
// LIGHTBOX 2:
// One last thing is to add "lighbox2" library to maximize the image on clicking (for cases).
// To do that, first the lightbox2 is downloaded from the github.
// 'lightbox.min.css' file inside 'dist' --> 'css' is copied to our 'css' folder.
// A new folder 'js' is created and the 'lightbox.min.js' file from 'dist' --> 'js' is copied to our 'js' folder.
// Images from 'images' folder are copied to our 'img' folder.
// Link to the lightbox css must be linked in the index.html above our main.css. Note that this is only required for the index page, not used on any other pages.
// Then, the JS is linked after the JQuery reference.
// This won't get us the effect on click. To get it done, the images shall be wrapped around a link tag (<a>) with specific attributes related to the light box. This can be seen in the "cases" section.
// Every image is wrapped in a link and its "href" value will be the "src" of the image itself. A couple of attributes like "data-lightbox" with the value of 'cases' (it could be anything, but must be same for all the images) and "data-title" with any text description to the image as its value are added as shown below:
/*
<a href="img/cases/cases1.jpg" data-lightbox = "cases"
data-title = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, provident?">
<img src="img/cases/cases1.jpg" alt="" class="img">
</a>
*/
// One last thing is to add a "favicon". This is the image that appears in the tab next to the page 'title' in the browser. The png file is converted to an 'ico' file with a ico generator like 'dynamic drive'.
// Then the ico file is pasted in the root folder (not inside img folder).
// Then the link for that (got in the dynamic drive) is pasted above the link for style sheet (above font-awesome).
// Then to reload the cache, 'shift + f5' is pressed to get it! (But, my favicon was visible before doing this!)
</script>
</body>
</html>