Skip to content

Commit 6ea28fb

Browse files
abhishekrathoreabhishekrathore
committed
animate.css first update
0 parents  commit 6ea28fb

12 files changed

+981
-0
lines changed

‎images/customer-logo-1.png

2.66 KB
Loading

‎images/customer-logo-2.png

2.75 KB
Loading

‎images/customer-logo-3.png

2.72 KB
Loading

‎images/customer-logo-4.png

2.68 KB
Loading

‎images/customer-logo-5.png

2.75 KB
Loading

‎images/customer-logo-6.png

2.52 KB
Loading

‎images/description-1.png

18.5 KB
Loading

‎images/header-software-app.png

17.3 KB
Loading

‎images/testimonial-3.jpg

8.59 KB
Loading

‎index.html

Lines changed: 295 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="style.css" />
4+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
5+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
6+
</head>
7+
<body>
8+
<div class="bg-blue fixed">
9+
<div id="menu">
10+
<div id="logo" class="bold clickable">CoderDost
11+
<div id="menu-btn" onclick="toggleMenu()"><i class="fas fa-bars"></i></div>
12+
</div>
13+
<div id="menu-items" class="hide" style="display: contents;">
14+
<div class="menu-item bold clickable" onclick="scrollToEl('home')">HOME</div>
15+
<div class="menu-item bold clickable">FEATURES</div>
16+
<div class="menu-item bold clickable" onclick="scrollToEl('pricing')">PRICING</div>
17+
<div class="menu-item bold clickable" onclick="scrollToEl('testimonials')">TESTIMONIALS</div>
18+
<div class="menu-item bold clickable" onclick="scrollToEl('subscribe')">SUBSCRIBE</div>
19+
<div class="menu-item bold round-btn white-border clickable">LOGIN</div>
20+
21+
</div>
22+
23+
</div>
24+
</div>
25+
<div class="bg-blue">
26+
<div id="home">
27+
<div class="title">
28+
<div>
29+
<h1>SaaS App HTML Landing Page</h1>
30+
</div>
31+
<div>
32+
<p>
33+
Use Tivo to automate your marketing actions in order to reach a
34+
much larger audience
35+
</p>
36+
</div>
37+
<div>
38+
<button class="signup-btn bg-white font-blue clickable">SIGN UP</button>
39+
</div>
40+
</div>
41+
<div class="title-graphic animate__animated animate__bounceInDown">
42+
<img src="images/header-software-app.png" alt="" />
43+
</div>
44+
</div>
45+
</div>
46+
<svg
47+
class="header-frame"
48+
data-name="Layer 1"
49+
xmlns="http://www.w3.org/2000/svg"
50+
preserveAspectRatio="none"
51+
viewBox="0 0 1920 310"
52+
>
53+
<defs>
54+
<style>
55+
.cls-1 {
56+
fill: #5e3dee;
57+
}
58+
</style>
59+
</defs>
60+
<title>header-frame</title>
61+
<path
62+
class="cls-1"
63+
d="M0,283.054c22.75,12.98,53.1,15.2,70.635,14.808,92.115-2.077,238.3-79.9,354.895-79.938,59.97-.019,106.17,18.059,141.58,34,47.778,21.511,47.778,21.511,90,38.938,28.418,11.731,85.344,26.169,152.992,17.971,68.127-8.255,115.933-34.963,166.492-67.393,37.467-24.032,148.6-112.008,171.753-127.963,27.951-19.26,87.771-81.155,180.71-89.341,72.016-6.343,105.479,12.388,157.434,35.467,69.73,30.976,168.93,92.28,256.514,89.405,100.992-3.315,140.276-41.7,177-64.9V0.24H0V283.054Z"
64+
></path>
65+
</svg>
66+
<div class="animation-container">
67+
<div class="animated-logos">
68+
<div class="animated-logo">
69+
<img src="images/customer-logo-1.png" alt="">
70+
</div>
71+
<div class="animated-logo">
72+
<img src="images/customer-logo-2.png" alt="">
73+
</div>
74+
<div class="animated-logo">
75+
<img src="images/customer-logo-3.png" alt="">
76+
</div>
77+
<div class="animated-logo">
78+
<img src="images/customer-logo-4.png" alt="">
79+
</div>
80+
<div class="animated-logo">
81+
<img src="images/customer-logo-5.png" alt="">
82+
</div>
83+
<div class="animated-logo">
84+
<img src="images/customer-logo-6.png" alt="">
85+
</div>
86+
<div class="animated-logo">
87+
<img src="images/customer-logo-1.png" alt="">
88+
</div>
89+
<div class="animated-logo">
90+
<img src="images/customer-logo-2.png" alt="">
91+
</div>
92+
<div class="animated-logo">
93+
<img src="images/customer-logo-3.png" alt="">
94+
</div>
95+
<div class="animated-logo">
96+
<img src="images/customer-logo-4.png" alt="">
97+
</div>
98+
<div class="animated-logo">
99+
<img src="images/customer-logo-5.png" alt="">
100+
</div>
101+
</div>
102+
</div>
103+
104+
105+
<div class="outer-bg-blue">
106+
<div class="marketing">
107+
<h2>Marketing Automation Will Bring More Qualified Leads</h2>
108+
</div>
109+
<div id="cards" class="cards hideEl">
110+
<div class="marketing-card">
111+
<div>
112+
<img src="images/description-1.png" />
113+
</div>
114+
<div class="title-text bold">Title</div>
115+
<div class="soft">
116+
It's very easy to start creating email lists for your marketing
117+
actions. Just create your Tivo account
118+
</div>
119+
</div>
120+
<div class="marketing-card">
121+
<div>
122+
<img src="images/description-1.png" />
123+
</div>
124+
<div class="title-text bold">Title</div>
125+
<div class="soft">
126+
It's very easy to start creating email lists for your marketing
127+
actions. Just create your Tivo account
128+
</div>
129+
</div>
130+
<div class="marketing-card">
131+
<div>
132+
<img src="images/description-1.png" />
133+
</div>
134+
<div class="title-text bold">Title</div>
135+
<div class="soft">
136+
It's very easy to start creating email lists for your marketing
137+
actions. Just create your Tivo account
138+
</div>
139+
</div>
140+
</div>
141+
</div>
142+
143+
<div id="pricing">
144+
<div class="price-title">
145+
<h2>Pricing Options</h2>
146+
</div>
147+
<div id="price-cards" class="price-cards">
148+
<div class="price-card hideEl">
149+
<div class="price-info">
150+
<div class="plan font-blue bold">Basic</div>
151+
<div class="price">$ 100</div>
152+
<div class="trial">14 days trial</div>
153+
</div>
154+
<hr />
155+
<ul class="features">
156+
<li><i class="fas fa-check font-blue"></i>Email Marketing Module</li>
157+
<li><i class="fas fa-check font-blue"></i>User Control Management</li>
158+
<li><i class="fas fa-times soft"></i>List Building And Cleaning</li>
159+
<li><i class="fas fa-times soft"></i>Collected Data Reports</li>
160+
<li><i class="fas fa-times soft"></i>Planning And Evaluation</li>
161+
</ul>
162+
<div class="action">
163+
<button class="round-btn bold bg-blue font-white clickable">Sign Up</button>
164+
</div>
165+
</div>
166+
<div class="price-card hideEl">
167+
<div class="price-info">
168+
<div class="plan font-blue">PRO</div>
169+
<div class="price">$ 100</div>
170+
<div class="trial">14 days trial</div>
171+
</div>
172+
<hr />
173+
<ul class="features">
174+
<li><i class="fas fa-check font-blue"></i>Email Marketing Module</li>
175+
<li><i class="fas fa-check font-blue"></i>User Control Management</li>
176+
<li><i class="fas fa-check font-blue"></i>List Building And Cleaning</li>
177+
<li><i class="fas fa-times soft"></i>Collected Data Reports</li>
178+
<li><i class="fas fa-times soft"></i>Planning And Evaluation</li>
179+
</ul>
180+
<div class="action">
181+
<button class="round-btn bold bg-blue font-white clickable">SIGN UP</button>
182+
</div>
183+
</div>
184+
<div class="price-card hideEl">
185+
<div class="price-info">
186+
<div class="plan font-blue">BASIC</div>
187+
<div class="price">$ 100</div>
188+
<div class="trial">14 days trial</div>
189+
</div>
190+
<hr />
191+
<ul class="features">
192+
<li><i class="fas fa-check font-blue"></i>Email Marketing Module</li>
193+
<li><i class="fas fa-check font-blue"></i>User Control Management</li>
194+
<li><i class="fas fa-check font-blue"></i>List Building And Cleaning</li>
195+
<li><i class="fas fa-check font-blue"></i>Collected Data Reports</li>
196+
<li><i class="fas fa-check font-blue"></i>Planning And Evaluation</li>
197+
</ul>
198+
<div class="action">
199+
<button class="round-btn bold bg-blue font-white clickable">Sign Up</button>
200+
</div>
201+
</div>
202+
</div>
203+
</div>
204+
205+
<div id="testimonials" class="hideEl">
206+
<div class="profile-image">
207+
<img src="images/testimonial-3.jpg" alt="" />
208+
</div>
209+
<div class="feedback">
210+
<p>
211+
Tivo is the best marketing automation app for small and medium sized
212+
business. It understands the mindset of young entrepreneurs and
213+
provides the necessary data for wise marketing decisions. Just give it
214+
a try and you will definitely not regret spending your time.
215+
</p>
216+
<p class="name bold">Marsha Singer - Online Marketer</p>
217+
</div>
218+
</div>
219+
<div id="subscribe">
220+
<div class="subs-title">
221+
<h2>Stay Updated With The Latest News To Get More Qualified Leads</h2>
222+
</div>
223+
<div class="form">
224+
<div>
225+
<input class="email" type="text" name="email" placeholder="Email">
226+
</div>
227+
<div class="agree">
228+
<input type="checkbox">
229+
I've read and agree to Tivo's written Privacy Policy and Terms Conditions
230+
</div>
231+
<div class="action">
232+
<button class="subscribe bold bg-blue font-white round-btn clickable"> Subscribe </button>
233+
</div>
234+
</div>
235+
236+
</div>
237+
</div>
238+
239+
<div class="social">
240+
<div class="bg-blue clickable">
241+
<i class="fab fa-facebook-f font-white"></i>
242+
</div>
243+
<div class="bg-blue clickable">
244+
<i class="fab fa-twitter font-white"></i>
245+
</div>
246+
<div class="bg-blue clickable">
247+
<i class="fab fa-instagram font-white"></i>
248+
</div>
249+
<div class="bg-blue clickable">
250+
<i class="fab fa-pinterest-p font-white"></i>
251+
</div>
252+
<div class="bg-blue clickable">
253+
<i class="fab fa-linkedin font-white"></i>
254+
</div>
255+
256+
</div>
257+
<div class="up bg-blue clickable" onclick="scrollToEl('home')">
258+
<i class="fas fa-chevron-up font-white"></i>
259+
</div>
260+
261+
<svg class="footer-frame" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 79"><defs><style>.cls-2{fill:#5E3DEE;}</style></defs><title>footer-frame</title><path class="cls-2" d="M0,72.427C143,12.138,255.5,4.577,328.644,7.943c147.721,6.8,183.881,60.242,320.83,53.737,143-6.793,167.826-68.128,293-60.9,109.095,6.3,115.68,54.364,225.251,57.319,113.58,3.064,138.8-47.711,251.189-41.8,104.012,5.474,109.713,50.4,197.369,46.572,89.549-3.91,124.375-52.563,227.622-50.155A338.646,338.646,0,0,1,1920,23.467V79.75H0V72.427Z" transform="translate(0 -0.188)"></path></svg>
262+
<div class="bg-blue">
263+
264+
<div id="footer">
265+
<div class="footer-section">
266+
<h3>About</h3>
267+
We're passionate about designing and developing one of the best marketing apps in the market
268+
269+
270+
</div>
271+
<div class="footer-section rect">
272+
<h3>Important Links</h3>
273+
<ul>
274+
<li>Our business partners startupguide.com</li>
275+
<li>Our business partners startupguide.com</li>
276+
</ul>
277+
278+
</div>
279+
<div class="footer-section">
280+
<h3>Contact</h3>
281+
<ul>
282+
<li><i class="fas fa-map-marker-alt"></i>22 Innovative, San Francisco, CA 94043, US</li>
283+
<li><i class="fas fa-envelope"></i>[email protected]
284+
<i class="fas fa-globe"></i> www.tivo.com</li>
285+
</ul>
286+
</div>
287+
</div>
288+
<div class="copyright">
289+
<hr class="light-hr">
290+
<p>copyright 2020</p>
291+
</div>
292+
</div>
293+
<script src="index.js"></script>
294+
</body>
295+
</html>

