devices.css
Version:
Devices.css: Modern devices crafted in pure CSS.
407 lines (387 loc) • 16.6 kB
HTML
<html lang="en">
<head>
<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">
<title>Devices.css - Modern devices crafted in pure CSS</title>
<!-- Spectre.css CSS -->
<link rel="stylesheet" href="dist/spectre.min.css">
<link rel="stylesheet" href="dist/devices.css">
<link rel="stylesheet" href="dist/demo.css">
</head>
<body>
<div class="section section-hero">
<div id="overview" class="grid-hero container grid-lg text-center">
<h1>Devices.css</h1>
<h2>Modern devices crafted in pure CSS. The first are iPhone X and iPhone 8, and more modern devices are coming.</h2>
<p>
<a href="#content" class="btn btn-primary btn-lg">Demo</a>
<a href="https://github.com/picturepan2/devices.css" target="_blank" class="btn btn-primary btn-lg">GitHub</a>
</p>
<p class="text-gray">Latest version: <span class="version"></span></p>
<p><a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a></p>
</div>
</div>
<div class="section section-ad">
<div class="hide-md">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- GitHub-lg -->
<ins class="adsbygoogle"
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">
<!-- 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 id="content" class="section section-device">
<div id="iphone-x" class="container grid-xl text-center">
<h3 class="s-title"><a href="#iphone-x" class="anchor" aria-hidden="true">#</a>iPhone X</h3>
<div class="columns">
<div class="column col-12">
<div class="device device-iphone-x">
<div class="device-frame">
<video class="device-screen" muted="muted" autoplay loop >
<source src="src/video/bg-01.mp4" type="video/mp4">
</video>
</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>
<div class="section section-device">
<div id="iphone-8" class="container grid-xl text-center">
<h3 class="s-title"><a href="#iphone-8" class="anchor" aria-hidden="true">#</a>iPhone 8</h3>
<div class="columns">
<div class="column col-12">
<div class="dots">
<div class="dot tooltip" 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:#9b9ba0;" data-tooltip="device-spacegray"></div>
</div>
</div>
<div class="column col-12">
<div class="device device-iphone-8 device-gold">
<div class="device-frame">
<img class="device-screen" src="src/img/bg-01.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>
</div>
</div>
</div>
</div>
<div class="section section-device">
<div id="google-pixel-2-xl" class="container grid-xl text-center">
<h3 class="s-title"><a href="#google-pixel-2-xl" class="anchor" aria-hidden="true">#</a>Google Pixel 2 XL</h3>
<div class="columns">
<div class="column col-12">
<div class="device-2x">
<div class="device device-google-pixel-2-xl">
<div class="device-frame">
<img class="device-screen" src="src/img/bg-06.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>
</div>
</div>
</div>
</div>
</div>
<div class="section section-device">
<div id="google-pixel" class="container grid-xl text-center">
<h3 class="s-title"><a href="#google-pixel" class="anchor" aria-hidden="true">#</a>Google Pixel</h3>
<div class="columns">
<div class="column col-12">
<div class="dots">
<div class="dot tooltip" style="background:#e2e3e4;" data-tooltip="device-silver (default)"></div>
<div class="dot tooltip" style="background:#6a6967;" data-tooltip="device-black"></div>
<div class="dot tooltip" style="background:#7695ff;" data-tooltip="device-blue"></div>
</div>
</div>
<div class="column col-12">
<div class="device device-google-pixel">
<div class="device-frame">
<img class="device-screen" src="src/img/bg-06.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>
</div>
</div>
</div>
</div>
<div class="section section-device">
<div id="galaxy-s8" class="container grid-xl text-center">
<h3 class="s-title"><a href="#galaxy-s8" class="anchor" aria-hidden="true">#</a>Samsung Galaxy S8</h3>
<div class="columns">
<div class="column col-12">
<div class="dots">
<div class="dot tooltip" style="background:#cfcfcf;" data-tooltip="device-black (default)"></div>
<div class="dot tooltip" style="background:#a3c5e8;" data-tooltip="device-blue"></div>
</div>
</div>
<div class="column col-12">
<div class="device device-galaxy-s8 device-blue">
<div class="device-frame">
<img class="device-screen" src="src/img/bg-04.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>
</div>
</div>
</div>
</div>
<div class="section section-ad">
<div class="hide-md">
<!-- GitHub-lg -->
<ins class="adsbygoogle"
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">
<!-- 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 class="section section-device">
<div id="ipad-pro" class="container grid-xl text-center">
<h3 class="s-title"><a href="#ipad-pro" class="anchor" aria-hidden="true">#</a>iPad Pro</h3>
<div class="columns">
<div class="column col-12">
<div class="dots">
<div class="dot tooltip" 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:#9b9ba0;" data-tooltip="device-spacegray"></div>
</div>
</div>
<div class="column col-12">
<div class="device device-ipad-pro device-gold">
<div class="device-frame">
<img class="device-screen" src="src/img/bg-02.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>
</div>
</div>
</div>
</div>
<div class="section section-device">
<div id="surface-pro" class="container grid-xl text-center">
<h3 class="s-title"><a href="#surface-pro" class="anchor" aria-hidden="true">#</a>Surface Pro</h3>
<div class="columns">
<div class="column col-12">
<div class="device device-surface-pro">
<div class="device-frame">
<img class="device-screen" src="src/img/bg-09.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>
</div>
</div>
</div>
</div>
<div class="section section-device">
<div id="surface-book" class="container grid-xl text-center">
<h3 class="s-title"><a href="#surface-book" class="anchor" aria-hidden="true">#</a>Surface Book</h3>
<div class="columns">
<div class="column col-12">
<div class="device device-surface-book">
<div class="device-frame">
<img class="device-screen" src="src/img/bg-09.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>
</div>
</div>
</div>
</div>
<div class="section section-device">
<div id="macbook" class="container grid-xl text-center">
<h3 class="s-title"><a href="#macbook" class="anchor" aria-hidden="true">#</a>MacBook</h3>
<div class="columns">
<div class="column col-12">
<div class="dots">
<div class="dot tooltip" 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>
<div class="column col-12">
<div class="device device-macbook device-spacegray">
<div class="device-frame">
<img class="device-screen" src="src/img/bg-07.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>
</div>
</div>
</div>
</div>
<div class="section section-device">
<div id="macbook-pro" class="container grid-xl text-center">
<h3 class="s-title"><a href="#macbook-pro" class="anchor" aria-hidden="true">#</a>MacBook Pro</h3>
<div class="columns">
<div class="column col-12">
<div class="dots">
<div class="dot tooltip" style="background:#e2e3e4;" data-tooltip="device-silver (default)"></div>
<div class="dot tooltip" style="background:#83878a;" data-tooltip="device-spacegray"></div>
</div>
</div>
<div class="column col-12">
<div class="device device-macbook-pro device-spacegray">
<div class="device-frame">
<img class="device-screen" src="src/img/bg-06.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>
</div>
</div>
</div>
</div>
<div class="section section-device">
<div id="surface-studio" class="container grid-xl text-center">
<h3 class="s-title"><a href="#surface-studio" class="anchor" aria-hidden="true">#</a>Surface Studio</h3>
<div class="columns">
<div class="column col-12">
<div class="device device-surface-studio">
<div class="device-frame">
<img class="device-screen" src="src/img/bg-09.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>
</div>
</div>
</div>
</div>
<div class="section section-device">
<div id="imac-pro" class="container grid-xl text-center">
<h3 class="s-title"><a href="#imac-pro" class="anchor" aria-hidden="true">#</a>iMac Pro</h3>
<div class="columns">
<div class="column col-12">
<div class="device device-imac-pro">
<div class="device-frame">
<img class="device-screen" src="src/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>
</div>
</div>
</div>
</div>
<div class="section section-device">
<div id="apple-watch" class="container grid-xl text-center">
<h3 class="s-title"><a href="#apple-watch" class="anchor" aria-hidden="true">#</a>Apple Watch</h3>
<div class="columns">
<div class="column col-12">
<div class="device device-apple-watch">
<div class="device-frame">
<img class="device-screen" src="src/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>
</div>
</div>
</div>
</div>
<div class="section section-ads bg-gray">
<div class="docs-ad docs-ad-sidebar text-center">
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
</div>
</div>
<footer class="section section-footer">
<div id="copyright" class="grid-footer container grid-lg">
<p><a href="https://github.com/picturepan2/devices.css" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Spectre.css</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
<p>Code with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/devices.css/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
</div>
</footer>
<!-- Google Analytics tracking code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2702768-8', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>