-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
250 lines (237 loc) · 13.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
<!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>Website with animation</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
</head>
<body>
<header class="container" id="header">
<div class="navbar maxsize">
<div class="logo">Logo</div>
<div id="menu-icon"><span class="bars"><i class="fas fa-bars"></i></span><span class="cross"><i class="fas fa-times"></i></span></div>
<div class="menu full">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Company</a></li>
</ul>
</div>
<div class="join-btns">
<div class="login"><a href="#">Log in</a></div>
<div class="signup"><a href="#">Sign up</a></div>
</div>
</div>
</header>
<section class="section-hero container">
<div class="content maxsize">
<div class="block-content">
<h1>We bring together everything that’s required to <span class="diff-bold">build apps</span></h1>
<p>Nam sit curabitur pretium quis enim mattis magnis ut. Fermentum vitae tellus aliquet</p>
<a href="#" class="btn">Get Started</a>
</div>
<div class="block-hero-img">
<img src="Images/document.svg" alt="" id="doc1" class="doc-box-shadow">
<div id="doc2"><img src="Images/document2.svg" alt="" class="circle doc-box-shadow"></div>
<div id="circle1" class="circle slide-left"><img src="Images/red circle.png" alt=""></div>
<div id="circle2" class="circle slide-right"><img src="Images/red circle.png" alt=""></div>
<div id="circle3" class="circle slide-right"><img src="Images/transparent circle.png" alt=""></div>
<div id="circle4" class="circle slide-right"><img src="Images/red circle.png" alt=""></div>
<div id="circle5" class="circle slide-left"><img src="Images/transparent circle.png" alt=""></div>
<div id="circle6" class="circle slide-right"><img src="Images/transparent circle.png" alt=""></div>
<div id="circle7" class="circle slide-left"><img src="Images/red circle.png" alt=""></div>
<div id="circle8" class="circle slide-right"><img src="Images/transparent circle.png" alt=""></div>
<div id="circle9" class="circle slide-left"><img src="Images/transparent circle.png" alt=""></div>
</div>
</div>
</section>
<section class="section container">
<div class="block-content">
<h1 class=" js-scroll fade-in-up">With all the features you need</h1>
<p class="js-scroll fade-in-up">Nisi dignissim tortor sed quam sed ipsum ut. Montes, morbi euismod elit est. Eget luctus vestibulum</p>
</div>
<div class="main-features-box maxsize">
<div class="feature-box js-scroll fade-in-up">
<div class="featues-icon"><i class="fas fa-layer-group"></i></div>
<div class="feat-head js-scroll fade-in-up"><h2>Native Performance</h2></div>
<div class="feat-p js-scroll fade-in-up">
<p>Non aliquet viverra auctor et eget arcu, vitaearcu.</p>
</div>
</div>
<div class="feature-box js-scroll fade-in-up">
<div class="featues-icon"><i class="fas fa-shield-alt"></i></div>
<div class="feat-head js-scroll fade-in-up"><h2>Security</h2></div>
<div class="feat-p js-scroll fade-in-up"><p>In molestie ac enim dolor ornare egestas adipiscing.</p></div>
</div>
<div class="feature-box js-scroll fade-in-up">
<div class="featues-icon"><i class="fas fa-pen-nib"></i></div>
<div class="feat-head js-scroll fade-in-up"><h2>Beautiful UIs</h2></div>
<div class="feat-p js-scroll fade-in-up"><p>Vitae lectus sed sit semper magnis tortor diam at dolor.</p></div>
</div>
<div class="feature-box js-scroll fade-in-up">
<div class="featues-icon"><i class="far fa-window-maximize"></i></div>
<div class="feat-head js-scroll fade-in-up"><h2>Fast Development</h2></div>
<div class="feat-p js-scroll fade-in-up"><p>Egestas dictumst facilisis vulputate cras tellus sit.</p></div>
</div>
</div>
</section>
<section class="section-full container">
<div class="section-grid maxsize">
<div class="section-content section-full-content">
<h1 class=" js-scroll fade-in-up">Hyperion’s <span class="diff-bold">Powerful</span> and <span class="diff-bold">easy</span> to use app builder platform</h1>
<p class="js-scroll fade-in-up">Accumsan egestas adipiscing pharetra, convallis eu eu. Neque, turpis libero, bibendum potenti facilisis sed. Sollicitudin integer nunc dui pretium, faucibus sodales morbi mollis. Egestas sit donec.</p>
<div><a class="btn js-scroll fade-in-up">More Features</a></div>
</div>
<div class="section-full-img aniamte-scroll js-scroll fade-in-up">
<div class="section-animate-grid circle rotategrid">
<div class="docs3-1"><img src="Images/documents31.svg" alt="" class="doc-box-shadow "></div>
<div class="docb3"><img src="Images/documentb3.svg" alt="" class="doc-box-shadow"></div>
<div class="docs3-2"><img src="Images/documents32.svg" alt="" class="doc-box-shadow"></div>
</div>
<div class="section-full-circle">
<div id="circle10" class="circle slide-left"><img src="Images/red circle.png" alt=""></div>
<div id="circle11" class="circle slide-right"><img src="Images/red circle.png" alt=""></div>
<div id="circle12" class="circle slide-right"><img src="Images/transparent circle.png" alt=""></div>
</div>
</div>
</div>
</section>
<section class="work-section container">
<div class="work-content">
<h1 class="js-scroll fade-in-up">How it works</h1>
<div class="work-grid maxsize js-scroll fade-in-up">
<div class="feature-box">
<div class="featues-icon"><i class="far fa-hand-point-up"></i>
<span class="work-not">5</span>
</div>
<div class="feat-head js-scroll fade-in-up"><h2>Fast Development</h2></div>
<div class="feat-p js-scroll fade-in-up"><p>Egestas dictumst facilisis vulputate cras tellus sit.</p></div>
</div>
<div class="feature-box">
<div class="featues-icon"><i class="fas fa-cog"></i>
<span class="work-not">1</span>
</div>
<div class="feat-head js-scroll fade-in-up"><h2>Fast Development</h2></div>
<div class="feat-p js-scroll fade-in-up"><p>Egestas dictumst facilisis vulputate cras tellus sit.</p></div>
</div>
<div class="feature-box">
<div class="featues-icon"><i class="fas fa-cubes"></i>
<span class="work-not">3</span>
</div>
<div class="feat-head js-scroll fade-in-up"><h2>Fast Development</h2></div>
<div class="feat-p js-scroll fade-in-up"><p>Egestas dictumst facilisis vulputate cras tellus sit.</p></div>
</div>
</div>
<a href="#" class="btn js-scroll fade-in-up">Get Started</a>
</div>
</section>
<section class="section container">
<div class="section-idea maxsize js-scroll fade-in-up">
<div class="idea-doc circle "><img src="Images/ideadoc.svg" alt="" class="doc-box-shadow"></div>
<div class="section-content js-scroll fade-in-up">
<h1 class="js-scroll fade-in-up">Bring your app idea to life with <span class="diff-bold">industry</span> <span class="diff-bold"> experts</span></h1>
<p class="js-scroll fade-in-up">Tellus fermentum sodales dui in lobortis urna suspendisse luctus adipiscing. Donec diam massa aliquet sit cras sed.</p>
<ul>
<li class="js-scroll fade-in-up"><i class="fas fa-check doc-box-shadow"></i>Cloud-based app hosting solution</li>
<li class="js-scroll fade-in-up"><i class="fas fa-check doc-box-shadow"></i>Intelligent offline app capabilities</li>
<li class="js-scroll fade-in-up"><i class="fas fa-check doc-box-shadow"></i>Faster app development</li>
</ul>
</div>
</div>
</section>
<section class="section container">
<div class="section-review maxsize">
<div class="section-content review-content js-scroll fade-in-up">
<h1>What clients say about us</h1>
<p>Turpis ut mattis consectetur a sapien tempus, commodo etiam. Tincidunt mauris ultrices non sit.</p>
<a href="#" class="btn">About Us</a>
</div>
<div class="reviewcontain1 js-scroll fade-in-up">
<div class="review1 review js-scroll fade-in-up">
<p>Eget eu massa et consectetur. Lorem quam lacus, mauris donec. Leo a, id sed duis proin sodales. Turpis viverra diam porttitor mattis morbi ac amet. Euismod commodo.</p>
<div class="lower-review-section">
<div class="user-log"><i class="far fa-user"></i></div>
<div>
<div class="review-name">Cody Fisher</div>
<div class="review-post">Senior Writer</div>
</div>
</div>
</div>
<div class="review2 review">
<p>Ullamcorper interdum cursus varius venenatis egestas arcu tempus. Nullam odio est ultricies aenean nulla. Nibh non iaculis quisque suspendisse ac gravida nam accumsan.</p>
<div class="lower-review-section">
<div class="user-log"><i class="far fa-user"></i></div>
<div>
<div class="review-name">Esther Howard</div>
<div class="review-post">Senior Engineer</div>
</div>
</div>
</div>
</div>
<div class="reviewcontain2">
<div class="review3 review js-scroll fade-in-up">
<p>Tempor suscipit consectetur tellus tempor. Penatibus odio nibh ipsum bibendum dignissim tempus.</p>
<div class="lower-review-section">
<div class="user-log"><i class="far fa-user"></i></div>
<div>
<div class="review-name">Cody Fisher</div>
<div class="review-post">CEO</div>
</div>
</div>
</div>
<div class="review4 review js-scroll fade-in-up">
<p>Nibh laoreet porttitor posuere sed lobortis pulvinar. Malesuada cursus auctor leo mattis risus amet, scelerisque. Vitae magna sapien sit convallis sit diam tincidunt.</p>
<div class="lower-review-section">
<div class="user-log"><i class="far fa-user"></i></div>
<div>
<div class="review-name">Jane Cooper</div>
<div class="review-post">Venture Lead</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="container">
<div class="section-footer maxsize">
<div class="office js-scroll fade-in-up">
<div class="logo">LOGO</div>
<div class="address js-scroll fade-in-up"><span>Our office:</span> <br>
5678 Seltice Way Coeur D <br>
Alene, ID 12345
</div>
<a href="#" class="js-scroll fade-in-up">https://github.com/Rohit-singh19</a>
</div>
<div class="quick footerlinks js-scroll fade-in-up">
<h4>Quick Links</h4>
<li><a href="#">Company</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</div>
<div class="social footerlinks js-scroll fade-in-up">
<h4>Social</h4>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Youtube</a></li>
</div>
<div class="template footerlinks js-scroll fade-in-up">
<h4>Template</h4>
<li><a href="#">Instructions</a></li>
<li><a href="#">Licensing</a></li>
<li><a href="#">Style Guide</a></li>
<li><a href="#">Changelog</a></li>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>