Skip to content

Commit c997aec

Browse files
picturepan2picturepan2
committed
Update
1 parent 8aca21c commit c997aec

File tree

14 files changed

+516
-216
lines changed

14 files changed

+516
-216
lines changed

‎docs/accessories.html‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -136,11 +136,6 @@ <h3 class="text-assistive">Pure CSS Apple Pro Display XDR, Apple Pro Display XDR
136136
</div>
137137
</div>
138138
</div>
139-
<div class="docs-sponsor docs-sponsor-sidebar text-center">
140-
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
141-
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:120px;height:240px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="5087273059"></ins>
142-
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
143-
</div>
144139
<div class="columns">
145140
<ul class="pagination column">
146141
<div class="page-item page-prev"><a href="watches.html">

‎docs/assets/css/demo.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/computers.html‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -223,11 +223,6 @@ <h3 class="text-assistive">Pure CSS Surface Book, Surface Book in pure CSS</h3>
223223
</div>
224224
</div>
225225
</div>
226-
<div class="docs-sponsor docs-sponsor-sidebar text-center">
227-
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
228-
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:120px;height:240px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="5087273059"></ins>
229-
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
230-
</div>
231226
<div class="columns">
232227
<div class="content-container column col-md-12">
233228
<h2 class="rework-title" id="surface-studio">Surface Studio<a class="ml-2" href="#surface-studio">#</a></h2>

‎docs/index.html‎