‎index.js

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
console.log('loaded')
2+
3+
4+
function toggleMenu(){
5+
// const allMenuItems = document.querySelectorAll('.menu-item');
6+
7+
// allMenuItems.forEach(item=>{
8+
// const oldClasses = item.getAttribute('class');
9+
// if(oldClasses.indexOf('hide')>-1){
10+
// item.setAttribute('class',oldClasses.split('hide').join(''))
11+
// }else{
12+
// item.setAttribute('class',oldClasses + ' hide')
13+
// }
14+
// })
15+
16+
const menuDiv = document.getElementById('menu-items');
17+
const oldClasses = menuDiv.getAttribute('class');
18+
if(oldClasses.indexOf('hide')>-1){
19+
menuDiv.setAttribute('class','animated')
20+
}else{
21+
menuDiv.setAttribute('class','hiding');
22+
setTimeout(function(){
23+
menuDiv.setAttribute('class','hide')
24+
},300)
25+
}
26+
}
27+
28+
function scrollToEl(elementId){
29+
const el = document.getElementById(elementId);
30+
scrollTo({top:el.offsetTop-100, behavior:'smooth'})
31+
}
32+
33+
34+
35+
let lastKnownScrollPosition = 0;
36+
let ticking = false;
37+
let cardAnimated = false;
38+
let priceAnimated = false;
39+
let testAnimated = false;
40+
41+
var isInViewport = function (elem) {
42+
var bounding = elem.getBoundingClientRect();
43+
return (
44+
bounding.top >= 0 &&
45+
bounding.left >= 0 &&
46+
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
47+
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
48+
);
49+
};
50+
51+
52+
function doAnimation(scrollPos) {
53+
54+
const el_cards = document.getElementById('cards');
55+
if(isInViewport(el_cards) && !cardAnimated){
56+
el_cards.classList.add('animate__animated', 'animate__bounceInUp','animate__slow');
57+
el_cards.classList.remove('hideEl');
58+
cardAnimated = true;
59+
}
60+
61+
const el_price = document.getElementById('price-cards');
62+
let delay =0;
63+
if(isInViewport(el_price) && !priceAnimated){
64+
for(let e of el_price.children){
65+
console.log(e);
66+
e.classList.add('animate__animated', 'animate__fadeInUp',`animate__delay-${delay}s`);
67+
e.classList.remove('hideEl');
68+
delay++;
69+
}
70+
priceAnimated = true;
71+
72+
}
73+
74+
const el_test = document.getElementById('testimonials');
75+
76+
if(isInViewport(el_test) && !testAnimated){
77+
el_test.classList.add('animate__animated', 'animate__fadeInRight');
78+
el_test.classList.remove('hideEl');
79+
testAnimated = true;
80+
}
81+
82+
}
83+
84+
85+
document.addEventListener('scroll', (e) => {
86+
lastKnownScrollPosition = window.scrollY;
87+
88+
if (!ticking) {
89+
window.requestAnimationFrame(() => {
90+
doAnimation(lastKnownScrollPosition);
91+
ticking = false;
92+
});
93+
94+
ticking = true;
95+
}
96+
});

0 commit comments

Comments
 (0)