-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html
205 lines (185 loc) · 7.78 KB
/
home.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.5/typed.min.js">
</script>
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<link rel="stylesheet" href="home.css">
<title>SIFT</title>
</head>
<body>
<header class="main-header">
<div class="header-nav">
<nav class="main-nav">
<div class="max-width">
<a href="#" class="logo-link" style="text-decoration: none;">SI<span>FT.</span></a>
<ul class="nav-list">
<li class="nav-item">
<a href="#" target="_self" class="nav-link link">Home</a>
</li>
<li class="nav-item">
<a href="#contactUs" class="nav-link link">Contact us</a>
</li>
<li class="nav-item">
<a href="blog.html" class="nav-link link">Blogs</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="hero-content">
<h1 class="main-heading">SIFT<br> Your <span class="main-heading-focus"></span> <span class="typed-cursor"></span></h1>
<!-- <a href="#" class="hero-cta link">Free Trial</a> -->
</div>
</header>
<main class="main-container">
<div class="card-container">
<p class="main-card-title">Choose an exercise you'd like to do!</p>
<div class="card-content">
<div class="card" onclick="squatsClick()" data-aos="flip-left">
<div class="card-img-container">
<img src="assets/images/squats.png" alt="" class="card-img">
<div class="card-info">
<ul class="card-info-list">
<li class="card-info-item">Squats strengthen your lower body and core muscles.</li>
<li class="card-info-item">Squats burn calories and may help you lose weight.</li>
<li class="card-info-item">Squats can reduce your risk of injury.</li>
</ul>
</div>
</div>
<p class="card-title">Squats <span class="card-span"></span></p>
</div>
<div class="card" data-aos="flip-left" onclick="lateralRaisesClick()">
<div class="card-img-container">
<img src="assets/images/lateralRaises.png" alt="" class="card-img">
<div class="card-info">
<ul class="card-info-list">
<li class="card-info-item">Lateral raises specifically targets deltoid muscles.</li>
<li class="card-info-item">the lateral raise can help you achieve muscle hypertrophy of deltoids.</li>
<li class="card-info-item">It gives the appearance of broader, stronger shoulders.</li>
</ul>
</div>
</div>
<p class="card-title">Lateral Raises <span class="card-span"></span></p>
</div>
<div class="card" data-aos="flip-left" onclick="shoulderPressClick()">
<div class="card-img-container">
<img src="assets/images/shoulderPress.png" alt="" class="card-img">
<div class="card-info">
<ul class="card-info-list">
<li class="card-info-item">Shoulder press strengthens shoulder muscles.</li>
<li class="card-info-item">It also targets triceps and trapezius muscles.</li>
<li class="card-info-item">Core muscles are also engaged.</li>
</ul>
</div>
</div>
<p class="card-title">Shoulder Press<span class="card-span"></span></p>
</div>
<div class="card" data-aos="flip-left" onclick="highKneesClick()">
<div class="card-img-container">
<img src="assets/images/highKnees.png" alt="" class="card-img">
<div class="card-info">
<ul class="card-info-list">
<li class="card-info-item">It engages your core, strengthens all the muscles in your legs</li>
<li class="card-info-item">Increases heart rate and improves coordination.</li>
<li class="card-info-item">An easy escape if you don't like running for hours on end!</li>
</ul>
</div>
</div>
<p class="card-title">High Knees<span class="card-span"></span></p>
</div>
</div>
</div>
<div class="testimonial-container" id="contactUs">
<!-- <p id="test">Choose an exercise you'd like to do!</p> -->
<div class="testimonials">
<div class="slide-btn">
<div class="btn bg" id="btn-1"></div>
<div class="btn" id="btn-2"></div>
<div class="btn" id="btn-3"></div>
<div class="btn" id="btn-4"></div>
</div>
<div class="user-container" id="user-1">
<div class="user-img-container">
<img src="assets/images/akshit.jpeg" alt="" class="user-img">
</div>
<div class="user-info">
<p class="user-name">Akshit Bansal</p>
<p class="user-message">NIT, Kurukshetra</p>
</div>
</div>
<div class="user-container" id="user-2">
<div class="user-img-container">
<img src="assets/images/abhinav.jpeg" alt="" class="user-img">
</div>
<div class="user-info">
<p class="user-name">Abhinav Saxena</p>
<p class="user-message">NIT, Kurukshetra</p>
</div>
</div>
<div class="user-container" id="user-3">
<div class="user-img-container">
<img src="assets/images/ambika.jpeg" alt="" class="user-img">
</div>
<div class="user-info">
<p class="user-name">Ambika Sadhu</p>
<p class="user-message">NIT, Kurukshetra</p>
</div>
</div>
<div class="user-container" id="user-4">
<div class="user-img-container">
<img src="assets/images/kanishk.jpg" alt="" class="user-img">
</div>
<div class="user-info">
<p class="user-name">Kanishk Mendiratta</p>
<p class="user-message">IIIT, Jabalpur</p>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer-border"></div>
<div class="footer-content-container">
<div class="footer-content">
<a href="#" class="link footer-logo" style="color: black;">SI<span style="color: crimson;">FT.</span></a>
<p class="company-desc">Smart Indoor Fitness Trainer.</p>
<table class="footer-contact-info">
<tr>
<td><i class="fas fa-envelope" style="color: crimson;"></i></td>
<td>akakshitbansal@gmail.com</td>
<td><i class="fas fa-phone-alt" style="color: crimson;"></i></td>
<td>555-5555-555 <br> 888-8888-888</td>
<td><i class="fas fa-map-marker-alt" style="color: crimson;"></i></td>
<td> New Delhi, India</td>
</tr>
</table>
</div>
</div>
<div class="copyright">
<p class="copy-text">© Impostors</p>
</div>
</footer>
<script src="main.js"></script>
<script>
if ($(".text-slider").length == 1) {
var typed_strings =
$(".text-slider-items").text();
var typed = new Typed(".text-slider", {
strings: typed_strings.split(", "),
typeSpeed: 50,
loop: true,
backDelay: 900,
backSpeed: 30,
});
}
</script>
</body>
</html>