-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
186 lines (173 loc) · 7.7 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="theme-color" content="#477E99">
<link rel="icon" href="assets/favicon.png">
<link rel="stylesheet" href="styles.css" type="text/css">
<title>Product Landing Page</title>
</head>
<body>
<div id="top"></div>
<a id="to-top" href="#top">
<img src="assets/up-arrow-key.png" alt="up arrow">
</a>
<header id="header">
<div id="product-info">
<img src="assets/qnap-logo-black.svg" alt="QNAP company logo" id="header-img">
</div>
<div class="dropdown-menu">
<input type="checkbox" id="menu">
<label for="menu">Menu</label>
<nav id="nav-bar">
<ul>
<li><a href="#product-features" class="nav-link">Features</a></li>
<li><a href="#product-snapshot" class="nav-link">Snapshot</a></li>
<li><a href="#video-container" class="nav-link">How It Works</a></li>
<li><a href="#gallery" class="nav-link">Gallery</a></li>
<li><a href="#product-warranty" class="nav-link">Warranty</a></li>
</ul>
</nav>
<a href="#" class="nav-link btn">Buy</a>
</div>
</header>
<main>
<div id="welcome">
<div class="welcome-text">
<h1>TS-253B</h1>
<p>Quad-Core Network Attached Storage</p>
</div>
<div class="welcome-image">
<img src="assets/gallery/3.png" alt="TS-253B with its media controller">
</div>
<div class="welcome-badges">
<img src="assets/badges/269_2.png" alt="HDMI badge">
<img src="assets/badges/269_3.png" alt="Ultra HD badge">
<img src="assets/badges/269_4.png" alt="Intel Celeron badge">
<img src="assets/badges/269_5.png" alt="DLNA badge">
<img src="assets/badges/Microsoft_Azure_Certified.png" alt="Microsoft Azure Certified badge">
</div>
</div>
<div id="product-introduction">
<div class="intro-text">
<p>The TS-253B comes with a sleek new look, featuring an OLED panel and two capacitive touch buttons. The TS-253B also features a PCIe port for boosting the potential applications of your NAS: the QNAP QM2 expansion card can be installed for adding an M.2 SSD cache/10GbE connectivity, a compatible wireless card can be installed to use the TS-253B as a wireless access point, and a USB 3.2 Gen 2 card can be added for easier backup to/from multiple external storage devices. With a USB Type-C QuickAccess port and a SD card slot, the TS-253B simplifies transferring and sharing files without needing a network connection. The TS-253B also provides feature-rich multimedia functionality, such as 4K @30Hz video playback and real-time transcoding.</p>
</div>
<div class="intro-image">
<img src="assets/gallery/6.png" alt="TS-253B with its trays open">
</div>
</div>
<div id="product-features">
<h2>Features</h2>
<div class="container">
<div>
<img src="assets/features/pci_card-512.png" alt="pcie icon">
<h3>Extend NAS functionality with the PCIe Slot</h3>
</div>
<div>
<img src="assets/features/39-512.webp" alt="touch button icon">
<h3>OLED panel with capacitive touch buttons</h3>
</div>
<div>
<img src="assets/features/usb-c-512.png" alt="usb-c icon">
<h3>Directly access files with USB-C QuickAccess</h3>
</div>
<div>
<img src="assets/features/data-backup.png" alt="backup and sync icon">
<h3>Data backup, recovery, and synchronization</h3>
</div>
<div>
<img src="assets/features/5447674-vpn-application-vpn-icon-with-png-and-vector-format-for-free-vpn-png-512_512_preview.png" alt="vpn icon">
<h3>Secure access with VPN & Proxy Server</h3>
</div>
</div>
</div>
<div id="product-snapshot">
<h2>Why is QNAP's snapshot support better?</h2>
<p>Snapshots are a must-have feature for modern storage systems. QNAP's snapshots help protect your folders, files, and iSCSI LUNs. In the event of malware attacks or unwanted changes, your stored data can be quickly reverted and restored to a specific point in time to ensure continuity.</p>
<p>Check out the difference between QNAP 's snapshot support compared to competitor products.</p>
<div class="table">
<table>
<thead>
<th>Snapshot Application</th>
<th>QNAP</th>
<th>Competitors with BTRF</th>
<th>Other competitors</th>
</thead>
<tbody>
<tr>
<th>Block-based iSCSI LUN<br>(Thick Provisioning and Thin Provisioning)</th>
<td><span>✔️</span></td>
<td><span>❌</span></td>
<td><span>❌</span></td>
</tr>
<tr>
<th>File-based iSCSI LUN<br>(Thin Provisioning)</th>
<td><span>✔️</span><br>
<p>Protected by the volume snapshot, the process is done within seconds</p>
</td>
<td><span>❌</span></td>
<td><span>❌</span></td>
</tr>
<tr>
<th>File-based iSCSI LUN<br>(Thick Provisioning)</th>
<td><span>✔️</span><br>
<p>Protected by the volume snapshot, the process is done within seconds</p>
</td>
<td><span>✔️</span></td>
<td><span>❌</span></td>
</tr>
<tr>
<th>Volume<br>(Multiple Folders)</th>
<td><span>✔️</span></td>
<td><span>❌</span></td>
<td><span>❌</span></td>
</tr>
<tr>
<th>Shared Folder</th>
<td><span>✔️</span><br>
<p>With Snapshot Shared Folder </p>
</td>
<td><span>✔️</span></td>
<td><span>❌</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="video-container">
<h2>See how it works</h2>
<iframe id="video" src="https://www.youtube.com/embed/HrE7_FSsDKo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="gallery">
<img src="assets/gallery/1.png" alt="QNAP TS-253B product shot">
<img src="assets/gallery/4.png" alt="QNAP TS-253B product shot">
<img src="assets/gallery/7.png" alt="QNAP TS-253B product shot">
<img src="assets/gallery/9.png" alt="QNAP TS-253B product shot">
<img src="assets/gallery/8.png" alt="QNAP TS-253B product shot">
<img src="assets/gallery/5.png" alt="QNAP TS-253B product shot">
</div>
<div id="product-warranty">
<img src="assets/warranty-img_for_old.png" alt="QNAP 5-years warranty artwork">
<div>
<h2>Extend hardware warranty up to 5 years</h2>
<p>The TS-253B is backed by a 2-year warranty at no extra cost. If needed, you can purchase a warranty extension that increases your coverage up to 5 years.</p>
</div>
</div>
</main>
<aside>
<h2>Sign up for our newsletter</h2>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
<br>
<input type="submit" value="Join" id="submit" class="btn">
</form>
</aside>
<footer>
<p>© Copyright 2020 <span>|</span> Webpage mady by SepSol</p>
<!-- <hr> -->
<p>This is a mock product landing page, inspired by one of QNAP products.</p>
</footer>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>