├── package.json ├── images ├── img1.jpg ├── img2.jpg ├── img3.jpg ├── img4.jpg ├── img5.jpg ├── logo.png ├── mouse1.png ├── mouse2.png ├── mouse3.png ├── mouse4.png ├── mouse5.png ├── mouse6.png └── background.jpg ├── slider.js ├── script.js ├── README.md ├── responsive.css ├── style.css └── index.html /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "swiper": "^8.4.5" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /images/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/logitech-pro-website/HEAD/images/img1.jpg -------------------------------------------------------------------------------- /images/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/logitech-pro-website/HEAD/images/img2.jpg -------------------------------------------------------------------------------- /images/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/logitech-pro-website/HEAD/images/img3.jpg -------------------------------------------------------------------------------- /images/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/logitech-pro-website/HEAD/images/img4.jpg -------------------------------------------------------------------------------- /images/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/logitech-pro-website/HEAD/images/img5.jpg -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/logitech-pro-website/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/mouse1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/logitech-pro-website/HEAD/images/mouse1.png -------------------------------------------------------------------------------- /images/mouse2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/logitech-pro-website/HEAD/images/mouse2.png -------------------------------------------------------------------------------- /images/mouse3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/logitech-pro-website/HEAD/images/mouse3.png -------------------------------------------------------------------------------- /images/mouse4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/logitech-pro-website/HEAD/images/mouse4.png -------------------------------------------------------------------------------- /images/mouse5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/logitech-pro-website/HEAD/images/mouse5.png -------------------------------------------------------------------------------- /images/mouse6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/logitech-pro-website/HEAD/images/mouse6.png -------------------------------------------------------------------------------- /images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/logitech-pro-website/HEAD/images/background.jpg -------------------------------------------------------------------------------- /slider.js: -------------------------------------------------------------------------------- 1 | // Swiper 2 | const swiper = new Swiper(".gallerySwiper", { 3 | slidesPerView: 1, 4 | spaceBetween: 20, 5 | pagination: { 6 | el: ".swiper-pagination", 7 | clickable: true, 8 | }, 9 | breakpoints: { 10 | 800: { 11 | slidesPerView: 3, 12 | spaceBetween: 30, 13 | }, 14 | 600: { 15 | slidesPerView: 2, 16 | spaceBetween: 20, 17 | }, 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Navbar 2 | const menu = document.querySelector(".menu"); 3 | const menuBtn = document.querySelector(".menu-btn"); 4 | 5 | menuBtn.addEventListener("click", function () { 6 | menu.classList.toggle("menu-open"); 7 | }); 8 | 9 | // Scroll events 10 | const pagination = document.querySelectorAll(".pagination li a"); 11 | const sections = document.querySelectorAll(".main-section"); 12 | const offset = 100; 13 | 14 | for (let i = 0; i < sections.length; i++) { 15 | console.log(i); 16 | window.addEventListener("scroll", () => { 17 | if ( 18 | window.scrollY > sections[i].offsetTop - offset && 19 | window.scrollY < sections[i].offsetTop + sections[i].offsetHeight - offset 20 | ) { 21 | pagination.forEach((pag) => { 22 | pag.classList.remove("active"); 23 | }); 24 | pagination[i].classList.add("active"); 25 | } 26 | }); 27 | } 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Logitech Product Website 2 | 3 | ![logitech-web](https://i.imgur.com/wqA9uk9.png) 4 | 5 | This repository contains the code for the Logitech Product Website, a responsive and modern website designed to showcase Logitech's products and their features. The website is built using HTML, CSS, and JavaScript, and it uses the Bootstrap framework for its layout and styling. 6 | 7 | ## Table of Contents 8 | 9 | - Installation 10 | - Usage 11 | - Contributing 12 | - License 13 | 14 | ## Installation 15 | 16 | To run this website locally, you need to have Git and a web browser installed on your machine. You can then clone this repository by running the following command in your terminal: 17 | 18 | ```bash 19 | git clone https://github.com/Andrew-Tsegaye/logitech-product-website.git 20 | 21 | ``` 22 | 23 | After cloning the repository, you can open the `index.html` file in your web browser to view the website. 24 | 25 | ## Usage 26 | 27 | The Logitech Product Website is designed to be a showcase of Logitech's products and their features. The website is responsive, so it looks great on desktop, tablet, and mobile devices. You can navigate through the website using the menu bar at the top, which contains links to the different sections of the website. 28 | 29 | The website contains several pages, including a home page, a products page, a features page, and a contact page. Each page contains information about Logitech's products and their features, as well as images and videos to showcase the products. 30 | 31 | ## Contributing 32 | 33 | Contributions are always welcome! 34 | 35 | If you would like to contribute to this project, you can fork this repository and make your changes on your own fork. Once you have made your changes, you can create a pull request to merge your changes into the main repository. 36 | 37 | Please make sure to follow the [Contributing Guidlines](https://github.blog/2012-09-17-contributing-guidelines/) when making your changes. 38 | 39 | ## License 40 | 41 | This project is licensed under the [MIT License](https://choosealicense.com/licenses/mit/). You are free to use, modify, and distribute this code as long as you give credit to the original author [Andrew Tsegaye](github.com/Andrew-Tsegaye). 42 | -------------------------------------------------------------------------------- /responsive.css: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 1000px) { 2 | .header-content { 3 | flex-direction: column; 4 | } 5 | 6 | .specs .container > div { 7 | grid-template-columns: 1fr; 8 | } 9 | 10 | .header-images { 11 | margin-top: 5em; 12 | justify-content: center; 13 | } 14 | 15 | .header-images img { 16 | width: 30vh; 17 | margin: 0; 18 | } 19 | } 20 | 21 | @media screen and (min-width: 1000px) { 22 | .title { 23 | font-size: 4.5em; 24 | } 25 | } 26 | 27 | @media screen and (max-width: 900px) { 28 | .social-media { 29 | display: none; 30 | } 31 | 32 | .pagination { 33 | background: #111; 34 | top: unset; 35 | bottom: 0; 36 | left: 50%; 37 | transform: translateX(50%); 38 | border: none; 39 | border-top: 1px solid var(--secondary); 40 | height: 0; 41 | width: 100%; 42 | } 43 | 44 | .pagination ul { 45 | display: flex; 46 | gap: 2em; 47 | } 48 | } 49 | 50 | @media screen and (max-width: 800px) { 51 | .menu { 52 | background-color: #17181a; 53 | position: absolute; 54 | top: 0; 55 | left: 0; 56 | width: 100%; 57 | height: 0; 58 | padding: 0 4.5em; 59 | margin-top: 5.5em; 60 | overflow: hidden; 61 | z-index: 3; 62 | transition: 0.4s; 63 | } 64 | 65 | /* Toggle class used later on JAVASCRIPT */ 66 | .nav-bar .menu-open { 67 | height: 13.5em; 68 | } 69 | 70 | .menu li { 71 | display: flex; 72 | justify-content: center; 73 | align-items: center; 74 | margin: 1.5em 0; 75 | } 76 | 77 | .menu-btn { 78 | display: block; 79 | } 80 | 81 | .about .container { 82 | flex-direction: column; 83 | } 84 | 85 | .product .info > div { 86 | grid-template-columns: 1fr; 87 | } 88 | 89 | .product .info-text { 90 | border: none; 91 | padding: 0; 92 | } 93 | 94 | .product img { 95 | margin: 0; 96 | justify-self: center; 97 | } 98 | 99 | .info-text::after, 100 | .info-text::before { 101 | display: none; 102 | } 103 | } 104 | 105 | @media screen and (max-width: 700px) { 106 | html { 107 | font-size: 14px; 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* ----- General Styling ----- */ 2 | :root { 3 | --accent: #16feff; 4 | --primary: #fff; 5 | --secondary: #afafb0; 6 | } 7 | 8 | html { 9 | scroll-behavior: smooth; 10 | } 11 | 12 | body { 13 | font-family: sans-serif; 14 | background-color: #111; 15 | } 16 | 17 | * { 18 | margin: 0; 19 | padding: 0; 20 | box-sizing: border-box; 21 | } 22 | 23 | h1, 24 | h2, 25 | h3, 26 | h4, 27 | h5, 28 | a { 29 | color: var(--primary); 30 | } 31 | 32 | h2 { 33 | font-size: 2.3em; 34 | text-transform: uppercase; 35 | } 36 | 37 | h3 { 38 | font-size: 1.8em; 39 | } 40 | 41 | a { 42 | text-decoration: none; 43 | transform: 0.3s; 44 | } 45 | 46 | a:hover { 47 | color: var(--accent); 48 | } 49 | 50 | p { 51 | color: var(--secondary); 52 | line-height: 25px; 53 | max-width: 30em; 54 | margin: 1.5em 0; 55 | font-size: 0.9em; 56 | } 57 | 58 | .container { 59 | width: 80vw; 60 | max-width: 1250px; 61 | margin: 0 auto; 62 | } 63 | 64 | section, 65 | footer { 66 | padding: 6em 2.5em; 67 | } 68 | /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ 69 | /* ======== HEADER ========= */ 70 | /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ 71 | header { 72 | background: url(./images/background.jpg) no-repeat center; 73 | background-size: cover; 74 | padding: 1.5em 1.5em 2.5em 1.5em; 75 | } 76 | 77 | .nav-bar { 78 | display: flex; 79 | justify-content: space-between; 80 | align-items: center; 81 | z-index: 9; 82 | margin-bottom: 6em; 83 | } 84 | 85 | .brand img { 86 | width: 8em; 87 | } 88 | 89 | ul { 90 | list-style: none; 91 | } 92 | 93 | .menu li { 94 | display: inline-block; 95 | margin: 0 0.8em; 96 | font-size: 1.1em; 97 | } 98 | 99 | .menu-btn { 100 | color: var(--primary); 101 | font-size: 1.2em; 102 | cursor: pointer; 103 | transition: 0.3s; 104 | display: none; 105 | } 106 | 107 | .menu-btn:hover { 108 | color: var(--accent); 109 | } 110 | 111 | .header-content { 112 | display: flex; 113 | gap: 2em; 114 | } 115 | 116 | .header-images { 117 | display: flex; 118 | gap: 3em; 119 | } 120 | 121 | .header-images div { 122 | position: relative; 123 | } 124 | 125 | .header-images img { 126 | width: 17vw; 127 | filter: drop-shadow(0 0 1.5em rgb(0, 0, 0)); 128 | } 129 | 130 | .img1 img { 131 | margin-bottom: 4em; 132 | } 133 | 134 | .img2 img { 135 | margin-top: 4em; 136 | } 137 | 138 | .title { 139 | font-size: 4em; 140 | } 141 | 142 | .sub-heading { 143 | color: var(--primary); 144 | font-weight: bold; 145 | text-transform: uppercase; 146 | } 147 | 148 | .btn { 149 | display: inline-block; 150 | padding: 0.8em 2em; 151 | border: 1px var(--accent) solid; 152 | border-radius: 5em; 153 | text-transform: uppercase; 154 | cursor: pointer; 155 | font-size: 0.9em; 156 | font-weight: bold; 157 | min-width: 10em; 158 | text-align: center; 159 | } 160 | 161 | .spec { 162 | display: inline-block; 163 | font-size: 0.9em; 164 | color: var(--secondary); 165 | padding: 0.5em 0; 166 | border-bottom: 1px var(--secondary) solid; 167 | position: absolute; 168 | } 169 | 170 | .img1 .spec { 171 | right: -2em; 172 | top: -3em; 173 | } 174 | 175 | .img2 .spec { 176 | top: 1em; 177 | left: 2em; 178 | } 179 | 180 | .spec::before { 181 | content: ""; 182 | background: var(--secondary); 183 | width: 6em; 184 | height: 1px; 185 | position: absolute; 186 | bottom: -2.2em; 187 | left: 50%; 188 | } 189 | 190 | .img1 .spec::before { 191 | transform: translateX(-50%) rotate(-45deg); 192 | } 193 | 194 | .img2 .spec::before { 195 | transform: translateX(-50%) rotate(45deg); 196 | } 197 | 198 | .dot { 199 | position: absolute; 200 | bottom: -5em; 201 | height: 1.8em; 202 | width: 1.8em; 203 | border: 1px var(--primary) solid; 204 | border-radius: 50%; 205 | animation: expand 1s ease-in-out infinite; 206 | } 207 | 208 | .img1 .dot { 209 | left: 31%; 210 | } 211 | 212 | .img2 .dot { 213 | left: 65%; 214 | } 215 | 216 | .dot::before, 217 | .pagination a::before { 218 | content: ""; 219 | background: var(--accent); 220 | width: 50%; 221 | height: 50%; 222 | position: absolute; 223 | top: 50%; 224 | left: 50%; 225 | transform: translate(-50%, -50%); 226 | border-radius: inherit; 227 | } 228 | /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ 229 | /* ======== PAGINATION & SOCIAL MEDIA SIDEBARS ========= */ 230 | /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ 231 | .pagination, 232 | .social-media { 233 | position: fixed; 234 | top: 50%; 235 | transform: translateY(-50%); 236 | width: 4em; 237 | height: 70%; 238 | padding: 2em; 239 | display: flex; 240 | justify-content: center; 241 | align-items: center; 242 | z-index: 9; 243 | } 244 | 245 | .pagination { 246 | left: 0; 247 | border-right: 1px solid var(--secondary); 248 | } 249 | 250 | .pagination a { 251 | display: block; 252 | position: relative; 253 | height: 1.3em; 254 | width: 1.3em; 255 | border-radius: 50%; 256 | margin: 2em 0; 257 | } 258 | 259 | .pagination a::before { 260 | width: 0.5em; 261 | height: 0.5em; 262 | background: var(--primary); 263 | } 264 | 265 | .pagination a:hover:before { 266 | background: var(--accent); 267 | } 268 | 269 | .pagination .active { 270 | border: 1px solid var(--primary); 271 | } 272 | 273 | .pagination .active::before { 274 | background: var(--accent); 275 | } 276 | 277 | .social-media { 278 | right: 0; 279 | border-left: 1px var(--secondary) solid; 280 | } 281 | 282 | .social-media li { 283 | font-size: 1.1em; 284 | margin: 2em 0; 285 | } 286 | /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ 287 | /* ======== ABOUT SECTION ========= */ 288 | /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ 289 | .about { 290 | background: linear-gradient(135deg, #252628, #17181a); 291 | } 292 | 293 | .about .container { 294 | display: flex; 295 | justify-content: space-between; 296 | align-items: center; 297 | gap: 2.5em; 298 | } 299 | 300 | .about img { 301 | width: 50%; 302 | filter: drop-shadow(0 0 1.5em rgb(0, 0, 0, 0.5)); 303 | } 304 | /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ 305 | /* ======== SWIPER SECTION ========= */ 306 | /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ 307 | .slide { 308 | max-width: 1250px; 309 | margin: 0 auto; 310 | position: relative; 311 | padding: 4.5em; 312 | } 313 | 314 | .swiper { 315 | width: 100%; 316 | height: 100%; 317 | } 318 | 319 | .swiper-slide { 320 | text-align: center; 321 | background: #17181a; 322 | height: 20em; 323 | display: flex; 324 | justify-content: center; 325 | align-items: center; 326 | } 327 | 328 | .swiper-slide img:only-child { 329 | display: block; 330 | height: 243px; 331 | /* width: 243px; */ 332 | width: 100%; 333 | object-fit: cover; 334 | } 335 | 336 | .swiper-pagination-bullet-active { 337 | background: var(--accent); 338 | } 339 | 340 | /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ 341 | /* ======== PRODUCT SECTION ========= */ 342 | /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ 343 | .product { 344 | background: linear-gradient(135deg, #303134, #1f2123); 345 | } 346 | 347 | .product h2, 348 | .specs h2, 349 | .slide h2 { 350 | text-align: center; 351 | margin-bottom: 2em; 352 | } 353 | 354 | .product .info > div { 355 | display: grid; 356 | grid-template-columns: 1fr 1fr; 357 | } 358 | 359 | .product img { 360 | width: 20em; 361 | justify-self: right; 362 | margin-right: 6em; 363 | padding: 6em 0; 364 | } 365 | 366 | .info-text { 367 | padding-left: 6em; 368 | border-left: 1px var(--accent) solid; 369 | display: flex; 370 | justify-content: center; 371 | align-items: flex-start; 372 | flex-direction: column; 373 | position: relative; 374 | } 375 | 376 | .info-text::after, 377 | .info-text::before { 378 | content: ""; 379 | position: absolute; 380 | top: 50%; 381 | transform: translateY(-50%); 382 | border-radius: 50%; 383 | } 384 | 385 | .info-text::before { 386 | background: var(--accent); 387 | width: 0.8em; 388 | height: 0.8em; 389 | border-radius: 50%; 390 | left: -0.43em; 391 | } 392 | 393 | .info-text::after { 394 | border: 1px var(--primary) solid; 395 | width: 1.8em; 396 | height: 1.8em; 397 | border-radius: 50%; 398 | left: -0.97em; 399 | } 400 | 401 | .product .btn { 402 | text-align: center; 403 | } 404 | 405 | /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ 406 | /* ======== SPECS SECTION ========= */ 407 | /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ 408 | .specs { 409 | background: #17181a; 410 | } 411 | 412 | .specs .container > div { 413 | display: grid; 414 | grid-template-columns: 1fr 1fr 1fr; 415 | grid-gap: 1em; 416 | } 417 | 418 | .specs h4 { 419 | font-size: 1.5em; 420 | } 421 | 422 | .specs h5 { 423 | font-size: 1.2em; 424 | } 425 | 426 | .specs li { 427 | color: var(--secondary); 428 | font-size: 0.9em; 429 | margin: 0.5em 0; 430 | } 431 | 432 | .specs span { 433 | color: var(--primary); 434 | font-weight: bold; 435 | } 436 | 437 | /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ 438 | /* ======== FOOTER SECTION ========= */ 439 | /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ 440 | footer { 441 | text-align: center; 442 | } 443 | 444 | .footer-menu { 445 | margin-bottom: 2em; 446 | } 447 | 448 | .footer-menu li { 449 | margin: 1em 0; 450 | font-size: 1.2em; 451 | } 452 | 453 | .footer-social li { 454 | display: inline-block; 455 | margin: 0 0.5em; 456 | } 457 | 458 | .footer-social li { 459 | color: var(--accent); 460 | font-size: 1.4em; 461 | } 462 | 463 | .footer-social li:hover { 464 | color: var(--primary); 465 | } 466 | 467 | @keyframes expand { 468 | 50% { 469 | transform: scale(1.1); 470 | } 471 | 100% { 472 | transform: scale(1); 473 | } 474 | } 475 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Logitech Product 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 72 | 73 | 74 | 75 | 83 |
84 | 95 |
96 | 97 | 98 | 99 |
100 |
101 | 102 |
103 |

