-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
304 lines (304 loc) · 15.3 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
<!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="stylesheet" href="./css/style.min.css">
<!-- <link rel="icon" type="image/svg+xml" href="./images/logo.svg">
<link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png">
<link rel="manifest" href="./images/site.webmanifest"> -->
<link rel="icon" type="image/x-icon" sizes="any" href="./images/favicon.ico">
<title>First Project</title>
</head>
<body>
<header>
<section class="container header">
<div class="header__block">
<div class="header__logo">
<a href="#" class="header__logo">
<svg width="49" height="35" class="footer-item__img img-facebook">
<use href="./images/sprite.svg#logo"></use>
</svg>
</a>
</div>
<nav class="header__navigation">
<ul class="header__menu">
<li class="header__item"><a class="header__link" href="#">About</a></li>
<li class="header__item"><a class="header__link" href="#">Help</a></li>
<li class="header__item"><a class="header__link"href="#">Features</a></li>
<li class="header__item"><a class="header__link"href="#">Sign Up</a></li>
</ul>
<button type="submit" class="header__button button">
Request Demo
<svg width="20" height="14" class="arrow">
<use href="./images/sprite.svg#arrow"></use>
</svg>
<svg width="20" height="14" class="arrow-light">
<use href="./images/sprite.svg#arrow-light"></use>
</svg>
</button>
</nav>
</div>
</section>
</header>
<main>
<section class="container">
<div class="main-block">
<h1 class="main-block__header">Save your data storage here.</h1>
<div class="main-block__introduction">
<p class="main-block__introduction-paragraph">
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>
<img src="./images/main.png" alt="introduction photo" class="main-block__image">
</div>
<button class="main-block__button">Learn more</button>
</div>
<div class="who">
<img src="./images/image.png" alt="who we are photo" class="who__photo">
<div class="who__description">
<h2 class="who__title">
We are a high-level data
storage bank
</h2>
<p class="who__paragraph-1">
The place to store various data that you can access at any time through the internet and where you can carry it.
</p>
<p class="who__paragraph-2">
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>
</div>
<div class="features">
<div class="features__header">
<h2 class="features__title">Features</h2>
<p class="features__description">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__main">
<ul class="features__menu">
<li class="features__item">
<img src="./images/card1.png" alt="Search Data" class="features__image">
<div class="features__card card-1">
<div class="features__card-content">
<h3 class="features__card-title">Search Data</h3>
<p class="features__card-description">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>
<div class="features__card-learn">
<a href="#" class="features__card-link">Learn more</a>
<a href="#" class="features__card-arrow">
<svg width="20" height="14" >
<use href="./images/sprite.svg#arrow"></use>
</svg>
</a>
</div>
</div>
</div>
</li>
<li class="features__item">
<img src="./images/card2.png" alt="24 Hours Access" class="features__image">
<div class="features__card card-2">
<div class="features__card-content">
<h3 class="features__card-title">24 Hours Access</h3>
<p class="features__card-description">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>
<div class="features__card-learn">
<a href="#" class="features__card-link">Learn more</a>
<a href="#" class="features__card-arrow">
<svg width="20" height="14" >
<use href="./images/sprite.svg#arrow"></use>
</svg>
</a>
</div>
</div>
</div>
</li>
<li class="features__item">
<img src="./images/card3.png" alt="Print Out" class="features__image">
<div class="features__card card-3">
<div class="features__card-content">
<h3 class="features__card-title">Print Out</h3>
<p class="features__card-description">Print out service gives you convenience if someday
you need print data, just edit it all and just print it.</p>
<div class="features__card-learn">
<a href="#" class="features__card-link">Learn more</a>
<a href="#" class="features__card-arrow">
<svg width="20" height="14" >
<use href="./images/sprite.svg#arrow"></use>
</svg>
</a>
</div>
</div>
</div>
</li>
<li class="features__item">
<img src="./images/card4.png" alt="Security Code" class="features__image">
<div class="features__card card-4">
<div class="features__card-content">
<h3 class="features__card-title">Security Code</h3>
<p class="features__card-description">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>
<div class="features__card-learn">
<a href="#" class="features__card-link">Learn more</a>
<a href="#" class="features__card-arrow">
<svg width="20" height="14" >
<use href="./images/sprite.svg#arrow"></use>
</svg>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="testimonials">
<h2 class="testimonials__title">Testimonials</h2>
<div class="testimonials__cards">
<div class="testimonials__card">
<img src="./images/avatar.jpg" alt="avatar" class="testimonials__img">
<div class="testimonials__card-text">
<h3 class="testimonials__card-name">John Fang</h3>
<a href="wordfaang.com" class="testimonials__card-link">wordfaang.com</a>
<blockquote class="testimonials__card-quote">
<p class="testimonials__card-paragraph">Suspendisse ultrices at diam lectus nullam.</p>
<p class="testimonials__card-paragraph">Nisl, sagittis viverra enim erat tortor ultricies massa turpis. Arcu pulvinar aenean nam laoreet nulla.</p>
</blockquote>
</div>
</div>
<div class="testimonials__card">
<img src="./images/avatar2.jpg" alt="avatar" class="testimonials__img">
<div class="testimonials__card-text">
<h3 class="testimonials__card-name">Hanna Wilson</h3>
<a href="wordfaang.com" class="testimonials__card-link">wordfaang.com</a>
<blockquote class="testimonials__card-quote">
<p class="testimonials__card-paragraph">Suspendisse ultrices at diam lectus nullam.</p>
<p class="testimonials__card-paragraph">Nisl, sagittis viverra enim erat tortor ultricies massa turpis. Arcu pulvinar aenean nam laoreet nulla.</p>
</blockquote>
</div>
</div>
</div>
</div>
<div class="free">
<div class="free__introduction">
<h2 class="free__title">Try for free!</h2>
<p class="free__paragraph">Get limited 1 week free try our features!</p>
</div>
<div class="free__buttons">
<button class="free__learn" type="submit">Learn more</button>
<button type="submit" class="footer__button button">
Request Demo
<svg width="20" height="14" class="arrow">
<use href="./images/sprite.svg#arrow"></use>
</svg>
<svg width="20" height="14" class="arrow-light">
<use href="./images/sprite.svg#arrow-light"></use>
</svg>
</button>
</div>
</div>
</section>
</main>
<footer>
<section class="container">
<div class="footer">
<ul class="footer__menu">
<li class="footer__item footer-main">
<div class="footer__logo">
<a href="#" class="footer__images">
<svg width="49" height="35" class="footer-item__img img-facebook">
<use href="./images/sprite.svg#logo"></use>
</svg>
</a>
<h2 class="footer__title">DataWarehouse</h2>
</div>
<div class="footer__info">
<p class="footer__p">
<p class="footer__adress">Warehouse Society, 234</p>
<p class="footer__adress">Bahagia Ave Street PRBW 29281</p>
</p>
<a href="mailto:info@warehouse.project" class="footer__email">info@warehouse.project</a>
<a href="tel:12323434" class="footer__tel">1-232-3434 (Main)</a>
</div>
</li>
<li class="footer__item footer-item">
<h3 class="footer-item__title">About</h3>
<ul class="footer-item__menu">
<li class="footer-item__links">
<a href="#">Profile</a>
</li>
<li class="footer-item__links">
<a href="#">Features</a>
</li>
<li class="footer-item__links">
<a href="#">Careers</a>
</li>
<li class="footer-item__links">
<a href="#">DW News</a>
</li>
</ul>
</li>
<li class="footer__item footer-item">
<h3 class="footer-item__title">Help</h3>
<ul class="footer-item__menu">
<li class="footer-item__links">
<a href="#">Support</a>
</li>
<li class="footer-item__links">
<a href="#">Sign up</a>
</li>
<li class="footer-item__links">
<a href="#">Guide</a>
</li>
<li class="footer-item__links">
<a href="#">Reports</a>
</li>
<li class="footer-item__links">
<a href="#">Q&A</a>
</li>
</ul>
</li>
<li class="footer__item footer-item">
<h3 class="footer-item__title">Social Media</h3>
<ul class="footer-item__pages">
<li class="footer-item__social facebook">
<a href="https://www.facebook.com/">
<svg width="9.58" height="20.49" class="footer-item__img img-facebook">
<use href="./images/sprite.svg#fb"></use>
</svg>
</a>
</li>
<li class="footer-item__social twitter">
<a href="https://twitter.com/">
<svg width="18.27" height="15.07" class="footer-item__img img-twitter">
<use href="./images/sprite.svg#tw"></use>
</svg>
</a>
</li>
<li class="footer-item__social instagram">
<a href="https://www.instagram.com/" class="footer-item__img img-instagram">
<svg width="16" height="16">
<use href="./images/sprite.svg#inst"></use>
</svg>
</a>
</li>
</ul>
</li>
</ul>
<div class="footer__license">
<p class="footer__license-paragraph">
© Datawarehouse™, 2020. All rights reserved.
</p>
<p class="footer__license-paragraph">
Company Registration Number: 21479524.
</p>
</div>
</div>
</section>
</footer>
</body>
</html>