devices.css
Version:
Devices.css: Modern devices crafted in pure CSS.
244 lines (243 loc) • 15.9 kB
HTML
<html lang="en">
<head>
<title>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="Modern devices crafted in pure CSS. Pure CSS iPhone 14 Pro, iPhone 14, MacBook Pro, iPad Pro, iMac, Apple Watch Ultra, HomePod, iPhone 1st gen, and Surface family devices.">
<meta name="author" content="@picturepan2">
<meta property="og:url" content="https://devicescss.xyz">
<meta property="og:title" content="Devices.css - Modern devices crafted in pure CSS">
<meta property="og:type" content="website">
<meta property="og:description" content="Modern devices crafted in pure CSS. Pure CSS iPhone 14 Pro, iPhone 14, MacBook Pro, iPad Pro, iMac, Apple Watch Ultra, HomePod, iPhone 1st gen, and Surface family devices.">
<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">
</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-12">
<div class="rework-hero">
<div class="hero-content">
<h1 class="hero-title">DEVICES.CSS</h1>
<h2 class="hero-subtitle">Modern devices crafted in pure CSS</h2>
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column col-6 col-md-12"><a class="hero-section" href="phones.html#iphone-14-pro" target="_blank">
<div class="demo-title">iPhone<small class="label label-gray ml-2">iPhone 14 Pro</small><small class="label label-gray ml-2">iPhone 14</small></div>
<div class="demo demo-iphone-14">
<div class="device device-iphone-14">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-iphone-14.jpg"></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 class="demo demo-iphone-14-pro">
<div class="device device-iphone-14-pro">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-iphone-14-pro.jpg"></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></a></div>
<div class="column col-6 col-md-12"><a class="hero-section" href="computers.html#macbook-pro" target="_blank">
<div class="demo-title">MacBook Pro</div>
<div class="demo demo-macbook-pro">
<div class="device device-macbook-pro">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-10.jpg"></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></a></div>
<div class="column col-6 col-md-12"><a class="hero-section" href="watches.html#apple-watch-ultra" target="_blank">
<div class="demo-title">Apple Watch<small class="label label-gray ml-2">Ultra</small><small class="label label-gray ml-2">Series 8</small></div>
<div class="demo demo-apple-watch">
<div class="device device-apple-watch-s8">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-watch.jpg"></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 class="demo demo-apple-watch">
<div class="device device-apple-watch-ultra">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-watch.jpg"></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></a></div>
<div class="column col-6 col-md-12"><a class="hero-section" href="computers.html#imac" target="_blank">
<div class="demo-title">iMac</div>
<div class="demo demo-imac">
<div class="device device-imac device-blue">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-08.jpg"></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></a></div>
<div class="column col-12">
<div class="docs-sponsor">
<div class="hide-md text-center">
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- GitHub-lg--><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">
<!-- GitHub-sm--><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>
<div class="column col-6 col-md-12"><a class="hero-section" href="tablets.html#ipad-pro" target="_blank">
<div class="demo-title">iPad Pro</div>
<div class="demo demo-ipad-pro">
<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></a></div>
<div class="column col-6 col-md-12"><a class="hero-section" href="accessories.html#homepod" target="_blank">
<div class="demo-title">HomePod</div>
<div class="demo demo-homepod">
<div class="device device-homepod">
<div class="device-frame"></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></a></div>
<div class="column col-6 col-md-12"><a class="hero-section" href="phones.html#google-pixel-6-pro" target="_blank">
<div class="demo-title">Google Pixel 6 Pro<small class="label label-gray ml-2"> </small></div>
<div class="demo demo-google-pixel-6-pro">
<div class="device device-google-pixel-6-pro">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-pixel-6.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></a></div>
<div class="column col-6 col-md-12"><a class="hero-section" href="phones.html#the-iphone" target="_blank">
<div class="demo-title">iPhone<small class="label label-gray ml-2">ORIGINAL</small></div>
<div class="demo demo-the-iphone">
<div class="device device-the-iphone">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-iphone.jpg"></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></a></div>
</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>