extends _layout/_layout.pug

block variables
  - var slug = 'tablets'
  - var parent = 'tablets'
  - var title = 'Tablets - Devices.css - Modern devices crafted in pure CSS'
  - var description = 'Pure CSS iPad Pro, iPad Pro (2017), Surface Pro devices. Pure CSS tablet devices mockups. Modern tablet devices crafted in pure CSS.'

block content
  .container.grid-md
    .columns
      .hero-container.column.col-md-12
        .rework-hero
          .hero-content
            h1.hero-title Tablets
            h2.hero-subtitle Modern tablet devices crafted in pure CSS
            h2.text-assistive Pure CSS iPad Pro, iPad Pro (2017), Surface Pro devices. Pure CSS tablet devices mockups. Modern tablet devices crafted in pure CSS.

    .columns
      .content-container.column.col-md-12
        h2.rework-title#ipad-pro
          | iPad Pro
          a.ml-2(href="#ipad-pro") #
        h3.text-assistive Pure CSS Apple iPad Pro, Apple iPad Pro in pure CSS
        .rework-content
          p 
        .rework-device.tablets
          .dots
            .dot.tooltip.active(style="background:#e2e3e4;" data-tooltip="device-silver (default)")
            .dot.tooltip(style="background:#83878a;" data-tooltip="device-spacegray")
          .device.device-ipad-pro
            .device-frame
              img.device-screen(src="assets/img/bg-01.jpg" loading="lazy")
            .device-stripe
            .device-header
            .device-sensors
            .device-btns
            .device-power
            .device-home
    .columns
      .content-container.column.col-md-12
        h2.rework-title#ipad-pro-2017
          | iPad Pro (2017)
          a.ml-2(href="#ipad-pro-2017") #
        h3.text-assistive Pure CSS Apple iPad Pro (2017), Apple iPad Pro (2017) in pure CSS
        .rework-content
          p 
        .rework-device.tablets
          .dots
            .dot.tooltip.active(style="background:#e2e3e4;" data-tooltip="device-silver (default)")
            .dot.tooltip(style="background:#f7e8dd;" data-tooltip="device-gold")
            .dot.tooltip(style="background:#facfc9;" data-tooltip="device-rosegold")
            .dot.tooltip(style="background:#83878a;" data-tooltip="device-spacegray")
          .device.device-ipad-pro-2017
            .device-frame
              img.device-screen(src="assets/img/bg-02.jpg" loading="lazy")
            .device-stripe
            .device-header
            .device-sensors
            .device-btns
            .device-power
            .device-home
    
    include _layout/_ad-g.pug
    
    .columns
      .content-container.column.col-md-12
        h2.rework-title#surface-pro-2017
          | Surface Pro (2017)
          a.ml-2(href="#surface-pro-2017") #
        h3.text-assistive Pure CSS Surface Pro (2017), Surface Pro (2017) in pure CSS
        .rework-content
          p 
        .rework-device.tablets
          .device.device-surface-pro-2017
            .device-frame
              img.device-screen(src="assets/img/bg-09.jpg" loading="lazy")
            .device-stripe
            .device-header
            .device-sensors
            .device-btns
            .device-power
            .device-home
    
    include _layout/_ad-sidebar.pug

    .columns 
      ul.pagination.column 
        .page-item.page-prev
          a(href="computers.html")
            .page-item-subtitle Previous
            .page-item-title.h5 Computers
        .page-item.page-next
          a(href="watches.html")
            .page-item-subtitle Next
            .page-item-title.h5 Watches