-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
287 lines (269 loc) · 14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datawarehouse</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/font.css">
</head>
<body>
<main class="main">
<!-- first-box -->
<section class="first-box">
<nav class="menu">
<div class="logo">
<div class="logo_purple"></div>
<div class="logo_pink"></div>
</div>
<a href="#about" class="menu__item">About</a>
<a href="#features" class="menu__item">Features</a>
<a href="#feedback" class="menu__item">Feedbacks</a>
<a href="#sign-up" class="menu__item">Signup</a>
</nav>
<div class="first-box__content">
<h1 class="first-box__title title">
Save your data storage here.
</h1>
<p class="first-box__text text">
Data Warehouse is a data storage area that has been
tested for security, so you can store your data here
safely but not be afraid of being stolen by others.
</p>
<button class="first-box__button button">Learn more</button>
</div>
</section>
<!-- second-box -->
<section class="second-box" id="about">
<img src="./img/second-box.png" alt="high-level data" class="second-box__img img">
<div class="second-box__content">
<h2 class="second-box__title title">
We are a high-level
data storage bank
</h2>
<p class="second-box__text text">
The place to store various data that you can access at any time through the
internet and where you can carry it.
This very flexible storage area has a high level of security.
To enter into your own data you must enter the password that you created
when you registered in this Data Warehouse.
</p>
</div>
</section>
<!-- features -->
<section class="features" id="features">
<div class="features__title-wrap">
<h2 class="features__title title">Features</h2>
<p class="features__text text">
Some of the features and advantages that
we provide for those of you who store data in this Data Warehouse.
</p>
</div>
<div class="features__content">
<div class="features__item features__item_search feature">
<img src="./img/search.png" alt="searching" class="feature__img img">
<div class="feature__wrap">
<h3 class="feature__subtitle subtitle">Search Data</h3>
<p class="feature__text text">
Don’t worry if your data is very large, the Data Warehoue
provides a search engine, which is useful for making it
easier to find data effectively saving time.
</p>
<a href="#" class="feature__link">
Learn more
<span class="feature__arrow "></span>
</a>
</div>
</div>
<div class="features__item features__item_access feature">
<img src="./img/24_hours_access.png" alt="access" class="feature__img img">
<div class="feature__wrap">
<h3 class="feature__subtitle subtitle">24 Hours Access</h3>
<p class="feature__text text">
Access is given 24 hours a full morning to night and
meet again in the morning, giving you comfort when
you need data when urgent.
</p>
<a href="#" class="feature__link">
Learn more
<span class="feature__ arrow"></span>
</a>
</div>
</div>
<div class="features__item features__item_print feature">
<img src="./img/print.png" alt="print" class="feature__img img">
<div class="feature__wrap">
<h3 class="feature__subtitle subtitle">Print Out</h3>
<p class="feature__text text">
Print out service gives you convenience if someday
you need print data, just edit it all and just print it.
</p>
<a href="#" class="feature__link">
Learn more
<span class="feature__arrow "></span>
</a>
</div>
</div>
<div class="features__item features__item_security feature">
<img src="./img/security.png" alt="security" class="feature__img img">
<div class="feature__wrap">
<h3 class="feature__subtitle subtitle">Security Code</h3>
<p class="feature__text text">
Data Security is one of our best facilities.
Allows for your files to be safer. The file can be
secured with a code or password that you created,
so only you can open the file.
</p>
<a href="#" class="feature__link">
Learn more
<span class="feature__arrow "></span>
</a>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="testimonials" id="feedback">
<div class="testimonials__wrap">
<h2 class="testimonials__title title">
Testimonials
</h2>
<div class="slider">
<div class="slider__wrap">
<div class="testimonials__content">
<div class="testimonials__item feedback">
<div class="feedback__customer-img feedback__customer-img_John"></div>
<div class="feedback__customer-text customer-text">
<p class="customer-text__name">John Fang</p>
<p class="customer-text__profession">wordfaang.com</p>
<p class="customer-text__text text">
Suspendisse ultrices at diam lectus nullam.
Nisl, sagittis viverra enim erat tortor ultricies
massa turpis. Arcu pulvinar aenean nam laoreet nulla.
</p>
</div>
</div>
</div>
<div class="testimonials__content">
<div class="testimonials__item feedback">
<div class="feedback__customer-img feedback__customer-img_Jeny"></div>
<div class="feedback__customer-text customer-text">
<p class="customer-text__name">Jeny Doe</p>
<p class="customer-text__profession">UX Engineer</p>
<p class="customer-text__text text">
Suspendisse ultrices at diam lectus nullam.
Nisl, sagittis viverra enim erat tortor ultricies
massa turpis. Arcu pulvinar aenean nam laoreet nulla.
</p>
</div>
</div>
</div>
<div class="testimonials__content">
<div class="testimonials__item feedback">
<div class="feedback__customer-img feedback__customer-img_William"></div>
<div class="feedback__customer-text customer-text">
<p class="customer-text__name">William</p>
<p class="customer-text__profession">Web Designer</p>
<p class="customer-text__text text">
Suspendisse ultrices at diam lectus nullam.
Nisl, sagittis viverra enim erat tortor ultricies
massa turpis. Arcu pulvinar aenean nam laoreet nulla.
</p>
</div>
</div>
</div>
<div class="testimonials__content">
<div class="testimonials__item feedback">
<div class="feedback__customer-img feedback__customer-img_Jeny"></div>
<div class="feedback__customer-text customer-text">
<p class="customer-text__name">Jeny Doe</p>
<p class="customer-text__profession">UX Engineer</p>
<p class="customer-text__text text">
Suspendisse ultrices at diam lectus nullam.
Nisl, sagittis viverra enim erat tortor ultricies
massa turpis. Arcu pulvinar aenean nam laoreet nulla.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="testimonials__pointer pointer">
<div class="pointer-dots">
<span class="pointer-dots__item pointer-dots__item_selected"></span>
<span class="pointer-dots__item"></span>
<span class="pointer-dots__item"></span>
<span class="pointer-dots__item"></span>
</div>
<div class="pointer-arrows">
<div id="arrow-prev">
<span class="pointer-arrows__item pointer-arrows__item-prev"></span>
</div>
<div id="arrow-next">
<span class="pointer-arrows__item pointer-arrows__item-next "></span>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer class="footer" id="sign-up">
<div class="footer__item">
<div class="footer__item-wrap">
<h2 class="footer__title title">Try for free!</h2>
<p class="footer__text text">
Get limited 1 week free try our features!
</p>
</div>
<button class="footer__button button">Learn more</button>
</div>
<div class="footer__item">
<adress class="footer__adress">
<div class="footer__logo logo">
<div class="logo_purple"></div>
<div class="logo_pink"></div>
<h3 class="logo__title title">DataWarehouse</h3>
</div>
<p>
Warehouse Society, 234 <br>
Bahagia Ave Street
PRBW 29281
</p>
<p>
1-232-3434 (Main)
</p>
</adress>
<div class="footer__about">
<h3 class="footer__subtitle subtitle">About</h3>
<a href="#" class="footer__link">Profile</a>
<a href="#" class="footer__link">Features</a>
<a href="#" class="footer__link">Careers</a>
<a href="#" class="footer__link">DW News</a>
</div>
<div class="footer__about">
<h3 class="footer__subtitle subtitle">Help</h3>
<a href="#" class="footer__link">Support</a>
<a href="#" class="footer__link">Sign up</a>
<a href="#" class="footer__link">Guide</a>
<a href="#" class="footer__link">Reports</a>
<a href="#" class="footer__link">Q&A</a>
</div>
<div class="footer__about">
<h3 class="footer__subtitle subtitle">Social Media</h3>
<div class="footer__media media">
<a href="" class="media__item media__item_facebook"></a>
<a href="" class="media__item media__item_tw"></a>
<a href="" class="media__item media__item_inst"></a>
</div>
</div>
</div>
<p class="footer__copyrighter">
© Datawarehouse™, 2020. All rights reserved.<br>
Company Registration Number: 21479524.
</div>
</footer>
</main>
<script src="./script.js"></script>
</body>
</html>