Lines changed: 130 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -76,71 +76,143 @@ <h1 class="text-assistive">Devices.css</h1></a></div>
7676
<main class="section-main">
7777
<div class="container grid-md">
7878
<div class="columns">
79-
<div class="hero-container column col-md-12">
79+
<div class="hero-container column col-12">
8080
<div class="rework-hero">
8181
<div class="hero-content">
8282
<h1 class="hero-title">DEVICES.CSS</h1>
83-
<h2 class="hero-subtitle">Modern popular devices crafted in pure CSS</h2>
84-
<div class="hero-demo"> <a class="demo demo-iphone-14-pro" href="phones.html#iphone-14-pro" target="_blank">
85-
<div class="device device-iphone-14-pro">
86-
<div class="device-frame"><img class="device-screen" src="assets/img/bg-iphone-14-pro.jpg"></div>
87-
<div class="device-stripe"></div>
88-
<div class="device-header"></div>
89-
<div class="device-sensors"></div>
90-
<div class="device-btns"></div>
91-
<div class="device-power"></div>
92-
<div class="device-home"></div>
93-
</div></a><a class="demo demo-iphone-14" href="phones.html#iphone-14" target="_blank">
94-
<div class="device device-iphone-14">
95-
<div class="device-frame"><img class="device-screen" src="assets/img/bg-iphone-14.jpg"></div>
96-
<div class="device-stripe"></div>
97-
<div class="device-header"></div>
98-
<div class="device-sensors"></div>
99-
<div class="device-btns"></div>
100-
<div class="device-power"></div>
101-
<div class="device-home"></div>
102-
</div></a><a class="demo demo-google-pixel-6-pro" href="phones.html#google-pixel-6-pro" target="_blank">
103-
<div class="device device-google-pixel-6-pro">
104-
<div class="device-frame"><img class="device-screen" src="assets/img/bg-pixel-6.jpg" loading="lazy"></div>
105-
<div class="device-stripe"></div>
106-
<div class="device-header"></div>
107-
<div class="device-sensors"></div>
108-
<div class="device-btns"></div>
109-
<div class="device-power"></div>
110-
<div class="device-home"></div>
111-
</div></a><a class="demo demo-macbook-pro" href="computers.html#macbook-pro" target="_blank">
112-
<div class="device device-macbook-pro device-spacegray">
113-
<div class="device-frame"><img class="device-screen" src="assets/img/bg-10.jpg"></div>
114-
<div class="device-stripe"></div>
115-
<div class="device-header"></div>
116-
<div class="device-sensors"></div>
117-
<div class="device-btns"></div>
118-
<div class="device-power"></div>
119-
<div class="device-home"></div>
120-
</div></a><a class="demo demo-imac" href="computers.html#imac" target="_blank">
121-
<div class="device device-imac">
122-
<div class="device-frame"><img class="device-screen" src="assets/img/bg-08.jpg"></div>
123-
<div class="device-stripe"></div>
124-
<div class="device-header"></div>
125-
<div class="device-sensors"></div>
126-
<div class="device-btns"></div>
127-
<div class="device-power"></div>
128-
<div class="device-home"></div>
129-
</div></a><a class="demo demo-apple-watch-ultra" href="watches.html#apple-watch-ultra" target="_blank">
130-
<div class="device device-apple-watch-ultra">
131-
<div class="device-frame"><img class="device-screen" src="assets/img/bg-watch.jpg"></div>
132-
<div class="device-stripe"></div>
133-
<div class="device-header"></div>
134-
<div class="device-sensors"></div>
135-
<div class="device-btns"></div>
136-
<div class="device-power"></div>
137-
<div class="device-home"></div>
138-
</div></a></div>
139-
<p>All devices are elegantly developed in pure CSS. You can easily embed these minimal devices in landing pages and screenshot showcase pages. More devices are coming.</p>
83+
<h2 class="hero-subtitle">Modern devices crafted in pure CSS</h2>
14084
</div>
14185
</div>
14286
</div>
14387
</div>
88+
<div class="columns">
89+
<div class="column col-6 col-md-12"><a class="hero-section" href="phones.html#iphone-14-pro" target="_blank">
90+
<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>
91+
<div class="demo demo-iphone-14">
92+
<div class="device device-iphone-14">
93+
<div class="device-frame"><img class="device-screen" src="assets/img/bg-iphone-14.jpg"></div>
94+
<div class="device-stripe"></div>
95+
<div class="device-header"></div>
96+
<div class="device-sensors"></div>
97+
<div class="device-btns"></div>
98+
<div class="device-power"></div>
99+
<div class="device-home"></div>
100+
</div>
101+
</div>
102+
<div class="demo demo-iphone-14-pro">
103+
<div class="device device-iphone-14-pro">
104+
<div class="device-frame"><img class="device-screen" src="assets/img/bg-iphone-14-pro.jpg"></div>
105+
<div class="device-stripe"></div>
106+
<div class="device-header"></div>
107+
<div class="device-sensors"></div>
108+
<div class="device-btns"></div>
109+
<div class="device-power"></div>
110+
<div class="device-home"></div>
111+
</div>
112+
</div></a></div>
113+
<div class="column col-6 col-md-12"><a class="hero-section" href="computers.html#macbook-pro" target="_blank">
114+
<div class="demo-title">MacBook Pro</div>
115+
<div class="demo demo-macbook-pro">
116+
<div class="device device-macbook-pro">
117+
<div class="device-frame"><img class="device-screen" src="assets/img/bg-10.jpg"></div>
118+
<div class="device-stripe"></div>
119+
<div class="device-header"></div>
120+
<div class="device-sensors"></div>
121+
<div class="device-btns"></div>
122+
<div class="device-power"></div>
123+
<div class="device-home"></div>
124+
</div>
125+
</div></a></div>
126+
<div class="column col-6 col-md-12"><a class="hero-section" href="watches.html#apple-watch-ultra" target="_blank">
127+
<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>
128+
<div class="demo demo-apple-watch">
129+
<div class="device device-apple-watch-s8">
130+
<div class="device-frame"><img class="device-screen" src="assets/img/bg-watch.jpg"></div>
131+
<div class="device-stripe"></div>
132+
<div class="device-header"></div>
133+
<div class="device-sensors"></div>
134+
<div class="device-btns"></div>
135+
<div class="device-power"></div>
136+
<div class="device-home"></div>
137+
</div>
138+
</div>
139+
<div class="demo demo-apple-watch">
140+
<div class="device device-apple-watch-ultra">
141+
<div class="device-frame"><img class="device-screen" src="assets/img/bg-watch.jpg"></div>
142+
<div class="device-stripe"></div>
143+
<div class="device-header"></div>
144+
<div class="device-sensors"></div>
145+
<div class="device-btns"></div>
146+
<div class="device-power"></div>
147+
<div class="device-home"></div>
148+
</div>
149+
</div></a></div>
150+
<div class="column col-6 col-md-12"><a class="hero-section" href="computers.html#imac" target="_blank">
151+
<div class="demo-title">iMac<small class="label label-primary ml-2">NEW</small></div>
152+
<div class="demo demo-imac">
153+
<div class="device device-imac device-blue">
154+
<div class="device-frame"><img class="device-screen" src="assets/img/bg-08.jpg"></div>
155+
<div class="device-stripe"></div>
156+
<div class="device-header"></div>
157+
<div class="device-sensors"></div>
158+
<div class="device-btns"></div>
159+
<div class="device-power"></div>
160+
<div class="device-home"></div>
161+
</div>
162+
</div></a></div>
163+
<div class="column col-6 col-md-12"><a class="hero-section" href="tablets.html#ipad-pro" target="_blank">
164+
<div class="demo-title">iPad Pro<small class="label label-gray ml-2"> </small></div>
165+
<div class="demo demo-ipad-pro">
166+
<div class="device device-ipad-pro">
167+
<div class="device-frame"><img class="device-screen" src="assets/img/bg-01.jpg" loading="lazy"></div>
168+
<div class="device-stripe"></div>
169+
<div class="device-header"></div>
170+
<div class="device-sensors"></div>
171+
<div class="device-btns"></div>
172+
<div class="device-power"></div>
173+
<div class="device-home"></div>
174+
</div>
175+
</div></a></div>
176+
<div class="column col-6 col-md-12"><a class="hero-section" href="accessories.html#homepod" target="_blank">
177+
<div class="demo-title">HomePod<small class="label label-gray ml-2"> </small></div>
178+
<div class="demo demo-homepod">
179+
<div class="device device-homepod">
180+
<div class="device-frame"></div>
181+
<div class="device-stripe"></div>
182+
<div class="device-header"></div>
183+
<div class="device-sensors"></div>
184+
<div class="device-btns"></div>
185+
<div class="device-power"></div>
186+
<div class="device-home"></div>
187+
</div>
188+
</div></a></div>
189+
<div class="column col-6 col-md-12"><a class="hero-section" href="phones.html#google-pixel-6-pro" target="_blank">
190+
<div class="demo-title">Google Pixel 6 Pro<small class="label label-gray ml-2"> </small></div>
191+
<div class="demo demo-google-pixel-6-pro">
192+
<div class="device device-google-pixel-6-pro">
193+
<div class="device-frame"><img class="device-screen" src="assets/img/bg-pixel-6.jpg" loading="lazy"></div>
194+
<div class="device-stripe"></div>
195+
<div class="device-header"></div>
196+
<div class="device-sensors"></div>
197+
<div class="device-btns"></div>
198+
<div class="device-power"></div>
199+
<div class="device-home"></div>
200+
</div>
201+
</div></a></div>
202+
<div class="column col-6 col-md-12"><a class="hero-section" href="phones.html#the-iphone" target="_blank">
203+
<div class="demo-title">iPhone<small class="label label-gray ml-2">ORIGINAL</small></div>
204+
<div class="demo demo-the-iphone">
205+
<div class="device device-the-iphone">
206+
<div class="device-frame"><img class="device-screen" src="assets/img/bg-iphone.jpg"></div>
207+
<div class="device-stripe"></div>
208+
<div class="device-header"></div>
209+
<div class="device-sensors"></div>
210+
<div class="device-btns"></div>
211+
<div class="device-power"></div>
212+
<div class="device-home"></div>
213+
</div>
214+
</div></a></div>
215+
</div>
144216
</div>
145217
<footer class="section-footer">
146218
<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>

0 commit comments

Comments
 (0)