CSS Only Laptop Device Template

Category: CSS & CSS3 , Recommended | September 15, 2019
Author: jjkaufman
Views Total: 81
Official Page: Go to website
Last Update: September 15, 2019
License: MIT

Preview:

CSS Only Laptop Device Template

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>

You Might Be Interested In:


Leave a Reply