-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
18 lines (18 loc) · 9.65 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Data Warehouse</title><link rel="shortcut icon" href="img/logo.svg" type="image/x-icon"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""><link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet"><link rel="stylesheet" href="css/main.css"></head><body> <header class="Header"><div class="container"> <a href="/"><img class="Header-logo" src="img/logo.svg" alt="Logo"></a><button class="hamburger"><div class="bar"></div></button><nav class="Navigation"> <a class="Navigation-item active" href="#">About</a><a class="Navigation-item" href="#">Help</a><a class="Navigation-item" href="#">Features</a><a class="Navigation-item" href="#">Signup</a><div class="button button-icon button-white"> <a href="#"> <span>Request Demo </span><i> <img src="img/right-arrow-purple.svg" alt="" aria-hidden="true"></i></a></div></nav></div></header><main class="Main"><section class="Hero"> <div class="container"><div class="Hero-content"> <h1 class="Hero-title">Save your data storage here.</h1><p class="Hero-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><div class="button button-purple">Learn more</div></div><div class="Hero-image"><img src="img/image-hero.svg" alt="" aria-hidden="true"></div></div></section><section class="About"> <div class="container"> <img src="img/pink-image.svg" alt="" aria-hidden="true"><div class="About-content"> <h2 class="heading">We are a high-level data storage bank</h2><p class="About-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></div></section><section class="Features"> <div class="container"><h2 class="heading">Features</h2><p class="Features-content">Some of the features and advantages that we provide for those of you who store data in this Data Warehouse.</p><div class="Features-card"> <div class="Features-card-item"><img src="img/green/features-img-1.svg" alt="" aria-hidden="true"><div class="Features-card-item-content"><h3>Search Data</h3><p>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="button button-icon button-transparent"> <a href="#"> <span>Learn more </span><i> <img src="img/right-arrow-purple.svg" alt=""></i></a></div></div></div><div class="Features-card-item"><img src="img/purple/features-img-2.svg" alt="" aria-hidden="true"><div class="Features-card-item-content"><h3>24 Hours Access</h3><p>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="button button-icon button-transparent"> <a href="#"> <span>Learn more </span><i> <img src="img/right-arrow-purple.svg" alt=""></i></a></div></div></div><div class="Features-card-item"><img src="img/pink/features-img-3.svg" alt="" aria-hidden="true"><div class="Features-card-item-content"><h3>Print Out</h3><p>Print out service gives you convenience if someday you need print data, just edit it all and just print it.</p><div class="button button-icon button-transparent"> <a href="#"> <span>Learn more </span><i> <img src="img/right-arrow-purple.svg" alt=""></i></a></div></div></div><div class="Features-card-item"><img src="img/darkgreen/features-img-4.svg" alt="" aria-hidden="true"><div class="Features-card-item-content"><h3>Security Code</h3><p>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="button button-icon button-transparent"> <a href="#"> <span>Learn more </span><i> <img src="img/right-arrow-purple.svg" alt=""></i></a></div></div></div></div></div></section><section class="Testimonials"> <div class="container"> <h2 class="heading">Testimonials</h2><div class="Testimonials-slider"> <figure class="Testimonials-item"><img class="user-img" src="img/user-img/John-Fang.svg" alt="John Fang"><blockquote class="Testimonials-item-text"><p></p>Suspendisse ultrices at diam lectus nullam.
Nisl, sagittis viverra enim erat tortor ultricies massa turpis.
Arcu pulvinar aenean nam laoreet nulla.</blockquote><figcaption class="user-info"><p class="user-name">John Fang</p><p class="user-title">wordfaang.com</p></figcaption></figure><figure class="Testimonials-item"><img class="user-img" src="img/user-img/Jeny-Doe.svg" alt="Jeny Doe"><blockquote class="Testimonials-item-text"><p></p>Suspendisse ultrices at diam lectus nullam.
Nisl, sagittis viverra enim erat tortor ultricies massa turpis.
Arcu pulvinar aenean nam laoreet nulla.</blockquote><figcaption class="user-info"><p class="user-name">Jeny Doe</p><p class="user-title">UX Engineer</p></figcaption></figure><figure class="Testimonials-item"><img class="user-img" src="img/user-img/John-Fang.svg" alt="John Fang"><blockquote class="Testimonials-item-text"><p></p>Suspendisse ultrices at diam lectus nullam.
Nisl, sagittis viverra enim erat tortor ultricies massa turpis.
Arcu pulvinar aenean nam laoreet nulla.</blockquote><figcaption class="user-info"><p class="user-name">John Fang</p><p class="user-title">wordfaang.com</p></figcaption></figure><figure class="Testimonials-item"><img class="user-img" src="img/user-img/Jeny-Doe.svg" alt="Jeny Doe"><blockquote class="Testimonials-item-text"><p></p>Suspendisse ultrices at diam lectus nullam.
Nisl, sagittis viverra enim erat tortor ultricies massa turpis.
Arcu pulvinar aenean nam laoreet nulla.</blockquote><figcaption class="user-info"><p class="user-name">Jeny Doe</p><p class="user-title">UX Engineer</p></figcaption></figure><figure class="Testimonials-item"><img class="user-img" src="img/user-img/John-Fang.svg" alt="John Fang"><blockquote class="Testimonials-item-text"><p></p>Suspendisse ultrices at diam lectus nullam.
Nisl, sagittis viverra enim erat tortor ultricies massa turpis.
Arcu pulvinar aenean nam laoreet nulla.</blockquote><figcaption class="user-info"><p class="user-name">John Fang</p><p class="user-title">wordfaang.com</p></figcaption></figure><figure class="Testimonials-item"><img class="user-img" src="img/user-img/Jeny-Doe.svg" alt="Jeny Doe"><blockquote class="Testimonials-item-text"><p></p>Suspendisse ultrices at diam lectus nullam.
Nisl, sagittis viverra enim erat tortor ultricies massa turpis.
Arcu pulvinar aenean nam laoreet nulla.</blockquote><figcaption class="user-info"><p class="user-name">Jeny Doe</p><p class="user-title">UX Engineer</p></figcaption></figure><figure class="Testimonials-item"><img class="user-img" src="img/user-img/John-Fang.svg" alt="John Fang"><blockquote class="Testimonials-item-text"><p></p>Suspendisse ultrices at diam lectus nullam.
Nisl, sagittis viverra enim erat tortor ultricies massa turpis.
Arcu pulvinar aenean nam laoreet nulla.</blockquote><figcaption class="user-info"><p class="user-name">John Fang</p><p class="user-title">wordfaang.com</p></figcaption></figure><figure class="Testimonials-item"><img class="user-img" src="img/user-img/Jeny-Doe.svg" alt="Jeny Doe"><blockquote class="Testimonials-item-text"><p></p>Suspendisse ultrices at diam lectus nullam.
Nisl, sagittis viverra enim erat tortor ultricies massa turpis.
Arcu pulvinar aenean nam laoreet nulla.</blockquote><figcaption class="user-info"><p class="user-name">Jeny Doe</p><p class="user-title">UX Engineer</p></figcaption></figure></div></div></section><section class="Footer"> <div class="container Footer-top"> <div class="Footer-top-content"> <h4 class="heading">Try for free! </h4><p>Get limited 1 week free try our features!</p></div><div class="Footer-top-buttons"> <div class="button button-pink">Learn more </div><div class="button button-icon button-white"> <a href="#"> <span>Request Demo </span><i> <img src="img/right-arrow-purple.svg" alt=""></i></a></div></div></div><div class="container Footer-middle"> <div class="col col-1"><div class="Footer-logo"> <a href="/"><img src="img/logo.svg" alt=""></a><h4>DataWarehouse</h4></div><div class="Footer-address"><address>Warehouse Society, 234<br>Bahagia Ave Street PRBW 29281</address><a href="mailto:[email protected]">[email protected]</a><a href="tel:12323434">1-232-3434 (Main) </a></div></div><div class="col col-2"><div class="About"> <h3 class="Footer-bottom-h">About </h3><a href="#">Profile</a><a href="#">Features </a><a href="#">Careers</a><a href="#">DW News</a></div></div><div class="col col-3"> <div class="Help"><h3 class="Footer-bottom-h">Help </h3><a href="#">Support</a><a href="#">Sign up</a><a href="#">Guide</a><a href="#">Reports</a><a href="#">Q&A</a></div></div><div class="col col-4"> <h3>Social Media</h3><div class="Footer-social"><a href="#"><img src="img/social/f.svg" alt="facebook"></a><a href="#"><img src="img/social/t.svg" alt="twitter"></a><a href="#"><img src="img/social/i.svg" alt="instagram"></a></div></div></div><div class="container Footer-bottom"> <div class="Footer-bottom-content"> <p> © Datawarehouse™, 2020. All rights reserved.</p><p> Company Registration Number: 21479524.</p></div><div class="Footer-bottom-icon"> <a href="#"><img src="img/message.svg" alt="message icon"></a></div></div></section></main><script src="js/jquery-3.6.0.min.js"></script><script src="js/flickity.pkgd.min.js"> </script><script src="js/main.js"></script></body></html>