Make Your Play

104 |

105 | Your power, your control. fet ae We eras td Royale gameplay with the 106 | strategically POST co eke td Gaming Mouse. 15 programmable controls 107 | join forces with ultra-fast LIGHTSPEED dual connectivity and the 108 | Correa deme Clan as It's a multifaceted battle weapon that let's you 109 | play longer, play better and make your play. 110 |

111 | Buy 112 |
113 |
114 |
115 | 116 | 117 | 118 |
119 |

Gallery

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 |

Product

147 |
148 |
149 | 150 |
151 |

15 Programmable Controls

152 |

153 | Program, refine, and win. Master your arsenal in Battle Royale, 154 | MMO, and MOBA gameplay with tactically positioned controls in 155 | optimal quantity and configuration. Refine and align keybids, 156 | perfect your commands, and win. 157 |

158 |
159 |
160 |
161 |
162 |
163 | 164 |
165 |

Dua connectivity with lightspeed

166 |

167 | One click lets you toggle between ultra-fast 1ms LIGHTSPEED 168 | wireless and Bluetooth®-even across two separate machines. 169 |

170 |
171 |
172 |
173 |
174 |
175 | 176 |
177 |

Hero 16K sensor

178 |

179 | One click lets you toggle between ultra-fast 1ms LIGHTSPEED 180 | wireless and Bluetooth®-even across two separate machines. 181 |

