devices.css

<!DOCTYPE html> <html lang="en"> <head> <title>Tablets - Devices.css - Modern devices crafted in pure CSS</title> <meta charset="utf-8"> <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="description" content="Pure CSS iPad Pro, iPad Pro (2017), Surface Pro devices. Pure CSS tablet devices mockups. Modern tablet devices crafted in pure CSS."> <meta name="author" content="@picturepan2"> <meta property="og:url" content="https://devicescss.xyz/tablets.html"> <meta property="og:title" content="Tablets - Devices.css - Modern devices crafted in pure CSS"> <meta property="og:type" content="website"> <meta property="og:description" content="Pure CSS iPad Pro, iPad Pro (2017), Surface Pro devices. Pure CSS tablet devices mockups. Modern tablet devices crafted in pure CSS."> <meta property="og:image" content="https://devicescss.xyz/assets/social-image.jpg"> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@picturepan2"> <meta name="twitter:creator" content="@picturepan2"> <link rel="icon" href="assets/favicon.svg"> <link rel="stylesheet" href="assets/css/demo.min.css"> <link rel="stylesheet" href="assets/css/devices.min.css"> <link rel="canonical" href="https://devicescss.xyz/tablets.html"> </head> <body> <input class="rework-switch" type="checkbox" id="rework-switch" name="rework-switch" hidden> <div class="rework-container"> <label class="rework-overlay" for="rework-switch"></label> <div class="rework-brand rework-brand-fixed"><a class="brand-logo" href="https://devicescss.xyz"><span class="brand-primary">D</span><span class="brand-secondary ml-1">DEVICES</span><span class="brand-extra">.CSS</span></a> <label class="brand-homebtn c-hand" for="rework-switch"> <div class="icon-menu"></div> </label> </div> <div class="section-aside"> <div class="sidebar-container"> <div class="rework-brand"><a class="brand-logo" href="https://devicescss.xyz"><span class="brand-primary">D</span><span class="brand-secondary ml-1">DEVICES</span><span class="brand-extra">.CSS</span> <h1 class="text-assistive">Devices.css</h1></a></div> <nav class="rework-menu"><a class="menu-parent" href="phones.html">Phones</a> <ul class="menu menu-nav"> <li class="menu-item"><a class="rework-title" href="phones.html#iphone-14-pro">iPhone 14 Pro</a></li> <li class="menu-item"><a class="rework-title" href="phones.html#iphone-14">iPhone 14</a></li> <li class="menu-item"><a class="rework-title" href="phones.html#iphone-x">iPhone X</a></li> <li class="menu-item"><a class="rework-title" href="phones.html#iphone-8">iPhone 8</a></li> <li class="menu-item"><a class="rework-title" href="phones.html#the-iphone">iPhone</a></li> <li class="menu-item"><a class="rework-title" href="phones.html#google-pixel-6-pro">Google Pixel 6 Pro</a></li> <li class="menu-item"><a class="rework-title" href="phones.html#google-pixel-2-xl">Google Pixel 2 XL</a></li> <li class="menu-item"><a class="rework-title" href="phones.html#google-pixel">Google Pixel</a></li> <li class="menu-item"><a class="rework-title" href="phones.html#samsung-galaxy-s8">Samsung Galaxy S8</a></li> </ul><a class="menu-parent" href="computers.html">Computers</a> <ul class="menu menu-nav"> <li class="menu-item"><a class="rework-title" href="computers.html#macbook-pro">MacBook Pro</a></li> <li class="menu-item"><a class="rework-title" href="computers.html#imac">iMac</a></li> <li class="menu-item"><a class="rework-title" href="computers.html#macbook-pro-2018">MacBook Pro (2018)</a></li> <li class="menu-item"><a class="rework-title" href="computers.html#macbook">MacBook</a></li> <li class="menu-item"><a class="rework-title" href="computers.html#surface-book">Surface Book</a></li> <li class="menu-item"><a class="rework-title" href="computers.html#surface-studio">Surface Studio</a></li> </ul><a class="menu-parent" href="tablets.html">Tablets</a> <ul class="menu menu-nav"> <li class="menu-item"><a class="rework-title" href="tablets.html#ipad-pro">iPad Pro</a></li> <li class="menu-item"><a class="rework-title" href="tablets.html#ipad-pro-2017">iPad Pro (2017)</a></li> <li class="menu-item"><a class="rework-title" href="tablets.html#surface-pro-2017">Surface Pro</a></li> </ul><a class="menu-parent" href="watches.html">Watches</a> <ul class="menu menu-nav"> <li class="menu-item"><a class="rework-title" href="watches.html#apple-watch-ultra">Apple Watch Ultra</a></li> <li class="menu-item"><a class="rework-title" href="watches.html#apple-watch-series-8">Apple Watch Series 8</a></li> </ul><a class="menu-parent" href="accessories.html">Accessories</a> <ul class="menu menu-nav"> <li class="menu-item"><a class="rework-title" href="accessories.html#homepod">HomePod</a></li> <li class="menu-item"><a class="rework-title" href="accessories.html#pro-display-xdr">Pro Display XDR</a></li> </ul> </nav> <div class="rework-actions"> <div class="rework-action"><a class="btn btn-link btn-block" href="https://www.paypal.me/picturepan2" target="_blank" rel="noopener noreferrer">PayPal Donate</a></div> </div> </div> </div> <main class="section-main"> <div class="container grid-md"> <div class="columns"> <div class="hero-container column col-md-12"> <div class="rework-hero"> <div class="hero-content"> <h1 class="hero-title">Tablets</h1> <h2 class="hero-subtitle">Modern tablet devices crafted in pure CSS</h2> <h2 class="text-assistive">Pure CSS iPad Pro, iPad Pro (2017), Surface Pro devices. Pure CSS tablet devices mockups. Modern tablet devices crafted in pure CSS.</h2> </div> </div> </div> </div> <div class="columns"> <div class="content-container column col-md-12"> <h2 class="rework-title" id="ipad-pro">iPad Pro<a class="ml-2" href="#ipad-pro">#</a></h2> <h3 class="text-assistive">Pure CSS Apple iPad Pro, Apple iPad Pro in pure CSS</h3> <div class="rework-content"> <p> </p> </div> <div class="rework-device tablets"> <div class="dots"> <div class="dot tooltip active" style="background:#e2e3e4;" data-tooltip="device-silver (default)"></div> <div class="dot tooltip" style="background:#83878a;" data-tooltip="device-spacegray"></div> </div> <div class="device device-ipad-pro"> <div class="device-frame"><img class="device-screen" src="assets/img/bg-01.jpg" loading="lazy"></div> <div class="device-stripe"></div> <div class="device-header"></div> <div class="device-sensors"></div> <div class="device-btns"></div> <div class="device-power"></div> <div class="device-home"></div> </div> </div> </div> </div> <div class="columns"> <div class="content-container column col-md-12"> <h2 class="rework-title" id="ipad-pro-2017">iPad Pro (2017)<a class="ml-2" href="#ipad-pro-2017">#</a></h2> <h3 class="text-assistive">Pure CSS Apple iPad Pro (2017), Apple iPad Pro (2017) in pure CSS</h3> <div class="rework-content"> <p> </p> </div> <div class="rework-device tablets"> <div class="dots"> <div class="dot tooltip active" style="background:#e2e3e4;" data-tooltip="device-silver (default)"></div> <div class="dot tooltip" style="background:#f7e8dd;" data-tooltip="device-gold"></div> <div class="dot tooltip" style="background:#facfc9;" data-tooltip="device-rosegold"></div> <div class="dot tooltip" style="background:#83878a;" data-tooltip="device-spacegray"></div> </div> <div class="device device-ipad-pro-2017"> <div class="device-frame"><img class="device-screen" src="assets/img/bg-02.jpg" loading="lazy"></div> <div class="device-stripe"></div> <div class="device-header"></div> <div class="device-sensors"></div> <div class="device-btns"></div> <div class="device-power"></div> <div class="device-home"></div> </div> </div> </div> </div> <div class="docs-sponsor"> <div class="hide-md text-center"> <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div class="show-md text-center"> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> </div> <div class="columns"> <div class="content-container column col-md-12"> <h2 class="rework-title" id="surface-pro-2017">Surface Pro (2017)<a class="ml-2" href="#surface-pro-2017">#</a></h2> <h3 class="text-assistive">Pure CSS Surface Pro (2017), Surface Pro (2017) in pure CSS</h3> <div class="rework-content"> <p> </p> </div> <div class="rework-device tablets"> <div class="device device-surface-pro-2017"> <div class="device-frame"><img class="device-screen" src="assets/img/bg-09.jpg" loading="lazy"></div> <div class="device-stripe"></div> <div class="device-header"></div> <div class="device-sensors"></div> <div class="device-btns"></div> <div class="device-power"></div> <div class="device-home"></div> </div> </div> </div> </div> <div class="docs-sponsor docs-sponsor-sidebar text-center"> <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle mx-auto" style="display:inline-block;width:120px;height:240px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="5087273059"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div class="columns"> <ul class="pagination column"> <div class="page-item page-prev"><a href="computers.html"> <div class="page-item-subtitle">Previous</div> <div class="page-item-title h5">Computers</div></a></div> <div class="page-item page-next"><a href="watches.html"> <div class="page-item-subtitle">Next</div> <div class="page-item-title h5">Watches</div></a></div> </ul> </div> </div> <footer class="section-footer"> <div class="container grid-md"><span>Crafted with <span class="text-error">♥ </span><span>by </span><a href="https://twitter.com/picturepan2" target="_blank" rel="noopener noreferrer"><strong>Yan Zhu</strong></a></span><span class="ml-1 mr-1">·</span><a href="https://github.com/picturepan2/devices.css" target="_blank" rel="noopener noreferrer"><strong>GitHub</strong></a><span class="ml-1 mr-1">·</span><a href="https://www.paypal.me/picturepan2" target="_blank" rel="noopener noreferrer"><strong>PayPal Donate</strong></a></div> </footer> </main> </div> <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-2702768-16"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-2702768-16'); </script> </body> </html>