CSS Only Laptop Device Template

Preview:

Description:

A pure CSS laptop mockup/template designed to showcase anything in an ASCII art laptop device.

How to use it:

Import the stylesheet laptop.css into the HTML.

<link href="laptop.css" rel="stylesheet" />

Wrap your design to be showcased in the CSS laptop.

<div class="laptop">
  <img src="https://source.unsplash.com/aK5Dt6L6_hQ/400x300">
</div>

Adjust the laptop size. Possible sizes:

• laptop-sm
• laptop-lg

<div class="laptop-sm">
  <img src="https://source.unsplash.com/aK5Dt6L6_hQ/400x300">
</div>
<div class="laptop-lg">
  <img src="https://source.unsplash.com/aK5Dt6L6_hQ/400x300">
</div>