182 |
183 |
184 |
185 |
186 |
187 | 188 |
189 |

Spin. Retchet. Switch

190 |

191 | A durable metal scroll wheel switches between hyper-fast and 192 | retcheted through menus, ratchet through weapon and spell 193 | selections, or apply keybinds to up and down inputs. 194 |

195 |
196 |
197 |
198 |
199 |
200 | 201 | 202 | 203 |
204 |
205 |

Specifications

206 |
207 |
    208 |

  • Physical specifications

    • 209 |
    210 |
  • Height: 130 Mm
    • 211 |
  • Width: 80 Mm
    • 212 |
  • Depth: 45 Mm
    • 213 |
  • Weight: 135 G,
    • 214 |
  • with AA battery
    • 215 |
    216 |
  • 217 |

    Tracking

    218 |
    • 219 |
  • Sensor: HERO™16K
    • 220 |
    221 |
  • Revolution100-16,000 DPI
    • 222 |
  • Zero Smoothing/Acceleration/Filtering
    • 223 |
  • Max. acceleration: 40 G
    • 224 |
  • Max. speed: 400 IPS
    • 225 |
  • Responsiveness
    • 226 |
  • USB Data Format: 16 Bits/Axis
    • 227 |
228 |
    229 |
  • 230 |

    Technical specifications

    231 |
    • 232 |
    233 |
  • LIGHTSPEED Wireless report rate: 100 Hz (1ms)
    • 234 |
  • 235 | Bluetooth® report rate: 888-133 Hz (7.5-11.25 ms) 236 |
    • 237 |
  • Microprocessor: 32-bit ARM Durablity
    • 238 |
  • PTFE Feet: 250-km range
    • 239 |
    Battery life
    240 |
  • 241 | LIGHTSPEED-mode: up to 240 hours (non-stop gaming) 242 |
    • 243 |
  • 244 | Bluetooth® mode: up to 5.5 months (standard 245 | usage) 246 |
    • 247 |
248 |
    249 |

  • Other features

    • 250 |
  • Dual mode Hyper-fast scroll Wheel
    • 251 |
  • Onboard Memory
    • 252 |
  • Mechanincal Button Transioning System
    • 253 |
    254 |
    255 |
  • 256 |

    Requirements

    257 |
    • 258 |
  • 259 | LIGHTSPEED mode: USB Port And Windows® 7 Or 260 | Later, MacOS® 10,12 or Later, Chrome OS™. Or 261 | Android™ 3.2 Or Later 262 |
    • 263 |
  • 264 | Bluetooth® mode: Bluetooth®-Enabled with 265 | Windows® 8 Or Later, MacOS® 10,12 or Later, Chrome 266 | OS™. Or Android™ 5.0 Or Later internet access for 267 | Logitech G HUB software Download 268 |
    • 269 |
270 |
271 |
272 |
273 | 274 | 275 | 276 | 297 | 298 | 299 | 300 | 301 | 302 | --------------------------------------------------------------------------------