Devices

Landkit only

Easily wrap your screenshots in iPhone X or Macbook device frames or create combos of both. iPhone X screenshot should be 720 x 450px or of the same ratio. Macbook screenshot should be 500 x 1080px or of the same ratio.

... ...
... ...
<!-- iPhone -->
<div class="device device-iphonex">
  <img src="assets/img/screenshots/mobile/jobs.jpg" class="device-screen" alt="...">
  <img src="assets/img/devices/iphonex.svg" class="img-fluid" alt="...">
</div>

<!-- Macbook -->
<div class="device device-macbook">
  <img src="assets/img/screenshots/desktop/jobs.jpg" class="device-screen" alt="...">
  <img src="assets/img/devices/macbook.svg" class="img-fluid" alt="...">
</div>

Combo

Three options to combine devices are available.

... ...
... ...
... ...
... ...
... ...
... ...
<!-- Macbook + iPhone -->
<div class="device-combo device-combo-macbook-iphonex">

  <!-- iPhone -->
  <div class="device device-iphonex">
    <img src="assets/img/screenshots/mobile/jobs.jpg" class="device-screen" alt="...">
    <img src="assets/img/devices/iphonex.svg" class="img-fluid" alt="...">
  </div>

  <!-- Macbook -->
  <div class="device device-macbook">
    <img src="assets/img/screenshots/desktop/jobs.jpg" class="device-screen" alt="...">
    <img src="assets/img/devices/macbook.svg" class="img-fluid" alt="...">
  </div>

</div>

<!-- iPhone + iPhone -->
<div class="device-combo device-combo-iphonex-iphonex">

  <!-- iPhone -->
  <div class="device device-iphonex">
    <img src="assets/img/screenshots/mobile/jobs.jpg" class="device-screen" alt="...">
    <img src="assets/img/devices/iphonex.svg" class="img-fluid" alt="...">
  </div>

  <!-- iPhone -->
  <div class="device device-iphonex">
    <img src="assets/img/screenshots/mobile/jobs.jpg" class="device-screen" alt="...">
    <img src="assets/img/devices/iphonex.svg" class="img-fluid" alt="...">
  </div>

</div>

<!-- iPhone + Macbook -->
<div class="device-combo device-combo-iphonex-macbook">

  <!-- iPhone -->
  <div class="device device-iphonex">
    <img src="assets/img/screenshots/mobile/jobs.jpg" class="device-screen" alt="...">
    <img src="assets/img/devices/iphonex.svg" class="img-fluid" alt="...">
  </div>

  <!-- Macbook -->
  <div class="device device-macbook">
    <img src="assets/img/screenshots/desktop/jobs.jpg" class="device-screen" alt="...">
    <img src="assets/img/devices/macbook.svg" class="img-fluid" alt="...">
  </div>

</div>
Jump to